feat: add buttons - updateGEODatabases, restart, upgrade

package.json

@@ -17,6 +17,7 @@
     "@fontsource/fira-sans": "^5.0.11",
     "@solid-primitives/event-listener": "^2.3.0",
     "@solid-primitives/i18n": "^1.4.1",
+    "@solid-primitives/keyed": "^1.2.0",
     "@solid-primitives/storage": "^2.1.1",
     "@solid-primitives/websocket": "^1.1.0",
     "@solidjs/router": "^0.8.3",

src/App.tsx

@@ -1,9 +1,10 @@
 import { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
-import { Show, lazy, onMount } from 'solid-js'
+import { Show, createEffect, lazy, onMount } from 'solid-js'
 import { Header } from '~/components/Header'
-import { curTheme, selectedEndpoint } from '~/signals'
+import { curTheme, endpoint, selectedEndpoint } from '~/signals'
 import { ROUTE } from './config/enum'
 import { useAutoSwitchTheme } from './signals/config'
+import { useProxies } from './signals/proxies'
 
 const Setup = lazy(() => import('~/pages/Setup'))
 const Overview = lazy(() => import('~/pages/Overview'))
@@ -19,6 +20,12 @@ export const App = () => {
 
   useAutoSwitchTheme()
 
+  createEffect(() => {
+    if (selectedEndpoint() && endpoint()) {
+      useProxies().updateProxy()
+    }
+  })
+
   onMount(async () => {
     if (!selectedEndpoint()) {
       navigate('/setup')

src/components/Button.tsx

@@ -0,0 +1,23 @@
+import { JSX, ParentComponent, Show, splitProps } from 'solid-js'
+import { twMerge } from 'tailwind-merge'
+
+export const Button: ParentComponent<
+  JSX.HTMLAttributes<HTMLButtonElement> & {
+    loading?: boolean
+  }
+> = (props) => {
+  const [local, others] = splitProps(props, ['class', 'loading'])
+
+  return (
+    <button
+      class={twMerge('btn', local.loading ? 'btn-disabled' : local.class)}
+      {...others}
+    >
+      <Show when={local.loading}>
+        <span class="loading loading-spinner" />
+      </Show>
+
+      {props.children}
+    </button>
+  )
+}

src/i18n/en.ts

@@ -44,4 +44,7 @@ export default {
   favDayTheme: 'Favorite light theme',
   favNightTheme: 'Favorite dark theme',
   renderInTwoColumns: 'Render Proxies in two columns',
+  updateGEODatabases: 'Update GEO Databases',
+  restartCore: 'Restart Core',
+  upgradeCore: 'Upgrade Core',
 }

src/i18n/zh.ts

@@ -44,4 +44,7 @@ export default {
   favDayTheme: '浅色主题偏好',
   favNightTheme: '深色主题偏好',
   renderInTwoColumns: '节点双列渲染',
+  updateGEODatabases: '更新 GEO 数据库文件',
+  restartCore: '重启核心',
+  upgradeCore: '更新核心',
 }

src/pages/Config.tsx

@@ -3,6 +3,7 @@ import { validator } from '@felte/validator-zod'
 import { useI18n } from '@solid-primitives/i18n'
 import { For, Show, createSignal, onMount } from 'solid-js'
 import { z } from 'zod'
+import { Button } from '~/components/Button'
 import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
 import { themes } from '~/constants'
 import { useRequest } from '~/signals'
@@ -89,6 +90,7 @@ const configFormSchema = z.object({
 })
 
 const ConfigForm = () => {
+  const [t] = useI18n()
   const request = useRequest()
 
   const portsList = [
@@ -125,8 +127,36 @@ const ConfigForm = () => {
     reset()
   })
 
+  const [updatingGEODatabases, setUpdatingGEODatabases] = createSignal(false)
+  const [upgraging, setUpgraging] = createSignal(false)
+  const [restarting, setRestarting] = createSignal(false)
+
+  const onUpdateGEODatabases = async () => {
+    setUpdatingGEODatabases(true)
+    try {
+      await request.post('configs/geo')
+    } catch {}
+    setUpdatingGEODatabases(false)
+  }
+
+  const onUpgrade = async () => {
+    setUpgraging(true)
+    try {
+      await request.post('upgrade')
+    } catch {}
+    setUpgraging(false)
+  }
+
+  const onRestart = async () => {
+    setRestarting(true)
+    try {
+      await request.post('restart')
+    } catch {}
+    setRestarting(false)
+  }
+
   return (
-    <div>
+    <div class="flex flex-col gap-2">
       <form class="contents" use:form={form}>
         <For each={portsList}>
           {(item) => (
@@ -144,6 +174,20 @@ const ConfigForm = () => {
           )}
         </For>
       </form>
+
+      <div class="flex items-center gap-2">
+        <Button loading={updatingGEODatabases()} onClick={onUpdateGEODatabases}>
+          {t('updateGEODatabases')}
+        </Button>
+
+        <Button loading={restarting()} onClick={onRestart}>
+          {t('restartCore')}
+        </Button>
+
+        <Button loading={upgraging()} onClick={onUpgrade}>
+          {t('upgradeCore')}
+        </Button>
+      </div>
     </div>
   )
 }

src/signals/proxies.ts

@@ -1,5 +1,5 @@
-import { createEffect, createSignal } from 'solid-js'
+import { createSignal } from 'solid-js'
-import { endpoint, selectedEndpoint, useRequest } from '~/signals'
+import { useRequest } from '~/signals'
 import { autoCloseConns, urlForDelayTest } from '~/signals/config'
 import type { Proxy, ProxyNode, ProxyProvider } from '~/types'
 
@@ -140,9 +140,3 @@ export function useProxies() {
     healthCheckByProviderName,
   }
 }
-
-createEffect(() => {
-  if (selectedEndpoint() && endpoint()) {
-    useProxies().updateProxy()
-  }
-})