expandable headers

Step/wwwroot/assets/styles/base/colors.less

@@ -4,6 +4,8 @@
 
 @color-cef-transparency-key: #00FF00;
 
+@color-apple-green:#7ed321;
+
 @color-background-white: #fff;
 @color-backdrop: rgba(217, 217, 217, 0.5);
 @color-darkish-blue: #002680;

Step/wwwroot/assets/styles/base/ribbons.less

@@ -84,11 +84,20 @@
     width: 496px;
 }
 
-.app-ribbon.alarm-status {
+.app-ribbon.working{
+  .status-icon{
+    background-color:@color-apple-green;
+    i{
+      margin-left: 5px; // hack per il riallineamento di questa icona.
+    }
+  }
+}
+
+.app-ribbon.alarm {
     background-image: @color-alarm-background-image;
 }
 
-.app-ribbon.warning-status {
+.app-ribbon.warning {
     background-image: @color-warning-background-image;
 }
 

Step/wwwroot/assets/styles/style.css

@@ -430,10 +430,16 @@ button.under:active {
 .app-ribbon.big {
   width: 496px;
 }
-.app-ribbon.alarm-status {
+.app-ribbon.working .status-icon {
+  background-color: #7ed321;
+}
+.app-ribbon.working .status-icon i {
+  margin-left: 5px;
+}
+.app-ribbon.alarm {
   background-image: linear-gradient(to bottom, #ff4d63, #a10518);
 }
-.app-ribbon.warning-status {
+.app-ribbon.warning {
   background-image: linear-gradient(to bottom, #f6a623, #dc8c09);
 }
 .app-ribbon.open {

Step/wwwroot/src/components/test-status.vue

@@ -30,11 +30,11 @@
 
 </template>
 <script>
-import { alarmsModelActions } from "../store/alarms.store";
 import {
   machineStatusActions,
-  MachineStatusModel
-} from "../store/machineStatus.store";
+  MachineStatusModel,
+  alarmsModelActions, processModelActions
+} from "../store";
 
 export default {
   methods: {
@@ -91,6 +91,10 @@ export default {
         this.$store,
         !this.$store.state.machineStatus.waterJet2Alarm
       );
+    },
+    addProcess() {
+      processModelActions.addProcess(this.$store, {});
+
     }
   }
 };

Step/wwwroot/src/modules/app-header.ts

@@ -1,6 +1,9 @@
 import Vue from "vue";
 import Component from "vue-class-component";
 import { AppRibbon, UserInfo } from "./base-components";
+import { AppModel } from "../store";
+
+
 
 @Component({ name: "app-header", components: { appRibbon: AppRibbon, userInfo: UserInfo } })
 export default class AppHeader extends Vue {
@@ -10,4 +13,24 @@ export default class AppHeader extends Vue {
   public get mainStatus() { return this.$store.getters.mainStatus; };
   public get powerOnStatus() { return this.$store.getters.powerOnAlarms; };
 
+
+  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.process.length > 0) return ribbonStatusEnum.Working;
+
+    return ribbonStatusEnum.Idle;
+  }
+
+}
+
+enum ribbonStatusEnum {
+  Idle = 0,
+  Working = 1,
+  Warning = 2,
+  Alarm = 3
 }

Step/wwwroot/src/modules/app-header.vue

@@ -1,7 +1,9 @@
 <template>
   <header>
-    <app-ribbon>
-       <i class="fa fa-check" slot="icon"></i>
+    <app-ribbon :status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
+                :expanded="ribbonStatus">
+       <i class="fa fa-check" slot="icon" v-if="ribbonStatus == 0"></i>
+       <i class="fa fa-play" slot="icon" v-if="ribbonStatus == 1"></i>
     </app-ribbon>
 
     <button :class="{ red: mainStatus, blue: !mainStatus }">

Step/wwwroot/src/modules/base-components/ribbons/app-ribbon.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="ribbon-container">
-  <div class="app-ribbon" :class="{'big': expanded}">
+  <div class="app-ribbon" v-bind:class="[ {big: this.expanded}, status]">
     <span class="status-icon">
       <slot name="icon"></slot>
     </span>
@@ -31,14 +31,6 @@ export default {
   computed: {
     hasService() {
       return !!this.$slots["service-content"];
-    },
-    ribbonClass() {
-      let obj = {
-        big: this.expanded
-      };
-      if (this.status) obj[this.status] = true;
-
-      return obj;
     }
   }
 };

Step/wwwroot/src/store/app.store.ts

@@ -1,6 +1,7 @@
 import { machineInfoStore, MachineInfoModel } from "./machineInfo.store";
 import { machineStatusStore, MachineStatusModel } from "./machineStatus.store";
-import { alarmsStore } from "./alarms.store";
+import { alarmsStore, AlarmsModel } from "./alarms.store";
+import { processStore, RunningProcessModel } from "./runningProcess.store";
 
 // Store Model
 export interface AppModel {
@@ -9,6 +10,9 @@ export interface AppModel {
 
   machineInfo: MachineInfoModel;
   machineStatus: MachineStatusModel;
+
+  alarms: AlarmsModel;
+  process: RunningProcessModel;
 }
 
 // Mutations Name
@@ -33,7 +37,9 @@ export const store = {
   modules: {
     // Sottomoduli dello store
     machineInfo: machineInfoStore,
-    machineStatus: machineStatusStore
+    machineStatus: machineStatusStore,
+    process: processStore,
+    alarms: alarmsStore
   },
 
   mutations: {

Step/wwwroot/src/store/index.js

@@ -1,5 +1,21 @@
 import { store, AppModel, appModelActions } from "./app.store";
 import { machineInfoActions, MachineInfoModel } from "./machineInfo.store";
 import { machineStatusActions, MachineStatusModel } from "./machineStatus.store";
+import { AlarmsModel, alarmsModelActions, alarmsStore } from "./alarms.store";
+import { processModelActions, processStore, RunningProcessModel } from "./runningProcess.store";
 
-export { store, AppModel, appModelActions, machineInfoActions, MachineInfoModel, machineStatusActions, MachineStatusModel }
+export {
+    store,
+    AppModel,
+    appModelActions,
+    machineInfoActions,
+    MachineInfoModel,
+    machineStatusActions,
+    MachineStatusModel,
+    AlarmsModel,
+    alarmsModelActions,
+    alarmsStore,
+    processModelActions,
+    processStore,
+    RunningProcessModel
+}

Step/wwwroot/src/store/machineStatus.store.ts

@@ -1,8 +1,6 @@
 
 
 export interface MachineStatusModel {
-  runningProcess: Array<any>,
-
   powerOnAlarm: boolean,
   airPressureAlarm: boolean,
   protectionsAlarm: boolean,
@@ -29,7 +27,6 @@ export interface MachineStatusActions {
 
 export const machineStatusStore = {
   state: {
-    runningProcess: [],
 
     powerOnAlarm: true,
     airPressureAlarm: true,

Step/wwwroot/src/store/runningProcess.store.ts

@@ -0,0 +1,43 @@
+export interface RunningProcessModel {
+  process: Array<any>
+}
+export interface ProcessModelActionsInterface {
+  removeAllProcess(context);
+  addProcess(context, process);
+  removeProcess(context, process);
+}
+
+
+export const processStore = {
+
+  state: {
+    process: [],
+  } as RunningProcessModel,
+  mutations: {
+    AddProcess(store, process) {
+      store.process.push(process);
+    },
+    RemoveProcess(store, process) {
+      let idx = store.process.indexOf(process);
+      if (idx >= 0)
+        store.process.splice(idx, 1);
+    },
+    RemoveAllProcess(store) {
+      store.process.length = 0;
+    }
+  },
+  actions: {
+    addProcess(context, process) {
+      context.commit("AddProcess", process);
+    },
+    removeProcess(context, process) {
+      context.commit("RemoveProcess", process);
+    },
+    removeAllProcess(context) {
+      context.commit("RemoveAllProcess");
+    }
+
+  } as ProcessModelActionsInterface
+}
+
+export const processModelActions = processStore.actions as ProcessModelActionsInterface;