From 2199c86229d031ccc00bb47e30e6d406544c8e5a Mon Sep 17 00:00:00 2001 From: Alessio Date: Mon, 18 May 2020 15:09:06 +0200 Subject: [PATCH] add second dashboard --- .../wwwroot/assets/styles/base/layout.less | 1 + .../styles/base/preriscaldo-dashboard.less | 96 ++++++++++ Thermo.Active/wwwroot/assets/styles/style.css | 74 ++++++++ Thermo.Active/wwwroot/src/App.ts | 8 +- Thermo.Active/wwwroot/src/App.vue | 1 + .../preriscaldo-dashboard.ts | 168 ++++++++++++++++++ .../preriscaldo-dashboard.vue | 63 +++++++ .../components/programmazione-preriscaldo.ts | 6 + .../components/programmazione-preriscaldo.vue | 2 +- Thermo.Active/wwwroot/src/store/app.store.ts | 11 ++ 10 files changed, 428 insertions(+), 2 deletions(-) create mode 100644 Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less create mode 100644 Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.ts create mode 100644 Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue diff --git a/Thermo.Active/wwwroot/assets/styles/base/layout.less b/Thermo.Active/wwwroot/assets/styles/base/layout.less index 5b6ad159..b45d74af 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/layout.less +++ b/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"; diff --git a/Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/preriscaldo-dashboard.less new file mode 100644 index 00000000..35366d5b --- /dev/null +++ b/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; + } + } + + } + } +} diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css index 3454f57a..a8218f98 100644 --- a/Thermo.Active/wwwroot/assets/styles/style.css +++ b/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; } diff --git a/Thermo.Active/wwwroot/src/App.ts b/Thermo.Active/wwwroot/src/App.ts index ecf2fe37..e965ca61 100644 --- a/Thermo.Active/wwwroot/src/App.ts +++ b/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) { diff --git a/Thermo.Active/wwwroot/src/App.vue b/Thermo.Active/wwwroot/src/App.vue index 3d25ab4a..80244b8d 100644 --- a/Thermo.Active/wwwroot/src/App.vue +++ b/Thermo.Active/wwwroot/src/App.vue @@ -3,6 +3,7 @@
+ 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 new file mode 100644 index 00000000..70781c1c --- /dev/null +++ b/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 + } + \ No newline at end of file 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 new file mode 100644 index 00000000..121f4b2a --- /dev/null +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue @@ -0,0 +1,63 @@ + + + \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.ts index 20fe1982..c07b143b 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.ts +++ b/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); + } + } \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.vue index d771058f..0bb2700c 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.vue +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/programmazione-preriscaldo/components/programmazione-preriscaldo.vue @@ -20,7 +20,7 @@
- +
diff --git a/Thermo.Active/wwwroot/src/store/app.store.ts b/Thermo.Active/wwwroot/src/store/app.store.ts index 687920ca..628b53e5 100644 --- a/Thermo.Active/wwwroot/src/store/app.store.ts +++ b/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);