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.
58 lines
1.6 KiB
58 lines
1.6 KiB
<script lang="ts">
|
|
import Boi from "../components/Boi.svelte";
|
|
import GoalEntry from "../components/GoalEntry.svelte";
|
|
import type { ModalData } from "../stores/modal";
|
|
import goalStore from "../stores/goal";
|
|
import RefreshSelection from "../components/RefreshSelection.svelte";
|
|
import DateRangeSelect from "../components/DateRangeSelect.svelte";
|
|
import { allOffsets, pastOffsets } from "../utils/date-range";
|
|
import EveryMinute from "../components/EveryMinute.svelte";
|
|
|
|
const lsValue = localStorage.getItem("sl2.goalspage.range")
|
|
|
|
const mdGoalAdd: ModalData = {name: "goal.add"};
|
|
let range = allOffsets.find(o => o.name === lsValue) || pastOffsets[0];
|
|
let now = new Date();
|
|
|
|
$: localStorage.setItem("sl2.goalspage.range", range.name);
|
|
|
|
$: {
|
|
const [min, max] = range.calculate(now);
|
|
|
|
if (!$goalStore.loading) {
|
|
if ($goalStore.stale || $goalStore.filter.minTime?.getTime() != min.getTime() || $goalStore.filter.maxTime?.getTime() != max.getTime()) {
|
|
goalStore.load({
|
|
minTime: min,
|
|
maxTime: max,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="page">
|
|
<DateRangeSelect label="Time Filter" styled bind:value={range} />
|
|
<div class="goal-list" class:loading={$goalStore.loading}>
|
|
{#each $goalStore.goals as goal (goal.id)}
|
|
<GoalEntry showAllOptions goal={goal} />
|
|
{/each}
|
|
<Boi open={mdGoalAdd}>Add Goal</Boi>
|
|
</div>
|
|
</div>
|
|
<RefreshSelection />
|
|
<EveryMinute now={now} />
|
|
|
|
<style>
|
|
div.page {
|
|
display: block;
|
|
margin: auto;
|
|
max-width: 100%;
|
|
width: 640px;
|
|
margin-top: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
div.goal-list.loading {
|
|
opacity: 0.75;
|
|
}
|
|
</style>
|