feat: initial

2026-06-03 03:08:57 +03:30
parent 3d9585ac5c
commit 6fa30eb29a
45 changed files with 7053 additions and 86 deletions
@@ -0,0 +1,285 @@
+"use client";
+
+import { useState } from "react";
+import { apiFetch, ApiError, toFormData } from "@/lib/api";
+import { useList } from "@/lib/useResource";
+import { useToast } from "@/components/toast";
+import { DataTable, type Column } from "@/components/DataTable";
+import {
+  Badge,
+  Button,
+  ConfirmDialog,
+  Field,
+  Input,
+  Modal,
+  PageHeader,
+  Switch,
+} from "@/components/ui";
+import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
+import { toFa } from "@/lib/utils";
+import { MediaPreview } from "@/components/MediaPreview";
+import { pickUrl, SOUND_KEYS, VIDEO_KEYS, IMAGE_KEYS } from "@/lib/media";
+
+interface Scene {
+  id: number;
+  name: string;
+  order?: number;
+  is_active?: boolean;
+}
+
+export default function ScenesPage() {
+  const { data, loading, error, reload } = useList<Scene>("/scenes");
+  const toast = useToast();
+
+  const [editing, setEditing] = useState<Scene | null>(null);
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [order, setOrder] = useState("");
+  const [isActive, setIsActive] = useState(true);
+  const [image, setImage] = useState<File | null>(null);
+  const [video, setVideo] = useState<File | null>(null);
+  const [sound, setSound] = useState<File | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const [deleting, setDeleting] = useState<Scene | null>(null);
+  const [removing, setRemoving] = useState(false);
+
+  function openCreate() {
+    setEditing(null);
+    setName("");
+    setOrder("");
+    setIsActive(true);
+    setImage(null);
+    setVideo(null);
+    setSound(null);
+    setOpen(true);
+  }
+  function openEdit(row: Scene) {
+    setEditing(row);
+    setName(row.name ?? "");
+    setOrder(row.order != null ? String(row.order) : "");
+    setIsActive(!!row.is_active);
+    setImage(null);
+    setVideo(null);
+    setSound(null);
+    setOpen(true);
+  }
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      // Scenes are file-bearing: both create and update use multipart POST.
+      const body = toFormData({
+        name,
+        order,
+        is_active: isActive,
+        image,
+        video,
+        sound,
+      });
+      if (editing) {
+        await apiFetch(`/scenes/${editing.id}`, { method: "POST", body });
+        toast.success("صحنه ویرایش شد.");
+      } else {
+        await apiFetch("/scenes", { method: "POST", body });
+        toast.success("صحنه افزوده شد.");
+      }
+      setOpen(false);
+      reload();
+    } catch (err) {
+      toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function confirmDelete() {
+    if (!deleting) return;
+    setRemoving(true);
+    try {
+      await apiFetch(`/scenes/${deleting.id}`, { method: "DELETE" });
+      toast.success("صحنه حذف شد.");
+      setDeleting(null);
+      reload();
+    } catch (err) {
+      toast.error(err instanceof ApiError ? err.message : "خطا در حذف");
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  const columns: Column<Scene>[] = [
+    { key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-24" },
+    { key: "name", header: "نام صحنه" },
+    {
+      key: "image",
+      header: "تصویر",
+      className: "w-20",
+      render: (r) => (
+        <MediaPreview kind="image" src={pickUrl(r, IMAGE_KEYS)} label={r.name} />
+      ),
+    },
+    {
+      key: "video",
+      header: "ویدیو",
+      className: "w-20",
+      render: (r) => (
+        <MediaPreview kind="video" src={pickUrl(r, VIDEO_KEYS)} label={r.name} />
+      ),
+    },
+    {
+      key: "sound",
+      header: "صدا",
+      className: "w-20",
+      render: (r) => (
+        <MediaPreview kind="audio" src={pickUrl(r, SOUND_KEYS)} label={r.name} />
+      ),
+    },
+    {
+      key: "order",
+      header: "ترتیب",
+      render: (r) => (r.order != null ? toFa(r.order) : "—"),
+      className: "w-24",
+    },
+    {
+      key: "is_active",
+      header: "وضعیت",
+      render: (r) =>
+        r.is_active ? (
+          <Badge tone="success">فعال</Badge>
+        ) : (
+          <Badge tone="neutral">غیرفعال</Badge>
+        ),
+      className: "w-28",
+    },
+  ];
+
+  return (
+    <div>
+      <PageHeader
+        title="صحنه‌ها"
+        subtitle="مدیریت صحنه‌های تصویری و صوتی پس‌زمینه"
+        action={
+          <Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
+            صحنه جدید
+          </Button>
+        }
+      />
+
+      <DataTable
+        columns={columns}
+        rows={data}
+        loading={loading}
+        error={error}
+        onRetry={reload}
+        emptyMessage="هنوز صحنه‌ای ثبت نشده است."
+        emptyAction={
+          <Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
+            صحنه جدید
+          </Button>
+        }
+        actions={(row) => (
+          <>
+            <Button
+              variant="ghost"
+              onClick={() => openEdit(row)}
+              aria-label="ویرایش"
+            >
+              <EditIcon className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => setDeleting(row)}
+              aria-label="حذف"
+              className="text-danger"
+            >
+              <TrashIcon className="h-4 w-4" />
+            </Button>
+          </>
+        )}
+      />
+
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        title={editing ? "ویرایش صحنه" : "صحنه جدید"}
+        footer={
+          <>
+            <Button variant="secondary" onClick={() => setOpen(false)}>
+              انصراف
+            </Button>
+            <Button form="scene-form" type="submit" loading={saving}>
+              ذخیره
+            </Button>
+          </>
+        }
+      >
+        <form id="scene-form" onSubmit={save} className="flex flex-col gap-4">
+          <Field label="نام صحنه" required>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="مثلاً جنگل بارانی"
+              required
+              autoFocus
+            />
+          </Field>
+
+          <Field label="ترتیب">
+            <Input
+              type="number"
+              value={order}
+              onChange={(e) => setOrder(e.target.value)}
+              placeholder="0"
+              dir="ltr"
+            />
+          </Field>
+
+          <Switch checked={isActive} onChange={setIsActive} label="فعال" />
+
+          <Field
+            label="تصویر"
+            hint={editing ? "در صورت عدم انتخاب، تصویر قبلی حفظ می‌شود." : undefined}
+          >
+            <Input
+              type="file"
+              accept="image/*"
+              onChange={(e) => setImage(e.target.files?.[0] ?? null)}
+            />
+          </Field>
+
+          <Field
+            label="ویدیو"
+            hint={editing ? "در صورت عدم انتخاب، ویدیوی قبلی حفظ می‌شود." : undefined}
+          >
+            <Input
+              type="file"
+              accept="video/*"
+              onChange={(e) => setVideo(e.target.files?.[0] ?? null)}
+            />
+          </Field>
+
+          <Field
+            label="صدا"
+            hint={editing ? "در صورت عدم انتخاب، صدای قبلی حفظ می‌شود." : undefined}
+          >
+            <Input
+              type="file"
+              accept="audio/*"
+              onChange={(e) => setSound(e.target.files?.[0] ?? null)}
+            />
+          </Field>
+        </form>
+      </Modal>
+
+      <ConfirmDialog
+        open={!!deleting}
+        message={`آیا از حذف «${deleting?.name}» مطمئن هستید؟`}
+        loading={removing}
+        onConfirm={confirmDelete}
+        onClose={() => setDeleting(null)}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,143 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { apiFetch, ApiError } from "@/lib/api";
+import { useItem, useList } from "@/lib/useResource";
+import { useToast } from "@/components/toast";
+import {
+  Button,
+  Card,
+  Field,
+  Input,
+  PageHeader,
+  Select,
+  Spinner,
+  Switch,
+} from "@/components/ui";
+import { toFa } from "@/lib/utils";
+
+interface Scene {
+  id: number;
+  name: string;
+}
+
+interface SceneSettings {
+  active_scene_id?: number | string | null;
+  scene_volume?: number | string | null;
+  background_play_seconds?: number | string | null;
+  video_enabled?: boolean;
+}
+
+export default function SceneSettingsPage() {
+  const { data, loading } = useItem<SceneSettings>("/scene-settings");
+  const { data: scenes } = useList<Scene>("/scenes");
+  const toast = useToast();
+
+  const [activeSceneId, setActiveSceneId] = useState("");
+  const [sceneVolume, setSceneVolume] = useState("");
+  const [backgroundPlaySeconds, setBackgroundPlaySeconds] = useState("");
+  const [videoEnabled, setVideoEnabled] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!data) return;
+    setActiveSceneId(
+      data.active_scene_id != null ? String(data.active_scene_id) : "",
+    );
+    setSceneVolume(data.scene_volume != null ? String(data.scene_volume) : "");
+    setBackgroundPlaySeconds(
+      data.background_play_seconds != null
+        ? String(data.background_play_seconds)
+        : "",
+    );
+    setVideoEnabled(!!data.video_enabled);
+  }, [data]);
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      await apiFetch("/scene-settings", {
+        method: "PUT",
+        body: {
+          active_scene_id: activeSceneId ? Number(activeSceneId) : null,
+          scene_volume: sceneVolume ? Number(sceneVolume) : null,
+          background_play_seconds: backgroundPlaySeconds
+            ? Number(backgroundPlaySeconds)
+            : null,
+          video_enabled: videoEnabled,
+        },
+      });
+      toast.success("تنظیمات صحنه ذخیره شد.");
+    } catch (err) {
+      toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="تنظیمات صحنه"
+        subtitle="پیکربندی صحنه فعال، صدا و پخش پس‌زمینه"
+      />
+
+      {loading ? (
+        <div className="flex justify-center py-16">
+          <Spinner />
+        </div>
+      ) : (
+        <Card className="max-w-xl">
+          <form onSubmit={save} className="flex flex-col gap-4">
+            <Field label="صحنه فعال">
+              <Select
+                value={activeSceneId}
+                onChange={(e) => setActiveSceneId(e.target.value)}
+              >
+                <option value="">انتخاب صحنه</option>
+                {scenes.map((s) => (
+                  <option key={s.id} value={String(s.id)}>
+                    {s.name} ({toFa(s.id)})
+                  </option>
+                ))}
+              </Select>
+            </Field>
+
+            <Field label="میزان صدای صحنه">
+              <Input
+                type="number"
+                value={sceneVolume}
+                onChange={(e) => setSceneVolume(e.target.value)}
+                placeholder="0"
+                dir="ltr"
+              />
+            </Field>
+
+            <Field label="مدت پخش پس‌زمینه (ثانیه)">
+              <Input
+                type="number"
+                value={backgroundPlaySeconds}
+                onChange={(e) => setBackgroundPlaySeconds(e.target.value)}
+                placeholder="0"
+                dir="ltr"
+              />
+            </Field>
+
+            <Switch
+              checked={videoEnabled}
+              onChange={setVideoEnabled}
+              label="نمایش ویدیو فعال باشد"
+            />
+
+            <div className="flex justify-end pt-2">
+              <Button type="submit" loading={saving}>
+                ذخیره تنظیمات
+              </Button>
+            </div>
+          </form>
+        </Card>
+      )}
+    </div>
+  );
+}