tooling

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

@@ -111,6 +111,13 @@
   line-height: 1.11;
   color:@color-greyish-brown;
   margin-bottom: 4px;
+  cursor: pointer;
+
+  &.selected{
+    background-color: rgba(23, 145, 255, 0.75);
+    color: #fff;
+  }
+
   .image{
       display: flex;
       align-items: center;

Step/wwwroot/assets/styles/base/tooling-equipment.less

@@ -68,6 +68,7 @@
                             height: 48px;
                             padding: 0;
                             box-sizing: border-box;
+                            font-size: 18px;
                         }
                         button{
                             width: 48px;

Step/wwwroot/assets/styles/style.css

@@ -2700,6 +2700,11 @@ footer .container button.big:before {
   line-height: 1.11;
   color: #4b4b4b;
   margin-bottom: 4px;
+  cursor: pointer;
+}
+.equipment.selected {
+  background-color: rgba(23, 145, 255, 0.75);
+  color: #fff;
 }
 .equipment .image {
   display: flex;
@@ -3360,6 +3365,7 @@ footer .container button.big:before {
   height: 48px;
   padding: 0;
   box-sizing: border-box;
+  font-size: 18px;
 }
 .tooling-equipment-container .tooling-equipment-box .body .list-left .search .group-btn button {
   width: 48px;

Step/wwwroot/src/components/tooling-equipment.ts

@@ -9,9 +9,14 @@ export default class toolingEquipment extends Vue {
 
   public get tools(): server.Tool[] { return (this.$store.state as AppModel).tooling.tools; }
 
+  public selectedTool: any = null;
+
   mounted() {
     new ToolingService().GetTools();
+  }
 
+  public selectTool(item){
+    this.selectedTool = item;
   }
 
 }

Step/wwwroot/src/components/tooling-equipment.vue

@@ -20,14 +20,16 @@
                     </div>
                   </div>
                   <div class="list-vertical scrollable">
-                      <equipment v-for="t in tools" :key="t.id" :code="t.id" :title="t.familyName"></equipment>
+                      <equipment v-for="t in tools" :key="t.id" :code="t.id" :title="t.familyName"
+                                 :class="{selected: selectedTool == t}"
+                                 @click="selectTool(t)"></equipment>
                   </div>
                   <div class="footer">
                       <div class="group-label-button">{{'tooling_equipment_label_add' | localize("Aggiungi utensile")}}<button class="btn"><i class="fa fa-plus"></i></button></div>
                   </div>
               </div>
               <!-- Siemens -->
-              <div class="box-right" v-if="false">
+              <div class="box-right" v-if="(isSiemens() || isDemo()) && selectedTool">
                   <button class="btn"><i class="fa fa-trash"></i></button>
                   <div class="box-right-label-header">Modifica di E13 utensile XYZ</div>
                   <div class="list-skill-equipment scrollable">

Step/wwwroot/src/modules/base-components/cards/equipment.vue

@@ -1,13 +1,13 @@
 <template>
   <!-- <div class="test-container"> -->
-      <div class="equipment">
-      <div class="image">
-        <img :src="imgSource" alt="">
-      </div>
-      <div class="text-body">
-        <div>{{code}}</div>
-        <div>{{title}}</div>
-      </div>
+      <div class="equipment" @click="onClick">
+        <div class="image">
+          <img :src="imgSource" alt="">
+        </div>
+        <div class="text-body">
+          <div>{{code}}</div>
+          <div>{{title}}</div>
+        </div>
       </div>
   <!-- </div> -->
 </template>
@@ -17,6 +17,11 @@ export default {
         code: {default: "E13"},
         title: {default: "Utensile XYZ"},
         imgSource: {default:"../assets/images/tool.PNG"}
+    },
+    methods:{
+      onClick(){
+        this.$emit("click");
+      }
     }
 }
 </script>