add update route

src/components/EditorWindow.vue

@@ -2,35 +2,12 @@
 
 import { ref, onMounted } from 'vue'
 import HeaderBlock from './HeaderBlock.vue';
-import { Network } from 'vis-network'
-import { getGraph } from './client';
+import { Network, type Data } from 'vis-network'
+import { getGraph, updateNode } from './client';
+import type { Graph, GraphEdge, GraphNode } from './models';
 
 const network = ref<HTMLElement>()
 
-type GraphApplication = {
-  name: string,
-}
-
-type GraphNode = {
-  id: number,
-  label: string,
-  name: string,
-  text: string,
-  applications: Array<GraphApplication>,
-  links: Array<GraphNode>,
-};
-
-type GraphEdge = {
-  from: number,
-  to: number,
-  arrows: string,
-};
-
-type Graph = {
-  nodes: Array<GraphNode>;
-  edges: Array<GraphEdge>;
-};
-
 const graph = ref<Graph>({
   nodes: [],
   edges: []
@@ -46,16 +23,19 @@ const selectedNode = ref<GraphNode>({
 })
 
 let net = <Network>{}
+let data = <Data>{}
 
-onMounted(async () => {
-  if (!network.value) return
-
+async function loadGraph() {
   graph.value = await getGraph()
-
-  const data = {
+  data = {
     nodes: graph.value.nodes,
     edges: graph.value.edges
   }
+  net.setData(data)
+}
+
+onMounted(async () => {
+  if (!network.value) return
 
   const options = {
     interaction: {
@@ -85,6 +65,7 @@ onMounted(async () => {
     }
   });
 
+  await loadGraph()
   selectNode(graph.value.nodes[0])
 })
 
@@ -103,6 +84,12 @@ function selectNode(node: GraphNode) {
   net.selectNodes([selectedNode.value.id])
 }
 
+async function updateSelectedNode() {
+  console.log("Update node:", selectedNode.value)
+  await updateNode(selectedNode.value)
+  await loadGraph()
+}
+
 function nodeHeader(node: GraphNode): string {
   return "[" + node.label + "] - " + node.name
 }
@@ -119,6 +106,9 @@ function nodeHeader(node: GraphNode): string {
 
   <div class="nodes-container">
     <h2>Точки</h2>
+    <div>Всего точек: {{ graph.nodes.length }}</div>
+    <div>Всего связей: {{ graph.edges.length }}</div>
+    <hr class="hr">
 
     <div v-bind:key="node.id" v-for="node in graph.nodes">
       <div :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button"
@@ -134,22 +124,25 @@ function nodeHeader(node: GraphNode): string {
       {{ nodeHeader(selectedNode) }}
     </div>
     <div>
-      {{ selectedNode.text }}
+      <textarea class="node-text-edit-field" rows="30" v-model="selectedNode.text"></textarea>
     </div>
     <div>
-      <h3>Приложения</h3>
+      <h3>Приложения: {{ selectedNode.applications.length }}</h3>
       <div v-bind:key="application.name" v-for="application in selectedNode.applications">
-        {{ application.name }}
+        - {{ application.name }}
       </div>
     </div>
     <div>
-      <h3>Ссылки</h3>
+      <h3>Ссылки: {{ selectedNode.links.length }}</h3>
       <div v-bind:key="node.id" v-for="node in selectedNode.links">
         <div class="node-select-button" v-on:click="selectNode(node)">
-          {{ nodeHeader(node) }}
+          - {{ nodeHeader(node) }}
         </div>
       </div>
     </div>
+    <div>
+      <button class="node-edit-save-button" v-on:click="updateSelectedNode()">Сохранить</button>
+    </div>
   </div>
 </template>
 
@@ -175,7 +168,8 @@ function nodeHeader(node: GraphNode): string {
   top: 55px;
   height: calc(100vh - 100px);
   padding: 10px 20px;
-  max-width: 300px;
+  min-width: 350px;
+  max-width: 400px;
 }
 
 .node-select-button {
@@ -192,4 +186,27 @@ function nodeHeader(node: GraphNode): string {
   color: #960000;
   cursor: pointer;
 }
+
+.node-text-edit-field {
+  padding: 7px;
+  margin: 5px 0;
+  width: 100%;
+}
+
+.node-edit-save-button {
+  padding: 3px 7px;
+  margin: 5px;
+  background-color: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #373737;
+}
+
+.node-edit-save-button:hover {
+  background-color: #dddddd;
+  cursor: pointer;
+}
+
+.hr {
+  margin: 10px 0;
+}
 </style>