Outbound modal

frontend/src/views/Outbounds.vue

@@ -1,8 +1,29 @@
 <template>
+  <OutboundVue 
+    v-model="modal.visible"
+    :visible="modal.visible"
+    :id="modal.id"
+    :stats="modal.stats"
+    :data="modal.data"
+    @close="closeModal"
+    @save="saveModal"
+  />
+  <Stats
+    v-model="stats.visible"
+    :visible="stats.visible"
+    :resource="stats.resource"
+    :tag="stats.tag"
+    @close="closeStats"
+  />
+  <v-row>
+    <v-col cols="12" justify="center" align="center">
+      <v-btn color="primary" @click="showModal(-1)">{{ $t('actions.add') }}</v-btn>
+    </v-col>
+  </v-row>
   <v-row>
     <v-col cols="12" sm="4" md="3" lg="2" v-for="(item, index) in <any[]>outbounds" :key="item.tag">
       <v-card rounded="xl" elevation="5" min-width="200" :title="item.tag">
-        <v-card-subtitle>
+        <v-card-subtitle style="margin-top: -20px;">
           <v-row>
             <v-col>{{ item.type }}</v-col>
           </v-row>
@@ -15,6 +36,32 @@
             </v-col>
           </v-row>
         </v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions style="padding: 0;">
+          <v-btn icon="mdi-file-edit" @click="showModal(index)">
+            <v-icon />
+            <v-tooltip activator="parent" location="top" :text="$t('actions.edit')"></v-tooltip>
+          </v-btn>
+          <v-btn icon="mdi-file-remove" style="margin-inline-start:0;" color="warning" @click="delOverlay[index] = true">
+            <v-icon />
+            <v-tooltip activator="parent" location="top" :text="$t('actions.del')"></v-tooltip>
+          </v-btn>
+          <v-overlay
+            v-model="delOverlay[index]"
+            contained
+            class="align-center justify-center"
+          >
+            <v-card :title="$t('actions.del')" rounded="lg">
+              <v-divider></v-divider>
+              <v-card-text>{{ $t('confirm') }}</v-card-text>
+              <v-card-actions>
+                <v-btn color="error" variant="outlined" @click="delOutbound(index)">{{ $t('yes') }}</v-btn>
+                <v-btn color="success" variant="outlined" @click="delOverlay[index] = false">{{ $t('no') }}</v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-overlay>
+          <v-btn icon="mdi-chart-line" @click="showStats(item.tag)" />
+        </v-card-actions>
       </v-card>
     </v-col>
   </v-row>
@@ -22,13 +69,94 @@
 
 <script lang="ts" setup>
 import Data from '@/store/modules/data'
-import { computed } from 'vue'
+import OutboundVue from '@/layouts/modals/Outbound.vue'
+import Stats from '@/layouts/modals/Stats.vue'
+import { Config, V2rayApiStats } from '@/types/config';
+import { Outbound } from '@/types/outbounds';
+import { computed, ref } from 'vue'
 
-const appConfig = Data().config
-const outbounds = computed((): any[] => {
-  if (!appConfig || !('outbounds' in appConfig) || !Array.isArray(appConfig.outbounds)) {
-    return []
-  }
-  return appConfig.outbounds
+const appConfig = computed((): Config => {
+  return <Config> Data().config
 })
+
+const outbounds = computed((): Outbound[] => {
+  return <Outbound[]> appConfig.value.outbounds
+})
+
+const v2rayStats = computed((): V2rayApiStats => {
+  return <V2rayApiStats> appConfig.value.experimental.v2ray_api.stats
+})
+
+const modal = ref({
+  visible: false,
+  id: -1,
+  data: "",
+  stats: false,
+})
+
+let delOverlay = ref(new Array<boolean>)
+
+const showModal = (id: number) => {
+  modal.value.id = id
+  modal.value.data = id == -1 ? '' : JSON.stringify(outbounds.value[id])
+  modal.value.stats = id == -1 ? false : v2rayStats.value.outbounds.includes(outbounds.value[id].tag)
+  modal.value.visible = true
+}
+
+const closeModal = () => {
+  modal.value.visible = false
+}
+const saveModal = (data:Outbound, stats: boolean) => {
+  // New or Edit
+  if (modal.value.id == -1) {
+    outbounds.value.push(data)
+    if (stats && data.tag.length>0) {
+      v2rayStats.value.outbounds.push(data.tag)
+    }
+  } else {
+    const sIndex = v2rayStats.value.outbounds.findIndex(i => i == data.tag) // Find if new tag exists
+
+    if (stats) {
+      // Add if dos not exist
+      if (data.tag.length>0 && sIndex == -1) v2rayStats.value.outbounds.push(data.tag)
+    } else {
+      // Delete if exists
+      if (sIndex != -1) v2rayStats.value.outbounds.splice(sIndex,1)
+    }
+
+    outbounds.value[modal.value.id] = data
+  }
+  modal.value.visible = false
+}
+
+const stats = ref({
+  visible: false,
+  resource: "outbound",
+  tag: "",
+})
+
+const delOutbound = (index: number) => {
+  const inb = outbounds.value[index]
+  outbounds.value.splice(index,1)
+  const tag = inb.tag
+
+  // Delete stats if exists and will be orphaned
+  const tagCounts = outbounds.value.filter(i => i.tag == inb.tag).length
+  const sIndex = v2rayStats.value.outbounds.findIndex(i => i == inb.tag)
+  if (tagCounts == 1 && sIndex != -1){
+    v2rayStats.value.outbounds.splice(sIndex,1)
+  }
+  if (index < Data().oldData.config.outbounds.length){
+    Data().delOutbound(index)
+  }
+  delOverlay.value[index] = false
+}
+
+const showStats = (tag: string) => {
+  stats.value.tag = tag
+  stats.value.visible = true
+}
+const closeStats = () => {
+  stats.value.visible = false
+}
 </script>