fixed rp api

2026-06-10 12:03:05 +03:00
parent 5844551038
commit 8eb6505724
17 changed files with 969 additions and 1 deletions
@@ -4,6 +4,7 @@ import { PomodoroProvider } from "./context/PomodoroContext";
 import Character from "./pages/Character";
 import Chat from "./pages/Chat";
 import Fitness from "./pages/Fitness";
+import Shopping from "./pages/Shopping";
 import Memory from "./pages/Memory";
 import Pomodoro from "./pages/Pomodoro";
 import "./App.css";
@@ -22,6 +23,7 @@ export default function App() {
          <NavLink to="/character">Персонаж</NavLink>
          <NavLink to="/memory">Память</NavLink>
          <NavLink to="/fitness">Фитнес</NavLink>
+          <NavLink to="/shopping">Покупки</NavLink>
          <PomodoroWidget compact />
        </nav>
      </header>
@@ -32,6 +34,7 @@ export default function App() {
          <Route path="/character" element={<Character />} />
          <Route path="/memory" element={<Memory />} />
          <Route path="/fitness" element={<Fitness />} />
+          <Route path="/shopping" element={<Shopping />} />
        </Routes>
      </main>
    </div>
@@ -363,4 +363,75 @@ export const api = {
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(updates),
    }),
+
+  getShoppingSnapshot: () => request<ShoppingSnapshot>("/api/v1/shopping"),
+
+  createShoppingList: (name: string) =>
+    request<{ ok: boolean; list: ShoppingList }>("/api/v1/shopping/lists", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name }),
+    }),
+
+  renameShoppingList: (listId: number, name: string) =>
+    request<{ ok: boolean; list: ShoppingList }>(`/api/v1/shopping/lists/${listId}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name }),
+    }),
+
+  deleteShoppingList: (listId: number) =>
+    request<{ ok: boolean }>(`/api/v1/shopping/lists/${listId}`, { method: "DELETE" }),
+
+  addShoppingItems: (payload: {
+    list_id?: number;
+    list_name?: string;
+    items: { text: string; quantity?: number; unit?: string }[];
+  }) =>
+    request<{ ok: boolean }>("/api/v1/shopping/items", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    }),
+
+  setShoppingItemChecked: (itemId: number, checked: boolean) =>
+    request<{ ok: boolean }>(`/api/v1/shopping/items/${itemId}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ checked }),
+    }),
+
+  removeShoppingItem: (itemId: number) =>
+    request<{ ok: boolean }>(`/api/v1/shopping/items/${itemId}`, { method: "DELETE" }),
+
+  clearShoppingChecked: (listId: number) =>
+    request<{ ok: boolean }>(`/api/v1/shopping/lists/${listId}/clear-checked`, {
+      method: "POST",
+    }),
 };
+
+export interface ShoppingListItem {
+  id: number;
+  list_id: number;
+  text: string;
+  quantity: number | null;
+  unit: string;
+  checked: boolean;
+  sort_order: number;
+}
+
+export interface ShoppingList {
+  id: number;
+  name: string;
+  sort_order: number;
+  item_count: number;
+  unchecked_count: number;
+  items?: ShoppingListItem[];
+}
+
+export interface ShoppingSnapshot {
+  lists: ShoppingList[];
+  list_count: number;
+  total_items: number;
+  unchecked_items: number;
+}
@@ -20,6 +20,7 @@ function noticeLabel(content: string): string {
  if (content.startsWith("🌤")) return "погода";
  if (content.startsWith("🎨")) return "картинка";
  if (content.startsWith("⚠️")) return "сервер";
+  if (content.startsWith("🛒")) return "покупки";
  return "система";
 }

@@ -0,0 +1,132 @@
+.shopping-page {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 1rem;
+  height: calc(100vh - 80px);
+  padding: 1rem;
+}
+
+.shopping-sidebar,
+.shopping-main {
+  background: #12151c;
+  border: 1px solid #2f3748;
+  border-radius: 12px;
+  padding: 1rem;
+  overflow: auto;
+}
+
+.shopping-sidebar h3,
+.shopping-main h2 {
+  margin: 0 0 1rem;
+}
+
+.shopping-list-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.shopping-list-btn {
+  text-align: left;
+  background: #1a1f2b;
+  border: 1px solid #2f3748;
+  color: inherit;
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  cursor: pointer;
+}
+
+.shopping-list-btn.active {
+  border-color: #4a7cff;
+  background: #1c2740;
+}
+
+.shopping-list-btn small {
+  display: block;
+  color: #8b95a5;
+  margin-top: 0.2rem;
+}
+
+.shopping-inline-form {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.shopping-inline-form input {
+  flex: 1;
+  border-radius: 8px;
+  border: 1px solid #2f3748;
+  background: #0f1218;
+  color: inherit;
+  padding: 0.55rem 0.7rem;
+}
+
+.shopping-inline-form button,
+.shopping-toolbar button {
+  border-radius: 8px;
+  border: 1px solid #3a4558;
+  background: #2b3445;
+  color: inherit;
+  padding: 0.5rem 0.8rem;
+  cursor: pointer;
+}
+
+.shopping-toolbar {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.shopping-items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.shopping-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.65rem 0.75rem;
+  border-radius: 8px;
+  background: #1a1f2b;
+  border: 1px solid #2a3140;
+}
+
+.shopping-item.checked {
+  opacity: 0.55;
+}
+
+.shopping-item.checked .shopping-item-text {
+  text-decoration: line-through;
+}
+
+.shopping-item-text {
+  flex: 1;
+}
+
+.shopping-item-meta {
+  color: #8b95a5;
+  font-size: 0.85rem;
+}
+
+.shopping-empty {
+  color: #8b95a5;
+}
+
+.shopping-message {
+  margin-top: 0.75rem;
+  color: #8b95a5;
+}
+
+@media (max-width: 900px) {
+  .shopping-page {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+}
@@ -0,0 +1,180 @@
+import { FormEvent, useCallback, useEffect, useState } from "react";
+import { api, ShoppingList, ShoppingSnapshot } from "../api/client";
+import "./Shopping.css";
+
+function formatItemLabel(text: string, quantity: number | null, unit: string) {
+  if (quantity == null) return text;
+  const u = unit.trim();
+  return u ? `${text} — ${quantity} ${u}` : `${text} — ${quantity}`;
+}
+
+export default function Shopping() {
+  const [snapshot, setSnapshot] = useState<ShoppingSnapshot | null>(null);
+  const [activeId, setActiveId] = useState<number | null>(null);
+  const [newListName, setNewListName] = useState("");
+  const [newItemText, setNewItemText] = useState("");
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await api.getShoppingSnapshot();
+      setSnapshot(data);
+      setActiveId((current) => {
+        if (!current && data.lists.length > 0) return data.lists[0].id;
+        if (current && !data.lists.some((l) => l.id === current)) {
+          return data.lists[0]?.id ?? null;
+        }
+        return current;
+      });
+    } catch (err) {
+      setMessage(err instanceof Error ? err.message : "Ошибка загрузки");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load().catch(console.error);
+  }, [load]);
+
+  const activeList: ShoppingList | undefined = snapshot?.lists.find((l) => l.id === activeId);
+
+  const handleCreateList = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!newListName.trim()) return;
+    try {
+      const res = await api.createShoppingList(newListName.trim());
+      setNewListName("");
+      setActiveId(res.list.id);
+      await load();
+    } catch (err) {
+      setMessage(err instanceof Error ? err.message : "Ошибка");
+    }
+  };
+
+  const handleAddItem = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!activeList || !newItemText.trim()) return;
+    try {
+      await api.addShoppingItems({
+        list_id: activeList.id,
+        items: [{ text: newItemText.trim() }],
+      });
+      setNewItemText("");
+      await load();
+    } catch (err) {
+      setMessage(err instanceof Error ? err.message : "Ошибка");
+    }
+  };
+
+  const toggleItem = async (itemId: number, checked: boolean) => {
+    await api.setShoppingItemChecked(itemId, !checked);
+    await load();
+  };
+
+  const removeItem = async (itemId: number) => {
+    await api.removeShoppingItem(itemId);
+    await load();
+  };
+
+  const clearChecked = async () => {
+    if (!activeList) return;
+    await api.clearShoppingChecked(activeList.id);
+    await load();
+  };
+
+  const deleteList = async () => {
+    if (!activeList) return;
+    if (!confirm(`Удалить список «${activeList.name}»?`)) return;
+    await api.deleteShoppingList(activeList.id);
+    setActiveId(null);
+    await load();
+  };
+
+  return (
+    <div className="shopping-page">
+      <aside className="shopping-sidebar">
+        <h3>Списки</h3>
+        <div className="shopping-list-nav">
+          {(snapshot?.lists ?? []).map((list) => (
+            <button
+              key={list.id}
+              type="button"
+              className={`shopping-list-btn ${list.id === activeId ? "active" : ""}`}
+              onClick={() => setActiveId(list.id)}
+            >
+              {list.name}
+              <small>
+                {list.unchecked_count} к покупке · {list.item_count} всего
+              </small>
+            </button>
+          ))}
+          {!snapshot?.lists.length && <div className="shopping-empty">Пока пусто</div>}
+        </div>
+        <form className="shopping-inline-form" onSubmit={handleCreateList}>
+          <input
+            value={newListName}
+            onChange={(e) => setNewListName(e.target.value)}
+            placeholder="Новый список"
+          />
+          <button type="submit">+</button>
+        </form>
+      </aside>
+
+      <section className="shopping-main">
+        {activeList ? (
+          <>
+            <h2>{activeList.name}</h2>
+            <div className="shopping-toolbar">
+              <button type="button" onClick={() => load()} disabled={loading}>
+                Обновить
+              </button>
+              <button type="button" onClick={clearChecked}>
+                Убрать купленное
+              </button>
+              <button type="button" onClick={deleteList}>
+                Удалить список
+              </button>
+            </div>
+
+            <ul className="shopping-items">
+              {(activeList.items ?? []).map((item) => (
+                <li
+                  key={item.id}
+                  className={`shopping-item ${item.checked ? "checked" : ""}`}
+                >
+                  <input
+                    type="checkbox"
+                    checked={item.checked}
+                    onChange={() => toggleItem(item.id, item.checked)}
+                  />
+                  <span className="shopping-item-text">
+                    {formatItemLabel(item.text, item.quantity, item.unit)}
+                  </span>
+                  <span className="shopping-item-meta">#{item.id}</span>
+                  <button type="button" onClick={() => removeItem(item.id)}>
+                    ×
+                  </button>
+                </li>
+              ))}
+            </ul>
+
+            <form className="shopping-inline-form" onSubmit={handleAddItem}>
+              <input
+                value={newItemText}
+                onChange={(e) => setNewItemText(e.target.value)}
+                placeholder="Добавить товар"
+              />
+              <button type="submit">Добавить</button>
+            </form>
+          </>
+        ) : (
+          <div className="shopping-empty">Выбери список или создай новый</div>
+        )}
+        {message && <div className="shopping-message">{message}</div>}
+      </section>
+    </div>
+  );
+}