create maintenance

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

@@ -18,6 +18,8 @@ sans-serif;
 @modal-user-info-height: 610px;
 @modal-login-top: @modal-login-height /2;
 @modal-login-left: @modal-login-width /2;
+@modal-create-maintenance-width: 896px;
+@modal-create-maintenance-height: 696px;
 @modal-machine-height: 700px;
 @modal-machine-width: 600px;
 @modal-machine-top: @modal-machine-height /2;
@@ -249,4 +251,30 @@ sans-serif;
         // height: 20px;
         border-top: 2px solid @color-silver;
     }
+}
+
+.@{modal}.create-maintenance{
+    width: @modal-create-maintenance-width;
+    height: @modal-create-maintenance-height;
+    top: calc(~'50%' - @modal-create-maintenance-height /2);
+    left: calc(~'50%' - @modal-create-maintenance-width /2);
+    header{
+        button.close {
+            position: absolute;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            border: none;
+            background-color: @color-darkish-blue;
+            color: #fff;
+            top: calc(50% - 20px);
+            right: 14px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        button.close:active {
+            background-color: @color-clear-blue ;
+            color: #fff;
+        }
+    }
 }

Step/wwwroot/assets/styles/style.css

@@ -221,6 +221,29 @@
 .modal.modal-confirm-delete .modal-confirm-delete-footer {
   border-top: 2px solid #bbbcbc;
 }
+.modal.create-maintenance {
+  width: 896px;
+  height: 696px;
+  top: calc(50% - 348px);
+  left: calc(50% - 448px);
+}
+.modal.create-maintenance header button.close {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background-color: #002680;
+  color: #fff;
+  top: calc(30%);
+  right: 14px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.modal.create-maintenance header button.close:active {
+  background-color: #1791ff;
+  color: #fff;
+}
 .row {
   display: flex;
   width: 100%;

Step/wwwroot/src/app.modules.js

@@ -71,6 +71,9 @@ export const MaintenanceWizard = () =>
 export const ModalConfirmDelete = () =>
     import ("./modules/modal-confirm-delete.vue");
 
+export const CreateMaintenance = () =>
+    import ("./modules/create-maintenance.vue");
+
 
 
 

Step/wwwroot/src/app.routes.js

@@ -22,7 +22,8 @@ import {
 
     CardToolDepot,
     MaintenanceWizard,
-    ModalConfirmDelete
+    ModalConfirmDelete,
+    CreateMaintenance
 
 } from "./app.modules";
 
@@ -50,6 +51,7 @@ export let routes = [
     { 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: "/modal-confirm-delete", component: ModalConfirmDelete, meta: { title: "Step - Modal-Confirm-Delete", area: "modal-confirm-delete" } },
+    { 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" } },

Step/wwwroot/src/modules/create-maintenance.vue

@@ -0,0 +1,51 @@
+<template>
+  <modal type="create-maintenance" :title="'create_maintenance_lbl_title' | localize('Creazione intervento di manutenzione')">
+    <button class="close" slot="header-buttons"><i class="fa fa-remove"></i></button>
+    <div>
+      <div class="typology">
+          <label class="typology_lbl">{{'create_maintenance_lbl_typology' | localize("Tipologia")}}</label>
+            <label>Evento Macchina<input type="radio"></label>
+            <label>Temporale<input type="radio"></label>
+      </div>
+        <div class="title">
+            <label class="title_lbl">{{'create_maintenance_lbl_title' | localize("Titolo")}}</label>
+            <input type="text">
+        </div>
+        <div class="description">
+            <label class="description_lbl">{{'create_maintenance_lbl_description' | localize("Descrizione")}}</label>
+            <textarea></textarea>
+        </div>
+        <div class="time">
+            <div class="date">
+                <label class="date_lbl">{{'create_maintenance_lbl_date' | localize("Data")}}</label>
+                <input type="date">
+            </div>
+            <div class="start_time">
+                <label class="start_time_lbl">{{'create_maintenance_lbl_start_time' | localize("Ora inizio")}}</label>
+                <input type="time">
+            </div>
+            <div class="end_time">
+                <label class="end_time_lbl">{{'create_maintenance_lbl_end_time' | localize("Ora fine")}}</label>
+                <input type="time">
+            </div>
+        </div>
+        <div class="repeat">
+            <label class="repeat_lbl">{{'create_maintenance_lbl_repeat' | localize("Ripeti ogni")}}</label>
+            <input type="text">
+            <select><option>giorni</option></select>
+        </div>
+    </div>
+    <footer>
+      <div class="pull-right">
+        <button class="btn">{{'create_maintenance_btn_cancel' | localize("Annulla")}}</button>
+        <button class="btn btn-success">{{'create_maintenance_btn_confirm' | localize("Conferma")}}</button>
+      </div>
+    </footer>
+  </modal>
+</template>
+<script>
+import { Modal, ModalHelper } from "./base-components";
+export default {
+  components:{modal: Modal}
+}
+</script>