add door editor

src/components/EditorWindow.vue

@@ -4,7 +4,7 @@ import { ref, onMounted } from 'vue'
 import HeaderBlock from './HeaderBlock.vue';
 import { Network, type Data } from 'vis-network'
 import { getGraph, updateNode } from './client';
-import type { Graph, GraphApplication, GraphEdge, GraphNode } from './models';
+import type { Graph, GraphApplication, GraphDoor, GraphEdge, GraphNode } from './models';
 
 const network = ref<HTMLElement>()
 
@@ -144,6 +144,14 @@ function removeApplicationToSelectedNode(name: string) {
   selectedNode.value.applications = selectedNode.value.applications.filter(function (it: GraphApplication): boolean { return it.name != name })
 }
 
+function addDoorToSelectedNode() {
+  selectedNode.value.doors.push({ code: "", name: "", show: false })
+}
+
+function removeDoorToSelectedNode(code: string) {
+  selectedNode.value.doors = selectedNode.value.doors.filter(function (it: GraphDoor): boolean { return it.code != code })
+}
+
 function selectNode(node: GraphNode) {
   console.log("Select node:", node)
   updatedNodeID.value = node.code
@@ -204,11 +212,6 @@ async function addSelectedNode() {
   selectNode(nodes[0])
 }
 
-async function clearSelectedNode() {
-  console.log("Clear node")
-  selectNode(emptyNode)
-}
-
 function nodeHeader(node: GraphNode): string {
   return "[" + node.code + "] - " + node.name
 }
@@ -247,7 +250,9 @@ function showGraph(show: boolean) {
               </div>
               <hr class="hr" v-if="action.applications.length" />
               <div class="message-footer" v-for="door in action.doors" :key="door.code">
-                Дверь: [{{ door.code }}] - "{{ door.name }}"
+                <span v-if="door.show">Кнопка: </span>
+                <span v-if="!door.show">Дверь: </span>
+                [{{ door.code }}] - "{{ door.name }}"
               </div>
               <div class="message-footer" v-for="application in action.applications" :key="application.name">
                 Приложение: {{ application.name }}
@@ -307,7 +312,21 @@ function showGraph(show: boolean) {
           v-model="selectedNode.name" type="text" class="node-name-edit-field" />
       </div>
       <div>
-        <textarea class="node-text-edit-field" rows="25" v-model="selectedNode.text"></textarea>
+        <textarea class="node-text-edit-field" rows="15" v-model="selectedNode.text"></textarea>
+      </div>
+      <div>
+        <h3>Двери: {{ selectedNode.doors.length }}
+          <button class="editor-button application-add-button" v-on:click="addDoorToSelectedNode()">+</button>
+        </h3>
+        <div class="tb-5" v-if="selectedNode.doors.length > 0">
+          <div v-bind:key="index" v-for="(door, index) in selectedNode.doors">
+            <button class="editor-button application-remove-button"
+              v-on:click="removeDoorToSelectedNode(door.code)">-</button>
+            <input class="node-code-edit-field" v-model="door.code" type="text" maxlength="5" /> -
+            <input class="node-name-edit-field" v-model="door.name" type="text" /> -
+            <input class="node-code-edit-field" v-model="door.show" type="text" maxlength="5" />
+          </div>
+        </div>
       </div>
       <div>
         <h3>Приложения: {{ selectedNode.applications.length }}
@@ -331,14 +350,7 @@ function showGraph(show: boolean) {
         <hr class="hr">
         <div>
           <button class="editor-button" v-on:click="updateSelectedNode()">Сохранить</button>
-        </div>
-        <hr class="hr">
-        <div>
-          <button class="editor-button" v-on:click="clearSelectedNode()">Очистить</button>
           <button class="editor-button" v-on:click="addSelectedNode()">Добавить</button>
-        </div>
-        <hr class="hr">
-        <div>
           <button class="editor-button" v-on:click="deleteSelectedNode()">Удалить</button>
         </div>
       </div>
@@ -456,7 +468,7 @@ function showGraph(show: boolean) {
 }
 
 .node-name-edit-field {
-  width: 220px;
+  width: 200px;
 }
 
 .application-add-button {
@@ -468,9 +480,9 @@ function showGraph(show: boolean) {
 
 .application-remove-button {
   position: absolute;
-  left: -25px;
-  width: 23px;
-  height: 23px;
+  left: -15px;
+  width: 20px;
+  height: 20px;
 }
 
 
@@ -624,4 +636,8 @@ function showGraph(show: boolean) {
 .checkbox-green.focused .checkbox-green-switch:after {
   box-shadow: inset 0px 0px 4px #ff5623;
 }
+
+.tb-5 {
+  margin: 5px 0;
+}
 </style>