From d9512f73cca87702aec40f49b48de7989fa73d00 Mon Sep 17 00:00:00 2001
From: = <paolo@teamdev.it>
Date: Thu, 2 Jul 2020 16:02:10 +0200
Subject: [PATCH] fix gauges

---
 .../assets/styles/base/arch-interface.less    |  13 +
 Thermo.Active/wwwroot/assets/styles/style.css |  12 +
 .../arch-interface/arch-interface.ts          |  19 +-
 .../arch-interface/arch-interface.vue         |  63 +++--
 .../wwwroot/src/modules/app-header.vue        | 246 +++++++++++-------
 5 files changed, 225 insertions(+), 128 deletions(-)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less b/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less
index 8413732d..a8374292 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less
@@ -9,6 +9,19 @@
 
    .box-gauge {
      width: 68px;
+     position: relative;
+
+     .value {
+       position: absolute;
+       top: 35%;
+       margin: auto;
+       width: 100%;
+       left: 0;
+       /* right: 0; */
+       text-align: center;
+       font-size: 0.8rem;
+       color: @color-darkish-blue;
+     }
 
      div {
 
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 33caa736..f925550f 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4801,6 +4801,18 @@ article .box .body {
 }
 .arch .box-gauge {
   width: 68px;
+  position: relative;
+}
+.arch .box-gauge .value {
+  position: absolute;
+  top: 35%;
+  margin: auto;
+  width: 100%;
+  left: 0;
+  /* right: 0; */
+  text-align: center;
+  font-size: 0.8rem;
+  color: #002680;
 }
 .arch .box-gauge div:last-of-type {
   margin-top: -25px;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.ts
index 03691e5e..8fcf08cb 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.ts
@@ -18,15 +18,22 @@ export default class archinterface extends Vue {
 
   @Watch('gaugeData')
   gaugeDataChanged(n, o) {
-    if (this.gaugePower) this.gaugePower.setValueAnimated(n.power, 1);
-    if (this.gaugeAir) this.gaugeAir.setValueAnimated(n.air, 1);
-    if (this.gaugeVacuum) this.gaugeVacuum.setValueAnimated(n.vacuum, 1);
+
+    if (this.gaugePower) {
+      this.gaugePower.setValueAnimated(n.power.value * 100 / (n.power.maxVal - n.power.minVal), 1)
+    };
+    if (this.gaugeAir) {
+      this.gaugeAir.setValueAnimated(n.air.value * 100 / (n.air.maxVal - n.air.minVal), 1);
+    }
+    if (this.gaugeVacuum) {
+      this.gaugeVacuum.setValueAnimated(n.vacuum.value * 100 / (n.vacuum.maxVal - n.vacuum.minVal), 1);
+    }
   }
 
   mounted() {
-    this.gaugePower = Gauge(this.$refs.gauge1, { min: 0, max: 100, value: 0 });
-    this.gaugeAir = Gauge(this.$refs.gauge2, { min: 0, max: 100, value: 0 });
-    this.gaugeVacuum = Gauge(this.$refs.gauge3, { min: 0, max: 100, value: 0 });
+    this.gaugePower = Gauge(this.$refs.gauge1, { min: 0, max: 100, value: 0, showValue: false });
+    this.gaugeAir = Gauge(this.$refs.gauge2, { min: 0, max: 100, value: 0, showValue: false });
+    this.gaugeVacuum = Gauge(this.$refs.gauge3, { min: 0, max: 100, value: 0, showValue: false });
   }
 
 
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.vue
index b01ea04d..b20a2dd4 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.vue
@@ -1,33 +1,40 @@
 <template>
-  <div class="arch">
+	<div class="arch">
+		<div class="box-gauge">
+			<div ref="gauge1" class="gauge-container three"></div>
+			<div
+				v-if="gaugeData && gaugeData.power"
+				class="value"
+			>{{gaugeData.power.value | round(gaugeData.power.numDec)}}</div>
+			<div v-if="gaugeData && gaugeData.power">
+				<label>{{gaugeData.power.um}}</label>
+				<label>{{gaugeData.power.label | localize("Potenza")}}</label>
+			</div>
+		</div>
 
-    <div class="box-gauge">
-      <div ref="gauge1" class="gauge-container three">
-      </div>
-        <div>
-          <label>Kw</label>
-          <label>Potenza</label>
-        </div>
-    </div>
+		<div class="box-gauge">
+			<div ref="gauge2" class="gauge-container three"></div>
+			<div
+				v-if="gaugeData && gaugeData.air"
+				class="value"
+			>{{gaugeData.air.value | round(gaugeData.air.numDec)}}</div>
+			<div v-if="gaugeData && gaugeData.air">
+				<label>{{gaugeData.air.um}}</label>
+				<label>{{gaugeData.air.label | localize("Aria")}}</label>
+			</div>
+		</div>
 
-    <div class="box-gauge">
-      <div ref="gauge2" class="gauge-container three">
-      </div>
-        <div>
-          <label>bar</label>
-          <label>Aria</label>
-        </div>
-    </div>
-
-    <div class="box-gauge">
-      <div ref="gauge3" class="gauge-container three">
-      </div>
-        <div>
-          <label>bar</label>
-          <label>Vuoto</label>
-        </div>
-    </div>
-
-  </div>
+		<div class="box-gauge">
+			<div ref="gauge3" class="gauge-container three"></div>
+			<div
+				v-if="gaugeData && gaugeData.vacuum"
+				class="value"
+			>{{gaugeData.vacuum.value | round(gaugeData.vacuum.numDec)}}</div>
+			<div v-if="gaugeData && gaugeData.vacuum">
+				<label>{{gaugeData.vacuum.um}}</label>
+				<label>{{gaugeData.vacuum.label | localize("Vuoto")}}</label>
+			</div>
+		</div>
+	</div>
 </template>
 <script src="./arch-interface.ts" lang="ts" ></script>
diff --git a/Thermo.Active/wwwroot/src/modules/app-header.vue b/Thermo.Active/wwwroot/src/modules/app-header.vue
index ee8a1064..472371ab 100644
--- a/Thermo.Active/wwwroot/src/modules/app-header.vue
+++ b/Thermo.Active/wwwroot/src/modules/app-header.vue
@@ -1,104 +1,162 @@
 <template>
- <header :class="{'turn-up':isMainViewLiftedUp}">
-    <app-ribbon :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
-                :expanded="ribbonStatus>1"
-                :show-expander="ribbonStatus>1"
-                :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>
-    <button class="unclickable over"
-            :class="{ red: mainStatus, blue: !mainStatus}"
-            :title=" mainStatus ? $options.filters.localize('header_tooltip_mainstat_ko','Machine Hardware not Ready') : $options.filters.localize('header_tooltip_mainstat_ok','Machine Hardware is running correctly') " >
-      <img class="h-24" src="assets/icons/png/switch-icon@2x.png">
-    </button>
-    <button class="power-on unclickable over"
-            :title="'header_tooltip_power-on' | localize('Power On')"
-            :disabled="!state.powerOnAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.powerOnAlarm && state.powerOnAlarm.active" @click="manageClick(state.powerOnAlarm)"
-            ><img src="assets/icons/png/control-icon-error@2x.png"></button>
+	<header :class="{'turn-up':isMainViewLiftedUp}">
+		<app-ribbon
+			:status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
+			:expanded="ribbonStatus>1"
+			:show-expander="ribbonStatus>1"
+			: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>
+		<button
+			class="unclickable over"
+			:class="{ red: mainStatus, blue: !mainStatus}"
+			:title=" mainStatus ? $options.filters.localize('header_tooltip_mainstat_ko','Machine Hardware not Ready') : $options.filters.localize('header_tooltip_mainstat_ok','Machine Hardware is running correctly') "
+		>
+			<img class="h-24" src="assets/icons/png/switch-icon@2x.png" />
+		</button>
+		<button
+			class="power-on unclickable over"
+			:title="'header_tooltip_power-on' | localize('Power On')"
+			:disabled="!state.powerOnAlarm.clickable || checkSecurityDisabled('startupIcons')"
+			v-if=" state.powerOnAlarm && state.powerOnAlarm.active"
+			@click="manageClick(state.powerOnAlarm)"
+		>
+			<img src="assets/icons/png/control-icon-error@2x.png" />
+		</button>
 
-    <button class="airflow unclickable over"
-            :title="'header_tooltip_air-flow' | localize('Air Flow')"
-            :disabled="!state.airPressureAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.airPressureAlarm && state.airPressureAlarm.active" @click="manageClick(state.airPressureAlarm)"
-            ><img src="assets/icons/png/air-icon@2x.png"></button>
+		<button
+			class="airflow unclickable over"
+			:title="'header_tooltip_air-flow' | localize('Air Flow')"
+			:disabled="!state.airPressureAlarm.clickable || checkSecurityDisabled('startupIcons')"
+			v-if=" state.airPressureAlarm && state.airPressureAlarm.active"
+			@click="manageClick(state.airPressureAlarm)"
+		>
+			<img src="assets/icons/png/air-icon@2x.png" />
+		</button>
 
-    <button class="protections unclickable over"
-            :title="'header_tooltip_protections' | localize('Protections')"
-            :disabled="!state.protectionsAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.protectionsAlarm && state.protectionsAlarm.active" @click="manageClick(state.protectionsAlarm)"
-            ><img src="assets/icons/png/lock-icon-error@2x.png"></button>
+		<button
+			class="protections unclickable over"
+			:title="'header_tooltip_protections' | localize('Protections')"
+			:disabled="!state.protectionsAlarm.clickable || checkSecurityDisabled('startupIcons')"
+			v-if=" state.protectionsAlarm && state.protectionsAlarm.active"
+			@click="manageClick(state.protectionsAlarm)"
+		>
+			<img src="assets/icons/png/lock-icon-error@2x.png" />
+		</button>
 
-    <button class="emergency unclickable over"
-            :title="'header_tooltip_emergency' | localize('Emergency')"
-            :disabled="!state.emergencyAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.emergencyAlarm && state.emergencyAlarm.active" @click="manageClick(state.emergencyAlarm)"
-            ><img src="assets/icons/png/refresh-icon-error@2x.png"></button>
+		<button
+			class="emergency unclickable over"
+			:title="'header_tooltip_emergency' | localize('Emergency')"
+			:disabled="!state.emergencyAlarm.clickable || checkSecurityDisabled('startupIcons')"
+			v-if=" state.emergencyAlarm && state.emergencyAlarm.active"
+			@click="manageClick(state.emergencyAlarm)"
+		>
+			<img src="assets/icons/png/refresh-icon-error@2x.png" />
+		</button>
 
-    <button class="settings-mode unclickable over"
-            :title="'header_tooltip_settings-mode' | localize('Settings Mode')"
-            :disabled="!state.settingsModeAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.settingsModeAlarm && state.settingsModeAlarm.active" @click="manageClick(state.settingsModeAlarm)"
-            ><img src="assets/icons/png/no-settings@2x.png"></button>
+		<button
+			class="settings-mode unclickable over"
+			:title="'header_tooltip_settings-mode' | localize('Settings Mode')"
+			:disabled="!state.settingsModeAlarm.clickable || checkSecurityDisabled('startupIcons')"
+			v-if=" state.settingsModeAlarm && state.settingsModeAlarm.active"
+			@click="manageClick(state.settingsModeAlarm)"
+		>
+			<img src="assets/icons/png/no-settings@2x.png" />
+		</button>
 
-    <button class="key unclickable over"
-            :title="'header_tooltip_key' | localize('Startup')"
-            :disabled="!state.keyReadyAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.keyReadyAlarm && state.keyReadyAlarm.active" @click="manageClick(state.keyReadyAlarm)"
-            ><img src="assets/icons/png/key-icon-error@2x.png"></button>
-
-    <button class="unclickable over"
-            :title=" powerOnStatus ? $options.filters.localize('header_tooltip_powstat_ko','Machine Not Ready to work') : $options.filters.localize('header_tooltip_powstat_ok','Machine Is Ready to worky') "
-            :class="{ red: powerOnStatus, blue: !powerOnStatus }">
-      <img src="assets/icons/png/ok-white.png" class="h-20" v-if="!powerOnStatus">
-      <img src="assets/icons/png/not-ok-white.png" class="h-20" v-if="powerOnStatus">
-      </button>
-    <button class="key over"
-            :disabled="!state.resetAxesAlarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.resetAxesAlarm && state.resetAxesAlarm.active"
-            :title="'header_tooltip_zeroing' | localize('Make Zero Axes')"
-
-            @click="manageClick(state.resetAxesAlarm)"><img src="assets/icons/png/taratura-icon-error@2x.png"></button>
-    <button class="key over"
-            :disabled="!state.waterJet1Alarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.waterJet1Alarm && state.waterJet1Alarm.active"
-
-            @click="manageClick(state.waterJet1Alarm)"></button>
-    <button class="key over"
-            :disabled="!state.waterJet2Alarm.clickable || checkSecurityDisabled('startupIcons')"
-            v-if=" state.waterJet2Alarm && state.waterJet2Alarm.active"
-
-            @click="manageClick(state.waterJet2Alarm)"></button>
-    <div class="process-container over" v-for="p in processes" :key="p.id" >
-      <process-info :counter="p.reps" :status="p.status" :id="p.id">
-        <strong v-if="p.visible && !mainStatus">{{p.partProgramName}}</strong>
-      </process-info>
-       <button v-if="p.visible && !mainStatus" class="save-circle"></button>
-      <button v-if="p.visible && !mainStatus" class="dot-circle"></button>
-    </div>
-        <archinterface></archinterface>
-        <user-info></user-info>
-  </header>
+		<button
+			class="key unclickable over"
+			:title="'header_tooltip_key' | localize('Startup')"
+			:disabled="!state.keyReadyAlarm.clickable || checkSecurityDisabled('startupIcons')"
+			v-if=" state.keyReadyAlarm && state.keyReadyAlarm.active"
+			@click="manageClick(state.keyReadyAlarm)"
+		>
+			<img src="assets/icons/png/key-icon-error@2x.png" />
+		</button>
 
+		<button
+			class="unclickable over"
+			:title=" powerOnStatus ? $options.filters.localize('header_tooltip_powstat_ko','Machine Not Ready to work') : $options.filters.localize('header_tooltip_powstat_ok','Machine Is Ready to worky') "
+			:class="{ red: powerOnStatus, blue: !powerOnStatus }"
+		>
+			<img src="assets/icons/png/ok-white.png" class="h-20" v-if="!powerOnStatus" />
+			<img src="assets/icons/png/not-ok-white.png" class="h-20" v-if="powerOnStatus" />
+		</button>
+		<button
+			class="key over"
+			:disabled="!state.resetAxesAlarm.clickable || checkSecurityDisabled('startupIcons')"
+			v-if=" state.resetAxesAlarm && state.resetAxesAlarm.active"
+			:title="'header_tooltip_zeroing' | localize('Make Zero Axes')"
+			@click="manageClick(state.resetAxesAlarm)"
+		>
+			<img src="assets/icons/png/taratura-icon-error@2x.png" />
+		</button>
+		<button
+			class="key over"
+			:disabled="!state.waterJet1Alarm.clickable || checkSecurityDisabled('startupIcons')"
+			v-if=" state.waterJet1Alarm && state.waterJet1Alarm.active"
+			@click="manageClick(state.waterJet1Alarm)"
+		></button>
+		<button
+			class="key over"
+			:disabled="!state.waterJet2Alarm.clickable || checkSecurityDisabled('startupIcons')"
+			v-if=" state.waterJet2Alarm && state.waterJet2Alarm.active"
+			@click="manageClick(state.waterJet2Alarm)"
+		></button>
+		<div class="process-container over" v-for="p in processes" :key="p.id">
+			<process-info :counter="p.reps" :status="p.status" :id="p.id">
+				<strong v-if="p.visible && !mainStatus">{{p.partProgramName}}</strong>
+			</process-info>
+			<button v-if="p.visible && !mainStatus" class="save-circle"></button>
+			<button v-if="p.visible && !mainStatus" class="dot-circle"></button>
+		</div>
+		<archinterface></archinterface>
+		<user-info></user-info>
+	</header>
 </template>
 <script lang="ts" src="./app-header.ts"></script>