From 4979a7f32a5dc7f81178f536bf725e1b73231bda Mon Sep 17 00:00:00 2001
From: AmyangXYZ <amyang.xyz@gmail.com>
Date: Thu, 1 Feb 2024 10:48:07 -0500
Subject: [PATCH] improve buttons and icons

---
 src/components/FlowsPanel.vue      | 66 ++++++++++++++++++++++--------
 src/components/TopoEditToolbox.vue | 23 +++++------
 2 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/src/components/FlowsPanel.vue b/src/components/FlowsPanel.vue
index 378bff0..476ccf1 100644
--- a/src/components/FlowsPanel.vue
+++ b/src/components/FlowsPanel.vue
@@ -1,19 +1,28 @@
 <script setup lang="tsx">
 import { ref, watch, nextTick } from 'vue'
 import { Network } from '@/hooks/useStates'
-
-const editCellRenderer = () => ({ column, rowIndex, rowData }: any) => {
-  if (rowIndex === Network.Flows.value.length - 1 && rowData.editing) {
-    return (
-      <el-input
-      v-model={rowData[column.dataKey!]}
-      placeholder="edit"
-      />
-    )
-  } else {
-    return <div>{rowData[column.dataKey!]}</div>
+import { Check, Close, Edit, Plus } from '@element-plus/icons-vue'
+const editCellRenderer =
+  () =>
+  ({ column, rowData }: any) => {
+    if (rowData.editing) {
+      return (
+        <input
+          style="
+            font-size:.65rem;
+            color:white;
+            text-align:center;
+            background:transparent;
+            font-family: Menlo;
+          "
+          v-model={rowData[column.dataKey!]}
+          placeholder=""
+        />
+      )
+    } else {
+      return <div>{rowData[column.dataKey!]}</div>
+    }
   }
-}
 
 const columns: any = [
   {
@@ -78,6 +87,19 @@ watch(
   { deep: true }
 )
 
+const editing = ref(false)
+watch(editing, () => {
+  if (editing.value == true) {
+    for (const f of Network.Flows.value) {
+      f.editing = true
+    }
+  } else {
+    for (const f of Network.Flows.value) {
+      f.editing = false
+    }
+  }
+})
+
 const addFlow = () => {
   const newFlow = {
     id: Network.Flows.value.length + 1,
@@ -90,12 +112,15 @@ const addFlow = () => {
     editing: true
   }
   Network.Flows.value.push(newFlow)
-  console.log('added flow')
+  // console.log('added flow')
 }
 
+// shall support adding multiple flows
 const saveFlow = () => {
+  editing.value = false
   const lastFlow = Network.Flows.value[Network.Flows.value.length - 1]
-  // lastFlow.path = Network.findPath(lastFlow.e2e_src, lastFlow.e2e_dst)
+  lastFlow.path = Network.findPath(lastFlow.e2e_src, lastFlow.e2e_dst)
+  console.log(lastFlow.path)
   lastFlow.editing = false
 }
 
@@ -109,9 +134,15 @@ Row.inheritAttrs = false
 <template>
   <el-card class="card">
     <template #header>
-      <div class="card-header">Flows</div>
-      <button @click="addFlow">Add Flow</button>
-      <button @click="saveFlow">Save Flow</button>
+      <div class="card-header">
+        Flows
+        <el-button :icon="Edit" circle size="small" v-if="!editing" @click="editing = !editing"></el-button>
+        <el-button-group v-if="editing">
+          <el-button :icon="Plus" circle size="small" @click="addFlow"></el-button>
+          <el-button :icon="Check" circle size="small" @click="saveFlow"></el-button>
+          <el-button :icon="Close" circle size="small" @click="editing = !editing"></el-button>
+        </el-button-group>
+      </div>
     </template>
 
     <el-table-v2
@@ -121,7 +152,6 @@ Row.inheritAttrs = false
       :data="Network.Flows.value"
       :width="360"
       :height="180"
-      :expand-column-key="columns[5].key"
       :estimated-row-height="16"
       :header-height="18"
     >
diff --git a/src/components/TopoEditToolbox.vue b/src/components/TopoEditToolbox.vue
index 64a450b..2148250 100644
--- a/src/components/TopoEditToolbox.vue
+++ b/src/components/TopoEditToolbox.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, toRefs } from 'vue'
 import { Network, SignalEditTopology, SignalAddNode, SignalUpdateLinks } from '@/hooks/useStates'
-import { Check, Plus, Switch } from '@element-plus/icons-vue'
+import { Check, Plus, Switch, Sort } from '@element-plus/icons-vue'
 import { NODE_TYPE } from '@/core/typedefs'
 
 const nodeType = ref(0)
@@ -28,8 +28,8 @@ const nodeTypes = [
 
 const { nodeId1, nodeId2 } = toRefs({
   nodeId1: ref(''),
-  nodeId2: ref(''),
-});
+  nodeId2: ref('')
+})
 
 const addNode = () => {
   Network.AddNode(nodeType.value)
@@ -41,8 +41,7 @@ const connect = () => {
   if (!isNaN(v1) && !isNaN(v2)) {
     Network.connect(v1, v2)
     SignalUpdateLinks.value++
-  }
-  else {
+  } else {
     console.error('Invalid node IDs.')
   }
 }
@@ -60,12 +59,12 @@ const finishEdit = () => {
   <el-card class="card p-4">
     <div class="flex-container">
       <span class="label-margin">Load preset:</span>
-      <el-select class="dropdown" v-model="Network.SelectedTopo.value" style="margin-right: 55px">
+      <el-select class="dropdown" v-model="Network.SelectedTopo.value" style="width: 175px; text-align-last: center">
         <el-option v-for="(_, name) in Network.PresetTopos" :key="name" :label="name" :value="name" />
       </el-select>
     </div>
 
-    <div class="flex-container mt-4">
+    <div class="flex-container">
       <span class="label-margin">Add node:</span>
       <el-select class="dropdown" v-model="nodeType">
         <el-option-group v-for="group in nodeTypes" :key="group.label" :label="group.label">
@@ -76,19 +75,19 @@ const finishEdit = () => {
       <el-button class="circular-button" @click="addNode" type="primary" :icon="Plus" circle />
     </div>
 
-    <div class="flex-container mt-4">
+    <div class="flex-container">
       <span class="label-margin">Connect</span>
-      <el-input v-model="nodeId1" placeholder="v1" class="node-input" style="margin-right: -35px"/>
+      <el-input v-model="nodeId1" placeholder="v1" class="node-input" style="margin-right: -35px" />
       <el-input v-model="nodeId2" placeholder="v2" class="node-input" />
-      <el-button class="circular-button" @click="connect" type="info" :icon="Switch" circle />
+      <el-button class="circular-button" @click="connect" type="info" :icon="Sort" circle />
     </div>
 
-    <div class="flex-container mt-4">
+    <div class="flex-container">
       <span class="label-margin">Auto-Connect</span>
       <el-button class="circular-button" @click="autoConnect" type="info" :icon="Switch" circle />
     </div>
 
-    <div class="flex-container mt-4">
+    <div class="flex-container">
       <span class="label-margin">Finish</span>
       <el-button class="circular-button" @click="finishEdit" type="danger" :icon="Check" circle />
     </div>