+ {/* Zoom Section */}
+
+
+ {isLoading ? (
+
+ ) : (
+
+
+
+ setDisplayZoom(parseInt(e.target.value, 10))}
+ disabled={isLoading}
+ className="flex-1 h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer dark:bg-blue-800"
+ style={{
+ background: `linear-gradient(to right, rgb(96, 165, 250) 0%, rgb(96, 165, 250) ${((displayZoom - 50) / 150) * 100}%, rgb(229, 231, 235) ${((displayZoom - 50) / 150) * 100}%, rgb(229, 231, 235) 100%)`
+ }}
+ />
+
+ {
+ const val = parseInt(e.target.value, 10);
+ if (!isNaN(val) && val >= 50 && val <= 200) {
+ setDisplayZoom(val);
+ }
+ }}
+ disabled={isLoading}
+ className="w-14 h-8 rounded px-2 text-sm font-bold text-center text-blue-700 dark:text-blue-400 bg-white dark:bg-blue-900/50 border border-blue-200 dark:border-blue-800 tabular-nums"
+ />
+ %
+
+
+
+
+
+
+
+ )}
-
-
-
+
+ {/* Flags Grid 2x2 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/settings/DisplayZoomSettingsCard.tsx b/components/settings/DisplayZoomSettingsCard.tsx
new file mode 100644
index 0000000..33a3ecb
--- /dev/null
+++ b/components/settings/DisplayZoomSettingsCard.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Zap, ZoomIn, ZoomOut } from "lucide-react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+
+export const DISPLAY_ZOOM_KEY = "display-zoom";
+
+export function DisplayZoomSettingsCard() {
+ const { t } = useTranslation();
+ const [zoom, setZoom] = useState(100);
+ const [savedZoom, setSavedZoom] = useState(100);
+ const [isLoading, setIsLoading] = useState(true);
+ const [isSaving, setIsSaving] = useState(false);
+
+ useEffect(() => {
+ fetch("/api/display-config")
+ .then((res) => res.ok ? res.json() : null)
+ .then((cfg) => {
+ if (typeof cfg?.displayZoom === "number" && cfg.displayZoom >= 50 && cfg.displayZoom <= 200) {
+ setZoom(cfg.displayZoom);
+ setSavedZoom(cfg.displayZoom);
+ localStorage.setItem(DISPLAY_ZOOM_KEY, String(cfg.displayZoom));
+ } else {
+ const stored = localStorage.getItem(DISPLAY_ZOOM_KEY);
+ if (stored) {
+ const parsed = parseInt(stored, 10);
+ if (!isNaN(parsed) && parsed >= 50 && parsed <= 200) {
+ setZoom(parsed);
+ setSavedZoom(parsed);
+ }
+ }
+ }
+ })
+ .catch(() => {
+ const stored = localStorage.getItem(DISPLAY_ZOOM_KEY);
+ if (stored) {
+ const parsed = parseInt(stored, 10);
+ if (!isNaN(parsed) && parsed >= 50 && parsed <= 200) {
+ setZoom(parsed);
+ setSavedZoom(parsed);
+ }
+ }
+ })
+ .finally(() => setIsLoading(false));
+ }, []);
+
+ const handleSave = async () => {
+ setIsSaving(true);
+ try {
+ await fetch("/api/display-config", {
+ method: "PATCH",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ displayZoom: zoom }),
+ });
+ setSavedZoom(zoom);
+ localStorage.setItem(DISPLAY_ZOOM_KEY, String(zoom));
+ toast.success(t("settings.zoomSaved"));
+ } catch {
+ toast.error(t("settings.saveError"));
+ } finally {
+ setIsSaving(false);
+ }
+ };
+
+ const hasChanges = zoom !== savedZoom;
+
+ return (
+
+
+
+
+ {t("settings.displayZoom")}
+
+
+ {t("settings.displayZoomDesc")}
+
+
+
+ {isLoading ? (
+
+ ) : (
+
+
+
+
+ setZoom(parseInt(e.target.value, 10))}
+ disabled={isLoading}
+ className="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer dark:bg-blue-800"
+ style={{
+ background: `linear-gradient(to right, rgb(96, 165, 250) 0%, rgb(96, 165, 250) ${((zoom - 50) / 150) * 100}%, rgb(229, 231, 235) ${((zoom - 50) / 150) * 100}%, rgb(229, 231, 235) 100%)`
+ }}
+ />
+
+
+
+ {zoom}%
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/lib/display-config-store.ts b/lib/display-config-store.ts
index cbb192d..4ca5d6d 100644
--- a/lib/display-config-store.ts
+++ b/lib/display-config-store.ts
@@ -15,6 +15,8 @@ export interface DisplayConfig {
ticketNumberMax: number;
stationsEnabled: boolean;
fullscreenAlertEnabled: boolean;
+ autoScrollPagesEnabled: boolean;
+ displayZoom: number;
}
type Subscriber = (text: string) => void;
@@ -30,6 +32,8 @@ const DEFAULT_CONFIG: DisplayConfig = {
ticketNumberMax: 100,
stationsEnabled: false,
fullscreenAlertEnabled: true,
+ autoScrollPagesEnabled: true,
+ displayZoom: 100,
};
// In-memory cache — populated lazily on first read/write
@@ -83,7 +87,8 @@ export function updateConfig(patch: Partial
): DisplayConfig {
if (patch.displayMode !== undefined || patch.eventName !== undefined ||
patch.numberDisplay !== undefined || patch.ticketNumberMax !== undefined ||
- patch.stationsEnabled !== undefined || patch.fullscreenAlertEnabled !== undefined) {
+ patch.stationsEnabled !== undefined || patch.fullscreenAlertEnabled !== undefined ||
+ patch.autoScrollPagesEnabled !== undefined || patch.displayZoom !== undefined) {
configSubscribers.forEach((fn) => {
try { fn({ ...cache }); } catch { /* subscriber gone */ }
});
@@ -109,6 +114,8 @@ export function subscribe(fn: Subscriber): () => void {
}
export function subscribeConfig(fn: ConfigSubscriber): () => void {
+ loadFromFile();
+ fn({ ...cache });
configSubscribers.add(fn);
return () => configSubscribers.delete(fn);
}
diff --git a/lib/i18n/locales/en.ts b/lib/i18n/locales/en.ts
index ffd5e7a..dfcd275 100644
--- a/lib/i18n/locales/en.ts
+++ b/lib/i18n/locales/en.ts
@@ -63,6 +63,7 @@ export const en = {
displayModeHybridDesc: "¾ of the page for preparing orders and ¼ for ready orders",
display: "Display",
displayDesc: "Edit the display page",
+ displayOptions: "Display options",
operativeMode: "Operative mode",
operativeModeDesc: "Select what to show on the public display page",
saving: "Saving...",
@@ -94,6 +95,11 @@ export const en = {
stationsSaved: "Stations setting saved",
fullscreenAlertEnabled: "Full-screen alert",
fullscreenAlertEnabledDesc: "Show a full-screen overlay when an order is ready",
+ autoScrollPagesEnabled: "Auto-scroll pages",
+ autoScrollPagesEnabledDesc: "Automatically scroll through order pages every 10 seconds",
+ displayZoom: "Display zoom",
+ displayZoomDesc: "Zoom in or out to see more or fewer orders",
+ zoomSaved: "Display zoom saved",
allOrders: "All orders"
},
session: {
diff --git a/lib/i18n/locales/it.ts b/lib/i18n/locales/it.ts
index a2ccc12..785c1c5 100644
--- a/lib/i18n/locales/it.ts
+++ b/lib/i18n/locales/it.ts
@@ -63,6 +63,7 @@ export const it = {
displayModeHybridDesc: "¾ della pagina per gli ordini in preparazione e ¼ per gli ordini pronti",
display: "Display",
displayDesc: "Modifica la pagina del display",
+ displayOptions: "Opzioni display",
operativeMode: "Modalità operativa",
operativeModeDesc: "Seleziona cosa mostrare nella pagina display pubblica",
saving: "Salvataggio...",
@@ -94,6 +95,11 @@ export const it = {
stationsSaved: "Impostazione postazioni salvata",
fullscreenAlertEnabled: "Alert a tutto schermo",
fullscreenAlertEnabledDesc: "Mostra un overlay a tutto schermo quando un ordine è pronto",
+ autoScrollPagesEnabled: "Scorrimento automatico pagine",
+ autoScrollPagesEnabledDesc: "Scorre automaticamente le pagine di ordini ogni 10 secondi",
+ displayZoom: "Zoom del display",
+ displayZoomDesc: "Zoom in o out per vedere più o meno ordini",
+ zoomSaved: "Zoom del display salvato",
allOrders: "Tutti gli ordini"
},
session: {