From cd478f16e4c0d41d34d57dbd95db0d33dcc60e85 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Tue, 16 Jun 2020 08:27:56 +0200
Subject: [PATCH] autoscroll and focus

---
 .../SVG_Components/quote-velocita.vue         | 18 ++++++-------
 .../components/SVG_Components/stampo.vue      | 26 +++++++++----------
 .../SVG_Components/svgcontrostampo.vue        | 18 ++++++-------
 .../components/controstampo.vue               | 16 ++++++------
 .../components/discesa-cornice.vue            | 14 +++++-----
 .../components/salita-stampo.vue              | 18 ++++++-------
 6 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/quote-velocita.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/quote-velocita.vue
index 8767f677..845dcc9a 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/quote-velocita.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/quote-velocita.vue
@@ -2,30 +2,30 @@
 	<div class="svg-area">
 		<img src="assets/svg/disegno-quote-velocita.svg" />
 		<div class="borded_label" id="quota1">
-			<div>
+			<div v-focus-on="positions_frame_intermediate_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_frame_intermediate_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_frame_intermediate_speed">
 				<img src="assets/icons/png/bassa.png" />
 				<span>{{recipe.positions_frame_intermediate_speed.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota2">
-			<div>
+			<div v-focus-on="positions_frame_lower_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_frame_lower_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_frame_lower_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_frame_lower_speed.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota3">
+		<div class="borded_label" id="quota3" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/discesa.png" />
 				<span>00</span>
@@ -37,7 +37,7 @@
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota4">
+		<div class="borded_label" id="quota4" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/discesa.png" />
 				<span>00</span>
@@ -50,18 +50,18 @@
 			</div>
 		</div>
 		<div class="borded_label" id="quota5">
-			<div>
+			<div v-focus-on="positions_frame_upper_position">
 				<img src="assets/icons/png/discesa.png" />
 				<span>{{recipe.positions_frame_upper_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_frame_upper_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_frame_upper_speed.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota6">
+		<div class="borded_label" id="quota6" v-focus-on="positions_frame_unload_position">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.positions_frame_unload_position.setpointHMI}}</span>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/stampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/stampo.vue
index 89532952..9f2e845a 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/stampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/stampo.vue
@@ -1,35 +1,35 @@
 <template>
 	<div class="svg-area">
 		<img src="assets/svg/disegno-quote-velocita-stampo.svg" />
-		<div class="borded_label" id="quota1">
+		<div class="borded_label" id="quota1" v-focus-on="positions_mould_intermediate_position">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.positions_mould_intermediate_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota2">
+		<div class="borded_label" id="quota2" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>00</span>
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota3">
+		<div class="borded_label" id="quota3" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>00</span>
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota4">
+		<div class="borded_label" id="quota4" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>00</span>
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota5">
+		<div class="borded_label" id="quota5" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>00</span>
@@ -38,48 +38,48 @@
 		</div>
 
 		<div class="borded_label" id="quota6">
-			<div>
+			<div v-focus-on="positions_mould_upperdeceleration_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_mould_upperdeceleration_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_mould_upperdeceleration_speed">
 				<img src="assets/icons/png/bassa.png" />
 				<span>{{recipe.positions_mould_upperdeceleration_speed.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota7">
-			<div>
+			<div v-focus-on="positions_mould_upper_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_mould_upper_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_mould_upper_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_mould_upper_speed.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota8">
-			<div>
+			<div v-focus-on="positions_mould_lowerdeceleration_position">
 				<img src="assets/icons/png/discesa.png" />
 				<span>{{recipe.positions_mould_lowerdeceleration_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_mould_lowerdeceleration_speed">
 				<img src="assets/icons/png/bassa.png" />
 				<span>{{recipe.positions_mould_lowerdeceleration_speed.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota9">
-			<div>
+			<div v-focus-on="positions_mould_lower_position">
 				<img src="assets/icons/png/discesa.png" />
 				<span>{{recipe.positions_mould_lower_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_mould_lower_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_mould_lower_speed.setpointHMI}}</span>
 				<small>mm</small>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/svgcontrostampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/svgcontrostampo.vue
index 7b2a2668..fc63af4d 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/svgcontrostampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/svgcontrostampo.vue
@@ -2,54 +2,54 @@ e<template>
 	<div class="svg-area">
 		<img src="assets/svg/disegno-controstampo-quote-velocita.svg" />
 		<div class="borded_label" id="quota1">
-			<div>
+			<div v-focus-on="positions_upperplate_lower_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_upperplate_lower_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_upperplate_lower_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_upperplate_lower_speed.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota2">
-			<div>
+			<div v-focus-on="positions_upperplate_lowerdeceleration_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_upperplate_lowerdeceleration_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_upperplate_lowerdeceleration_speed">
 				<img src="assets/icons/png/bassa.png" />
 				<span>{{recipe.positions_upperplate_lowerdeceleration_speed.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota3">
-			<div>
+			<div v-focus-on="positions_upperplate_upper_position">
 				<img src="assets/icons/png/discesa.png" />
 				<span>{{recipe.positions_upperplate_upper_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_upperplate_upper_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_upperplate_upper_speed.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota4">
-			<div>
+			<div v-focus-on="positions_upperplate_upperdeceleration_position">
 				<img src="assets/icons/png/discesa.png" />
 				<span>{{recipe.positions_upperplate_upperdeceleration_position.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_upperplate_upperdeceleration_speed">
 				<img src="assets/icons/png/bassa.png" />
 				<span>{{recipe.positions_upperplate_upperdeceleration_speed.setpointHMI}}</span>
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota5">
+		<div class="borded_label" id="quota5" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>00</span>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/controstampo.vue
index 64f64378..66cc2d76 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/controstampo.vue
@@ -8,25 +8,25 @@
 				<div class="body">
 					<div class="input-area">
 						<label>{{'positions_upperplate_lower_position' | localize('Quota inferiore')}}</label>
-						<numeric v-model="recipe.positions_upperplate_lower_position" />
+						<numeric v-model="recipe.positions_upperplate_lower_position" id="positions_upperplate_lower_position"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_lower_position"></slider>
 
 					<div class="input-area">
 						<label>{{'positions_upperplate_lower_speed' | localize('Velocità discesa')}}</label>
-						<numeric v-model="recipe.positions_upperplate_lower_speed" />
+						<numeric v-model="recipe.positions_upperplate_lower_speed" id="positions_upperplate_lower_speed"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_lower_speed"></slider>
 
 					<hr />
 					<div class="input-area">
 						<label>{{'positions_upperplate_upper_position' | localize('Quota superiore')}}</label>
-						<numeric v-model="recipe.positions_upperplate_upper_position" />
+						<numeric v-model="recipe.positions_upperplate_upper_position" id="positions_upperplate_upper_position"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_upper_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_upperplate_upper_speed' | localize('Velocità salita')}}</label>
-						<numeric v-model="recipe.positions_upperplate_upper_speed" />
+						<numeric v-model="recipe.positions_upperplate_upper_speed" id="positions_upperplate_upper_speed"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_upper_speed"></slider>
 
@@ -34,12 +34,12 @@
 
 					<div class="input-area">
 						<label>{{'positions_upperplate_upperdeceleration_position' | localize('Corsa')}}</label>
-						<numeric v-model="recipe.positions_upperplate_upperdeceleration_position" />
+						<numeric v-model="recipe.positions_upperplate_upperdeceleration_position" id="positions_upperplate_upperdeceleration_position"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_upperdeceleration_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_upperplate_upperdeceleration_speed' | localize('Velocità di rallentamento salita')}}</label>
-						<numeric v-model="recipe.positions_upperplate_upperdeceleration_speed" />
+						<numeric v-model="recipe.positions_upperplate_upperdeceleration_speed" id="positions_upperplate_upperdeceleration_speed"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_upperdeceleration_speed"></slider>
 
@@ -47,12 +47,12 @@
 
 					<div class="input-area">
 						<label>{{'positions_upperplate_lowerdeceleration_position' | localize('Corsa')}}</label>
-						<numeric v-model="recipe.positions_upperplate_lowerdeceleration_position" />
+						<numeric v-model="recipe.positions_upperplate_lowerdeceleration_position" id="positions_upperplate_lowerdeceleration_position"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_lowerdeceleration_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_upperplate_lowerdeceleration_speed' | localize('Velocità di rallentamento discesa')}}</label>
-						<numeric v-model="recipe.positions_upperplate_lowerdeceleration_speed" />
+						<numeric v-model="recipe.positions_upperplate_lowerdeceleration_speed" id="positions_upperplate_lowerdeceleration_speed"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_lowerdeceleration_speed"></slider>
 				</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/discesa-cornice.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/discesa-cornice.vue
index c4c6965c..898fcb58 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/discesa-cornice.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/discesa-cornice.vue
@@ -8,13 +8,13 @@
 				<div class="body">
 					<div class="input-area">
 						<label>{{'positions_frame_lower_position' | localize('Quota inferiore')}}</label>
-						<numeric v-model="recipe.positions_frame_lower_position" />
+						<numeric v-model="recipe.positions_frame_lower_position" id="positions_frame_lower_position"/>
 					</div>
 					<slider v-model="recipe.positions_frame_lower_position"></slider>
 
 					<div class="input-area">
 						<label>{{'positions_frame_lower_speed' | localize('Velocità discesa')}}</label>
-						<numeric v-model="recipe.positions_frame_lower_speed" />
+						<numeric v-model="recipe.positions_frame_lower_speed" id="positions_frame_lower_speed"/>
 					</div>
 					<slider v-model="recipe.positions_frame_lower_speed"></slider>
 
@@ -22,13 +22,13 @@
 
 					<div class="input-area">
 						<label>{{'positions_frame_intermediate_position' | localize('Quota intermedia')}}</label>
-						<numeric v-model="recipe.positions_frame_intermediate_position" />
+						<numeric v-model="recipe.positions_frame_intermediate_position" id="positions_frame_intermediate_position"/>
 					</div>
 					<slider v-model="recipe.positions_frame_intermediate_position"></slider>
 
 					<div class="input-area">
 						<label>{{'positions_frame_intermediate_speed' | localize('Velocità a quota intermedia')}}</label>
-						<numeric v-model="recipe.positions_frame_intermediate_speed" />
+						<numeric v-model="recipe.positions_frame_intermediate_speed" id="positions_frame_intermediate_speed"/>
 					</div>
 					<slider v-model="recipe.positions_frame_intermediate_speed"></slider>
 
@@ -36,13 +36,13 @@
 
 					<div class="input-area">
 						<label>{{'positions_frame_upper_position' | localize('Quota superiore')}}</label>
-						<numeric v-model="recipe.positions_frame_upper_position" />
+						<numeric v-model="recipe.positions_frame_upper_position" id="positions_frame_upper_position"/>
 					</div>
 					<slider v-model="recipe.positions_frame_upper_position"></slider>
 
 					<div class="input-area">
 						<label>{{'positions_frame_upper_speed' | localize('Velocità salita')}}</label>
-						<numeric v-model="recipe.positions_frame_upper_speed" />
+						<numeric v-model="recipe.positions_frame_upper_speed" id="positions_frame_upper_speed"/>
 					</div>
 					<slider v-model="recipe.positions_frame_upper_speed"></slider>
 
@@ -50,7 +50,7 @@
 
 					<div class="input-area">
 						<label>{{'positions_frame_unload_position' | localize('Quota')}}</label>
-						<numeric v-model="recipe.positions_frame_unload_position" />
+						<numeric v-model="recipe.positions_frame_unload_position" id="positions_frame_unload_position"/>
 					</div>
 					<slider v-model="recipe.positions_frame_unload_position"></slider>
 				</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/salita-stampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/salita-stampo.vue
index 2e87adbc..f8bb30d7 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/salita-stampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/salita-stampo.vue
@@ -8,30 +8,30 @@
 				<div class="body">
 					<div class="input-area">
 						<label>{{'positions_mould_lower_position' | localize('Quota inferiore')}}</label>
-						<numeric v-model="recipe.positions_mould_lower_position" />
+						<numeric v-model="recipe.positions_mould_lower_position" id="positions_mould_lower_position"/>
 					</div>
 					<slider v-model="recipe.positions_mould_lower_position"></slider>
 
 					<div class="input-area">
 						<label>{{'positions_mould_lower_speed' | localize('Velocità discesa')}}</label>
-						<numeric v-model="recipe.positions_mould_lower_speed" />
+						<numeric v-model="recipe.positions_mould_lower_speed" id="positions_mould_lower_speed"/>
 					</div>
 					<slider v-model="recipe.positions_mould_lower_speed"></slider>
 					<hr />
 					<div class="input-area">
 						<label>{{'positions_mould_intermediate_position' | localize('Quota intermedia')}}</label>
-						<numeric v-model="recipe.positions_mould_intermediate_position" />
+						<numeric v-model="recipe.positions_mould_intermediate_position" id="positions_mould_intermediate_position"/>
 					</div>
 					<slider v-model="recipe.positions_mould_intermediate_position"></slider>
 					<hr />
 					<div class="input-area">
 						<label>{{'positions_mould_upper_position' | localize('Quota superiore')}}</label>
-						<numeric v-model="recipe.positions_mould_upper_position" />
+						<numeric v-model="recipe.positions_mould_upper_position" id="positions_mould_upper_position"/>
 					</div>
 					<slider v-model="recipe.positions_mould_upper_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_mould_upper_speed' | localize('Velocità salita')}}</label>
-						<numeric v-model="recipe.positions_mould_upper_speed" />
+						<numeric v-model="recipe.positions_mould_upper_speed" id="positions_mould_upper_speed"/>
 					</div>
 					<slider v-model="recipe.positions_mould_upper_speed"></slider>
 
@@ -39,12 +39,12 @@
 
 					<div class="input-area">
 						<label>{{'positions_mould_upperdeceleration_position' | localize('Corsa')}}</label>
-						<numeric v-model="recipe.positions_mould_upperdeceleration_position" />
+						<numeric v-model="recipe.positions_mould_upperdeceleration_position" id="positions_mould_upperdeceleration_position"/>
 					</div>
 					<slider v-model="recipe.positions_mould_upperdeceleration_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_mould_upperdeceleration_speed' | localize('Velocità di rallentamento salita')}}</label>
-						<numeric v-model="recipe.positions_mould_upperdeceleration_speed" />
+						<numeric v-model="recipe.positions_mould_upperdeceleration_speed" id="positions_mould_upperdeceleration_speed"/>
 					</div>
 					<slider v-model="recipe.positions_mould_upperdeceleration_speed"></slider>
 
@@ -52,12 +52,12 @@
 
 					<div class="input-area">
 						<label>{{'positions_mould_lowerdeceleration_position' | localize('Corsa')}}</label>
-						<numeric v-model="recipe.positions_mould_lowerdeceleration_position" />
+						<numeric v-model="recipe.positions_mould_lowerdeceleration_position" id="positions_mould_lowerdeceleration_position"/>
 					</div>
 					<slider v-model="recipe.positions_mould_lowerdeceleration_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_mould_lowerdeceleration_speed' | localize('Velocità di rallentamento discesa')}}</label>
-						<numeric v-model="recipe.positions_mould_lowerdeceleration_speed" />
+						<numeric v-model="recipe.positions_mould_lowerdeceleration_speed" id="positions_mould_lowerdeceleration_speed"/>
 					</div>
 					<slider v-model="recipe.positions_mould_lowerdeceleration_speed"></slider>
 				</div>