first commit

2020-12-31 17:49:54 +01:00
commit 2240985aa1
120 changed files with 11574 additions and 0 deletions
@@ -0,0 +1,94 @@
+<script lang="ts">
+  import type { IconName } from "../external/icons";
+  import type { ProjectResult } from "../models/project";
+  import type { ModalData } from "../stores/modal";
+  import DaysLeft from "./DaysLeft.svelte";
+  import Icon from "./Icon.svelte";
+  import Option from "./Option.svelte";
+  import OptionRow from "./OptionRow.svelte";
+  import TaskEntry from "./TaskEntry.svelte";
+
+  export let project: ProjectResult = null;
+  export let showAllOptions: boolean = false;
+
+  let iconName: IconName = "question";
+  let mdAddTask: ModalData;
+  let mdProjectAdd: ModalData;
+  let mdProjectEdit: ModalData;
+  let mdProjectDelete: ModalData;
+
+  $: iconName = project.icon as IconName;
+  $: mdAddTask = {name:"task.add", project};
+  $: mdProjectAdd = {name:"project.add"};
+  $: mdProjectEdit = {name:"project.edit", project};
+  $: mdProjectDelete = {name:"project.delete", project};
+</script>
+
+<div class="project">
+  <div class="icon"><Icon block name={iconName} /></div>
+  <div class="body">
+    <div class="header">
+      <div class="name">{project.name}</div>
+      {#if (project.endTime != null)}
+        <div class="times">
+          <DaysLeft startTime={project.createdTime} endTime={project.endTime} />
+        </div>
+      {/if}
+    </div>
+    {#if showAllOptions}
+      <div class="description">
+        <p>{project.description}</p>
+      </div>
+      <OptionRow>
+        <Option open={mdAddTask}>Add Task</Option>
+        <Option open={mdProjectEdit}>Edit</Option>
+        <Option open={mdProjectDelete}>Delete</Option>
+      </OptionRow>  
+    {/if}
+    <div class="list" class:full={showAllOptions}>
+      {#each project.tasks as task (task.id)}
+        <TaskEntry showAllOptions={showAllOptions} task={task} />
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  div.project {
+    display: flex;
+    flex-direction: row;
+    padding-bottom: 1em;
+  }
+  div.icon {
+    font-size: 2em;
+    padding: 0 0.5ch;
+    width: 2ch;
+    padding-top: 0.125em;
+    color: #333;
+  }
+  div.body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  div.header {
+    display: flex;
+    flex-direction: row;
+  }
+
+  div.name {
+    font-size: 1em;
+    font-weight: 100;
+    margin: auto 0;
+    vertical-align: middle;
+  }
+  div.times {
+    margin-left: auto; 
+    margin-right: 0.25ch;
+  }
+
+  div.description > p {
+    padding: 0;
+    margin: 0.25em 0;
+  }
+</style>