From 5aa519ea725fac26118939bce20111b9bffd7b29 Mon Sep 17 00:00:00 2001
From: Alessio <alessiogiombetti@live.it>
Date: Fri, 19 Jun 2020 10:26:55 +0200
Subject: [PATCH] add list of components and arch-interface to the dashboard

---
 .../wwwroot/assets/styles/base/dashboard.less | 225 +++++++++-------
 .../wwwroot/assets/styles/base/layout.less    |   1 +
 .../wwwroot/assets/styles/base/piece.less     |  79 ++++++
 Thermo.Active/wwwroot/assets/styles/style.css |  94 ++++++-
 .../dashboard/base-components/clock.vue       |   3 +-
 .../base-components/piece-sub-menu.ts         |  26 ++
 .../base-components/piece-sub-menu.vue        |  44 ++++
 .../dashboard/base-components/piece.ts        |  20 ++
 .../dashboard/base-components/piece.vue       |  22 ++
 .../app_modules_thermo/dashboard/dashboard.ts |   7 +-
 .../dashboard/dashboard.vue                   | 243 +++++++++---------
 11 files changed, 557 insertions(+), 207 deletions(-)
 create mode 100644 Thermo.Active/wwwroot/assets/styles/base/piece.less
 create mode 100644 Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece-sub-menu.ts
 create mode 100644 Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece-sub-menu.vue
 create mode 100644 Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece.ts
 create mode 100644 Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece.vue

diff --git a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less
index 797d4524..71de45d5 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less
@@ -5,39 +5,83 @@
 
 
 .dashboard {
-  font-family: "Work Sans";
-  height: calc(~'100% - 60px');
-  width: 100%;
-  background-image: url("../../assets/icons/png/bg.png");
-  position: fixed;
-  z-index: 1001;
-  display: grid;
-  grid-template-rows: 144px 1fr;
+  font-family          : "Work Sans";
+  height               : calc(~'100% - 60px');
+  width                : 100%;
+  background-image     : url("../../assets/icons/png/bg.png");
+  position             : fixed;
+  z-index              : 1001;
+  display              : grid;
+  grid-template-rows   : 144px 1fr;
   grid-template-columns: 152px 1fr 610px 1fr 152px;
-  grid-row-gap: 40px;
-  padding-top: 20px;
-  padding-bottom: 40px;
-  color: #4b4b4b;
+  grid-row-gap         : 40px;
+  padding-top          : 20px;
+  padding-bottom       : 40px;
+  color                : #4b4b4b;
 
   header {
-    grid-row: 1;
+    grid-row         : 1;
     grid-column-start: 1;
-    grid-column-end: -1;
-    width: 100% !important;
-    justify-content: space-between;
-    height: 144px !important;
-    position: relative !important;
+    grid-column-end  : -1;
+    width            : 100% !important;
+    justify-content  : space-between;
+    height           : 144px !important;
+    position         : relative !important;
+
+    .arch{
+      justify-content: center;
+
+      .box-gauge{
+        width: 126px;
+
+        div {
+
+          &:last-of-type {
+   
+            label {
+              color: #4b4b4b;
+
+              &:first-of-type{
+                font-size: 18px;
+              }
+
+              &:last-of-type{
+                font-size: 26px;
+              }
+            
+            }
+
+          }
+   
+        }
+
+        .gauge-container{
+          width: 126px;
+          height: 126px;
+        }
+   
+        .gauge-container>.gauge>.value {
+          stroke: #1791ff;
+        }
+
+        .gauge-container.three>.gauge>.value-text {
+          fill: #4b4b4b;
+        }
+
+      }
+
+    }
 
     .ribbon-container,
     .app-ribbon {
-      height: 144px;
-      width: 152px;
-      border-top-right-radius: 72px;
+      height                    : 144px;
+      width                     : 152px;
+      border-top-right-radius   : 72px;
       border-bottom-right-radius: 72px;
 
       .status-icon {
-        width: 114px;
-        height: 114px;
+        width        : 114px;
+        height       : 114px;
         border-radius: 57px;
 
         * {
@@ -48,12 +92,12 @@
     }
 
     .header-buttons {
-      padding-right: 21px;
-      display: flex;
-      flex-flow: column;
-      align-items: flex-end;
+      padding-right  : 21px;
+      display        : flex;
+      flex-flow      : column;
+      align-items    : flex-end;
       justify-content: space-between;
-      height: 100%;
+      height         : 100%;
 
       .user-info {
         font-size: 14px;
@@ -64,43 +108,43 @@
       }
 
       button.modal-close {
-        box-shadow: none;
+        box-shadow      : none;
         background-color: @color-darkish-blue;
-        color: white;
+        color           : white;
       }
     }
   }
 
   .first_col {
-    grid-row: 2;
+    grid-row   : 2;
     grid-column: 2;
-    height: 100%;
-    display: flex;
-    flex-flow: column;
+    height     : 100%;
+    display    : flex;
+    flex-flow  : column;
 
     .timing-area {
-      display: grid;
+      display           : grid;
       grid-template-rows: 1fr 1fr 1fr;
-      height: 610px;
+      height            : 610px;
 
       .start,
       .current,
       .end {
-        display: flex;
-        flex-flow: column;
-        align-items: center;
-        justify-content: center;
-        background-color: rgba(153, 207, 255, 0.6);
-        border-top-left-radius: 100px;
+        display                  : flex;
+        flex-flow                : column;
+        align-items              : center;
+        justify-content          : center;
+        background-color         : rgba(153, 207, 255, 0.6);
+        border-top-left-radius   : 100px;
         border-bottom-left-radius: 100px;
 
         small {
-          font-size: 26px;
+          font-size     : 26px;
           text-transform: uppercase;
         }
 
         time {
-          font-size: 120px;
+          font-size  : 120px;
           font-weight: 300;
         }
       }
@@ -109,68 +153,68 @@
         background-color: transparent;
 
         time {
-          font-size: 54px;
+          font-size  : 54px;
           font-weight: 500;
         }
       }
     }
 
     .setpoint {
-      margin: auto;
-      display: grid;
-      grid-template-rows: 1fr 1fr;
+      margin               : auto;
+      display              : grid;
+      grid-template-rows   : 1fr 1fr;
       grid-template-columns: 65px 125px 65px;
-      grid-row-gap: 1rem;
+      grid-row-gap         : 1rem;
 
       img {
-        grid-row: 1;
+        grid-row   : 1;
         grid-column: 1;
-        margin: auto;
-        height: 41px;
-        width: 41px;
+        margin     : auto;
+        height     : 41px;
+        width      : 41px;
       }
 
       label {
-        margin: auto;
-        grid-row: 1;
+        margin           : auto;
+        grid-row         : 1;
         grid-column-start: 2;
-        grid-column-end: -1;
+        grid-column-end  : -1;
 
-        font-size: 54px;
+        font-size : 54px;
         text-align: right;
       }
 
       div {
-        display: flex;
+        display  : flex;
         flex-flow: column;
 
         font-weight: 500;
         align-items: center;
 
         small {
-          font-size: 12px;
-          line-height: 25px;
+          font-size     : 12px;
+          line-height   : 25px;
           text-transform: uppercase;
         }
 
         span {
           line-height: 25px;
-          font-size: 25px;
+          font-size  : 25px;
         }
       }
 
       button {
-        border: 2px solid #4b4b4b;
-        border-radius: 50%;
-        width: 65px;
-        height: 65px;
-        font-size: 36px;
-        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
-        font-size: 28px;
+        border         : 2px solid #4b4b4b;
+        border-radius  : 50%;
+        width          : 65px;
+        height         : 65px;
+        font-size      : 36px;
+        box-shadow     : 0 2px 10px 0 rgba(0, 0, 0, 0.5);
+        font-size      : 28px;
         justify-content: center;
-        align-items: center;
-        display: flex;
-        color: #4b4b4b;
+        align-items    : center;
+        display        : flex;
+        color          : #4b4b4b;
       }
 
     }
@@ -178,40 +222,49 @@
   }
 
   .second_col {
-    grid-row: 2;
+    grid-row   : 2;
     grid-column: 3;
-    height: 100%;
-    display: flex;
-    flex-flow: column;
+    height     : 100%;
+    display    : flex;
+    flex-flow  : column;
 
     .remaining_time {
-      margin: auto;
-      display: flex;
+      margin   : auto;
+      display  : flex;
       flex-flow: column;
 
       align-items: center;
 
       small {
-        font-size: 26px;
-        font-weight: 500;
+        font-size     : 26px;
+        font-weight   : 500;
         text-transform: uppercase;
       }
 
       time {
-        font-size: 120px;
+        font-size  : 120px;
         font-weight: 300;
       }
     }
   }
 
   .third_col {
-    grid-row: 2;
+    grid-row         : 2;
     grid-column-start: 4;
-    grid-column-end: -1;
-    height: 100%;
-    display: flex;
-    flex-flow: column;
-    justify-content: flex-end;
+    grid-column-end  : -1;
+    height           : 100%;
+    display          : flex;
+    flex-flow        : column;
+
+    .pieces {
+      height: 400px;
+
+      aside {
+        margin-top: 10px;
+        height    : 100%;
+      }
+    }
+
   }
 
 }
\ 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 1c15caea..9035b496 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/layout.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/layout.less
@@ -3,6 +3,7 @@
 @import "colors.less";
 @import "modals.less";
 @import "dashboard-gauge.less";
+@import "piece.less";
 @import "dashboard.less";
 @import "riscaldi.less";
 @import "slider.less";
diff --git a/Thermo.Active/wwwroot/assets/styles/base/piece.less b/Thermo.Active/wwwroot/assets/styles/base/piece.less
new file mode 100644
index 00000000..a670c6c3
--- /dev/null
+++ b/Thermo.Active/wwwroot/assets/styles/base/piece.less
@@ -0,0 +1,79 @@
+// out: false, sourceMap: false, main: ../style.less
+
+.piece_info{
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 84px;
+    border-bottom: 2px solid black;
+
+    label{
+        font-size: 54px;
+        font-weight: 500;
+        text-align: right;
+        color: #4b4b4b;
+    }
+
+    div{
+        display: flex;
+        flex-flow: column;
+
+        span{
+            font-family: "Work Sans";
+            font-weight: 500;
+            line-height: 1;
+            letter-spacing: normal;
+            text-align: center;
+            color: #4b4b4b;
+
+            &:first-of-type{
+                font-size: 12px;
+                text-transform: uppercase;
+            }
+
+            &:last-of-type{
+                font-size: 25px;
+            }
+
+        }
+    }
+
+    button{
+        height: 16px;
+        width: 16px;
+        background-color: black;
+    }
+
+}
+
+.sub_menu{
+    margin-left: 250px;
+    display: grid;
+    grid-template-rows: repeat(3,60px);
+
+    .piece_info{
+        height: 60px;
+        
+        button{
+            background-color: white;
+            border-color: black;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+        }
+
+    }
+
+    .row_1{
+        grid-row: 1;
+    }
+
+    .row_2{
+        grid-row: 2;
+    }
+
+    .row_3{
+        grid-row: 3;
+    }
+
+}
\ 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 a895938d..6b4ccfb9 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4102,6 +4102,67 @@ article .box .body {
   stroke: #4caaff;
   stroke-width: 1;
 }
+.piece_info {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 84px;
+  border-bottom: 2px solid black;
+}
+.piece_info label {
+  font-size: 54px;
+  font-weight: 500;
+  text-align: right;
+  color: #4b4b4b;
+}
+.piece_info div {
+  display: flex;
+  flex-flow: column;
+}
+.piece_info div span {
+  font-family: "Work Sans";
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: normal;
+  text-align: center;
+  color: #4b4b4b;
+}
+.piece_info div span:first-of-type {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+.piece_info div span:last-of-type {
+  font-size: 25px;
+}
+.piece_info button {
+  height: 16px;
+  width: 16px;
+  background-color: black;
+}
+.sub_menu {
+  margin-left: 250px;
+  display: grid;
+  grid-template-rows: repeat(3, 60px);
+}
+.sub_menu .piece_info {
+  height: 60px;
+}
+.sub_menu .piece_info button {
+  background-color: white;
+  border-color: black;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+}
+.sub_menu .row_1 {
+  grid-row: 1;
+}
+.sub_menu .row_2 {
+  grid-row: 2;
+}
+.sub_menu .row_3 {
+  grid-row: 3;
+}
 .dashboard {
   font-family: "Work Sans";
   height: calc(100% - 60px);
@@ -4126,6 +4187,31 @@ article .box .body {
   height: 144px !important;
   position: relative !important;
 }
+.dashboard header .arch {
+  justify-content: center;
+}
+.dashboard header .arch .box-gauge {
+  width: 126px;
+}
+.dashboard header .arch .box-gauge div:last-of-type label {
+  color: #4b4b4b;
+}
+.dashboard header .arch .box-gauge div:last-of-type label:first-of-type {
+  font-size: 18px;
+}
+.dashboard header .arch .box-gauge div:last-of-type label:last-of-type {
+  font-size: 26px;
+}
+.dashboard header .arch .box-gauge .gauge-container {
+  width: 126px;
+  height: 126px;
+}
+.dashboard header .arch .box-gauge .gauge-container > .gauge > .value {
+  stroke: #1791ff;
+}
+.dashboard header .arch .box-gauge .gauge-container.three > .gauge > .value-text {
+  fill: #4b4b4b;
+}
 .dashboard header .ribbon-container,
 .dashboard header .app-ribbon {
   height: 144px;
@@ -4283,7 +4369,13 @@ article .box .body {
   height: 100%;
   display: flex;
   flex-flow: column;
-  justify-content: flex-end;
+}
+.dashboard .third_col .pieces {
+  height: 400px;
+}
+.dashboard .third_col .pieces aside {
+  margin-top: 10px;
+  height: 100%;
 }
 .warmers {
   position: relative;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/clock.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/clock.vue
index a865edd9..33a59b20 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/clock.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/clock.vue
@@ -10,7 +10,8 @@
 <style scoped>
 .clock {
 	display: grid;
-	grid-template-columns: 1fr 1fr;
+	/* grid-template-columns: 1fr 1fr; */
+	grid-template-columns: 500px 500px;
 	grid-column-gap: 1rem;
 	width: fit-content;
 }
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece-sub-menu.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece-sub-menu.ts
new file mode 100644
index 00000000..0101fbe5
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece-sub-menu.ts
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { Prop } from 'vue-property-decorator';
+
+
+@Component({})
+export default class PieceSubMenu extends Vue{
+
+    @Prop({default:0})
+    blowing_time:number;
+    @Prop({default:0})
+    cycle_time_gross:number;
+    @Prop({default:0})
+    mould_temp:number;
+    @Prop({default:0})
+    t_mat_end_heat:number;
+    @Prop({default:0})
+    t_mat_end_blowing:number;
+    @Prop({default:0})
+    vacuum_time:number;
+    @Prop({default:0})
+    energy_in:number;
+    @Prop({default:0})
+    energy_out:number;
+
+}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece-sub-menu.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece-sub-menu.vue
new file mode 100644
index 00000000..190ba11b
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece-sub-menu.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="sub_menu">
+        <div class="piece_info row_1">
+            <button><img src="assets/icons/png/bt.png"></button>
+            <div>
+                <span>{{'dashboard-blowing-time' | localize('tempo ventilazione')}}</span>
+                <span>{{blowing_time}}</span>
+            </div>
+            <div>
+                <span>{{'dashboard-cycle-time-gross' | localize('tempo ciclo lordo')}}</span>
+                <span>{{cycle_time_gross}}</span>
+            </div>
+        </div>
+        <div class="piece_info row_2">
+            <div>
+                <span>{{'dashboard-mould-temp' | localize('temperatura stampo')}}</span>
+                <span>{{mould_temp}}</span>
+            </div>
+            <div>
+                <span>{{'dashboard-t-mat-end-heat' | localize('t. materiale fine riscaldo')}}</span>
+                <span>{{t_mat_end_heat}}</span>
+            </div>
+            <div>
+                <span>{{'dashboard-t-mat-end-blowing' | localize('t. materiale fine ventilazione')}}</span>
+                <span>{{t_mat_end_blowing}}</span>
+            </div>
+        </div>
+        <div class="piece_info row_3">
+            <div>
+                <span>{{'dashboard-vacuum-time' | localize('tempo vuoto')}}</span>
+                <span>{{vacuum_time}}</span>
+            </div>
+            <div>
+                <span>{{'dashboard-energy-in' | localize('energia utilizzata in')}}</span>
+                <span>{{energy_in}}</span>
+            </div>
+            <div>
+                <span>{{'dashboard-energy-out' | localize('energia utilizzata out')}}</span>
+                <span>{{energy_out}}</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" src="./piece-sub-menu.ts"></script>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece.ts
new file mode 100644
index 00000000..c8450480
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece.ts
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { Prop } from 'vue-property-decorator';
+import PieceSubMenu from "./piece-sub-menu.vue";
+
+@Component({components:{submenu:PieceSubMenu}})
+export default class Piece extends Vue{
+
+    @Prop({default:0})
+    number:number;
+    @Prop({default:0})
+    heat_time:number;
+    @Prop({default:0})
+    vacuum:number;
+    @Prop({default:0})
+    cycle_time_net:number;
+
+    submenu:boolean=false;
+
+}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece.vue
new file mode 100644
index 00000000..2e2b7744
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/piece.vue
@@ -0,0 +1,22 @@
+<template>
+<div>
+    <div class="piece_info">
+        <label>{{number}}</label>
+        <div>
+            <span>{{'dashboard-heat-time' | localize('tempo riscaldo')}}</span>
+            <span>{{heat_time}}</span>
+        </div>
+        <div>
+            <span>{{'dashboard-vacuum' | localize('vuoto')}}</span>
+            <span>{{vacuum}}</span>
+        </div>
+        <div>
+            <span>{{'dashboard-cycle-time-netto' | localize('tempo ciclo netto')}}</span>
+            <span>{{cycle_time_net}}</span>
+        </div>
+        <button @click="submenu=!submenu"></button>
+    </div>
+    <submenu v-if="submenu"></submenu>
+</div>
+</template>
+<script lang="ts" src="./piece.ts"></script>
\ No newline at end of file
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 b690f03d..1d188e81 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
@@ -9,18 +9,21 @@ 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 Piece from "./base-components/piece.vue";
 
 @Component({
   components: {
     appRibbon: AppRibbon,
     archInterface: ArchInterface,
     alarmList,
-    gauge, clock
+    gauge, clock,
+    piece:Piece
   }
 })
 export default class Dashboard extends Vue {
 
-
+  @Prop({ default: 10 })
+  pieces:number;
   @Prop({ default: 280 })
   temperature: number;
   @Prop({ default: 0 })
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue
index 1cac915e..63811fb9 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue
@@ -1,128 +1,137 @@
 <template>
-	<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>
-				<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>
+  <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>
+        <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>
+      <clock></clock>
 
-			<div class="header-buttons">
-				<button class="modal-close" @click="close()">
-					<i class="fa fa-remove"></i>
-				</button>
+	  <archInterface></archInterface>
 
-				<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>
+      <div class="header-buttons">
+        <button class="modal-close" @click="close()">
+          <i class="fa fa-remove"></i>
+        </button>
 
-		<div class="first_col">
-			<div class="timing-area">
-				<div class="start">
-					<small>{{'dashboard-timing-start' | localize('inizio')}}</small>
-					<time>10:53</time>
-				</div>
-				<div class="current">
-					<small>{{'dashboard-timing-elapsed' | localize('tempo trascorso')}}</small>
-					<time>10:53</time>
-				</div>
-				<div class="end">
-					<small>{{'dashboard-timing-end' | localize('fine')}}</small>
-					<time>~10:53</time>
-				</div>
-			</div>
+        <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>
 
-			<div class="setpoint">
-				<img src="assets/icons/png/inv.png" />
-				<label>{{temperature}}°C</label>
-				<button>
-					<i class="fa fa-minus"></i>
-				</button>
-				<div>
-					<small>{{'dashboard-setpoint' | localize('set point')}}</small>
-					<span>{{t_setpoint}}°C</span>
-				</div>
-				<button>
-					<i class="fa fa-plus"></i>
-				</button>
-			</div>
-		</div>
+    <div class="first_col">
+      <div class="timing-area">
+        <div class="start">
+          <small>{{'dashboard-timing-start' | localize('inizio')}}</small>
+          <time>10:53</time>
+        </div>
+        <div class="current">
+          <small>{{'dashboard-timing-elapsed' | localize('tempo trascorso')}}</small>
+          <time>10:53</time>
+        </div>
+        <div class="end">
+          <small>{{'dashboard-timing-end' | localize('fine')}}</small>
+          <time>~10:53</time>
+        </div>
+      </div>
 
-		<div class="second_col">
-			<gauge></gauge>
-			<div class="remaining_time">
-				<small>{{'dashboard-remaining-time' | localize('tempo rimanente')}}</small>
-				<time>{{remaining_time | date('HH:mm:ss')}}</time>
-			</div>
-		</div>
+      <div class="setpoint">
+        <img src="assets/icons/png/inv.png" />
+        <label>{{temperature}}°C</label>
+        <button>
+          <i class="fa fa-minus"></i>
+        </button>
+        <div>
+          <small>{{'dashboard-setpoint' | localize('set point')}}</small>
+          <span>{{t_setpoint}}°C</span>
+        </div>
+        <button>
+          <i class="fa fa-plus"></i>
+        </button>
+      </div>
+    </div>
 
-		<div class="third_col"></div>
-	</div>
+    <div class="second_col">
+      <gauge></gauge>
+      <div class="remaining_time">
+        <small>{{'dashboard-remaining-time' | localize('tempo rimanente')}}</small>
+        <time>{{remaining_time | date('HH:mm:ss')}}</time>
+      </div>
+    </div>
+
+    <div class="third_col">
+      <div class="pieces">
+        <piece></piece>
+        <aside class="scrollable auto">
+          <piece v-for="p in pieces" :key="p" :number="p"></piece>
+        </aside>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" src="./dashboard.ts"></script>
\ No newline at end of file