JCEEE/famdone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

user testing and fixing minor issues

Browse Source
This commit is contained in:
JCEEE
2026-08-31 19:26:55 +01:00
parent a521edaabf
commit fdacfc7e5c
4 changed files with 184 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/admin/+page.svelte
+56 -17
View File
@@ -78,10 +78,6 @@
};
showTplModal = true;
}
const allTemplates = $derived([
...(data.choreTemplates || []).map((t: any) => ({ ...t, kind: 'chore' as TplKind })),
...(data.bonusTemplates || []).map((t: any) => ({ ...t, kind: 'reward' as TplKind }))
]);
</script>
<div class="shell">
@@ -321,34 +317,30 @@
</CardGrid>
<CardGrid>
<Card cols={3} title="Templates" accent="#8b5cf6">
<p class="muted">
Platform-owned chore &amp; reward droplets. Families assign these as read-only sources — they
can't create their own.
</p>
<Card cols={2} title="Chore Templates" accent="#2563eb">
<div class="tpl-grid">
{#each allTemplates as t}
{#each (data.choreTemplates || []) as t}
<div class="tpl-card" style="border-left-color:{t.color}">
<div class="tpl-head">
<TemplateIcon name={t.icon} size={20} color={t.color} />
<strong>{t.name}</strong>
</div>
<div class="tpl-meta">
<span class="badge">{t.kind}</span>
{#if t.isPocketMoney}<span class="badge pocket">Pocket Money</span>{/if}
<span class="badge chore">{t.defaultFrequency}</span>
<span class="badge">{t.defaultType}</span>
</div>
<div class="tpl-actions">
<button class="link-btn" onclick={() => openEditTpl(t.kind, t)}>Edit</button>
<button class="link-btn" onclick={() => openEditTpl('chore', t)}>Edit</button>
<form
method="POST"
action="?/deleteTemplate"
use:enhance={() => {
return async ({ result, update }) => {
return async ({ update }) => {
update();
};
}}
>
<input type="hidden" name="kind" value={t.kind} />
<input type="hidden" name="kind" value="chore" />
<input type="hidden" name="id" value={t.id} />
<button
type="submit"
@@ -361,12 +353,57 @@
</div>
</div>
{/each}
{#if allTemplates.length === 0}
<p class="muted">No templates yet.</p>
{#if (data.choreTemplates || []).length === 0}
<p class="muted">No chore templates yet.</p>
{/if}
</div>
<div class="tpl-new">
<Button onclick={() => openNewTpl('chore')}>+ Chore template</Button>
</div>
</Card>
<Card cols={1} title="Reward Templates" accent="#8b5cf6">
<div class="tpl-grid">
{#each (data.bonusTemplates || []) as t}
<div class="tpl-card" style="border-left-color:{t.color}">
<div class="tpl-head">
<TemplateIcon name={t.icon} size={20} color={t.color} />
<strong>{t.name}</strong>
</div>
<div class="tpl-meta">
<span class="badge reward">{t.type}</span>
<span class="badge">{t.rewardType}</span>
{#if t.isPocketMoney}<span class="badge pocket">Pocket Money</span>{/if}
</div>
<div class="tpl-actions">
<button class="link-btn" onclick={() => openEditTpl('reward', t)}>Edit</button>
<form
method="POST"
action="?/deleteTemplate"
use:enhance={() => {
return async ({ update }) => {
update();
};
}}
>
<input type="hidden" name="kind" value="reward" />
<input type="hidden" name="id" value={t.id} />
<button
type="submit"
class="link-btn danger"
onclick={(e) => {
if (!confirm('Delete this template?')) e.preventDefault();
}}>Delete</button
>
</form>
</div>
</div>
{/each}
{#if (data.bonusTemplates || []).length === 0}
<p class="muted">No reward templates yet.</p>
{/if}
</div>
<div class="tpl-new">
<Button onclick={() => openNewTpl('reward')}>+ Reward template</Button>
</div>
</Card>
@@ -979,6 +1016,8 @@
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.badge.chore { background: #dbeafe; color: #1e40af; }
.badge.reward { background: #ede9fe; color: #6d28d9; }
.badge.pocket { background: #dcfce7; color: #166534; }
.check { display: flex; align-items: center; gap: 0.4rem; }