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.
124 lines
3.1 KiB
124 lines
3.1 KiB
<script lang="ts">
|
|
import EmptyList from "../components/EmptyList.svelte";
|
|
import GoalEntry from "../components/GoalEntry.svelte";
|
|
import ProjectEntry from "../components/ProjectEntry.svelte";
|
|
import type { ProjectResult } from "../models/project";
|
|
import { fpGoalStore } from "../stores/goal";
|
|
import projectStore, { fpProjectStore } from "../stores/project";
|
|
import taskStore, { fpTaskStore } from "../stores/tasks";
|
|
|
|
let fakeProject: ProjectResult
|
|
let sortedProjects: ProjectResult[]
|
|
|
|
$: {
|
|
if ($fpGoalStore.stale && !$fpGoalStore.loading) {
|
|
fpGoalStore.load({
|
|
maxTime: new Date(Date.now() + (86400000 * 3)),
|
|
minTime: new Date(),
|
|
});
|
|
}
|
|
}
|
|
|
|
$: {
|
|
if ($fpTaskStore.stale && !$fpTaskStore.loading) {
|
|
fpTaskStore.load({
|
|
active: true,
|
|
expiring: true,
|
|
})
|
|
}
|
|
}
|
|
|
|
$: {
|
|
if ($fpProjectStore.stale && !$fpProjectStore.loading) {
|
|
fpProjectStore.load({
|
|
active: true,
|
|
expiring: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
$: {
|
|
fakeProject = {
|
|
id: "P_fakeProject",
|
|
active: true,
|
|
createdTime: "1970-01-01T00:00:00Z",
|
|
description: "",
|
|
icon: "list",
|
|
name: "Individual Tasks",
|
|
tasks: $fpTaskStore.tasks.filter(t => $fpProjectStore.projects.find(p => p.id === t.id) == null)
|
|
.sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime)),
|
|
endTime: null,
|
|
}
|
|
|
|
if (fakeProject.tasks.length > 0) {
|
|
fakeProject.endTime = fakeProject.tasks[0].endTime;
|
|
}
|
|
}
|
|
|
|
$: {
|
|
const projects = fakeProject.tasks.length > 0 ? [...$fpProjectStore.projects, fakeProject] : [...$fpProjectStore.projects];
|
|
sortedProjects = projects.sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
|
|
}
|
|
</script>
|
|
|
|
<div class="page">
|
|
<div class="left">
|
|
{#if !$fpGoalStore.loading || $fpGoalStore.goals.length > 0}
|
|
<h1>Active Goals</h1>
|
|
{/if}
|
|
{#each $fpGoalStore.goals as goal (goal.id)}
|
|
<GoalEntry goal={goal} />
|
|
{/each}
|
|
{#if !$fpGoalStore.loading && $fpGoalStore.goals.length === 0}
|
|
<EmptyList icon="list" text="No goals." />
|
|
{/if}
|
|
</div>
|
|
<div class="right">
|
|
{#if !$fpProjectStore.loading || $fpProjectStore.projects.length > 0}
|
|
<h1>Upcoming Deadlines</h1>
|
|
{/if}
|
|
{#each sortedProjects as project (project.id)}
|
|
<ProjectEntry linkProject={project != fakeProject} hideInactive project={project} />
|
|
{/each}
|
|
{#if fakeProject.tasks.length === 0 && !$fpProjectStore.loading && $fpProjectStore.projects.length === 0}
|
|
<EmptyList icon="check" text="All good!" />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
div.page {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
padding: 0 1ch;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
div.left, div.right {
|
|
width: 50%;
|
|
padding: 0 1ch;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5em;
|
|
font-weight: 100;
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
div.page {
|
|
display: block;
|
|
}
|
|
div.left, div.right {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
padding-bottom: 2em;
|
|
max-width: 100%;
|
|
width: 640px;
|
|
margin: auto;
|
|
}
|
|
}
|
|
</style>
|