You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.0 KiB
62 lines
2.0 KiB
<script>
|
|
import { get } from "svelte/store";
|
|
import pluralize from "pluralize";
|
|
|
|
import Boi from "../components/Boi.svelte";
|
|
import AddBoi from "../components/AddBoi.svelte";
|
|
import Link from "../components/Link.svelte";
|
|
|
|
import Table from "../components/Table.svelte";
|
|
import GoalTable from "../components/tables/GoalTable.svelte";
|
|
import LogTable from "../components/tables/LogTable.svelte";
|
|
|
|
import stufflog from "../stores/stufflog";
|
|
import modal from "../stores/modal";
|
|
import items from "../stores/items";
|
|
|
|
import dateStr from "../utils/dateStr";
|
|
|
|
function getPeriod(id) {
|
|
return get(stufflog).periods.find(a => a.id === id)
|
|
}
|
|
</script>
|
|
|
|
<div class="page">
|
|
<AddBoi top on:click={() => modal.open("period.create")}>Period</AddBoi>
|
|
{#each $stufflog.periods as period (period.id)}
|
|
<Boi header={period.name}>
|
|
<Table headers={["From", "To", "Options"]} percentages={[25, 25, 50]}>
|
|
<td>{dateStr(period.from)}</td>
|
|
<td>{dateStr(period.to)}</td>
|
|
<td>
|
|
<Link on:click={() => modal.open("period.edit", {period: getPeriod(period.id)})}>Edit Period</Link>,
|
|
<Link on:click={() => modal.open("periodgoal.add", {period: getPeriod(period.id)})}>Add Goal</Link>,
|
|
{#if period.goals.length > 0}
|
|
<Link on:click={() => modal.open("periodlog.add", {period: getPeriod(period.id)})}>Add Log</Link>,
|
|
{/if}
|
|
<Link on:click={() => modal.open("period.delete", {period: getPeriod(period.id)})}>Delete Period</Link>
|
|
</td>
|
|
</Table>
|
|
|
|
<GoalTable
|
|
activities={$stufflog.activities}
|
|
period={period}
|
|
on:option={(e) => modal.open(e.detail.name, e.detail)}
|
|
/>
|
|
<LogTable
|
|
activities={$stufflog.activities}
|
|
items={$items}
|
|
period={period}
|
|
on:option={(e) => modal.open(e.detail.name, e.detail)}
|
|
/>
|
|
</Boi>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
div.page {
|
|
width: 100ch;
|
|
max-width: 90%;
|
|
margin: auto;
|
|
}
|
|
</style>
|