mirror of
https://github.com/Buriburizaem0n/nezha-dash-v1.git
synced 2026-02-06 13:40:09 +00:00
feat: init settings
This commit is contained in:
hamster1963
@@ -5,14 +5,15 @@ import ServerCardInline from "@/components/ServerCardInline"
|
||||
import ServerOverview from "@/components/ServerOverview"
|
||||
import { ServiceTracker } from "@/components/ServiceTracker"
|
||||
import { Loader } from "@/components/loading/Loader"
|
||||
import useFilter from "@/hooks/use-filter"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { useStatus } from "@/hooks/use-status"
|
||||
import { useWebSocketContext } from "@/hooks/use-websocket-context"
|
||||
import { fetchServerGroup } from "@/lib/nezha-api"
|
||||
import { cn, formatNezhaInfo } from "@/lib/utils"
|
||||
import { NezhaWebsocketResponse } from "@/types/nezha-api"
|
||||
import { ServerGroup } from "@/types/nezha-api"
|
||||
import { ChartBarSquareIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
|
||||
import { ChartBarSquareIcon, CogIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
@@ -26,10 +27,10 @@ export default function Servers() {
|
||||
})
|
||||
const { lastMessage, connected } = useWebSocketContext()
|
||||
const { status } = useStatus()
|
||||
const { filter } = useFilter()
|
||||
const [showServices, setShowServices] = useState<string>("0")
|
||||
const [showMap, setShowMap] = useState<string>("0")
|
||||
const [inline, setInline] = useState<string>("0")
|
||||
const [settingsOpen, setSettingsOpen] = useState<boolean>(false)
|
||||
const [currentGroup, setCurrentGroup] = useState<string>("All")
|
||||
|
||||
useEffect(() => {
|
||||
@@ -136,26 +137,6 @@ export default function Servers() {
|
||||
[status].includes(formatNezhaInfo(nezhaWsData.now, server).online ? "online" : "offline"),
|
||||
)
|
||||
|
||||
if (filter) {
|
||||
filteredServers.sort((a, b) => {
|
||||
if (!formatNezhaInfo(nezhaWsData.now, a).online && formatNezhaInfo(nezhaWsData.now, b).online)
|
||||
return 1
|
||||
if (formatNezhaInfo(nezhaWsData.now, a).online && !formatNezhaInfo(nezhaWsData.now, b).online)
|
||||
return -1
|
||||
if (
|
||||
!formatNezhaInfo(nezhaWsData.now, a).online &&
|
||||
!formatNezhaInfo(nezhaWsData.now, b).online
|
||||
)
|
||||
return 0
|
||||
return (
|
||||
formatNezhaInfo(nezhaWsData.now, b).state.net_in_speed +
|
||||
formatNezhaInfo(nezhaWsData.now, b).state.net_out_speed -
|
||||
(formatNezhaInfo(nezhaWsData.now, a).state.net_in_speed +
|
||||
formatNezhaInfo(nezhaWsData.now, a).state.net_out_speed)
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-5xl px-0">
|
||||
<ServerOverview
|
||||
@@ -167,50 +148,110 @@ export default function Servers() {
|
||||
upSpeed={upSpeed}
|
||||
downSpeed={downSpeed}
|
||||
/>
|
||||
<section className="flex mt-6 items-center gap-2 w-full overflow-hidden">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowMap(showMap === "0" ? "1" : "0")
|
||||
}}
|
||||
className={cn(
|
||||
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
|
||||
{
|
||||
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showMap === "1",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<MapIcon className="size-[13px]" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowServices(showServices === "0" ? "1" : "0")
|
||||
localStorage.setItem("showServices", showServices === "0" ? "1" : "0")
|
||||
}}
|
||||
className={cn(
|
||||
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
|
||||
{
|
||||
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showServices === "1",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<ChartBarSquareIcon className="size-[13px]" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setInline(inline === "0" ? "1" : "0")
|
||||
localStorage.setItem("inline", inline === "0" ? "1" : "0")
|
||||
}}
|
||||
className={cn(
|
||||
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
|
||||
{
|
||||
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": inline === "1",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<ViewColumnsIcon className="size-[13px]" />
|
||||
</button>
|
||||
<GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={setCurrentGroup} />
|
||||
</section>
|
||||
<div className="flex mt-6 items-center justify-between gap-2">
|
||||
<section className="flex items-center gap-2 w-full overflow-hidden">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowMap(showMap === "0" ? "1" : "0")
|
||||
}}
|
||||
className={cn(
|
||||
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
|
||||
{
|
||||
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showMap === "1",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<MapIcon className="size-[13px]" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowServices(showServices === "0" ? "1" : "0")
|
||||
localStorage.setItem("showServices", showServices === "0" ? "1" : "0")
|
||||
}}
|
||||
className={cn(
|
||||
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
|
||||
{
|
||||
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showServices === "1",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<ChartBarSquareIcon className="size-[13px]" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setInline(inline === "0" ? "1" : "0")
|
||||
localStorage.setItem("inline", inline === "0" ? "1" : "0")
|
||||
}}
|
||||
className={cn(
|
||||
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
|
||||
{
|
||||
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": inline === "1",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<ViewColumnsIcon className="size-[13px]" />
|
||||
</button>
|
||||
<GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={setCurrentGroup} />
|
||||
</section>
|
||||
<Popover onOpenChange={setSettingsOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
"rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-stone-800 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ",
|
||||
{
|
||||
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-stone-700": settingsOpen,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<CogIcon className="size-[13px]" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="py-2 px-2 w-fit max-w-56 rounded-[8px]">
|
||||
<div className="flex flex-col gap-2">
|
||||
<section className="flex flex-col gap-1">
|
||||
<Label className=" text-stone-500 text-xs">Sort by</Label>
|
||||
<section className="flex items-center gap-1 flex-wrap">
|
||||
<button className="rounded-[5px] text-[11px] w-fit px-1 py-0.5 cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-black dark:bg-stone-600 text-white transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
|
||||
Default
|
||||
</button>
|
||||
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
|
||||
CPU
|
||||
</button>
|
||||
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
|
||||
Mem
|
||||
</button>
|
||||
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
|
||||
Stg
|
||||
</button>
|
||||
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
|
||||
Up
|
||||
</button>
|
||||
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
|
||||
Down
|
||||
</button>
|
||||
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
|
||||
Up Total
|
||||
</button>
|
||||
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
|
||||
Down Total
|
||||
</button>
|
||||
</section>
|
||||
</section>
|
||||
<section className="flex flex-col gap-1">
|
||||
<Label className=" text-stone-500 text-xs">Sort order</Label>
|
||||
<section className="flex items-center gap-1">
|
||||
<button className="rounded-[5px] text-[11px] w-fit px-1 py-0.5 cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-black dark:bg-stone-600 text-white transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
|
||||
Asc
|
||||
</button>
|
||||
<button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] ">
|
||||
Desc
|
||||
</button>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
{showMap === "1" && (
|
||||
<GlobalMap now={nezhaWsData.now} serverList={nezhaWsData?.servers || []} />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user