From e1c5bf01b2ae9fa6c97d80f35d1acf49d7fca173 Mon Sep 17 00:00:00 2001 From: Gisle Aune Date: Sun, 24 Jan 2021 13:36:55 +0100 Subject: [PATCH] Improve individual tasks on the front page, compact icon selector, and add annotaions. --- svelte-ui/src/components/GoalEntry.svelte | 20 +++++++-- svelte-ui/src/components/IconSelect.svelte | 36 +++++++++++++-- svelte-ui/src/components/ParentEntry.svelte | 15 +++++++ svelte-ui/src/components/ProjectEntry.svelte | 2 + svelte-ui/src/components/QuestLog.svelte | 6 +-- svelte-ui/src/external/icons.ts | 29 ++++++++++++ svelte-ui/src/pages/FrontPage.svelte | 46 ++++++++++++-------- 7 files changed, 128 insertions(+), 26 deletions(-) diff --git a/svelte-ui/src/components/GoalEntry.svelte b/svelte-ui/src/components/GoalEntry.svelte index 6432a87..2242c26 100644 --- a/svelte-ui/src/components/GoalEntry.svelte +++ b/svelte-ui/src/components/GoalEntry.svelte @@ -1,13 +1,13 @@ {#if showAllOptions} diff --git a/svelte-ui/src/components/IconSelect.svelte b/svelte-ui/src/components/IconSelect.svelte index 4aa8691..a776a48 100644 --- a/svelte-ui/src/components/IconSelect.svelte +++ b/svelte-ui/src/components/IconSelect.svelte @@ -1,18 +1,34 @@
- {#each iconNames as iconName (iconName)} -
{if (!disabled) { value = iconName }}}> + {#each commonIcons as iconName (iconName)} +
{if (!disabled) { value = iconName }}}>
{/each} +
+ { showAll ? "Hide uncommon icons" : "Show uncommon icons" } +
+ {#if showAll} + {#each uncommonIcons as iconName (iconName)} +
{if (!disabled) { value = iconName }}}> + +
+ {/each} + {/if}
\ No newline at end of file diff --git a/svelte-ui/src/components/ParentEntry.svelte b/svelte-ui/src/components/ParentEntry.svelte index ab8c0c9..57c0ec6 100644 --- a/svelte-ui/src/components/ParentEntry.svelte +++ b/svelte-ui/src/components/ParentEntry.svelte @@ -34,6 +34,7 @@ import TimeProgress from "./TimeProgress.svelte"; export let hideProgress: boolean = false; export let hideIcon: boolean = false; export let showTimeProgress: boolean = false; + export let annotations: IconName[] = []; let iconName: IconName; @@ -68,6 +69,11 @@ import TimeProgress from "./TimeProgress.svelte"; {entry.name} {/if}
+ {#each annotations as annotation (annotation)} +
+ +
+ {/each} {#if entry.endTime != null}
@@ -122,6 +128,15 @@ import TimeProgress from "./TimeProgress.svelte"; vertical-align: middle; font-weight: 100; } + div.annotation { + margin: auto 0; + padding: 0 0.5ch; + line-height: 0em; + color: #333; + } + div.annotation + div.annotation { + padding-left: 0; + } div.days-left { margin-left: auto; margin-right: 0.25ch; diff --git a/svelte-ui/src/components/ProjectEntry.svelte b/svelte-ui/src/components/ProjectEntry.svelte index a4a9aca..fbfa9f5 100644 --- a/svelte-ui/src/components/ProjectEntry.svelte +++ b/svelte-ui/src/components/ProjectEntry.svelte @@ -14,6 +14,7 @@ export let hideProgress: boolean = false; export let linkProject: boolean = false; export let hideIcon: boolean = false; + export let isFake: boolean = false; let mdAddTask: ModalData; let mdProjectEdit: ModalData; @@ -58,6 +59,7 @@ hideProgress={hideProgress} hideIcon={hideIcon} showTimeProgress={!hideProgress} + annotations={isFake ? ["list"] : []} > {#if showAllOptions} diff --git a/svelte-ui/src/components/QuestLog.svelte b/svelte-ui/src/components/QuestLog.svelte index 588b866..d6121a0 100644 --- a/svelte-ui/src/components/QuestLog.svelte +++ b/svelte-ui/src/components/QuestLog.svelte @@ -11,7 +11,7 @@ let inactiveProjects: ProjectResult[]; let completedProjects: ProjectResult[]; let failedProjects: ProjectResult[]; - let posponedProjects: ProjectResult[]; + let onholdProjects: ProjectResult[]; let ideaProjects: ProjectResult[]; let project: ProjectResult = null; @@ -21,7 +21,7 @@ $: inactiveProjects = projects.filter(p => !p.active).sort((a,b) => a.name.localeCompare(b.name)); $: completedProjects = inactiveProjects.filter(p => p.statusTag === "completed" || p.statusTag == null); $: failedProjects = inactiveProjects.filter(p => p.statusTag === "failed" || p.statusTag === "declined"); - $: postponedProjects = inactiveProjects.filter(p => p.statusTag === "on hold" || p.statusTag === "postponed"); + $: onholdProjects = inactiveProjects.filter(p => p.statusTag === "on hold" || p.statusTag === "onhold"); $: ideaProjects = inactiveProjects.filter(p => p.statusTag === "to do" || p.statusTag === "idea"); $: { @@ -39,7 +39,7 @@ - +
diff --git a/svelte-ui/src/external/icons.ts b/svelte-ui/src/external/icons.ts index 1e812b1..8ff914e 100644 --- a/svelte-ui/src/external/icons.ts +++ b/svelte-ui/src/external/icons.ts @@ -194,9 +194,38 @@ const icons = { "bottle_opener": faSearch, }; +export const commonIcons: IconName[] = [ + "book", + "book_open", + "calendar", + "code", + "code_branch", + "crosshairs", + "cube", + "cubes", + "database", + "dice_d20", + "dice_d6", + "gamepad", + "guitar", + "headphones", + "home", + "language", + "music", + "pen", + "pencil_alt", + "question", + "server", + "star", + "terminal", + "wrench", +]; + export type IconName = keyof typeof icons; export const iconNames = Object.keys(icons).sort() as IconName[]; export const DEFAULT_ICON = iconNames[0] as IconName; +export const uncommonIcons = iconNames.filter(n => !commonIcons.includes(n)); + export default icons; diff --git a/svelte-ui/src/pages/FrontPage.svelte b/svelte-ui/src/pages/FrontPage.svelte index 8a6fc22..47fab71 100644 --- a/svelte-ui/src/pages/FrontPage.svelte +++ b/svelte-ui/src/pages/FrontPage.svelte @@ -5,10 +5,11 @@ import RefreshSelection from "../components/RefreshSelection.svelte"; import type { ProjectResult } from "../models/project"; import { fpGoalStore } from "../stores/goal"; - import { fpProjectStore } from "../stores/project"; + import projectStore, { fpProjectStore } from "../stores/project"; import { fpTaskStore } from "../stores/tasks"; - let fakeProject: ProjectResult + let fakeMap: {[projectId: string]: boolean} = {} + let fakeProjects: ProjectResult[] let sortedProjects: ProjectResult[] $: { @@ -39,27 +40,38 @@ } $: { - 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, + const individualTasks = $fpTaskStore.tasks + .filter(t => $fpProjectStore.projects.find(p => p.id === t.projectId) == null) + .sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime)); + + fakeProjects = []; + fakeMap = {}; + for (let task of individualTasks) { + if (!task.project.active) { + continue; + } + + let fakeProject = fakeProjects.find(p => p.id === task.id); + if (fakeProject == null) { + fakeMap[task.projectId] = true; + fakeProjects.push({ + ...task.project, + tasks: [task], + }); + } else { + fakeProject.tasks.push(task); + } } - if (fakeProject.tasks.length > 0) { + for (const fakeProject of fakeProjects) { fakeProject.createdTime = fakeProject.tasks.map(t => t.createdTime).sort()[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)); + sortedProjects = [...fakeProjects, ...$fpProjectStore.projects] + .sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime)); } @@ -80,9 +92,9 @@

Upcoming Deadlines

{/if} {#each sortedProjects as project (project.id)} - + {/each} - {#if fakeProject.tasks.length === 0 && !$fpProjectStore.loading && $fpProjectStore.projects.length === 0} + {#if !$fpProjectStore.loading && $fpProjectStore.projects.length === 0} {/if}