update ui and other frontend updates
This commit is contained in:
JCEEE
@@ -0,0 +1,171 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { enhance } from '$app/forms';
|
||||
import { famStore } from '$lib/stores/fam.svelte';
|
||||
import { ViewHeader, CardGrid, Card, Button } from '$lib/components';
|
||||
import { onDestroy } from 'svelte';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
let fam = $state(data.fam)
|
||||
let famSlug = $state(page.params.fam)
|
||||
|
||||
let childInviteUrl = $derived(`${page.url.origin}/join/${fam?.inviteCode}`)
|
||||
let addName = $state('')
|
||||
let rename = $state('')
|
||||
let selectedMember = $state('')
|
||||
let payday = $state(fam?.payday != null ? Number(fam.payday) : 1)
|
||||
let showQR = $state(false)
|
||||
let qrDataUrl = $state('')
|
||||
let copied = $state(false)
|
||||
let parentInviteEmail = $state('')
|
||||
|
||||
let selectedInviteUrl = $derived(
|
||||
selectedMember
|
||||
? `${page.url.origin}/join/${fam?.inviteCode}/${selectedMember}`
|
||||
: childInviteUrl
|
||||
)
|
||||
|
||||
let members = $state(famStore.initialized ? famStore.members : (data.members || []))
|
||||
|
||||
function copy(url: string) {
|
||||
navigator.clipboard.writeText(url)
|
||||
copied = true
|
||||
setTimeout(() => copied = false, 2000)
|
||||
}
|
||||
|
||||
async function generateQR(url: string) {
|
||||
qrDataUrl = await QRCode.toDataURL(url, { width: 200, margin: 1 })
|
||||
}
|
||||
|
||||
function handleParentInvite() {
|
||||
alert('Parent invite coming soon — email would be sent to ' + parentInviteEmail)
|
||||
}
|
||||
</script>
|
||||
|
||||
<ViewHeader title="Settings" />
|
||||
|
||||
<CardGrid>
|
||||
<Card title="Family Name">
|
||||
<form method="POST" action="?/renameFam" use:enhance>
|
||||
<input name="name" bind:value={rename} placeholder={fam?.name || 'Family name'} required />
|
||||
<Button type="submit" size="sm">Rename</Button>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
<Card title="Members ({members.length})" cols={2}>
|
||||
<form method="POST" action="?/addMember" use:enhance>
|
||||
<input name="name" bind:value={addName} placeholder="Member name" required />
|
||||
<Button type="submit" size="sm">Add</Button>
|
||||
</form>
|
||||
|
||||
<ul>
|
||||
{#each members as m}
|
||||
<li>
|
||||
<span class="dot" style="background:{m.color}"></span>
|
||||
{m.name}
|
||||
{m.deviceToken ? '' : ' (pending join)'}
|
||||
<a href="/{famSlug}/{m.name}" class="link">Kanban</a>
|
||||
<form method="POST" action="?/deleteMember" use:enhance class="inline">
|
||||
<input type="hidden" name="id" value={m.id} />
|
||||
<Button type="submit" variant="danger" size="sm" onclick={() => confirm('Remove {m.name}?')}>Remove</Button>
|
||||
</form>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<Card title="Payday" cols={1}>
|
||||
<form method="POST" action="?/updatePayday" use:enhance>
|
||||
<select name="payday" bind:value={payday}>
|
||||
<option value={0}>Sunday</option>
|
||||
<option value={1}>Monday</option>
|
||||
<option value={2}>Tuesday</option>
|
||||
<option value={3}>Wednesday</option>
|
||||
<option value={4}>Thursday</option>
|
||||
<option value={5}>Friday</option>
|
||||
<option value={6}>Saturday</option>
|
||||
</select>
|
||||
<Button type="submit" size="sm">Set payday</Button>
|
||||
</form>
|
||||
<p class="hint">The week starts on this day for tracking weekly chores and bonus cycles.</p>
|
||||
</Card>
|
||||
|
||||
<Card title="Invite Children" cols={1}>
|
||||
<p class="code">{fam?.inviteCode || '...'}</p>
|
||||
|
||||
<div class="invite-row">
|
||||
<label>Member:</label>
|
||||
<select bind:value={selectedMember}>
|
||||
<option value="">— General link —</option>
|
||||
{#each members as m}
|
||||
<option value={m.name}>{m.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<p class="hint">Re-joining a member will disconnect their old device.</p>
|
||||
|
||||
<p class="invite-url">{selectedInviteUrl}</p>
|
||||
|
||||
<div class="actions">
|
||||
<Button onclick={() => copy(selectedInviteUrl)} size="sm">
|
||||
{copied ? 'Copied!' : 'Copy link'}
|
||||
</Button>
|
||||
|
||||
<Button onclick={async () => { showQR = !showQR; if (!showQR) { qrDataUrl = ''; } else { await generateQR(selectedInviteUrl); } }} size="sm">
|
||||
{showQR ? 'Hide QR' : 'Show QR'}
|
||||
</Button>
|
||||
|
||||
<form method="POST" action="?/regenInvite" use:enhance class="inline">
|
||||
<Button type="submit" size="sm">Renew code</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{#if showQR && qrDataUrl}
|
||||
<img src={qrDataUrl} alt="QR Code" class="qr" />
|
||||
{/if}
|
||||
</Card>
|
||||
|
||||
<Card title="Invite Parent" cols={1}>
|
||||
<p class="hint">Send an email invitation for another parent to join as an admin.</p>
|
||||
<div class="invite-row">
|
||||
<input
|
||||
type="email"
|
||||
bind:value={parentInviteEmail}
|
||||
placeholder="parent@example.com"
|
||||
/>
|
||||
<Button onclick={handleParentInvite} size="sm">Send invite</Button>
|
||||
</div>
|
||||
<p class="hint">They will set up their own password on first login.</p>
|
||||
</Card>
|
||||
|
||||
<Card title="Data" cols={1}>
|
||||
<div class="actions">
|
||||
<Button variant="ghost" size="sm" disabled>Download CSV (coming soon)</Button>
|
||||
<Button variant="danger" size="sm" disabled>Delete Family (coming soon)</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
<style>
|
||||
.section { margin: 0.5rem 0; }
|
||||
.code { font-family: monospace; font-size: 1.2rem; padding: 0.5rem; background: #f3f4f6; border-radius: 4px; display: inline-block; }
|
||||
.invite-url { font-family: monospace; font-size: 0.9rem; word-break: break-all; background: #f9fafb; padding: 0.4rem; border-radius: 4px; }
|
||||
.invite-row { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
|
||||
.invite-row select { padding: 0.4rem; border: 1px solid #ccc; border-radius: 4px; flex: 1; }
|
||||
.invite-row input { padding: 0.4rem; border: 1px solid #ccc; border-radius: 4px; flex: 1; }
|
||||
.hint { font-size: 0.85rem; color: #9ca3af; }
|
||||
.actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
|
||||
.qr { margin-top: 0.5rem; border: 1px solid #e5e7eb; border-radius: 4px; }
|
||||
ul { list-style: none; padding: 0; }
|
||||
li { padding: 0.3rem 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
|
||||
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.link { font-size: 0.85rem; color: #6366f1; }
|
||||
form { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
|
||||
input, select, button { padding: 0.4rem 0.7rem; border: 1px solid #ccc; border-radius: 4px; }
|
||||
button { background: #6366f1; color: white; border: none; cursor: pointer; }
|
||||
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.danger { background: #dc2626; font-size: 0.8rem; padding: 0.2rem 0.5rem; }
|
||||
.inline { display: inline; margin: 0; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user