m/cup
1
0
Fork 0
mirror of https://github.com/sergi0g/cup.git synced 2025-11-17 01:23:39 -05:00
Code Wiki Activity

Finished basic functionality for multiple servers in the backend.

Browse Source 
No special CLI or Liquid support yet and also no refresh support
This commit is contained in:
Sergio
2025-01-03 16:10:17 +02:00
parent aeeffaccba
commit c0c7f7c0e9
17 changed files with 328 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/src/App.tsx
View File

@@ -8,6 +8,7 @@ import { Data } from "./types";
import { theme } from "./theme";
import RefreshButton from "./components/RefreshButton";
import Search from "./components/Search";
import { Server } from "./components/Server";
const SORT_ORDER = [
"monitored_images",
@@ -40,15 +41,17 @@ function App() {
className={`bg-white shadow-sm dark:bg-${theme}-900 my-8 rounded-md`}
>
<dl className="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4">
{Object.entries(data.metrics).sort((a, b) => {
return SORT_ORDER.indexOf(a[0]) - SORT_ORDER.indexOf(b[0]);
}).map(([name]) => (
<Statistic
name={name as keyof typeof data.metrics}
metrics={data.metrics}
key={name}
/>
))}
{Object.entries(data.metrics)
.sort((a, b) => {
return SORT_ORDER.indexOf(a[0]) - SORT_ORDER.indexOf(b[0]);
})
.map(([name]) => (
<Statistic
name={name as keyof typeof data.metrics}
metrics={data.metrics}
key={name}
/>
))}
</dl>
</div>
<div
@@ -61,11 +64,27 @@ function App() {
<RefreshButton />
</div>
<Search onChange={setSearchQuery} />
<ul className={`dark:divide-${theme}-800 divide-y dark:text-white`}>
{data.images
.filter((image) => image.reference.includes(searchQuery))
.map((image) => (
<Image data={image} key={image.reference} />
<ul>
{Object.entries(
data.images.reduce(
(acc, image) => {
const server = image.server ?? "";
if (!acc[server]) acc[server] = [];
acc[server].push(image);
return acc;
},
{} as Record<string, typeof data.images>,
),
)
.sort()
.map(([server, images]) => (
<Server name={server} key={server}>
{images
.filter((image) => image.reference.includes(searchQuery))
.map((image) => (
<Image data={image} key={image.reference} />
))}
</Server>
))}
</ul>
</div>