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. 80
      svelte-ui/src/components/ItemEntry.svelte
  3. 34
      svelte-ui/src/components/ItemLink.svelte
  4. 102
      svelte-ui/src/components/LogEntry.svelte
  5. 76
      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>

80
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>
<ChildEntry entry={item}>
<OptionRow> <OptionRow>
<Option open={mdItemEdit}>Edit</Option> <Option open={mdItemEdit}>Edit</Option>
<Option open={mdItemDelete}>Delete</Option> <Option open={mdItemDelete}>Delete</Option>
</OptionRow> </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>
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>

102
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>
<ChildEntry entry={log}>
<ItemLink item={log.item} />
<OptionRow> <OptionRow>
<Option open={mdLogEdit}>Edit Log</Option> <Option open={mdLogEdit}>Edit Log</Option>
<Option open={mdLogDelete}>Delete Log</Option> <Option open={mdLogDelete}>Delete Log</Option>
</OptionRow> </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>

76
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,31 +26,17 @@
$: 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">
<ChildEntry entry={task}>
<div slot="icon" class="icon" class:done={!task.active}>
{#if !task.active} {#if !task.active}
<div class="icon done">
<span class="on"><Icon block name="check" /></span> <span class="on"><Icon block name="check" /></span>
<span class="off"> <span class="off">
{task.completedAmount}&nbsp;/&nbsp;{task.itemAmount} {task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
</span> </span>
</div>
{:else} {:else}
<div class="icon">
{task.completedAmount}&nbsp;/&nbsp;{task.itemAmount} {task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
</div>
{/if} {/if}
<div class="name">{task.name}</div>
{#if (task.endTime != null)}
<div class="times">
<DaysLeft startTime={task.createdTime} endTime={task.endTime} />
</div> </div>
{/if}
</div>
<div class="description">
<p>{task.description}</p>
<div class="item"> <div class="item">
<div class="item-icon"> <div class="item-icon">
<Icon name={task.item.icon} /> <Icon name={task.item.icon} />
@ -87,21 +65,9 @@
{/each} {/each}
</div> </div>
{/if} {/if}
</div>
</div>
</div>
</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