This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
@@ -1,240 +1,273 @@
|
||||
import { Key } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { createApiKey, deleteApiKey, toggleApiKey } from "@/actions/admin-radio-api-keys";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
createApiKey,
|
||||
deleteApiKey,
|
||||
toggleApiKey,
|
||||
} from "@/actions/admin-radio-api-keys";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { Key } from "lucide-react";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export const metadata = { title: "Radio API Keys" };
|
||||
|
||||
type ApiKey = {
|
||||
id: bigint;
|
||||
name: string;
|
||||
key: string;
|
||||
allowedIps: string | null;
|
||||
rateLimit: number;
|
||||
lastUsedAt: Date | null;
|
||||
expiresAt: Date | null;
|
||||
isActive: boolean;
|
||||
createdAt: Date | null;
|
||||
id: bigint;
|
||||
name: string;
|
||||
key: string;
|
||||
allowedIps: string | null;
|
||||
rateLimit: number;
|
||||
lastUsedAt: Date | null;
|
||||
expiresAt: Date | null;
|
||||
isActive: boolean;
|
||||
createdAt: Date | null;
|
||||
};
|
||||
|
||||
function formatDate(d: Date | null): string {
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
}
|
||||
|
||||
function maskKey(key: string): string {
|
||||
return key.length > 8 ? `${key.slice(0, 8)}\u2026` : key;
|
||||
return key.length > 8 ? `${key.slice(0, 8)}\u2026` : key;
|
||||
}
|
||||
|
||||
export default async function AdminRadioApiKeysPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let keys: ApiKey[] = [];
|
||||
let dbError = false;
|
||||
let keys: ApiKey[] = [];
|
||||
let dbError = false;
|
||||
|
||||
try {
|
||||
keys = await prisma.radioApiKeys
|
||||
.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
key: true,
|
||||
allowedIps: true,
|
||||
rateLimit: true,
|
||||
lastUsedAt: true,
|
||||
expiresAt: true,
|
||||
isActive: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: [{ isActive: "desc" }, { id: "desc" }],
|
||||
take: 500,
|
||||
})
|
||||
.catch(() => {
|
||||
dbError = true;
|
||||
return [];
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
keys = [];
|
||||
}
|
||||
try {
|
||||
keys = await prisma.radioApiKeys
|
||||
.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
key: true,
|
||||
allowedIps: true,
|
||||
rateLimit: true,
|
||||
lastUsedAt: true,
|
||||
expiresAt: true,
|
||||
isActive: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: [{ isActive: "desc" }, { id: "desc" }],
|
||||
take: 500,
|
||||
})
|
||||
.catch(() => {
|
||||
dbError = true;
|
||||
return [];
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
keys = [];
|
||||
}
|
||||
|
||||
const total = keys.length;
|
||||
const activeCount = keys.filter((k) => k.isActive).length;
|
||||
const inactiveCount = total - activeCount;
|
||||
const total = keys.length;
|
||||
const activeCount = keys.filter((k) => k.isActive).length;
|
||||
const inactiveCount = total - activeCount;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/api-keys">{t("apiKeys")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/autodj">{t("autoDj")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/embed">{t("embed")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/points">{t("points")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/monitoring">{t("monitoring")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/api-keys">{t("apiKeys")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/autodj">{t("autoDj")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/embed">{t("embed")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/points">{t("points")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/monitoring">{t("monitoring")}</Link>
|
||||
</nav>
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Key size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("apiKeysForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("apiKeysForm.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Key size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("apiKeysForm.title")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("apiKeysForm.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dbError ? (
|
||||
<div className="admin-card" style={{ marginTop: "1rem" }}>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("apiKeysForm.dbError")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("apiKeysForm.totalKeys")} value={total} icon="\u{1F511}" />
|
||||
<StatusCard
|
||||
label={t("apiKeysForm.active")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{2705}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("apiKeysForm.inactive")}
|
||||
value={inactiveCount}
|
||||
state={inactiveCount > 0 ? "warn" : "neutral"}
|
||||
icon="\u{1F6AB}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
{dbError ? (
|
||||
<div className="admin-card" style={{ marginTop: "1rem" }}>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("apiKeysForm.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("apiKeysForm.totalKeys")}
|
||||
value={total}
|
||||
icon="\u{1F511}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("apiKeysForm.active")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{2705}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("apiKeysForm.inactive")}
|
||||
value={inactiveCount}
|
||||
state={inactiveCount > 0 ? "warn" : "neutral"}
|
||||
icon="\u{1F6AB}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>{t("apiKeysForm.generateKey")}</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("apiKeysForm.generateHint")}</p>
|
||||
<form action={createApiKey} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="new_name" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("apiKeysForm.name")}
|
||||
</label>
|
||||
<input
|
||||
id="new_name"
|
||||
name="name"
|
||||
placeholder={t("apiKeysForm.namePlaceholder")}
|
||||
required
|
||||
maxLength={255}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_rateLimit" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("apiKeysForm.rateLimit")}
|
||||
</label>
|
||||
<input
|
||||
id="new_rateLimit"
|
||||
name="rateLimit"
|
||||
type="number"
|
||||
min={0}
|
||||
defaultValue={300}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label htmlFor="new_allowedIps" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("apiKeysForm.allowedIps")}
|
||||
</label>
|
||||
<input
|
||||
id="new_allowedIps"
|
||||
name="allowedIps"
|
||||
placeholder={t("apiKeysForm.allowedIpsPlaceholder")}
|
||||
maxLength={255}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("apiKeysForm.generate")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section className="mt-6">
|
||||
<h2>{t("apiKeysForm.generateKey")}</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("apiKeysForm.generateHint")}
|
||||
</p>
|
||||
<form action={createApiKey} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_name"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("apiKeysForm.name")}
|
||||
</label>
|
||||
<input
|
||||
id="new_name"
|
||||
name="name"
|
||||
placeholder={t("apiKeysForm.namePlaceholder")}
|
||||
required
|
||||
maxLength={255}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_rateLimit"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("apiKeysForm.rateLimit")}
|
||||
</label>
|
||||
<input
|
||||
id="new_rateLimit"
|
||||
name="rateLimit"
|
||||
type="number"
|
||||
min={0}
|
||||
defaultValue={300}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label
|
||||
htmlFor="new_allowedIps"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("apiKeysForm.allowedIps")}
|
||||
</label>
|
||||
<input
|
||||
id="new_allowedIps"
|
||||
name="allowedIps"
|
||||
placeholder={t("apiKeysForm.allowedIpsPlaceholder")}
|
||||
maxLength={255}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("apiKeysForm.generate")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("apiKeysForm.existingKeys", { count: total })}</h2>
|
||||
{total === 0 ? (
|
||||
<div className="admin-empty">{t("apiKeysForm.noKeys")}</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{t("apiKeysForm.colName")}</th>
|
||||
<th>{t("apiKeysForm.colKey")}</th>
|
||||
<th>{t("apiKeysForm.colAllowedIps")}</th>
|
||||
<th>{t("apiKeysForm.colRateLimit")}</th>
|
||||
<th>{t("apiKeysForm.colLastUsed")}</th>
|
||||
<th>{t("apiKeysForm.colExpires")}</th>
|
||||
<th>{t("apiKeysForm.colStatus")}</th>
|
||||
<th>{t("apiKeysForm.colActions")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{keys.map((k) => (
|
||||
<tr key={String(k.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{String(k.id)}
|
||||
</td>
|
||||
<td>{k.name}</td>
|
||||
<td>
|
||||
<code title={t("apiKeysForm.maskedHint")}>{maskKey(k.key)}</code>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{k.allowedIps || t("apiKeysForm.any")}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{k.rateLimit}/min
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(k.lastUsedAt)}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(k.expiresAt)}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{k.isActive ? t("apiKeysForm.activeLabel") : t("apiKeysForm.inactiveLabel")}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: "inline-flex", gap: "0.4rem" }}>
|
||||
<form action={toggleApiKey}>
|
||||
<input type="hidden" name="id" value={String(k.id)} />
|
||||
<button type="submit" className="btn">
|
||||
{k.isActive ? t("apiKeysForm.deactivate") : t("apiKeysForm.activate")}
|
||||
</button>
|
||||
</form>
|
||||
<form action={deleteApiKey}>
|
||||
<input type="hidden" name="id" value={String(k.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("apiKeysForm.delete")}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("apiKeysForm.existingKeys", { count: total })}
|
||||
</h2>
|
||||
{total === 0 ? (
|
||||
<div className="admin-empty">{t("apiKeysForm.noKeys")}</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{t("apiKeysForm.colName")}</th>
|
||||
<th>{t("apiKeysForm.colKey")}</th>
|
||||
<th>{t("apiKeysForm.colAllowedIps")}</th>
|
||||
<th>{t("apiKeysForm.colRateLimit")}</th>
|
||||
<th>{t("apiKeysForm.colLastUsed")}</th>
|
||||
<th>{t("apiKeysForm.colExpires")}</th>
|
||||
<th>{t("apiKeysForm.colStatus")}</th>
|
||||
<th>{t("apiKeysForm.colActions")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{keys.map((k) => (
|
||||
<tr key={String(k.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{String(k.id)}
|
||||
</td>
|
||||
<td>{k.name}</td>
|
||||
<td>
|
||||
<code title={t("apiKeysForm.maskedHint")}>
|
||||
{maskKey(k.key)}
|
||||
</code>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{k.allowedIps || t("apiKeysForm.any")}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{k.rateLimit}/min
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(k.lastUsedAt)}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(k.expiresAt)}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{k.isActive
|
||||
? t("apiKeysForm.activeLabel")
|
||||
: t("apiKeysForm.inactiveLabel")}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: "inline-flex", gap: "0.4rem" }}>
|
||||
<form action={toggleApiKey}>
|
||||
<input type="hidden" name="id" value={String(k.id)} />
|
||||
<button type="submit" className="btn">
|
||||
{k.isActive
|
||||
? t("apiKeysForm.deactivate")
|
||||
: t("apiKeysForm.activate")}
|
||||
</button>
|
||||
</form>
|
||||
<form action={deleteApiKey}>
|
||||
<input type="hidden" name="id" value={String(k.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("apiKeysForm.delete")}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+325
-257
@@ -1,284 +1,352 @@
|
||||
import Link from "next/link";
|
||||
import { Disc3 } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { createTrack, deleteTrack, toggleTrack } from "@/actions/admin-radio-autodj";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
createTrack,
|
||||
deleteTrack,
|
||||
toggleTrack,
|
||||
} from "@/actions/admin-radio-autodj";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { Disc3 } from "lucide-react";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export const metadata = { title: "Radio AutoDJ" };
|
||||
|
||||
type Track = {
|
||||
id: bigint;
|
||||
title: string;
|
||||
artist: string | null;
|
||||
album: string | null;
|
||||
artworkUrl: string | null;
|
||||
duration: number | null;
|
||||
playCount: number;
|
||||
lastPlayedAt: Date | null;
|
||||
isActive: boolean;
|
||||
sortOrder: number;
|
||||
id: bigint;
|
||||
title: string;
|
||||
artist: string | null;
|
||||
album: string | null;
|
||||
artworkUrl: string | null;
|
||||
duration: number | null;
|
||||
playCount: number;
|
||||
lastPlayedAt: Date | null;
|
||||
isActive: boolean;
|
||||
sortOrder: number;
|
||||
};
|
||||
|
||||
function formatDuration(seconds: number | null): string {
|
||||
if (seconds == null || seconds < 0) return "\u2014";
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = seconds % 60;
|
||||
return `${m}:${String(s).padStart(2, "0")}`;
|
||||
if (seconds == null || seconds < 0) return "\u2014";
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = seconds % 60;
|
||||
return `${m}:${String(s).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function formatDate(d: Date | null): string {
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
}
|
||||
|
||||
export default async function AdminRadioAutoDjPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let tracks: Track[] = [];
|
||||
let dbError = false;
|
||||
let tracks: Track[] = [];
|
||||
let dbError = false;
|
||||
|
||||
try {
|
||||
tracks = await prisma.radioAutoDjPlaylist
|
||||
.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
artist: true,
|
||||
album: true,
|
||||
artworkUrl: true,
|
||||
duration: true,
|
||||
playCount: true,
|
||||
lastPlayedAt: true,
|
||||
isActive: true,
|
||||
sortOrder: true,
|
||||
},
|
||||
orderBy: [{ sortOrder: "asc" }, { title: "asc" }],
|
||||
})
|
||||
.catch(() => {
|
||||
dbError = true;
|
||||
return [];
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
tracks = [];
|
||||
}
|
||||
try {
|
||||
tracks = await prisma.radioAutoDjPlaylist
|
||||
.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
artist: true,
|
||||
album: true,
|
||||
artworkUrl: true,
|
||||
duration: true,
|
||||
playCount: true,
|
||||
lastPlayedAt: true,
|
||||
isActive: true,
|
||||
sortOrder: true,
|
||||
},
|
||||
orderBy: [{ sortOrder: "asc" }, { title: "asc" }],
|
||||
})
|
||||
.catch(() => {
|
||||
dbError = true;
|
||||
return [];
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
tracks = [];
|
||||
}
|
||||
|
||||
const activeCount = tracks.filter((t) => t.isActive).length;
|
||||
const inactiveCount = tracks.length - activeCount;
|
||||
const activeCount = tracks.filter((t) => t.isActive).length;
|
||||
const inactiveCount = tracks.length - activeCount;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/autodj">{t("autoDj")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/autodj">{t("autoDj")}</Link>
|
||||
</nav>
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Disc3 size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("autoDjForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("autoDjForm.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Disc3 size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("autoDjForm.title")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("autoDjForm.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("autoDjForm.dbError")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("autoDjForm.tracks")} value={tracks.length} icon="\u{1F3B5}" />
|
||||
<StatusCard
|
||||
label={t("autoDjForm.active")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{25B6}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("autoDjForm.inactive")}
|
||||
value={inactiveCount}
|
||||
state={inactiveCount > 0 ? "warn" : "neutral"}
|
||||
icon="\u{23F8}\uFE0F"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("autoDjForm.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("autoDjForm.tracks")}
|
||||
value={tracks.length}
|
||||
icon="\u{1F3B5}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("autoDjForm.active")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{25B6}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("autoDjForm.inactive")}
|
||||
value={inactiveCount}
|
||||
state={inactiveCount > 0 ? "warn" : "neutral"}
|
||||
icon="\u{23F8}\uFE0F"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("autoDjForm.addTrack")}</h2>
|
||||
<form action={createTrack} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="new_title" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("autoDjForm.title")}
|
||||
</label>
|
||||
<input
|
||||
id="new_title"
|
||||
name="title"
|
||||
placeholder={t("autoDjForm.titlePlaceholder")}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_artist" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("autoDjForm.artist")}
|
||||
</label>
|
||||
<input id="new_artist" name="artist" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_album" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("autoDjForm.album")}
|
||||
</label>
|
||||
<input id="new_album" name="album" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_artworkUrl" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("autoDjForm.artworkUrl")}
|
||||
</label>
|
||||
<input
|
||||
id="new_artworkUrl"
|
||||
name="artworkUrl"
|
||||
placeholder={t("autoDjForm.artworkUrlPlaceholder")}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_duration" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("autoDjForm.duration")}
|
||||
</label>
|
||||
<input
|
||||
id="new_duration"
|
||||
name="duration"
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder={t("autoDjForm.durationPlaceholder")}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_sortOrder" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("autoDjForm.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id="new_sortOrder"
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={0}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label style={{ display: "inline-flex", gap: "0.4rem", alignItems: "center" }}>
|
||||
<input type="checkbox" name="isActive" value="1" defaultChecked /> {t("autoDjForm.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("autoDjForm.addTrack")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("autoDjForm.addTrack")}</h2>
|
||||
<form action={createTrack} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_title"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.title")}
|
||||
</label>
|
||||
<input
|
||||
id="new_title"
|
||||
name="title"
|
||||
placeholder={t("autoDjForm.titlePlaceholder")}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_artist"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.artist")}
|
||||
</label>
|
||||
<input id="new_artist" name="artist" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_album"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.album")}
|
||||
</label>
|
||||
<input id="new_album" name="album" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_artworkUrl"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.artworkUrl")}
|
||||
</label>
|
||||
<input
|
||||
id="new_artworkUrl"
|
||||
name="artworkUrl"
|
||||
placeholder={t("autoDjForm.artworkUrlPlaceholder")}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_duration"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.duration")}
|
||||
</label>
|
||||
<input
|
||||
id="new_duration"
|
||||
name="duration"
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder={t("autoDjForm.durationPlaceholder")}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_sortOrder"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("autoDjForm.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id="new_sortOrder"
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={0}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
gap: "0.4rem",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isActive"
|
||||
value="1"
|
||||
defaultChecked
|
||||
/>{" "}
|
||||
{t("autoDjForm.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("autoDjForm.addTrack")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("autoDjForm.playlist", { count: tracks.length })}</h2>
|
||||
{tracks.length === 0 ? (
|
||||
<div className="admin-empty">{t("autoDjForm.noTracks")}</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("autoDjForm.colOrder")}</th>
|
||||
<th>{t("autoDjForm.colTitle")}</th>
|
||||
<th>{t("autoDjForm.colArtist")}</th>
|
||||
<th>{t("autoDjForm.colAlbum")}</th>
|
||||
<th>{t("autoDjForm.colDuration")}</th>
|
||||
<th>{t("autoDjForm.colPlays")}</th>
|
||||
<th>{t("autoDjForm.colLastPlayed")}</th>
|
||||
<th>{t("autoDjForm.colStatus")}</th>
|
||||
<th>{t("autoDjForm.colActions")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tracks.map((track) => (
|
||||
<tr key={String(track.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.sortOrder}
|
||||
</td>
|
||||
<td>
|
||||
<span className="inline-flex gap-2 items-center">
|
||||
{track.artworkUrl ? (
|
||||
<Image
|
||||
src={track.artworkUrl}
|
||||
alt=""
|
||||
width={32}
|
||||
height={32}
|
||||
style={{ borderRadius: 4, objectFit: "cover" }}
|
||||
unoptimized
|
||||
/>
|
||||
) : null}
|
||||
<strong>{track.title}</strong>
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.artist ?? "\u2014"}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.album ?? "\u2014"}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDuration(track.duration)}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.playCount}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(track.lastPlayedAt)}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{track.isActive ? t("autoDjForm.activeLabel") : t("autoDjForm.inactiveLabel")}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap" }}>
|
||||
<form action={toggleTrack}>
|
||||
<input type="hidden" name="id" value={String(track.id)} />
|
||||
<input type="hidden" name="isActive" value={track.isActive ? "0" : "1"} />
|
||||
<button type="submit" className="btn">
|
||||
{track.isActive ? t("autoDjForm.deactivate") : t("autoDjForm.activate")}
|
||||
</button>
|
||||
</form>
|
||||
<form action={deleteTrack}>
|
||||
<input type="hidden" name="id" value={String(track.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("autoDjForm.delete")}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("autoDjForm.playlist", { count: tracks.length })}
|
||||
</h2>
|
||||
{tracks.length === 0 ? (
|
||||
<div className="admin-empty">{t("autoDjForm.noTracks")}</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("autoDjForm.colOrder")}</th>
|
||||
<th>{t("autoDjForm.colTitle")}</th>
|
||||
<th>{t("autoDjForm.colArtist")}</th>
|
||||
<th>{t("autoDjForm.colAlbum")}</th>
|
||||
<th>{t("autoDjForm.colDuration")}</th>
|
||||
<th>{t("autoDjForm.colPlays")}</th>
|
||||
<th>{t("autoDjForm.colLastPlayed")}</th>
|
||||
<th>{t("autoDjForm.colStatus")}</th>
|
||||
<th>{t("autoDjForm.colActions")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tracks.map((track) => (
|
||||
<tr key={String(track.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.sortOrder}
|
||||
</td>
|
||||
<td>
|
||||
<span className="inline-flex gap-2 items-center">
|
||||
{track.artworkUrl ? (
|
||||
<Image
|
||||
src={track.artworkUrl}
|
||||
alt=""
|
||||
width={32}
|
||||
height={32}
|
||||
style={{ borderRadius: 4, objectFit: "cover" }}
|
||||
unoptimized
|
||||
/>
|
||||
) : null}
|
||||
<strong>{track.title}</strong>
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.artist ?? "\u2014"}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.album ?? "\u2014"}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDuration(track.duration)}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{track.playCount}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(track.lastPlayedAt)}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{track.isActive
|
||||
? t("autoDjForm.activeLabel")
|
||||
: t("autoDjForm.inactiveLabel")}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "0.4rem",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<form action={toggleTrack}>
|
||||
<input
|
||||
type="hidden"
|
||||
name="id"
|
||||
value={String(track.id)}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="isActive"
|
||||
value={track.isActive ? "0" : "1"}
|
||||
/>
|
||||
<button type="submit" className="btn">
|
||||
{track.isActive
|
||||
? t("autoDjForm.deactivate")
|
||||
: t("autoDjForm.activate")}
|
||||
</button>
|
||||
</form>
|
||||
<form action={deleteTrack}>
|
||||
<input
|
||||
type="hidden"
|
||||
name="id"
|
||||
value={String(track.id)}
|
||||
/>
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("autoDjForm.delete")}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,258 +1,330 @@
|
||||
import Link from "next/link";
|
||||
import { createRadioBanner, deleteRadioBanner, updateRadioBanner } from "@/actions/admin-radio-extra";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import NextImage from "next/image";
|
||||
import { Image as LucideImage } from "lucide-react";
|
||||
import NextImage from "next/image";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
createRadioBanner,
|
||||
deleteRadioBanner,
|
||||
updateRadioBanner,
|
||||
} from "@/actions/admin-radio-extra";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Banner = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
imagePath: string;
|
||||
title: string | null;
|
||||
description: string | null;
|
||||
sortOrder: number;
|
||||
isActive: boolean;
|
||||
createdAt: Date | null;
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
imagePath: string;
|
||||
title: string | null;
|
||||
description: string | null;
|
||||
sortOrder: number;
|
||||
isActive: boolean;
|
||||
createdAt: Date | null;
|
||||
};
|
||||
|
||||
function formatDate(d: Date | null): string {
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
}
|
||||
|
||||
export default async function AdminRadioBannersPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let banners: Banner[] = [];
|
||||
let dbError = false;
|
||||
let banners: Banner[] = [];
|
||||
let dbError = false;
|
||||
|
||||
try {
|
||||
banners = await prisma.radioBanners.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
imagePath: true,
|
||||
title: true,
|
||||
description: true,
|
||||
sortOrder: true,
|
||||
isActive: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: [{ sortOrder: "asc" }, { id: "asc" }],
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
banners = [];
|
||||
}
|
||||
try {
|
||||
banners = await prisma.radioBanners.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
imagePath: true,
|
||||
title: true,
|
||||
description: true,
|
||||
sortOrder: true,
|
||||
isActive: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: [{ sortOrder: "asc" }, { id: "asc" }],
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
banners = [];
|
||||
}
|
||||
|
||||
const activeCount = banners.filter((b) => b.isActive).length;
|
||||
const hiddenCount = banners.length - activeCount;
|
||||
const activeCount = banners.filter((b) => b.isActive).length;
|
||||
const hiddenCount = banners.length - activeCount;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<LucideImage size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("banners.heading")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("banners.description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<LucideImage size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("banners.heading")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("banners.description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("banners.dbError")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("banners.title")} value={banners.length} icon="\u{1F5BC}\uFE0F" />
|
||||
<StatusCard
|
||||
label={t("banners.statusActive")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{2705}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("banners.statusHidden")}
|
||||
value={hiddenCount}
|
||||
state={hiddenCount > 0 ? "warn" : "neutral"}
|
||||
icon="\u{1F6AB}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("banners.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("banners.title")}
|
||||
value={banners.length}
|
||||
icon="\u{1F5BC}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("banners.statusActive")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{2705}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("banners.statusHidden")}
|
||||
value={hiddenCount}
|
||||
state={hiddenCount > 0 ? "warn" : "neutral"}
|
||||
icon="\u{1F6AB}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("banners.addBanner")}</h2>
|
||||
<form action={createRadioBanner} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="new_imagePath" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.imagePath")}
|
||||
</label>
|
||||
<input
|
||||
id="new_imagePath"
|
||||
name="imagePath"
|
||||
placeholder={t("banners.form.imagePathPlaceholder")}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_title" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.title")}
|
||||
</label>
|
||||
<input id="new_title" name="title" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label htmlFor="new_description" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.description")}
|
||||
</label>
|
||||
<textarea id="new_description" name="description" rows={2} style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_sortOrder" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id="new_sortOrder"
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={0}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label style={{ display: "inline-flex", gap: "0.4rem", alignItems: "center" }}>
|
||||
<input type="checkbox" name="isActive" value="1" defaultChecked /> {t("banners.form.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("banners.createBanner")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("banners.addBanner")}</h2>
|
||||
<form action={createRadioBanner} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_imagePath"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.imagePath")}
|
||||
</label>
|
||||
<input
|
||||
id="new_imagePath"
|
||||
name="imagePath"
|
||||
placeholder={t("banners.form.imagePathPlaceholder")}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_title"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.title")}
|
||||
</label>
|
||||
<input id="new_title" name="title" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label
|
||||
htmlFor="new_description"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.description")}
|
||||
</label>
|
||||
<textarea
|
||||
id="new_description"
|
||||
name="description"
|
||||
rows={2}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_sortOrder"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id="new_sortOrder"
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={0}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
gap: "0.4rem",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isActive"
|
||||
value="1"
|
||||
defaultChecked
|
||||
/>{" "}
|
||||
{t("banners.form.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("banners.createBanner")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("banners.existing", { count: banners.length })}</h2>
|
||||
{banners.length === 0 ? (
|
||||
<div className="admin-empty">{t("banners.noBanners")}</div>
|
||||
) : (
|
||||
<div className="grid">
|
||||
{banners.map((b) => (
|
||||
<div key={String(b.id)} className="admin-card">
|
||||
<div className="flex justify-between items-baseline gap-3">
|
||||
<strong>#{String(b.id)}</strong>
|
||||
<span className="text-sm theme-text-muted dark:theme-text-muted inline-flex gap-2 items-center">
|
||||
{t("banners.byUser", { id: String(b.userId) })} · {formatDate(b.createdAt)} ·{" "}
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{b.isActive ? t("banners.active") : t("banners.hidden")}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("banners.existing", { count: banners.length })}
|
||||
</h2>
|
||||
{banners.length === 0 ? (
|
||||
<div className="admin-empty">{t("banners.noBanners")}</div>
|
||||
) : (
|
||||
<div className="grid">
|
||||
{banners.map((b) => (
|
||||
<div key={String(b.id)} className="admin-card">
|
||||
<div className="flex justify-between items-baseline gap-3">
|
||||
<strong>#{String(b.id)}</strong>
|
||||
<span className="text-sm theme-text-muted dark:theme-text-muted inline-flex gap-2 items-center">
|
||||
{t("banners.byUser", { id: String(b.userId) })} ·{" "}
|
||||
{formatDate(b.createdAt)} ·{" "}
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{b.isActive ? t("banners.active") : t("banners.hidden")}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{b.imagePath ? (
|
||||
<NextImage
|
||||
src={b.imagePath}
|
||||
alt={b.title ?? t("banners.bannerAlt")}
|
||||
width={800}
|
||||
height={200}
|
||||
className="article-img my-2"
|
||||
unoptimized
|
||||
/>
|
||||
) : null}
|
||||
{b.imagePath ? (
|
||||
<NextImage
|
||||
src={b.imagePath}
|
||||
alt={b.title ?? t("banners.bannerAlt")}
|
||||
width={800}
|
||||
height={200}
|
||||
className="article-img my-2"
|
||||
unoptimized
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<form action={updateRadioBanner}>
|
||||
<input type="hidden" name="id" value={String(b.id)} />
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor={`img_${b.id}`} style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.imagePath")}
|
||||
</label>
|
||||
<input
|
||||
id={`img_${b.id}`}
|
||||
name="imagePath"
|
||||
defaultValue={b.imagePath}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor={`title_${b.id}`} style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.title")}
|
||||
</label>
|
||||
<input
|
||||
id={`title_${b.id}`}
|
||||
name="title"
|
||||
defaultValue={b.title ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label htmlFor={`desc_${b.id}`} style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.description")}
|
||||
</label>
|
||||
<textarea
|
||||
id={`desc_${b.id}`}
|
||||
name="description"
|
||||
rows={2}
|
||||
defaultValue={b.description ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor={`sort_${b.id}`} style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("banners.form.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id={`sort_${b.id}`}
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={b.sortOrder}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label style={{ display: "inline-flex", gap: "0.4rem", alignItems: "center" }}>
|
||||
<input type="checkbox" name="isActive" value="1" defaultChecked={b.isActive} />{" "}
|
||||
{t("banners.form.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.6rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("banners.save")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<form action={updateRadioBanner}>
|
||||
<input type="hidden" name="id" value={String(b.id)} />
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`img_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.imagePath")}
|
||||
</label>
|
||||
<input
|
||||
id={`img_${b.id}`}
|
||||
name="imagePath"
|
||||
defaultValue={b.imagePath}
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`title_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.title")}
|
||||
</label>
|
||||
<input
|
||||
id={`title_${b.id}`}
|
||||
name="title"
|
||||
defaultValue={b.title ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label
|
||||
htmlFor={`desc_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.description")}
|
||||
</label>
|
||||
<textarea
|
||||
id={`desc_${b.id}`}
|
||||
name="description"
|
||||
rows={2}
|
||||
defaultValue={b.description ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`sort_${b.id}`}
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("banners.form.sortOrder")}
|
||||
</label>
|
||||
<input
|
||||
id={`sort_${b.id}`}
|
||||
name="sortOrder"
|
||||
type="number"
|
||||
defaultValue={b.sortOrder}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
gap: "0.4rem",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isActive"
|
||||
value="1"
|
||||
defaultChecked={b.isActive}
|
||||
/>{" "}
|
||||
{t("banners.form.active")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.6rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("banners.save")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action={deleteRadioBanner} style={{ marginTop: "0.5rem" }}>
|
||||
<input type="hidden" name="id" value={String(b.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("banners.delete")}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
<form
|
||||
action={deleteRadioBanner}
|
||||
style={{ marginTop: "0.5rem" }}
|
||||
>
|
||||
<input type="hidden" name="id" value={String(b.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("banners.delete")}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -8,54 +8,58 @@ import { useState } from "react";
|
||||
* button (with clipboard fallback to selecting the text).
|
||||
*/
|
||||
export function EmbedSnippet({
|
||||
title,
|
||||
description,
|
||||
snippet,
|
||||
title,
|
||||
description,
|
||||
snippet,
|
||||
}: {
|
||||
title: string;
|
||||
description?: string;
|
||||
snippet: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
snippet: string;
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(snippet);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
} catch {
|
||||
// Clipboard API unavailable (e.g. insecure context) — fall back to
|
||||
// selecting the textarea so the user can copy manually.
|
||||
const el = document.getElementById(
|
||||
`snippet-${title.replace(/\s+/g, "-").toLowerCase()}`,
|
||||
) as HTMLTextAreaElement | null;
|
||||
el?.select();
|
||||
}
|
||||
}
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(snippet);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
} catch {
|
||||
// Clipboard API unavailable (e.g. insecure context) — fall back to
|
||||
// selecting the textarea so the user can copy manually.
|
||||
const el = document.getElementById(
|
||||
`snippet-${title.replace(/\s+/g, "-").toLowerCase()}`,
|
||||
) as HTMLTextAreaElement | null;
|
||||
el?.select();
|
||||
}
|
||||
}
|
||||
|
||||
const id = `snippet-${title.replace(/\s+/g, "-").toLowerCase()}`;
|
||||
const lines = snippet.split("\n").length;
|
||||
const id = `snippet-${title.replace(/\s+/g, "-").toLowerCase()}`;
|
||||
const lines = snippet.split("\n").length;
|
||||
|
||||
return (
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center justify-between gap-4 mb-1">
|
||||
<h2 className="m-0 text-base font-bold text-[var(--admin-text)]">{title}</h2>
|
||||
<button type="button" className="btn btn-primary" onClick={copy}>
|
||||
{copied ? "Copied!" : "Copy"}
|
||||
</button>
|
||||
</div>
|
||||
{description ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted mb-3">{description}</p>
|
||||
) : null}
|
||||
<textarea
|
||||
id={id}
|
||||
readOnly
|
||||
value={snippet}
|
||||
rows={Math.min(Math.max(lines + 1, 3), 14)}
|
||||
onFocus={(e) => e.currentTarget.select()}
|
||||
spellCheck={false}
|
||||
className="w-full font-mono text-sm resize-vertical"
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center justify-between gap-4 mb-1">
|
||||
<h2 className="m-0 text-base font-bold text-[var(--admin-text)]">
|
||||
{title}
|
||||
</h2>
|
||||
<button type="button" className="btn btn-primary" onClick={copy}>
|
||||
{copied ? "Copied!" : "Copy"}
|
||||
</button>
|
||||
</div>
|
||||
{description ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
|
||||
{description}
|
||||
</p>
|
||||
) : null}
|
||||
<textarea
|
||||
id={id}
|
||||
readOnly
|
||||
value={snippet}
|
||||
rows={Math.min(Math.max(lines + 1, 3), 14)}
|
||||
onFocus={(e) => e.currentTarget.select()}
|
||||
spellCheck={false}
|
||||
className="w-full font-mono text-sm resize-vertical"
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
+131
-107
@@ -1,127 +1,151 @@
|
||||
import Link from "next/link";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
import { requireStaff } from "@/lib/admin/guard";
|
||||
import { EmbedSnippet } from "./embed-snippet";
|
||||
import { Code } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { requireStaff } from "@/lib/admin/guard";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
import { EmbedSnippet } from "./embed-snippet";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export const metadata = { title: "Radio Embed" };
|
||||
|
||||
export default async function AdminRadioEmbedPage() {
|
||||
await requireStaff();
|
||||
await requireStaff();
|
||||
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let streamUrl = "";
|
||||
let radioName = "Radio";
|
||||
let nowPlayingApiUrl = "";
|
||||
try {
|
||||
streamUrl = (await siteSettings.get("radio_stream_url", "")) ?? "";
|
||||
radioName =
|
||||
(await siteSettings.get("radio_name", null)) ??
|
||||
(await siteSettings.get("hotel_name", "Radio")) ??
|
||||
"Radio";
|
||||
nowPlayingApiUrl = (await siteSettings.get("radio_now_playing_api_url", "")) ?? "";
|
||||
} catch {
|
||||
streamUrl = "";
|
||||
}
|
||||
let streamUrl = "";
|
||||
let radioName = "Radio";
|
||||
let nowPlayingApiUrl = "";
|
||||
try {
|
||||
streamUrl = (await siteSettings.get("radio_stream_url", "")) ?? "";
|
||||
radioName =
|
||||
(await siteSettings.get("radio_name", null)) ??
|
||||
(await siteSettings.get("hotel_name", "Radio")) ??
|
||||
"Radio";
|
||||
nowPlayingApiUrl =
|
||||
(await siteSettings.get("radio_now_playing_api_url", "")) ?? "";
|
||||
} catch {
|
||||
streamUrl = "";
|
||||
}
|
||||
|
||||
streamUrl = streamUrl.trim();
|
||||
nowPlayingApiUrl = nowPlayingApiUrl.trim();
|
||||
const hasStream = streamUrl !== "";
|
||||
streamUrl = streamUrl.trim();
|
||||
nowPlayingApiUrl = nowPlayingApiUrl.trim();
|
||||
const hasStream = streamUrl !== "";
|
||||
|
||||
const audioSnippet = hasStream
|
||||
? `<audio controls preload="none" src="${streamUrl}">\n ${t("embedPage.audioUnsupported")}\n</audio>`
|
||||
: "";
|
||||
const audioSnippet = hasStream
|
||||
? `<audio controls preload="none" src="${streamUrl}">\n ${t("embedPage.audioUnsupported")}\n</audio>`
|
||||
: "";
|
||||
|
||||
const iframeSnippet = hasStream
|
||||
? `<iframe\n src="/radio/embed"\n title="${radioName}"\n width="320"\n height="120"\n frameborder="0"\n allow="autoplay"\n style="border:0;border-radius:8px;overflow:hidden"\n></iframe>`
|
||||
: "";
|
||||
const iframeSnippet = hasStream
|
||||
? `<iframe\n src="/radio/embed"\n title="${radioName}"\n width="320"\n height="120"\n frameborder="0"\n allow="autoplay"\n style="border:0;border-radius:8px;overflow:hidden"\n></iframe>`
|
||||
: "";
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/embed">{t("embed")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/embed">{t("embed")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Code size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("embedPage.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("embedPage.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Code size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("embedPage.title")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("embedPage.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("embedPage.streamUrl")}
|
||||
value={hasStream ? t("embedPage.configured") : t("embedPage.missing")}
|
||||
state={hasStream ? "ok" : "danger"}
|
||||
icon="\u{1F4BB}"
|
||||
/>
|
||||
<StatusCard label={t("embedPage.radioName")} value={radioName} icon="\u{1F399}\uFE0F" />
|
||||
<StatusCard
|
||||
label={t("embedPage.nowPlayingApi")}
|
||||
value={nowPlayingApiUrl ? t("embedPage.set") : t("embedPage.notSet")}
|
||||
state={nowPlayingApiUrl ? "ok" : "neutral"}
|
||||
icon="\u{1F3B5}"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("embedPage.streamUrl")}
|
||||
value={
|
||||
hasStream ? t("embedPage.configured") : t("embedPage.missing")
|
||||
}
|
||||
state={hasStream ? "ok" : "danger"}
|
||||
icon="\u{1F4BB}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("embedPage.radioName")}
|
||||
value={radioName}
|
||||
icon="\u{1F399}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("embedPage.nowPlayingApi")}
|
||||
value={
|
||||
nowPlayingApiUrl ? t("embedPage.set") : t("embedPage.notSet")
|
||||
}
|
||||
state={nowPlayingApiUrl ? "ok" : "neutral"}
|
||||
icon="\u{1F3B5}"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{!hasStream ? (
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("embedPage.noStreamUrl")}</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("embedPage.noStreamUrlText")}</p>
|
||||
<p>
|
||||
<Link href="/admin/radio/settings" className="btn btn-primary">
|
||||
{t("embedPage.goToSettings")}
|
||||
</Link>
|
||||
</p>
|
||||
</section>
|
||||
) : (
|
||||
<>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("embedPage.livePreview")}</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("embedPage.livePreviewText")}</p>
|
||||
<div className="admin-card">
|
||||
{}
|
||||
<audio controls preload="none" src={streamUrl} style={{ width: "100%" }}>
|
||||
{t("embedPage.audioUnsupported")}
|
||||
</audio>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.5rem 0 0", wordBreak: "break-all" }}
|
||||
>
|
||||
{t("embedPage.source")}: <code>{streamUrl}</code>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{!hasStream ? (
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("embedPage.noStreamUrl")}</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("embedPage.noStreamUrlText")}
|
||||
</p>
|
||||
<p>
|
||||
<Link href="/admin/radio/settings" className="btn btn-primary">
|
||||
{t("embedPage.goToSettings")}
|
||||
</Link>
|
||||
</p>
|
||||
</section>
|
||||
) : (
|
||||
<>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("embedPage.livePreview")}
|
||||
</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("embedPage.livePreviewText")}
|
||||
</p>
|
||||
<div className="admin-card">
|
||||
{}
|
||||
<audio
|
||||
controls
|
||||
preload="none"
|
||||
src={streamUrl}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("embedPage.audioUnsupported")}
|
||||
</audio>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.5rem 0 0", wordBreak: "break-all" }}
|
||||
>
|
||||
{t("embedPage.source")}: <code>{streamUrl}</code>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<EmbedSnippet
|
||||
title={t("embedPage.audioSnippet")}
|
||||
description={t("embedPage.audioSnippetDesc")}
|
||||
snippet={audioSnippet}
|
||||
/>
|
||||
<EmbedSnippet
|
||||
title={t("embedPage.audioSnippet")}
|
||||
description={t("embedPage.audioSnippetDesc")}
|
||||
snippet={audioSnippet}
|
||||
/>
|
||||
|
||||
<EmbedSnippet
|
||||
title={t("embedPage.iframeSnippet")}
|
||||
description={t("embedPage.iframeSnippetDesc")}
|
||||
snippet={iframeSnippet}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
<EmbedSnippet
|
||||
title={t("embedPage.iframeSnippet")}
|
||||
description={t("embedPage.iframeSnippetDesc")}
|
||||
snippet={iframeSnippet}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,165 +1,192 @@
|
||||
import Link from "next/link";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Clock } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type History = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
showName: string | null;
|
||||
startedAt: Date;
|
||||
endedAt: Date | null;
|
||||
listenersCount: number;
|
||||
notes: string | null;
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
showName: string | null;
|
||||
startedAt: Date;
|
||||
endedAt: Date | null;
|
||||
listenersCount: number;
|
||||
notes: string | null;
|
||||
};
|
||||
|
||||
function formatDate(d: Date | null): string {
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
}
|
||||
|
||||
function formatDuration(start: Date, end: Date | null): string {
|
||||
if (!end) return "\u2014";
|
||||
const ms = end.getTime() - start.getTime();
|
||||
if (ms <= 0) return "\u2014";
|
||||
const mins = Math.round(ms / 60000);
|
||||
const h = Math.floor(mins / 60);
|
||||
const m = mins % 60;
|
||||
return h > 0 ? `${h}h ${m}m` : `${m}m`;
|
||||
if (!end) return "\u2014";
|
||||
const ms = end.getTime() - start.getTime();
|
||||
if (ms <= 0) return "\u2014";
|
||||
const mins = Math.round(ms / 60000);
|
||||
const h = Math.floor(mins / 60);
|
||||
const m = mins % 60;
|
||||
return h > 0 ? `${h}h ${m}m` : `${m}m`;
|
||||
}
|
||||
|
||||
export default async function AdminRadioHistoryPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let history: History[] = [];
|
||||
let names = new Map<string, string>();
|
||||
let dbError = false;
|
||||
let history: History[] = [];
|
||||
let names = new Map<string, string>();
|
||||
let dbError = false;
|
||||
|
||||
try {
|
||||
history = await prisma.radioHistory.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
showName: true,
|
||||
startedAt: true,
|
||||
endedAt: true,
|
||||
listenersCount: true,
|
||||
notes: true,
|
||||
},
|
||||
orderBy: { startedAt: "desc" },
|
||||
take: 100,
|
||||
});
|
||||
try {
|
||||
history = await prisma.radioHistory.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
showName: true,
|
||||
startedAt: true,
|
||||
endedAt: true,
|
||||
listenersCount: true,
|
||||
notes: true,
|
||||
},
|
||||
orderBy: { startedAt: "desc" },
|
||||
take: 100,
|
||||
});
|
||||
|
||||
const ids = Array.from(new Set(history.map((h) => Number(h.userId)))).filter(
|
||||
(n) => Number.isFinite(n) && n > 0,
|
||||
);
|
||||
if (ids.length > 0) {
|
||||
const users = await prisma.user.findMany({
|
||||
where: { id: { in: ids } },
|
||||
select: { id: true, username: true },
|
||||
});
|
||||
names = new Map(users.map((u) => [String(u.id), u.username]));
|
||||
}
|
||||
} catch {
|
||||
dbError = true;
|
||||
history = [];
|
||||
}
|
||||
const ids = Array.from(
|
||||
new Set(history.map((h) => Number(h.userId))),
|
||||
).filter((n) => Number.isFinite(n) && n > 0);
|
||||
if (ids.length > 0) {
|
||||
const users = await prisma.user.findMany({
|
||||
where: { id: { in: ids } },
|
||||
select: { id: true, username: true },
|
||||
});
|
||||
names = new Map(users.map((u) => [String(u.id), u.username]));
|
||||
}
|
||||
} catch {
|
||||
dbError = true;
|
||||
history = [];
|
||||
}
|
||||
|
||||
const liveCount = history.filter((h) => !h.endedAt).length;
|
||||
const peakListeners = history.reduce((max, h) => (h.listenersCount > max ? h.listenersCount : max), 0);
|
||||
const uniqueDjs = new Set(history.map((h) => String(h.userId))).size;
|
||||
const liveCount = history.filter((h) => !h.endedAt).length;
|
||||
const peakListeners = history.reduce(
|
||||
(max, h) => (h.listenersCount > max ? h.listenersCount : max),
|
||||
0,
|
||||
);
|
||||
const uniqueDjs = new Set(history.map((h) => String(h.userId))).size;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Clock size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("historyPage.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("historyPage.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Clock size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("historyPage.title")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("historyPage.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("historyPage.dbError")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("historyPage.showsLogged")} value={history.length} icon="\u{1F399}\uFE0F" />
|
||||
<StatusCard
|
||||
label={t("historyPage.onAirNow")}
|
||||
value={liveCount}
|
||||
state={liveCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{1F534}"
|
||||
/>
|
||||
<StatusCard label={t("historyPage.uniqueDjs")} value={uniqueDjs} icon="\u{1F9D1}\u200D\u{1F3A4}" />
|
||||
<StatusCard label={t("historyPage.peakListeners")} value={peakListeners} icon="\u{1F465}" />
|
||||
</div>
|
||||
)}
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("historyPage.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("historyPage.showsLogged")}
|
||||
value={history.length}
|
||||
icon="\u{1F399}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("historyPage.onAirNow")}
|
||||
value={liveCount}
|
||||
state={liveCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{1F534}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("historyPage.uniqueDjs")}
|
||||
value={uniqueDjs}
|
||||
icon="\u{1F9D1}\u200D\u{1F3A4}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("historyPage.peakListeners")}
|
||||
value={peakListeners}
|
||||
icon="\u{1F465}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!dbError && history.length === 0 ? <div className="admin-empty">{t("historyPage.empty")}</div> : null}
|
||||
{!dbError && history.length === 0 ? (
|
||||
<div className="admin-empty">{t("historyPage.empty")}</div>
|
||||
) : null}
|
||||
|
||||
{history.length > 0 ? (
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("historyPage.showLog", { count: history.length })}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("historyPage.colDj")}</th>
|
||||
<th>{t("historyPage.colShow")}</th>
|
||||
<th>{t("historyPage.colStarted")}</th>
|
||||
<th>{t("historyPage.colEnded")}</th>
|
||||
<th>{t("historyPage.colAirtime")}</th>
|
||||
<th>{t("historyPage.colListeners")}</th>
|
||||
<th>{t("historyPage.colNotes")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{history.map((h) => (
|
||||
<tr key={String(h.id)}>
|
||||
<td>{String(h.id)}</td>
|
||||
<td>{names.get(String(h.userId)) ?? `#${String(h.userId)}`}</td>
|
||||
<td>{h.showName ?? "\u2014"}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(h.startedAt)}
|
||||
</td>
|
||||
<td>
|
||||
{h.endedAt ? (
|
||||
<span className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(h.endedAt)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-success-subtle)] text-[var(--admin-text)]">
|
||||
{t("historyPage.onAir")}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDuration(h.startedAt, h.endedAt)}
|
||||
</td>
|
||||
<td>{h.listenersCount}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{h.notes ?? "\u2014"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
) : null}
|
||||
</main>
|
||||
);
|
||||
{history.length > 0 ? (
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("historyPage.showLog", { count: history.length })}
|
||||
</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("historyPage.colDj")}</th>
|
||||
<th>{t("historyPage.colShow")}</th>
|
||||
<th>{t("historyPage.colStarted")}</th>
|
||||
<th>{t("historyPage.colEnded")}</th>
|
||||
<th>{t("historyPage.colAirtime")}</th>
|
||||
<th>{t("historyPage.colListeners")}</th>
|
||||
<th>{t("historyPage.colNotes")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{history.map((h) => (
|
||||
<tr key={String(h.id)}>
|
||||
<td>{String(h.id)}</td>
|
||||
<td>
|
||||
{names.get(String(h.userId)) ?? `#${String(h.userId)}`}
|
||||
</td>
|
||||
<td>{h.showName ?? "\u2014"}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(h.startedAt)}
|
||||
</td>
|
||||
<td>
|
||||
{h.endedAt ? (
|
||||
<span className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(h.endedAt)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-success-subtle)] text-[var(--admin-text)]">
|
||||
{t("historyPage.onAir")}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDuration(h.startedAt, h.endedAt)}
|
||||
</td>
|
||||
<td>{h.listenersCount}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{h.notes ?? "\u2014"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
) : null}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,107 +1,117 @@
|
||||
import { Shield } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { deleteShout } from "@/actions/admin-radio-moderation";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Shield } from "lucide-react";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Shout = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
message: string;
|
||||
createdAt: Date | null;
|
||||
updatedAt: Date | null;
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
message: string;
|
||||
createdAt: Date | null;
|
||||
updatedAt: Date | null;
|
||||
};
|
||||
|
||||
function formatDate(d: Date | null): string {
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
}
|
||||
|
||||
export default async function AdminRadioModerationPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let shouts: Shout[] = [];
|
||||
try {
|
||||
shouts = await prisma.radioShouts.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
message: true,
|
||||
createdAt: true,
|
||||
updatedAt: true,
|
||||
},
|
||||
orderBy: { id: "desc" },
|
||||
take: 50,
|
||||
});
|
||||
} catch {
|
||||
shouts = [];
|
||||
}
|
||||
let shouts: Shout[] = [];
|
||||
try {
|
||||
shouts = await prisma.radioShouts.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
message: true,
|
||||
createdAt: true,
|
||||
updatedAt: true,
|
||||
},
|
||||
orderBy: { id: "desc" },
|
||||
take: 50,
|
||||
});
|
||||
} catch {
|
||||
shouts = [];
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/moderation">{t("moderation")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/moderation">{t("moderation")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Shield size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("moderationPage.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("moderationPage.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Shield size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("moderationPage.title")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("moderationPage.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("shouts")} value={shouts.length} icon="\u{1F4E3}" />
|
||||
</div>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("shouts")}
|
||||
value={shouts.length}
|
||||
icon="\u{1F4E3}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("moderationPage.recentShouts", { count: shouts.length })}</h2>
|
||||
{shouts.length === 0 ? (
|
||||
<div className="admin-empty">{t("noShouts")}</div>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("message")}</th>
|
||||
<th>{t("posted")}</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{shouts.map((s) => (
|
||||
<tr key={String(s.id)}>
|
||||
<td>{String(s.id)}</td>
|
||||
<td>{String(s.userId)}</td>
|
||||
<td>{s.message}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(s.createdAt)}
|
||||
</td>
|
||||
<td>
|
||||
<form action={deleteShout}>
|
||||
<input type="hidden" name="id" value={String(s.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("deleteShout")}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("moderationPage.recentShouts", { count: shouts.length })}
|
||||
</h2>
|
||||
{shouts.length === 0 ? (
|
||||
<div className="admin-empty">{t("noShouts")}</div>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("message")}</th>
|
||||
<th>{t("posted")}</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{shouts.map((s) => (
|
||||
<tr key={String(s.id)}>
|
||||
<td>{String(s.id)}</td>
|
||||
<td>{String(s.userId)}</td>
|
||||
<td>{s.message}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(s.createdAt)}
|
||||
</td>
|
||||
<td>
|
||||
<form action={deleteShout}>
|
||||
<input type="hidden" name="id" value={String(s.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("deleteShout")}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Radio } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { DiagnosticRow, StatusCard } from "@/components/admin/dashboard";
|
||||
import { requireStaff } from "@/lib/admin/guard";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
import { StatusCard, DiagnosticRow } from "@/components/admin/dashboard";
|
||||
import { Radio } from "lucide-react";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
@@ -12,269 +12,310 @@ export const metadata = { title: "Radio Monitoring" };
|
||||
const FETCH_TIMEOUT_MS = 4000;
|
||||
|
||||
type ProbeResult = {
|
||||
reachable: boolean;
|
||||
status: number | null;
|
||||
json: unknown;
|
||||
text: string | null;
|
||||
error: string | null;
|
||||
reachable: boolean;
|
||||
status: number | null;
|
||||
json: unknown;
|
||||
text: string | null;
|
||||
error: string | null;
|
||||
};
|
||||
|
||||
async function probe(url: string): Promise<ProbeResult> {
|
||||
const controller = new AbortController();
|
||||
const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
signal: controller.signal,
|
||||
cache: "no-store",
|
||||
headers: { accept: "application/json, text/plain, */*" },
|
||||
});
|
||||
const raw = await res.text();
|
||||
let json: unknown = null;
|
||||
let text: string | null = null;
|
||||
const trimmed = raw.trim();
|
||||
if (trimmed !== "") {
|
||||
try {
|
||||
json = JSON.parse(trimmed);
|
||||
} catch {
|
||||
text = trimmed.slice(0, 2000);
|
||||
}
|
||||
}
|
||||
return {
|
||||
reachable: res.ok,
|
||||
status: res.status,
|
||||
json,
|
||||
text,
|
||||
error: res.ok ? null : `HTTP ${res.status}`,
|
||||
};
|
||||
} catch (e) {
|
||||
const aborted = e instanceof Error && e.name === "AbortError";
|
||||
return {
|
||||
reachable: false,
|
||||
status: null,
|
||||
json: null,
|
||||
text: null,
|
||||
error: aborted ? `Timed out after ${FETCH_TIMEOUT_MS / 1000}s` : "Fetch failed",
|
||||
};
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
const controller = new AbortController();
|
||||
const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
signal: controller.signal,
|
||||
cache: "no-store",
|
||||
headers: { accept: "application/json, text/plain, */*" },
|
||||
});
|
||||
const raw = await res.text();
|
||||
let json: unknown = null;
|
||||
let text: string | null = null;
|
||||
const trimmed = raw.trim();
|
||||
if (trimmed !== "") {
|
||||
try {
|
||||
json = JSON.parse(trimmed);
|
||||
} catch {
|
||||
text = trimmed.slice(0, 2000);
|
||||
}
|
||||
}
|
||||
return {
|
||||
reachable: res.ok,
|
||||
status: res.status,
|
||||
json,
|
||||
text,
|
||||
error: res.ok ? null : `HTTP ${res.status}`,
|
||||
};
|
||||
} catch (e) {
|
||||
const aborted = e instanceof Error && e.name === "AbortError";
|
||||
return {
|
||||
reachable: false,
|
||||
status: null,
|
||||
json: null,
|
||||
text: null,
|
||||
error: aborted
|
||||
? `Timed out after ${FETCH_TIMEOUT_MS / 1000}s`
|
||||
: "Fetch failed",
|
||||
};
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
}
|
||||
|
||||
function isRecord(v: unknown): v is Record<string, unknown> {
|
||||
return typeof v === "object" && v !== null && !Array.isArray(v);
|
||||
return typeof v === "object" && v !== null && !Array.isArray(v);
|
||||
}
|
||||
|
||||
function pickString(obj: Record<string, unknown>, key: string): string | null {
|
||||
// eslint-disable-next-line security/detect-object-injection -- only called with hardcoded keys
|
||||
const v = obj[key];
|
||||
return typeof v === "string" && v.trim() !== "" ? v.trim() : null;
|
||||
// eslint-disable-next-line security/detect-object-injection -- only called with hardcoded keys
|
||||
const v = obj[key];
|
||||
return typeof v === "string" && v.trim() !== "" ? v.trim() : null;
|
||||
}
|
||||
|
||||
function parseNowPlaying(result: ProbeResult): string | null {
|
||||
if (result.json == null) {
|
||||
return result.text && result.text.length <= 200 ? result.text : null;
|
||||
}
|
||||
const data = result.json;
|
||||
if (typeof data === "string") return data.trim() || null;
|
||||
if (!isRecord(data)) return null;
|
||||
if (result.json == null) {
|
||||
return result.text && result.text.length <= 200 ? result.text : null;
|
||||
}
|
||||
const data = result.json;
|
||||
if (typeof data === "string") return data.trim() || null;
|
||||
if (!isRecord(data)) return null;
|
||||
|
||||
const np = data.now_playing;
|
||||
if (typeof np === "string" && np.trim() !== "") return np.trim();
|
||||
if (isRecord(np)) {
|
||||
const song = np.song;
|
||||
if (isRecord(song)) {
|
||||
const title = pickString(song, "title");
|
||||
const artist = pickString(song, "artist");
|
||||
if (title || artist) {
|
||||
return [artist, title].filter(Boolean).join(" - ");
|
||||
}
|
||||
const txt = pickString(song, "text");
|
||||
if (txt) return txt;
|
||||
}
|
||||
}
|
||||
const np = data.now_playing;
|
||||
if (typeof np === "string" && np.trim() !== "") return np.trim();
|
||||
if (isRecord(np)) {
|
||||
const song = np.song;
|
||||
if (isRecord(song)) {
|
||||
const title = pickString(song, "title");
|
||||
const artist = pickString(song, "artist");
|
||||
if (title || artist) {
|
||||
return [artist, title].filter(Boolean).join(" - ");
|
||||
}
|
||||
const txt = pickString(song, "text");
|
||||
if (txt) return txt;
|
||||
}
|
||||
}
|
||||
|
||||
const song = data.song;
|
||||
if (isRecord(song)) {
|
||||
const title = pickString(song, "title");
|
||||
const artist = pickString(song, "artist");
|
||||
if (title || artist) return [artist, title].filter(Boolean).join(" - ");
|
||||
}
|
||||
const title = pickString(data, "title");
|
||||
const artist = pickString(data, "artist");
|
||||
if (title || artist) return [artist, title].filter(Boolean).join(" - ");
|
||||
const song = data.song;
|
||||
if (isRecord(song)) {
|
||||
const title = pickString(song, "title");
|
||||
const artist = pickString(song, "artist");
|
||||
if (title || artist) return [artist, title].filter(Boolean).join(" - ");
|
||||
}
|
||||
const title = pickString(data, "title");
|
||||
const artist = pickString(data, "artist");
|
||||
if (title || artist) return [artist, title].filter(Boolean).join(" - ");
|
||||
|
||||
return pickString(data, "text") ?? pickString(data, "song") ?? null;
|
||||
return pickString(data, "text") ?? pickString(data, "song") ?? null;
|
||||
}
|
||||
|
||||
function findNumberDeep(value: unknown, keys: string[], depth = 0): number | null {
|
||||
if (depth > 4) return null;
|
||||
if (typeof value === "number" && Number.isFinite(value)) return value;
|
||||
if (!isRecord(value)) return null;
|
||||
for (const key of keys) {
|
||||
// eslint-disable-next-line security/detect-object-injection -- keys from hardcoded array
|
||||
const v = value[key];
|
||||
if (typeof v === "number" && Number.isFinite(v)) return v;
|
||||
if (typeof v === "string" && v.trim() !== "" && Number.isFinite(Number(v))) {
|
||||
return Number(v);
|
||||
}
|
||||
}
|
||||
for (const v of Object.values(value)) {
|
||||
if (isRecord(v)) {
|
||||
const found = findNumberDeep(v, keys, depth + 1);
|
||||
if (found !== null) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
function findNumberDeep(
|
||||
value: unknown,
|
||||
keys: string[],
|
||||
depth = 0,
|
||||
): number | null {
|
||||
if (depth > 4) return null;
|
||||
if (typeof value === "number" && Number.isFinite(value)) return value;
|
||||
if (!isRecord(value)) return null;
|
||||
for (const key of keys) {
|
||||
// eslint-disable-next-line security/detect-object-injection -- keys from hardcoded array
|
||||
const v = value[key];
|
||||
if (typeof v === "number" && Number.isFinite(v)) return v;
|
||||
if (
|
||||
typeof v === "string" &&
|
||||
v.trim() !== "" &&
|
||||
Number.isFinite(Number(v))
|
||||
) {
|
||||
return Number(v);
|
||||
}
|
||||
}
|
||||
for (const v of Object.values(value)) {
|
||||
if (isRecord(v)) {
|
||||
const found = findNumberDeep(v, keys, depth + 1);
|
||||
if (found !== null) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function parseListeners(result: ProbeResult): number | null {
|
||||
if (result.json == null) {
|
||||
if (result.text && Number.isFinite(Number(result.text.trim()))) {
|
||||
return Number(result.text.trim());
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const data = result.json;
|
||||
if (typeof data === "number" && Number.isFinite(data)) return data;
|
||||
return findNumberDeep(data, [
|
||||
"current",
|
||||
"total",
|
||||
"num_listeners",
|
||||
"listeners",
|
||||
"unique_listeners",
|
||||
"count",
|
||||
]);
|
||||
if (result.json == null) {
|
||||
if (result.text && Number.isFinite(Number(result.text.trim()))) {
|
||||
return Number(result.text.trim());
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const data = result.json;
|
||||
if (typeof data === "number" && Number.isFinite(data)) return data;
|
||||
return findNumberDeep(data, [
|
||||
"current",
|
||||
"total",
|
||||
"num_listeners",
|
||||
"listeners",
|
||||
"unique_listeners",
|
||||
"count",
|
||||
]);
|
||||
}
|
||||
|
||||
function shortUrl(url: string): string {
|
||||
try {
|
||||
const u = new URL(url);
|
||||
return u.host + (u.pathname === "/" ? "" : u.pathname);
|
||||
} catch {
|
||||
return url.length > 60 ? `${url.slice(0, 57)}\u2026` : url;
|
||||
}
|
||||
try {
|
||||
const u = new URL(url);
|
||||
return u.host + (u.pathname === "/" ? "" : u.pathname);
|
||||
} catch {
|
||||
return url.length > 60 ? `${url.slice(0, 57)}\u2026` : url;
|
||||
}
|
||||
}
|
||||
|
||||
export default async function AdminRadioMonitoringPage() {
|
||||
await requireStaff();
|
||||
await requireStaff();
|
||||
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let nowPlayingUrl: string | null = null;
|
||||
let listenersUrl: string | null = null;
|
||||
let streamUrl: string | null = null;
|
||||
try {
|
||||
nowPlayingUrl = (await siteSettings.get("radio_now_playing_api_url", "")) || null;
|
||||
listenersUrl = (await siteSettings.get("radio_listeners_api_url", "")) || null;
|
||||
streamUrl = (await siteSettings.get("radio_stream_url", "")) || null;
|
||||
} catch {
|
||||
nowPlayingUrl = null;
|
||||
listenersUrl = null;
|
||||
streamUrl = null;
|
||||
}
|
||||
let nowPlayingUrl: string | null = null;
|
||||
let listenersUrl: string | null = null;
|
||||
let streamUrl: string | null = null;
|
||||
try {
|
||||
nowPlayingUrl =
|
||||
(await siteSettings.get("radio_now_playing_api_url", "")) || null;
|
||||
listenersUrl =
|
||||
(await siteSettings.get("radio_listeners_api_url", "")) || null;
|
||||
streamUrl = (await siteSettings.get("radio_stream_url", "")) || null;
|
||||
} catch {
|
||||
nowPlayingUrl = null;
|
||||
listenersUrl = null;
|
||||
streamUrl = null;
|
||||
}
|
||||
|
||||
const nowPlayingResult = nowPlayingUrl ? await probe(nowPlayingUrl) : null;
|
||||
const listenersResult = listenersUrl ? await probe(listenersUrl) : null;
|
||||
const nowPlayingResult = nowPlayingUrl ? await probe(nowPlayingUrl) : null;
|
||||
const listenersResult = listenersUrl ? await probe(listenersUrl) : null;
|
||||
|
||||
const nowPlaying = nowPlayingResult ? parseNowPlaying(nowPlayingResult) : null;
|
||||
const listeners = listenersResult ? parseListeners(listenersResult) : null;
|
||||
const nowPlaying = nowPlayingResult
|
||||
? parseNowPlaying(nowPlayingResult)
|
||||
: null;
|
||||
const listeners = listenersResult ? parseListeners(listenersResult) : null;
|
||||
|
||||
const streamProbe = nowPlayingResult ?? listenersResult;
|
||||
const streamOnline = streamProbe?.reachable ?? false;
|
||||
const streamConfigured = Boolean(nowPlayingUrl || listenersUrl);
|
||||
const streamProbe = nowPlayingResult ?? listenersResult;
|
||||
const streamOnline = streamProbe?.reachable ?? false;
|
||||
const streamConfigured = Boolean(nowPlayingUrl || listenersUrl);
|
||||
|
||||
const endpoints: {
|
||||
label: string;
|
||||
url: string | null;
|
||||
result: ProbeResult | null;
|
||||
}[] = [
|
||||
{ label: t("monitoring.nowPlayingApi"), url: nowPlayingUrl, result: nowPlayingResult },
|
||||
{ label: t("monitoring.listenersApi"), url: listenersUrl, result: listenersResult },
|
||||
];
|
||||
const endpoints: {
|
||||
label: string;
|
||||
url: string | null;
|
||||
result: ProbeResult | null;
|
||||
}[] = [
|
||||
{
|
||||
label: t("monitoring.nowPlayingApi"),
|
||||
url: nowPlayingUrl,
|
||||
result: nowPlayingResult,
|
||||
},
|
||||
{
|
||||
label: t("monitoring.listenersApi"),
|
||||
url: listenersUrl,
|
||||
result: listenersResult,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/monitoring">{t("monitoring.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/monitoring">{t("monitoring.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Radio size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("monitoring.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("monitoring.subtitle", { timeout: FETCH_TIMEOUT_MS / 1000 })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Radio size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("monitoring.title")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("monitoring.subtitle", { timeout: FETCH_TIMEOUT_MS / 1000 })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("monitoring.stream")}
|
||||
value={
|
||||
!streamConfigured
|
||||
? t("monitoring.notConfigured")
|
||||
: streamOnline
|
||||
? t("monitoring.online")
|
||||
: t("monitoring.offline")
|
||||
}
|
||||
state={!streamConfigured ? "neutral" : streamOnline ? "ok" : "danger"}
|
||||
hint={streamUrl ? shortUrl(streamUrl) : undefined}
|
||||
icon="\u{1F4E1}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("monitoring.nowPlaying")}
|
||||
value={nowPlaying ?? "\u2014"}
|
||||
state={nowPlaying ? "ok" : "neutral"}
|
||||
hint={!nowPlayingUrl ? t("monitoring.noNowPlayingHint") : undefined}
|
||||
icon="\u{1F3B5}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("monitoring.listeners")}
|
||||
value={listeners ?? "\u2014"}
|
||||
state={listeners != null ? "ok" : "neutral"}
|
||||
hint={!listenersUrl ? t("monitoring.noListenersHint") : undefined}
|
||||
icon="\u{1F3A7}"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("monitoring.stream")}
|
||||
value={
|
||||
!streamConfigured
|
||||
? t("monitoring.notConfigured")
|
||||
: streamOnline
|
||||
? t("monitoring.online")
|
||||
: t("monitoring.offline")
|
||||
}
|
||||
state={
|
||||
!streamConfigured ? "neutral" : streamOnline ? "ok" : "danger"
|
||||
}
|
||||
hint={streamUrl ? shortUrl(streamUrl) : undefined}
|
||||
icon="\u{1F4E1}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("monitoring.nowPlaying")}
|
||||
value={nowPlaying ?? "\u2014"}
|
||||
state={nowPlaying ? "ok" : "neutral"}
|
||||
hint={!nowPlayingUrl ? t("monitoring.noNowPlayingHint") : undefined}
|
||||
icon="\u{1F3B5}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("monitoring.listeners")}
|
||||
value={listeners ?? "\u2014"}
|
||||
state={listeners != null ? "ok" : "neutral"}
|
||||
hint={!listenersUrl ? t("monitoring.noListenersHint") : undefined}
|
||||
icon="\u{1F3A7}"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("monitoring.endpointDiagnostics")}</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("monitoring.diagnosticsLegend")}</p>
|
||||
<div className="flex flex-col">
|
||||
{endpoints.map((ep) => {
|
||||
let state: "ok" | "warn" | "danger";
|
||||
let detail: string;
|
||||
if (!ep.url) {
|
||||
state = "warn";
|
||||
detail = t("monitoring.notConfigured");
|
||||
} else if (ep.result?.reachable) {
|
||||
state = "ok";
|
||||
detail = `${shortUrl(ep.url)}${
|
||||
ep.result.status != null ? ` \u00B7 HTTP ${ep.result.status}` : ""
|
||||
}`;
|
||||
} else {
|
||||
state = "danger";
|
||||
detail = `${shortUrl(ep.url)} \u00B7 ${ep.result?.error ?? t("monitoring.unreachable")}`;
|
||||
}
|
||||
return <DiagnosticRow key={ep.label} label={ep.label} detail={detail} state={state} />;
|
||||
})}
|
||||
<DiagnosticRow
|
||||
label={t("monitoring.streamUrl")}
|
||||
detail={streamUrl ? shortUrl(streamUrl) : t("monitoring.notConfigured")}
|
||||
state={streamUrl ? "ok" : "warn"}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("monitoring.endpointDiagnostics")}
|
||||
</h2>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("monitoring.diagnosticsLegend")}
|
||||
</p>
|
||||
<div className="flex flex-col">
|
||||
{endpoints.map((ep) => {
|
||||
let state: "ok" | "warn" | "danger";
|
||||
let detail: string;
|
||||
if (!ep.url) {
|
||||
state = "warn";
|
||||
detail = t("monitoring.notConfigured");
|
||||
} else if (ep.result?.reachable) {
|
||||
state = "ok";
|
||||
detail = `${shortUrl(ep.url)}${
|
||||
ep.result.status != null
|
||||
? ` \u00B7 HTTP ${ep.result.status}`
|
||||
: ""
|
||||
}`;
|
||||
} else {
|
||||
state = "danger";
|
||||
detail = `${shortUrl(ep.url)} \u00B7 ${ep.result?.error ?? t("monitoring.unreachable")}`;
|
||||
}
|
||||
return (
|
||||
<DiagnosticRow
|
||||
key={ep.label}
|
||||
label={ep.label}
|
||||
detail={detail}
|
||||
state={state}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<DiagnosticRow
|
||||
label={t("monitoring.streamUrl")}
|
||||
detail={
|
||||
streamUrl ? shortUrl(streamUrl) : t("monitoring.notConfigured")
|
||||
}
|
||||
state={streamUrl ? "ok" : "warn"}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+252
-234
@@ -1,271 +1,289 @@
|
||||
import Link from "next/link";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { deleteShout } from "@/actions/admin-radio-moderation";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Shout = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
message: string;
|
||||
createdAt: Date | null;
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
message: string;
|
||||
createdAt: Date | null;
|
||||
};
|
||||
|
||||
type Application = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
realName: string;
|
||||
age: number;
|
||||
status: string;
|
||||
musicStyle: string | null;
|
||||
discordUsername: string | null;
|
||||
createdAt: Date | null;
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
realName: string;
|
||||
age: number;
|
||||
status: string;
|
||||
musicStyle: string | null;
|
||||
discordUsername: string | null;
|
||||
createdAt: Date | null;
|
||||
};
|
||||
|
||||
type Schedule = {
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
day: string;
|
||||
startTime: Date;
|
||||
endTime: Date;
|
||||
showName: string | null;
|
||||
isActive: boolean;
|
||||
id: bigint;
|
||||
userId: bigint;
|
||||
day: string;
|
||||
startTime: Date;
|
||||
endTime: Date;
|
||||
showName: string | null;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
function formatDate(d: Date | null): string {
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
|
||||
}
|
||||
|
||||
function formatTime(d: Date | null): string {
|
||||
return d ? d.toISOString().slice(11, 16) : "\u2014";
|
||||
return d ? d.toISOString().slice(11, 16) : "\u2014";
|
||||
}
|
||||
|
||||
function statusBadgeClass(status: string): string {
|
||||
const s = status.toLowerCase();
|
||||
if (s === "approved" || s === "accepted") return "ok";
|
||||
if (s === "rejected" || s === "denied") return "danger";
|
||||
return "";
|
||||
const s = status.toLowerCase();
|
||||
if (s === "approved" || s === "accepted") return "ok";
|
||||
if (s === "rejected" || s === "denied") return "danger";
|
||||
return "";
|
||||
}
|
||||
|
||||
export default async function AdminRadioPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let shouts: Shout[] = [];
|
||||
let applications: Application[] = [];
|
||||
let schedules: Schedule[] = [];
|
||||
let shouts: Shout[] = [];
|
||||
let applications: Application[] = [];
|
||||
let schedules: Schedule[] = [];
|
||||
|
||||
try {
|
||||
shouts = await prisma.radioShouts.findMany({
|
||||
select: { id: true, userId: true, message: true, createdAt: true },
|
||||
orderBy: { id: "desc" },
|
||||
take: 25,
|
||||
});
|
||||
} catch {
|
||||
shouts = [];
|
||||
}
|
||||
try {
|
||||
shouts = await prisma.radioShouts.findMany({
|
||||
select: { id: true, userId: true, message: true, createdAt: true },
|
||||
orderBy: { id: "desc" },
|
||||
take: 25,
|
||||
});
|
||||
} catch {
|
||||
shouts = [];
|
||||
}
|
||||
|
||||
try {
|
||||
applications = await prisma.radioApplications.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
realName: true,
|
||||
age: true,
|
||||
status: true,
|
||||
musicStyle: true,
|
||||
discordUsername: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: { id: "desc" },
|
||||
take: 25,
|
||||
});
|
||||
} catch {
|
||||
applications = [];
|
||||
}
|
||||
try {
|
||||
applications = await prisma.radioApplications.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
realName: true,
|
||||
age: true,
|
||||
status: true,
|
||||
musicStyle: true,
|
||||
discordUsername: true,
|
||||
createdAt: true,
|
||||
},
|
||||
orderBy: { id: "desc" },
|
||||
take: 25,
|
||||
});
|
||||
} catch {
|
||||
applications = [];
|
||||
}
|
||||
|
||||
try {
|
||||
schedules = await prisma.radioSchedules.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
day: true,
|
||||
startTime: true,
|
||||
endTime: true,
|
||||
showName: true,
|
||||
isActive: true,
|
||||
},
|
||||
orderBy: { id: "desc" },
|
||||
take: 25,
|
||||
});
|
||||
} catch {
|
||||
schedules = [];
|
||||
}
|
||||
try {
|
||||
schedules = await prisma.radioSchedules.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
userId: true,
|
||||
day: true,
|
||||
startTime: true,
|
||||
endTime: true,
|
||||
showName: true,
|
||||
isActive: true,
|
||||
},
|
||||
orderBy: { id: "desc" },
|
||||
take: 25,
|
||||
});
|
||||
} catch {
|
||||
schedules = [];
|
||||
}
|
||||
|
||||
const pendingApps = applications.filter((a) => a.status.toLowerCase() === "pending").length;
|
||||
const activeSchedules = schedules.filter((sc) => sc.isActive).length;
|
||||
const pendingApps = applications.filter(
|
||||
(a) => a.status.toLowerCase() === "pending",
|
||||
).length;
|
||||
const activeSchedules = schedules.filter((sc) => sc.isActive).length;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
|
||||
<h1>{t("title")}</h1>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("subtitle")}</p>
|
||||
<h1>{t("title")}</h1>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("subtitle")}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("shouts")} value={shouts.length} icon="\u{1F4E3}" />
|
||||
<StatusCard
|
||||
label={t("pendingApplications")}
|
||||
value={pendingApps}
|
||||
state={pendingApps > 0 ? "warn" : "ok"}
|
||||
icon="\u{1F4DD}"
|
||||
/>
|
||||
<StatusCard label={t("schedules")} value={schedules.length} icon="\u{1F5D3}\uFE0F" />
|
||||
<StatusCard
|
||||
label={t("activeSchedules")}
|
||||
value={activeSchedules}
|
||||
state={activeSchedules > 0 ? "ok" : "neutral"}
|
||||
icon="\u{1F399}\uFE0F"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("shouts")}
|
||||
value={shouts.length}
|
||||
icon="\u{1F4E3}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("pendingApplications")}
|
||||
value={pendingApps}
|
||||
state={pendingApps > 0 ? "warn" : "ok"}
|
||||
icon="\u{1F4DD}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("schedules")}
|
||||
value={schedules.length}
|
||||
icon="\u{1F5D3}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("activeSchedules")}
|
||||
value={activeSchedules}
|
||||
state={activeSchedules > 0 ? "ok" : "neutral"}
|
||||
icon="\u{1F399}\uFE0F"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
{t("shouts")} ({shouts.length})
|
||||
</h2>
|
||||
{shouts.length === 0 ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("noShouts")}</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("message")}</th>
|
||||
<th>{t("posted")}</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{shouts.map((s) => (
|
||||
<tr key={String(s.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{String(s.id)}
|
||||
</td>
|
||||
<td>{String(s.userId)}</td>
|
||||
<td>{s.message}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(s.createdAt)}
|
||||
</td>
|
||||
<td>
|
||||
<form action={deleteShout}>
|
||||
<input type="hidden" name="id" value={String(s.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("deleteShout")}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
{t("shouts")} ({shouts.length})
|
||||
</h2>
|
||||
{shouts.length === 0 ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("noShouts")}
|
||||
</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("message")}</th>
|
||||
<th>{t("posted")}</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{shouts.map((s) => (
|
||||
<tr key={String(s.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{String(s.id)}
|
||||
</td>
|
||||
<td>{String(s.userId)}</td>
|
||||
<td>{s.message}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(s.createdAt)}
|
||||
</td>
|
||||
<td>
|
||||
<form action={deleteShout}>
|
||||
<input type="hidden" name="id" value={String(s.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("deleteShout")}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
{t("applications")} ({applications.length})
|
||||
</h2>
|
||||
{applications.length === 0 ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("noApplications")}</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("realName")}</th>
|
||||
<th>{t("age")}</th>
|
||||
<th>{t("style")}</th>
|
||||
<th>Discord</th>
|
||||
<th>{t("status")}</th>
|
||||
<th>{t("applied")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{applications.map((a) => (
|
||||
<tr key={String(a.id)}>
|
||||
<td>{String(a.id)}</td>
|
||||
<td>{String(a.userId)}</td>
|
||||
<td>{a.realName}</td>
|
||||
<td>{a.age}</td>
|
||||
<td>{a.musicStyle ?? "\u2014"}</td>
|
||||
<td>{a.discordUsername ?? "\u2014"}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{a.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(a.createdAt)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
{t("applications")} ({applications.length})
|
||||
</h2>
|
||||
{applications.length === 0 ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("noApplications")}
|
||||
</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("realName")}</th>
|
||||
<th>{t("age")}</th>
|
||||
<th>{t("style")}</th>
|
||||
<th>Discord</th>
|
||||
<th>{t("status")}</th>
|
||||
<th>{t("applied")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{applications.map((a) => (
|
||||
<tr key={String(a.id)}>
|
||||
<td>{String(a.id)}</td>
|
||||
<td>{String(a.userId)}</td>
|
||||
<td>{a.realName}</td>
|
||||
<td>{a.age}</td>
|
||||
<td>{a.musicStyle ?? "\u2014"}</td>
|
||||
<td>{a.discordUsername ?? "\u2014"}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{a.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(a.createdAt)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
{t("schedules")} ({schedules.length})
|
||||
</h2>
|
||||
{schedules.length === 0 ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("noSchedules")}</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("day")}</th>
|
||||
<th>{t("start")}</th>
|
||||
<th>{t("end")}</th>
|
||||
<th>{t("show")}</th>
|
||||
<th>{t("active")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{schedules.map((sc) => (
|
||||
<tr key={String(sc.id)}>
|
||||
<td>{String(sc.id)}</td>
|
||||
<td>{String(sc.userId)}</td>
|
||||
<td>{sc.day}</td>
|
||||
<td>{formatTime(sc.startTime)}</td>
|
||||
<td>{formatTime(sc.endTime)}</td>
|
||||
<td>{sc.showName ?? "\u2014"}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{sc.isActive ? t("active") : t("inactive")}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
{t("schedules")} ({schedules.length})
|
||||
</h2>
|
||||
{schedules.length === 0 ? (
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted">
|
||||
{t("noSchedules")}
|
||||
</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("day")}</th>
|
||||
<th>{t("start")}</th>
|
||||
<th>{t("end")}</th>
|
||||
<th>{t("show")}</th>
|
||||
<th>{t("active")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{schedules.map((sc) => (
|
||||
<tr key={String(sc.id)}>
|
||||
<td>{String(sc.id)}</td>
|
||||
<td>{String(sc.userId)}</td>
|
||||
<td>{sc.day}</td>
|
||||
<td>{formatTime(sc.startTime)}</td>
|
||||
<td>{formatTime(sc.endTime)}</td>
|
||||
<td>{sc.showName ?? "\u2014"}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{sc.isActive ? t("active") : t("inactive")}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+230
-186
@@ -1,217 +1,261 @@
|
||||
import { Star } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { savePoints } from "@/actions/admin-radio-points";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
import { Star } from "lucide-react";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export const metadata = { title: "Radio Points" };
|
||||
|
||||
const DEFAULTS = {
|
||||
radio_points_enabled: "0",
|
||||
radio_points_per_minute: "1",
|
||||
radio_points_currency: "credits",
|
||||
radio_points_max_per_day: "0",
|
||||
radio_points_min_listeners: "0",
|
||||
radio_points_enabled: "0",
|
||||
radio_points_per_minute: "1",
|
||||
radio_points_currency: "credits",
|
||||
radio_points_max_per_day: "0",
|
||||
radio_points_min_listeners: "0",
|
||||
} as const;
|
||||
|
||||
const CURRENCIES = ["credits", "duckets", "diamonds", "points"] as const;
|
||||
|
||||
export default async function AdminRadioPointsPage({
|
||||
searchParams,
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ saved?: string }>;
|
||||
searchParams: Promise<{ saved?: string }>;
|
||||
}) {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
const { saved } = await searchParams;
|
||||
const { saved } = await searchParams;
|
||||
|
||||
const values = {
|
||||
radio_points_enabled: await siteSettings
|
||||
.get("radio_points_enabled", DEFAULTS.radio_points_enabled)
|
||||
.catch(() => DEFAULTS.radio_points_enabled),
|
||||
radio_points_per_minute: await siteSettings
|
||||
.get("radio_points_per_minute", DEFAULTS.radio_points_per_minute)
|
||||
.catch(() => DEFAULTS.radio_points_per_minute),
|
||||
radio_points_currency: await siteSettings
|
||||
.get("radio_points_currency", DEFAULTS.radio_points_currency)
|
||||
.catch(() => DEFAULTS.radio_points_currency),
|
||||
radio_points_max_per_day: await siteSettings
|
||||
.get("radio_points_max_per_day", DEFAULTS.radio_points_max_per_day)
|
||||
.catch(() => DEFAULTS.radio_points_max_per_day),
|
||||
radio_points_min_listeners: await siteSettings
|
||||
.get("radio_points_min_listeners", DEFAULTS.radio_points_min_listeners)
|
||||
.catch(() => DEFAULTS.radio_points_min_listeners),
|
||||
};
|
||||
const values = {
|
||||
radio_points_enabled: await siteSettings
|
||||
.get("radio_points_enabled", DEFAULTS.radio_points_enabled)
|
||||
.catch(() => DEFAULTS.radio_points_enabled),
|
||||
radio_points_per_minute: await siteSettings
|
||||
.get("radio_points_per_minute", DEFAULTS.radio_points_per_minute)
|
||||
.catch(() => DEFAULTS.radio_points_per_minute),
|
||||
radio_points_currency: await siteSettings
|
||||
.get("radio_points_currency", DEFAULTS.radio_points_currency)
|
||||
.catch(() => DEFAULTS.radio_points_currency),
|
||||
radio_points_max_per_day: await siteSettings
|
||||
.get("radio_points_max_per_day", DEFAULTS.radio_points_max_per_day)
|
||||
.catch(() => DEFAULTS.radio_points_max_per_day),
|
||||
radio_points_min_listeners: await siteSettings
|
||||
.get("radio_points_min_listeners", DEFAULTS.radio_points_min_listeners)
|
||||
.catch(() => DEFAULTS.radio_points_min_listeners),
|
||||
};
|
||||
|
||||
const enabled = (values.radio_points_enabled ?? "0") === "1";
|
||||
const perMinute = values.radio_points_per_minute ?? DEFAULTS.radio_points_per_minute;
|
||||
const currency = (values.radio_points_currency ?? DEFAULTS.radio_points_currency) as string;
|
||||
const maxPerDay = values.radio_points_max_per_day ?? DEFAULTS.radio_points_max_per_day;
|
||||
const minListeners = values.radio_points_min_listeners ?? DEFAULTS.radio_points_min_listeners;
|
||||
const selectedCurrency = CURRENCIES.includes(currency as (typeof CURRENCIES)[number])
|
||||
? currency
|
||||
: "credits";
|
||||
const enabled = (values.radio_points_enabled ?? "0") === "1";
|
||||
const perMinute =
|
||||
values.radio_points_per_minute ?? DEFAULTS.radio_points_per_minute;
|
||||
const currency = (values.radio_points_currency ??
|
||||
DEFAULTS.radio_points_currency) as string;
|
||||
const maxPerDay =
|
||||
values.radio_points_max_per_day ?? DEFAULTS.radio_points_max_per_day;
|
||||
const minListeners =
|
||||
values.radio_points_min_listeners ?? DEFAULTS.radio_points_min_listeners;
|
||||
const selectedCurrency = CURRENCIES.includes(
|
||||
currency as (typeof CURRENCIES)[number],
|
||||
)
|
||||
? currency
|
||||
: "credits";
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/points">{t("points")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/points">{t("points")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Star size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("pointsForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("pointsForm.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Star size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("pointsForm.title")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("pointsForm.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{saved === "1" ? (
|
||||
<p>
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-success-subtle)] text-[var(--admin-text)]">
|
||||
{t("pointsForm.saved")}
|
||||
</span>
|
||||
</p>
|
||||
) : null}
|
||||
{saved === "1" ? (
|
||||
<p>
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-success-subtle)] text-[var(--admin-text)]">
|
||||
{t("pointsForm.saved")}
|
||||
</span>
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("pointsForm.points")}
|
||||
value={enabled ? t("pointsForm.enabled") : t("pointsForm.disabled")}
|
||||
state={enabled ? "ok" : "danger"}
|
||||
icon="\u{1F3A7}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("pointsForm.perMinute")}
|
||||
value={perMinute}
|
||||
hint={t("pointsForm.paidIn", { currency: selectedCurrency })}
|
||||
icon="\u{23F1}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("pointsForm.maxPerDay")}
|
||||
value={maxPerDay === "0" ? t("pointsForm.unlimited") : maxPerDay}
|
||||
icon="\u{1F4C8}"
|
||||
/>
|
||||
<StatusCard label={t("pointsForm.minListeners")} value={minListeners} icon="\u{1F465}" />
|
||||
</div>
|
||||
</section>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("pointsForm.points")}
|
||||
value={enabled ? t("pointsForm.enabled") : t("pointsForm.disabled")}
|
||||
state={enabled ? "ok" : "danger"}
|
||||
icon="\u{1F3A7}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("pointsForm.perMinute")}
|
||||
value={perMinute}
|
||||
hint={t("pointsForm.paidIn", { currency: selectedCurrency })}
|
||||
icon="\u{23F1}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("pointsForm.maxPerDay")}
|
||||
value={maxPerDay === "0" ? t("pointsForm.unlimited") : maxPerDay}
|
||||
icon="\u{1F4C8}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("pointsForm.minListeners")}
|
||||
value={minListeners}
|
||||
icon="\u{1F465}"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("pointsForm.settings")}</h2>
|
||||
<form action={savePoints}>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="radio_points_enabled" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("pointsForm.pointsEnabled")}
|
||||
</label>
|
||||
<select
|
||||
id="radio_points_enabled"
|
||||
name="radio_points_enabled"
|
||||
defaultValue={enabled ? "1" : "0"}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<option value="1">{t("pointsForm.enabled")}</option>
|
||||
<option value="0">{t("pointsForm.disabled")}</option>
|
||||
</select>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
|
||||
{t("pointsForm.pointsEnabledHint")}
|
||||
</p>
|
||||
</div>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("pointsForm.settings")}</h2>
|
||||
<form action={savePoints}>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="radio_points_enabled"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("pointsForm.pointsEnabled")}
|
||||
</label>
|
||||
<select
|
||||
id="radio_points_enabled"
|
||||
name="radio_points_enabled"
|
||||
defaultValue={enabled ? "1" : "0"}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<option value="1">{t("pointsForm.enabled")}</option>
|
||||
<option value="0">{t("pointsForm.disabled")}</option>
|
||||
</select>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{t("pointsForm.pointsEnabledHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="radio_points_currency" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("pointsForm.currency")}
|
||||
</label>
|
||||
<select
|
||||
id="radio_points_currency"
|
||||
name="radio_points_currency"
|
||||
defaultValue={selectedCurrency}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{CURRENCIES.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c.charAt(0).toUpperCase() + c.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
|
||||
{t("pointsForm.currencyHint")}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="radio_points_currency"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("pointsForm.currency")}
|
||||
</label>
|
||||
<select
|
||||
id="radio_points_currency"
|
||||
name="radio_points_currency"
|
||||
defaultValue={selectedCurrency}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{CURRENCIES.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c.charAt(0).toUpperCase() + c.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{t("pointsForm.currencyHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="radio_points_per_minute" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("pointsForm.pointsPerMinute")}
|
||||
</label>
|
||||
<input
|
||||
id="radio_points_per_minute"
|
||||
name="radio_points_per_minute"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={perMinute}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
|
||||
{t("pointsForm.pointsPerMinuteHint")}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="radio_points_per_minute"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("pointsForm.pointsPerMinute")}
|
||||
</label>
|
||||
<input
|
||||
id="radio_points_per_minute"
|
||||
name="radio_points_per_minute"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={perMinute}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{t("pointsForm.pointsPerMinuteHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="radio_points_max_per_day" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("pointsForm.maxPerDay")}
|
||||
</label>
|
||||
<input
|
||||
id="radio_points_max_per_day"
|
||||
name="radio_points_max_per_day"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={maxPerDay}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
|
||||
{t("pointsForm.maxPerDayHint")}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="radio_points_max_per_day"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("pointsForm.maxPerDay")}
|
||||
</label>
|
||||
<input
|
||||
id="radio_points_max_per_day"
|
||||
name="radio_points_max_per_day"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={maxPerDay}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{t("pointsForm.maxPerDayHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="radio_points_min_listeners" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("pointsForm.minListeners")}
|
||||
</label>
|
||||
<input
|
||||
id="radio_points_min_listeners"
|
||||
name="radio_points_min_listeners"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={minListeners}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
|
||||
{t("pointsForm.minListenersHint")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="radio_points_min_listeners"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("pointsForm.minListeners")}
|
||||
</label>
|
||||
<input
|
||||
id="radio_points_min_listeners"
|
||||
name="radio_points_min_listeners"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={minListeners}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{t("pointsForm.minListenersHint")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end mt-4">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("pointsForm.save")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
<div className="flex justify-end mt-4">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("pointsForm.save")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+220
-154
@@ -1,174 +1,240 @@
|
||||
import Link from "next/link";
|
||||
import { createRadioRank, deleteRadioRank, updateRadioRank } from "@/actions/admin-radio-extra";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Medal } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
createRadioRank,
|
||||
deleteRadioRank,
|
||||
updateRadioRank,
|
||||
} from "@/actions/admin-radio-extra";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Rank = {
|
||||
id: bigint;
|
||||
name: string;
|
||||
description: string | null;
|
||||
badgeCode: string | null;
|
||||
isActive: boolean;
|
||||
id: bigint;
|
||||
name: string;
|
||||
description: string | null;
|
||||
badgeCode: string | null;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
export default async function AdminRadioRanksPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let ranks: Rank[] = [];
|
||||
let dbError = false;
|
||||
let ranks: Rank[] = [];
|
||||
let dbError = false;
|
||||
|
||||
try {
|
||||
ranks = await prisma.radioRanks.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
description: true,
|
||||
badgeCode: true,
|
||||
isActive: true,
|
||||
},
|
||||
orderBy: { id: "asc" },
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
ranks = [];
|
||||
}
|
||||
try {
|
||||
ranks = await prisma.radioRanks.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
description: true,
|
||||
badgeCode: true,
|
||||
isActive: true,
|
||||
},
|
||||
orderBy: { id: "asc" },
|
||||
});
|
||||
} catch {
|
||||
dbError = true;
|
||||
ranks = [];
|
||||
}
|
||||
|
||||
const activeCount = ranks.filter((r) => r.isActive).length;
|
||||
const activeCount = ranks.filter((r) => r.isActive).length;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Medal size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("ranksForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("ranksForm.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Medal size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("ranksForm.title")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("ranksForm.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("ranksForm.dbError")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label={t("ranks")} value={ranks.length} icon="\u{1F396}\uFE0F" />
|
||||
<StatusCard
|
||||
label={t("ranksForm.active")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{2705}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("ranksForm.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("ranks")}
|
||||
value={ranks.length}
|
||||
icon="\u{1F396}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("ranksForm.active")}
|
||||
value={activeCount}
|
||||
state={activeCount > 0 ? "ok" : "neutral"}
|
||||
icon="\u{2705}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("ranksForm.addRank")}</h2>
|
||||
<form action={createRadioRank} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<div>
|
||||
<label htmlFor="new_name" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("ranksForm.name")}
|
||||
</label>
|
||||
<input id="new_name" name="name" required style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="new_badge" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("ranksForm.badgeCode")}
|
||||
</label>
|
||||
<input id="new_badge" name="badgeCode" style={{ width: "100%" }} />
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label style={{ display: "inline-flex", gap: "0.4rem", alignItems: "center" }}>
|
||||
<input type="checkbox" name="isActive" value="1" defaultChecked /> {t("ranksForm.active")}
|
||||
</label>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label htmlFor="new_desc" style={{ display: "block", fontWeight: 700 }}>
|
||||
{t("ranksForm.description")}
|
||||
</label>
|
||||
<input id="new_desc" name="description" style={{ width: "100%" }} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("ranksForm.createRank")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("ranksForm.addRank")}</h2>
|
||||
<form action={createRadioRank} className="admin-card">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_name"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("ranksForm.name")}
|
||||
</label>
|
||||
<input
|
||||
id="new_name"
|
||||
name="name"
|
||||
required
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="new_badge"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("ranksForm.badgeCode")}
|
||||
</label>
|
||||
<input
|
||||
id="new_badge"
|
||||
name="badgeCode"
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "flex-end" }}>
|
||||
<label
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
gap: "0.4rem",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isActive"
|
||||
value="1"
|
||||
defaultChecked
|
||||
/>{" "}
|
||||
{t("ranksForm.active")}
|
||||
</label>
|
||||
</div>
|
||||
<div style={{ gridColumn: "1 / -1" }}>
|
||||
<label
|
||||
htmlFor="new_desc"
|
||||
style={{ display: "block", fontWeight: 700 }}
|
||||
>
|
||||
{t("ranksForm.description")}
|
||||
</label>
|
||||
<input
|
||||
id="new_desc"
|
||||
name="description"
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: "0.75rem" }}>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("ranksForm.createRank")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("ranksForm.existing", { count: ranks.length })}</h2>
|
||||
{ranks.length === 0 ? (
|
||||
<div className="admin-empty">{t("ranksForm.noRanks")}</div>
|
||||
) : (
|
||||
<div className="grid">
|
||||
{ranks.map((r) => (
|
||||
<div key={String(r.id)} className="admin-card">
|
||||
<div className="flex justify-between items-baseline gap-3 mb-2">
|
||||
<strong>#{String(r.id)}</strong>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{r.isActive ? t("ranksForm.activeLabel") : t("ranksForm.inactiveLabel")}
|
||||
</span>
|
||||
</div>
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">
|
||||
{t("ranksForm.existing", { count: ranks.length })}
|
||||
</h2>
|
||||
{ranks.length === 0 ? (
|
||||
<div className="admin-empty">{t("ranksForm.noRanks")}</div>
|
||||
) : (
|
||||
<div className="grid">
|
||||
{ranks.map((r) => (
|
||||
<div key={String(r.id)} className="admin-card">
|
||||
<div className="flex justify-between items-baseline gap-3 mb-2">
|
||||
<strong>#{String(r.id)}</strong>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{r.isActive
|
||||
? t("ranksForm.activeLabel")
|
||||
: t("ranksForm.inactiveLabel")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<form action={updateRadioRank} className="flex items-center gap-2 flex-wrap">
|
||||
<input type="hidden" name="id" value={String(r.id)} />
|
||||
<input
|
||||
name="name"
|
||||
defaultValue={r.name}
|
||||
required
|
||||
placeholder={t("ranksForm.name")}
|
||||
style={{ minWidth: 140 }}
|
||||
/>
|
||||
<input
|
||||
name="badgeCode"
|
||||
defaultValue={r.badgeCode ?? ""}
|
||||
placeholder={t("ranksForm.badgeCode")}
|
||||
style={{ minWidth: 100 }}
|
||||
/>
|
||||
<input
|
||||
name="description"
|
||||
defaultValue={r.description ?? ""}
|
||||
placeholder={t("ranksForm.description")}
|
||||
className="flex-1 min-w-[160px]"
|
||||
/>
|
||||
<label style={{ display: "inline-flex", gap: "0.3rem", alignItems: "center" }}>
|
||||
<input type="checkbox" name="isActive" value="1" defaultChecked={r.isActive} />{" "}
|
||||
{t("ranksForm.active")}
|
||||
</label>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("ranksForm.save")}
|
||||
</button>
|
||||
</form>
|
||||
<form
|
||||
action={updateRadioRank}
|
||||
className="flex items-center gap-2 flex-wrap"
|
||||
>
|
||||
<input type="hidden" name="id" value={String(r.id)} />
|
||||
<input
|
||||
name="name"
|
||||
defaultValue={r.name}
|
||||
required
|
||||
placeholder={t("ranksForm.name")}
|
||||
style={{ minWidth: 140 }}
|
||||
/>
|
||||
<input
|
||||
name="badgeCode"
|
||||
defaultValue={r.badgeCode ?? ""}
|
||||
placeholder={t("ranksForm.badgeCode")}
|
||||
style={{ minWidth: 100 }}
|
||||
/>
|
||||
<input
|
||||
name="description"
|
||||
defaultValue={r.description ?? ""}
|
||||
placeholder={t("ranksForm.description")}
|
||||
className="flex-1 min-w-[160px]"
|
||||
/>
|
||||
<label
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
gap: "0.3rem",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isActive"
|
||||
value="1"
|
||||
defaultChecked={r.isActive}
|
||||
/>{" "}
|
||||
{t("ranksForm.active")}
|
||||
</label>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("ranksForm.save")}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={deleteRadioRank} style={{ marginTop: "0.5rem" }}>
|
||||
<input type="hidden" name="id" value={String(r.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("ranksForm.deleteRank", { id: String(r.id) })}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
<form action={deleteRadioRank} style={{ marginTop: "0.5rem" }}>
|
||||
<input type="hidden" name="id" value={String(r.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("ranksForm.deleteRank", { id: String(r.id) })}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,12 @@
|
||||
import Link from "next/link";
|
||||
import { saveRadioSetting, saveRadioSettings } from "@/actions/admin-radio-extra";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { Settings } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import {
|
||||
saveRadioSetting,
|
||||
saveRadioSettings,
|
||||
} from "@/actions/admin-radio-extra";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
@@ -11,319 +14,526 @@ type Field = { key: string; comment: string };
|
||||
type Group = { title: string; fields: Field[] };
|
||||
|
||||
const GROUPS: Group[] = [
|
||||
{
|
||||
title: "AzureCast & Stream",
|
||||
fields: [
|
||||
{ key: "radio_enabled", comment: "Radio enabled (0=no, 1=yes)" },
|
||||
{ key: "radio_stream_url", comment: "Main stream URL" },
|
||||
{ key: "radio_stream_backup_url", comment: "Backup stream URL" },
|
||||
{ key: "radio_azurecast_base_url", comment: "AzureCast base URL" },
|
||||
{ key: "radio_azurecast_station_id", comment: "AzureCast station ID" },
|
||||
{ key: "radio_azurecast_api_key", comment: "AzureCast API key" },
|
||||
{ key: "radio_azurecast_port", comment: "AzureCast stream port" },
|
||||
{ key: "radio_azurecast_protocol", comment: "AzureCast protocol (http/https)" },
|
||||
{ key: "radio_azurecast_use_proxy", comment: "Use AzureCast proxy (0=no, 1=yes)" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "External sources",
|
||||
fields: [
|
||||
{ key: "radio_sambroadcaster_api_url", comment: "Sambroadcaster API URL" },
|
||||
{ key: "radio_sambroadcaster_password", comment: "Sambroadcaster password" },
|
||||
{ key: "radio_virtual_dj_url", comment: "Virtual DJ URL" },
|
||||
{ key: "radio_virtual_dj_password", comment: "Virtual DJ password" },
|
||||
{ key: "radio_djs_api_url", comment: "DJs API URL" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Player",
|
||||
fields: [
|
||||
{ key: "radio_style", comment: "Player style (dark/light/blue/purple/pink/gold)" },
|
||||
{ key: "radio_player_type", comment: "Player type (default/minimal/embedded)" },
|
||||
{ key: "radio_auto_play", comment: "Auto-play on page load (0=no, 1=yes)" },
|
||||
{ key: "radio_auto_play_delay", comment: "Auto-play delay in seconds" },
|
||||
{ key: "radio_mute_on_start", comment: "Muted on start (0=no, 1=yes)" },
|
||||
{ key: "radio_volume", comment: "Default volume (0-100)" },
|
||||
{ key: "radio_language", comment: "Default language (nl/en/de/fr/es/pt/it/br)" },
|
||||
{ key: "radio_multi_language_enabled", comment: "Multi-language support (0=no, 1=yes)" },
|
||||
{ key: "radio_player_color_primary", comment: "Player primary color" },
|
||||
{ key: "radio_player_color_secondary", comment: "Player secondary color" },
|
||||
{ key: "radio_player_color_text", comment: "Player text color" },
|
||||
{ key: "radio_player_color_accent", comment: "Player accent color" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Now playing & history",
|
||||
fields: [
|
||||
{ key: "radio_now_playing_enabled", comment: "Show now playing info (0=no, 1=yes)" },
|
||||
{ key: "radio_now_playing_api_url", comment: "Now playing API URL" },
|
||||
{ key: "radio_now_playing_cache_duration", comment: "Now playing cache duration in seconds" },
|
||||
{ key: "radio_show_song_history", comment: "Show song history (0=no, 1=yes)" },
|
||||
{ key: "radio_song_history_count", comment: "Number of songs in history" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Listeners",
|
||||
fields: [
|
||||
{ key: "radio_listeners_enabled", comment: "Show listeners count (0=no, 1=yes)" },
|
||||
{ key: "radio_listeners_api_url", comment: "Listeners API URL" },
|
||||
{ key: "radio_listeners_update_interval", comment: "Listeners update interval in seconds" },
|
||||
{ key: "radio_show_listener_peak", comment: "Show listener peak (0=no, 1=yes)" },
|
||||
{ key: "radio_peak_reset_time", comment: "Peak reset time (HH:MM)" },
|
||||
{ key: "radio_store_listener_stats", comment: "Store listener statistics (0=no, 1=yes)" },
|
||||
{ key: "radio_stats_retention_days", comment: "Statistics retention in days" },
|
||||
{ key: "radio_show_listener_graph", comment: "Show listener graph (0=no, 1=yes)" },
|
||||
{ key: "radio_listener_graph_period", comment: "Listener graph period (1h/6h/12h/24h/7d)" },
|
||||
{ key: "radio_show_average_listeners", comment: "Show average listeners (0=no, 1=yes)" },
|
||||
{ key: "radio_show_unique_listeners", comment: "Show unique listeners (0=no, 1=yes)" },
|
||||
{ key: "radio_listener_alerts_enabled", comment: "Enable listener alerts (0=no, 1=yes)" },
|
||||
{ key: "radio_min_listeners_threshold", comment: "Minimum listeners threshold" },
|
||||
{ key: "radio_listener_alert_threshold_high", comment: "High listener alert threshold" },
|
||||
{ key: "radio_listener_alert_threshold_low", comment: "Low listener alert threshold" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "DJ",
|
||||
fields: [
|
||||
{ key: "radio_show_current_dj", comment: "Show current DJ (0=no, 1=yes)" },
|
||||
{ key: "radio_current_dj_id", comment: "Manual DJ user ID" },
|
||||
{ key: "radio_dj_avatar_size", comment: "DJ avatar size in pixels" },
|
||||
{ key: "radio_show_dj_schedule", comment: "Show DJ schedule (0=no, 1=yes)" },
|
||||
{ key: "radio_auto_dj_detection", comment: "Enable auto DJ detection (0=no, 1=yes)" },
|
||||
{ key: "radio_dj_detection_interval", comment: "DJ detection interval in seconds" },
|
||||
{ key: "auto_dj_detected_action", comment: "Action on DJ detection (set_dj/notify/both)" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Shouts & chat",
|
||||
fields: [
|
||||
{ key: "radio_shouts_enabled", comment: "Enable shouts (0=no, 1=yes)" },
|
||||
{ key: "radio_shouts_max_length", comment: "Maximum shout length in characters" },
|
||||
{ key: "radio_shouts_cooldown", comment: "Shout cooldown in seconds" },
|
||||
{ key: "radio_shouts_require_moderation", comment: "Require shout moderation (0=no, 1=yes)" },
|
||||
{ key: "radio_chat_enabled", comment: "Enable live chat (0=no, 1=yes)" },
|
||||
{ key: "radio_chat_position", comment: "Chat position (left/right/bottom)" },
|
||||
{ key: "radio_chat_width", comment: "Chat width in pixels" },
|
||||
{ key: "radio_chat_height", comment: "Chat height in pixels" },
|
||||
{ key: "radio_chat_messages_count", comment: "Number of chat messages to show" },
|
||||
{ key: "radio_chat_show_timestamps", comment: "Show chat timestamps (0=no, 1=yes)" },
|
||||
{ key: "radio_chat_allow_links", comment: "Allow links in chat (0=no, 1=yes)" },
|
||||
{ key: "radio_chat_allow_emojis", comment: "Allow emojis in chat (0=no, 1=yes)" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Requests & widget",
|
||||
fields: [
|
||||
{ key: "radio_request_form_enabled", comment: "Enable song requests (0=no, 1=yes)" },
|
||||
{ key: "radio_request_max_per_user", comment: "Maximum requests per user" },
|
||||
{ key: "radio_request_cooldown", comment: "Request cooldown in seconds" },
|
||||
{ key: "radio_voting_enabled", comment: "Enable request voting (0=no, 1=yes)" },
|
||||
{ key: "radio_voting_show_song_requests", comment: "Show requests with votes (0=no, 1=yes)" },
|
||||
{ key: "radio_widget_enabled", comment: "Enable radio widget (0=no, 1=yes)" },
|
||||
{ key: "radio_widget_show_globally", comment: "Show widget globally (0=no, 1=yes)" },
|
||||
{ key: "radio_widget_position", comment: "Widget position" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Offline & branding",
|
||||
fields: [
|
||||
{ key: "radio_show_offline_message", comment: "Show offline message (0=no, 1=yes)" },
|
||||
{ key: "radio_offline_message", comment: "Offline message text" },
|
||||
{ key: "radio_offline_image", comment: "Offline page image URL" },
|
||||
{ key: "radio_background_image", comment: "Background image URL" },
|
||||
{ key: "radio_logo_url", comment: "Radio logo URL" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Applications",
|
||||
fields: [
|
||||
{ key: "radio_applications_enabled", comment: "Enable DJ applications (0=no, 1=yes)" },
|
||||
{ key: "radio_applications_max_per_day", comment: "Maximum applications per day" },
|
||||
{ key: "radio_applications_require_approval", comment: "Require application approval (0=no, 1=yes)" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Stats display",
|
||||
fields: [
|
||||
{ key: "radio_stats_show_daily", comment: "Show daily statistics (0=no, 1=yes)" },
|
||||
{ key: "radio_stats_show_weekly", comment: "Show weekly statistics (0=no, 1=yes)" },
|
||||
{ key: "radio_stats_show_monthly", comment: "Show monthly statistics (0=no, 1=yes)" },
|
||||
{ key: "radio_stats_show_top_djs", comment: "Show top DJs (0=no, 1=yes)" },
|
||||
{ key: "radio_stats_show_top_songs", comment: "Show top songs (0=no, 1=yes)" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social & contact",
|
||||
fields: [
|
||||
{ key: "radio_social_facebook", comment: "Facebook URL" },
|
||||
{ key: "radio_social_twitter", comment: "Twitter URL" },
|
||||
{ key: "radio_social_instagram", comment: "Instagram URL" },
|
||||
{ key: "radio_social_discord", comment: "Discord URL" },
|
||||
{ key: "radio_social_youtube", comment: "YouTube URL" },
|
||||
{ key: "radio_social_twitch", comment: "Twitch URL" },
|
||||
{ key: "radio_contact_email", comment: "Contact email" },
|
||||
{ key: "radio_contact_phone", comment: "Contact phone" },
|
||||
{ key: "radio_about_text", comment: "About radio text" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Discord webhook & custom code",
|
||||
fields: [
|
||||
{ key: "radio_discord_webhook_url", comment: "Discord webhook URL" },
|
||||
{ key: "radio_discord_enabled", comment: "Enable Discord notifications (0=no, 1=yes)" },
|
||||
{ key: "radio_discord_dj_live", comment: "Discord DJ live notification (0=no, 1=yes)" },
|
||||
{ key: "radio_discord_song_changes", comment: "Discord song change notification (0=no, 1=yes)" },
|
||||
{ key: "radio_discord_custom_message", comment: "Custom Discord message template" },
|
||||
{ key: "radio_custom_css", comment: "Custom CSS code" },
|
||||
{ key: "radio_custom_js", comment: "Custom JavaScript code" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "AzureCast & Stream",
|
||||
fields: [
|
||||
{ key: "radio_enabled", comment: "Radio enabled (0=no, 1=yes)" },
|
||||
{ key: "radio_stream_url", comment: "Main stream URL" },
|
||||
{ key: "radio_stream_backup_url", comment: "Backup stream URL" },
|
||||
{ key: "radio_azurecast_base_url", comment: "AzureCast base URL" },
|
||||
{ key: "radio_azurecast_station_id", comment: "AzureCast station ID" },
|
||||
{ key: "radio_azurecast_api_key", comment: "AzureCast API key" },
|
||||
{ key: "radio_azurecast_port", comment: "AzureCast stream port" },
|
||||
{
|
||||
key: "radio_azurecast_protocol",
|
||||
comment: "AzureCast protocol (http/https)",
|
||||
},
|
||||
{
|
||||
key: "radio_azurecast_use_proxy",
|
||||
comment: "Use AzureCast proxy (0=no, 1=yes)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "External sources",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_sambroadcaster_api_url",
|
||||
comment: "Sambroadcaster API URL",
|
||||
},
|
||||
{
|
||||
key: "radio_sambroadcaster_password",
|
||||
comment: "Sambroadcaster password",
|
||||
},
|
||||
{ key: "radio_virtual_dj_url", comment: "Virtual DJ URL" },
|
||||
{ key: "radio_virtual_dj_password", comment: "Virtual DJ password" },
|
||||
{ key: "radio_djs_api_url", comment: "DJs API URL" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Player",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_style",
|
||||
comment: "Player style (dark/light/blue/purple/pink/gold)",
|
||||
},
|
||||
{
|
||||
key: "radio_player_type",
|
||||
comment: "Player type (default/minimal/embedded)",
|
||||
},
|
||||
{
|
||||
key: "radio_auto_play",
|
||||
comment: "Auto-play on page load (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_auto_play_delay", comment: "Auto-play delay in seconds" },
|
||||
{ key: "radio_mute_on_start", comment: "Muted on start (0=no, 1=yes)" },
|
||||
{ key: "radio_volume", comment: "Default volume (0-100)" },
|
||||
{
|
||||
key: "radio_language",
|
||||
comment: "Default language (nl/en/de/fr/es/pt/it/br)",
|
||||
},
|
||||
{
|
||||
key: "radio_multi_language_enabled",
|
||||
comment: "Multi-language support (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_player_color_primary", comment: "Player primary color" },
|
||||
{
|
||||
key: "radio_player_color_secondary",
|
||||
comment: "Player secondary color",
|
||||
},
|
||||
{ key: "radio_player_color_text", comment: "Player text color" },
|
||||
{ key: "radio_player_color_accent", comment: "Player accent color" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Now playing & history",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_now_playing_enabled",
|
||||
comment: "Show now playing info (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_now_playing_api_url", comment: "Now playing API URL" },
|
||||
{
|
||||
key: "radio_now_playing_cache_duration",
|
||||
comment: "Now playing cache duration in seconds",
|
||||
},
|
||||
{
|
||||
key: "radio_show_song_history",
|
||||
comment: "Show song history (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_song_history_count",
|
||||
comment: "Number of songs in history",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Listeners",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_listeners_enabled",
|
||||
comment: "Show listeners count (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_listeners_api_url", comment: "Listeners API URL" },
|
||||
{
|
||||
key: "radio_listeners_update_interval",
|
||||
comment: "Listeners update interval in seconds",
|
||||
},
|
||||
{
|
||||
key: "radio_show_listener_peak",
|
||||
comment: "Show listener peak (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_peak_reset_time", comment: "Peak reset time (HH:MM)" },
|
||||
{
|
||||
key: "radio_store_listener_stats",
|
||||
comment: "Store listener statistics (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_stats_retention_days",
|
||||
comment: "Statistics retention in days",
|
||||
},
|
||||
{
|
||||
key: "radio_show_listener_graph",
|
||||
comment: "Show listener graph (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_listener_graph_period",
|
||||
comment: "Listener graph period (1h/6h/12h/24h/7d)",
|
||||
},
|
||||
{
|
||||
key: "radio_show_average_listeners",
|
||||
comment: "Show average listeners (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_show_unique_listeners",
|
||||
comment: "Show unique listeners (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_listener_alerts_enabled",
|
||||
comment: "Enable listener alerts (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_min_listeners_threshold",
|
||||
comment: "Minimum listeners threshold",
|
||||
},
|
||||
{
|
||||
key: "radio_listener_alert_threshold_high",
|
||||
comment: "High listener alert threshold",
|
||||
},
|
||||
{
|
||||
key: "radio_listener_alert_threshold_low",
|
||||
comment: "Low listener alert threshold",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "DJ",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_show_current_dj",
|
||||
comment: "Show current DJ (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_current_dj_id", comment: "Manual DJ user ID" },
|
||||
{ key: "radio_dj_avatar_size", comment: "DJ avatar size in pixels" },
|
||||
{
|
||||
key: "radio_show_dj_schedule",
|
||||
comment: "Show DJ schedule (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_auto_dj_detection",
|
||||
comment: "Enable auto DJ detection (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_dj_detection_interval",
|
||||
comment: "DJ detection interval in seconds",
|
||||
},
|
||||
{
|
||||
key: "auto_dj_detected_action",
|
||||
comment: "Action on DJ detection (set_dj/notify/both)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Shouts & chat",
|
||||
fields: [
|
||||
{ key: "radio_shouts_enabled", comment: "Enable shouts (0=no, 1=yes)" },
|
||||
{
|
||||
key: "radio_shouts_max_length",
|
||||
comment: "Maximum shout length in characters",
|
||||
},
|
||||
{ key: "radio_shouts_cooldown", comment: "Shout cooldown in seconds" },
|
||||
{
|
||||
key: "radio_shouts_require_moderation",
|
||||
comment: "Require shout moderation (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_chat_enabled", comment: "Enable live chat (0=no, 1=yes)" },
|
||||
{
|
||||
key: "radio_chat_position",
|
||||
comment: "Chat position (left/right/bottom)",
|
||||
},
|
||||
{ key: "radio_chat_width", comment: "Chat width in pixels" },
|
||||
{ key: "radio_chat_height", comment: "Chat height in pixels" },
|
||||
{
|
||||
key: "radio_chat_messages_count",
|
||||
comment: "Number of chat messages to show",
|
||||
},
|
||||
{
|
||||
key: "radio_chat_show_timestamps",
|
||||
comment: "Show chat timestamps (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_chat_allow_links",
|
||||
comment: "Allow links in chat (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_chat_allow_emojis",
|
||||
comment: "Allow emojis in chat (0=no, 1=yes)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Requests & widget",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_request_form_enabled",
|
||||
comment: "Enable song requests (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_request_max_per_user",
|
||||
comment: "Maximum requests per user",
|
||||
},
|
||||
{ key: "radio_request_cooldown", comment: "Request cooldown in seconds" },
|
||||
{
|
||||
key: "radio_voting_enabled",
|
||||
comment: "Enable request voting (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_voting_show_song_requests",
|
||||
comment: "Show requests with votes (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_widget_enabled",
|
||||
comment: "Enable radio widget (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_widget_show_globally",
|
||||
comment: "Show widget globally (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_widget_position", comment: "Widget position" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Offline & branding",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_show_offline_message",
|
||||
comment: "Show offline message (0=no, 1=yes)",
|
||||
},
|
||||
{ key: "radio_offline_message", comment: "Offline message text" },
|
||||
{ key: "radio_offline_image", comment: "Offline page image URL" },
|
||||
{ key: "radio_background_image", comment: "Background image URL" },
|
||||
{ key: "radio_logo_url", comment: "Radio logo URL" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Applications",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_applications_enabled",
|
||||
comment: "Enable DJ applications (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_applications_max_per_day",
|
||||
comment: "Maximum applications per day",
|
||||
},
|
||||
{
|
||||
key: "radio_applications_require_approval",
|
||||
comment: "Require application approval (0=no, 1=yes)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Stats display",
|
||||
fields: [
|
||||
{
|
||||
key: "radio_stats_show_daily",
|
||||
comment: "Show daily statistics (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_stats_show_weekly",
|
||||
comment: "Show weekly statistics (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_stats_show_monthly",
|
||||
comment: "Show monthly statistics (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_stats_show_top_djs",
|
||||
comment: "Show top DJs (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_stats_show_top_songs",
|
||||
comment: "Show top songs (0=no, 1=yes)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social & contact",
|
||||
fields: [
|
||||
{ key: "radio_social_facebook", comment: "Facebook URL" },
|
||||
{ key: "radio_social_twitter", comment: "Twitter URL" },
|
||||
{ key: "radio_social_instagram", comment: "Instagram URL" },
|
||||
{ key: "radio_social_discord", comment: "Discord URL" },
|
||||
{ key: "radio_social_youtube", comment: "YouTube URL" },
|
||||
{ key: "radio_social_twitch", comment: "Twitch URL" },
|
||||
{ key: "radio_contact_email", comment: "Contact email" },
|
||||
{ key: "radio_contact_phone", comment: "Contact phone" },
|
||||
{ key: "radio_about_text", comment: "About radio text" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Discord webhook & custom code",
|
||||
fields: [
|
||||
{ key: "radio_discord_webhook_url", comment: "Discord webhook URL" },
|
||||
{
|
||||
key: "radio_discord_enabled",
|
||||
comment: "Enable Discord notifications (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_discord_dj_live",
|
||||
comment: "Discord DJ live notification (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_discord_song_changes",
|
||||
comment: "Discord song change notification (0=no, 1=yes)",
|
||||
},
|
||||
{
|
||||
key: "radio_discord_custom_message",
|
||||
comment: "Custom Discord message template",
|
||||
},
|
||||
{ key: "radio_custom_css", comment: "Custom CSS code" },
|
||||
{ key: "radio_custom_js", comment: "Custom JavaScript code" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const CURATED_KEYS = new Set(GROUPS.flatMap((g) => g.fields.map((f) => f.key)));
|
||||
|
||||
export default async function AdminRadioSettingsPage() {
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
const t = await getTranslations("pages.admin.radio");
|
||||
|
||||
let values: Map<string, string> = new Map();
|
||||
let dbError = false;
|
||||
let extra: Field[] = [];
|
||||
let values: Map<string, string> = new Map();
|
||||
let dbError = false;
|
||||
let extra: Field[] = [];
|
||||
|
||||
try {
|
||||
const rows = await prisma.websiteSetting.findMany({
|
||||
select: { key: true, value: true, comment: true },
|
||||
});
|
||||
values = new Map(rows.map((r) => [r.key, r.value]));
|
||||
extra = rows
|
||||
.filter((r) => (r.key.startsWith("radio_") || r.key.startsWith("auto_dj_")) && !CURATED_KEYS.has(r.key))
|
||||
.map((r) => ({ key: r.key, comment: r.comment ?? "" }));
|
||||
} catch {
|
||||
dbError = true;
|
||||
}
|
||||
try {
|
||||
const rows = await prisma.websiteSetting.findMany({
|
||||
select: { key: true, value: true, comment: true },
|
||||
});
|
||||
values = new Map(rows.map((r) => [r.key, r.value]));
|
||||
extra = rows
|
||||
.filter(
|
||||
(r) =>
|
||||
(r.key.startsWith("radio_") || r.key.startsWith("auto_dj_")) &&
|
||||
!CURATED_KEYS.has(r.key),
|
||||
)
|
||||
.map((r) => ({ key: r.key, comment: r.comment ?? "" }));
|
||||
} catch {
|
||||
dbError = true;
|
||||
}
|
||||
|
||||
const groups: Group[] = extra.length
|
||||
? [...GROUPS, { title: t("settingsForm.otherSettings"), fields: extra }]
|
||||
: GROUPS;
|
||||
const groups: Group[] = extra.length
|
||||
? [...GROUPS, { title: t("settingsForm.otherSettings"), fields: extra }]
|
||||
: GROUPS;
|
||||
|
||||
const allKeys = [...CURATED_KEYS, ...extra.map((e) => e.key)].join(",");
|
||||
const allKeys = [...CURATED_KEYS, ...extra.map((e) => e.key)].join(",");
|
||||
|
||||
const totalKeys = CURATED_KEYS.size + extra.length;
|
||||
const configuredKeys = [...CURATED_KEYS].filter((k) => {
|
||||
const v = values.get(k);
|
||||
return v != null && v !== "";
|
||||
}).length;
|
||||
const radioEnabled = (values.get("radio_enabled") ?? "") === "1";
|
||||
const totalKeys = CURATED_KEYS.size + extra.length;
|
||||
const configuredKeys = [...CURATED_KEYS].filter((k) => {
|
||||
const v = values.get(k);
|
||||
return v != null && v !== "";
|
||||
}).length;
|
||||
const radioEnabled = (values.get("radio_enabled") ?? "") === "1";
|
||||
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
return (
|
||||
<main>
|
||||
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
|
||||
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
|
||||
<Link href="/admin/radio/history">{t("history")}</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Settings size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("settingsForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("settingsForm.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Settings size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("settingsForm.title")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("settingsForm.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("settingsForm.dbError")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label="Radio"
|
||||
value={radioEnabled ? t("settingsForm.enabled") : t("settingsForm.disabled")}
|
||||
state={radioEnabled ? "ok" : "danger"}
|
||||
icon="\u{1F4BB}"
|
||||
/>
|
||||
<StatusCard label={t("settingsForm.totalKeys")} value={totalKeys} icon="\u{1F511}" />
|
||||
<StatusCard
|
||||
label={t("settingsForm.configured")}
|
||||
value={`${configuredKeys}/${CURATED_KEYS.size}`}
|
||||
hint={t("settingsForm.curatedHint")}
|
||||
icon="\u{2699}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("settingsForm.customKeys")}
|
||||
value={extra.length}
|
||||
state={extra.length > 0 ? "warn" : "neutral"}
|
||||
icon="\u{2795}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{dbError ? (
|
||||
<div className="admin-card mb-6">
|
||||
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
|
||||
{t("settingsForm.dbError")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label="Radio"
|
||||
value={
|
||||
radioEnabled
|
||||
? t("settingsForm.enabled")
|
||||
: t("settingsForm.disabled")
|
||||
}
|
||||
state={radioEnabled ? "ok" : "danger"}
|
||||
icon="\u{1F4BB}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("settingsForm.totalKeys")}
|
||||
value={totalKeys}
|
||||
icon="\u{1F511}"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("settingsForm.configured")}
|
||||
value={`${configuredKeys}/${CURATED_KEYS.size}`}
|
||||
hint={t("settingsForm.curatedHint")}
|
||||
icon="\u{2699}\uFE0F"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("settingsForm.customKeys")}
|
||||
value={extra.length}
|
||||
state={extra.length > 0 ? "warn" : "neutral"}
|
||||
icon="\u{2795}"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form action={saveRadioSettings}>
|
||||
<input type="hidden" name="__keys" value={allKeys} />
|
||||
<div className="flex justify-end mb-4">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("settingsForm.saveAll")}
|
||||
</button>
|
||||
</div>
|
||||
<form action={saveRadioSettings}>
|
||||
<input type="hidden" name="__keys" value={allKeys} />
|
||||
<div className="flex justify-end mb-4">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("settingsForm.saveAll")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{groups.map((group) => (
|
||||
<section key={group.title} className="admin-card" style={{ marginBottom: "1.25rem" }}>
|
||||
<h2 style={{ marginTop: 0 }}>{group.title}</h2>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{group.fields.map((field) => (
|
||||
<div key={field.key}>
|
||||
<label
|
||||
htmlFor={`f_${field.key}`}
|
||||
style={{ display: "block", fontWeight: 700, fontSize: "0.85rem" }}
|
||||
>
|
||||
{field.key}
|
||||
</label>
|
||||
<input
|
||||
id={`f_${field.key}`}
|
||||
name={field.key}
|
||||
defaultValue={values.get(field.key) ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
{field.comment ? (
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{field.comment}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
{groups.map((group) => (
|
||||
<section
|
||||
key={group.title}
|
||||
className="admin-card"
|
||||
style={{ marginBottom: "1.25rem" }}
|
||||
>
|
||||
<h2 style={{ marginTop: 0 }}>{group.title}</h2>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{group.fields.map((field) => (
|
||||
<div key={field.key}>
|
||||
<label
|
||||
htmlFor={`f_${field.key}`}
|
||||
style={{
|
||||
display: "block",
|
||||
fontWeight: 700,
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
>
|
||||
{field.key}
|
||||
</label>
|
||||
<input
|
||||
id={`f_${field.key}`}
|
||||
name={field.key}
|
||||
defaultValue={values.get(field.key) ?? ""}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
{field.comment ? (
|
||||
<p
|
||||
className="text-xs theme-text-muted dark:theme-text-muted"
|
||||
style={{ margin: "0.2rem 0 0" }}
|
||||
>
|
||||
{field.comment}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("settingsForm.saveAll")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="flex justify-end">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("settingsForm.saveAll")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<section className="admin-card" style={{ marginTop: "1.5rem" }}>
|
||||
<h3 style={{ marginTop: 0 }}>{t("settingsForm.singleKey")}</h3>
|
||||
<form action={saveRadioSetting} className="flex gap-2 flex-wrap">
|
||||
<input name="key" placeholder={t("settingsForm.keyPlaceholder")} required />
|
||||
<input
|
||||
name="value"
|
||||
placeholder={t("settingsForm.valuePlaceholder")}
|
||||
className="flex-1 min-w-[160px]"
|
||||
/>
|
||||
<input name="comment" placeholder={t("settingsForm.commentPlaceholder")} />
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("settingsForm.saveSingle")}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
<section className="admin-card" style={{ marginTop: "1.5rem" }}>
|
||||
<h3 style={{ marginTop: 0 }}>{t("settingsForm.singleKey")}</h3>
|
||||
<form action={saveRadioSetting} className="flex gap-2 flex-wrap">
|
||||
<input
|
||||
name="key"
|
||||
placeholder={t("settingsForm.keyPlaceholder")}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
name="value"
|
||||
placeholder={t("settingsForm.valuePlaceholder")}
|
||||
className="flex-1 min-w-[160px]"
|
||||
/>
|
||||
<input
|
||||
name="comment"
|
||||
placeholder={t("settingsForm.commentPlaceholder")}
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("settingsForm.saveSingle")}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user