header, icons & store

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

@@ -18,7 +18,11 @@
 @color-body-background: #657178;
 
 @color-alarm-background-image:  linear-gradient(to bottom, #ff4d63, #a10518);
-@color-alarm-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+@color-alarm-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
+
+@color-warning-background-image:  linear-gradient(to bottom, #f6a623, #dc8c09);
+@color-ribbon-opened: linear-gradient(to bottom, #ffffff, #eeeeee);
+
 
 @color-footer-background-image: linear-gradient(to bottom, #1791ff, #005e94);
 @color-footer-box-shadow: 3px 2px 3px 0 rgba(0, 0, 0, 0.4);

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

@@ -29,7 +29,19 @@
     }
     button>img {
         margin: auto;
+        height: @header-button-size/2;
+        margin: auto;
+        display: block;
     }
+
+    button>img.h-20{
+      height: 20px;
+    }
+
+    button>img.h-24{
+      height: 24px;
+    }
+
     button .machine-info small {
         display: block;
         text-align: left;

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

@@ -55,7 +55,26 @@ body {
     left: 0;
     right: 0;
     bottom: 80px;
-    height: calc(~'100vh - 80px');
-    // background-color: rgb(145, 55, 55);
+    height: calc(~'100vh - 80px'); // background-color: rgb(145, 55, 55);
     z-index: 1;
 }
+
+.tester {
+    margin: auto;
+    width: 60vw;
+    height: 60vh;
+    top: calc(50% - 30vh);
+    position: absolute;
+    left: calc(50% - 30vw);
+    background-color: white;
+    padding: 10px;
+
+    .row{
+      display: flex;
+    }
+
+    button{
+      height: 50px;
+      margin: 0 10px;
+    }
+}

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

@@ -1,14 +1,97 @@
 // out: false, sourceMap: false, main: ../style.less
 @import "colors.less";
 @import "header.less";
-
-.alarm-ribbon {
-    background-image: @color-alarm-background-image;
-    box-shadow: @color-alarm-box-shadow;
+@ribbon-status-size: 64px;
+.ribbon-container {
     height: 100%;
-    min-width: 100px;
     float: left;
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    background-image: @color-ribbon-opened;
+    box-shadow: @color-alarm-box-shadow;
     border-top-right-radius: @header-height /2;
     border-bottom-right-radius: @header-height /2;
     margin-right: 5px;
+    .app-ribbon {
+        // background-image: @color-alarm-background-image;
+        background-image: @color-ribbon-opened;
+        box-shadow: @color-alarm-box-shadow;
+        min-width: 80px;
+        border-top-right-radius: @header-height /2;
+        border-bottom-right-radius: @header-height /2;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        color: @color-clear-blue;
+        .status-icon {
+            margin-left: 16px;
+            margin-right: 8px;
+            display: flex;
+            color: #fff;
+            align-items: center;
+            width: @ribbon-status-size;
+            height: @ribbon-status-size;
+            border-radius: @ribbon-status-size /2;
+            background-color: @color-clear-blue;
+        }
+        .status-icon * {
+            width: 100%;
+            margin: auto;
+            text-align: center;
+            font-size: 32px;
+        }
+    }
+    .service-ribbon {
+        display: flex;
+        align-items: center;
+        color: @color-scarlet;
+        .service-icon {
+            width: @ribbon-status-size;
+            height: @ribbon-status-size;
+            border-radius: @ribbon-status-size /2;
+            display: flex;
+            align-items: center;
+            background-color: @color-scarlet;
+            margin: auto;
+            text-align: center;
+            margin-left: 16px;
+            margin-right: 8px;
+            img {
+                display: block;
+                margin: auto;
+            }
+        }
+    }
+    .app-ribbon *,
+    .service-ribbon * {
+        margin: 8px;
+    }
+
+    .app-ribbon .status-content,
+    .service-ribbon .service-content{
+      margin: 0;
+    }
+
+    .app-ribbon i,
+    .service-ribbon i {
+        font-size: 32px;
+        cursor: pointer;
+    }
+}
+
+.app-ribbon.big {
+    width: 496px;
+}
+
+.app-ribbon.alarm-status {
+    background-image: @color-alarm-background-image;
+}
+
+.app-ribbon.warning-status {
+    background-image: @color-warning-background-image;
+}
+
+.app-ribbon.open {
+    background-image: @color-ribbon-opened !important;
 }

Step/wwwroot/assets/styles/style.css

@@ -300,7 +300,15 @@ button.under:active {
   color: #002680;
 }
 #app > header button > img {
+  height: 22px;
   margin: auto;
+  display: block;
+}
+#app > header button > img.h-20 {
+  height: 20px;
+}
+#app > header button > img.h-24 {
+  height: 24px;
 }
 #app > header button .machine-info small {
   display: block;
@@ -345,16 +353,92 @@ button.under:active {
 #app > header .user-info time i {
   margin-right: 10px;
 }
-.alarm-ribbon {
-  background-image: linear-gradient(to bottom, #ff4d63, #a10518);
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+.ribbon-container {
   height: 100%;
-  min-width: 100px;
   float: left;
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
   border-top-right-radius: 40px;
   border-bottom-right-radius: 40px;
   margin-right: 5px;
 }
+.ribbon-container .app-ribbon {
+  background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
+  min-width: 80px;
+  border-top-right-radius: 40px;
+  border-bottom-right-radius: 40px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  color: #1791ff;
+}
+.ribbon-container .app-ribbon .status-icon {
+  margin-left: 16px;
+  margin-right: 8px;
+  display: flex;
+  color: #fff;
+  align-items: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  background-color: #1791ff;
+}
+.ribbon-container .app-ribbon .status-icon * {
+  width: 100%;
+  margin: auto;
+  text-align: center;
+  font-size: 32px;
+}
+.ribbon-container .service-ribbon {
+  display: flex;
+  align-items: center;
+  color: #d0021b;
+}
+.ribbon-container .service-ribbon .service-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  display: flex;
+  align-items: center;
+  background-color: #d0021b;
+  margin: auto;
+  text-align: center;
+  margin-left: 16px;
+  margin-right: 8px;
+}
+.ribbon-container .service-ribbon .service-icon img {
+  display: block;
+  margin: auto;
+}
+.ribbon-container .app-ribbon *,
+.ribbon-container .service-ribbon * {
+  margin: 8px;
+}
+.ribbon-container .app-ribbon .status-content,
+.ribbon-container .service-ribbon .service-content {
+  margin: 0;
+}
+.ribbon-container .app-ribbon i,
+.ribbon-container .service-ribbon i {
+  font-size: 32px;
+  cursor: pointer;
+}
+.app-ribbon.big {
+  width: 496px;
+}
+.app-ribbon.alarm-status {
+  background-image: linear-gradient(to bottom, #ff4d63, #a10518);
+}
+.app-ribbon.warning-status {
+  background-image: linear-gradient(to bottom, #f6a623, #dc8c09);
+}
+.app-ribbon.open {
+  background-image: linear-gradient(to bottom, #ffffff, #eeeeee) !important;
+}
 footer {
   position: absolute;
   z-index: 200;
@@ -487,6 +571,23 @@ body {
   height: calc(100vh - 80px);
   z-index: 1;
 }
+.tester {
+  margin: auto;
+  width: 60vw;
+  height: 60vh;
+  top: calc(20%);
+  position: absolute;
+  left: calc(20%);
+  background-color: white;
+  padding: 10px;
+}
+.tester .row {
+  display: flex;
+}
+.tester button {
+  height: 50px;
+  margin: 0 10px;
+}
 body {
   font-family: 'Work Sans', sans-serif;
 }

Step/wwwroot/src/app.modules.js

@@ -24,4 +24,7 @@ export const Home = () =>
 export const TestLoader = () =>
     import ("./components/test-loader.vue");
 export const TestEmpty = () =>
-    import ("./components/test-empty.vue");
+    import ("./components/test-empty.vue");
+
+export const TestHeader = () =>
+    import ("./components/test-status.vue");

Step/wwwroot/src/app.routes.js

@@ -1,4 +1,4 @@
-import { Home, TestLoader, TestEmpty } from "./app.modules";
+import { Home, TestLoader, TestEmpty, TestHeader } from "./app.modules";
 
 export let routes = [
     { path: "", component: Home, name: "home" },
@@ -10,5 +10,6 @@ export let routes = [
     { path: "/utility" },
     { path: "/scada" },
     { path: "/test/loader", component: TestLoader, name: "testloader" },
-    { path: "/test/empty", component: TestEmpty, name: "testloader" }
+    { path: "/test/empty", component: TestEmpty, name: "testloader" },
+    { path: "/test/header", component: TestHeader, name: "testHeader" }
 ];

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

@@ -0,0 +1,98 @@
+<template>
+
+  <div class="tester">
+    <h3>test per la barra degli allarmi</h3>
+    <div class="row">
+      <button @click="removeAllAlarms()">Cancella tutti gli allarmi</button>
+      <button @click="addAlarm()">Aggiungi un allarme</button>
+      <button @click="addWarning()">Aggiungi un warning</button>
+      <button @click="addProcess()">Aggiungi un processo in run</button>
+      <button @click="removeProcess()">Rimuovi processi in run</button>
+    </div>
+    <hr>
+    <h3>test per la barra di stato macchina</h3>
+    <div class="row">
+      <button @click="toggleAssi()">Power On/Off assi</button>
+      <button @click="toggleAria()">Pressione aria</button>
+      <button @click="toggleProtezioni()">Apri/Chiudi protezioni</button>
+      <button @click="toggleEmergenza()">Attiva/Disattiva pulsanti emergenza</button>
+      <button @click="toggleSettings()">Attiva/Disattiva modalità settings</button>
+      <button @click="toggleChiave()">Inserisci/Rimuovi chiave per avviamento</button>
+    </div>
+      <hr>
+    <h3>test per le icone di taratura macchina</h3>
+    <div class="row">
+      <button @click="toggleResetAxes()">Taratura Assi</button>
+      <button @click="toggleWaterJet1()">Waterjet 1</button>
+      <button @click="toggleWaterJet2()">Waterjet 2</button>
+    </div>
+  </div>
+
+</template>
+<script>
+import { alarmsModelActions } from "../store/alarms.store";
+import {
+  machineStatusActions,
+  MachineStatusModel
+} from "../store/machineStatus.store";
+
+export default {
+  methods: {
+    toggleAssi() {
+      machineStatusActions.setPowerAlarm(
+        this.$store,
+        !this.$store.state.machineStatus.powerOnAlarm
+      );
+    },
+    toggleAria() {
+      machineStatusActions.setAirPressureAlarm(
+        this.$store,
+        !this.$store.state.machineStatus.airPressureAlarm
+      );
+    },
+    toggleProtezioni() {
+      machineStatusActions.setProtectionsAlarm(
+        this.$store,
+        !this.$store.state.machineStatus.protectionsAlarm
+      );
+    },
+    toggleEmergenza() {
+      machineStatusActions.setEmergencyAlarm(
+        this.$store,
+        !this.$store.state.machineStatus.emergencyAlarm
+      );
+    },
+    toggleSettings() {
+      machineStatusActions.setSettingsModeAlarm(
+        this.$store,
+        !this.$store.state.machineStatus.settingsModeAlarm
+      );
+    },
+    toggleChiave() {
+      machineStatusActions.setKeyReadyAlarm(
+        this.$store,
+        !this.$store.state.machineStatus.keyReadyAlarm
+      );
+    },
+    toggleResetAxes() {
+      machineStatusActions.setResetAxesAlarm(
+        this.$store,
+        !this.$store.state.machineStatus.resetAxesAlarm
+      );
+    },
+    toggleWaterJet1() {
+      machineStatusActions.setWaterJet1Alarm(
+        this.$store,
+        !this.$store.state.machineStatus.waterJet1Alarm
+      );
+    },
+    toggleWaterJet2() {
+      machineStatusActions.setWaterJet2Alarm(
+        this.$store,
+        !this.$store.state.machineStatus.waterJet2Alarm
+      );
+    }
+  }
+};
+</script>
+

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

@@ -8,7 +8,7 @@
       <button @click="openProgram('alarms')" class="oval alarms-manager" :class="{ big:isInPath('alarms') && !state.isMainViewLiftedUp}"></button>
       <button @click="openProgram('maintenance')" class="oval maintenance-manager" :class="{ big:isInPath('maintenance') && !state.isMainViewLiftedUp}"></button>
       <button @click="openProgram('')" class="oval"></button>
-      <button @click="openProgram('')" class="oval"></button>
+      <button @click="openProgram('/test/header')" class="oval" :class="{ big:isInPath('/test/header') && !state.isMainViewLiftedUp}"></button>
     </div>
     <div class="machine-area">
       <button class="under" @click="toggleMainView()">

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

@@ -1,12 +1,13 @@
 import Vue from "vue";
 import Component from "vue-class-component";
-import { AlarmRibbon, UserInfo } from "./base-components";
+import { AppRibbon, UserInfo } from "./base-components";
 
-@Component({ name: "app-header", components: { alarmRibbon: AlarmRibbon, userInfo: UserInfo } })
+@Component({ name: "app-header", components: { appRibbon: AppRibbon, userInfo: UserInfo } })
 export default class AppHeader extends Vue {
   $store: any;
 
   public get state() { return this.$store.state.machineStatus; };
-
+  public get mainStatus() { return this.$store.getters.mainStatus; };
+  public get powerOnStatus() { return this.$store.getters.powerOnAlarms; };
 
 }

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

@@ -1,14 +1,25 @@
 <template>
   <header>
-    <alarm-ribbon></alarm-ribbon>
+    <app-ribbon>
+       <i class="fa fa-check" slot="icon"></i>
+    </app-ribbon>
 
-    <button class="red"></button>
-    <button ></button>
-    <button></button>
-    <button></button>
-    <button></button>
-    <button></button>
-    <button class="blue"></button>
+    <button :class="{ red: mainStatus, blue: !mainStatus }">
+      <img class="h-24" src="/assets/icons/png/switch-icon@2x.png">
+    </button>
+    <button class="power-on" v-if="state.powerOnAlarm"><img src="/assets/icons/png/control-icon-error@2x.png"></button>
+    <button class="airflow" v-if="state.airPressureAlarm"><img src="/assets/icons/png/air-icon@2x.png"></button>
+    <button class="protections" v-if="state.protectionsAlarm"><img src="/assets/icons/png/lock-icon-error@2x.png"></button>
+    <button class="emergency" v-if="state.emergencyAlarm"><img src="/assets/icons/png/refresh-icon-error@2x.png"></button>
+    <button class="settings-mode" v-if="state.settingsModeAlarm"></button>
+    <button class="key" v-if="state.keyReadyAlarm"><img src="/assets/icons/png/key-icon-error@2x.png"></button>
+    <button :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" v-if="state.resetAxesAlarm"><img src="/assets/icons/png/taratura-icon-error@2x.png"></button>
+    <button class="key" v-if="state.waterJet1Alarm"></button>
+    <button class="key" v-if="state.waterJet2Alarm"></button>
     <user-info></user-info>
   </header>
 

Step/wwwroot/src/modules/base-components/index.js

@@ -1,8 +1,8 @@
 import Modal from "./modal.vue";
 import Loader from "./loader.vue";
-import AlarmRibbon from "./ribbons/alarm-ribbon.vue";
+import AppRibbon from "./ribbons/app-ribbon.vue";
 import UserInfo from "./user-info.vue";
 import ModalContainer from "./modal-container.vue";
 import { ModalHelper } from "./ModalHelper";
 
-export { Loader, Modal, AlarmRibbon, UserInfo, ModalContainer, ModalHelper };
+export { Loader, Modal, AppRibbon, UserInfo, ModalContainer, ModalHelper };

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

@@ -1,4 +0,0 @@
-<template>
-  <div class="alarm-ribbon"></div>
-</template>
-<script src="./alarm-ribbon.ts" lang="ts"></script>

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

@@ -0,0 +1,46 @@
+<template>
+<div class="ribbon-container">
+  <div class="app-ribbon" :class="{'big': expanded}">
+    <span class="status-icon">
+      <slot name="icon"></slot>
+    </span>
+    <span class="status-content">
+      <slot name="content"></slot>
+    </span>
+    <i class="fa" :class="{ 'fa-caret-down': !open, 'fa-caret-up':open }" v-if="showExpander"></i>
+  </div>
+  <div class="service-ribbon" v-if="hasService">
+    <span class="service-icon">
+      <img src="/assets/icons/png/service.png">
+    </span>
+    <span class="service-content">
+      <slot name="service-content"></slot>
+    </span>
+    <i class="fa" :class="{ 'fa-caret-down': !open, 'fa-caret-up':open }"></i>
+  </div>
+</div>
+</template>
+<script>
+export default {
+  props: {
+    showExpander: { default: false },
+    open: { default: false },
+    status: { default: null },
+    expanded: { default: false }
+  },
+  computed: {
+    hasService() {
+      return !!this.$slots["service-content"];
+    },
+    ribbonClass() {
+      let obj = {
+        big: this.expanded
+      };
+      if (this.status) obj[this.status] = true;
+
+      return obj;
+    }
+  }
+};
+</script>
+

Step/wwwroot/src/store/alarms.store.ts

@@ -1,15 +1,36 @@
 export interface AlarmsModel {
-
+  alarms: Array<any>,
+  warnings: Array<any>
 }
 export interface AlarmsModelActionsInterface {
-
+  removeAllAlarms(context);
+  addAlarm(context, alarm);
+  addWarning(context, alarm);
 }
 
 
 export const alarmsStore = {
 
-  state: {} as AlarmsModel,
-  actions: {} as AlarmsModelActionsInterface
+  state: {
+    alarms: [],
+    warnings: []
+  } as AlarmsModel,
+  mutations: {
+    AddAlarm(store, alarm) {
+      store.alarms.push(alarm);
+    },
+    RemoveAlarm(store, alarm) {
+      let idx = store.alarms.indexOf(alarm);
+      if (idx >= 0)
+        store.alarms.splice(idx, 1);
+    }
+  },
+  actions: {
+    removeAllAlarms(context) { },
+    addAlarm(context, alarm) { },
+    addWarning(context, warning) { }
+
+  } as AlarmsModelActionsInterface
 }
 
 export const alarmsModelActions = alarmsStore.actions as AlarmsModelActionsInterface;

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

@@ -1,5 +1,6 @@
 import { machineInfoStore, MachineInfoModel } from "./machineInfo.store";
 import { machineStatusStore, MachineStatusModel } from "./machineStatus.store";
+import { alarmsStore } from "./alarms.store";
 
 // Store Model
 export interface AppModel {

Step/wwwroot/src/store/machineInfo.store.ts

@@ -36,7 +36,7 @@ export const machineInfoStore = {
   mutations: {
     UpdateMachineInfo(store, model: MachineInfoModel) {
       for (const key in model) {
-        store.state[key] = model[key]
+        store[key] = model[key]
       }
     }
   },

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

@@ -1,49 +1,99 @@
+
+
 export interface MachineStatusModel {
-  machineSerialNumber: string;
-  machineName: string;
+  runningProcess: Array<any>,
 
-  installationDate?: Date;
-  ncBrand?: string;
-  ncModel?: string;
-  firmwareVersion?: string;
-  plcVersion?: string;
+  powerOnAlarm: boolean,
+  airPressureAlarm: boolean,
+  protectionsAlarm: boolean,
+  emergencyAlarm: boolean,
+  settingsModeAlarm: boolean,
+  keyReadyAlarm: boolean,
 
-  cmsServerVersion?: string;
-  cmsCoreVersion?: string;
-  cmsClientVersion?: String;
+  resetAxesAlarm: boolean,
+  waterJet1Alarm: boolean,
+  waterJet2Alarm: boolean
 }
 
 export interface MachineStatusActions {
-  updateMachineStatus(context, model: MachineStatusModel)
+  setPowerAlarm(context, status: boolean),
+  setAirPressureAlarm(context, status: boolean),
+  setProtectionsAlarm(context, status: boolean),
+  setEmergencyAlarm(context, status: boolean),
+  setSettingsModeAlarm(context, status: boolean),
+  setKeyReadyAlarm(context, status: boolean),
+  setResetAxesAlarm(context, status: boolean)
+  setWaterJet1Alarm(context, status: boolean)
+  setWaterJet2Alarm(context, status: boolean)
 }
 
 export const machineStatusStore = {
   state: {
-    machineSerialNumber: "00000000000000",
-    machineName: "Poseidon",
+    runningProcess: [],
 
-    installationDate: null,
-    ncBrand: null,
-    ncModel: null,
-    firmwareVersion: null,
-    plcVersion: null,
+    powerOnAlarm: true,
+    airPressureAlarm: true,
+    protectionsAlarm: true,
+    emergencyAlarm: true,
+    settingsModeAlarm: true,
+    keyReadyAlarm: true,
 
-    cmsServerVersion: null,
-    cmsCoreVersion: null,
-    cmsClientVersion: null
+    resetAxesAlarm: true,
+    waterJet1Alarm: false,
+    waterJet2Alarm: false
 
   } as MachineStatusModel,
+  getters: {
+    mainStatus: state => {
+      return state.powerOnAlarm ||
+        state.airPressureAlarm ||
+        state.protectionsAlarm ||
+        state.emergencyAlarm ||
+        state.settingsModeAlarm ||
+        state.keyReadyAlarm;
+    },
+    powerOnAlarms: state =>{
+        return state.resetAxesAlarm ||
+               state.waterJet1Alarm ||
+               state.waterJet2Alarm;
+    }
+  },
   mutations: {
     UpdateMachineStatus(store, model: MachineStatusModel) {
       for (const key in model) {
-        store.state[key] = model[key]
+        store[key] = model[key]
       }
     }
   },
   actions: {
-    updateMachineStatus(context, model: MachineStatusModel) {
-      context.commit("UpdateMachineStatus", model);
-    }
+    setPowerAlarm(context, status: boolean) {
+      context.commit('UpdateMachineStatus', { powerOnAlarm: status });
+    },
+    setAirPressureAlarm(context, status: boolean) {
+      context.commit('UpdateMachineStatus', { airPressureAlarm: status });
+    },
+    setProtectionsAlarm(context, status: boolean) {
+      context.commit('UpdateMachineStatus', { protectionsAlarm: status });
+    },
+    setEmergencyAlarm(context, status: boolean) {
+      context.commit('UpdateMachineStatus', { emergencyAlarm: status });
+    },
+    setSettingsModeAlarm(context, status: boolean) {
+      context.commit('UpdateMachineStatus', { settingsModeAlarm: status });
+    },
+    setKeyReadyAlarm(context, status: boolean) {
+      context.commit('UpdateMachineStatus', { keyReadyAlarm: status });
+    },
+
+    setResetAxesAlarm(context, status: boolean) {
+      context.commit('UpdateMachineStatus', { resetAxesAlarm: status });
+    },
+    setWaterJet1Alarm(context, status: boolean) {
+      context.commit('UpdateMachineStatus', { waterJet1Alarm: status });
+    },
+    setWaterJet2Alarm(context, status: boolean) {
+      context.commit('UpdateMachineStatus', { waterJet2Alarm: status });
+    },
   } as MachineStatusActions
 }
 export const machineStatusActions = machineStatusStore.actions as MachineStatusActions;