Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix create-maintenance date picker

Browse Source
This commit is contained in:
Nicola Carminati
2018-11-09 14:22:49 +01:00
parent 78b16e4e63
commit bbf38c3ddc
4 changed files with 139 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/modals.less
+48 -2
View File
@@ -432,6 +432,49 @@
color: @color-warm-grey;
margin-bottom: 4px;
}
.data_Selector{
width: 209px;
height: 48px;
font-size: 18px;
margin-left: 24px;
border-radius: 2px;
box-shadow: none;
border: solid 1px @color-silver;
}
.time_Selector{
width: 110px;
height: 48px;
font-size: 18px;
margin-left: 24px;
border-radius: 2px;
box-shadow: none;
border: solid 1px @color-silver;
}
.data_Selector, .time_Selector{
.mx-input{
border: none;
border-radius: 0px;
height: 48px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
color: initial;
}
.mx-input-append{
width: 37px;
}
.mx-calendar-icon{
color: @color-cyan-blue;
stroke-width: 12px;
}
.actived{
background-color:@color-cyan-blue;
}
.today{
background-color: @color-faded-red;
border-radius: 16px;
color: #fff;
}
}
input[type="date"],
input[type="time"] {
width: 209px;
@@ -480,15 +523,18 @@
select {
width: 56px;
height: 48px;
font-size: 18px;
margin-left: 24px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 @color-black-50;
border: solid 1px @color-silver;
box-sizing: border-box;
}
input[type="text"]{
padding: 10px;
}
select {
width: 144px;
box-shadow: 0 1px 2px 0 @color-black-40;
box-shadow: inset 0 1px 3px 0 @color-black-50;
margin-left: 16px;
padding-left: 16px;
}
Step/wwwroot/assets/styles/style.css
+62 -2
View File
@@ -390,6 +390,63 @@
color: #878787;
margin-bottom: 4px;
}
.modal.create-maintenance .time .date .data_Selector,
.modal.create-maintenance .time .end_time .data_Selector {
width: 209px;
height: 48px;
font-size: 18px;
margin-left: 24px;
border-radius: 2px;
box-shadow: none;
border: solid 1px #bbbcbc;
}
.modal.create-maintenance .time .date .time_Selector,
.modal.create-maintenance .time .end_time .time_Selector {
width: 110px;
height: 48px;
font-size: 18px;
margin-left: 24px;
border-radius: 2px;
box-shadow: none;
border: solid 1px #bbbcbc;
}
.modal.create-maintenance .time .date .data_Selector .mx-input,
.modal.create-maintenance .time .end_time .data_Selector .mx-input,
.modal.create-maintenance .time .date .time_Selector .mx-input,
.modal.create-maintenance .time .end_time .time_Selector .mx-input {
border: none;
border-radius: 0px;
height: 48px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
color: initial;
}
.modal.create-maintenance .time .date .data_Selector .mx-input-append,
.modal.create-maintenance .time .end_time .data_Selector .mx-input-append,
.modal.create-maintenance .time .date .time_Selector .mx-input-append,
.modal.create-maintenance .time .end_time .time_Selector .mx-input-append {
width: 37px;
}
.modal.create-maintenance .time .date .data_Selector .mx-calendar-icon,
.modal.create-maintenance .time .end_time .data_Selector .mx-calendar-icon,
.modal.create-maintenance .time .date .time_Selector .mx-calendar-icon,
.modal.create-maintenance .time .end_time .time_Selector .mx-calendar-icon {
color: #002e6e;
stroke-width: 12px;
}
.modal.create-maintenance .time .date .data_Selector .actived,
.modal.create-maintenance .time .end_time .data_Selector .actived,
.modal.create-maintenance .time .date .time_Selector .actived,
.modal.create-maintenance .time .end_time .time_Selector .actived {
background-color: #002e6e;
}
.modal.create-maintenance .time .date .data_Selector .today,
.modal.create-maintenance .time .end_time .data_Selector .today,
.modal.create-maintenance .time .date .time_Selector .today,
.modal.create-maintenance .time .end_time .time_Selector .today {
background-color: #d84b5c;
border-radius: 16px;
color: #fff;
}
.modal.create-maintenance .time .date input[type="date"],
.modal.create-maintenance .time .end_time input[type="date"],
.modal.create-maintenance .time .date input[type="time"],
@@ -445,15 +502,18 @@
.modal.create-maintenance .repeat .repeat_input select {
width: 56px;
height: 48px;
font-size: 18px;
margin-left: 24px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
border: solid 1px #bbbcbc;
box-sizing: border-box;
}
.modal.create-maintenance .repeat .repeat_input input[type="text"] {
padding: 10px;
}
.modal.create-maintenance .repeat .repeat_input select {
width: 144px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
margin-left: 16px;
padding-left: 16px;
}
Step/wwwroot/package.json
+1 -1
View File
@@ -23,7 +23,7 @@
"vue-smooth-dnd": "0.2.1",
"vue2-ace-editor": "0.0.11",
"brace": "0.11.1",
"vue2-datepicker" : "2.6.2"
"vue2-datepicker": "2.6.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
Step/wwwroot/src/modules/create-maintenance.vue
+28 -7
View File
@@ -19,12 +19,29 @@
</div>
<div class="time" v-if="newMaintenance.type == 'EXP_DATE'">
<div class="date">
<label class="date_lbl">{{'create_maintenance_lbl_date' | localize("Data")}}</label>
<input type="date" v-validate.initial="{required: true}" v-model="newMaintenance.date">
<label class="date_lbl">{{'create_maintenance_lbl_date' | localize("Data")}}</label>
<date-picker
type="date"
lang="it"
v-model="newMaintenance.date"
class="data_Selector"
:format="dataformat()"
:clearable="false"
:placeholder="'create_maintenance_lbl_date' | localize('Data')"
v-validate.initial="{required: true}"></date-picker>
</div>
<div class="end_time">
<label class="end_time_lbl">{{'create_maintenance_lbl_end_time' | localize("Ora fine")}}</label>
<input type="time" v-validate.initial="{required: true}" v-model="newMaintenance.time" >
<date-picker
type="time"
:minute-step=1
lang="it"
v-model="newMaintenance.time"
class="time_Selector"
:format="timeformat()"
:clearable="false"
:placeholder="'create_maintenance_lbl_end_time' | localize('Ora fine')"
v-validate.initial="{required: true}" ></date-picker>
</div>
</div>
<div class="repeat" v-if="newMaintenance.type == 'TIME_INTERVAL'">
@@ -56,12 +73,10 @@ import { MaintenanceService } from "../services/maintenanceService";
import { store } from "src/store";
import { maintenanceActions } from "../store/maintenance.store";
import moment from "moment";
import DatePicker from "vue2-datepicker";
export default {
components: { modal: Modal },
// props: {
// datafixed: {default:"datafixed"}
// },
components: { modal: Modal, datePicker: DatePicker },
data: function(){
return {
newMaintenance: {type: "EXP_DATE"},
@@ -85,6 +100,12 @@ export default {
Factory.Get(MessageService).deleteChannel("esc_pressed");
ModalHelper.HideModal();
},
dataformat(){
return moment()._locale._longDateFormat.L;
},
timeformat(){
return moment()._locale._longDateFormat.LT;
},
async save(maintenance){
if(maintenance.type == "EXP_DATE"){
let dateTime = moment(maintenance.date + ' ' + maintenance.time);