shopping list: phone-synced card via relay
Pick one #einkauf-tagged card as "active"; its body is pushed to the
relay on every sync.tick and rendered on a phone-friendly session-
auth'd page at /shopping. Phone shows only the open "- [ ]" items as
tappable rows — tapping flips the line to "- [x]" on the relay in
place. The next client tick pulls those toggles back and PATCHes the
local card, so hyprcrd stays the source of truth for item text.
- Relay: shopping_state table (one row per tenant), POST/GET
/api/shopping for content push/pull, POST /api/shopping/check
for phone toggles, GET /shopping for the phone UI.
- Client: hamburger menu in the header with an "Einkaufsliste"
entry that opens a picker listing all #einkauf cards with a
radio for the active one. Timestamp cursors in localStorage
keep push/pull idempotent.
- Phone can only toggle, not edit text — edit stays in hyprcrd,
which makes the merge trivial (last-writer wins by timestamp).
Multi-card support is there (any card with #einkauf is a candidate)
but only one is active for the phone at a time, per the spec.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.6 committed
1 parent
c2485b1307
commit
670f125627
8 files changed
+523
-2
No files matched your search
@@ -233,6 +233,20 @@ $db->exec('CREATE TABLE IF NOT EXISTS chat_room_members (
|
||||
)');
|
||||
$db->exec('CREATE INDEX IF NOT EXISTS idx_chat_room_member_tenant ON chat_room_members(tenant_id, room_uid)');
|
||||
|
||||
// Shopping list: one active card per tenant, body mirrored from the
|
||||
// client. Phone toggles checkboxes in-place via the session UI — no
|
||||
// multi-list fan-out, no history, no attachments. hyprcrd remains the
|
||||
// only surface that edits item text.
|
||||
$db->exec('CREATE TABLE IF NOT EXISTS shopping_state (
|
||||
tenant_id INTEGER PRIMARY KEY,
|
||||
card_uid TEXT NOT NULL,
|
||||
title TEXT NOT NULL DEFAULT "",
|
||||
body TEXT NOT NULL DEFAULT "",
|
||||
updated_at_client TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at_server TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (tenant_id) REFERENCES tenants(id) ON DELETE CASCADE
|
||||
)');
|
||||
|
||||
// Sync-event notifications: replaces the old bot-chat mechanism. When a
|
||||
// client syncs a card they received, they POST here; the sender polls
|
||||
// GET /api/sync-events and surfaces each as a transient toast. Rows are
|
||||
|
||||
@@ -0,0 +1,267 @@
|
||||
<?php
|
||||
// Shopping-list routes:
|
||||
// POST /api/shopping (client) upsert active card {uid, title, body, updated_at}
|
||||
// GET /api/shopping (client + session) read current state
|
||||
// POST /api/shopping/check (session) toggle one line {line, checked}
|
||||
// GET /shopping (session) phone-friendly UI
|
||||
//
|
||||
// Plaintext on purpose — shopping-list content is low-stakes and
|
||||
// everything here is session- or client-auth'd. No per-tenant key
|
||||
// dance like chat / collab-buckets. If that needs tightening later,
|
||||
// it's a one-table migration.
|
||||
|
||||
if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
|
||||
|
||||
$clientTenant = $clientTenant ?? authClient($db);
|
||||
$tenant = $sessionTenant ?: $clientTenant;
|
||||
|
||||
function shoppingLoad(PDO $db, int $tenantId): ?array {
|
||||
$stmt = $db->prepare('SELECT card_uid, title, body, updated_at_client, updated_at_server FROM shopping_state WHERE tenant_id = :t');
|
||||
$stmt->execute(['t' => $tenantId]);
|
||||
$row = $stmt->fetch();
|
||||
return $row ?: null;
|
||||
}
|
||||
|
||||
// ── POST /api/shopping ────────────────────────────────────────
|
||||
// Client pushes the currently-active card's content. `updated_at`
|
||||
// is the client's timestamp — used for lose-the-race checks.
|
||||
|
||||
if ($route === '/api/shopping' && $method === 'POST') {
|
||||
if (!$clientTenant) jsonResponse(['error' => 'unauthorized'], 401);
|
||||
$input = json_decode(file_get_contents('php://input'), true) ?: [];
|
||||
$uid = trim((string)($input['card_uid'] ?? ''));
|
||||
$title = (string)($input['title'] ?? '');
|
||||
$body = (string)($input['body'] ?? '');
|
||||
$clientTs = trim((string)($input['updated_at'] ?? '')) ?: date('Y-m-d H:i:s');
|
||||
if ($uid === '') jsonResponse(['error' => 'card_uid required'], 400);
|
||||
|
||||
$existing = shoppingLoad($db, (int)$clientTenant['id']);
|
||||
// Skip the write when the client is pushing an older version of
|
||||
// the same card than what's already stored (phone toggled
|
||||
// meanwhile). Still return 200 so the client doesn't retry in a
|
||||
// loop — they just haven't pulled yet.
|
||||
if ($existing && $existing['card_uid'] === $uid
|
||||
&& strcmp($existing['updated_at_server'], $clientTs) > 0) {
|
||||
jsonResponse([
|
||||
'ok' => true,
|
||||
'stored' => false,
|
||||
'reason' => 'server newer — pull first',
|
||||
'updated_at_server' => $existing['updated_at_server'],
|
||||
]);
|
||||
}
|
||||
$now = date('Y-m-d H:i:s');
|
||||
$db->prepare('
|
||||
INSERT INTO shopping_state (tenant_id, card_uid, title, body, updated_at_client, updated_at_server)
|
||||
VALUES (:t, :u, :ti, :b, :c, :s)
|
||||
ON CONFLICT(tenant_id) DO UPDATE SET
|
||||
card_uid = excluded.card_uid,
|
||||
title = excluded.title,
|
||||
body = excluded.body,
|
||||
updated_at_client = excluded.updated_at_client,
|
||||
updated_at_server = excluded.updated_at_server
|
||||
')->execute([
|
||||
't' => $clientTenant['id'],
|
||||
'u' => $uid,
|
||||
'ti' => $title,
|
||||
'b' => $body,
|
||||
'c' => $clientTs,
|
||||
's' => $now,
|
||||
]);
|
||||
jsonResponse(['ok' => true, 'stored' => true, 'updated_at_server' => $now]);
|
||||
}
|
||||
|
||||
// ── GET /api/shopping ────────────────────────────────────────
|
||||
// Both the client (to pull phone-made toggles back) and the
|
||||
// session-auth'd phone UI poll this.
|
||||
|
||||
if ($route === '/api/shopping' && $method === 'GET') {
|
||||
if (!$tenant) jsonResponse(['error' => 'unauthorized'], 401);
|
||||
$state = shoppingLoad($db, (int)$tenant['id']);
|
||||
if (!$state) jsonResponse(['ok' => true, 'state' => null]);
|
||||
jsonResponse(['ok' => true, 'state' => $state]);
|
||||
}
|
||||
|
||||
// ── POST /api/shopping/check ─────────────────────────────────
|
||||
// Phone-side toggle. Body: { line: "- [ ] milk", checked: true }.
|
||||
// We match the exact line once to keep merges simple; if the line
|
||||
// isn't found (hyprcrd just rewrote it), the caller reloads and
|
||||
// retries. Bumps updated_at_server so the next client pull sees
|
||||
// the change.
|
||||
|
||||
if ($route === '/api/shopping/check' && $method === 'POST') {
|
||||
if (!$sessionTenant) jsonResponse(['error' => 'unauthorized'], 401);
|
||||
$input = json_decode(file_get_contents('php://input'), true) ?: [];
|
||||
$line = (string)($input['line'] ?? '');
|
||||
$checked = !empty($input['checked']);
|
||||
if ($line === '') jsonResponse(['error' => 'line required'], 400);
|
||||
|
||||
$state = shoppingLoad($db, (int)$sessionTenant['id']);
|
||||
if (!$state) jsonResponse(['error' => 'no active list'], 404);
|
||||
$body = $state['body'];
|
||||
$lines = preg_split("/\r\n|\n|\r/", $body);
|
||||
$hit = false;
|
||||
foreach ($lines as $i => $l) {
|
||||
if ($l !== $line) continue;
|
||||
$toggled = $checked
|
||||
? preg_replace('/^(\s*-\s*)\[\s\]/', '$1[x]', $l, 1)
|
||||
: preg_replace('/^(\s*-\s*)\[[xX]\]/', '$1[ ]', $l, 1);
|
||||
if ($toggled === $l) continue; // not a checkbox line
|
||||
$lines[$i] = $toggled;
|
||||
$hit = true;
|
||||
break;
|
||||
}
|
||||
if (!$hit) jsonResponse(['error' => 'line not found (list may have been edited — reload)'], 409);
|
||||
|
||||
$newBody = implode("\n", $lines);
|
||||
$now = date('Y-m-d H:i:s');
|
||||
$db->prepare('UPDATE shopping_state SET body = :b, updated_at_server = :s WHERE tenant_id = :t')
|
||||
->execute(['b' => $newBody, 's' => $now, 't' => $sessionTenant['id']]);
|
||||
jsonResponse(['ok' => true, 'updated_at_server' => $now]);
|
||||
}
|
||||
|
||||
// ── GET /shopping ────────────────────────────────────────────
|
||||
// Phone UI. Simple static shell; the JS fetches /api/shopping and
|
||||
// renders only unchecked items. Tapping one POSTs to /api/shopping/check.
|
||||
|
||||
if ($route === '/shopping' && $method === 'GET') {
|
||||
if (!$sessionTenant) {
|
||||
// Bounce through the relay's session-auth flow.
|
||||
header('Location: ' . dirname($_SERVER['SCRIPT_NAME']) . '/');
|
||||
exit;
|
||||
}
|
||||
header('Content-Type: text/html; charset=utf-8');
|
||||
$userLabel = htmlspecialchars($sessionTenant['username'], ENT_QUOTES);
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="theme-color" content="#0f172a">
|
||||
<title>Einkaufsliste</title>
|
||||
<style>
|
||||
:root { color-scheme: dark; }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; background: #0f172a; color: #e2e8f0; font-family: system-ui, -apple-system, sans-serif; }
|
||||
header { position: sticky; top: 0; background: #0f172a; padding: 14px 16px; border-bottom: 1px solid #334155; display: flex; align-items: center; gap: 10px; }
|
||||
header h1 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
|
||||
header .user { font-size: 12px; color: #64748b; }
|
||||
header .refresh { background: none; border: 1px solid #334155; color: #94a3b8; padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
|
||||
main { padding: 12px; }
|
||||
.title { font-size: 13px; color: #94a3b8; margin: 0 0 12px; }
|
||||
.empty { text-align: center; padding: 40px 16px; color: #64748b; }
|
||||
ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
|
||||
li { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 14px 16px; font-size: 16px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 0.12s, opacity 0.3s, background 0.12s; }
|
||||
li:active { transform: scale(0.98); background: #273446; }
|
||||
li.checked { opacity: 0.35; text-decoration: line-through; }
|
||||
.stale { font-size: 11px; color: #64748b; text-align: center; margin-top: 16px; }
|
||||
.err { background: #7f1d1d; color: #fecaca; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Einkaufsliste</h1>
|
||||
<span class="user"><?= $userLabel ?></span>
|
||||
<button class="refresh" id="refresh">↻</button>
|
||||
</header>
|
||||
<main>
|
||||
<p class="title" id="title">…</p>
|
||||
<div id="err" class="err" style="display:none"></div>
|
||||
<ul id="items"></ul>
|
||||
<p class="stale" id="stale"></p>
|
||||
</main>
|
||||
<script>
|
||||
(function(){
|
||||
const base = location.pathname.replace(/\/shopping\/?$/, '');
|
||||
const elTitle = document.getElementById('title');
|
||||
const elItems = document.getElementById('items');
|
||||
const elStale = document.getElementById('stale');
|
||||
const elErr = document.getElementById('err');
|
||||
const btnRefresh = document.getElementById('refresh');
|
||||
|
||||
let lastServerTs = null;
|
||||
let busy = false;
|
||||
|
||||
function showErr(msg) {
|
||||
if (!msg) { elErr.style.display = 'none'; elErr.textContent = ''; return; }
|
||||
elErr.textContent = msg; elErr.style.display = 'block';
|
||||
}
|
||||
|
||||
function parseItems(body) {
|
||||
const lines = String(body || '').split(/\r\n|\n|\r/);
|
||||
const items = [];
|
||||
for (const l of lines) {
|
||||
const m = /^\s*-\s*\[([ xX])\]\s*(.*)$/.exec(l);
|
||||
if (!m) continue;
|
||||
const checked = m[1].toLowerCase() === 'x';
|
||||
if (!checked) items.push({ line: l, text: m[2] });
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const res = await fetch(base + '/api/shopping', { credentials: 'same-origin' });
|
||||
const data = await res.json();
|
||||
if (!data.ok || !data.state) {
|
||||
elTitle.textContent = '';
|
||||
elItems.innerHTML = '<div class="empty">keine aktive Einkaufsliste</div>';
|
||||
elStale.textContent = '';
|
||||
return;
|
||||
}
|
||||
const { title, body, updated_at_server } = data.state;
|
||||
lastServerTs = updated_at_server;
|
||||
elTitle.textContent = title || '';
|
||||
const items = parseItems(body);
|
||||
if (!items.length) {
|
||||
elItems.innerHTML = '<div class="empty">✓ alles erledigt</div>';
|
||||
} else {
|
||||
elItems.innerHTML = '';
|
||||
for (const it of items) {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = it.text;
|
||||
li.dataset.line = it.line;
|
||||
li.addEventListener('click', () => check(li));
|
||||
elItems.appendChild(li);
|
||||
}
|
||||
}
|
||||
const ago = Math.round((Date.now() - Date.parse(updated_at_server.replace(' ','T') + 'Z')) / 1000);
|
||||
elStale.textContent = 'zuletzt synchronisiert: vor ' + (ago < 60 ? ago + 's' : Math.round(ago/60) + 'min');
|
||||
showErr('');
|
||||
} catch (e) {
|
||||
showErr('laden fehlgeschlagen: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function check(li) {
|
||||
if (busy) return;
|
||||
busy = true;
|
||||
li.classList.add('checked');
|
||||
try {
|
||||
const res = await fetch(base + '/api/shopping/check', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ line: li.dataset.line, checked: true }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!data.ok) throw new Error(data.error || 'fehler');
|
||||
setTimeout(() => { busy = false; load(); }, 300);
|
||||
} catch (e) {
|
||||
busy = false;
|
||||
li.classList.remove('checked');
|
||||
showErr(e.message);
|
||||
}
|
||||
}
|
||||
|
||||
btnRefresh.addEventListener('click', () => load());
|
||||
document.addEventListener('visibilitychange', () => { if (!document.hidden) load(); });
|
||||
load();
|
||||
setInterval(() => { if (!document.hidden && !busy) load(); }, 15000);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<?php
|
||||
exit;
|
||||
}
|
||||
@@ -65,10 +65,15 @@ if (str_starts_with($route, '/api/')) {
|
||||
require __DIR__ . '/inc/routes/collab-buckets.php';
|
||||
require __DIR__ . '/inc/routes/collab-cards.php';
|
||||
require __DIR__ . '/inc/routes/collab-locks.php';
|
||||
require __DIR__ . '/inc/routes/shopping.php';
|
||||
|
||||
jsonResponse(['error' => 'not found'], 404);
|
||||
}
|
||||
|
||||
// ── UI ─────────────────────────────────────────────────────────────
|
||||
|
||||
// Shopping UI lives outside /api/ so phones can bookmark a clean URL.
|
||||
// File has both /api/shopping* and /shopping handlers; they short-
|
||||
// circuit on match, so loading it here for the non-API path is safe.
|
||||
require __DIR__ . '/inc/routes/shopping.php';
|
||||
require __DIR__ . '/ui/layout.php';
|
||||
Reference in new issue
Block a user