From de271c10af67dda6d24fd7853529f79b104edccb Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Mon, 22 Jun 2020 10:20:18 +0200
Subject: [PATCH 01/10] fix point 7 and 12

---
 .../setup/ciclo/components/show-ciclo-info.ts |  2 +-
 .../ciclo/components/show-ciclo-info.vue      |  8 ++++----
 .../components/show-controstampo-info.ts      |  2 +-
 .../components/show-controstampo-info.vue     | 16 +++++++--------
 .../components/show-estrazione-info.ts        |  2 +-
 .../components/show-estrazione-info.vue       | 12 +++++------
 .../base-components/setupSottosquadra.vue     |  4 ++--
 .../components/sottosquadra-controstampo.vue  |  2 +-
 .../components/sottosquadra-stampo.vue        |  2 +-
 .../setup/opzioni/show-opzioni-info.ts        |  2 +-
 .../setup/opzioni/show-opzioni-info.vue       | 14 ++++++-------
 .../components/show-pirometro-info.ts         |  2 +-
 .../components/show-pirometro-info.vue        | 16 +++++++--------
 .../components/show-quote-velocita-info.ts    |  2 +-
 .../components/show-quote-velocita-info.vue   | 12 +++++------
 .../components/show-raffreddamento-info.ts    |  2 +-
 .../components/show-raffreddamento-info.vue   | 20 +++++++++----------
 .../riscaldi/components/show-riscaldi-info.ts |  2 +-
 .../components/show-riscaldi-info.vue         | 14 ++++++-------
 .../setup/vuoto/show-vuoto-info.ts            |  2 +-
 .../setup/vuoto/show-vuoto-info.vue           | 16 +++++++--------
 21 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/show-ciclo-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/show-ciclo-info.ts
index 129d4ec5..ac09ab61 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/show-ciclo-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/show-ciclo-info.ts
@@ -15,7 +15,7 @@ import { recipeService } from "@/services/recipeService";
 export default class ShowCicloInfo extends Vue {
 
   recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
-  show: string = "caricatore";
+  show: number = 0;
 
   @Prop()
   deferred: Deferred<boolean>;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/show-ciclo-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/show-ciclo-info.vue
index 2a6bc2ba..b1e6dcc4 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/show-ciclo-info.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/ciclo/components/show-ciclo-info.vue
@@ -2,16 +2,16 @@
 	<div class="setup">
 		<modal type="ciclo-info">
 			<div class="tab-header" slot="header-buttons">
-				<button :class="{'active':show=='formatura'}" @click="show='formatura'">Ciclo di formatura</button>
-				<button :class="{'active':show=='caricatore'}" @click="show='caricatore'">Caricatore</button>
+				<button :class="{'active':show==0}" @click="show=0">Ciclo di formatura</button>
+				<button :class="{'active':show==1}" @click="show=1">Caricatore</button>
 			</div>
 			<div slot="header-buttons">
 				<button class="modal-close" @click="close()">
 					<i class="fa fa-remove"></i>
 				</button>
 			</div>
-			<caricatore v-if="show=='caricatore'" :recipe="recipe"></caricatore>
-			<cicloformatura v-if="show=='formatura'" :recipe="recipe"></cicloformatura>
+			<cicloformatura v-if="show==0" :recipe="recipe"></cicloformatura>
+			<caricatore v-if="show==1" :recipe="recipe"></caricatore>
 			<footer>
 				<button class="btn" @click="annulla()">Annulla</button>
 				<button class="btn btn-success" @click="conferma()">Conferma</button>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/show-controstampo-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/show-controstampo-info.ts
index 36ac594b..f3708063 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/show-controstampo-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/show-controstampo-info.ts
@@ -26,7 +26,7 @@ import { recipeService } from "@/services/recipeService";
 export default class ShowControstampoInfo extends Vue {
 
   recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
-  show: string = "CC";
+  show: number = 0;
 
   @Prop()
   deferred: Deferred<boolean>;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/show-controstampo-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/show-controstampo-info.vue
index 8c013a88..97ff0e63 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/show-controstampo-info.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/show-controstampo-info.vue
@@ -2,20 +2,20 @@
 	<div class="setup">
 		<modal type="controstamposetup-info">
 			<div class="tab-header" slot="header-buttons">
-				<button :class="{'active':show == 'CC'}" @click="show='CC'">Ciclo controstampo</button>
-				<button :class="{'active':show == 'AC'}" @click="show='AC'">Aria controstampo</button>
-				<button :class="{'active':show == 'VC'}" @click="show='VC'">Vuoto controstampo</button>
-				<button :class="{'active':show == 'EC'}" @click="show='EC'">Estrazione controstampo</button>
+				<button :class="{'active':show == 0}" @click="show=0">Ciclo controstampo</button>
+				<button :class="{'active':show == 1}" @click="show=1">Aria controstampo</button>
+				<button :class="{'active':show == 2}" @click="show=2">Vuoto controstampo</button>
+				<button :class="{'active':show == 3}" @click="show=3">Estrazione controstampo</button>
 			</div>
 			<div slot="header-buttons">
 				<button class="modal-close" @click="close()">
 					<i class="fa fa-remove"></i>
 				</button>
 			</div>
-			<ciclocontrostampo v-if="show=='CC'" :recipe="recipe"></ciclocontrostampo>
-			<ariacontrostampo v-if="show=='AC'" :recipe="recipe"></ariacontrostampo>
-			<vuotocontrostampo v-if="show=='VC'" :recipe="recipe"></vuotocontrostampo>
-			<estrazionecontrostampo v-if="show=='EC'" :recipe="recipe"></estrazionecontrostampo>
+			<ciclocontrostampo v-if="show==0" :recipe="recipe"></ciclocontrostampo>
+			<ariacontrostampo v-if="show==1" :recipe="recipe"></ariacontrostampo>
+			<vuotocontrostampo v-if="show==2" :recipe="recipe"></vuotocontrostampo>
+			<estrazionecontrostampo v-if="show==3" :recipe="recipe"></estrazionecontrostampo>
 			<footer>
 				<button class="btn" @click="annulla()">Annulla</button>
 				<button class="btn btn-success" @click="conferma()">Conferma</button>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/show-estrazione-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/show-estrazione-info.ts
index a7fbb693..13bdcaec 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/show-estrazione-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/show-estrazione-info.ts
@@ -23,7 +23,7 @@ import { recipeService } from "@/services/recipeService";
 export default class ShowEstrazioneInfo extends Vue {
 
   recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
-  show: string = "principale";
+  show: number = 0;
 
   @Prop()
   deferred: Deferred<boolean>;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/show-estrazione-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/show-estrazione-info.vue
index b058c242..3d41df1a 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/show-estrazione-info.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/show-estrazione-info.vue
@@ -3,12 +3,12 @@
 		<modal type="estrazione-info">
 			<div class="tab-header" slot="header-buttons">
 				<button
-					:class="{'active':show == 'principale'}"
-					@click="show='principale'"
+					:class="{'active':show == 0}"
+					@click="show=0"
 				>Estrazione principale</button>
 				<button
-					:class="{'active':show == 'secondaria'}"
-					@click="show='secondaria'"
+					:class="{'active':show == 1}"
+					@click="show=1"
 				>Estrazione secondaria</button>
 			</div>
 			<div slot="header-buttons">
@@ -16,8 +16,8 @@
 					<i class="fa fa-remove"></i>
 				</button>
 			</div>
-			<estrprincipale v-if="show=='principale'" :recipe="recipe"></estrprincipale>
-			<estrsecondaria v-if="show=='secondaria'" :recipe="recipe"></estrsecondaria>
+			<estrprincipale v-if="show==0" :recipe="recipe"></estrprincipale>
+			<estrsecondaria v-if="show==1" :recipe="recipe"></estrsecondaria>
 			<footer>
 				<button class="btn" @click="annulla()">Annulla</button>
 				<button class="btn btn-success" @click="conferma()">Conferma</button>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupSottosquadra.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupSottosquadra.vue
index 8a93aa8b..4790c16e 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupSottosquadra.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/base-components/setupSottosquadra.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="option-row" @click="$emit('click')">
 		<label>{{numSottoSq}}</label>
-		<template v-if="modalita.status.visible">
+		<!-- <template v-if="modalita.status.visible">
 			<select class="form-control" v-model="modalita"></select>
-		</template>
+		</template> va inserito il valore della select di modalità -->
 		<template v-if="quota.status.visible">
 			<label>{{quota.setpointHMI}} mm</label>
 		</template>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/sottosquadra-controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/sottosquadra-controstampo.vue
index cfe44822..724fcebe 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/sottosquadra-controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/sottosquadra-controstampo.vue
@@ -6,7 +6,7 @@
 				v-for="i in 10"
 				:key="i"
 				@click="selectedItem=i"
-				:numTermo="i"
+				:numSottoSq="i"
 				:modalita="recipe[`options_undercutupperplate_${i}_mode`]"
 				:quota="recipe[`options_undercutupperplate_${i}_position`]"
 				:ritardoAtt="recipe[`options_undercutupperplate_${i}_delay_acti`]"
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/sottosquadra-stampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/sottosquadra-stampo.vue
index 19630db6..ced5e882 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/sottosquadra-stampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/components/sottosquadra-stampo.vue
@@ -6,7 +6,7 @@
 				v-for="i in 10"
 				:key="i"
 				@click="selectedItem=i"
-				:numTermo="i"
+				:numSottoSq="i"
 				:modalita="recipe[`options_undercutmould_${i}_mode`]"
 				:quota="recipe[`options_undercutmould_${i}_position`]"
 				:ritardoAtt="recipe[`options_undercutmould_${i}_delay_acti`]"
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.ts
index f9785d8c..c9b183b7 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.ts
@@ -24,7 +24,7 @@ import { recipeService } from "@/services/recipeService";
 export default class ShowOpzioniInfo extends Vue {
 
   get recipe(): Recipe.IRecipe { return this.$store.getters.getCurrent(); }
-  showOpzioni: string = "TR";
+  showOpzioni: number = 0;
 
   @Prop()
   deferred: Deferred<boolean>;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.vue
index e64c63bd..7afabe5a 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/opzioni/show-opzioni-info.vue
@@ -8,17 +8,17 @@
 			</div>
 			<section>
 				<aside class="scrollable auto">
-					<button :class="{'active':showOpzioni == 'TR'}" @click="showOpzioni='TR'">Termoregolatori</button>
-					<button :class="{'active':showOpzioni == 'SS'}" @click="showOpzioni='SS'">Sottosquadra stampo</button>
+					<button :class="{'active':showOpzioni == 0}" @click="showOpzioni=0">Termoregolatori</button>
+					<button :class="{'active':showOpzioni == 1}" @click="showOpzioni=1">Sottosquadra stampo</button>
 					<button
-						:class="{'active':showOpzioni == 'SC'}"
-						@click="showOpzioni='SC'"
+						:class="{'active':showOpzioni == 2}"
+						@click="showOpzioni=2"
 					>Sottosquadra controstampo</button>
 				</aside>
 				<hr />
-				<sottosquadracontrostampo v-if="showOpzioni=='SC'" :recipe="recipe"></sottosquadracontrostampo>
-				<sottosquadrastampo v-if="showOpzioni=='SS'" :recipe="recipe"></sottosquadrastampo>
-				<termoregolatori v-if="showOpzioni=='TR'" :recipe="recipe"></termoregolatori>
+				<termoregolatori v-if="showOpzioni==0" :recipe="recipe"></termoregolatori>
+				<sottosquadrastampo v-if="showOpzioni==1" :recipe="recipe"></sottosquadrastampo>
+				<sottosquadracontrostampo v-if="showOpzioni==2" :recipe="recipe"></sottosquadracontrostampo>
 			</section>
 			<footer>
 				<button class="btn" @click="annulla()">Annulla</button>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/show-pirometro-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/show-pirometro-info.ts
index ee71a28e..387f1a53 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/show-pirometro-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/show-pirometro-info.ts
@@ -16,7 +16,7 @@ import { recipeService } from "@/services/recipeService";
 export default class ShowPirometroInfo extends Vue {
 
   recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
-  show: string = 'termo-superiore';
+  show: number = 0;
 
   @Prop()
   deferred: Deferred<boolean>;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/show-pirometro-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/show-pirometro-info.vue
index 652baf22..c3ee8f15 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/show-pirometro-info.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/show-pirometro-info.vue
@@ -2,14 +2,14 @@
 	<div class="setup">
 		<modal type="pirometro-info">
 			<div class="tab-header" slot="header-buttons">
-				<button :class="{'active':show=='pirometro'}" @click="show='pirometro'">Pirometro</button>
+				<button :class="{'active':show==0}" @click="show=0">Pirometro</button>
 				<button
-					:class="{'active':show=='termo-superiore'}"
-					@click="show='termo-superiore'"
+					:class="{'active':show==1}"
+					@click="show=1"
 				>Termoregolazione riscaldo superiore</button>
 				<button
-					:class="{'active':show=='termo-inferiore'}"
-					@click="show='termo-inferiore'"
+					:class="{'active':show==2}"
+					@click="show=2"
 				>Termoregolazione riscaldo inferiore</button>
 			</div>
 			<div slot="header-buttons">
@@ -17,9 +17,9 @@
 					<i class="fa fa-remove"></i>
 				</button>
 			</div>
-			<pirometro v-if="show=='pirometro'" :recipe="recipe"></pirometro>
-			<termosuperiore v-if="show=='termo-superiore'" :recipe="recipe"></termosuperiore>
-			<termoinferiore v-if="show=='termo-inferiore'" :recipe="recipe"></termoinferiore>
+			<pirometro v-if="show==0" :recipe="recipe"></pirometro>
+			<termosuperiore v-if="show==1" :recipe="recipe"></termosuperiore>
+			<termoinferiore v-if="show==2" :recipe="recipe"></termoinferiore>
 			<footer>
 				<button class="btn" @click="annulla()">Annulla</button>
 				<button class="btn btn-success" @click="conferma()">Conferma</button>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/show-quote-velocita-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/show-quote-velocita-info.ts
index 49a2036b..c57afbe8 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/show-quote-velocita-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/show-quote-velocita-info.ts
@@ -24,7 +24,7 @@ import { recipeService } from "@/services/recipeService";
 export default class ShowQuoteVelocitaInfo extends Vue {
 
   recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
-  show: string = "QS";
+  show: number = 0;
 
   @Prop()
   deferred: Deferred<boolean>;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/show-quote-velocita-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/show-quote-velocita-info.vue
index 6251d923..988158bc 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/show-quote-velocita-info.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/show-quote-velocita-info.vue
@@ -2,18 +2,18 @@
 	<div class="setup">
 		<modal type="quote-velocita-info">
 			<div class="tab-header" slot="header-buttons">
-				<button :class="{'active':show == 'QS'}" @click="show='QS'">Stampo</button>
-				<button :class="{'active':show == 'QC'}" @click="show='QC'">Cornice</button>
-				<button :class="{'active':show == 'QCS'}" @click="show='QCS'">Controstampo</button>
+				<button :class="{'active':show == 0}" @click="show=0">Stampo</button>
+				<button :class="{'active':show == 1}" @click="show=1">Cornice</button>
+				<button :class="{'active':show == 2}" @click="show=2">Controstampo</button>
 			</div>
 			<div slot="header-buttons">
 				<button class="modal-close" @click="close()">
 					<i class="fa fa-remove"></i>
 				</button>
 			</div>
-			<salita-stampo v-if="show=='QS'" :recipe="recipe"></salita-stampo>
-			<discesacornice v-if="show=='QC'" :recipe="recipe"></discesacornice>
-			<controstampo v-if="show=='QCS'" :recipe="recipe"></controstampo>
+			<salita-stampo v-if="show==0" :recipe="recipe"></salita-stampo>
+			<discesacornice v-if="show==1" :recipe="recipe"></discesacornice>
+			<controstampo v-if="show==2" :recipe="recipe"></controstampo>
 			<footer>
 				<button class="btn" @click="annulla()">Annulla</button>
 				<button class="btn btn-success" @click="conferma()">Conferma</button>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/show-raffreddamento-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/show-raffreddamento-info.ts
index 94fbc5e0..6dee5d9f 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/show-raffreddamento-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/show-raffreddamento-info.ts
@@ -31,7 +31,7 @@ export default class Raffreddamento extends Vue {
   deferred: Deferred<boolean>;
 
   recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
-  show: string = "ventilatori";
+  show: number = 0;
 
   annulla() {
     ModalHelper.HideModal();
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/show-raffreddamento-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/show-raffreddamento-info.vue
index bf6c0084..c0fac553 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/show-raffreddamento-info.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/raffreddamento/components/show-raffreddamento-info.vue
@@ -2,22 +2,22 @@
 	<div class="setup">
 		<modal type="raffreddamento-info">
 			<div class="tab-header" slot="header-buttons">
-				<button :class="{'active':show == 'ventilatori'}" @click="show='ventilatori'">Ventilatori</button>
-				<button :class="{'active':show == 'pirometro'}" @click="show='pirometro'">Pirometro</button>
-				<button :class="{'active':show == 'nebulizzatori'}" @click="show='nebulizzatori'">Nebulizzatori</button>
-				<button :class="{'active':show == 'telescopi'}" @click="show='telescopi'">Telescopi</button>
-				<button :class="{'active':show == 'otturatori'}" @click="show='otturatori'">Otturatori</button>
+				<button :class="{'active':show == 0}" @click="show=0">Ventilatori</button>
+				<button :class="{'active':show == 1}" @click="show=1">Pirometro</button>
+				<button :class="{'active':show == 2}" @click="show=2">Nebulizzatori</button>
+				<button :class="{'active':show == 3}" @click="show=3">Telescopi</button>
+				<button :class="{'active':show == 4}" @click="show=4">Otturatori</button>
 			</div>
 			<div slot="header-buttons">
 				<button class="modal-close" @click="close()">
 					<i class="fa fa-remove"></i>
 				</button>
 			</div>
-			<ventilatori v-if="show=='ventilatori'" :recipe="recipe"></ventilatori>
-			<pirometro v-if="show=='pirometro'" :recipe="recipe"></pirometro>
-			<nebulizzatori v-if="show=='nebulizzatori'" :recipe="recipe"></nebulizzatori>			
-			<telescopi v-if="show=='telescopi'" :recipe="recipe"></telescopi>
-			<otturatori v-if="show=='otturatori'" :recipe="recipe"></otturatori>
+			<ventilatori v-if="show==0" :recipe="recipe"></ventilatori>
+			<pirometro v-if="show==1" :recipe="recipe"></pirometro>
+			<nebulizzatori v-if="show==2" :recipe="recipe"></nebulizzatori>			
+			<telescopi v-if="show==3" :recipe="recipe"></telescopi>
+			<otturatori v-if="show==4" :recipe="recipe"></otturatori>
 			<footer>
 				<button class="btn" @click="annulla()">Annulla</button>
 				<button class="btn btn-success" @click="conferma()">Conferma</button>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/show-riscaldi-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/show-riscaldi-info.ts
index 1a3f92c1..59bcf534 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/show-riscaldi-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/show-riscaldi-info.ts
@@ -16,7 +16,7 @@ import { recipeService } from "@/services/recipeService";
 export default class ShowRiscaldamentoSuperioreInfo extends Vue {
 
   recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
-  show: string = "activeRS";
+  show: number = 0;
 
   @Prop()
   deferred: Deferred<boolean>;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/show-riscaldi-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/show-riscaldi-info.vue
index 11b3c8f6..00da8faa 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/show-riscaldi-info.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/show-riscaldi-info.vue
@@ -2,13 +2,13 @@
 	<div class="setup">
 		<modal type="riscaldi-info">
 			<div class="tab-header" slot="header-buttons">
-				<button :class="{'active':show == 'activeRI'}" @click="show = 'activeRI'">Riscaldi inferiori</button>
+				<button :class="{'active':show == 0}" @click="show = 0">Riscaldi inferiori</button>
 
-				<button :class="{'active':show == 'activeRS'}" @click="show = 'activeRS'">Riscaldi superiori</button>
+				<button :class="{'active':show == 1}" @click="show = 1">Riscaldi superiori</button>
 
 				<button
-					:class="{'active':show == 'activeSD'}"
-					@click="show = 'activeSD'"
+					:class="{'active':show == 2}"
+					@click="show = 2"
 				>Sostentamento/Decompressione</button>
 
 			</div>
@@ -17,9 +17,9 @@
 					<i class="fa fa-remove"></i>
 				</button>
 			</div>
-			<riscaldiinf v-if="show == 'activeRI'" :recipe="recipe"></riscaldiinf>
-			<riscaldisup v-if="show == 'activeRS'" :recipe="recipe"></riscaldisup>
-			<sostdecomp v-if="show == 'activeSD'" :recipe="recipe"></sostdecomp>
+			<riscaldiinf v-if="show == 0" :recipe="recipe"></riscaldiinf>
+			<riscaldisup v-if="show == 1" :recipe="recipe"></riscaldisup>
+			<sostdecomp v-if="show == 2" :recipe="recipe"></sostdecomp>
 			<footer>
 				<button class="btn" @click="annulla()">Annulla</button>
 				<button class="btn btn-success" @click="conferma()">Conferma</button>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/show-vuoto-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/show-vuoto-info.ts
index 5104e1f3..9f1506b7 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/show-vuoto-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/show-vuoto-info.ts
@@ -27,7 +27,7 @@ import { recipeService } from "@/services/recipeService";
 export default class ShowVuotoInfo extends Vue {
 
   recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
-  show: string = "principale";
+  show: number = 0;
 
   @Prop()
   deferred: Deferred<boolean>;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/show-vuoto-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/show-vuoto-info.vue
index 17a3597d..2844d671 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/show-vuoto-info.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/show-vuoto-info.vue
@@ -2,20 +2,20 @@
 	<div class="setup">
 		<modal type="vuoto-info">
 			<div class="tab-header" slot="header-buttons">
-				<button :class="{'active':show == 'principale'}" @click="show='principale'">Vuoto pricipale</button>
-				<button :class="{'active':show == 'diretto'}" @click="show='diretto'">Vuoto diretto</button>
-				<button :class="{'active':show == 'ausiliario'}" @click="show='ausiliario'">Vuoto ausiliario</button>
-				<button :class="{'active':show == 'prevuoto'}" @click="show='prevuoto'">Prevuoto</button>
+				<button :class="{'active':show == 0}" @click="show=0">Vuoto pricipale</button>
+				<button :class="{'active':show == 1}" @click="show=1">Vuoto diretto</button>
+				<button :class="{'active':show == 2}" @click="show=2">Vuoto ausiliario</button>
+				<button :class="{'active':show == 3}" @click="show=3">Prevuoto</button>
 			</div>
 			<div slot="header-buttons">
 				<button class="modal-close" @click="close()">
 					<i class="fa fa-remove"></i>
 				</button>
 			</div>
-			<vuotoprincipale v-if="show=='principale'" :recipe="recipe"></vuotoprincipale>
-			<vuotodiretto v-if="show=='diretto'" :recipe="recipe"></vuotodiretto>
-			<vuotoausiliario v-if="show=='ausiliario'" :recipe="recipe"></vuotoausiliario>
-			<prevuoto v-if="show=='prevuoto'" :recipe="recipe"></prevuoto>
+			<vuotoprincipale v-if="show==0" :recipe="recipe"></vuotoprincipale>
+			<vuotodiretto v-if="show==1" :recipe="recipe"></vuotodiretto>
+			<vuotoausiliario v-if="show==2" :recipe="recipe"></vuotoausiliario>
+			<prevuoto v-if="show==3" :recipe="recipe"></prevuoto>
 			<footer>
 				<button class="btn" @click="annulla()">Annulla</button>
 				<button class="btn btn-success" @click="conferma()">Conferma</button>

From a133b5d49a954c754fc00da9fdba3ff3570722eb Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Mon, 22 Jun 2020 10:53:08 +0200
Subject: [PATCH 02/10] fix preriscaldo dashboard

---
 .../styles/base/preriscaldo-dashboard.less    | 191 +++++-------------
 Thermo.Active/wwwroot/assets/styles/style.css | 150 ++++----------
 .../base-components => components}/clock.ts   |   0
 .../base-components => components}/clock.vue  |   0
 .../app_modules_thermo/dashboard/dashboard.ts |   2 +-
 .../preriscaldo-dashboard.ts                  |   3 +-
 .../preriscaldo-dashboard.vue                 | 179 ++++++++--------
 7 files changed, 184 insertions(+), 341 deletions(-)
 rename Thermo.Active/wwwroot/src/app_modules_thermo/{dashboard/base-components => components}/clock.ts (100%)
 rename Thermo.Active/wwwroot/src/app_modules_thermo/{dashboard/base-components => components}/clock.vue (100%)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less
index d1227d12..5f0580de 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less
@@ -3,164 +3,65 @@
 @import "colors.less";
 @import "fonts.less";
 
-.preriscaldodashboard{
-    height: 100%;
-    width: 100%;
-    background-image: url("../../assets/icons/png/bg.png");
-    position: fixed;
-    z-index: 1001;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
+.dashboard{
+    grid-template-rows   : 144px auto auto auto;
+    grid-template-columns: repeat(6,16.7%);
 
-    .header{
-        width: 100%;
-        display: flex;
-      
-    
-        .ribbon-container{
-            height: 80px;
-            z-index: 900;
+    small{
+        font-family: "Work Sans";
+        font-weight: 500;
+        line-height: 1.96;
+        text-align: center;
+        color: #4b4b4b;
+
+        &:first-of-type{
+            grid-row: 2;
+            grid-column-start: 1;
+            grid-column-end: -1;
+            font-size: 67px;
         }
-    
-        .box-date{
-            display: flex;
-            width: 100%;
-            justify-content: center;
-            
-            div{
-                flex-shrink: 0;
-                font-size: 47px;
-                text-align: right;
-                font-weight: 500;
-            }
-    
-            time {
-                flex-shrink: 0;
-                transition: color 200ms ease-in-out;
-                margin-left: 28px;
-                display: flex;
-                font-size: 120px;
-            }
-    
-        }
-    
-        .header-buttons{
-            display: inline-block;
-    
-            .box-close-dashboard{
-                height: 70px;
-                text-align: right;
-    
-                button.modal-close{
-                    background-color: #4B4B4B;
-                    margin: 23px;
-                }
-            }
-    
-    
-                .user-info {
-                    margin-top: 10px;
-                    display: flex;
-                    font-size: 25px;
-                    color: @color-input-light;
-                    flex-grow: 1;
-                    justify-content: flex-end;
-                    margin-right: 21px;
-    
-                    button.profile {
-                        width: 48px;
-                        height: 48px;
-                        background-image: url("../profile.png");
-                        color: #000;
-                        background-size: cover;
-                        border: none;
-                        background-color: transparent;
-                
-                        &.colorWhite {
-                            color: #FFF;
-                        }
-                    }
-    
-                    div{
-                        align-self: center;
-                        margin-right: 10px;
-                        font-size: 18px;
-                    }
-                }
-            
+
+        &:last-of-type{
+            grid-row: 3;
+            grid-column-start: 1;
+            grid-column-end: -1;
+            font-size: 26px;
+            text-transform: uppercase;
         }
+
     }
 
-    section{
-        height: 100%;
+    .preriscaldo_time{
+        grid-row: 4;
+        grid-column-start: 2;
+        grid-column-end: 6;
         display: flex;
-        flex-direction: column;
         justify-content: space-evenly;
-
-        label{
-
-            &:first-of-type{
-                font-size: 67px;
-                font-weight: 500;
-                font-stretch: normal;
-                font-style: normal;
-                line-height: 0.76;
-                letter-spacing: normal;
-                text-align: center;
-                color: #4b4b4b;
-            }
-
-            &:last-of-type{
-                font-size: 26px;
-                font-weight: 500;
-                font-stretch: normal;
-                font-style: normal;
-                line-height: 1.96;
-                letter-spacing: normal;
-                text-align: center;
-                color: #4b4b4b;
-            }
-
-        }
+        align-items: center;
 
         div{
             display: flex;
-            flex-direction: row;
-            justify-content: center;
-
-            div{
-                margin: 0px 70px;
-                display: flex;
-                flex-direction: column;
-
-                label{
-
-                    &:first-of-type{
-                        font-size: 250px;
-                        font-weight: 200;
-                        font-stretch: normal;
-                        font-style: normal;
-                        line-height: normal;
-                        letter-spacing: normal;
-                        text-align: center;
-                        color: #4b4b4b;
-                    }
-        
-                    &:last-of-type{
-                        font-size: 50px;
-                        font-weight: 500;
-                        font-stretch: normal;
-                        font-style: normal;
-                        line-height: normal;
-                        letter-spacing: normal;
-                        text-align: center;
-                        color: #4b4b4b;
-                    }
+            flex-flow: column;
 
+            label{
+                font-family: "Work Sans";
+                font-weight: 200;
+                font-weight: 400;
+                text-align: center;
+                color: #4b4b4b;
+                
+                &:first-of-type{
+                    font-size: 250px;
                 }
 
-            }                   
+                &:last-of-type{
+                    font-size: 50px;
+                }
+
+            }
+
         }
+
     }
+
 }
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 2df5cf5f..e0e4e8aa 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4658,134 +4658,54 @@ article .box .body {
   grid-column: 0.8;
   grid-row: 0.5;
 }
-.preriscaldodashboard {
-  height: 100%;
-  width: 100%;
-  background-image: url("../../assets/icons/png/bg.png");
-  position: fixed;
-  z-index: 1001;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
+.dashboard {
+  grid-template-rows: 144px auto auto auto;
+  grid-template-columns: repeat(6, 16.7%);
 }
-.preriscaldodashboard .header {
-  width: 100%;
-  display: flex;
-}
-.preriscaldodashboard .header .ribbon-container {
-  height: 80px;
-  z-index: 900;
-}
-.preriscaldodashboard .header .box-date {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-}
-.preriscaldodashboard .header .box-date div {
-  flex-shrink: 0;
-  font-size: 47px;
-  text-align: right;
+.dashboard small {
+  font-family: "Work Sans";
   font-weight: 500;
-}
-.preriscaldodashboard .header .box-date time {
-  flex-shrink: 0;
-  transition: color 200ms ease-in-out;
-  margin-left: 28px;
-  display: flex;
-  font-size: 120px;
-}
-.preriscaldodashboard .header .header-buttons {
-  display: inline-block;
-}
-.preriscaldodashboard .header .header-buttons .box-close-dashboard {
-  height: 70px;
-  text-align: right;
-}
-.preriscaldodashboard .header .header-buttons .box-close-dashboard button.modal-close {
-  background-color: #4B4B4B;
-  margin: 23px;
-}
-.preriscaldodashboard .header .header-buttons .user-info {
-  margin-top: 10px;
-  display: flex;
-  font-size: 25px;
-  color: #4b4b4b;
-  flex-grow: 1;
-  justify-content: flex-end;
-  margin-right: 21px;
-}
-.preriscaldodashboard .header .header-buttons .user-info button.profile {
-  width: 48px;
-  height: 48px;
-  background-image: url("../profile.png");
-  color: #000;
-  background-size: cover;
-  border: none;
-  background-color: transparent;
-}
-.preriscaldodashboard .header .header-buttons .user-info button.profile.colorWhite {
-  color: #FFF;
-}
-.preriscaldodashboard .header .header-buttons .user-info div {
-  align-self: center;
-  margin-right: 10px;
-  font-size: 18px;
-}
-.preriscaldodashboard section {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-}
-.preriscaldodashboard section label:first-of-type {
-  font-size: 67px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 0.76;
-  letter-spacing: normal;
-  text-align: center;
-  color: #4b4b4b;
-}
-.preriscaldodashboard section label:last-of-type {
-  font-size: 26px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
   line-height: 1.96;
-  letter-spacing: normal;
   text-align: center;
   color: #4b4b4b;
 }
-.preriscaldodashboard section div {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
+.dashboard small:first-of-type {
+  grid-row: 2;
+  grid-column-start: 1;
+  grid-column-end: -1;
+  font-size: 67px;
 }
-.preriscaldodashboard section div div {
-  margin: 0px 70px;
-  display: flex;
-  flex-direction: column;
+.dashboard small:last-of-type {
+  grid-row: 3;
+  grid-column-start: 1;
+  grid-column-end: -1;
+  font-size: 26px;
+  text-transform: uppercase;
 }
-.preriscaldodashboard section div div label:first-of-type {
-  font-size: 250px;
+.dashboard .preriscaldo_time {
+  grid-row: 4;
+  grid-column-start: 2;
+  grid-column-end: 6;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+.dashboard .preriscaldo_time div {
+  display: flex;
+  flex-flow: column;
+}
+.dashboard .preriscaldo_time div label {
+  font-family: "Work Sans";
   font-weight: 200;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
+  font-weight: 400;
   text-align: center;
   color: #4b4b4b;
 }
-.preriscaldodashboard section div div label:last-of-type {
+.dashboard .preriscaldo_time div label:first-of-type {
+  font-size: 250px;
+}
+.dashboard .preriscaldo_time div label:last-of-type {
   font-size: 50px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-  color: #4b4b4b;
 }
 .container #app nav {
   position: absolute;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/clock.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/clock.ts
similarity index 100%
rename from Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/clock.ts
rename to Thermo.Active/wwwroot/src/app_modules_thermo/components/clock.ts
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/clock.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/clock.vue
similarity index 100%
rename from Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/clock.vue
rename to Thermo.Active/wwwroot/src/app_modules_thermo/components/clock.vue
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
index 43b707f0..4820d439 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
@@ -8,7 +8,7 @@ import { AppModel, appModelActions } from '@/store';
 import { getColorFromName, isDarkColor } from "@/_base/utils";
 import ArchInterface from "../components/arch-interface/arch-interface.vue";
 import gauge from "./base-components/gauge.vue";
-import clock from "./base-components/clock.vue";
+import clock from "@/app_modules_thermo/components/clock.vue";
 import Piece from "./base-components/piece.vue";
 
 @Component({
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts
index 1a9b3821..9dc89c8f 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts
@@ -10,12 +10,13 @@ import { AppModel, appModelActions } from '@/store';
 import { getColorFromName,isDarkColor } from "@/_base/utils";
 import ArchInterface from "../components/arch-interface/arch-interface.vue";
 import { LocalizationService, localizationService } from "@/services/localizationService";
+import clock from "@/app_modules_thermo/components/clock.vue";
 
 @Component({
     components: {
       appRibbon: AppRibbon,
       archInterface: ArchInterface,
-      alarmList,
+      alarmList, clock
     }
   })
 export default class PreriscaldoDashboard extends Vue{
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue
index 6b8faf39..98a27f85 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue
@@ -1,85 +1,106 @@
 <template>
-    <div class="preriscaldodashboard">
-            <div class="header">
-            <app-ribbon
-                :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
-       
-
-                :has-service="serviceRequired"
-            >
-                <i class="fa fa-check" slot="icon" v-if="ribbonStatus == 0" :title="'header_tooltip_nc_idle' | localize('Nc in Idle state')"></i>
-                <i class="fa fa-play" slot="icon" v-if="ribbonStatus == 1" :title="'header_tooltip_nc_running' | localize('Nc in Running state')"></i>
-                <i class="fa fa-exclamation" slot="icon" v-if="ribbonStatus >1" :title="'header_tooltip_nc_error' | localize('Open/Close alarm list')"></i>
-                <div slot="content" class="content" v-if="ribbonStatus>1" :title="'header_tooltip_nc_error' | localize('Open/Close alarm list')">
-
-                    <strong v-if="!showDetails">{{alarmTitle | localize(alarmTitle,alarmCount)}}</strong>
-                    <strong v-if="showDetails && alarms[0].title">{{alarms[0].title}}</strong>
-                    <strong v-if="showDetails && !alarms[0].title">{{'alarm_'+ alarms[0].id | localize('alarm_'+ alarms[0].id)}}</strong>
-                    <div v-if="showDetails">
-                    <span class="processes">{{alarms[0].source}}</span>
-                    <span class="processes" v-if="alarms[0].source === 'PLC' && alarms[0].process.length>0">
-                            <span v-for="p in alarms[0].process" :key="p" >{{ p }} </span>
-                    </span>
-                    <span class="processes" v-if="alarms[0].source !== 'PLC' && alarms[0].process">{{ alarms[0].process }}</span>
-                    </div>
-                     
-                </div>
-                <div slot="service" class="content" v-if="serviceRequired">
-                    <strong>{{'header_maintainance_request' | localize('Effettuare manutenzione')}}</strong>
-                    <span>{{'header_maintainance_request_explanation' | localize('C\'è una procedura da effettuare')}}</span>
-                </div>
-            </app-ribbon>
-
-            <!-- <alarm-list></alarm-list> -->
-
-            <div class="box-date">
-                <div>{{dayIt}}<br>{{monthIt}}</div>
-                <time>
-                    <span>{{hours}}:{{minutes}} {{mid}}</span>
-                </time>
-            </div>
-
-            <div class="header-buttons">
-                <div class="box-close-dashboard">
-                    <button class="modal-close" @click="close()">
-                        <i class="fa fa-remove"></i>
-                    </button>
-                </div>
-
-                <div class="user-info">
-                    <div>
-                        <span>{{currentUser.firstName}} <br> {{currentUser.lastName}}</span>
-                    </div>
-                    <button class="profile dark-blue" v-if="currentUser" @click="sendMessage('show-user-info')" :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')" :class="{'colorWhite':isDarkColor(getColor(currentUser.lastName,currentUser.firstName))}">
-                    </button>
-                    <button class="profile dark-blue colorWhite" v-else  @click="sendMessage('show-user-info')" :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')">
-                    </button> 
-                </div>
-            </div>
+  <div class="dashboard">
+    <header>
+      <app-ribbon
+        :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
+        :has-service="serviceRequired"
+      >
+        <i
+          class="fa fa-check"
+          slot="icon"
+          v-if="ribbonStatus == 0"
+          :title="'header_tooltip_nc_idle' | localize('Nc in Idle state')"
+        ></i>
+        <i
+          class="fa fa-play"
+          slot="icon"
+          v-if="ribbonStatus == 1"
+          :title="'header_tooltip_nc_running' | localize('Nc in Running state')"
+        ></i>
+        <i
+          class="fa fa-exclamation"
+          slot="icon"
+          v-if="ribbonStatus >1"
+          :title="'header_tooltip_nc_error' | localize('Open/Close alarm list')"
+        ></i>
+        <div
+          slot="content"
+          class="content"
+          v-if="ribbonStatus>1"
+          :title="'header_tooltip_nc_error' | localize('Open/Close alarm list')"
+        >
+          <strong v-if="!showDetails">{{alarmTitle | localize(alarmTitle,alarmCount)}}</strong>
+          <strong v-if="showDetails && alarms[0].title">{{alarms[0].title}}</strong>
+          <strong
+            v-if="showDetails && !alarms[0].title"
+          >{{'alarm_'+ alarms[0].id | localize('alarm_'+ alarms[0].id)}}</strong>
+          <div v-if="showDetails">
+            <span class="processes">{{alarms[0].source}}</span>
+            <span class="processes" v-if="alarms[0].source === 'PLC' && alarms[0].process.length>0">
+              <span v-for="p in alarms[0].process" :key="p">{{ p }}</span>
+            </span>
+            <span
+              class="processes"
+              v-if="alarms[0].source !== 'PLC' && alarms[0].process"
+            >{{ alarms[0].process }}</span>
+          </div>
         </div>
-        <section>
-            <label>Avvio programmato riscaldi e termoregolatori</label>
-            <label>PROSSIMO AVVIO</label>
-            <div>
-                <div>
-                    <label>{{day}}</label>
-                    <label>giorni</label>
-                </div>
-                <div>
-                    <label>{{hour}}</label>
-                    <label>ore</label>
-                </div>
-                <div>
-                    <label>{{minute}}</label>
-                    <label>minuti</label>
-                </div>
-                <div>
-                    <label>{{second}}</label>
-                    <label>secondi</label>
-                </div>
-            </div>
-        </section>
+        <div slot="service" class="content" v-if="serviceRequired">
+          <strong>{{'header_maintainance_request' | localize('Effettuare manutenzione')}}</strong>
+          <span>{{'header_maintainance_request_explanation' | localize('C\'è una procedura da effettuare')}}</span>
+        </div>
+      </app-ribbon>
+
+      <clock></clock>
+
+      <div class="header-buttons">
+        <button class="modal-close" @click="close()">
+          <i class="fa fa-remove"></i>
+        </button>
+
+        <div class="user-info">
+          <div class="name">
+            {{currentUser.firstName}}
+            <br />
+            {{currentUser.lastName}}
+          </div>
+          <button
+            class="profile dark-blue"
+            v-if="currentUser"
+            @click="sendMessage('show-user-info')"
+            :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')"
+            :class="{'colorWhite':isDarkColor(getColor(currentUser.lastName,currentUser.firstName))}"
+          ></button>
+          <button
+            class="profile dark-blue colorWhite"
+            v-else
+            @click="sendMessage('show-user-info')"
+            :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')"
+          ></button>
+        </div>
+      </div>
+    </header>
+    <small>{{'programmed_start' | localize('Avvio programmato riscaldi e termoregolatori')}}</small>
+    <small>{{'next_start' | localize('prossimo avvio')}}</small>
+    <div class="preriscaldo_time">
+      <div>
+        <label>{{day}}</label>
+        <label>giorni</label>
+      </div>
+      <div>
+        <label>{{hour}}</label>
+        <label>ore</label>
+      </div>
+      <div>
+        <label>{{minute}}</label>
+        <label>minuti</label>
+      </div>
+      <div>
+        <label>{{second}}</label>
+        <label>secondi</label>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" src="./preriscaldo-dashboard"></script>
\ No newline at end of file

From e921177b38e523f64c8ca7ae1b67ac94900a1dc2 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Mon, 22 Jun 2020 11:11:15 +0200
Subject: [PATCH 03/10] fix preriscaldo dashboard

---
 .../styles/base/preriscaldo-dashboard.less     |  2 +-
 Thermo.Active/wwwroot/assets/styles/style.css  | 18 +++++++++---------
 .../preriscaldo-dashboard.vue                  |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less
index 5f0580de..74bc2862 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less
@@ -3,7 +3,7 @@
 @import "colors.less";
 @import "fonts.less";
 
-.dashboard{
+.pre_heat{
     grid-template-rows   : 144px auto auto auto;
     grid-template-columns: repeat(6,16.7%);
 
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index e0e4e8aa..6a9a8c3e 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4658,31 +4658,31 @@ article .box .body {
   grid-column: 0.8;
   grid-row: 0.5;
 }
-.dashboard {
+.pre_heat {
   grid-template-rows: 144px auto auto auto;
   grid-template-columns: repeat(6, 16.7%);
 }
-.dashboard small {
+.pre_heat small {
   font-family: "Work Sans";
   font-weight: 500;
   line-height: 1.96;
   text-align: center;
   color: #4b4b4b;
 }
-.dashboard small:first-of-type {
+.pre_heat small:first-of-type {
   grid-row: 2;
   grid-column-start: 1;
   grid-column-end: -1;
   font-size: 67px;
 }
-.dashboard small:last-of-type {
+.pre_heat small:last-of-type {
   grid-row: 3;
   grid-column-start: 1;
   grid-column-end: -1;
   font-size: 26px;
   text-transform: uppercase;
 }
-.dashboard .preriscaldo_time {
+.pre_heat .preriscaldo_time {
   grid-row: 4;
   grid-column-start: 2;
   grid-column-end: 6;
@@ -4690,21 +4690,21 @@ article .box .body {
   justify-content: space-evenly;
   align-items: center;
 }
-.dashboard .preriscaldo_time div {
+.pre_heat .preriscaldo_time div {
   display: flex;
   flex-flow: column;
 }
-.dashboard .preriscaldo_time div label {
+.pre_heat .preriscaldo_time div label {
   font-family: "Work Sans";
   font-weight: 200;
   font-weight: 400;
   text-align: center;
   color: #4b4b4b;
 }
-.dashboard .preriscaldo_time div label:first-of-type {
+.pre_heat .preriscaldo_time div label:first-of-type {
   font-size: 250px;
 }
-.dashboard .preriscaldo_time div label:last-of-type {
+.pre_heat .preriscaldo_time div label:last-of-type {
   font-size: 50px;
 }
 .container #app nav {
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue
index 98a27f85..d6bc5fc1 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard">
+  <div class="pre_heat dashboard">
     <header>
       <app-ribbon
         :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"

From ee4356105a1203489a0ccc6e78ee671e61161bff Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Mon, 22 Jun 2020 11:19:42 +0200
Subject: [PATCH 04/10] fix preriscaldo dashboard

---
 .../preriscaldo-dashboard.ts                  | 64 ++-----------------
 .../preriscaldo-dashboard.vue                 | 16 ++---
 2 files changed, 12 insertions(+), 68 deletions(-)

diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts
index 9dc89c8f..d1509c12 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts
@@ -2,51 +2,31 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 import {Prop} from 'vue-property-decorator';
 import { messageService } from '@/_base';
-import { ModalHelper } from '@/components/modals';
 import AppRibbon from "@/components/app-ribbon.vue";
 import { alarmList } from "@/app_modules/alarms";
 import moment from "moment";
 import { AppModel, appModelActions } from '@/store';
 import { getColorFromName,isDarkColor } from "@/_base/utils";
-import ArchInterface from "../components/arch-interface/arch-interface.vue";
-import { LocalizationService, localizationService } from "@/services/localizationService";
 import clock from "@/app_modules_thermo/components/clock.vue";
 
 @Component({
     components: {
       appRibbon: AppRibbon,
-      archInterface: ArchInterface,
       alarmList, clock
     }
   })
 export default class PreriscaldoDashboard extends Vue{
 
     @Prop({default:2})
-    day:number;
+    days:number;
     @Prop({default:13})
-    hour:number;
+    hours:number;
     @Prop({default:27})
-    minute:number;
+    minutes:number;
     @Prop({default:13})
-    second:number;
+    seconds:number;
 
     $store: any;
-
-    public minutes: string = "";
-    public hours: string = "";
-    public Time: string = "";
-    public date: string = "";
-    public mid: string = "";
-    public dayIt: string = moment(new Date()).locale(this.$store.state.localization.currentLanguage).format('dddd DD');
-    public monthIt: string = moment(new Date()).locale(this.$store.state.localization.currentLanguage).format('MMMM');
-  
-    created(){
-      this.updateTime();
-      // Ora aggiornata ogni 10 secondi
-      window.setInterval(() => {
-        this.updateTime();
-      }, 10000);
-    }
   
   
     // User
@@ -67,42 +47,6 @@ export default class PreriscaldoDashboard extends Vue{
       return isDarkColor(color);
     }
   
-    // Clock
-  
-    private updateTime() {
-      this.mid = "";
-      let date = moment(new Date()).format('LT');
-  
-      let hours: any = date.split(":")[0];
-      let minutesGrez = date.split(":")[1].split(" ");
-  
-      //Check if is AM/PM
-      let minutes = "";
-      if(minutesGrez.length>1)
-        minutes = minutesGrez[0] + " " + minutesGrez[1];
-      else{
-        minutes = ("00" + minutesGrez[0]).slice(-2)
-        hours = ("00" + hours).slice(-2)
-      }
-  
-      // time non italian
-      if (this.$store.state.localization.currentLanguage != 'it'){
-        hours = (hours+24)%24;
-        this.mid = "AM";
-        if (hours==0){
-          hours=12;
-        }
-        else if (hours>12){
-          hours=hours%12;
-          this.mid = "PM";
-        }
-      }
-  
-      this.$set(this, "minutes", minutes);
-      this.$set(this, "hours", hours);
-      this.$set(this, "date", moment(new Date()).format('L'));
-    }
-  
     // Ribbon
   
     public get ribbonStatus(): ribbonStatusEnum {
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue
index d6bc5fc1..617e5f2c 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue
@@ -84,20 +84,20 @@
     <small>{{'next_start' | localize('prossimo avvio')}}</small>
     <div class="preriscaldo_time">
       <div>
-        <label>{{day}}</label>
-        <label>giorni</label>
+        <label>{{days}}</label>
+        <label>{{'days' | localize('giorni')}}</label>
       </div>
       <div>
-        <label>{{hour}}</label>
-        <label>ore</label>
+        <label>{{hours}}</label>
+        <label>{{'hours' | localize('ore')}}</label>
       </div>
       <div>
-        <label>{{minute}}</label>
-        <label>minuti</label>
+        <label>{{minutes}}</label>
+        <label>{{'minutes' | localize('minuti')}}</label>
       </div>
       <div>
-        <label>{{second}}</label>
-        <label>secondi</label>
+        <label>{{seconds}}</label>
+        <label>{{'seconds' | localize('secondi')}}</label>
       </div>
     </div>
   </div>

From d315eaeca24d0608072ce8278c9e6680cadb1b13 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Mon, 22 Jun 2020 11:48:17 +0200
Subject: [PATCH 05/10] fix clock

---
 .../wwwroot/src/app_modules_thermo/components/index.ts        | 4 +++-
 .../wwwroot/src/app_modules_thermo/dashboard/dashboard.ts     | 3 +--
 .../preriscaldo-dashboard/preriscaldo-dashboard.ts            | 3 +--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/index.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/index.ts
index a06c587c..96798ace 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/index.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/index.ts
@@ -2,11 +2,13 @@ import numeric from "./numeric.vue";
 import slider from "./slider.vue";
 import Vue from "vue";
 import keyboard from "./keyboard.vue";
+import clock from "./clock.vue";
 
 export default {
   numeric,
   slider,
-  keyboard
+  keyboard,
+  clock
 }
 
 Vue.directive('focusOn', {
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
index 4820d439..b014177a 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
@@ -8,7 +8,6 @@ import { AppModel, appModelActions } from '@/store';
 import { getColorFromName, isDarkColor } from "@/_base/utils";
 import ArchInterface from "../components/arch-interface/arch-interface.vue";
 import gauge from "./base-components/gauge.vue";
-import clock from "@/app_modules_thermo/components/clock.vue";
 import Piece from "./base-components/piece.vue";
 
 @Component({
@@ -16,7 +15,7 @@ import Piece from "./base-components/piece.vue";
     appRibbon: AppRibbon,
     archInterface: ArchInterface,
     alarmList,
-    gauge, clock,
+    gauge,
     piece:Piece
   }
 })
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts
index d1509c12..68c49fce 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts
@@ -7,12 +7,11 @@ import { alarmList } from "@/app_modules/alarms";
 import moment from "moment";
 import { AppModel, appModelActions } from '@/store';
 import { getColorFromName,isDarkColor } from "@/_base/utils";
-import clock from "@/app_modules_thermo/components/clock.vue";
 
 @Component({
     components: {
       appRibbon: AppRibbon,
-      alarmList, clock
+      alarmList
     }
   })
 export default class PreriscaldoDashboard extends Vue{

From 8e5d1f82cb75eed82be1e9c5310bb20dd3a63463 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Mon, 22 Jun 2020 15:14:31 +0200
Subject: [PATCH 06/10] add component for the gantt graphic

---
 .../assets/styles/base/gantt-component.less   | 72 +++++++++++++++++++
 .../wwwroot/assets/styles/base/layout.less    |  1 +
 Thermo.Active/wwwroot/assets/styles/style.css | 55 ++++++++++++++
 .../base-components/gantt-component.ts        | 14 ++++
 .../base-components/gantt-component.vue       | 15 ++++
 .../processo/components/processo.ts           |  3 +-
 .../processo/components/processo.vue          |  1 +
 7 files changed, 160 insertions(+), 1 deletion(-)
 create mode 100644 Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
 create mode 100644 Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts
 create mode 100644 Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue

diff --git a/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less b/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
new file mode 100644
index 00000000..263c189e
--- /dev/null
+++ b/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
@@ -0,0 +1,72 @@
+// out: false, sourceMap: false, main: ../style.less
+@total_width: 200px;
+@column-set: 45px (@total_width - (45px + 82px)) 82px; 
+
+.gantt_component{
+    height: 70px;
+    width: @total_width;
+    background-color: black;
+    display: grid;
+    grid-template-rows: 4px auto auto;
+    grid-template-columns: @column-set;
+    border-radius: 10px;
+
+    div{
+        width: 100%;
+        grid-column-start: 1;
+        grid-column-end: -1;
+
+        &.second_row,&.third_row{
+            display: grid;
+            grid-template-columns: @column-set;
+        }
+
+    }
+
+    label{
+        margin: auto;
+        object-fit: contain;
+        font-family: "Work Sans";
+    }
+
+    .first_row{
+        grid-row: 1;
+    }
+
+    .second_row{
+        background-color: cadetblue;
+        grid-row: 2;
+        border-radius: 5px;
+
+        label{
+            grid-column: 2;
+            font-size: 16px;
+            font-weight: 500;
+            color: #545454;
+        }
+
+        img{
+            margin: auto;
+            grid-column: 1;
+        }
+    }
+
+    .third_row{
+        grid-row: 3;
+
+        label{
+            font-size: 18px;
+            color: white;
+          
+            &:first-of-type{
+                grid-column:1;
+            }
+    
+            &:last-of-type{
+                grid-column:2;
+            }
+    
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/assets/styles/base/layout.less b/Thermo.Active/wwwroot/assets/styles/base/layout.less
index f35c03ac..76dc8ac7 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/layout.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/layout.less
@@ -4,6 +4,7 @@
 @import "modals.less";
 @import "dashboard-gauge.less";
 @import "piece.less";
+@import "gantt-component.less";
 @import "dashboard.less";
 @import "riscaldi.less";
 @import "slider.less";
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 6a9a8c3e..cedcf8dd 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4205,6 +4205,61 @@ article .box .body {
 .menu_grid .sub_menu .row_3 div:last-of-type {
   grid-column: 3;
 }
+.gantt_component {
+  height: 70px;
+  width: 200px;
+  background-color: black;
+  display: grid;
+  grid-template-rows: 4px auto auto;
+  grid-template-columns: 45px 73px 82px;
+  border-radius: 10px;
+}
+.gantt_component div {
+  width: 100%;
+  grid-column-start: 1;
+  grid-column-end: -1;
+}
+.gantt_component div.second_row,
+.gantt_component div.third_row {
+  display: grid;
+  grid-template-columns: 45px 73px 82px;
+}
+.gantt_component label {
+  margin: auto;
+  object-fit: contain;
+  font-family: "Work Sans";
+}
+.gantt_component .first_row {
+  grid-row: 1;
+}
+.gantt_component .second_row {
+  background-color: cadetblue;
+  grid-row: 2;
+  border-radius: 5px;
+}
+.gantt_component .second_row label {
+  grid-column: 2;
+  font-size: 16px;
+  font-weight: 500;
+  color: #545454;
+}
+.gantt_component .second_row img {
+  margin: auto;
+  grid-column: 1;
+}
+.gantt_component .third_row {
+  grid-row: 3;
+}
+.gantt_component .third_row label {
+  font-size: 18px;
+  color: white;
+}
+.gantt_component .third_row label:first-of-type {
+  grid-column: 1;
+}
+.gantt_component .third_row label:last-of-type {
+  grid-column: 2;
+}
 .dashboard {
   font-family: "Work Sans";
   height: calc(100% - 60px);
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts
new file mode 100644
index 00000000..bee3f1e1
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts
@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { Prop } from 'vue-property-decorator';
+
+@Component({})
+export default class GanttComponent extends Vue{
+
+    @Prop({default:0})
+    estimated_delay:number;
+    @Prop({default:0})
+    estimated_duration:number;
+    @Prop({default:"null"})
+    tag:string;
+}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue
new file mode 100644
index 00000000..1d8fc607
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="gantt_component">
+    <div class="first_row">
+    </div>
+    <div class="second_row">
+      <img src="assets/icons/png/clessidra.png" />
+      <label>{{tag}}</label>
+    </div>
+    <div class="third_row">
+      <label>{{estimated_delay}}s</label>
+      <label>{{estimated_duration}}s</label>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./gantt-component.ts"></script>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts
index fc9dfea1..a3712508 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.ts
@@ -3,10 +3,11 @@ import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
 import { messageService } from "@/_base/messageService";
 import { Modal, ModalHelper } from "@/components/modals";
-
+import GanttComponent from "./base-components/gantt-component.vue";
 @Component({
   components: {
     modal: Modal,
+    gantt:GanttComponent
   }
 })
 export default class Processo extends Vue {
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
index 7b9059b2..abc05233 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
@@ -31,6 +31,7 @@
 				</button>
 				<label>{{actual}}/{{tot}}</label>
 			</div>
+			<gantt></gantt>
 		</modal>
 	</div>
 </template>

From 9eefbe43cc235acc40ed83e120138eddbf3d1512 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Mon, 22 Jun 2020 15:50:43 +0200
Subject: [PATCH 07/10] fix processo modal

---
 .../processo/components/processo.vue          | 70 +++++++++----------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
index abc05233..1008674a 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/processo.vue
@@ -1,39 +1,39 @@
 <template>
-	<div class="container">
-		<modal
-			type="processo-info"
-			:title="'processo_lbl_title' | localize('Attività attuale (es. attesa spostamento assi)')"
-		>
-			<div class="tab-header" slot="header-buttons">
-				<button>
-					<img src="assets/icons/png/star.png" />
-					<span>Opzioni di lavorazione</span>
-				</button>
-				<button>
-					<img src="assets/icons/png/star.png" />
-					<span>Pirometro</span>
-				</button>
-				<button>
-					<img src="assets/icons/png/star.png" />
-					<span>Attivazione riscaldi</span>
-				</button>
-				<button>
-					<img src="assets/icons/png/star.png" />
-					<span>Riscaldo +10 secondi</span>
-				</button>
-				<button>
-					<img src="assets/icons/png/star.png" />
-					<span>Risclado -10 secondi</span>
-				</button>
-				<button>
-					<img src="assets/icons/png/star.png" />
-					<span>Label pulsante opzionale</span>
-				</button>
-				<label>{{actual}}/{{tot}}</label>
-			</div>
-			<gantt></gantt>
-		</modal>
-	</div>
+  <div class="container">
+    <modal
+      type="processo-info"
+      :title="'processo_lbl_title' | localize('Attività attuale (es. attesa spostamento assi)')"
+    >
+      <div class="tab-header" slot="header-buttons">
+        <button>
+          <img src="assets/icons/png/star.png" />
+          <span>Opzioni di lavorazione</span>
+        </button>
+        <button>
+          <img src="assets/icons/png/star.png" />
+          <span>Pirometro</span>
+        </button>
+        <button>
+          <img src="assets/icons/png/star.png" />
+          <span>Attivazione riscaldi</span>
+        </button>
+        <button>
+          <img src="assets/icons/png/star.png" />
+          <span>Riscaldo +10 secondi</span>
+        </button>
+        <button>
+          <img src="assets/icons/png/star.png" />
+          <span>Risclado -10 secondi</span>
+        </button>
+        <button>
+          <img src="assets/icons/png/star.png" />
+          <span>Label pulsante opzionale</span>
+        </button>
+        <label>{{actual}}/{{tot}}</label>
+      </div>
+      <gantt></gantt>
+    </modal>
+  </div>
 </template>
 
 <script lang="ts" src="./processo.ts"></script>
\ No newline at end of file

From 04f67ac97c775c0dcef962f7cd7e04655ed20da4 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Mon, 22 Jun 2020 17:00:39 +0200
Subject: [PATCH 08/10] fix component for the gantt graphic

---
 .../wwwroot/assets/icons/png/ritardo.png      | Bin 0 -> 1839 bytes
 .../wwwroot/assets/icons/png/ritardo@2x.png   | Bin 0 -> 4041 bytes
 .../wwwroot/assets/icons/png/ritardo@3x.png   | Bin 0 -> 6425 bytes
 .../assets/styles/base/gantt-component.less   | 117 ++++++++++--------
 Thermo.Active/wwwroot/assets/styles/style.css |  65 +++++-----
 .../base-components/gantt-component.ts        |   1 +
 .../base-components/gantt-component.vue       |  12 +-
 7 files changed, 104 insertions(+), 91 deletions(-)
 create mode 100644 Thermo.Active/wwwroot/assets/icons/png/ritardo.png
 create mode 100644 Thermo.Active/wwwroot/assets/icons/png/ritardo@2x.png
 create mode 100644 Thermo.Active/wwwroot/assets/icons/png/ritardo@3x.png

diff --git a/Thermo.Active/wwwroot/assets/icons/png/ritardo.png b/Thermo.Active/wwwroot/assets/icons/png/ritardo.png
new file mode 100644
index 0000000000000000000000000000000000000000..c52af4e1042386621be4fe11a8c67eec701a16d8
GIT binary patch
literal 1839
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

literal 0
HcmV?d00001

diff --git a/Thermo.Active/wwwroot/assets/icons/png/ritardo@2x.png b/Thermo.Active/wwwroot/assets/icons/png/ritardo@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2b9efdcf35184e06b2d72f80ad9226490fa0598
GIT binary patch
literal 4041
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

literal 0
HcmV?d00001

diff --git a/Thermo.Active/wwwroot/assets/icons/png/ritardo@3x.png b/Thermo.Active/wwwroot/assets/icons/png/ritardo@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..c899c7c19a9012adf6b1cd23a8c4a069b1560c82
GIT binary patch
literal 6425
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

literal 0
HcmV?d00001

diff --git a/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less b/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
index 263c189e..72e40836 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
@@ -1,72 +1,79 @@
 // out: false, sourceMap: false, main: ../style.less
-@total_width: 200px;
-@column-set: 45px (@total_width - (45px + 82px)) 82px; 
+@total_width: 400px;
+@column-set : 45px (@total_width - (45px + 82px)) 82px;
 
-.gantt_component{
-    height: 70px;
-    width: @total_width;
-    background-color: black;
-    display: grid;
-    grid-template-rows: 4px auto auto;
+.gantt_component {
+    height               : 70px;
+    width                : @total_width;
+    background-color     :#57636b;
+    display              : grid;
+    grid-template-rows   : 4px 40px auto;
     grid-template-columns: @column-set;
-    border-radius: 10px;
+    border-radius        : 10px;
 
-    div{
-        width: 100%;
-        grid-column-start: 1;
-        grid-column-end: -1;
-
-        &.second_row,&.third_row{
-            display: grid;
-            grid-template-columns: @column-set;
-        }
-
-    }
-
-    label{
-        margin: auto;
-        object-fit: contain;
+    label {
+        margin     : auto;
+        object-fit : contain;
         font-family: "Work Sans";
     }
 
-    .first_row{
-        grid-row: 1;
+    .first_row {
+        grid-row         : 1;
+        grid-column-start: 1;
+        grid-column-end  : -1;
     }
 
-    .second_row{
-        background-color: cadetblue;
-        grid-row: 2;
-        border-radius: 5px;
-
-        label{
-            grid-column: 2;
-            font-size: 16px;
-            font-weight: 500;
-            color: #545454;
-        }
-
-        img{
-            margin: auto;
-            grid-column: 1;
-        }
+    .second_row {
+        background-color: #c0c7cc;
+        grid-row         : 2;
+        grid-column-start: 1;
+        grid-column-end  : -1;
+        border-radius    : 5px;
     }
 
-    .third_row{
-        grid-row: 3;
+    .first_col {
+        grid-row-start    : 2;
+        grid-row-end      : -1;
+        grid-column       : 1;
+        display           : grid;
+        grid-template-rows: 1fr 1fr;
 
-        label{
+        img {
+            margin  : auto;
+            grid-row: 1;
+        }
+
+        label {
+            grid-row : 2;
             font-size: 18px;
-            color: white;
-          
-            &:first-of-type{
-                grid-column:1;
-            }
-    
-            &:last-of-type{
-                grid-column:2;
-            }
-    
+            color    : white;
         }
+
+    }
+
+    .second_col {
+        grid-row-start    : 2;
+        grid-row-end      : -1;
+        grid-column       : 2;
+        display           : grid;
+        grid-template-rows: 1fr 1fr;
+
+        label {
+
+            &:first-of-type {
+                grid-row   : 1;
+                font-size  : 16px;
+                font-weight: 500;
+                color      : #545454;
+            }
+
+            &:last-of-type {
+                grid-row : 2;
+                font-size: 18px;
+                color    : white;
+            }
+        }
+
     }
 
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index cedcf8dd..827ede48 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4207,23 +4207,13 @@ article .box .body {
 }
 .gantt_component {
   height: 70px;
-  width: 200px;
-  background-color: black;
+  width: 400px;
+  background-color: #57636b;
   display: grid;
-  grid-template-rows: 4px auto auto;
-  grid-template-columns: 45px 73px 82px;
+  grid-template-rows: 4px 40px auto;
+  grid-template-columns: 45px 273px 82px;
   border-radius: 10px;
 }
-.gantt_component div {
-  width: 100%;
-  grid-column-start: 1;
-  grid-column-end: -1;
-}
-.gantt_component div.second_row,
-.gantt_component div.third_row {
-  display: grid;
-  grid-template-columns: 45px 73px 82px;
-}
 .gantt_component label {
   margin: auto;
   object-fit: contain;
@@ -4231,35 +4221,50 @@ article .box .body {
 }
 .gantt_component .first_row {
   grid-row: 1;
+  grid-column-start: 1;
+  grid-column-end: -1;
 }
 .gantt_component .second_row {
-  background-color: cadetblue;
+  background-color: #c0c7cc;
   grid-row: 2;
+  grid-column-start: 1;
+  grid-column-end: -1;
   border-radius: 5px;
 }
-.gantt_component .second_row label {
+.gantt_component .first_col {
+  grid-row-start: 2;
+  grid-row-end: -1;
+  grid-column: 1;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+}
+.gantt_component .first_col img {
+  margin: auto;
+  grid-row: 1;
+}
+.gantt_component .first_col label {
+  grid-row: 2;
+  font-size: 18px;
+  color: white;
+}
+.gantt_component .second_col {
+  grid-row-start: 2;
+  grid-row-end: -1;
   grid-column: 2;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+}
+.gantt_component .second_col label:first-of-type {
+  grid-row: 1;
   font-size: 16px;
   font-weight: 500;
   color: #545454;
 }
-.gantt_component .second_row img {
-  margin: auto;
-  grid-column: 1;
-}
-.gantt_component .third_row {
-  grid-row: 3;
-}
-.gantt_component .third_row label {
+.gantt_component .second_col label:last-of-type {
+  grid-row: 2;
   font-size: 18px;
   color: white;
 }
-.gantt_component .third_row label:first-of-type {
-  grid-column: 1;
-}
-.gantt_component .third_row label:last-of-type {
-  grid-column: 2;
-}
 .dashboard {
   font-family: "Work Sans";
   height: calc(100% - 60px);
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts
index bee3f1e1..0034d204 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts
@@ -11,4 +11,5 @@ export default class GanttComponent extends Vue{
     estimated_duration:number;
     @Prop({default:"null"})
     tag:string;
+    
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue
index 1d8fc607..4cab3f87 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="gantt_component">
-    <div class="first_row">
-    </div>
-    <div class="second_row">
+    <div class="first_row"></div>
+    <span class="second_row"></span>
+    <div class="first_col">
       <img src="assets/icons/png/clessidra.png" />
-      <label>{{tag}}</label>
-    </div>
-    <div class="third_row">
       <label>{{estimated_delay}}s</label>
+    </div>
+    <div class="second_col">
+      <label>{{tag}}</label>
       <label>{{estimated_duration}}s</label>
     </div>
   </div>

From aefad3422c464b3eaa1ef51c368dc87b728334b0 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Mon, 22 Jun 2020 17:08:39 +0200
Subject: [PATCH 09/10] fix component for the gantt graphic

---
 Thermo.Active/wwwroot/assets/styles/base/gantt-component.less | 3 ++-
 Thermo.Active/wwwroot/assets/styles/style.css                 | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less b/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
index 72e40836..8a9833fc 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
@@ -21,14 +21,15 @@
         grid-row         : 1;
         grid-column-start: 1;
         grid-column-end  : -1;
+        background-color: rgba(255, 255, 255, 0.5);
     }
 
     .second_row {
         background-color: #c0c7cc;
+        border-radius    : 4px;
         grid-row         : 2;
         grid-column-start: 1;
         grid-column-end  : -1;
-        border-radius    : 5px;
     }
 
     .first_col {
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 827ede48..0c3e2305 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4223,13 +4223,14 @@ article .box .body {
   grid-row: 1;
   grid-column-start: 1;
   grid-column-end: -1;
+  background-color: rgba(255, 255, 255, 0.5);
 }
 .gantt_component .second_row {
   background-color: #c0c7cc;
+  border-radius: 4px;
   grid-row: 2;
   grid-column-start: 1;
   grid-column-end: -1;
-  border-radius: 5px;
 }
 .gantt_component .first_col {
   grid-row-start: 2;

From 6789f9162bedf39b6cce9c72f82b20cbdb64851f Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Tue, 23 Jun 2020 16:44:11 +0200
Subject: [PATCH 10/10] fix gantt component

---
 .../assets/styles/base/gantt-component.less   | 78 ------------------
 .../wwwroot/assets/styles/base/layout.less    |  2 +-
 Thermo.Active/wwwroot/assets/styles/style.css | 61 --------------
 .../base-components/gantt-component.ts        |  7 ++
 .../base-components/gantt-component.vue       | 79 ++++++++++++++++---
 5 files changed, 77 insertions(+), 150 deletions(-)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less b/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
index 8a9833fc..21dfbf7a 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/gantt-component.less
@@ -1,80 +1,2 @@
 // out: false, sourceMap: false, main: ../style.less
-@total_width: 400px;
-@column-set : 45px (@total_width - (45px + 82px)) 82px;
 
-.gantt_component {
-    height               : 70px;
-    width                : @total_width;
-    background-color     :#57636b;
-    display              : grid;
-    grid-template-rows   : 4px 40px auto;
-    grid-template-columns: @column-set;
-    border-radius        : 10px;
-
-    label {
-        margin     : auto;
-        object-fit : contain;
-        font-family: "Work Sans";
-    }
-
-    .first_row {
-        grid-row         : 1;
-        grid-column-start: 1;
-        grid-column-end  : -1;
-        background-color: rgba(255, 255, 255, 0.5);
-    }
-
-    .second_row {
-        background-color: #c0c7cc;
-        border-radius    : 4px;
-        grid-row         : 2;
-        grid-column-start: 1;
-        grid-column-end  : -1;
-    }
-
-    .first_col {
-        grid-row-start    : 2;
-        grid-row-end      : -1;
-        grid-column       : 1;
-        display           : grid;
-        grid-template-rows: 1fr 1fr;
-
-        img {
-            margin  : auto;
-            grid-row: 1;
-        }
-
-        label {
-            grid-row : 2;
-            font-size: 18px;
-            color    : white;
-        }
-
-    }
-
-    .second_col {
-        grid-row-start    : 2;
-        grid-row-end      : -1;
-        grid-column       : 2;
-        display           : grid;
-        grid-template-rows: 1fr 1fr;
-
-        label {
-
-            &:first-of-type {
-                grid-row   : 1;
-                font-size  : 16px;
-                font-weight: 500;
-                color      : #545454;
-            }
-
-            &:last-of-type {
-                grid-row : 2;
-                font-size: 18px;
-                color    : white;
-            }
-        }
-
-    }
-
-}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/assets/styles/base/layout.less b/Thermo.Active/wwwroot/assets/styles/base/layout.less
index 76dc8ac7..4a817938 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/layout.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/layout.less
@@ -3,8 +3,8 @@
 @import "colors.less";
 @import "modals.less";
 @import "dashboard-gauge.less";
-@import "piece.less";
 @import "gantt-component.less";
+@import "piece.less";
 @import "dashboard.less";
 @import "riscaldi.less";
 @import "slider.less";
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 0c3e2305..6a9a8c3e 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4205,67 +4205,6 @@ article .box .body {
 .menu_grid .sub_menu .row_3 div:last-of-type {
   grid-column: 3;
 }
-.gantt_component {
-  height: 70px;
-  width: 400px;
-  background-color: #57636b;
-  display: grid;
-  grid-template-rows: 4px 40px auto;
-  grid-template-columns: 45px 273px 82px;
-  border-radius: 10px;
-}
-.gantt_component label {
-  margin: auto;
-  object-fit: contain;
-  font-family: "Work Sans";
-}
-.gantt_component .first_row {
-  grid-row: 1;
-  grid-column-start: 1;
-  grid-column-end: -1;
-  background-color: rgba(255, 255, 255, 0.5);
-}
-.gantt_component .second_row {
-  background-color: #c0c7cc;
-  border-radius: 4px;
-  grid-row: 2;
-  grid-column-start: 1;
-  grid-column-end: -1;
-}
-.gantt_component .first_col {
-  grid-row-start: 2;
-  grid-row-end: -1;
-  grid-column: 1;
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-}
-.gantt_component .first_col img {
-  margin: auto;
-  grid-row: 1;
-}
-.gantt_component .first_col label {
-  grid-row: 2;
-  font-size: 18px;
-  color: white;
-}
-.gantt_component .second_col {
-  grid-row-start: 2;
-  grid-row-end: -1;
-  grid-column: 2;
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-}
-.gantt_component .second_col label:first-of-type {
-  grid-row: 1;
-  font-size: 16px;
-  font-weight: 500;
-  color: #545454;
-}
-.gantt_component .second_col label:last-of-type {
-  grid-row: 2;
-  font-size: 18px;
-  color: white;
-}
 .dashboard {
   font-family: "Work Sans";
   height: calc(100% - 60px);
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts
index 0034d204..29dc6517 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.ts
@@ -11,5 +11,12 @@ export default class GanttComponent extends Vue{
     estimated_duration:number;
     @Prop({default:"null"})
     tag:string;
+    @Prop({default:"#57636b"})
+    color:string;
+    @Prop({default:"#c0c7cc"})
+    overlapping_color:string;
+
+    visible:boolean=true;
     
+
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue
index 4cab3f87..1bfeb2fb 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/processo/components/base-components/gantt-component.vue
@@ -1,15 +1,74 @@
 <template>
   <div class="gantt_component">
-    <div class="first_row"></div>
-    <span class="second_row"></span>
-    <div class="first_col">
-      <img src="assets/icons/png/clessidra.png" />
-      <label>{{estimated_delay}}s</label>
-    </div>
-    <div class="second_col">
-      <label>{{tag}}</label>
-      <label>{{estimated_duration}}s</label>
-    </div>
+    <svg>
+      <rect x="0" y="0" width="100%" height="100%" rx="15" :fill="color" />
+      <rect x="0" y="10%" width="100%" height="60%" rx="6" :fill="overlapping_color" />
+      <g v-if="visible">
+      <foreignObject
+					width="45"
+					height="60%"
+					x="0"
+					y="10%"
+				>
+          <img src="assets/icons/png/clessidra.png">
+				</foreignObject>
+        <foreignObject
+					width="45"
+					height="30%"
+					x="0"
+					y="70%"
+				>
+          <label>{{estimated_delay}}s</label>
+				</foreignObject>
+      </g>
+      <g v-if="visible">
+      <foreignObject
+					width="45"
+					height="60%"
+					x="40%"
+					y="10%"
+				>
+          <label>{{tag}}</label>
+				</foreignObject>
+        <foreignObject
+					width="45"
+					height="30%"
+					x="40%"
+					y="70%"
+				>
+          <label>{{estimated_duration}}s</label>
+				</foreignObject>
+      </g>
+      <g v-if="visible">
+      <foreignObject
+					width="80"
+					height="60%"
+					x="75%"
+					y="10%"
+				>
+          <label>{{tag}}</label>
+				</foreignObject>
+        <foreignObject
+					width="80"
+					height="30%"
+					x="75%"
+					y="70%"
+				>
+          <label>{{estimated_duration}}s</label>
+				</foreignObject>
+      </g>
+    </svg>
   </div>
 </template>
+<style scoped>
+.gantt_component {
+    height: 70px;
+    width : 500px;
+}
+
+svg {
+    height: 100%;
+    width : 100%;
+}
+</style>
 <script lang="ts" src="./gantt-component.ts"></script>
\ No newline at end of file