alarm panel

Step/Controllers/WebApi/LoginController.cs

@@ -10,12 +10,7 @@ namespace Step.Controllers.WebApi
     public class LoginController : ApiController
     {
 
-        [Route(), HttpPost]
-        public IHttpActionResult DoLogin(UserModel model)
-        {
-            if (model.Username == "utente" && model.Password == "finto") return Ok();
-            return Unauthorized();
-        }
+
 
         [WebApiAuthorize(FunctionAccess = "test", Action = ACTIONS.WRITE)]
         [Route("test"), HttpGet]

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

@@ -0,0 +1,28 @@
+// out: false, sourceMap: false, main: ../style.less
+@import "colors.less";
+#alarm-list {
+    position: absolute;
+    left: 0;
+    width: 0;
+    height: 0;
+    top: 40px;
+    background-color: #fff;
+    transition: width 200ms ease-in-out, height 200ms ease-in-out;
+    z-index: 150;
+    box-shadow: @color-alarm-list-shadow;
+
+    &.expanded{
+      width: 494px;
+    }
+    &.opened {
+      height: calc(~"100vh - 120px");
+    }
+    &.alarm {
+        background-color: @color-faded-red;
+        color: @color-greyish-brown;
+    }
+    &.warning {
+        background-color: @color-sandy;
+        color: @color-greyish-brown;
+    }
+}

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

@@ -1,4 +1,4 @@
-// main: ../style.less
+// out: false, sourceMap: false, main: ../style.less
 @import "colors.less";
 
 @button-height: 48px;

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

@@ -15,10 +15,13 @@
 @color-clear-blue: #1791ff;
 @color-white: #fff;
 @color-input-light: #4b4b4b;
+@color-warm-grey: #9b9b9b;
 @color-label-grey: #979797;
 @color-input-background: #f8f8f8;
 @color-squash : #f5a623;
 @color-scarlet:#d0021b;
+@color-faded-red:#d84b5c;
+@color-sandy: #f3d39d;
 @color-duck-egg-blue: #e5f1f9;
 @color-greyish-brown: #4b4b4b;
 
@@ -32,6 +35,7 @@
 
 @color-alarm-background-image:  linear-gradient(to bottom, #ff4d63, #a10518);
 @color-alarm-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
+@color-alarm-list-shadow:  0 1px 2px 0 rgba(0, 0, 0, 0.5);
 
 @color-warning-background-image:  linear-gradient(to bottom, #f6a623, #dc8c09);
 @color-ribbon-opened: linear-gradient(to bottom, #ffffff, #eeeeee);

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

@@ -9,6 +9,8 @@
 @import "ribbons.less";
 @import "footer.less";
 @import "process-info.less";
+@import "alarms.less";
+
 @background-color: rgb(216, 216, 216);
 @handle-width: 48px;
 @handle-height: 32px;

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

@@ -55,8 +55,8 @@
                     font-weight: 800;
                 }
                 .processes {
-                  display: flex;
-                  flex-flow: row;
+                    display: flex;
+                    flex-flow: row;
                     span {
                         font-size: 14px;
                         padding: 0 5px;
@@ -159,6 +159,21 @@
         background-color: #fff;
         color: @color-scarlet;
     }
+    &.big.opened {
+      background-image: @color-ribbon-opened;
+      color: @color-scarlet;
+      .status-icon {
+          background-color: @color-scarlet;
+          color: #fff;
+      }
+      .processes {
+          span {
+              border: 1px solid @color-warm-grey !important;
+              color: @color-greyish-brown ;
+              font-weight: 600;
+          }
+      }
+  }
 }
 
 .app-ribbon.warning {
@@ -168,6 +183,21 @@
         background-color: #fff;
         color: @color-squash;
     }
+    &.opened {
+        background-image: @color-ribbon-opened;
+        color: @color-squash;
+        .status-icon {
+            background-color: @color-squash;
+            color: #fff;
+        }
+        .processes {
+            span {
+                border: 1px solid @color-warm-grey !important;
+                color: @color-greyish-brown ;
+                font-weight: 600;
+            }
+        }
+    }
 }
 
 .app-ribbon.open {

Step/wwwroot/assets/styles/style.css

@@ -560,6 +560,19 @@ button.square {
   background-color: #fff;
   color: #d0021b;
 }
+.app-ribbon.alarm.big.opened {
+  background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
+  color: #d0021b;
+}
+.app-ribbon.alarm.big.opened .status-icon {
+  background-color: #d0021b;
+  color: #fff;
+}
+.app-ribbon.alarm.big.opened .processes span {
+  border: 1px solid #9b9b9b !important;
+  color: #4b4b4b;
+  font-weight: 600;
+}
 .app-ribbon.warning {
   background-image: linear-gradient(to bottom, #f6a623, #dc8c09);
   color: #fff;
@@ -568,6 +581,19 @@ button.square {
   background-color: #fff;
   color: #f5a623;
 }
+.app-ribbon.warning.opened {
+  background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
+  color: #f5a623;
+}
+.app-ribbon.warning.opened .status-icon {
+  background-color: #f5a623;
+  color: #fff;
+}
+.app-ribbon.warning.opened .processes span {
+  border: 1px solid #9b9b9b !important;
+  color: #4b4b4b;
+  font-weight: 600;
+}
 .app-ribbon.open {
   background-image: linear-gradient(to bottom, #ffffff, #eeeeee) !important;
 }
@@ -724,6 +750,31 @@ footer .container button.big::before {
 .process-info .status.running {
   color: #7ed321;
 }
+#alarm-list {
+  position: absolute;
+  left: 0;
+  width: 0;
+  height: 0;
+  top: 40px;
+  background-color: #fff;
+  transition: width 200ms ease-in-out, height 200ms ease-in-out;
+  z-index: 150;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+}
+#alarm-list.expanded {
+  width: 494px;
+}
+#alarm-list.opened {
+  height: calc(100vh - 120px);
+}
+#alarm-list.alarm {
+  background-color: #d84b5c;
+  color: #4b4b4b;
+}
+#alarm-list.warning {
+  background-color: #f3d39d;
+  color: #4b4b4b;
+}
 .persona {
   height: 88px;
   width: 88px;

Step/wwwroot/src/App.vue

@@ -2,6 +2,7 @@
   <div class="container">
     <div id="app" :class="{'blur':applyBlur}">
       <app-header></app-header>
+      <alarm-list></alarm-list>
       <div id="back-view">
         <router-view name="backview"></router-view>
       </div>
@@ -32,6 +33,7 @@
 <script>
 import { Hub } from "./services/hub";
 import { Header, Footer, Login } from "./app.modules";
+import { alarmItem, alarmList } from "./modules/alarms";
 import { Factory, MessageService } from "./_base";
 import { ModalContainer, ModalHelper } from "./modules/base-components";
 import { appModelActions } from "src/store";
@@ -42,7 +44,8 @@ export default {
   components: {
     appHeader: Header,
     appFooter: Footer,
-    modalContainer: ModalContainer
+    modalContainer: ModalContainer,
+    alarmList
   },
   mounted: function() {
     Factory.Get(MessageService).subscribeToChannel("show-modal", args => {

Step/wwwroot/src/app.modules.js

@@ -21,7 +21,6 @@ export {
 export const Home = () =>
     import ("./components/Home.vue");
 
-
 // Test pages
 export const TestLoader = () =>
     import ("./components/test-loader.vue");

Step/wwwroot/src/modules/alarms/alarm-item.vue

@@ -0,0 +1,9 @@
+<template>
+
+</template>
+<script>
+export default {
+
+}
+</script>
+

Step/wwwroot/src/modules/alarms/alarms-list.ts

@@ -0,0 +1,32 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import { AppModel } from "src/store";
+
+@Component({ name: "alarms-list" })
+export default class alarmsList extends Vue {
+  $store: any;
+
+  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;
+  }
+
+  public get opened(): boolean {
+
+    return this.$store.state.alarms.opened;
+  }
+}
+
+enum ribbonStatusEnum {
+  Idle = 0,
+  Working = 1,
+  Warning = 2,
+  Alarm = 3
+}

Step/wwwroot/src/modules/alarms/alarms-list.vue

@@ -0,0 +1,6 @@
+<template>
+  <div id="alarm-list" :class="{expanded: ribbonStatus>1, alarm: ribbonStatus == 3, working: ribbonStatus == 1, warning: ribbonStatus == 2, opened: opened}">
+
+  </div>
+</template>
+<script src="./alarms-list.ts" lang="ts"></script>

Step/wwwroot/src/modules/alarms/index.js

@@ -0,0 +1,4 @@
+import alarmList from "./alarms-list.vue";
+import alarmItem from "./alarm-item.vue";
+
+export { alarmItem, alarmList }

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

@@ -1,13 +1,14 @@
 <template>
 <div class="ribbon-container">
-  <div class="app-ribbon" v-bind:class="[ {big: mainExpanded, expander:showExpander}, status]">
+  <div class="app-ribbon" v-bind:class="[ {big: mainExpanded, expander:showExpander, opened: opened}, status]">
     <span class="status-icon">
       <slot name="icon"></slot>
     </span>
     <div class="status-content" v-if="mainExpanded">
       <slot name="content"></slot>
     </div>
-    <i class="fa" :class="{ 'fa-caret-down': !open, 'fa-caret-up':open }" v-if="showExpander"></i>
+    <i class="fa" :class="{ 'fa-caret-down': !opened, 'fa-caret-up':opened }" v-if="showExpander"
+                  @click="toggleExpanded()"></i>
   </div>
   <div class="service-ribbon" v-if="hasService" v-bind:class="[ {big: this.serviceExpanded}]">
     <span class="service-icon">
@@ -17,31 +18,38 @@
       <slot name="service"></slot>
     </div>
     <i class="fa" :class="{ 'fa-caret-down': !serviceExpanded, 'fa-caret-up':serviceExpanded }"
-                  @click="toggleSerivceExpanded()"></i>
+                  @click="toggleServiceExpanded()"></i>
   </div>
 </div>
 </template>
 <script>
+import { alarmsModelActions } from "src/store";
+
 export default {
   props: {
     showExpander: { default: false },
-    open: { default: false },
     status: { default: null },
     expanded: { default: false },
     hasService: { default: false }
   },
-  watch:{
-    hasService:function()
-    {
-      this.serviceExpanded = this.expanded;
+  watch: {
+    hasService: function() {
+      alarmsModelActions.toggleServiceOpened(this.$store, this.expanded);
     }
   },
   methods: {
     // hasService() {
     //   return !this.$slots["service"];
     // },
-    toggleSerivceExpanded() {
+    toggleServiceExpanded() {
       this.serviceExpanded = !this.serviceExpanded;
+      alarmsModelActions.toggleServiceOpened(
+        this.$store,
+        !this.serviceExpanded
+      );
+    },
+    toggleExpanded() {
+      alarmsModelActions.toggleOpened(this.$store, !this.$store.state.alarms.opened);
     }
   },
   data: function() {
@@ -50,6 +58,10 @@ export default {
     };
   },
   computed: {
+    opened: function() {
+
+      return this.$store.state.alarms.opened;
+    },
     mainExpanded: function() {
       if (!this.hasService) return this.expanded;
 

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

@@ -1,13 +1,17 @@
 export interface AlarmsModel {
   alarms: Array<any>,
   warnings: Array<any>,
-  serviceAlarms: Array<any>
+  serviceAlarms: Array<any>,
+  opened: boolean,
+  serviceOpened: boolean
 }
 export interface AlarmsModelActionsInterface {
   removeAllAlarms(context);
   addAlarm(context, alarm);
   addWarning(context, alarm);
   addServiceAlarm(context, alarm);
+  toggleOpened(context, status);
+  toggleServiceOpened(store, status)
 }
 
 export const alarmsStore = {
@@ -15,7 +19,9 @@ export const alarmsStore = {
   state: {
     alarms: [],
     warnings: [],
-    serviceAlarms: []
+    serviceAlarms: [],
+    opened: false,
+    serviceOpened: false
   } as AlarmsModel,
 
   mutations: {
@@ -47,6 +53,12 @@ export const alarmsStore = {
       let idx = store.alarms.indexOf(alarm);
       if (idx >= 0)
         store.warnings.splice(idx, 1);
+    },
+    ToggleOpened(store, status){
+      store.opened = status;
+    },
+    ToggleServiceOpened(store, status){
+      store.serviceOpened = status;
     }
   },
 
@@ -62,6 +74,12 @@ export const alarmsStore = {
     },
     addServiceAlarm(context, alarm){
       context.commit("AddServiceAlarm", alarm);
+    },
+    toggleOpened(context, status){
+      context.commit("ToggleOpened", status);
+    },
+    toggleServiceOpened(context, status){
+      context.commit("ToggleServiceOpened", status);
     }
 
   } as AlarmsModelActionsInterface