From 73115f802d0bbc81899a78bb0c360467e6dee9cf Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Mon, 21 Jan 2019 11:18:48 +0100
Subject: [PATCH] production scada

---
 Step/wwwroot/assets/styles/base/card.less     | 34 +++++++-----
 Step/wwwroot/assets/styles/style.css          | 18 ++----
 .../components/card-scada-production.ts       | 38 ++++++++++++-
 .../components/card-scada-production.vue      | 55 ++++++++++++++++++-
 Step/wwwroot/src/services/scadaService.ts     |  1 -
 5 files changed, 113 insertions(+), 33 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index a2383f46..9dd95d82 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -1722,21 +1722,27 @@
     box-shadow: 0 1px 2px 0 @color-black-40;
     background-color: @color-background-white;
     flex-flow: row;
-    .group-text-scada{
+    // .group-text-scada{
+    //     display: flex;
+    //     width: 153px;
+    //     height: 40px;
+    //     margin-left: 16px;
+    //     flex-flow: column;
+    //     .text{
+    //         font-size: 14px;
+    //         color: @color-darkish-blue;
+    //     }
+    //     .number{
+    //         font-size: 20px;
+    //         font-weight: 600;
+    //         color: @color-darkish-blue;
+    //     }
+    // }
+    .card-scada-prod-body{
+        width: 100%;
+        height: 100%;
         display: flex;
-        width: 153px;
-        height: 40px;
-        margin-left: 16px;
-        flex-flow: column;
-        .text{
-            font-size: 14px;
-            color: @color-darkish-blue;
-        }
-        .number{
-            font-size: 20px;
-            font-weight: 600;
-            color: @color-darkish-blue;
-        }
+        flex-flow: row;
     }
 }
 
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 860da3f5..910b1fd3 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -7862,21 +7862,11 @@ footer .container button.big:before {
   background-color: #fff;
   flex-flow: row;
 }
-.card-scada-production .group-text-scada {
+.card-scada-production .card-scada-prod-body {
+  width: 100%;
+  height: 100%;
   display: flex;
-  width: 153px;
-  height: 40px;
-  margin-left: 16px;
-  flex-flow: column;
-}
-.card-scada-production .group-text-scada .text {
-  font-size: 14px;
-  color: #002680;
-}
-.card-scada-production .group-text-scada .number {
-  font-size: 20px;
-  font-weight: 600;
-  color: #002680;
+  flex-flow: row;
 }
 .card-report {
   width: 288px;
diff --git a/Step/wwwroot/src/app_modules/production/components/card-scada-production.ts b/Step/wwwroot/src/app_modules/production/components/card-scada-production.ts
index 9cd539f7..4b56b941 100644
--- a/Step/wwwroot/src/app_modules/production/components/card-scada-production.ts
+++ b/Step/wwwroot/src/app_modules/production/components/card-scada-production.ts
@@ -1,5 +1,7 @@
 import Vue from "vue";
 import Component from "vue-class-component";
+import { store, AppModel } from "src/store";
+import { scadaService } from "src/services/scadaService";
 
 @Component({
   components: {
@@ -7,5 +9,39 @@ import Component from "vue-class-component";
   }
 })
 export default class CardScadaProduction extends Vue {
-    
+  get scadaId() {
+    let currentIdScada;
+    let scada = (this.$store.state as AppModel).scada.scadaItems.filter(s => s.isInProductionPage == true);
+    if(scada.length > 0){
+      currentIdScada = scada[0].id;
+    }
+    else{
+      currentIdScada = null;
+    }
+    return currentIdScada;
+  }
+
+  get items(): scada.baseControl[] {
+    return (this.$store.getters.getScadaItems(this.scadaId))
+  }
+
+  get buttons() {
+    return this.items.filter(i => i.type == "buttonControl");
+  }
+
+  get inputs() {
+    return this.items.filter(i => i.type == "inputControl");
+  }
+
+  get images() {
+    return this.items.filter(i => i.type == "imageControl");
+  }
+
+  get progressBars(){
+    return this.items.filter(i => i.type == "progressControl");
+  }
+
+  mounted() {
+    scadaService.ListScada();
+  }
 }
diff --git a/Step/wwwroot/src/app_modules/production/components/card-scada-production.vue b/Step/wwwroot/src/app_modules/production/components/card-scada-production.vue
index e400baca..6b44e218 100644
--- a/Step/wwwroot/src/app_modules/production/components/card-scada-production.vue
+++ b/Step/wwwroot/src/app_modules/production/components/card-scada-production.vue
@@ -1,7 +1,53 @@
 <template>
   <!-- <div class="test-container"> -->
       <div class="card-scada-production">
-        <div class="group-text-scada">
+        <div class="card-scada-prod-body">
+            <button
+            class="btn"
+            v-for="(item, idx) in buttons"
+            :key="'btn_' + idx"
+            :style="{ top: `${item.position.y}px`,
+                        left: `${item.position.x}px`,
+                        width: `${item.size.x}px`,
+                        height: `${item.size.y}px`,
+                        textAlign: item.label.textAlign,
+                        backgroundColor: item.label.backgroundColor,
+                        color: item.label.textColor,
+                        fontSize: `${item.label.textSize}px`
+                    }"
+            >{{item.label.textContent}}</button>
+
+            <input type="number" class="form-control"
+            v-for="(item, idx) in inputs"
+            :key="'inp_' + idx"
+            :style="{ top: `${item.position.y}px`,
+                        left: `${item.position.x}px`,
+                        width: `${item.size.x}px`,
+                        height: `${item.size.y}px`,
+                        textAlign: item.label.textAlign,
+                        backgroundColor: item.label.backgroundColor,
+                        color: item.label.textColor,
+                        fontSize: `${item.label.textSize}px`
+                    }">
+
+            <img
+            v-for="(item, idx) in images"
+            :key="'img_' + idx"
+            :style="{ top: `${item.position.y}px`,
+                        left: `${item.position.x}px`,
+                        width: `${item.size.x}px`,
+                        height: `${item.size.y}px`
+                    }">
+            <progress v-for="(item, idx) in progressBars"
+            :key="'pro_' + idx"
+            :style="{ top: `${item.position.y}px`,
+                        left: `${item.position.x}px`,
+                        width: `${item.size.x}px`,
+                        height: `${item.size.y}px`,
+                    }"
+            :value="item.memValueIndex" max="1000"></progress>
+        </div>
+        <!-- <div class="group-text-scada">
             <div class="text">
                 {{'card_scada_production_text_countdown_title' | localize("Count Down (min)")}}
             </div>
@@ -9,7 +55,10 @@
                 4399
             </div>
         </div>
-        <div class="image-big">
+        <div class="card-scada-prod-body">
+
+        </div> -->
+        <!-- <div class="image-big">
             <img :src="imgSource" alt="">
         </div>
         <div class="image-button-1">
@@ -17,7 +66,7 @@
         </div>
         <div class="image-button-2">
             <img :src="imgSource" alt="">
-        </div>
+        </div> -->
       </div>
   <!-- </div> -->
 </template>
diff --git a/Step/wwwroot/src/services/scadaService.ts b/Step/wwwroot/src/services/scadaService.ts
index 61d3d9cb..678c5297 100644
--- a/Step/wwwroot/src/services/scadaService.ts
+++ b/Step/wwwroot/src/services/scadaService.ts
@@ -5,7 +5,6 @@ import { store } from "../store";
 export class ScadaService extends baseRestService {
 
   async ListScada(): Promise<scada.ScadaInterface[]> {
-    debugger
     let result = await this.Get<scada.ScadaInterface[]>('/api/scada/list');
 
     scadaActions.setScada(store, result);