mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
feat: display current selected endpoint at the bottom of the overview page
This commit is contained in:
parent
aaf2d0bed2
commit
3e92373166
@ -7,9 +7,7 @@ export const Latency = (props: { name?: string }) => {
|
||||
const [t] = useI18n()
|
||||
const { latencyMap } = useProxies()
|
||||
const [textClassName, setTextClassName] = createSignal('')
|
||||
const latency = createMemo(() => {
|
||||
return latencyMap()[props.name!]
|
||||
})
|
||||
const latency = createMemo(() => latencyMap()[props.name!])
|
||||
|
||||
createEffect(() => {
|
||||
setTextClassName('text-success')
|
||||
|
@ -35,7 +35,6 @@ import { isSingBox } from '~/helpers'
|
||||
import { locale, setLocale, useI18n } from '~/i18n'
|
||||
import {
|
||||
autoSwitchTheme,
|
||||
endpoint,
|
||||
favDayTheme,
|
||||
favNightTheme,
|
||||
setAutoSwitchTheme,
|
||||
@ -381,6 +380,36 @@ const ConfigForXd = () => {
|
||||
|
||||
return (
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col items-center">
|
||||
<ConfigTitle>{t('useTwemoji')}</ConfigTitle>
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle"
|
||||
checked={useTwemoji()}
|
||||
onChange={(e) => setUseTwemoji(e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<ConfigTitle>{t('switchLanguage')}</ConfigTitle>
|
||||
|
||||
<select
|
||||
class="select select-bordered"
|
||||
onChange={(e) => setLocale(e.target.value as LANG)}
|
||||
>
|
||||
<For each={languages}>
|
||||
{(lang) => (
|
||||
<option selected={locale() === lang.value} value={lang.value}>
|
||||
{lang.label()}
|
||||
</option>
|
||||
)}
|
||||
</For>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col items-center">
|
||||
<ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
|
||||
@ -429,36 +458,6 @@ const ConfigForXd = () => {
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col items-center">
|
||||
<ConfigTitle>{t('useTwemoji')}</ConfigTitle>
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle"
|
||||
checked={useTwemoji()}
|
||||
onChange={(e) => setUseTwemoji(e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<ConfigTitle>{t('switchLanguage')}</ConfigTitle>
|
||||
|
||||
<select
|
||||
class="select select-bordered"
|
||||
onChange={(e) => setLocale(e.target.value as LANG)}
|
||||
>
|
||||
<For each={languages}>
|
||||
{(lang) => (
|
||||
<option selected={locale() === lang.value} value={lang.value}>
|
||||
{lang.label()}
|
||||
</option>
|
||||
)}
|
||||
</For>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -477,23 +476,19 @@ const Versions: Component<{ backendVersion: Accessor<string> }> = ({
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<kbd class="kbd">{import.meta.env.version}</kbd>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<kbd class="kbd">{import.meta.env.version}</kbd>
|
||||
|
||||
<div class="relative">
|
||||
<Show when={isUpdateAvailable()}>
|
||||
<span class="absolute -right-1 -top-1 flex h-3 w-3">
|
||||
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-info opacity-75" />
|
||||
<span class="inline-flex h-3 w-3 rounded-full bg-info" />
|
||||
</span>
|
||||
</Show>
|
||||
<div class="relative">
|
||||
<Show when={isUpdateAvailable()}>
|
||||
<span class="absolute -right-1 -top-1 flex h-3 w-3">
|
||||
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-info opacity-75" />
|
||||
<span class="inline-flex h-3 w-3 rounded-full bg-info" />
|
||||
</span>
|
||||
</Show>
|
||||
|
||||
<kbd class="kbd w-full">{backendVersion()}</kbd>
|
||||
</div>
|
||||
<kbd class="kbd w-full">{backendVersion()}</kbd>
|
||||
</div>
|
||||
|
||||
<h1 class="text-center text-lg font-bold">{endpoint()?.url}</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -14,7 +14,7 @@ import {
|
||||
} from 'solid-js'
|
||||
import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
|
||||
import { useI18n } from '~/i18n'
|
||||
import { latestConnectionMsg, useWsRequest } from '~/signals'
|
||||
import { endpoint, latestConnectionMsg, useWsRequest } from '~/signals'
|
||||
|
||||
const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
|
||||
<div class="stat flex-1 place-items-center">
|
||||
@ -130,6 +130,10 @@ export default () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer rounded-box mx-auto mt-4 block bg-neutral p-4 text-center text-lg font-bold text-neutral-content">
|
||||
{endpoint()?.url}
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user