From 9df4008d170b992cf44404307d7bbed2439745ea Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Fri, 23 Mar 2018 16:53:12 +0100
Subject: [PATCH] placeholder

---
 Step/wwwroot/assets/styles/base/head.less | 12 ++++++++++++
 Step/wwwroot/assets/styles/style.css      |  9 +++++++++
 Step/wwwroot/src/modules/mheads.vue       |  8 ++++----
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/head.less b/Step/wwwroot/assets/styles/base/head.less
index d30522b8..7c80ff16 100644
--- a/Step/wwwroot/assets/styles/base/head.less
+++ b/Step/wwwroot/assets/styles/base/head.less
@@ -1,4 +1,5 @@
 // out: false, sourceMap: false, main: ../style.less
+
 .head-spindle,
 .head-awj {
     &>*, & {
@@ -156,6 +157,17 @@
   }
 }
 
+.head-place-holder{
+  width: 240px;
+  height: 102px;
+  margin: 4px;
+  margin-bottom: 6px;
+  margin-top: 6px;
+  background-color: #4e585e;
+  border-radius: 2px;
+}
+
+
 .head-std {
     &>* {
         box-sizing: border-box;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 0fb9098d..bc096d50 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -2027,6 +2027,15 @@ footer .container button.big:before {
   border-color: #fff !important;
   color: #fff;
 }
+.head-place-holder {
+  width: 240px;
+  height: 102px;
+  margin: 4px;
+  margin-bottom: 6px;
+  margin-top: 6px;
+  background-color: #4e585e;
+  border-radius: 2px;
+}
 .head-std {
   width: 240px;
   height: 102px;
diff --git a/Step/wwwroot/src/modules/mheads.vue b/Step/wwwroot/src/modules/mheads.vue
index 349e079f..54eb0c95 100644
--- a/Step/wwwroot/src/modules/mheads.vue
+++ b/Step/wwwroot/src/modules/mheads.vue
@@ -15,7 +15,10 @@
             :pressure="getHeadsProperty(h.id).ActualPressure"
             @overridePlus="overridePlus()" @overrideMinus="overrideMinus()"
             ></head-std>
-   <div class="head-place-holder"></div>
+   <div class="head-place-holder" v-if="heads.length <4"></div>
+   <div class="head-place-holder" v-if="heads.length <3"></div>
+   <div class="head-place-holder" v-if="heads.length <2"></div>
+   <div class="head-place-holder" v-if="heads.length <1 || (heads.length>4 && heads.length%2)"></div>
   <!-- <head-std :percentage="40" :load="55" :tool=1 :rpm=160000 title="head2"  process="1"></head-std>
   <head-std :percentage="100" :load="65" :tool=2 title="head3"  process="1"></head-std>
   <head-std title="head4" :load="100" process="1"></head-std>
@@ -33,9 +36,6 @@ export default {
   computed: {
     heads: function() {
       return this.$store.state.machineInfo.heads;
-    },
-    placeholdersCount: function() {
-      return Math.max(4 - this.$store.state.machineInfo.heads, 0);
     }
   },
   methods: {