stufflog/svelte-ui/src/routes/LogPage.svelte

<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>