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 Link from "../components/Link.svelte";
  
  import Table from "../components/Table.svelte";
  import SubActivityTable from "../components/tables/SubActivityTable";

  function onActivityOption(modalName, id) {
    const activity = get(stufflog).activities.find(a => a.id === id);

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

<div class="page">
  <AddBoi top on:click={() => modal.open("activity.create")}>Activity</AddBoi>
  {#each $stufflog.activities as activity (activity.id)}
    <Boi header={activity.name} icon={activity.icon}>
      <Table headers={["ID", "Daily Bonus", "Options"]} percentages={[25, 25, 50]}>
        <tr>
          <td>{activity.id}</td>
          <td>{activity.dailyBonus}</td>
          <td>
            <Link on:click={() => onActivityOption("activity.edit", activity.id)}>Edit Activity</Link>,
            <Link on:click={() => onActivityOption("subactivity.add", activity.id)}>Add Sub-Activity</Link>,
            <Link on:click={() => onActivityOption("activity.delete", activity.id)}>Delete Activity</Link>
          </td>
        </tr>
      </Table>
    
      <SubActivityTable
        activity={activity} 
        on:option={(e) => modal.open(e.detail.name, e.detail)}
      />
    </Boi>
  {:else}
    <div class="empty">No data.</div>
  {/each}
</div>

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