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.
93 lines
2.1 KiB
93 lines
2.1 KiB
<script lang="ts">
|
|
import type { IconName } from "../external/icons";
|
|
import type { GoalResult } from "../models/goal";
|
|
import type { ModalData } from "../stores/modal";
|
|
import DaysLeft from "./DaysLeft.svelte";
|
|
import Icon from "./Icon.svelte";
|
|
import Option from "./Option.svelte";
|
|
import OptionRow from "./OptionRow.svelte";
|
|
import Progress from "./Progress.svelte";
|
|
|
|
export let goal: GoalResult = null;
|
|
export let showAllOptions = false;
|
|
|
|
let iconName: IconName = "question";
|
|
let mdGoalEdit: ModalData;
|
|
let mdGoalDelete: ModalData;
|
|
|
|
$: iconName = goal.group.icon as IconName;
|
|
$: mdGoalEdit = {name:"goal.edit", goal};
|
|
$: mdGoalDelete = {name:"goal.delete", goal};
|
|
</script>
|
|
|
|
<div class="goal" class:full={showAllOptions}>
|
|
<div class="icon"><Icon block name={iconName} /></div>
|
|
<div class="body">
|
|
<div class="header">
|
|
<div class="name">{goal.name}</div>
|
|
<div class="times">
|
|
<DaysLeft startTime={goal.startTime} endTime={goal.endTime} />
|
|
</div>
|
|
</div>
|
|
{#if showAllOptions}
|
|
<div class="description">
|
|
<p>{goal.description}</p>
|
|
</div>
|
|
<OptionRow>
|
|
<Option open={mdGoalEdit}>Edit</Option>
|
|
<Option open={mdGoalDelete}>Delete</Option>
|
|
</OptionRow>
|
|
{/if}
|
|
<div class="progress">
|
|
<Progress count={goal.completedAmount} target={goal.amount} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
div.goal {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
div.goal.full {
|
|
padding-bottom: 1em;
|
|
}
|
|
div.icon {
|
|
font-size: 2em;
|
|
padding: 0 0.5ch;
|
|
width: 2ch;
|
|
padding-top: 0.125em;
|
|
color: #333;
|
|
}
|
|
div.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
div.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
div.name {
|
|
font-size: 1em;
|
|
margin: auto 0;
|
|
vertical-align: middle;
|
|
font-weight: 100;
|
|
}
|
|
div.times {
|
|
margin-left: auto;
|
|
margin-right: 0.25ch;
|
|
}
|
|
|
|
div.progress {
|
|
padding-top: 0.125em;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
div.description > p {
|
|
padding: 0;
|
|
margin: 0.25em 0;
|
|
}
|
|
</style>
|