Улучшение фронта

front_vue/src/Design/components/proxies/ProxiesTable.vue

@@ -1,9 +1,45 @@
-<script setup>
+<script setup>
+
 const { t } = useI18n()
 const router = useRouter()
 const proxiesStore = useProxiesStore()
 const certsStore = useCertsStore()
 
+const togglingStatus = ref('')
+const dragIdx = ref(null)
+const overIdx = ref(null)
+
+const onDragStart = (i, e) => { dragIdx.value = i; e.dataTransfer.effectAllowed = 'move' }
+const onDragOver = (i, e) => { e.preventDefault(); overIdx.value = i }
+const onDragLeave = () => { overIdx.value = null }
+const onDragEnd = () => { dragIdx.value = null; overIdx.value = null }
+
+const onDrop = async (i) => {
+  if (dragIdx.value === null || dragIdx.value === i) { dragIdx.value = null; overIdx.value = null; return }
+  const items = [...proxiesStore.list]
+  const [moved] = items.splice(dragIdx.value, 1)
+  items.splice(i, 0, moved)
+  proxiesStore.list = items
+  dragIdx.value = null
+  overIdx.value = null
+  const config = await api.getConfig()
+  config.Proxy_Service = items.map(p => config.Proxy_Service.find(c => c.ExternalDomain === p.ExternalDomain)).filter(Boolean)
+  await api.saveConfig(JSON.stringify(config))
+}
+
+const toggleStatus = async (proxy) => {
+  togglingStatus.value = proxy.ExternalDomain
+  const config = await api.getConfig()
+  const idx = config.Proxy_Service.findIndex(p => p.ExternalDomain === proxy.ExternalDomain)
+  if (idx >= 0) {
+    config.Proxy_Service[idx].Enable = !proxy.Enable
+    await api.saveConfig(JSON.stringify(config))
+    await api.reloadConfig()
+    await proxiesStore.load()
+  }
+  togglingStatus.value = ''
+}
+
 const openUrl = (host) => {
   if (window.runtime?.BrowserOpenURL) {
     window.runtime.BrowserOpenURL('http://' + host)
@@ -41,27 +77,33 @@ const findCertForDomain = (domain) => {
 
 <template>
   <section class="section">
-    <div class="section-header">
-      <h2 class="section-title">{{ t('proxies.title') }}</h2>
-      <VButton variant="primary" icon="fas fa-plus" @click="router.push('/proxies/create')">
-        {{ t('proxies.add') }}
-      </VButton>
-    </div>
+    <VSectionHeader :title="t('proxies.title')" addable @add="router.push('/proxies/create')" />
     <div class="table-container">
       <table class="data-table">
         <thead>
           <tr>
-            <th>{{ t('sites.name') }}</th>
-            <th>{{ t('proxies.externalDomain') }}</th>
-            <th>{{ t('proxies.localAddress') }}</th>
-            <th>HTTPS</th>
-            <th>{{ t('proxies.status') }}</th>
-            <th>{{ t('proxies.actions') }}</th>
+            <th><i class="fas fa-tag th-icon"></i> {{ t('sites.name') }}</th>
+            <th><i class="fas fa-globe th-icon"></i> {{ t('proxies.externalDomain') }}</th>
+            <th><i class="fas fa-server th-icon"></i> {{ t('proxies.localAddress') }}</th>
+            <th><i class="fas fa-lock th-icon"></i> HTTPS</th>
+            <th><i class="fas fa-circle-check th-icon"></i> {{ t('proxies.status') }}</th>
+            <th class="th-actions">{{ t('proxies.actions') }}</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="proxy in proxiesStore.list" :key="proxy.ExternalDomain">
+          <tr
+            v-for="(proxy, i) in proxiesStore.list"
+            :key="proxy.ExternalDomain"
+            draggable="true"
+            :class="{ 'drag-over': overIdx === i, 'dragging': dragIdx === i }"
+            @dragstart="onDragStart(i, $event)"
+            @dragover="onDragOver(i, $event)"
+            @dragleave="onDragLeave"
+            @drop="onDrop(i)"
+            @dragend="onDragEnd"
+          >
             <td>
+              <i class="fas fa-grip-vertical drag-grip"></i>
               <span class="cert-icon" :class="findCertForDomain(proxy.ExternalDomain) ? (findCertForDomain(proxy.ExternalDomain).is_expired ? 'cert-expired' : 'cert-valid') : 'cert-none'">
                 <i class="fas fa-shield-alt"></i>
               </span>
@@ -77,8 +119,12 @@ const findCertForDomain = (domain) => {
               </VBadge>
             </td>
             <td>
-              <VBadge :variant="proxy.Enable ? 'online' : 'offline'">
-                {{ proxy.Enable ? 'active' : 'disabled' }}
+              <VBadge
+                class="status-toggle"
+                :variant="togglingStatus === proxy.ExternalDomain ? 'pending' : (proxy.Enable ? 'online' : 'offline')"
+                @click="toggleStatus(proxy)"
+              >
+                {{ togglingStatus === proxy.ExternalDomain ? '...' : (proxy.Enable ? 'active' : 'disabled') }}
               </VBadge>
             </td>
             <td>