fix buttons

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --mode local_web",
     "build:local_web": "vite build --mode local_web",
     "build:global_web": "vite build --mode global_web",
     "build": "run-p type-check \"build-only {@}\" --",

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>()
 
@@ -17,7 +17,11 @@ const emptyNode: GraphNode = {
   code: "",
   name: "",
   text: "",
+  image: "",
   applications: [],
+  hidden: false,
+  doors: [],
+
   id: "",
   label: "",
   links: [],
@@ -28,7 +32,11 @@ const selectedNode = ref<GraphNode>({
   code: "",
   name: "",
   text: "",
+  image: "",
   applications: [],
+  hidden: false,
+  doors: [],
+
   id: "",
   label: "",
   links: [],
@@ -38,7 +46,11 @@ const focusedNode = ref<GraphNode>({
   code: "",
   name: "",
   text: "",
+  image: "",
   applications: [],
+  hidden: false,
+  doors: [],
+
   id: "",
   label: "",
   links: [],
@@ -132,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
@@ -192,13 +212,18 @@ async function addSelectedNode() {
   selectNode(nodes[0])
 }
 
-async function clearSelectedNode() {
-  console.log("Clear node")
-  selectNode(emptyNode)
+function findNode(code: string): GraphNode {
+  const nodes = graph.value.nodes.filter(function (it: GraphNode) {
+    return it.code == code
+  })
+  return nodes[0]
 }
 
 function nodeHeader(node: GraphNode): string {
-  return "[" + node.code + "] - " + node.name
+  if (node == undefined) {
+    return "undefined"
+  }
+  return "[" + node.code + "]: " + node.name
 }
 
 function showGraph(show: boolean) {
@@ -226,11 +251,19 @@ function showGraph(show: boolean) {
               <div class="message-header" :class="[action.code == selectedNode.code ? 'selected-message-header' : '']">
                 {{ action.code }}: {{ action.name }}
               </div>
+              <div v-if="action.image !== ''">
+                {{ action.image }}
+              </div>
               <hr class="hr" />
               <div class="message-content">
                 {{ action.text }}
               </div>
               <hr class="hr" v-if="action.applications.length" />
+              <div class="message-footer" v-for="door in action.doors" :key="door.code">
+                <span v-if="door.show">Кнопка: </span>
+                <span v-if="!door.show">Дверь: </span>
+                {{ nodeHeader(findNode(door.code)) }}
+              </div>
               <div class="message-footer" v-for="application in action.applications" :key="application.name">
                 Приложение: {{ application.name }}
               </div>
@@ -289,7 +322,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="checkbox" />
+          </div>
+        </div>
       </div>
       <div>
         <h3>Приложения: {{ selectedNode.applications.length }}
@@ -313,14 +360,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>
@@ -428,7 +468,8 @@ function showGraph(show: boolean) {
   max-height: calc(100vh - 70px);
 }
 
-.scroll-y::-webkit-scrollbar, .scroll-y-right::-webkit-scrollbar {
+.scroll-y::-webkit-scrollbar,
+.scroll-y-right::-webkit-scrollbar {
   display: none;
 }
 
@@ -437,7 +478,7 @@ function showGraph(show: boolean) {
 }
 
 .node-name-edit-field {
-  width: 220px;
+  width: 200px;
 }
 
 .application-add-button {
@@ -449,9 +490,9 @@ function showGraph(show: boolean) {
 
 .application-remove-button {
   position: absolute;
-  left: -25px;
-  width: 23px;
-  height: 23px;
+  left: -15px;
+  width: 20px;
+  height: 20px;
 }
 
 
@@ -605,4 +646,8 @@ function showGraph(show: boolean) {
 .checkbox-green.focused .checkbox-green-switch:after {
   box-shadow: inset 0px 0px 4px #ff5623;
 }
+
+.tb-5 {
+  margin: 5px 0 10px 0;
+}
 </style>

src/components/models.ts

@@ -31,7 +31,10 @@ export type GraphNode = {
   code: string
   name: string
   text: string
+  image: string
   applications: Array<GraphApplication>
+  hidden: boolean
+  doors: Array<GraphDoor>
 
   // fields for graph
   id: string
@@ -50,3 +53,9 @@ export type GraphEdge = {
 export type GraphApplication = {
   name: string
 }
+
+export type GraphDoor = {
+  code: string
+  name: string
+  show: boolean
+}