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

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