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.
91 lines
2.7 KiB
91 lines
2.7 KiB
<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>
|