From bfe35516a2b2d470bcc69f5018febd1a72050c12 Mon Sep 17 00:00:00 2001
From: Alessandro Francia <a.francia@teamdev.it>
Date: Fri, 29 Jun 2018 16:34:24 +0200
Subject: [PATCH] production

---
 Step/wwwroot/assets/styles/base/card.less     | 107 ++++++++++++++++-
 .../assets/styles/base/production.less        |   7 ++
 Step/wwwroot/assets/styles/style.css          | 113 +++++++++++++++++-
 Step/wwwroot/src/components/production.vue    |   5 +-
 .../cards/card-job-production.vue             |  52 +++++++-
 .../cards/card-production-cms.vue             |   9 +-
 .../cards/card-queue-production.vue           |   4 +-
 7 files changed, 283 insertions(+), 14 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index e380ef2c..ce0ed3b2 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -666,10 +666,23 @@
       height: 752px;
       display: flex;
       background-color: @color-label-grey;
+      flex-flow: row;
+      .card-production-cms-queue{
+          width: 100%;
+          height: 100%;
+        display: flex;
+        justify-content: flex-start;
+      }
+      .card-production-cms-job{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: flex-end;
+      }
   }
 
   .card-queue-production{
-      width: 513px;
+      width: 512px;
       height: 752px;
       background-color: @color-background-white;
       display: flex;
@@ -775,4 +788,96 @@
       width: 494px;
       height: 752px;
       background-color: @color-background-white;
+      .card-job-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;
+        }
+        .box-right{
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            margin-right: 8px;
+            .rectangle{
+                width: 152px;
+                height: 48px;
+                border-radius: 2px;
+                background-color: @color-whitethree;
+                label{
+                    width: 100%;
+                    height: 100%;
+                    justify-content: center;
+                    display: flex;
+                    align-items: center;
+                    font-size: 20px;
+                    color: @color-darkish-blue;
+                }
+            }
+        }
+    }
+    .card-job-production-body{
+        width: 100%;
+        height: calc(~'100% - 63px');
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        justify-content: center;
+        .card-job-production-body-top{
+            width: 366px;
+            height: 279px;
+        }
+        .card-job-production-body-bottom{
+            width: 464px;
+            height: 352px;
+            border-radius: 2px;
+            box-shadow: 0 1px 2px 0 @color-black-40;
+            display: flex;
+            .tabs{
+              height: 64px;
+              width:100%;
+              background-color: @color-whitethree;
+              display: flex;
+              flex-direction: row;
+              button{
+                  visibility: hidden;
+                  border: none;
+              }
+              .tab{
+                  color: @color-darkish-blue;
+                  font-size: 20px;
+                  visibility: visible;
+                  width: 232px;
+                  border-right: solid 1px @color-label-grey;
+                  &.active{
+                        color: @color-clear-blue;
+                      background-color: @color-white;
+                      border-top: solid 2px @color-clear-blue !important;
+                  }
+              }
+              .tab:last-child{
+                  border: none;
+              }
+              .content-box{
+                  height: calc(~'100% - 30px');
+                  background-color: red;
+                  width: 100%;
+                  display: flex;
+              }
+            }
+        }
+    }
+
   }
\ 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 db6a8e97..7315b7ff 100644
--- a/Step/wwwroot/assets/styles/base/production.less
+++ b/Step/wwwroot/assets/styles/base/production.less
@@ -64,6 +64,13 @@
                         display: flex;
                         flex-flow: row;
                     }
+                    .cms{
+                        width: 1024px;
+                        height: 768px;
+                        display: flex;
+                        flex-flow: row;
+                        background-color: @color-label-grey;
+                    }
                 }
                 .settings{
                     display: flex;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index d8471d60..938d93d2 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -3942,9 +3942,22 @@ footer .container button.big:before {
   height: 752px;
   display: flex;
   background-color: #979797;
+  flex-flow: row;
+}
+.card-production-cms .card-production-cms-queue {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+.card-production-cms .card-production-cms-job {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
 }
 .card-queue-production {
-  width: 513px;
+  width: 512px;
   height: 752px;
   background-color: #fff;
   display: flex;
@@ -4049,6 +4062,97 @@ footer .container button.big:before {
   height: 752px;
   background-color: #fff;
 }
+.card-job-production .card-job-production-header {
+  height: 63px;
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  border-bottom: solid 2px #979797;
+}
+.card-job-production .card-job-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-job-production .card-job-production-header .box-right {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 8px;
+}
+.card-job-production .card-job-production-header .box-right .rectangle {
+  width: 152px;
+  height: 48px;
+  border-radius: 2px;
+  background-color: #e7e7e7;
+}
+.card-job-production .card-job-production-header .box-right .rectangle label {
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  color: #002680;
+}
+.card-job-production .card-job-production-body {
+  width: 100%;
+  height: calc(100% - 63px);
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+}
+.card-job-production .card-job-production-body .card-job-production-body-top {
+  width: 366px;
+  height: 279px;
+}
+.card-job-production .card-job-production-body .card-job-production-body-bottom {
+  width: 464px;
+  height: 352px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+}
+.card-job-production .card-job-production-body .card-job-production-body-bottom .tabs {
+  height: 64px;
+  width: 100%;
+  background-color: #e7e7e7;
+  display: flex;
+  flex-direction: row;
+}
+.card-job-production .card-job-production-body .card-job-production-body-bottom .tabs button {
+  visibility: hidden;
+  border: none;
+}
+.card-job-production .card-job-production-body .card-job-production-body-bottom .tabs .tab {
+  color: #002680;
+  font-size: 20px;
+  visibility: visible;
+  width: 232px;
+  border-right: solid 1px #979797;
+}
+.card-job-production .card-job-production-body .card-job-production-body-bottom .tabs .tab.active {
+  color: #1791ff;
+  background-color: #fff;
+  border-top: solid 2px #1791ff !important;
+}
+.card-job-production .card-job-production-body .card-job-production-body-bottom .tabs .tab:last-child {
+  border: none;
+}
+.card-job-production .card-job-production-body .card-job-production-body-bottom .tabs .content-box {
+  height: calc(100% - 30px);
+  background-color: red;
+  width: 100%;
+  display: flex;
+}
 @keyframes selectedanimation {
   0% {
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -9591,6 +9695,13 @@ footer .container button.big:before {
   display: flex;
   flex-flow: row;
 }
+.production-container .production-box .production-left-box .box-left .box-left-video .cms {
+  width: 1024px;
+  height: 768px;
+  display: flex;
+  flex-flow: row;
+  background-color: #979797;
+}
 .production-container .production-box .production-left-box .box-left .settings {
   display: flex;
   flex-flow: column;
diff --git a/Step/wwwroot/src/components/production.vue b/Step/wwwroot/src/components/production.vue
index 7a36b547..f82a6342 100644
--- a/Step/wwwroot/src/components/production.vue
+++ b/Step/wwwroot/src/components/production.vue
@@ -15,7 +15,7 @@
 
                         </div>
                         <div class="cms" v-if="activeCms">
-
+                            <card-production-cms></card-production-cms>
                         </div>
                     </div>
                     <div class="settings">
@@ -57,9 +57,10 @@ import softkeysPrefered from "../modules/base-components/cards/softkeys-prefered
 import headProduction from "../modules/heads/head-production.vue"
 import cardAxesProduction from "../modules/base-components/cards/card-axes-production.vue"
 import processSelectionMaintenance from "../modules/base-components/cards/process-selection-maintenance.vue";
+import cardProductionCms from "../modules/base-components/cards/card-production-cms.vue";
 export default {
     components:{
-        softkeysPrefered, headProduction, cardAxesProduction, processSelectionMaintenance
+        softkeysPrefered, headProduction, cardAxesProduction, processSelectionMaintenance, cardProductionCms
     },
     data: function(){
         return {
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
index 5f7add46..0503671d 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
@@ -1,12 +1,56 @@
 <template>
-<div class="test-container">
-    <div class="card-job-production">
+<!-- <div class="test-container"> -->
+    <div class="card-job-production">        
+        <div class="card-job-production-header">
+            <div class="title">
+                <label>Job</label>
+            </div>
+            <div class="box-right">
+                <div class="rectangle">
+                    <label>- 00 : 00 : 00</label>
+                </div>
+            </div>
+        </div>
+        <div class="card-job-production-body">
+            <div class="card-job-production-body-top">
 
+            </div>
+            <div class="card-job-production-body-bottom">
+                <div class="tabs">
+                    <button class="tab" :class="{'active': enableIsoLines}" @click="selectTab('IsoLines')">Linee ISO</button>
+                    <button class="tab" :class="{'active': enableFileSections}" @click="selectTab('FileSections')">Sezioni File</button>
+                </div>
+                <div class="content-box" v-if="enableIsoLines">
+
+                </div>
+            </div>
+        </div>
     </div>
-</div>
+<!-- </div> -->
 </template>
 <script>
 export default {
-
+        data: function(){
+        return{
+            enableIsoLines: true,
+            enableFileSections: false
+        }
+    },
+    methods:{
+        selectTab(tab){
+            if(tab == "IsoLines"){
+                this.enableIsoLines = true;
+                this.enableFileSections = false;
+            }
+            else if(tab == "FileSections"){
+                this.enableIsoLines = false;
+                this.enableFileSections = true;
+            }
+            else{
+                this.enableIsoLines = true;
+                this.enableFileSections = false;
+            }
+        }
+    }
 }
 </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
index 469eb6e7..d1d0007b 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
@@ -1,20 +1,21 @@
 <template>
 <div class="test-container">
     <div class="card-production-cms">
-        <div class="">
+        <div class="card-production-cms-queue">
             <card-queue-production></card-queue-production>
         </div>
-        <div class="">
-
+        <div class="card-production-cms-job">
+            <card-job-production></card-job-production>
         </div>
     </div>
 </div>
 </template>
 <script>
 import cardQueueProduction from "./card-queue-production.vue";
+import cardJobProduction from "./card-job-production.vue";
 export default {
     components:{
-        cardQueueProduction
+        cardQueueProduction, cardJobProduction
     }
 }
 </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
index 9afad2d9..0d5437b2 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="test-container">
+<!-- <div class="test-container"> -->
     <div class="card-queue-production">
         <div class="card-queue-production-header">
             <div class="title">
@@ -34,7 +34,7 @@
             </div>
         </div>
     </div>
-</div>
+<!-- </div> -->
 </template>
 <script>
 import cardElementQueue from "./card-element-queue.vue";