add second dashboard

Thermo.Active/wwwroot/assets/styles/base/layout.less

@@ -8,6 +8,7 @@
 @import "formato.less";
 @import "slider.less";
 @import "tastierino.less";
+@import "preriscaldo-dashboard.less";
 @import "circlegantt.less";
 @import "paddle.less";
 @import "arretramento-riscaldi.less";

Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less

@@ -0,0 +1,96 @@
+// out: false, sourceMap: false, main: ../style.less
+@import "grid-system.less";
+@import "colors.less";
+@import "fonts.less";
+@modal: modal;
+
+.preriscaldodashboard{
+    height: 100%;
+    width: 100%;
+    background-image: url("../../assets/icons/png/bg.png");
+    position: fixed;
+    z-index: 1002;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    .header{
+        width: 100%;
+        display: flex;
+      
+    
+        .ribbon-container{
+            width: 496px;
+            height: 80px;
+            z-index: 900;
+        }
+    
+        .box-date{
+            display: flex;
+            width: 70%;
+            margin-left: 100px;
+    
+            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;
+                    }
+                }
+            
+        }
+    }
+}

Thermo.Active/wwwroot/assets/styles/style.css

@@ -4765,6 +4765,80 @@
   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: 1002;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.preriscaldodashboard .header {
+  width: 100%;
+  display: flex;
+}
+.preriscaldodashboard .header .ribbon-container {
+  width: 496px;
+  height: 80px;
+  z-index: 900;
+}
+.preriscaldodashboard .header .box-date {
+  display: flex;
+  width: 70%;
+  margin-left: 100px;
+}
+.preriscaldodashboard .header .box-date div {
+  flex-shrink: 0;
+  font-size: 47px;
+  text-align: right;
+  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;
+}
 .circle-gantt {
   height: 70px;
 }

Thermo.Active/wwwroot/src/App.ts

@@ -13,7 +13,8 @@ import { underTheHood } from "@/app_modules/under-the-hood";
 import SwitchButton from "@/app_modules_thermo/components/paddle/switch-button.vue";
 import Sidebar from "@/app_modules_thermo/components/paddle/sidebar.vue";
 import ToggleButton from "@/components/toggleButton.vue";
-import Dashboard from "@/app_modules_thermo/dashboard/dashboard.vue"
+import Dashboard from "@/app_modules_thermo/dashboard/dashboard.vue";
+import PreDashboard from "@/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue";
 
 
 import * as iziToast from "izitoast";
@@ -37,6 +38,7 @@ declare var cmsClient;
     switchButton: SwitchButton,
     sidebar: Sidebar,
     dashboard: Dashboard,
+    predashboard:PreDashboard,
     alarmList,
     underTheHood,
   }
@@ -165,6 +167,10 @@ export default class app extends Vue {
     return this.$store.state.isShowDashboard;
   }
 
+  get statusPreDashboard(){
+    return this.$store.state.isShowPreDashboard;
+  }
+
   @Watch("isMainViewLiftedUp")
   isMainViewLiftedUpChanged() {
     if (this.state.isMainViewLiftedUp) {

Thermo.Active/wwwroot/src/App.vue

@@ -3,6 +3,7 @@
     <div id="app">
       <app-header :class="{'blur':applyBlur}"></app-header>
       <dashboard v-if="statusDashboard"></dashboard>
+      <predashboard v-if="statusPreDashboard"></predashboard>
       <alarm-list :applyBlur="applyBlur"></alarm-list>
 
       <under-the-hood :class="{'blur':(applyBlur || applyBlurNc)}"></under-the-hood>

Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts

@@ -0,0 +1,168 @@
+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";
+
+@Component({
+    components: {
+      appRibbon: AppRibbon,
+      archInterface: ArchInterface,
+      alarmList,
+    }
+  })
+export default class PreriscaldoDashboard extends Vue{
+
+    $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
+  
+    get currentUser() {
+      return (this.$store.state as AppModel).currentUser;
+    }
+  
+    get cmsConnectReady() {
+      return (this.$store.state as AppModel).machineInfo.cmsConnectReady;
+    }
+    
+  
+    getColor(nome,cognome){
+      return getColorFromName(nome,cognome);
+    }
+    isDarkColor(color){
+      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 {
+  
+      // Controllo se ci sono allarmi
+      let s = this.$store.state as AppModel;
+  
+      if (s.alarms.alarms.length > 0) return ribbonStatusEnum.Alarm;
+      if (s.alarms.warnings.length > 0) return ribbonStatusEnum.Warning;
+      if (s.process.running) return ribbonStatusEnum.Working;
+      return ribbonStatusEnum.Idle;
+  
+    }
+  
+    public get alarmTitle() {
+      let s = this.$store.state as AppModel;
+  
+      switch (this.ribbonStatus) {
+  
+        case ribbonStatusEnum.Warning:
+          if (this.alarmCount == 1) return "warning_ribbon_title_1_item";
+          return "warning_ribbon_title_more_items";
+        case ribbonStatusEnum.Alarm:
+          if (this.alarmCount == 1) return "alarm_ribbon_title_1_item";
+          return "alarm_ribbon_title_more_items";
+        default:
+          return "";
+      }
+  
+    }
+  
+    public get alarmCount() {
+      return this.alarms.length;
+    }
+  
+    public get alarms() {
+      let s = this.$store.state as AppModel;
+      return s.alarms.alarms.concat(s.alarms.warnings);
+  
+    }
+  
+    public get serviceRequired() {
+      return this.$store.state.alarms.serviceAlarms.length > 0;
+    }
+  
+    public get showDetails(): boolean {
+      let s = this.$store.state as AppModel;
+      switch (this.ribbonStatus) {
+        case ribbonStatusEnum.Warning:
+          return s.alarms.warnings.length == 1;
+        case ribbonStatusEnum.Alarm:
+          return s.alarms.alarms.length == 1;
+        default: return false;
+      }
+    }
+  
+    public sendMessage(name:string) {
+      messageService.publishToChannel(name);
+    }
+      
+    close() {
+      appModelActions.ShowDashboard(this.$store);
+    };  
+  
+  }
+  
+  enum ribbonStatusEnum {
+    Idle = 0,
+    Working = 1,
+    Warning = 2,
+    Alarm = 3
+  }
+  

Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="preriscaldodashboard">
+            <div class="header">
+            <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>
+
+            <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>
+    </div>
+</template>
+
+<script lang="ts" src="./preriscaldo-dashboard"></script>

Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.ts

@@ -4,6 +4,7 @@ import {Prop} from 'vue-property-decorator';
 import { messageService } from "@/_base/messageService";
 import { Modal, ModalHelper } from "@/components/modals";
 import ToggleButton from "@/components/toggleButton.vue";
+import {appModelActions} from "@/store/app.store";
 
 @Component({
     components: {
@@ -27,4 +28,9 @@ export default class ProgrammazionePreriscaldo extends Vue{
         messageService.publishToChannel(name);
     }
 
+    showPreDashboard() {
+        
+        appModelActions.ShowPreDashboard(this.$store);
+      }
+
 }

Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.vue

@@ -20,7 +20,7 @@
                         <label>Blocca schermo</label>
                         <toggle-button v-model="block"></toggle-button>
                     </div>
-                    <button>Mostra countdown</button>
+                    <button @click="showPreDashboard()">Mostra countdown</button>
                 </aside>
                 <hr>
                 <div class="specific">

Thermo.Active/wwwroot/src/store/app.store.ts

@@ -26,6 +26,7 @@ export interface AppModel {
   isMainViewLiftedUp: boolean;
   isFavSoftkeySelection: boolean;
   isShowDashboard: boolean;
+  isShowPreDashboard: boolean;
 
   paddle: PaddleModel;
   machineInfo: MachineInfoModel;
@@ -55,6 +56,7 @@ export interface AppModelActionsInterface {
   FavSoftkeyStop(context);
   MainViewToggle(context);
   ShowDashboard(context);
+  ShowPreDashboard(context);
   SetMachineInto(context, name: string, sn: string);
   SetCurrentUser(context, userinfo);
   SetCurrentUserLanguage(context, newlanguage);
@@ -69,6 +71,7 @@ const _store = {
     isMainViewLiftedUp: false,
     isFavSoftkeySelection: false,
     isShowDashboard: false,
+    isShowPreDashboard: false
   } as AppModel,
 
   modules: {
@@ -106,6 +109,10 @@ const _store = {
     },
     setShowDashboard(state) {
       state.isShowDashboard = !state.isShowDashboard;
+    },
+    setShowPreDashboard(state) {
+      
+      state.isShowPreDashboard = !state.isShowPreDashboard;
     }
   },
 
@@ -129,6 +136,10 @@ const _store = {
     ShowDashboard(context){
       context.commit("setShowDashboard");
     },
+    ShowPreDashboard(context){
+      
+      context.commit("setShowPreDashboard");
+    },
     SetCurrentUser(context, userinfo) {
       context.commit("setCurrentUser", userinfo);