Edition, correction de la grille

src/dash/package.json

@@ -18,6 +18,7 @@
     "vuex": "^3.1.3"
   },
   "devDependencies": {
+    "@mdi/font": "^5.1.45",
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
     "@vue/cli-service": "~4.3.0",

src/dash/src/components/Dash.vue

@@ -10,7 +10,7 @@ Composant global du Dash
     <Tools v-if="initialized" />
     <AddDashWizard v-on:endOfWizard="endOfWizard" v-bind:showWizard="showWizard" />
     <SelectItemToAddWizard />
-    <AddItemWizard />
+    <ItemWizard />
   </div>
 </template>
 
@@ -22,7 +22,7 @@ import Communication from "@/libs/Communication";
 import DashPreferences from "@/components/DashPreferences";
 import Tools from "@/components/Tools";
 import SelectItemToAddWizard from "@/components/Wizards/SelectItemToAddWizard";
-import AddItemWizard from "@/components/Wizards/AddItemWizard";
+import ItemWizard from "@/components/Wizards/ItemWizard";
 import AddDashWizard from "@/components/Wizards/AddDashWizard";
 import EventsManager from "@/libs/EventsManager.js";
 
@@ -35,7 +35,7 @@ export default {
     DashPreferences,
     Tools,
     SelectItemToAddWizard,
-    AddItemWizard,
+    ItemWizard,
     AddDashWizard
   },
   props: {

src/dash/src/components/GridContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind:style="gridStyle" class="grid-container" v-bind:class="previewClass">
+  <div class="grid-container" v-bind:class="gridClass">
     <span class="grid-group-btns" v-if="$store.getters.editMode && gridData.children.length === 0">
       <v-hover v-model="divideHorizontallyPreview">
         <v-btn class="fab-vertical" fab color="success" v-on:click="divide('horizontal')">&#9707;</v-btn>
@@ -22,7 +22,7 @@
       </v-hover>
     </span>
     <template v-else-if="gridData.children.length === 1">
-      <Widget v-bind:widgetData="gridData.children[0].widgetData" />
+      <Widget v-bind:widgetData="$store.getters.widgets[gridData.children[0].widgetId]" v-on:remove="widgetRemoved" />
     </template>
     <template v-else-if="gridData.children.length === 2">
       <GridContainer
@@ -65,7 +65,7 @@ export default {
           children: [],
           orientation: "",
           type: "widget",
-          widgetData: this.$store.getters.widgets[widgetId]
+          widgetId: widgetId
         });
       }
     });
@@ -84,35 +84,26 @@ export default {
         this.$emit("input", newValue);
       }
     },
-    previewClass() {
+    gridClass() {
+      let result = [];
       if (this.divideHorizontallyPreview) {
-        return "horizontal-divide-preview";
+        result.push("horizontal-divide-preview");
       }
       if (this.divideVerticallyPreview) {
-        return "vertical-divide-preview";
+        result.push("vertical-divide-preview");
       }
       if (this.deletePreviewState) {
-        return "delete-preview";
+        result.push("delete-preview");
       }
-      return "";
-    },
-    gridStyle() {
-      let result = {};
-      switch (this.gridData.children.length) {
-        default:
-        case 0:
-          break;
-        case 1:
-          break;
-        case 2:
-          if (this.gridData.orientation === "horizontal") {
-            result = { flexDirection: "row" };
-          } else {
-            result = { flexDirection: "column" };
-          }
+      if (this.gridData.children.length === 2) {
+        if (this.gridData.orientation === "horizontal") {
+          result.push("horizontal-grid");
+        } else {
+          result.push("vertical-grid");
+        }
       }
       if (this.$store.getters.editMode) {
-        result["boxShadow"] = "0 0 5px #b0f7b0";
+        result.push("edit-container");
       }
       return result;
     }
@@ -145,6 +136,9 @@ export default {
     },
     setDeletePreviewState(state) {
       this.deletePreviewState = state;
+    },
+    widgetRemoved() {
+      this.gridData.children = [];
     }
   }
 };
@@ -166,6 +160,26 @@ export default {
   display: none;
 }
 
+.horizontal-grid {
+  flex-direction: row;
+}
+
+.horizontal-grid > div {
+  width: 50%;
+}
+
+.vertical-grid {
+  flex-direction: column;
+}
+
+.vertical-grid > div {
+  height: 50%;
+}
+
+.edit-container {
+  box-shadow: 0 0 5px #b0f7b0;
+}
+
 .grid-container:hover > .grid-group-btns,
 .grid-group-btns:hover {
   position: absolute;
@@ -174,13 +188,6 @@ export default {
   z-index: 9999;
 }
 
-.horizontal-grid {
-  flex-direction: row;
-}
-.vertical-grid {
-  flex-direction: column;
-}
-
 .vertical-divide-preview {
   background: linear-gradient(
     180deg,

src/dash/src/components/Widgets/Widget.vue

@@ -7,9 +7,14 @@
     v-on:dragend="dragEndEvent"
   >
     <component class="widget-content" v-bind:is="widgetData.type" v-bind:widgetData="widgetData" />
-    <v-btn v-if="$store.getters.editMode" right absolute color="red theme--dark" small v-on:click="remove">
-      <v-icon>mdi-delete</v-icon>
-    </v-btn>
+    <div v-if="$store.getters.editMode" class="widget-tools">
+      <v-btn right color="grey theme--dark" small v-on:click="edit">
+        <v-icon>mdi-pencil</v-icon>
+      </v-btn>
+      <v-btn right color="red theme--dark" small v-on:click="remove">
+        <v-icon>mdi-delete</v-icon>
+      </v-btn>
+    </div>
   </v-card>
 </template>
 
@@ -81,8 +86,12 @@ export default {
     dragEndEvent() {
       this.dragStarted = false;
     },
+    edit() {
+      this.$eventBus.$emit("WizardEditItem", this.widgetData.id);
+    },
     remove() {
       this.$store.commit("removeWidget", this.widgetData.id);
+      this.$emit("remove");
     }
   }
 };
@@ -97,4 +106,13 @@ export default {
 .v-card.hide-border {
   box-shadow: none !important;
 }
+</style>
+
+<style>
+.widget-tools {
+  width: 100%;
+  text-align: right;
+  position: relative;
+  z-index: 1;
+}
 </style>

src/dash/src/components/Wizards/BaseWizard.vue

@@ -8,6 +8,9 @@ export default {
     stateUpdater: null
   }),
   methods: {
+    resetData() {
+      this.previewData = JSON.parse(JSON.stringify(this.baseData));
+    },
     startStateUpdater() {
       this.stateUpdater = setInterval(() => {
         this.previewData.state = !this.previewData.state;
@@ -21,7 +24,9 @@ export default {
     endOfWizard() {
       this.stopStateUpdater();
       this.$store.commit("setEditMode", true);
-      this.previewData.id = this.genFakeGuid();
+      if (this.previewData.id === -1) {
+        this.previewData.id = this.genFakeGuid();
+      }
       // Clone de l'objet
       this.$store.commit(
         "addWidget",

src/dash/src/components/Wizards/Helpers/FilteredCommands.vue

@@ -39,6 +39,10 @@ export default {
       type: String,
       default: "Commande"
     },
+    default: {
+      type: Number,
+      default: -1
+    },
     type: String,
     subType: String,
     eqLogicId: Number,
@@ -63,7 +67,6 @@ export default {
   },
   watch: {
     type: function() {
-      console.log("UPDATE");
       if (this.dataLoaded) {
         this.updateCommandsList();
       }
@@ -108,15 +111,19 @@ export default {
               this.mustBeShowed(cmdData) &&
               !(this.hideUseless && this.isUselessCommand(cmdData["name"]))
             ) {
-              this.commandsList.push({
+              const commandData = {
                 room: this.commandsTree[roomId]["name"],
                 eqLogic: this.commandsTree[roomId]["eqLogics"][eqLogicIndex][
                   "name"
                 ],
                 cmd: cmdData["name"],
                 id: cmdData["id"],
                 data: cmdData
-              });
+              };
+              if (this.default == commandData.id) {
+                this.command = [commandData];
+              }
+              this.commandsList.push(commandData);
             }
           }
         }

src/dash/src/components/Wizards/Helpers/FilteredDashs.vue

@@ -15,7 +15,7 @@
       v-bind:loading="Object.keys(rawDashs).length === 0"
       loading-text="Chargement..."
       class="elevation-10"
-      v-model="scenario"
+      v-model="dash"
       v-bind:search="search"
     ></v-data-table>
   </v-card>
@@ -31,6 +31,10 @@ export default {
       type: Array,
       default: () => []
     },
+    default: {
+      type: Number,
+      default: -1
+    },
     type: {}
   },
   data: () => ({
@@ -42,18 +46,21 @@ export default {
       { text: "Nom", value: "name" }
     ]
   }),
-  created() {
+  mounted() {
     Communication.get("/api/dash/all", result => {
       this.rawDashs = result;
       this.dashsList = result;
+      if (this.default !== -1) {
+        this.dash = [{ id: this.default }];
+      }
       //      this.updateDashsList();
     });
   },
   computed: {
     dataLoaded() {
       return !(Object.keys(this.rawDashs).length === 0);
     },
-    scenario: {
+    dash: {
       get() {
         return this.value;
       },

src/dash/src/components/Wizards/Helpers/FilteredEqLogics.vue

@@ -31,6 +31,10 @@ export default {
       type: Array,
       default: () => []
     },
+    default: {
+      type: Number,
+      default: -1
+    },
     type: String
   },
   data: () => ({
@@ -43,6 +47,9 @@ export default {
     ]
   }),
   created() {
+    this.updateEqLogicssList();
+  },
+  mounted() {
     Communication.get("/api/summary/all", result => {
       this.eqLogicsTree = result;
       this.updateEqLogicssList();
@@ -80,14 +87,18 @@ export default {
                 this.type
             )
           ) {
-            this.eqLogicsList.push({
+            const eqLogicData = {
               room: this.eqLogicsTree[roomId]["name"],
               eqLogic: this.eqLogicsTree[roomId]["eqLogics"][eqLogicId]["name"],
               id: parseInt(
                 this.eqLogicsTree[roomId]["eqLogics"][eqLogicId]["id"]
               ),
               eqLogicData: this.eqLogicsTree[roomId]["eqLogics"][eqLogicId]
-            });
+            };
+            if (this.default == eqLogicData.id) {
+              this.eqLogic = [eqLogicData];
+            }
+            this.eqLogicsList.push(eqLogicData);
           }
         }
       }