toggle & combo

This commit is contained in:
=
2020-07-28 09:41:58 +02:00
parent 30ac1496e2
commit 54573c76b1
23 changed files with 207 additions and 96 deletions
@@ -337,6 +337,8 @@ button.soft {
.togglebutton {
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
}
.togglebutton,
@@ -374,6 +376,11 @@ fieldset[disabled] .form-group.is-focused .togglebutton label {
.togglebutton label .toggle {
text-align: left;
margin-left: 5px;
&.error {
background-color: rgba(255, 0, 0, .7);
color: #222;
}
}
.togglebutton label .toggle,
@@ -5895,6 +5895,10 @@ fieldset[disabled] .form-group.is-focused .togglebutton label {
text-align: left;
margin-left: 5px;
}
.togglebutton label .toggle.error {
background-color: rgba(255, 0, 0, 0.7);
color: #222;
}
.togglebutton label .toggle,
.togglebutton label input[type=checkbox][disabled] + .toggle {
content: "";
@@ -1,6 +1,6 @@
<template>
<div class="combo">
<div class="form" @click="showList">
<div class="form" @click="showList" :class="{'error': value.status && value.status.hasError}">
{{currentValue}}
<i v-if="opened" class="fa fa-chevron-up" />
<i v-else class="fa fa-chevron-down" />
@@ -53,6 +53,10 @@
cursor: pointer;
}
.combo .form.error {
outline: 2px red auto;
}
.combo .form i {
position: absolute;
right: 4px;
@@ -1,68 +1,71 @@
<template>
<div class="setup">
<modal type="progr-preriscaldo-info" :title="'progr-preriscaldo_lbl_title' | localize('Programmazione preriscaldo')">
<section>
<aside class="scrollable auto">
<div class="input-area">
<label>Abilitazione</label>
<toggle-button v-model="enabling"></toggle-button>
</div>
<hr>
<div class="input-area">
<label>Riscaldi</label>
<toggle-button v-model="risc"></toggle-button>
</div>
<div class="input-area">
<label>Termoregolatore</label>
<toggle-button v-model="termo"></toggle-button>
</div>
<div class="input-area">
<label>Blocca schermo</label>
<toggle-button v-model="block"></toggle-button>
</div>
<button @click="showPreDashboard()">Mostra countdown</button>
</aside>
<hr>
<div class="specific">
<label>{{active}} alle ore {{hours}}:00 {{meridian}}</label>
<div>
<button :class="{'active':active=='Lunedì'}" @click="active='Lunedì'">Lunedì</button>
<button :class="{'active':active=='Martedì'}" @click="active='Martedì'">Martedì</button>
<button :class="{'active':active=='Mercoledì'}" @click="active='Mercoledì'">Mercoledì</button>
<button :class="{'active':active=='Giovedì'}" @click="active='Giovedì'">Giovedì</button>
<button :class="{'active':active=='Venerdì'}" @click="active='Venerdì'">Vener</button>
<button :class="{'active':active=='Sabato'}" @click="active='Sabato'">Sabato</button>
<button :class="{'active':active=='Domenica'}" @click="active='Domenica'">Domenica</button>
</div>
<div>
<div>
<label>{{hours}}:00</label>
<label>{{meridian}}</label>
</div>
<div class="clock">
<button class="btn1" :class="{'selected':hours=='1'}" @click="hours='1'">1</button>
<button class="btn2" :class="{'selected':hours=='2'}" @click="hours='2'">2</button>
<button class="btn3" :class="{'selected':hours=='3'}" @click="hours='3'">3</button>
<button class="btn4" :class="{'selected':hours=='4'}" @click="hours='4'">4</button>
<button class="btn5" :class="{'selected':hours=='5'}" @click="hours='5'">5</button>
<button class="btn6" :class="{'selected':hours=='6'}" @click="hours='6'">6</button>
<button class="btn7" :class="{'selected':hours=='7'}" @click="hours='7'">7</button>
<button class="btn8" :class="{'selected':hours=='8'}" @click="hours='8'">8</button>
<button class="btn9" :class="{'selected':hours=='9'}" @click="hours='9'">9</button>
<button class="btn10" :class="{'selected':hours=='10'}" @click="hours='10'">10</button>
<button class="btn11" :class="{'selected':hours=='11'}" @click="hours='11'">11</button>
<button class="btn12" :class="{'selected':hours=='12'}" @click="hours='12'">12</button>
<span></span>
</div>
<div>
<button @click="meridian='AM'">AM</button>
<button @click="meridian='PM'">PM</button>
</div>
</div>
</div>
</section>
</modal>
</div>
<div class="setup">
<modal
type="progr-preriscaldo-info"
:title="'progr-preriscaldo_lbl_title' | localize('Programmazione preriscaldo')"
>
<section>
<aside class="scrollable auto">
<div class="input-area">
<label>Abilitazione</label>
<toggle-button v-model="enabling"></toggle-button>
</div>
<hr />
<div class="input-area">
<label>Riscaldi</label>
<toggle-button v-model="risc"></toggle-button>
</div>
<div class="input-area">
<label>Termoregolatore</label>
<toggle-button v-model="termo"></toggle-button>
</div>
<div class="input-area">
<label>Blocca schermo</label>
<toggle-button v-model="block"></toggle-button>
</div>
<button @click="showPreDashboard()">Mostra countdown</button>
</aside>
<hr />
<div class="specific">
<label>{{active}} alle ore {{hours}}:00 {{meridian}}</label>
<div>
<button :class="{'active':active=='Lunedì'}" @click="active='Lunedì'">Lunedì</button>
<button :class="{'active':active=='Martedì'}" @click="active='Martedì'">Marte</button>
<button :class="{'active':active=='Mercoledì'}" @click="active='Mercoledì'">Mercoledì</button>
<button :class="{'active':active=='Giovedì'}" @click="active='Giovedì'">Giovedì</button>
<button :class="{'active':active=='Venerdì'}" @click="active='Venerdì'">Venerdì</button>
<button :class="{'active':active=='Sabato'}" @click="active='Sabato'">Sabato</button>
<button :class="{'active':active=='Domenica'}" @click="active='Domenica'">Domenica</button>
</div>
<div>
<div>
<label>{{hours}}:00</label>
<label>{{meridian}}</label>
</div>
<div class="clock">
<button class="btn1" :class="{'selected':hours=='1'}" @click="hours='1'">1</button>
<button class="btn2" :class="{'selected':hours=='2'}" @click="hours='2'">2</button>
<button class="btn3" :class="{'selected':hours=='3'}" @click="hours='3'">3</button>
<button class="btn4" :class="{'selected':hours=='4'}" @click="hours='4'">4</button>
<button class="btn5" :class="{'selected':hours=='5'}" @click="hours='5'">5</button>
<button class="btn6" :class="{'selected':hours=='6'}" @click="hours='6'">6</button>
<button class="btn7" :class="{'selected':hours=='7'}" @click="hours='7'">7</button>
<button class="btn8" :class="{'selected':hours=='8'}" @click="hours='8'">8</button>
<button class="btn9" :class="{'selected':hours=='9'}" @click="hours='9'">9</button>
<button class="btn10" :class="{'selected':hours=='10'}" @click="hours='10'">10</button>
<button class="btn11" :class="{'selected':hours=='11'}" @click="hours='11'">11</button>
<button class="btn12" :class="{'selected':hours=='12'}" @click="hours='12'">12</button>
<span></span>
</div>
<div>
<button @click="meridian='AM'">AM</button>
<button @click="meridian='PM'">PM</button>
</div>
</div>
</div>
</section>
</modal>
</div>
</template>
<script lang="ts" src="./programmazione-preriscaldo.ts"></script>
@@ -6,7 +6,10 @@
<template v-if="recipe.cycle_loader_enable.status.visible">
<div class="input-area">
<label>{{'cycle_loader_enable'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.cycle_loader_enable.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_loader_enable.setpointHMI"
:status="recipe.cycle_loader_enable.status"
></toggle-button>
</div>
</template>
<hr />
@@ -48,37 +51,55 @@
<template v-if="recipe.cycle_loader_center_x.status.visible">
<div class="input-area">
<label>{{'cycle_loader_center_x'|localize('Centratura X')}}</label>
<toggle-button v-model="recipe.cycle_loader_center_x.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_loader_center_x.setpointHMI"
:status="recipe.cycle_loader_center_x.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cycle_loader_center_y.status.visible">
<div class="input-area">
<label>{{'cycle_loader_center_y'|localize('Centratura Y')}}</label>
<toggle-button v-model="recipe.cycle_loader_center_y.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_loader_center_y.setpointHMI"
:status="recipe.cycle_loader_center_y.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cycle_loader_checktichness_enabled.status.visible">
<div class="input-area">
<label>{{'cycle_loader_checktichness_enabled'|localize('Controllo spessore')}}</label>
<toggle-button v-model="recipe.cycle_loader_checktichness_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_loader_checktichness_enabled.setpointHMI"
:status="recipe.cycle_loader_checktichness_enabled.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cycle_loader_suckers_vacuum.status.visible">
<div class="input-area">
<label>{{'cycle_loader_suckers_vacuum'|localize('Vuoto ventose')}}</label>
<toggle-button v-model="recipe.cycle_loader_suckers_vacuum.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_loader_suckers_vacuum.setpointHMI"
:status="recipe.cycle_loader_suckers_vacuum.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cycle_loader_ionizer_enabled.status.visible">
<div class="input-area">
<label>{{'cycle_loader_ionizer_enabled'|localize('Abilitazione ionizzatore')}}</label>
<toggle-button v-model="recipe.cycle_loader_ionizer_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_loader_ionizer_enabled.setpointHMI"
:status="recipe.cycle_loader_ionizer_enabled.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cycle_loader_manualunloading_enabled.status.visible">
<div class="input-area">
<label>{{'cycle_loader_manualunloading_enabled'|localize('Funzione scarico pezzo manuale')}}</label>
<toggle-button v-model="recipe.cycle_loader_manualunloading_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_loader_manualunloading_enabled.setpointHMI"
:status="recipe.cycle_loader_manualunloading_enabled.status"
></toggle-button>
</div>
</template>
</div>
@@ -12,19 +12,28 @@
<template v-if="recipe.cycle_forming_pause_cycle.status.visible">
<div class="input-area">
<label>{{'cycle_forming_pause_cycle'|localize('Pausa ciclo')}}</label>
<toggle-button v-model="recipe.cycle_forming_pause_cycle.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_forming_pause_cycle.setpointHMI"
:status="recipe.cycle_forming_pause_cycle.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cycle_forming_cooling_enabled.status.visible">
<div class="input-area">
<label>{{'cycle_forming_cooling_enabled'|localize('Raffreddamento fine ciclo')}}</label>
<toggle-button v-model="recipe.cycle_forming_cooling_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_forming_cooling_enabled.setpointHMI"
:status="recipe.cycle_forming_cooling_enabled.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cycle_forming_blowingbox_enabled.status.visible">
<div class="input-area">
<label>{{'cycle_forming_blowingbox_enabled'|localize('Ventilazione cassone fine ciclo')}}</label>
<toggle-button v-model="recipe.cycle_forming_blowingbox_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_forming_blowingbox_enabled.setpointHMI"
:status="recipe.cycle_forming_blowingbox_enabled.status"
></toggle-button>
</div>
</template>
</div>
@@ -7,7 +7,10 @@
<template v-if="recipe.cycle_acrylicframe_enabled.status.visible">
<div class="input-area">
<label>{{'cycle_acrylicframe_enabled'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.cycle_acrylicframe_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_acrylicframe_enabled.setpointHMI"
:status="recipe.cycle_acrylicframe_enabled.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cycle_acrylicframe_time.status.visible">
@@ -7,7 +7,10 @@
<template v-if="recipe.cycle_upperoverheating_enabled.status.visible">
<div class="input-area">
<label>{{'cycle_upperoverheating_enabled'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.cycle_upperoverheating_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cycle_upperoverheating_enabled.setpointHMI"
:status="recipe.cycle_upperoverheating_enabled.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cycle_upperoverheating_time.status.visible">
@@ -6,7 +6,10 @@
<template v-if="recipe.upperplate_air_enable.status.visible">
<div class="input-area">
<label>{{'upperplate_air_enable'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.upperplate_air_enable.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.upperplate_air_enable.setpointHMI"
:status="recipe.upperplate_air_enable.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.upperplate_air_delay.status.visible">
@@ -6,7 +6,10 @@
<template v-if="recipe.upperplate_extraction_enable.status.visible">
<div class="input-area">
<label>{{'upperplate_extraction_enable'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.upperplate_extraction_enable.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.upperplate_extraction_enable.setpointHMI"
:status="recipe.upperplate_extraction_enable.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.upperplate_extraction_delay.status.visible">
@@ -6,7 +6,10 @@
<template v-if="recipe.upperplate_vacuum_enable.status.visible">
<div class="input-area">
<label>{{'upperplate_vacuum_enable'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.upperplate_vacuum_enable.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.upperplate_vacuum_enable.setpointHMI"
:status="recipe.upperplate_vacuum_enable.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.upperplate_vacuum_delay.status.visible">
@@ -6,7 +6,10 @@
<template v-if="recipe.extraction_aux_enabled.status.visible">
<div class="input-area">
<label>{{'extraction_aux_enabled'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.extraction_aux_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.extraction_aux_enabled.setpointHMI"
:status="recipe.extraction_aux_enabled.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.extraction_aux_delay.status.visible">
@@ -4,7 +4,7 @@
<template v-if="abilitazione.status.visible">
<div class="input-area">
<label>{{'options_thermoregulator__enabled'|localize('Abilitazione')}}</label>
<toggle-button v-model="abilitazione.setpointHMI"></toggle-button>
<toggle-button v-model="abilitazione.setpointHMI" :status="abilitazione.status"></toggle-button>
</div>
</template>
<template v-if="setpoint.status.visible">
@@ -6,7 +6,10 @@
<template v-if="recipe.cooling_pyrometer_enabled.status.visible">
<div class="input-area">
<label>{{'cooling_pyrometer_enabled'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.cooling_pyrometer_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cooling_pyrometer_enabled.setpointHMI"
:status="recipe.cooling_pyrometer_enabled.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cooling_pyrometer_setpoint.status.visible">
@@ -6,7 +6,10 @@
<template v-if="recipe.cooling_telescopic_enable.status.visible">
<div class="input-area">
<label>{{'cooling_telescopic_enable'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.cooling_telescopic_enable.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cooling_telescopic_enable.setpointHMI"
:status="recipe.cooling_telescopic_enable.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cooling_telescopic_position.status.visible">
@@ -19,7 +22,10 @@
<template v-if="recipe.cooling_telescopic_swing_enable.status.visible">
<div class="input-area">
<label>{{'cooling_telescopic_swing_enable'|localize('Abilitazione oscillazione')}}</label>
<toggle-button v-model="recipe.cooling_telescopic_swing_enable.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.cooling_telescopic_swing_enable.setpointHMI"
:status="recipe.cooling_telescopic_swing_enable.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.cooling_telescopic_swing_stroke.status.visible">
@@ -6,7 +6,10 @@
<template v-if="recipe.heats_lowerheaters_enabled.status.visible">
<div class="input-area">
<label>{{'heats_lowerheaters_enabled'|localize('Abilitazione riscaldo')}}</label>
<toggle-button v-model="recipe.heats_lowerheaters_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.heats_lowerheaters_enabled.setpointHMI"
:status="recipe.heats_lowerheaters_enabled.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.heats_lowerheaters_max_time.status.visible">
@@ -71,13 +74,19 @@
<template v-if="recipe.heats_lowerheaters_oscillation.status.visible">
<div>
<label>{{'heats_lowerheaters_oscillation'|localize('Oscillazione')}}</label>
<toggle-button v-model="recipe.heats_lowerheaters_oscillation.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.heats_lowerheaters_oscillation.setpointHMI"
:status="recipe.heats_lowerheaters_oscillation.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.heats_lowerheaters_movement_enabled.status.visible">
<div>
<label>{{'heats_lowerheaters_movement_enabled'|localize('Movimento')}}</label>
<toggle-button v-model="recipe.heats_lowerheaters_movement_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.heats_lowerheaters_movement_enabled.setpointHMI"
:status="recipe.heats_lowerheaters_movement_enabled.status"
></toggle-button>
</div>
</template>
</div>
@@ -6,7 +6,10 @@
<template v-if="recipe.heats_upperheaters_enabled.status.visible">
<div class="input-area">
<label>{{'heats_upperheaters_enabled'|localize('Abilitazione riscaldo')}}</label>
<toggle-button v-model="recipe.heats_upperheaters_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.heats_upperheaters_enabled.setpointHMI"
:status="recipe.heats_upperheaters_enabled.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.heats_upperheaters_max_time.status.visible">
@@ -71,13 +74,19 @@
<template v-if="recipe.heats_upperheaters_oscillation.status.visible">
<div>
<label>{{'heats_upperheaters_oscillation'|localize('Oscillazione')}}</label>
<toggle-button v-model="recipe.heats_upperheaters_oscillation.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.heats_upperheaters_oscillation.setpointHMI"
:status="recipe.heats_upperheaters_oscillation.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.heats_upperheaters_movement_enabled.status.visible">
<div>
<label>{{'heats_upperheaters_movement_enabled'|localize('Movimento')}}</label>
<toggle-button v-model="recipe.heats_upperheaters_movement_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.heats_upperheaters_movement_enabled.setpointHMI"
:status="recipe.heats_upperheaters_movement_enabled.status"
></toggle-button>
</div>
</template>
</div>
@@ -47,7 +47,10 @@
<template v-if="recipe.heats_decomsustain_smoke_function_enabled.status.visible">
<div class="input-area">
<label>{{'heats_decomsustain_smoke_function_enabled'|localize('Funzione "fumo"')}}</label>
<toggle-button v-model="recipe.heats_decomsustain_smoke_function_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.heats_decomsustain_smoke_function_enabled.setpointHMI"
:status="recipe.heats_decomsustain_smoke_function_enabled.status"
></toggle-button>
</div>
</template>
</div>
@@ -6,7 +6,10 @@
<template v-if="recipe.vacuum_pre_enabled.status.visible">
<div class="input-area">
<label>{{'vacuum_pre_enabled'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.vacuum_pre_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.vacuum_pre_enabled.setpointHMI"
:status="recipe.vacuum_pre_enabled.status"
></toggle-button>
</div>
</template>
<hr />
@@ -6,7 +6,10 @@
<template v-if="recipe.vacuum_aux_enabled.status.visible">
<div class="input-area">
<label>{{'vacuum_aux_enabled'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.vacuum_aux_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.vacuum_aux_enabled.setpointHMI"
:status="recipe.vacuum_aux_enabled.status"
></toggle-button>
</div>
</template>
<hr />
@@ -6,7 +6,10 @@
<template v-if="recipe.vacuum_direct_enabled.status.visible">
<div class="input-area">
<label>{{'vacuum_direct_enabled'|localize('Abilitazione')}}</label>
<toggle-button v-model="recipe.vacuum_direct_enabled.setpointHMI"></toggle-button>
<toggle-button
v-model="recipe.vacuum_direct_enabled.setpointHMI"
:status="recipe.vacuum_direct_enabled.status"
></toggle-button>
</div>
</template>
<template v-if="recipe.vacuum_direct_delay.status.visible">
@@ -17,6 +17,9 @@ export default class ToggleButton extends Vue {
@Prop({ default: null })
value;
@Prop({ default: null })
status;
get bindingValue() {
return this.value;
};
@@ -2,7 +2,10 @@
<div class="togglebutton big">
<label>
<input type="checkbox" v-model="bindingValue" :disabled="readOnly" />
<span class="toggle">{{bindingValue ? onLabel : offLabel}}</span>
<span
class="toggle"
:class="{'error': status && status.hasError}"
>{{bindingValue ? onLabel : offLabel}}</span>
</label>
</div>
</template>