Browse Source

add empty list placeholder.

main
Gisle Aune 4 years ago
parent
commit
da2f71b306
  1. 29
      svelte-ui/src/components/EmptyList.svelte
  2. 16
      svelte-ui/src/external/icons.ts
  3. 2
      svelte-ui/src/forms/TaskAddForm.svelte
  4. 7
      svelte-ui/src/pages/FrontPage.svelte
  5. 17
      svelte-ui/src/pages/LogsPage.svelte

29
svelte-ui/src/components/EmptyList.svelte

@ -0,0 +1,29 @@
<script lang="ts">
import type { IconName } from "../external/icons";
import Icon from "./Icon.svelte";
export let icon: IconName = "moon";
export let text: string = "All good!";
</script>
<div class="empty-list">
<div class="icon">
<Icon name={icon} />
</div>
<div class="text">
{text}
</div>
</div>
<style>
div.empty-list {
font-size: 2em;
text-align: center;
color: #555;
padding: 2em 0;
}
div.icon {
font-size: 3em;
}
</style>

16
svelte-ui/src/external/icons.ts

@ -62,6 +62,14 @@ import { faHome } from "@fortawesome/free-solid-svg-icons/faHome";
import { faIgloo } from "@fortawesome/free-solid-svg-icons/faIgloo"; import { faIgloo } from "@fortawesome/free-solid-svg-icons/faIgloo";
import { faWarehouse } from "@fortawesome/free-solid-svg-icons/faWarehouse"; import { faWarehouse } from "@fortawesome/free-solid-svg-icons/faWarehouse";
import { faToiletPaperSlash } from "@fortawesome/free-solid-svg-icons/faToiletPaperSlash"; import { faToiletPaperSlash } from "@fortawesome/free-solid-svg-icons/faToiletPaperSlash";
import { faDumpsterFire } from "@fortawesome/free-solid-svg-icons/faDumpsterFire";
import { faHandPeace } from "@fortawesome/free-solid-svg-icons/faHandPeace";
import { faList } from "@fortawesome/free-solid-svg-icons/faList";
import { faListAlt } from "@fortawesome/free-solid-svg-icons/faListAlt";
import { faThList } from "@fortawesome/free-solid-svg-icons/faThList";
import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
import { faMoon } from "@fortawesome/free-solid-svg-icons/faMoon";
import { faCloudMoon } from "@fortawesome/free-solid-svg-icons/faCloudMoon";
const icons = { const icons = {
"question": faQuestion, "question": faQuestion,
@ -128,6 +136,14 @@ const icons = {
"igloo": faIgloo, "igloo": faIgloo,
"warehouse": faWarehouse, "warehouse": faWarehouse,
"toilet_paper_slash": faToiletPaperSlash, "toilet_paper_slash": faToiletPaperSlash,
"dumpster_fire": faDumpsterFire,
"hand_peace": faHandPeace,
"list": faList,
"list_alt": faListAlt,
"th_list": faThList,
"bars": faBars,
"moon": faMoon,
"cloud_moon": faCloudMoon,
}; };
export type IconName = keyof typeof icons; export type IconName = keyof typeof icons;

2
svelte-ui/src/forms/TaskAddForm.svelte

@ -58,7 +58,7 @@
<input name="name" type="text" bind:value={name} /> <input name="name" type="text" bind:value={name} />
<label for="description">Description</label> <label for="description">Description</label>
<textarea name="description" bind:value={description} /> <textarea name="description" bind:value={description} />
<label for="itemId">Item {itemId}</label>
<label for="itemId">Item</label>
<ItemSelect name="itemId" bind:value={itemId} /> <ItemSelect name="itemId" bind:value={itemId} />
<label for="itemAmount">Amount</label> <label for="itemAmount">Amount</label>
<input name="itemAmount" type="number" bind:value={itemAmount} /> <input name="itemAmount" type="number" bind:value={itemAmount} />

7
svelte-ui/src/pages/FrontPage.svelte

@ -1,4 +1,5 @@
<script> <script>
import EmptyList from "../components/EmptyList.svelte";
import GoalEntry from "../components/GoalEntry.svelte"; import GoalEntry from "../components/GoalEntry.svelte";
import ProjectEntry from "../components/ProjectEntry.svelte"; import ProjectEntry from "../components/ProjectEntry.svelte";
import { fpGoalStore } from "../stores/goal"; import { fpGoalStore } from "../stores/goal";
@ -31,6 +32,9 @@
{#each $fpGoalStore.goals as goal (goal.id)} {#each $fpGoalStore.goals as goal (goal.id)}
<GoalEntry goal={goal} /> <GoalEntry goal={goal} />
{/each} {/each}
{#if !$fpGoalStore.loading && $fpGoalStore.goals.length === 0}
<EmptyList icon="list" text="No goals." />
{/if}
</div> </div>
<div class="right"> <div class="right">
{#if !$fpProjectStore.loading || $fpProjectStore.projects.length > 0} {#if !$fpProjectStore.loading || $fpProjectStore.projects.length > 0}
@ -39,6 +43,9 @@
{#each $fpProjectStore.projects as project (project.id)} {#each $fpProjectStore.projects as project (project.id)}
<ProjectEntry project={project} /> <ProjectEntry project={project} />
{/each} {/each}
{#if !$fpProjectStore.loading && $fpProjectStore.projects.length === 0}
<EmptyList icon="check" text="All good!" />
{/if}
</div> </div>
</div> </div>

17
svelte-ui/src/pages/LogsPage.svelte

@ -4,13 +4,15 @@
import logStore from "../stores/logs"; import logStore from "../stores/logs";
import { formatDate, formatTime, formatWeekdayDate } from "../utils/time"; import { formatDate, formatTime, formatWeekdayDate } from "../utils/time";
import Boi from "../components/Boi.svelte"; import Boi from "../components/Boi.svelte";
import EmptyList from "../components/EmptyList.svelte";
let groupedLogs: {day: number, text: string, logs: LogResult[]}[] = []; let groupedLogs: {day: number, text: string, logs: LogResult[]}[] = [];
let earliestDate = $logStore.filter.minTime || new Date(Date.now() - (86400000*30));
let minTime = $logStore.filter.minTime || new Date(Date.now() - (86400000*30));
let emptyMessage = `No logs since ${formatWeekdayDate(minTime)}.`;
function loadMore() { function loadMore() {
if (!$logStore.stale && !$logStore.loading) { if (!$logStore.stale && !$logStore.loading) {
earliestDate = new Date(earliestDate.getTime() - (86400000*30));
minTime = new Date(minTime.getTime() - (86400000*30));
logStore.markStale(); logStore.markStale();
} }
} }
@ -18,11 +20,17 @@
$: { $: {
if ($logStore.stale && !$logStore.loading) { if ($logStore.stale && !$logStore.loading) {
logStore.load({ logStore.load({
minTime: earliestDate,
minTime: minTime,
}); });
} }
} }
$: {
if (!$logStore.loading && !$logStore.stale) {
emptyMessage = `No logs since ${formatWeekdayDate(minTime)}.`;
}
}
$: { $: {
if (!$logStore.loading) { if (!$logStore.loading) {
groupedLogs = []; groupedLogs = [];
@ -78,6 +86,9 @@
<LogEntry log={log} /> <LogEntry log={log} />
{/each} {/each}
{/each} {/each}
{#if groupedLogs.length === 0}
<EmptyList icon="list" text={emptyMessage} />
{/if}
{#if !$logStore.loading && !$logStore.stale} {#if !$logStore.loading && !$logStore.stale}
<Boi on:click={loadMore}>Load More</Boi> <Boi on:click={loadMore}>Load More</Boi>
{:else} {:else}

Loading…
Cancel
Save