🌈 style: eslint lint

easytier-gui/src/pages/index.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import Stepper from 'primevue/stepper';
-import StepperPanel from 'primevue/stepperpanel';
+import Stepper from 'primevue/stepper'
+import StepperPanel from 'primevue/stepperpanel'
 
-import { useToast } from "primevue/usetoast";
+import { useToast } from 'primevue/usetoast'
 
+import { exit } from '@tauri-apps/api/process'
+import Config from '~/components/Config.vue'
+import Status from '~/components/Status.vue'
 
-import Config from '~/components/Config.vue';
-import Status from '~/components/Status.vue';
+import type { NetworkConfig } from '~/types/network'
+import { loadLanguageAsync } from '~/modules/i18n'
 
-import { exit } from '@tauri-apps/api/process';
-import { NetworkConfig } from '~/types/network';
-import { loadLanguageAsync } from '~/modules/i18n';
 const { t, locale } = useI18n()
-const visible = ref(false);
-const tomlConfig = ref("");
+const visible = ref(false)
+const tomlConfig = ref('')
 
 const items = ref([
   {
@@ -21,103 +21,106 @@ const items = ref([
     icon: 'pi pi-file-edit',
     command: async () => {
       try {
-        const ret = await parseNetworkConfig(networkStore.curNetwork);
-        tomlConfig.value = ret;
-      } catch (e: any) {
-        tomlConfig.value = e;
+        const ret = await parseNetworkConfig(networkStore.curNetwork)
+        tomlConfig.value = ret
       }
-      visible.value = true;
-    }
+      catch (e: any) {
+        tomlConfig.value = e
+      }
+      visible.value = true
+    },
   },
   {
     label: () => t('del_cur_network'),
     icon: 'pi pi-times',
     command: async () => {
-      networkStore.removeNetworkInstance(networkStore.curNetwork.instance_id);
-      await retainNetworkInstance(networkStore.networkInstanceIds);
-      networkStore.delCurNetwork();
+      networkStore.removeNetworkInstance(networkStore.curNetwork.instance_id)
+      await retainNetworkInstance(networkStore.networkInstanceIds)
+      networkStore.delCurNetwork()
     },
     disabled: () => networkStore.networkList.length <= 1,
   },
 ])
 
 enum Severity {
-  None = "none",
-  Success = "success",
-  Info = "info",
-  Warn = "warn",
-  Error = "error",
+  None = 'none',
+  Success = 'success',
+  Info = 'info',
+  Warn = 'warn',
+  Error = 'error',
 }
 
-const messageBarSeverity = ref(Severity.None);
-const messageBarContent = ref("");
+const messageBarSeverity = ref(Severity.None)
+const messageBarContent = ref('')
 
-const toast = useToast();
+const toast = useToast()
 
-const networkStore = useNetworkStore();
+const networkStore = useNetworkStore()
 
-const addNewNetwork = () => {
-  networkStore.addNewNetwork();
-  networkStore.curNetwork = networkStore.lastNetwork;
+function addNewNetwork() {
+  networkStore.addNewNetwork()
+  networkStore.curNetwork = networkStore.lastNetwork
 }
 
-const networkMenuName = (network: NetworkConfig) => {
-  return network.network_name + " (" + network.instance_id + ")";
+function networkMenuName(network: NetworkConfig) {
+  return `${network.network_name} (${network.instance_id})`
 }
 
 networkStore.$subscribe(async () => {
-  networkStore.saveToLocalStorage();
+  networkStore.saveToLocalStorage()
   try {
-    await parseNetworkConfig(networkStore.curNetwork);
-    messageBarSeverity.value = Severity.None;
-  } catch (e: any) {
-    messageBarContent.value = e;
-    messageBarSeverity.value = Severity.Error;
+    await parseNetworkConfig(networkStore.curNetwork)
+    messageBarSeverity.value = Severity.None
   }
-});
+  catch (e: any) {
+    messageBarContent.value = e
+    messageBarSeverity.value = Severity.Error
+  }
+})
 
 async function runNetworkCb(cfg: NetworkConfig, cb: (e: MouseEvent) => void) {
-  cb({} as MouseEvent);
-  networkStore.removeNetworkInstance(cfg.instance_id);
-  await retainNetworkInstance(networkStore.networkInstanceIds);
-  networkStore.addNetworkInstance(cfg.instance_id);
+  cb({} as MouseEvent)
+  networkStore.removeNetworkInstance(cfg.instance_id)
+  await retainNetworkInstance(networkStore.networkInstanceIds)
+  networkStore.addNetworkInstance(cfg.instance_id)
 
   try {
-    await runNetworkInstance(cfg);
-  } catch (e: any) {
-    console.error(e);
-    toast.add({ severity: 'info', detail: e });
+    await runNetworkInstance(cfg)
+  }
+  catch (e: any) {
+    // console.error(e)
+    toast.add({ severity: 'info', detail: e })
   }
 }
 
 async function stopNetworkCb(cfg: NetworkConfig, cb: (e: MouseEvent) => void) {
-  console.log("stopNetworkCb", cfg, cb);
-  cb({} as MouseEvent);
-  networkStore.removeNetworkInstance(cfg.instance_id);
-  await retainNetworkInstance(networkStore.networkInstanceIds);
+  // console.log('stopNetworkCb', cfg, cb)
+  cb({} as MouseEvent)
+  networkStore.removeNetworkInstance(cfg.instance_id)
+  await retainNetworkInstance(networkStore.networkInstanceIds)
 }
 
 async function updateNetworkInfos() {
-  networkStore.updateWithNetworkInfos(await collectNetworkInfos());
+  networkStore.updateWithNetworkInfos(await collectNetworkInfos())
 }
 
-let intervalId = 0;
+let intervalId = 0
 onMounted(() => {
   intervalId = window.setInterval(async () => {
-    await updateNetworkInfos();
-  }, 500);
-});
+    await updateNetworkInfos()
+  }, 500)
+})
 onUnmounted(() => clearInterval(intervalId))
 
 const curNetworkHasInstance = computed(() => {
-  return networkStore.networkInstanceIds.includes(networkStore.curNetworkId);
-});
+  return networkStore.networkInstanceIds.includes(networkStore.curNetworkId)
+})
 
 const activeStep = computed(() => {
-  return curNetworkHasInstance.value ? 1 : 0;
-});
+  return curNetworkHasInstance.value ? 1 : 0
+})
 
-const setting_menu = ref();
+const setting_menu = ref()
 const setting_menu_items = ref([
   {
     label: () => t('settings'),
@@ -126,28 +129,30 @@ const setting_menu_items = ref([
         label: () => t('exchange_language'),
         icon: 'pi pi-language',
         command: async () => {
-          await loadLanguageAsync((locale.value === 'en' ? 'cn' : 'en'));
-        }
+          await loadLanguageAsync((locale.value === 'en' ? 'cn' : 'en'))
+        },
       },
       {
         label: () => t('exit'),
         icon: 'pi pi-times',
         command: async () => {
-          await exit(1);
-        }
-      }
-    ]
-  }
-]);
+          await exit(1)
+        },
+      },
+    ],
+  },
+])
 
-const toggle_setting_menu = (event: any) => {
-  setting_menu.value.toggle(event);
-};
+function toggle_setting_menu(event: any) {
+  setting_menu.value.toggle(event)
+}
 
 onMounted(async () => {
-  networkStore.loadFromLocalStorage();
-});
+  networkStore.loadFromLocalStorage()
+})
+</script>
 
+<script lang="ts">
 </script>
 
 <template>
@@ -161,7 +166,7 @@ onMounted(async () => {
       </Panel>
       <Divider />
       <div class="flex justify-content-end gap-2">
-        <Button type="button" :label="$t('close')" @click="visible = false"></Button>
+        <Button type="button" :label="$t('close')" @click="visible = false" />
       </div>
     </Dialog>
 
@@ -169,23 +174,29 @@ onMounted(async () => {
       <Toolbar>
         <template #start>
           <div class="flex align-items-center gap-2">
-            <Button icon="pi pi-plus" class="mr-2" severity="primary" :label="$t('add_new_network')"
-              @click="addNewNetwork" />
+            <Button
+              icon="pi pi-plus" class="mr-2" severity="primary" :label="$t('add_new_network')"
+              @click="addNewNetwork"
+            />
           </div>
         </template>
 
         <template #center>
           <div class="min-w-80 mr-20">
-            <Dropdown v-model="networkStore.curNetwork" :options="networkStore.networkList"
-              :optionLabel="networkMenuName" :placeholder="$t('select_network')" :highlightOnSelect="true"
-              :checkmark="true" class="w-full md:w-32rem" />
+            <Dropdown
+              v-model="networkStore.curNetwork" :options="networkStore.networkList"
+              :option-label="networkMenuName" :placeholder="$t('select_network')" :highlight-on-select="true"
+              :checkmark="true" class="w-full md:w-32rem"
+            />
           </div>
         </template>
 
         <template #end>
-          <Button icon="pi pi-cog" class="mr-2" severity="secondary" aria-haspopup="true" @click="toggle_setting_menu"
-            :label="$t('settings')" aria-controls="overlay_setting_menu" />
-          <Menu ref="setting_menu" id="overlay_setting_menu" :model="setting_menu_items" :popup="true" />
+          <Button
+            icon="pi pi-cog" class="mr-2" severity="secondary" aria-haspopup="true" :label="$t('settings')"
+            aria-controls="overlay_setting_menu" @click="toggle_setting_menu"
+          />
+          <Menu id="overlay_setting_menu" ref="setting_menu" :model="setting_menu_items" :popup="true" />
         </template>
       </Toolbar>
     </div>
@@ -193,8 +204,10 @@ onMounted(async () => {
     <Stepper class="h-full overflow-y-auto" :active-step="activeStep">
       <StepperPanel :header="$t('config_network')" class="w">
         <template #content="{ nextCallback }">
-          <Config @run-network="runNetworkCb($event, nextCallback)" :instance-id="networkStore.curNetworkId"
-            :config-invalid="messageBarSeverity != Severity.None" />
+          <Config
+            :instance-id="networkStore.curNetworkId" :config-invalid="messageBarSeverity !== Severity.None"
+            @run-network="runNetworkCb($event, nextCallback)"
+          />
         </template>
       </StepperPanel>
       <StepperPanel :header="$t('running')">
@@ -203,21 +216,22 @@ onMounted(async () => {
             <Status :instance-id="networkStore.curNetworkId" />
           </div>
           <div class="flex pt-4 justify-content-center">
-            <Button :label="$t('stop_network')" severity="danger" icon="pi pi-arrow-left"
-              @click="stopNetworkCb(networkStore.curNetwork, prevCallback)" />
+            <Button
+              :label="$t('stop_network')" severity="danger" icon="pi pi-arrow-left"
+              @click="stopNetworkCb(networkStore.curNetwork, prevCallback)"
+            />
           </div>
         </template>
       </StepperPanel>
     </Stepper>
 
     <div>
-      <Menubar :model="items" breakpoint="300px">
-      </Menubar>
+      <Menubar :model="items" breakpoint="300px" />
       <InlineMessage v-if="messageBarSeverity !== Severity.None" class="absolute bottom-0 right-0" severity="error">
-        {{ messageBarContent }}</InlineMessage>
+        {{ messageBarContent }}
+      </InlineMessage>
     </div>
   </div>
-
 </template>
 
 <style scoped>
@@ -240,13 +254,9 @@ body {
   margin: 0;
 }
 
-/* 
+/*
 
 .p-tabview-panel {
   height: 100%;
 } */
 </style>
-
-
-<script lang="ts">
-</script>