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.
38 lines
1.2 KiB
38 lines
1.2 KiB
<script>
|
|
import { createEventDispatcher } from 'svelte';
|
|
import pluralize from "pluralize";
|
|
|
|
import Link from "../Link.svelte";
|
|
import Table from "../Table.svelte";
|
|
import ActivityIcon from "../ActivityIcon.svelte";
|
|
import PointsBar from "../PointsBar.svelte";
|
|
import ActivityDisplay from "../ActivityDisplay.svelte";
|
|
|
|
export let period = {goals: []};
|
|
export let activities = [];
|
|
|
|
const dispatch = createEventDispatcher();
|
|
let activityMap = {};
|
|
|
|
function onOption(name, goalId) {
|
|
const goal = period.goals.find(g => g.id === goalId);
|
|
const activity = activities.find(a => a.id === goal.activityId)
|
|
|
|
dispatch("option", {name, period, goal, activity})
|
|
}
|
|
|
|
</script>
|
|
|
|
<Table headers={["Activity", "Points", "Options"]} percentages={[25, 55, 20]}>
|
|
{#each period.goals as goal (goal.id)}
|
|
<tr>
|
|
<td class="ellipsis">
|
|
<ActivityDisplay activity={activities.find(a => a.id === goal.activityId)} />
|
|
</td>
|
|
<td><PointsBar value={period.scores[goal.id]} goal={goal.pointCount} /></td>
|
|
<td class="td-options">
|
|
<Link on:click={() => onOption("periodgoal.remove", goal.id)}>Delete</Link>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</Table>
|