External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 23:47:13 +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

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

@ -16,7 +16,7 @@ import {
SidebarTrigger, SidebarTrigger,
} from "@/components/ui/sidebar"; } from "@/components/ui/sidebar";
import { Button } from "@/components/ui/button"; 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 { import {
Card, Card,
CardContent, CardContent,
@ -55,7 +55,7 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import Cookies from "js-cookie";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import axios from 'axios'; import axios from 'axios';
@ -70,6 +70,22 @@ export default function Dashboard() {
const [maxPage, setMaxPage] = useState(1); const [maxPage, setMaxPage] = useState(1);
const [applications, setApplications] = useState([]); const [applications, setApplications] = useState([]);
const [servers, setServers] = 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 () => { const add = async () => {
try { try {
@ -142,20 +158,29 @@ export default function Dashboard() {
<div className="pl-4 pr-4"> <div className="pl-4 pr-4">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-2xl font-semibold">Your Applications</span> <span className="text-2xl font-semibold">Your Applications</span>
{servers.length === 0 ? ( <div className="flex gap-2">
<p className="text-muted-foreground">You must first add a server.</p> <Button
) : ( variant="outline"
<AlertDialog> size="icon"
<AlertDialogTrigger asChild> onClick={toggleLayout}
<Button variant="outline" size="icon"> title={isGridLayout ? "Switch to list view" : "Switch to grid view"}
<Plus /> >
</Button> {isGridLayout ? <List className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}
</AlertDialogTrigger> </Button>
<AlertDialogContent> {servers.length === 0 ? (
<AlertDialogHeader> <p className="text-muted-foreground">You must first add a server.</p>
<AlertDialogTitle>Add an application</AlertDialogTitle> ) : (
<AlertDialogDescription> <AlertDialog>
<div className="space-y-4 pt-4"> <AlertDialogTrigger asChild>
<Button variant="outline" size="icon">
<Plus />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Add an application</AlertDialogTitle>
<AlertDialogDescription>
<div className="space-y-4 pt-4">
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label>Name</Label> <Label>Name</Label>
<Input placeholder="e.g. Portainer" onChange={(e) => setName(e.target.value)}/> <Input placeholder="e.g. Portainer" onChange={(e) => setName(e.target.value)}/>
@ -191,41 +216,50 @@ export default function Dashboard() {
<Label>Local URL <span className="text-stone-600">(optional)</span></Label> <Label>Local URL <span className="text-stone-600">(optional)</span></Label>
<Input placeholder="http://localhost:3000" onChange={(e) => setLocalURL(e.target.value)}/> <Input placeholder="http://localhost:3000" onChange={(e) => setLocalURL(e.target.value)}/>
</div> </div>
</div> </div>
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogCancel>Cancel</AlertDialogCancel>
<Button onClick={add} disabled={!name || !publicURL || !serverId}> <Button onClick={add} disabled={!name || !publicURL || !serverId}>
Add Add
</Button> </Button>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
)} )}
</div>
</div> </div>
<br /> <br />
{applications.map((app) => ( <div className={isGridLayout ?
<Card key={app.id} className="w-full mb-4"> "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" :
<CardHeader> "space-y-4"}>
<div className="flex items-center justify-between w-full"> {applications.map((app) => (
<div className="flex items-center"> <Card
<div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md"> key={app.id}
{app.icon ? ( className={isGridLayout ?
<img src={app.icon} alt={app.name} className="w-full h-full object-contain rounded-md" /> "h-full flex flex-col justify-between" :
) : ( "w-full mb-4"}
<span className="text-gray-500 text-xs">Image</span> >
)} <CardHeader>
<div className="flex items-center justify-between w-full">
<div className="flex items-center">
<div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
{app.icon ? (
<img src={app.icon} alt={app.name} className="w-full h-full object-contain rounded-md" />
) : (
<span className="text-gray-500 text-xs">Image</span>
)}
</div>
<div className="ml-4">
<CardTitle className="text-2xl font-bold">{app.name}</CardTitle>
<CardDescription className="text-md">
{app.description}<br />
Server: {app.server || 'No server'}
</CardDescription>
</div>
</div> </div>
<div className="ml-4"> <div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
<CardTitle className="text-2xl font-bold">{app.name}</CardTitle>
<CardDescription className="text-md">
{app.description}<br />
Server: {app.server || 'No server'}
</CardDescription>
</div>
</div>
<div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
<div className="flex flex-col space-y-2 flex-grow"> <div className="flex flex-col space-y-2 flex-grow">
<Button <Button
@ -261,6 +295,7 @@ export default function Dashboard() {
</CardHeader> </CardHeader>
</Card> </Card>
))} ))}
</div>
<div className="pt-4"> <div className="pt-4">
<Pagination> <Pagination>
<PaginationContent> <PaginationContent>

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

@ -16,7 +16,7 @@ import {
SidebarTrigger, SidebarTrigger,
} from "@/components/ui/sidebar" } from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button" 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 { import {
Card, Card,
CardContent, CardContent,
@ -54,13 +54,13 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select" } from "@/components/ui/select"
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip" } from "@/components/ui/tooltip"
import Cookies from "js-cookie";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import axios from 'axios'; import axios from 'axios';
@ -69,10 +69,25 @@ export default function Dashboard() {
const [os, setOs] = useState(""); const [os, setOs] = useState("");
const [ip, setIp] = useState(""); const [ip, setIp] = useState("");
const [url, setUrl] = useState(""); const [url, setUrl] = useState("");
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [maxPage, setMaxPage] = useState(1); const [maxPage, setMaxPage] = useState(1);
const [servers, setServers] = 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 () => { const add = async () => {
try { try {
@ -140,136 +155,169 @@ export default function Dashboard() {
</div> </div>
</header> </header>
<div className="pl-4 pr-4"> <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> <span className="text-2xl font-semibold">Your Servers</span>
<AlertDialog> <div className="flex gap-2">
<AlertDialogTrigger asChild> <TooltipProvider>
<Button variant="outline" size="icon"> <Tooltip>
<Plus /> <TooltipTrigger asChild>
</Button> <Button
</AlertDialogTrigger> variant="outline"
<AlertDialogContent> size="icon"
<AlertDialogHeader> onClick={toggleLayout}
<AlertDialogTitle>Add an server</AlertDialogTitle> >
<AlertDialogDescription> {isGridLayout ? (
<div className="space-y-4 pt-4"> <List className="h-4 w-4" />
<div className="grid w-full items-center gap-1.5"> ) : (
<Label htmlFor="name">Name</Label> <LayoutGrid className="h-4 w-4" />
<Input id="name" type="text" placeholder="e.g. Server1" onChange={(e) => setName(e.target.value)}/> )}
</Button>
</TooltipTrigger>
<TooltipContent>
{isGridLayout ?
"Switch to list view" :
"Switch to grid view"}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline" size="icon">
<Plus />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Add an server</AlertDialogTitle>
<AlertDialogDescription>
<div className="space-y-4 pt-4">
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="name">Name</Label>
<Input id="name" type="text" placeholder="e.g. Server1" onChange={(e) => setName(e.target.value)}/>
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="description">Operating System <span className="text-stone-600">(optional)</span></Label>
<Select onValueChange={(value) => setOs(value)}>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select OS" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Windows">Windows</SelectItem>
<SelectItem value="Linux">Linux</SelectItem>
<SelectItem value="MacOS">MacOS</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="icon">IP Adress <span className="text-stone-600">(optional)</span></Label>
<Input id="icon" type="text" placeholder="e.g. 192.168.100.2" onChange={(e) => setIp(e.target.value)}/>
</div>
<div className="grid w-full items-center gap-1.5">
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Label htmlFor="publicURL">Management URL <span className="text-stone-600">(optional)</span></Label>
</TooltipTrigger>
<TooltipContent>
Link to a web interface (e.g. Proxmox or Portainer) with which the server can be managed
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Input id="publicURL" type="text" placeholder="e.g. https://proxmox.server1.com" onChange={(e) => setUrl(e.target.value)}/>
</div>
</div> </div>
<div className="grid w-full items-center gap-1.5"> </AlertDialogDescription>
<Label htmlFor="description">Operating System <span className="text-stone-600">(optional)</span></Label> </AlertDialogHeader>
<Select onValueChange={(value) => setOs(value)}> <AlertDialogFooter>
<SelectTrigger className="w-full"> <AlertDialogCancel>Cancel</AlertDialogCancel>
<SelectValue placeholder="Select OS" /> <Button onClick={add}>Add</Button>
</SelectTrigger> </AlertDialogFooter>
<SelectContent> </AlertDialogContent>
<SelectItem value="Windows">Windows</SelectItem> </AlertDialog>
<SelectItem value="Linux">Linux</SelectItem> </div>
<SelectItem value="MacOS">MacOS</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="icon">IP Adress <span className="text-stone-600">(optional)</span></Label>
<Input id="icon" type="text" placeholder="e.g. 192.168.100.2" onChange={(e) => setIp(e.target.value)}/>
</div>
<div className="grid w-full items-center gap-1.5">
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Label htmlFor="publicURL">Management URL <span className="text-stone-600">(optional)</span></Label>
</TooltipTrigger>
<TooltipContent>
Link to a web interface (e.g. Proxmox or Portainer) with which the server can be managed
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Input id="publicURL" type="text" placeholder="e.g. https://proxmox.server1.com" onChange={(e) => setUrl(e.target.value)}/>
</div>
</div>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button onClick={add}>Add</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div> </div>
<br /> <br />
{servers.map((server) => ( <div className={isGridLayout ?
<Card key={server.id} className="w-full mb-4"> "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" :
<CardHeader> "space-y-4"}>
<div className="flex items-center justify-between w-full"> {servers.map((server) => (
<div className="flex items-center"> <Card
<div className="ml-4"> key={server.id}
<CardTitle className="text-2xl font-bold">{server.name}</CardTitle> className={isGridLayout ?
<CardDescription className="text-sm space-y-1 mt-1"> "h-full flex flex-col justify-between" :
<div className="flex items-center gap-2 text-foreground/80"> "w-full mb-4"}
<MonitorCog className="h-4 w-4 text-muted-foreground" /> >
<span>OS: {server.os || '-'}</span> <CardHeader>
</div> <div className="flex items-center justify-between w-full">
<div className="flex items-center gap-2 text-foreground/80"> <div className="flex items-center">
<FileDigit className="h-4 w-4 text-muted-foreground" /> <div className="ml-4">
<span>IP: {server.ip || 'Nicht angegeben'}</span> <CardTitle className="text-2xl font-bold">{server.name}</CardTitle>
</div> <CardDescription className="text-sm space-y-1 mt-1">
</CardDescription> <div className="flex items-center gap-2 text-foreground/80">
<MonitorCog className="h-4 w-4 text-muted-foreground" />
<span>OS: {server.os || '-'}</span>
</div>
<div className="flex items-center gap-2 text-foreground/80">
<FileDigit className="h-4 w-4 text-muted-foreground" />
<span>IP: {server.ip || 'Nicht angegeben'}</span>
</div>
</CardDescription>
</div>
</div>
<div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
<div className="flex items-center gap-2 w-full">
<div className="flex flex-col space-y-2 flex-grow">
{server.url && (
<Button
variant="outline"
className="gap-2 w-full"
onClick={() => window.open(server.url, "_blank")}
>
<Link className="h-4 w-4" />
Open Management URL
</Button>
)}
</div>
<Button
variant="destructive"
size="icon"
className="w-10"
onClick={() => deleteApplication(server.id)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div> </div>
</div> </div>
<div className="flex flex-col items-end justify-start space-y-2 w-[270px]"> </CardHeader>
<div className="flex items-center gap-2 w-full"> </Card>
<div className="flex flex-col space-y-2 flex-grow"> ))}
{server.url && ( </div>
<Button
variant="outline"
className="gap-2 w-full"
onClick={() => window.open(server.url, "_blank")}
>
<Link className="h-4 w-4" />
Open Management URL
</Button>
)}
</div>
<Button
variant="destructive"
size="icon"
className="w-10"
onClick={() => deleteApplication(server.id)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
</div>
</CardHeader>
</Card>
))}
<div className="pt-4"> <div className="pt-4">
<Pagination> <Pagination>
<PaginationContent> <PaginationContent>
<PaginationItem> <PaginationItem>
<PaginationPrevious <PaginationPrevious
href="#" href="#"
onClick={handlePrevious} onClick={handlePrevious}
isActive={currentPage > 1} isActive={currentPage > 1}
/> />
</PaginationItem> </PaginationItem>
<PaginationItem> <PaginationItem>
<PaginationLink isActive>{currentPage}</PaginationLink> <PaginationLink isActive>{currentPage}</PaginationLink>
</PaginationItem> </PaginationItem>
<PaginationItem> <PaginationItem>
<PaginationNext <PaginationNext
href="#" href="#"
onClick={handleNext} onClick={handleNext}
isActive={currentPage < maxPage} isActive={currentPage < maxPage}
/> />
</PaginationItem> </PaginationItem>
</PaginationContent> </PaginationContent>
</Pagination> </Pagination>
</div> </div>
</div> </div>
</SidebarInset> </SidebarInset>
</SidebarProvider> </SidebarProvider>