External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 15:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Grid View/Switch View

Browse Source
This commit is contained in:
headlessdev 2025-04-12 15:42:32 +02:00
parent 56ce1b563a
commit 9de929cb1a
2 changed files with 258 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/dashboard/applications/Applications.tsx
View File

@ -16,7 +16,7 @@ import {
SidebarTrigger,
} from "@/components/ui/sidebar";
import { Button } from "@/components/ui/button";
import { Plus, Link, Home, Trash2 } from "lucide-react";
import { Plus, Link, Home, Trash2, LayoutGrid, List } from "lucide-react";
import {
Card,
CardContent,
@ -55,7 +55,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import Cookies from "js-cookie";
import { useState, useEffect } from "react";
import axios from 'axios';
@ -70,6 +70,22 @@ export default function Dashboard() {
const [maxPage, setMaxPage] = useState(1);
const [applications, setApplications] = useState([]);
const [servers, setServers] = useState([]);
const [isGridLayout, setIsGridLayout] = useState(false);
useEffect(() => {
const savedLayout = Cookies.get('layoutPreference');
setIsGridLayout(savedLayout === 'grid');
}, []);
const toggleLayout = () => {
const newLayout = !isGridLayout;
setIsGridLayout(newLayout);
Cookies.set('layoutPreference', newLayout ? 'grid' : 'standard', {
expires: 365,
path: '/',
sameSite: 'strict'
});
};
const add = async () => {
try {
@ -142,6 +158,15 @@ export default function Dashboard() {
<div className="pl-4 pr-4">
<div className="flex justify-between items-center">
<span className="text-2xl font-semibold">Your Applications</span>
<div className="flex gap-2">
<Button
variant="outline"
size="icon"
onClick={toggleLayout}
title={isGridLayout ? "Switch to list view" : "Switch to grid view"}
>
{isGridLayout ? <List className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}
</Button>
{servers.length === 0 ? (
<p className="text-muted-foreground">You must first add a server.</p>
) : (
@ -204,9 +229,18 @@ export default function Dashboard() {
</AlertDialog>
)}
</div>
</div>
<br />
<div className={isGridLayout ?
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" :
"space-y-4"}>
{applications.map((app) => (
<Card key={app.id} className="w-full mb-4">
<Card
key={app.id}
className={isGridLayout ?
"h-full flex flex-col justify-between" :
"w-full mb-4"}
>
<CardHeader>
<div className="flex items-center justify-between w-full">
<div className="flex items-center">
@ -261,6 +295,7 @@ export default function Dashboard() {
</CardHeader>
</Card>
))}
</div>
<div className="pt-4">
<Pagination>
<PaginationContent>

60
app/dashboard/servers/Servers.tsx
View File

@ -16,7 +16,7 @@ import {
SidebarTrigger,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Plus, Link, MonitorCog, FileDigit, Trash2 } from "lucide-react" // Importiere Icons
import { Plus, Link, MonitorCog, FileDigit, Trash2, LayoutGrid, List } from "lucide-react"
import {
Card,
CardContent,
@ -54,13 +54,13 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import {
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
import Cookies from "js-cookie";
import { useState, useEffect } from "react";
import axios from 'axios';
@ -69,10 +69,25 @@ export default function Dashboard() {
const [os, setOs] = useState("");
const [ip, setIp] = useState("");
const [url, setUrl] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [maxPage, setMaxPage] = useState(1);
const [servers, setServers] = useState([]);
const [isGridLayout, setIsGridLayout] = useState(false);
useEffect(() => {
const savedLayout = Cookies.get('layoutPreference');
setIsGridLayout(savedLayout === 'grid');
}, []);
const toggleLayout = () => {
const newLayout = !isGridLayout;
setIsGridLayout(newLayout);
Cookies.set('layoutPreference', newLayout ? 'grid' : 'standard', {
expires: 365,
path: '/',
sameSite: 'strict'
});
};
const add = async () => {
try {
@ -140,8 +155,31 @@ export default function Dashboard() {
</div>
</header>
<div className="pl-4 pr-4">
<div className="flex justify-between">
<div className="flex justify-between items-center">
<span className="text-2xl font-semibold">Your Servers</span>
<div className="flex gap-2">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="icon"
onClick={toggleLayout}
>
{isGridLayout ? (
<List className="h-4 w-4" />
) : (
<LayoutGrid className="h-4 w-4" />
)}
</Button>
</TooltipTrigger>
<TooltipContent>
{isGridLayout ?
"Switch to list view" :
"Switch to grid view"}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline" size="icon">
@ -197,9 +235,18 @@ export default function Dashboard() {
</AlertDialogContent>
</AlertDialog>
</div>
</div>
<br />
<div className={isGridLayout ?
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" :
"space-y-4"}>
{servers.map((server) => (
<Card key={server.id} className="w-full mb-4">
<Card
key={server.id}
className={isGridLayout ?
"h-full flex flex-col justify-between" :
"w-full mb-4"}
>
<CardHeader>
<div className="flex items-center justify-between w-full">
<div className="flex items-center">
@ -245,6 +292,7 @@ export default function Dashboard() {
</CardHeader>
</Card>
))}
</div>
<div className="pt-4">
<Pagination>
<PaginationContent>