first commit

2020-12-31 17:49:54 +01:00
commit 2240985aa1
120 changed files with 11574 additions and 0 deletions
@@ -0,0 +1,161 @@
+<script lang="ts">
+  import type { IconName } from "../external/icons";
+  import type { TaskResult } from "../models/task";
+  import type { ModalData } from "../stores/modal";
+  import DateSpan from "./DateSpan.svelte";
+  import DaysLeft from "./DaysLeft.svelte";
+  import Icon from "./Icon.svelte";
+  import Option from "./Option.svelte";
+  import OptionRow from "./OptionRow.svelte";
+
+  export let task: TaskResult = null;
+  export let showAllOptions: boolean = false;
+
+  let itomIconName: IconName = "question";
+  let showLogs = false;
+  let mdLogAdd: ModalData;
+  let mdTaskEdit: ModalData;
+  let mdTaskDelete: ModalData;
+
+  function toggleShowLogs() {
+    showLogs = !showLogs;
+  }
+
+  $: itomIconName = task.item.icon as IconName;
+  $: mdLogAdd = {name: "log.add", task};
+  $: mdTaskEdit = {name: "task.edit", task};
+  $: mdTaskDelete = {name: "task.delete", task};
+</script>
+
+<div class="task">
+  <div class="body">
+    <div class="header">
+      {#if !task.active}
+        <div class="icon done">
+          <Icon name="check" />
+        </div>
+      {:else}
+        <div class="icon">
+          {task.completedAmount} / {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}
+    </div>
+    <div class="description">
+      <p>{task.description}</p>
+      <div class="item">
+        <div class="item-icon">
+          <Icon name={itomIconName} />
+        </div>
+        <div class="item-name">{task.item.name} ({task.item.groupWeight})</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>
+  </div>
+</div>
+
+<style>
+  div.task {
+    display: flex;
+    flex-direction: row;
+    margin: 0.25em 0 0.75em 0;
+  }
+  div.icon {
+    display: flex;
+    flex-direction: column;
+    font-size: 1em;
+    padding: 0.125em .5ch;
+
+    margin-right: 0.5em;
+    background: #444;
+    color: #CCC;
+  }
+  div.icon.done {
+    padding-top: 0.2em;
+    background: #484;
+    color: #78ff78;
+  }
+  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 {
+    padding: 0.5em 0;
+  }
+  div.log {
+    padding: 0.25em 1ch;
+  }
+  div.log-time {
+    font-size: 0.75em;
+    font-weight: 800;
+  }
+
+  div.item {
+    display: flex;
+    flex-direction: row;
+    margin-top: 0.25em;
+    margin-bottom: 0em;
+    font-size: 0.75em;
+  }
+  div.item div.item-icon {
+    padding: 0.25em 0.5ch 0.25em 0;
+  }
+  div.item div.item-name {
+    padding: 0.125em;
+  }
+</style>