mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 09:31:55 +08:00
feat: sort provider
This commit is contained in:
hamster1963
parent
9551d46800
commit
6e9f1f11af
27
src/context/sort-context.ts
Normal file
27
src/context/sort-context.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { createContext } from "react"
|
||||
|
||||
export type SortType = "default" | "cpu" | "mem" | "up" | "down" | "up total" | "down total"
|
||||
|
||||
export const SORT_TYPES: SortType[] = [
|
||||
"default",
|
||||
"cpu",
|
||||
"mem",
|
||||
"up",
|
||||
"down",
|
||||
"up total",
|
||||
"down total",
|
||||
]
|
||||
|
||||
export type SortOrder = "asc" | "desc"
|
||||
|
||||
export const SORT_ORDERS: SortOrder[] = [ "desc","asc"]
|
||||
|
||||
|
||||
export interface SortContextType {
|
||||
sortType: SortType
|
||||
sortOrder: SortOrder
|
||||
setSortType: (sortType: SortType) => void
|
||||
setSortOrder: (sortOrder: SortOrder) => void
|
||||
}
|
||||
|
||||
export const SortContext = createContext<SortContextType | undefined>(undefined)
|
||||
14
src/context/sort-provider.tsx
Normal file
14
src/context/sort-provider.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { ReactNode, useState } from "react"
|
||||
|
||||
import { SortContext, SortOrder, SortType } from "./sort-context"
|
||||
|
||||
export function SortProvider({ children }: { children: ReactNode }) {
|
||||
const [sortType, setSortType] = useState<SortType>("default")
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>("desc")
|
||||
|
||||
return (
|
||||
<SortContext.Provider value={{ sortType, setSortType, sortOrder, setSortOrder }}>
|
||||
{children}
|
||||
</SortContext.Provider>
|
||||
)
|
||||
}
|
||||
10
src/hooks/use-sort.tsx
Normal file
10
src/hooks/use-sort.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { SortContext } from "@/context/sort-context"
|
||||
import { useContext } from "react"
|
||||
|
||||
export function useSort() {
|
||||
const context = useContext(SortContext)
|
||||
if (context === undefined) {
|
||||
throw new Error("useStatus must be used within a SortProvider")
|
||||
}
|
||||
return context
|
||||
}
|
||||
33
src/main.tsx
33
src/main.tsx
@ -7,6 +7,7 @@ import { Toaster } from "sonner"
|
||||
import App from "./App"
|
||||
import { ThemeProvider } from "./components/ThemeProvider"
|
||||
import { MotionProvider } from "./components/motion/motion-provider"
|
||||
import { SortProvider } from "./context/sort-provider"
|
||||
import { StatusProvider } from "./context/status-provider"
|
||||
import { TooltipProvider } from "./context/tooltip-provider"
|
||||
import { WebSocketProvider } from "./context/websocket-provider"
|
||||
@ -22,21 +23,23 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<WebSocketProvider url="/api/v1/ws/server">
|
||||
<StatusProvider>
|
||||
<TooltipProvider>
|
||||
<App />
|
||||
<Toaster
|
||||
duration={1000}
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
default:
|
||||
"w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
|
||||
},
|
||||
}}
|
||||
position="top-center"
|
||||
className={"flex items-center justify-center"}
|
||||
/>
|
||||
<ReactQueryDevtools />
|
||||
</TooltipProvider>
|
||||
<SortProvider>
|
||||
<TooltipProvider>
|
||||
<App />
|
||||
<Toaster
|
||||
duration={1000}
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
default:
|
||||
"w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
|
||||
},
|
||||
}}
|
||||
position="top-center"
|
||||
className={"flex items-center justify-center"}
|
||||
/>
|
||||
<ReactQueryDevtools />
|
||||
</TooltipProvider>
|
||||
</SortProvider>
|
||||
</StatusProvider>
|
||||
</WebSocketProvider>
|
||||
</QueryClientProvider>
|
||||
|
||||
@ -7,6 +7,8 @@ import { ServiceTracker } from "@/components/ServiceTracker"
|
||||
import { Loader } from "@/components/loading/Loader"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { forEachSortType, SORT_ORDERS, SORT_TYPES } from "@/context/sort-context"
|
||||
import { useSort } from "@/hooks/use-sort"
|
||||
import { useStatus } from "@/hooks/use-status"
|
||||
import { useWebSocketContext } from "@/hooks/use-websocket-context"
|
||||
import { fetchServerGroup } from "@/lib/nezha-api"
|
||||
@ -21,6 +23,7 @@ import { toast } from "sonner"
|
||||
|
||||
export default function Servers() {
|
||||
const { t } = useTranslation()
|
||||
const { sortType,sortOrder,setSortOrder,setSortType } = useSort()
|
||||
const { data: groupData } = useQuery({
|
||||
queryKey: ["server-group"],
|
||||
queryFn: () => fetchServerGroup(),
|
||||
@ -211,41 +214,39 @@ export default function Servers() {
|
||||
<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>
|
||||
{SORT_TYPES.map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => setSortType(type)}
|
||||
className={cn(
|
||||
"rounded-[5px] text-[11px] 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)] ",
|
||||
{
|
||||
"bg-black text-white": sortType === type,
|
||||
},
|
||||
)}
|
||||
>
|
||||
{type}
|
||||
</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>
|
||||
{SORT_ORDERS.map((order) => (
|
||||
<button
|
||||
key={order}
|
||||
onClick={() => setSortOrder(order)}
|
||||
className={cn(
|
||||
"rounded-[5px] text-[11px] 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)] ",
|
||||
{
|
||||
"bg-black text-white": sortOrder === order,
|
||||
},
|
||||
)}
|
||||
>
|
||||
{order}
|
||||
</button>
|
||||
))}
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user