gisle
/
stufflog2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

refactored Item, Task and Log entry to share code. TaskEntry is still a bit messy, but that's because of the weird icon stuffs.
continuous-integration/drone/push Build is passing
Details

main
Gisle Aune 4 years ago
parent
b01fca8065
commit
033abaa5bb
5 changed files with 199 additions and 288 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 111
      svelte-ui/src/components/ChildEntry.svelte
  2. 88
      svelte-ui/src/components/ItemEntry.svelte
  3. 34
      svelte-ui/src/components/ItemLink.svelte
  4. 110
      svelte-ui/src/components/LogEntry.svelte
  5. 144
      svelte-ui/src/components/TaskEntry.svelte

111
svelte-ui/src/components/ChildEntry.svelte
View File

@ -0,0 +1,111 @@
<script lang="ts">
import type { IconName, iconNames } from "../external/icons";
import DaysLeft from "./DaysLeft.svelte";
import Icon from "./Icon.svelte";
import LinkHook from "./LinkHook.svelte";
interface EntryCommon {
id: string
name?: string
description: string
icon?: IconName
startTime?: string
endTime?: string
createdTime?: string
active?: boolean
completedAmount?: number
itemAmount?: number
task?: EntryCommonSub
}
interface EntryCommonSub {
name: string
icon: IconName
}
export let entry: EntryCommon = null;
let iconName: IconName;
let displayName: string;
$: iconName = entry.task?.icon || entry.icon;
$: displayName = entry.name || entry.task?.name || "";
</script>
<div class="child-entry">
<LinkHook id={entry.id} />
<div class="body">
<div class="header">
<slot name="icon">
<div class="icon">
<Icon name={iconName} />
</div>
</slot>
<div class="name">{entry.name}</div>
{#if (entry.endTime != null)}
<div class="times">
<DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
</div>
{/if}
</div>
<div class="description">
<p>{entry.description}</p>
<slot></slot>
</div>
</div>
</div>
<style>
div.child-entry {
display: flex;
flex-direction: row;
margin: 0.25em 0 0.75em 0;
}
div.icon {
display: flex;
flex-direction: column;
font-size: 1em;
padding: 0.2em .5ch;
margin-right: 0.5em;
background: #444;
color: #CCC;
}
div.body {
display: flex;
flex-direction: column;
width: 100%;
}
div.header {
display: flex;
flex-direction: row;
background: #333;
}
div.name {
font-size: 1em;
font-weight: 100;
margin: auto 0;
vertical-align: middle;
padding: 0.125em .5ch;
}
div.times {
margin-left: auto;
margin-right: 0.25ch;
padding: 0.125em 0;
}
div.description {
padding: 0.25em 1ch;
background: #222;
color: #aaa;
border-bottom-right-radius: 0.5em;
}
div.description p {
padding: 0;
margin: 0.25em 0;
}
</style>

88
svelte-ui/src/components/ItemEntry.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte";
import type { GroupResult } from "../models/group"; import type { GroupResult } from "../models/group";
import type { default as Item } from "../models/item"; import type { default as Item } from "../models/item";
import type { ModalData } from "../stores/modal"; import type { ModalData } from "../stores/modal";
import ChildEntry from "./ChildEntry.svelte";
import Option from "./Option.svelte"; import Option from "./Option.svelte";
import OptionRow from "./OptionRow.svelte"; import OptionRow from "./OptionRow.svelte";
@ -11,89 +11,15 @@
let mdItemEdit: ModalData; let mdItemEdit: ModalData;
let mdItemDelete: ModalData; let mdItemDelete: ModalData;
let linkHook: HTMLElement;
onMount(() => {
if (window.location.hash === "#" + item.id) {
window.scrollTo({top: linkHook.getBoundingClientRect().top});
}
});
$: mdItemEdit = {name: "item.edit", item: {...item, group}}; $: mdItemEdit = {name: "item.edit", item: {...item, group}};
$: mdItemDelete = {name: "item.delete", item: {...item, group}}; $: mdItemDelete = {name: "item.delete", item: {...item, group}};
</script> </script>
<div class="item">
<div class="link-hook" id={item.id} bind:this={linkHook}></div>
<div class="body">
<div class="header">
<div class="icon">
{item.groupWeight}
</div>
<div class="name">{item.name}</div>
</div>
<div class="description">
<p>{item.description}</p>
<OptionRow>
<Option open={mdItemEdit}>Edit</Option>
<Option open={mdItemDelete}>Delete</Option>
</OptionRow>
</div>
</div>
</div>
<style>
div.link-hook {
position: relative;
top: -2em;
}
div.item {
display: flex;
flex-direction: row;
margin: 0.25em 0 0.75em 0;
}
div.body {
display: flex;
flex-direction: column;
width: 100%;
}
div.header {
display: flex;
flex-direction: row;
background: #333;
}
div.icon {
display: flex;
flex-direction: column;
font-size: 1em;
padding: 0.125em .5ch;
min-width: 2ch;
text-align: center;
margin-right: 0.5em;
background: #444;
color: #CCC;
}
div.name {
font-size: 1em;
font-weight: 100;
margin: auto 0;
vertical-align: middle;
padding: 0.125em .5ch;
}
<ChildEntry entry={item}>
<OptionRow>
<Option open={mdItemEdit}>Edit</Option>
<Option open={mdItemDelete}>Delete</Option>
</OptionRow>
</ChildEntry>
div.description {
padding: 0.25em 1ch;
background: #222;
color: #aaa;
border-bottom-right-radius: 0.5em;
}
div.description p {
padding: 0;
margin: 0.25em 0;
}
</style>

34
svelte-ui/src/components/ItemLink.svelte
View File

@ -0,0 +1,34 @@
<script lang="ts">
import type Item from "../models/item";
import Icon from "./Icon.svelte";
export let item: Item = null;
</script>
<div class="item">
<div class="item-icon">
<Icon name={item.icon} />
</div>
<div class="item-name">
<a href="/items#{item.groupId}">{item.name} ({item.groupWeight})</a>
</div>
</div>
<style>
div.item {
display: flex;
flex-direction: row;
margin-top: 0.25em;
margin-bottom: 0em;
font-size: 0.75em;
}
div.item a {
color: inherit;
}
div.item div.item-icon {
padding: 0.25em 0.5ch 0.25em 0;
}
div.item div.item-name {
padding: 0.125em;
}
</style>

110
svelte-ui/src/components/LogEntry.svelte
View File

@ -2,8 +2,8 @@
import type { IconName } from "../external/icons"; import type { IconName } from "../external/icons";
import type { LogResult } from "../models/log"; import type { LogResult } from "../models/log";
import type { ModalData } from "../stores/modal"; import type { ModalData } from "../stores/modal";
import { formatTime } from "../utils/time";
import Icon from "./Icon.svelte";
import ChildEntry from "./ChildEntry.svelte";
import ItemLink from "./ItemLink.svelte";
import Option from "./Option.svelte"; import Option from "./Option.svelte";
import OptionRow from "./OptionRow.svelte"; import OptionRow from "./OptionRow.svelte";
@ -20,102 +20,10 @@
$: mdLogDelete = {name: "log.delete", log}; $: mdLogDelete = {name: "log.delete", log};
</script> </script>
<div class="log">
<div class="body">
<div class="header">
<div class="icon">
<Icon name={taskIconName} />
</div>
<div class="name">{log.task.name}</div>
<div class="times">{formatTime(log.loggedTime)}</div>
</div>
<div class="description">
<p>{log.description}</p>
<div class="item">
<div class="item-icon">
<Icon name={itemIconName} />
</div>
<div class="item-name">
<a href="/items#{log.item.groupId}">{log.item.name} ({log.item.groupWeight})</a>
</div>
</div>
<OptionRow>
<Option open={mdLogEdit}>Edit Log</Option>
<Option open={mdLogDelete}>Delete Log</Option>
</OptionRow>
</div>
</div>
</div>
<style>
div.log {
display: flex;
flex-direction: row;
margin: 0.25em 0;
}
div.icon {
display: flex;
flex-direction: column;
font-size: 1em;
padding: 0.125em .5ch;
padding-top: 0.2em;
margin-right: 0.5em;
background: #444;
color: #CCC;
}
div.body {
display: flex;
flex-direction: column;
width: 100%;
}
div.header {
display: flex;
flex-direction: row;
background: #333;
}
div.name {
font-size: 1em;
font-weight: 100;
margin: auto 0;
vertical-align: middle;
padding: 0.125em .5ch;
}
div.times {
margin-left: auto;
margin-right: 0.25ch;
}
div.description {
padding: 0.25em 1ch;
background: #222;
color: #aaa;
border-bottom-right-radius: 0.5em;
}
div.description p {
padding: 0;
margin: 0.25em 0;
}
div.log {
padding: 0.25em 1ch;
}
div.item {
display: flex;
flex-direction: row;
margin-top: 0.25em;
margin-bottom: 0em;
font-size: 0.75em;
}
div.item a {
color: inherit;
}
div.item div.item-icon {
padding: 0.25em 0.5ch 0.25em 0;
}
div.item div.item-name {
padding: 0.125em;
}
</style>
<ChildEntry entry={log}>
<ItemLink item={log.item} />
<OptionRow>
<Option open={mdLogEdit}>Edit Log</Option>
<Option open={mdLogDelete}>Delete Log</Option>
</OptionRow>
</ChildEntry>

144
svelte-ui/src/components/TaskEntry.svelte
View File

@ -1,10 +1,9 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte";
import type Project from "../models/project"; import type Project from "../models/project";
import type { TaskResult } from "../models/task"; import type { TaskResult } from "../models/task";
import type { ModalData } from "../stores/modal"; import type { ModalData } from "../stores/modal";
import ChildEntry from "./ChildEntry.svelte";
import DateSpan from "./DateSpan.svelte"; import DateSpan from "./DateSpan.svelte";
import DaysLeft from "./DaysLeft.svelte";
import Icon from "./Icon.svelte"; import Icon from "./Icon.svelte";
import Option from "./Option.svelte"; import Option from "./Option.svelte";
import OptionRow from "./OptionRow.svelte"; import OptionRow from "./OptionRow.svelte";
@ -17,13 +16,6 @@
let mdLogAdd: ModalData; let mdLogAdd: ModalData;
let mdTaskEdit: ModalData; let mdTaskEdit: ModalData;
let mdTaskDelete: ModalData; let mdTaskDelete: ModalData;
let linkHook: HTMLElement;
onMount(() => {
if (window.location.hash === "#" + task.id) {
window.scrollTo({top: linkHook.getBoundingClientRect().top});
}
});
function toggleShowLogs() { function toggleShowLogs() {
showLogs = !showLogs; showLogs = !showLogs;
@ -34,74 +26,48 @@
$: mdTaskDelete = {name: "task.delete", task: {...task, project}}; $: mdTaskDelete = {name: "task.delete", task: {...task, project}};
</script> </script>
<div class="task">
<div class="link-hook" id={task.id} bind:this={linkHook}></div>
<div class="body">
<div class="header">
{#if !task.active}
<div class="icon done">
<span class="on"><Icon block name="check" /></span>
<span class="off">
{task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
</span>
</div>
{:else}
<div class="icon">
{task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
</div>
{/if}
<div class="name">{task.name}</div>
{#if (task.endTime != null)}
<div class="times">
<DaysLeft startTime={task.createdTime} endTime={task.endTime} />
</div>
{/if}
<ChildEntry entry={task}>
<div slot="icon" class="icon" class:done={!task.active}>
{#if !task.active}
<span class="on"><Icon block name="check" /></span>
<span class="off">
{task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
</span>
{:else}
{task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
{/if}
</div>
<div class="item">
<div class="item-icon">
<Icon name={task.item.icon} />
</div> </div>
<div class="description">
<p>{task.description}</p>
<div class="item">
<div class="item-icon">
<Icon name={task.item.icon} />
</div>
<div class="item-name">
<a href="/items#{task.item.groupId}">{task.item.name} ({task.item.groupWeight})</a>
</div>
</div>
<OptionRow>
{#if task.logs.length > 0}
<Option on:click={toggleShowLogs}>{showLogs ? "Hide Logs" : "Show Logs"}</Option>
{/if}
<Option open={mdLogAdd}>Add Log</Option>
{#if showAllOptions}
<Option open={mdTaskEdit}>Edit</Option>
<Option open={mdTaskDelete}>Delete</Option>
{/if}
</OptionRow>
{#if showLogs && task.logs.length > 0}
<div class="log-list">
{#each task.logs as log (log.id)}
<div class="log">
<div class="log-time"><DateSpan time={log.loggedTime} /></div>
<div class="log-description">{log.description}</div>
</div>
{/each}
</div>
{/if}
<div class="item-name">
<a href="/items#{task.item.groupId}">{task.item.name} ({task.item.groupWeight})</a>
</div> </div>
</div> </div>
</div>
<OptionRow>
{#if task.logs.length > 0}
<Option on:click={toggleShowLogs}>{showLogs ? "Hide Logs" : "Show Logs"}</Option>
{/if}
<Option open={mdLogAdd}>Add Log</Option>
{#if showAllOptions}
<Option open={mdTaskEdit}>Edit</Option>
<Option open={mdTaskDelete}>Delete</Option>
{/if}
</OptionRow>
{#if showLogs && task.logs.length > 0}
<div class="log-list">
{#each task.logs as log (log.id)}
<div class="log">
<div class="log-time"><DateSpan time={log.loggedTime} /></div>
<div class="log-description">{log.description}</div>
</div>
{/each}
</div>
{/if}
</ChildEntry>
<style> <style>
div.link-hook {
position: relative;
top: -2em;
}
div.task {
display: flex;
flex-direction: row;
margin: 0.25em 0 0.75em 0;
}
div.icon { div.icon {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -132,40 +98,6 @@
div.icon.done:hover span.off { div.icon.done:hover span.off {
display: inline; display: inline;
} }
div.body {
display: flex;
flex-direction: column;
width: 100%;
}
div.header {
display: flex;
flex-direction: row;
background: #333;
}
div.name {
font-size: 1em;
font-weight: 100;
margin: auto 0;
vertical-align: middle;
padding: 0.125em .5ch;
}
div.times {
margin-left: auto;
margin-right: 0.25ch;
padding: 0.125em 0;
}
div.description {
padding: 0.25em 1ch;
background: #222;
color: #aaa;
border-bottom-right-radius: 0.5em;
}
div.description p {
padding: 0;
margin: 0.25em 0;
}
div.log-list { div.log-list {
padding: 0.5em 0; padding: 0.5em 0;

Write Preview
Loading…
Cancel
Save