From 50392f136caef246ae83f24d00cbffeaf86ec984 Mon Sep 17 00:00:00 2001
From: Alessandro Francia <a.francia@teamdev.it>
Date: Fri, 29 Jun 2018 14:58:31 +0200
Subject: [PATCH] production

---
 Step/wwwroot/assets/styles/base/card.less     | 116 +++++++++++++++
 .../assets/styles/base/production.less        |  43 ++++--
 Step/wwwroot/assets/styles/style.css          | 139 +++++++++++++++++-
 Step/wwwroot/src/app.modules.js               |   8 +
 Step/wwwroot/src/app.routes.js                |   8 +-
 Step/wwwroot/src/components/production.vue    |  15 +-
 .../cards/card-job-production.vue             |  12 ++
 .../cards/card-production-cms.vue             |  20 +++
 .../cards/card-queue-production.vue           |  46 ++++++
 9 files changed, 385 insertions(+), 22 deletions(-)
 create mode 100644 Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
 create mode 100644 Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
 create mode 100644 Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index ad7e48ff..e380ef2c 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -659,4 +659,120 @@
             }
         }
       }
+  }
+
+  .card-production-cms{
+      width: 1008px;
+      height: 752px;
+      display: flex;
+      background-color: @color-label-grey;
+  }
+
+  .card-queue-production{
+      width: 513px;
+      height: 752px;
+      background-color: @color-background-white;
+      display: flex;
+      flex-flow: column;
+      .card-queue-production-header{
+          height: 63px;
+          width: 100%;
+          display: flex;
+          flex-flow: row;
+          border-bottom: solid 2px @color-label-grey;
+          .title{
+              width: 100%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              margin-left: 24px;
+              font-size: 20px;
+              color: @color-darkish-blue;
+              justify-content: flex-start;
+          }
+          .group-button{
+              width: 100%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: flex-end;
+              i{
+                font-size: 24px;
+              }
+          }
+      }
+      .card-queue-production-body{
+          height: 623px;
+          width: 100%;
+          display: flex;
+          flex-flow: column;
+          .queue-body{
+              height: calc(~'100% - 63px');
+              width: calc(~'100% - 16px');
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              justify-content: flex-start;
+              margin: 16px 0 0 8px;
+              .element-queue{
+                display: flex;
+                flex-flow: row;
+                align-items: center;
+                margin-bottom: 16px;
+                width: 400px;
+                label.number{
+                    display: flex;
+                    height: 100%;
+                    margin-right: 16px;
+                    font-size: 20px;
+                    color: @color-greyish-brown;
+                }
+              }
+
+          }
+          .queue-footer{
+              display: flex;
+              margin: 20px 0 0 8px;
+              border-top: solid 2px @color-whitethree;
+              height: 47px;
+              width: 97%;
+              label{
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                margin-left: 24px;
+                font-size: 20px;
+                color: @color-darkish-blue;
+                justify-content: flex-start;
+              }
+          }
+      }
+      .card-queue-production-footer{
+          height: 62px;
+          width: 100%;
+          display: flex;
+          border-top: solid 2px @color-label-grey;
+          .add-item{
+              display: flex;
+              width: 100%;
+              height: 100%;
+              flex-flow: row;
+              align-items: center;
+              justify-content: center;
+              label{
+                  font-size: 20px;
+                  color: @color-darkish-blue;
+              }
+              i{
+                  font-size: 24px;
+              }
+          }
+      }
+  }
+
+  .card-job-production{
+      width: 494px;
+      height: 752px;
+      background-color: @color-background-white;
   }
\ No newline at end of file
diff --git a/Step/wwwroot/assets/styles/base/production.less b/Step/wwwroot/assets/styles/base/production.less
index f6e7d963..db6a8e97 100644
--- a/Step/wwwroot/assets/styles/base/production.less
+++ b/Step/wwwroot/assets/styles/base/production.less
@@ -30,28 +30,47 @@
             .box-left{
                 height: 100%;
                 width: 1280px;
+                display: flex;
+                flex-flow: row;
                 background-color: @color-background-white;
-                .box-header{
-                    width: 1040px;
-                    height: 80px;
+                .box-left-video{
                     display: flex;
-                    flex-flow: row;
-                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    flex-flow: column;
                     align-items: center;
-                    float:left;
-                    button.btn{
-                        margin: 0;
+                    float: left;
+                    .box-header{
+                        width: 1040px;
+                        height: 80px;
+                        display: flex;
+                        flex-flow: row;
+                        justify-content: center;
+                        align-items: center;
+                        button.btn{
+                            margin: 0;
+                        }
+                        button.btn.pressed{
+                            background-image: linear-gradient(to bottom, @color-silver, @color-white2);
+                            border: none !important;
+                            box-shadow: inset @button-shadow !important;
+                        }
                     }
-                    button.btn.pressed{
-                        background-image: linear-gradient(to bottom, @color-silver, @color-white2);
-                        border: none !important;
-                        box-shadow: inset @button-shadow !important;
+                    .cnc{
+                        width: 1024px;
+                        height: 768px;
+                        box-shadow: inset 0 4px 7px 0 @color-black-40;
+                        background-color: green;
+                        display: flex;
+                        flex-flow: row;
                     }
                 }
                 .settings{
                     display: flex;
                     flex-flow: column;
                     float: right;
+                    width:232px;
+                    margin-right:8px;
                     .setting-top{
                         height: 488px;
                         width: 232px;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 86d46574..a7671041 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -3937,6 +3937,118 @@ footer .container button.big:before {
 .card-element-queue .card-element-queue-right button.btn i.fa.fa-trash {
   font-size: 24px;
 }
+.card-production-cms {
+  width: 1008px;
+  height: 752px;
+  display: flex;
+  background-color: #979797;
+}
+.card-queue-production {
+  width: 513px;
+  height: 752px;
+  background-color: #fff;
+  display: flex;
+  flex-flow: column;
+}
+.card-queue-production .card-queue-production-header {
+  height: 63px;
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  border-bottom: solid 2px #979797;
+}
+.card-queue-production .card-queue-production-header .title {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+  font-size: 20px;
+  color: #002680;
+  justify-content: flex-start;
+}
+.card-queue-production .card-queue-production-header .group-button {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.card-queue-production .card-queue-production-header .group-button i {
+  font-size: 24px;
+}
+.card-queue-production .card-queue-production-body {
+  height: 623px;
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+}
+.card-queue-production .card-queue-production-body .queue-body {
+  height: calc(100% - 63px);
+  width: calc(100% - 16px);
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 16px 0 0 8px;
+}
+.card-queue-production .card-queue-production-body .queue-body .element-queue {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  margin-bottom: 16px;
+  width: 400px;
+}
+.card-queue-production .card-queue-production-body .queue-body .element-queue label.number {
+  display: flex;
+  height: 100%;
+  margin-right: 16px;
+  font-size: 20px;
+  color: #4b4b4b;
+}
+.card-queue-production .card-queue-production-body .queue-footer {
+  display: flex;
+  margin: 20px 0 0 8px;
+  border-top: solid 2px #e7e7e7;
+  height: 47px;
+  width: 97%;
+}
+.card-queue-production .card-queue-production-body .queue-footer label {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+  font-size: 20px;
+  color: #002680;
+  justify-content: flex-start;
+}
+.card-queue-production .card-queue-production-footer {
+  height: 62px;
+  width: 100%;
+  display: flex;
+  border-top: solid 2px #979797;
+}
+.card-queue-production .card-queue-production-footer .add-item {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-flow: row;
+  align-items: center;
+  justify-content: center;
+}
+.card-queue-production .card-queue-production-footer .add-item label {
+  font-size: 20px;
+  color: #002680;
+}
+.card-queue-production .card-queue-production-footer .add-item i {
+  font-size: 24px;
+}
+.card-job-production {
+  width: 494px;
+  height: 752px;
+  background-color: #fff;
+}
 @keyframes selectedanimation {
   0% {
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -9428,29 +9540,48 @@ footer .container button.big:before {
 .production-container .production-box .production-left-box .box-left {
   height: 100%;
   width: 1280px;
+  display: flex;
+  flex-flow: row;
   background-color: #fff;
 }
-.production-container .production-box .production-left-box .box-left .box-header {
+.production-container .production-box .production-left-box .box-left .box-left-video {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-flow: column;
+  align-items: center;
+  float: left;
+}
+.production-container .production-box .production-left-box .box-left .box-left-video .box-header {
   width: 1040px;
   height: 80px;
   display: flex;
   flex-flow: row;
   justify-content: center;
   align-items: center;
-  float: left;
 }
-.production-container .production-box .production-left-box .box-left .box-header button.btn {
+.production-container .production-box .production-left-box .box-left .box-left-video .box-header button.btn {
   margin: 0;
 }
-.production-container .production-box .production-left-box .box-left .box-header button.btn.pressed {
+.production-container .production-box .production-left-box .box-left .box-left-video .box-header button.btn.pressed {
   background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
   border: none !important;
   box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
 }
+.production-container .production-box .production-left-box .box-left .box-left-video .cnc {
+  width: 1024px;
+  height: 768px;
+  box-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.4);
+  background-color: green;
+  display: flex;
+  flex-flow: row;
+}
 .production-container .production-box .production-left-box .box-left .settings {
   display: flex;
   flex-flow: column;
   float: right;
+  width: 232px;
+  margin-right: 8px;
 }
 .production-container .production-box .production-left-box .box-left .settings .setting-top {
   height: 488px;
diff --git a/Step/wwwroot/src/app.modules.js b/Step/wwwroot/src/app.modules.js
index acc1b9fb..44c129f6 100644
--- a/Step/wwwroot/src/app.modules.js
+++ b/Step/wwwroot/src/app.modules.js
@@ -117,11 +117,19 @@ export const HeadProduction = () =>
 export const CardAxesProduction = () =>
     import ("./modules/base-components/cards/card-axes-production.vue");
 
+export const CardProductionCms = () =>
+    import ("./modules/base-components/cards/card-production-cms.vue");
+
 export const CardFolderPath = () =>
     import ("./modules/base-components/cards/card-folder-path.vue");
 
 export const CardElementQueue = () =>
     import ("./modules/base-components/cards/card-element-queue.vue");
+export const CardQueueProduction = () =>
+    import ("./modules/base-components/cards/card-queue-production.vue");
+
+export const CardJobProduction = () =>
+    import ("./modules/base-components/cards/card-job-production.vue");
 
 // Test pages
 export const TestLoader = () =>
diff --git a/Step/wwwroot/src/app.routes.js b/Step/wwwroot/src/app.routes.js
index 631c5bf0..c3df26db 100644
--- a/Step/wwwroot/src/app.routes.js
+++ b/Step/wwwroot/src/app.routes.js
@@ -36,7 +36,10 @@ import {
     CardAxesProduction,
     CardFolderPath,
     ModalIframe,
-    CardElementQueue
+    CardElementQueue,
+    CardProductionCms,
+    CardQueueProduction,
+    CardJobProduction
 } from "./app.modules";
 
 export let routes = [
@@ -63,6 +66,9 @@ export let routes = [
     { path: "/head-spindle", component: HeadSpindle, meta: { title: "Step - Head-Spindle", area: "head-spindle" } },
     { path: "/head-production", component: HeadProduction, meta: { title: "Step - Head-Production", area: "head-production" } },
     { path: "/card-axes-production", component: CardAxesProduction, meta: { title: "Step - Card-Axes-Production", area: "card-axes-production" } },
+    { path: "/card-production-cms", component: CardProductionCms, meta: { title: "Step - Card-Production-Cms", area: "card-production-cms" } },
+    { path: "/card-queue-production", component: CardQueueProduction, meta: { title: "Step - Card-Queue-Production", area: "card-queue-production" } },
+    { path: "/card-job-production", component: CardJobProduction, meta: { title: "Step - Card-Job-Production", area: "card-job-production" } },
 
     { path: "/card-folder-path", component: CardFolderPath, meta: { title: "Step - Card-Folder-Path", area: "card-folder-path" } },
     { path: "/card-element-queue", component: CardElementQueue, meta: { title: "Step - Card-Element-Queue", area: "card-element-queue" } },
diff --git a/Step/wwwroot/src/components/production.vue b/Step/wwwroot/src/components/production.vue
index 8bd936a5..7a36b547 100644
--- a/Step/wwwroot/src/components/production.vue
+++ b/Step/wwwroot/src/components/production.vue
@@ -6,12 +6,17 @@
                     <process-selection-maintenance></process-selection-maintenance>
                 </div>
                 <div class="box-left">
-                    <div class="box-header">
-                        <button class="btn" :class="{'pressed': activeCms}" @click="clickCms()">CMS</button>
-                        <button class="btn" :class="{'pressed': activeCnc}" @click="clickCnc()">CNC</button>
-                    </div>
-                    <div class="video">
+                    <div class="box-left-video">
+                        <div class="box-header">
+                            <button class="btn" :class="{'pressed': activeCms}" @click="clickCms()">CMS</button>
+                            <button class="btn" :class="{'pressed': activeCnc}" @click="clickCnc()">CNC</button>
+                        </div>
+                        <div class="cnc" v-if="activeCnc">
 
+                        </div>
+                        <div class="cms" v-if="activeCms">
+
+                        </div>
                     </div>
                     <div class="settings">
                         <div class="setting-top">
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue b/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
new file mode 100644
index 00000000..5f7add46
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
@@ -0,0 +1,12 @@
+<template>
+<div class="test-container">
+    <div class="card-job-production">
+
+    </div>
+</div>
+</template>
+<script>
+export default {
+
+}
+</script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue b/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
new file mode 100644
index 00000000..469eb6e7
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
@@ -0,0 +1,20 @@
+<template>
+<div class="test-container">
+    <div class="card-production-cms">
+        <div class="">
+            <card-queue-production></card-queue-production>
+        </div>
+        <div class="">
+
+        </div>
+    </div>
+</div>
+</template>
+<script>
+import cardQueueProduction from "./card-queue-production.vue";
+export default {
+    components:{
+        cardQueueProduction
+    }
+}
+</script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue b/Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue
new file mode 100644
index 00000000..9afad2d9
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue
@@ -0,0 +1,46 @@
+<template>
+<div class="test-container">
+    <div class="card-queue-production">
+        <div class="card-queue-production-header">
+            <div class="title">
+                <label>Coda</label>
+            </div>
+            <div class="group-button">
+                <button class="btn"><i class="fa fa-floppy-o"></i></button>
+                <button class="btn"></button>
+                <button class="btn"></button>
+            </div>
+        </div>
+        <div class="card-queue-production-body">
+            <div class="queue-body scrollable">
+                <div class="element-queue">
+                    <label class="number">1</label><card-element-queue></card-element-queue>
+                </div>
+                <div class="element-queue">
+                    <label class="number">2</label><card-element-queue></card-element-queue>
+                </div>
+                <div class="element-queue">
+                    <label class="number">3</label><card-element-queue></card-element-queue>
+                </div>
+            </div>
+            <div class="queue-footer">
+                <label>6 elementi in coda</label>
+            </div>
+        </div>
+        <div class="card-queue-production-footer">
+            <div class="add-item">
+                <label>Aggiungi elemento</label>
+                <button class="btn"><i class="fa fa-plus"></i></button>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+<script>
+import cardElementQueue from "./card-element-queue.vue";
+export default {
+    components:{
+        cardElementQueue
+    }
+}
+</script>
\ No newline at end of file