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

graph create maintenance

Browse Source
This commit is contained in:
Alessandro Francia
2018-05-24 15:20:15 +02:00
parent 1c41bd8655
commit 3d5ee3f232
5 changed files with 374 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/colors.less
+1
View File
@@ -31,6 +31,7 @@
@color-darkish-blue: #002680;
@color-darkish-blue-two: #004990;
@color-clear-blue: #1791ff;
@color-perrywinkle: #8eb5e2;
@color-white: #fff;
@color-input-light: #4b4b4b;
@color-warm-grey: #878787;
Step/wwwroot/assets/styles/base/modals.less
+167 -1
View File
@@ -259,6 +259,9 @@ sans-serif;
top: calc(~'50%' - @modal-create-maintenance-height /2);
left: calc(~'50%' - @modal-create-maintenance-width /2);
header{
font-size: 20px;
color: @color-cyan-blue;
padding-left: 23px;
button.close {
position: absolute;
width: 28px;
@@ -288,7 +291,170 @@ sans-serif;
color: @color-warm-grey;
}
.radiobutton{
margin-top: 17px;
font-size: 18px;
label[for=datefixed]{
margin-right: 209px;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
visibility: hidden;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
position: relative;
padding-left: 45px;
cursor: pointer;
line-height: 25px;
display: inline-block;
color: @color-cyan-blue;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
content: '';
width: 18px;
height: 18px;
background: @color-perrywinkle;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:checked + label{
font-weight: 600;
}
[type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
}
.title, .description{
display: flex;
flex-flow: column;
.title_lbl, .description_lbl{
margin-top: 22px;
margin-left: 24px;
font-size: 14px;
color: @color-warm-grey;
margin-bottom: 4px;
}
input{
font-size: 18px;
width: 416px;
height: 48px;
margin-left: 24px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 @color-black-50;
border: solid 1px @color-silver;
}
textarea{
border-radius: 2px;
width: 808px;
height: 97px;
margin-left: 24px;
box-shadow: inset 0 1px 3px 0 @color-black-50;
border: solid 1px @color-silver;
}
}
.time{
display: flex;
flex-flow: row;
.date, .end_time{
display: flex;
flex-flow: column;
.date_lbl, .end_time_lbl{
margin-top: 22px;
margin-left: 24px;
font-size: 14px;
color: @color-warm-grey;
margin-bottom: 4px;
}
input[type=date], input[type=time]{
width: 209px;
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;
}
input[type="date"]::-webkit-inner-spin-button{
display: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
color: rgba(0, 0, 0, 0);
opacity: 1;
display: block;
background: url(/assets/icons/_png/calendar-25x25.png) no-repeat;
width: 20px;
height: 20px;
border-width: thin;
}
input[type=time]{
width: 112px;
}
input[type=time]::-webkit-inner-spin-button,
input[type=time]::-webkit-outer-spin-button {
display: none;
}
}
}
.repeat{
display: flex;
flex-flow: column;
.repeat_lbl{
margin-top: 22px;
margin-left: 24px;
font-size: 14px;
color: @color-warm-grey;
margin-bottom: 4px;
}
.repeat_input{
display: flex;
flex-flow: row;
input[type=text], 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;
}
select{
width: 144px;
box-shadow: 0 1px 2px 0 @color-black-40;
margin-left: 16px;
padding-left: 16px;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(/assets/icons/_png/carets-up-down-blu-25x25.png) no-repeat 99% 50%;
}
}
}
Step/wwwroot/assets/styles/style.css
+189
View File
@@ -227,6 +227,11 @@
top: calc(50% - 348px);
left: calc(50% - 448px);
}
.modal.create-maintenance header {
font-size: 20px;
color: #002e6e;
padding-left: 23px;
}
.modal.create-maintenance header button.close {
position: absolute;
width: 28px;
@@ -255,6 +260,190 @@
line-height: 1.29;
color: #878787;
}
.modal.create-maintenance .typology .radiobutton {
margin-top: 17px;
font-size: 18px;
}
.modal.create-maintenance .typology .radiobutton label[for=datefixed] {
margin-right: 209px;
}
.modal.create-maintenance .typology .radiobutton [type="radio"]:checked,
.modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) {
visibility: hidden;
}
.modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label,
.modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) + label {
position: relative;
padding-left: 45px;
cursor: pointer;
line-height: 25px;
display: inline-block;
color: #002e6e;
}
.modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label:before,
.modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
.modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label:after,
.modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) + label:after {
content: '';
width: 18px;
height: 18px;
background: #8eb5e2;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label {
font-weight: 600;
}
.modal.create-maintenance .typology .radiobutton [type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.modal.create-maintenance .typology .radiobutton [type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.modal.create-maintenance .title,
.modal.create-maintenance .description {
display: flex;
flex-flow: column;
}
.modal.create-maintenance .title .title_lbl,
.modal.create-maintenance .description .title_lbl,
.modal.create-maintenance .title .description_lbl,
.modal.create-maintenance .description .description_lbl {
margin-top: 22px;
margin-left: 24px;
font-size: 14px;
color: #878787;
margin-bottom: 4px;
}
.modal.create-maintenance .title input,
.modal.create-maintenance .description input {
font-size: 18px;
width: 416px;
height: 48px;
margin-left: 24px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
border: solid 1px #bbbcbc;
}
.modal.create-maintenance .title textarea,
.modal.create-maintenance .description textarea {
border-radius: 2px;
width: 808px;
height: 97px;
margin-left: 24px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
border: solid 1px #bbbcbc;
}
.modal.create-maintenance .time {
display: flex;
flex-flow: row;
}
.modal.create-maintenance .time .date,
.modal.create-maintenance .time .end_time {
display: flex;
flex-flow: column;
}
.modal.create-maintenance .time .date .date_lbl,
.modal.create-maintenance .time .end_time .date_lbl,
.modal.create-maintenance .time .date .end_time_lbl,
.modal.create-maintenance .time .end_time .end_time_lbl {
margin-top: 22px;
margin-left: 24px;
font-size: 14px;
color: #878787;
margin-bottom: 4px;
}
.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],
.modal.create-maintenance .time .end_time input[type=time] {
width: 209px;
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;
}
.modal.create-maintenance .time .date input[type="date"]::-webkit-inner-spin-button,
.modal.create-maintenance .time .end_time input[type="date"]::-webkit-inner-spin-button {
display: none;
}
.modal.create-maintenance .time .date input[type="date"]::-webkit-calendar-picker-indicator,
.modal.create-maintenance .time .end_time input[type="date"]::-webkit-calendar-picker-indicator {
color: rgba(0, 0, 0, 0);
opacity: 1;
display: block;
background: url(/assets/icons/_png/calendar-25x25.png) no-repeat;
width: 20px;
height: 20px;
border-width: thin;
}
.modal.create-maintenance .time .date input[type=time],
.modal.create-maintenance .time .end_time input[type=time] {
width: 112px;
}
.modal.create-maintenance .time .date input[type=time]::-webkit-inner-spin-button,
.modal.create-maintenance .time .end_time input[type=time]::-webkit-inner-spin-button,
.modal.create-maintenance .time .date input[type=time]::-webkit-outer-spin-button,
.modal.create-maintenance .time .end_time input[type=time]::-webkit-outer-spin-button {
display: none;
}
.modal.create-maintenance .repeat {
display: flex;
flex-flow: column;
}
.modal.create-maintenance .repeat .repeat_lbl {
margin-top: 22px;
margin-left: 24px;
font-size: 14px;
color: #878787;
margin-bottom: 4px;
}
.modal.create-maintenance .repeat .repeat_input {
display: flex;
flex-flow: row;
}
.modal.create-maintenance .repeat .repeat_input input[type=text],
.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;
}
.modal.create-maintenance .repeat .repeat_input select {
width: 144px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
margin-left: 16px;
padding-left: 16px;
}
.modal.create-maintenance .repeat .repeat_input select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(/assets/icons/_png/carets-up-down-blu-25x25.png) no-repeat 99% 50%;
}
.row {
display: flex;
width: 100%;
Step/wwwroot/src/modules/create-maintenance.ts
+8
View File
@@ -0,0 +1,8 @@
import Vue from "vue";
import Component from "vue-class-component";
import { Modal, ModalHelper } from "./base-components";
@Component({ name: "createMaintenance", components: { modal: Modal } })
export default class CreateMaintenance extends Vue {
public test: string = "datefixed";
}
Step/wwwroot/src/modules/create-maintenance.vue
+9 -18
View File
@@ -4,11 +4,10 @@
<div class="typology">
<label class="typology_lbl">{{'create_maintenance_lbl_typology' | localize("Tipologia")}}</label>
<div class="radiobutton">
<label><input type="radio">Evento Macchina</label>
<label><input type="radio">Temporale</label>
<input type="radio" id="datefixed" name="radio-group" v-model="test" value="datefixed"><label for="datefixed">Data Fissa</label>
<input type="radio" id="time" name="radio-group" v-model="test" value="time"><label for="time">Temporale</label>
</div>
</div>
<div>
<div class="title">
<label class="title_lbl">{{'create_maintenance_lbl_title' | localize("Titolo")}}</label>
<input type="text">
@@ -17,26 +16,23 @@
<label class="description_lbl">{{'create_maintenance_lbl_description' | localize("Descrizione")}}</label>
<textarea></textarea>
</div>
<div class="time">
<div class="time" v-if="test == 'datefixed'">
<div class="date">
<label class="date_lbl">{{'create_maintenance_lbl_date' | localize("Data")}}</label>
<input type="date">
</div>
<div class="start_time">
<label class="start_time_lbl">{{'create_maintenance_lbl_start_time' | localize("Ora inizio")}}</label>
<input type="time">
</div>
<div class="end_time">
<label class="end_time_lbl">{{'create_maintenance_lbl_end_time' | localize("Ora fine")}}</label>
<input type="time">
</div>
</div>
<div class="repeat">
<div class="repeat" v-if="test == 'time'">
<label class="repeat_lbl">{{'create_maintenance_lbl_repeat' | localize("Ripeti ogni")}}</label>
<input type="text">
<select><option>giorni</option></select>
<div class="repeat_input">
<input type="text">
<select><option>giorni</option></select>
</div>
</div>
</div>
<footer>
<div class="pull-right">
<button class="btn">{{'create_maintenance_btn_cancel' | localize("Annulla")}}</button>
@@ -45,9 +41,4 @@
</footer>
</modal>
</template>
<script>
import { Modal, ModalHelper } from "./base-components";
export default {
components:{modal: Modal}
}
</script>
<script src="./create-maintenance.ts" lang="ts"></script>