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

<script>
  import {get} from "svelte/store";

  import pluralize from "pluralize";
  import Icon from 'fa-svelte'
  import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle'

  import stufflog from "../stores/stufflog";
  import modal from "../stores/modal";

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

  function openModal(modalName, id, subId) {
    const activity = get(stufflog).activities.find(a => a.id === id);
    const subActivity = (activity || {subActivities:[]}).subActivities.find(s => s.id === subId);

    modal.open(modalName, {activity, subActivity})
  }
</script>

<div class="page">
  {#each $stufflog.activities as activity (activity.id)}
    <Boi header={activity.name} icon={activity.icon}>
      <Row>
        <Col size=3><Property label="ID" value={activity.id} /></Col>
        <Col size=3><Property label="Daily Bonus" value={activity.dailyBonus} /></Col>
        <Col size=6>
          <Property label="Options">
            <Link on:click={() => openModal("activity.edit", activity.id)}>Edit Activity</Link>,
            <Link on:click={() => openModal("subactivity.add", activity.id)}>Add Sub-Activity</Link>,
            <Link on:click={() => openModal("activity.delete", activity.id)}>Delete Activity</Link>
          </Property>
        </Col>
      </Row>
      <table>
        <tr>
          <th class="th-name">Sub-Activity</th>
          <th class="th-value">Value</th>
          <th class="th-options">Options</th>
        </tr>
        {#each activity.subActivities as subActivtiy (subActivtiy.id)}
          <tr>
            <td>{subActivtiy.name}</td>
            <td>{subActivtiy.value} per {pluralize(subActivtiy.unitName, 1)}</td>
            <td>
              <Link on:click={() => openModal("subactivity.edit", activity.id, subActivtiy.id)}>Edit</Link>,
              <Link on:click={() => openModal("subactivity.remove", activity.id, subActivtiy.id)}>Delete</Link>
            </td>
          </tr>
        {/each}
      </table>
    </Boi>
  {:else}
    <div class="empty">No data.</div>
  {/each}
  <AddBoi on:click={() => modal.open("activity.create")}>Activity</AddBoi>
</div>

<style>
  div.page {
    width: 100ch;
    max-width: 90%;
    margin: auto;
  }

  table {
    width: 100%;
    padding: 0.5em 0;
  }
  th, td {
    padding: 0em 1ch;
  }
  th {
    text-align: left;
    font-size: 0.75em;
  }
  th.th-name {
    width: 50%;
  }
  th.th-value {
    width: 25%;
  }
  th.th-options {
    width: 25%;
  }
</style>