modal load depot

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

@@ -15,6 +15,8 @@ sans-serif;
 @modal-header-height: 64px;
 @modal-login-height: 560px;
 @modal-login-width: 600px;
+@modal-load-depot-height: 462px;
+@modal-load-depot-width: 696px;
 @modal-info-equipment-box-height: 680px;
 @modal-info-equipment-box-width: 896px;
 @modal-user-info-height: 610px;
@@ -573,4 +575,49 @@ sans-serif;
             }
         }
     }
+}
+
+.@{modal}.load-depot{
+    width: 696px;
+    height: 462px;
+    border-radius: 2px;
+    background-color: @color-background-white;
+    top: calc(~'50%' - @modal-load-depot-height /2);
+    left: calc(~'50%' - @modal-load-depot-width /2);
+    header{
+        font-size: 20px;
+        color: @color-cyan-blue;
+        padding-left: 23px;
+    }
+    section{
+        height: calc(~'100%' - 230px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color: @color-cyan-blue;
+        .box{
+            .box-select{
+                margin-top: 15px;
+            }
+            .input-box{
+                height: 70px;
+                .title{
+                    margin: 0 15px;
+                    font-size: 16px;
+                }
+                select.arrow{
+                    height: 36px;
+                    font-size: 16px;
+                }
+            }
+        }
+        footer{
+            .pull-right{
+                .btn{
+                    padding: 0 10px;
+                }
+            }
+        }
+    }
 }

Step/wwwroot/assets/styles/style.css

@@ -539,6 +539,44 @@
 .modal.info-equipment-box .info-equipment-body .info-equipment-body-right table tbody tr td.columnright {
   width: 216px;
 }
+.modal.load-depot {
+  width: 696px;
+  height: 462px;
+  border-radius: 2px;
+  background-color: #fff;
+  top: calc(50% - 231px);
+  left: calc(50% - 348px);
+}
+.modal.load-depot header {
+  font-size: 20px;
+  color: #002e6e;
+  padding-left: 23px;
+}
+.modal.load-depot section {
+  height: calc(100% - 230px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #002e6e;
+}
+.modal.load-depot section .box .box-select {
+  margin-top: 15px;
+}
+.modal.load-depot section .box .input-box {
+  height: 70px;
+}
+.modal.load-depot section .box .input-box .title {
+  margin: 0 15px;
+  font-size: 16px;
+}
+.modal.load-depot section .box .input-box select.arrow {
+  height: 36px;
+  font-size: 16px;
+}
+.modal.load-depot section footer .pull-right .btn {
+  padding: 0 10px;
+}
 .row {
   display: flex;
   width: 100%;

Step/wwwroot/src/app.modules.js

@@ -71,6 +71,9 @@ export const MaintenanceWizard = () =>
 export const CreateMaintenance = () =>
     import ("./modules/create-maintenance.vue");
 
+export const LoadDepot = () =>
+    import ("./modules/base-components/modal-loaddepot.vue");
+
 
 // export const Utilities = () =>
 //     import ("./components/utilities.vue");

Step/wwwroot/src/app.routes.js

@@ -22,7 +22,8 @@ import {
 
     CardToolDepot,
     MaintenanceWizard,
-    CreateMaintenance
+    CreateMaintenance,
+    LoadDepot
 } from "./app.modules";
 
 export let routes = [
@@ -41,6 +42,7 @@ export let routes = [
     { path: "/utilities", component: Utilities, meta: { title: "Step - Utilities", area: "utilities" } },
     { path: "/card-utilities", component: CardUtilities, meta: { title: "Step - Card-Utilities", area: "card-utilities" } },
     { path: "/card-tool-depot", component: CardToolDepot, meta: { title: "Step - Card-Tool-Depot", area: "card-tool-depot" } },
+    { path: "/load-depot", component: LoadDepot, meta: { title: "Step - Load-Depot", area: "loaddepot" } },
 
     { path: "/card-assisted-tooling", component: CardAssistedTooling, meta: { title: "Step - Card-Assisted-Tooling", area: "card-assisted-tooling" } },
 
@@ -48,7 +50,7 @@ export let routes = [
     { path: "/maintenance-progress", component: MaintenanceProgress, meta: { title: "Step - Maintenance-Progress", area: "maintenance-progress" } },
     { path: "/maintenance-card", component: MaintenanceCard, meta: { title: "Step - Maintenance-Card", area: "maintenance-card" } },
     { path: "/card-maintenance-wizard", component: MaintenanceWizard, meta: { title: "Step - Maintenance-Wizard", area: "card-maintenance-wizard" } },
-        { path: "/create-maintenance", component: CreateMaintenance, meta: { title: "Step - Create-Maintenance", area: "create-maintenance" } },
+    { path: "/create-maintenance", component: CreateMaintenance, meta: { title: "Step - Create-Maintenance", area: "create-maintenance" } },
     { path: "/report", meta: { title: "Step - Reports", area: "report" } },
     { path: "/alarms", meta: { title: "Step - Alarms", area: "alarms" } },
     { path: "/maintenance", component: Maintenance, meta: { title: "Step - Maintenance", area: "maintenance" } },

Step/wwwroot/src/modules/base-components/modal-loaddepot.ts

@@ -0,0 +1,19 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import { Watch } from "vue-property-decorator";
+import { Modal, ModalHelper } from "../base-components";
+import { inputBox } from "src/modules/base-components/cards";
+import { store, AppModel } from "src/store";
+import { DepotService } from "../../services/depotService";
+
+@Component({ name: "loadDepot", components: { modal: Modal, inputBox } })
+export default class LoadDepot extends Vue {
+
+    public get availableTools(): server.Tools[] { return (this.$store.state as AppModel).depot.availableTool; }
+    public get availableMultiTools(): server.MultiTools[] { return (this.$store.state as AppModel).depot.availableMultiTool; }
+    public toolSelected: any = null;
+
+    async mounted(){
+        await new DepotService().GetToolAvailable();
+    }
+}

Step/wwwroot/src/modules/base-components/modal-loaddepot.vue

@@ -0,0 +1,23 @@
+<template>
+  <modal type="load-depot" :title="'load_depot_lbl_title' | localize('Carica utensile')">
+    <button class="close" slot="header-buttons"><i class="fa fa-remove"></i></button>
+        <div class="box">
+            <label>{{'load_depot_lbl_select' | localize("Seleziona l'utensile da aggiungere")}}</label>
+            <div class="box-select">
+                <input-box type="select" :title="'load_depot_select_title' | localize('Utensile')" v-model="toolSelected">
+                  <option v-for="s in availableMultiTools" :key="s.id" :value="s">{{s.name}} - {{s.id}}</option>
+                  <option v-for="s in availableTools" :key="s.id" :value="s">{{s.familyName}} - {{s.id}}</option>
+                </input-box>
+                <!-- <select>
+                </select> -->
+            </div>
+        </div>
+    <footer>
+      <div class="pull-right">
+        <button class="btn">{{'load_depot_btn_cancel' | localize("Annulla")}}</button>
+        <button class="btn btn-success">{{'load_depot_btn_confirm' | localize("Conferma")}}</button>
+      </div>
+    </footer>
+  </modal>
+</template>
+<script src="./modal-loaddepot.ts" lang="ts"></script>