From 54573c76b1b8bcdbc7fcc83f1aa110bb4cba7ddb Mon Sep 17 00:00:00 2001
From: = <paolo@teamdev.it>
Date: Tue, 28 Jul 2020 09:41:58 +0200
Subject: [PATCH] toggle & combo

---
 .../wwwroot/assets/styles/base/buttons.less   |   7 +
 Thermo.Active/wwwroot/assets/styles/style.css |   4 +
 .../app_modules_thermo/components/combo.vue   |   6 +-
 .../components/programmazione-preriscaldo.vue | 131 +++++++++---------
 .../components/base-components/caricatore.vue |  35 ++++-
 .../base-components/ciclo-formatura.vue       |  15 +-
 .../base-components/formatura-acrilico.vue    |   5 +-
 .../base-components/formatura-riscaldo.vue    |   5 +-
 .../base-components/aria-controstampo.vue     |   5 +-
 .../estrazione-controstampo.vue               |   5 +-
 .../base-components/vuoto-controstampo.vue    |   5 +-
 .../base-components/estrazione-secondaria.vue |   5 +-
 .../components/base-components/inputTermo.vue |   2 +-
 .../components/base-components/pirometro.vue  |   5 +-
 .../components/base-components/telescopi.vue  |  10 +-
 .../base-components/riscaldi-inferiori.vue    |  15 +-
 .../base-components/riscaldi-superiori.vue    |  15 +-
 .../sostentamento-decompressione.vue          |   5 +-
 .../setup/vuoto/base-components/prevuoto.vue  |   5 +-
 .../base-components/vuoto-ausiliario.vue      |   5 +-
 .../vuoto/base-components/vuoto-diretto.vue   |   5 +-
 .../wwwroot/src/components/toggleButton.ts    |   3 +
 .../wwwroot/src/components/toggleButton.vue   |   5 +-
 23 files changed, 207 insertions(+), 96 deletions(-)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/buttons.less b/Thermo.Active/wwwroot/assets/styles/base/buttons.less
index 41ba9fce..aaa662ad 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/buttons.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/buttons.less
@@ -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,
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 4e6d1cc5..541d102b 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -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: "";
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/combo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/combo.vue
index afb550ab..a76bb8ba 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/combo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/combo.vue
@@ -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;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.vue
index 0bb2700c..766cb74c 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.vue
@@ -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ì'">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>
+	<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ì'">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>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/caricatore.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/caricatore.vue
index 95489c37..4174d639 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/caricatore.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/caricatore.vue
@@ -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>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/ciclo-formatura.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/ciclo-formatura.vue
index 3410625f..56e8c610 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/ciclo-formatura.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/ciclo-formatura.vue
@@ -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>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/formatura-acrilico.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/formatura-acrilico.vue
index d370b391..426c4b53 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/formatura-acrilico.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/formatura-acrilico.vue
@@ -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">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/formatura-riscaldo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/formatura-riscaldo.vue
index dd3f59d3..7d056a15 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/formatura-riscaldo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/base-components/formatura-riscaldo.vue
@@ -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">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue
index 2173ec7a..1b5c6320 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue
@@ -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">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue
index dd4a8bb4..126ff520 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue
@@ -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">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue
index 824384fe..968e3dfb 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue
@@ -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">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.vue
index 1cee7fa5..c85cf350 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.vue
@@ -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">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputTermo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputTermo.vue
index b4f06677..0da7e49f 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputTermo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/inputTermo.vue
@@ -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">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/base-components/pirometro.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/base-components/pirometro.vue
index f0355d89..bd02bda7 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/base-components/pirometro.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/base-components/pirometro.vue
@@ -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">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/base-components/telescopi.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/base-components/telescopi.vue
index 74b348eb..a0d76030 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/base-components/telescopi.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/base-components/telescopi.vue
@@ -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">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-inferiori.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-inferiori.vue
index 0eaaf116..2b01eadf 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-inferiori.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-inferiori.vue
@@ -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>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.vue
index 909eaa99..f1a6ebd6 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.vue
@@ -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>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.vue
index 9575c517..8a687127 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.vue
@@ -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>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.vue
index 82137f8f..b4f98b76 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.vue
@@ -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 />
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.vue
index 131e6ad2..a8d58a37 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.vue
@@ -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 />
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-diretto.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-diretto.vue
index 078ca58d..00e26e88 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-diretto.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-diretto.vue
@@ -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">
diff --git a/Thermo.Active/wwwroot/src/components/toggleButton.ts b/Thermo.Active/wwwroot/src/components/toggleButton.ts
index 759a88a7..dfabdf78 100644
--- a/Thermo.Active/wwwroot/src/components/toggleButton.ts
+++ b/Thermo.Active/wwwroot/src/components/toggleButton.ts
@@ -17,6 +17,9 @@ export default class ToggleButton extends Vue {
   @Prop({ default: null })
   value;
 
+  @Prop({ default: null })
+  status;
+
   get bindingValue() {
     return this.value;
   };
diff --git a/Thermo.Active/wwwroot/src/components/toggleButton.vue b/Thermo.Active/wwwroot/src/components/toggleButton.vue
index 1121300e..f4f0c1d4 100644
--- a/Thermo.Active/wwwroot/src/components/toggleButton.vue
+++ b/Thermo.Active/wwwroot/src/components/toggleButton.vue
@@ -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>