|
|
<script context="module"> const UNKNOWN = (Object.freeze||(o => o))({ name: "(Unknown)", subGoals: [], subActivities: [], }); </script>
<script> import { get } from "svelte/store"; import pluralize from "pluralize";
import Boi from "../components/Boi.svelte"; import AddBoi from "../components/AddBoi.svelte"; import Property from "../components/Property.svelte"; import Row from "../components/Row.svelte"; import Col from "../components/Col.svelte"; import Link from "../components/Link.svelte"; import ActivityIcon from "../components/ActivityIcon.svelte"; import PointsBar from "../components/PointsBar.svelte";
import stufflog from "../stores/stufflog"; import modal from "../stores/modal";
import dateStr from "../utils/dateStr";
let activityMap = {}; let scores = {};
function openGoalModal(modalName, id, goalId, subGoalId) { const period = get(stufflog).periods.find(a => a.id === id); const goal = period ? period.goals.find(g => g.id === goalId) : null; const subGoal = goal ? goal.subGoals.find(s => s.id === subGoalId) : null; const activity = goal ? get(stufflog).activities.find(a => a.id === goal.activityId) : null
modal.open(modalName, {period, goal, subGoal, activity}) }
function openLogModal(modalName, id, logId) { const period = get(stufflog).periods.find(a => a.id === id); const row = period ? period.table.find(r => r.log.id === logId) : {}; modal.open(modalName, {period, ...row}) }
$: activityMap = $stufflog.activities.reduce((p, v) => ({...p, [v.id]: v}), {}); </script>
<div class="page"> {#each $stufflog.periods as period (period.id)} <Boi header={period.name}> <Row> <Col size=3><Property label="From" value={dateStr(period.from)} /></Col> <Col size=3><Property label="To" value={dateStr(period.to)} /></Col> <Col size=6> <Property label="Options"> <Link on:click={() => openGoalModal("period.edit", period.id)}>Edit Period</Link>, <Link on:click={() => openGoalModal("periodgoal.add", period.id)}>Add Goal</Link>, {#if period.goals.length > 0} <Link on:click={() => openGoalModal("periodlog.add", period.id)}>Add Log</Link>, {/if} <Link on:click={() => openGoalModal("period.delete", period.id)}>Delete Period</Link> </Property> </Col> </Row> <table> <tr> <th class="th-name">Activity</th> <th class="th-points">Points</th> <th class="th-options">Options</th> </tr> {#each period.goals as goal (goal.id)} <tr> <td> <div class="icon"><ActivityIcon name={(activityMap[goal.activityId] || {name: "(Unknown)"}).icon} /></div> <div class="name">{(activityMap[goal.activityId] || {name: "(Unknown)"}).name}</div> </td> <td><PointsBar value={period.scores[goal.id]} goal={goal.pointCount} /></td> <td class="td-options"> <Link on:click={() => openGoalModal("periodgoal.remove", period.id, goal.id)}>Delete</Link> </td> </tr> {/each} </table> <table> <tr> <th class="th-date">Date</th> <th class="th-log">Goal</th> <th class="th-log">Sub-Activity</th> <th class="th-points2">Amount</th> <th class="th-points2">Points</th> <th class="th-options">Options</th> </tr> {#each period.table as row (row.log.id)} <tr> <td>{dateStr(row.log.date)}</td> <td class:dark={row.activity.name.startsWith("(")}> <div class="icon"><ActivityIcon name={row.activity.icon} /></div> <div class="name">{row.activity.name} {row.subActivity.name}</div> </td> <td class:dark={row.subGoal.name.startsWith("(")}>{row.subGoal.name}</td> <td>{row.log.amount} {pluralize(row.subActivity.unitName, row.log.amount)}</td> <td> <Link on:click={() => openLogModal("periodlog.info", period.id, row.log.id)}>{row.log.score.total}</Link> </td> <td class="td-options"> <Link on:click={() => openLogModal("periodlog.remove", period.id, row.log.id)}>Delete</Link> </td> </tr> {/each} </table> </Boi> {/each} <AddBoi on:click={() => modal.open("period.create")}>Period</AddBoi> </div>
<style> div.page { width: 100ch; max-width: 90%; margin: auto; }
table { width: 100%; padding: 0.5em 0; }
table th, table td { padding: 0em 1ch; } table th { text-align: left; font-size: 0.75em; } table th.th-name { width: 25%; } table th.th-date { width: 25%; } table th.th-points { width: 62.5%; } table th.th-options, table td.td-options { width: 12.5%; text-align: right; } table th.th-log { width: calc(37.5%/2); } table th.th-points2 { width: 12.5%; }
table td.dark { color: #666; }
table td div.icon { position: relative; top: 0.175em; display: inline-block; } table td div.name { display: inline-block; } </style>
|