clean up task modal and add non-segmented progress bars.

models/task.go

@@ -55,6 +55,7 @@ type TaskResult struct {
 	Item            *Item    `json:"item"`
 	Logs            []*Log   `json:"logs"`
 	CompletedAmount int      `json:"completedAmount"`
+	Project         *Project `json:"project,omitempty"`
 }
 
 type TaskFilter struct {

services/loader.go

@@ -329,6 +329,7 @@ func (l *Loader) FindTask(ctx context.Context, id string) (*models.TaskResult, e
 	result := &models.TaskResult{Task: *task}
 
 	result.Item, _ = l.DB.Items().Find(ctx, task.ItemID)
+	result.Project, _ = l.DB.Projects().Find(ctx, task.ProjectID)
 	result.Logs, err = l.DB.Logs().List(ctx, models.LogFilter{
 		UserID: task.UserID,
 		IDs:    []string{task.ID},
@@ -354,9 +355,11 @@ func (l *Loader) ListTasks(ctx context.Context, filter models.TaskFilter) ([]*mo
 
 	taskIDs := make([]string, 0, len(tasks))
 	itemIDs := stringset.New()
+	projectIDs := stringset.New()
 	for _, task := range tasks {
 		taskIDs = append(taskIDs, task.ID)
 		itemIDs.Add(task.ItemID)
+		projectIDs.Add(task.ProjectID)
 	}
 
 	logs, err := l.DB.Logs().List(ctx, models.LogFilter{
@@ -375,6 +378,14 @@ func (l *Loader) ListTasks(ctx context.Context, filter models.TaskFilter) ([]*mo
 		return nil, err
 	}
 
+	projects, err := l.DB.Projects().List(ctx, models.ProjectFilter{
+		UserID: auth.UserID(ctx),
+		IDs:    projectIDs.Strings(),
+	})
+	if err != nil {
+		return nil, err
+	}
+
 	results := make([]*models.TaskResult, 0, len(tasks))
 	for _, task := range tasks {
 		result := &models.TaskResult{
@@ -395,6 +406,13 @@ func (l *Loader) ListTasks(ctx context.Context, filter models.TaskFilter) ([]*mo
 			}
 		}
 
+		for _, project := range projects {
+			if project.ID == task.ProjectID {
+				result.Project = project
+				break
+			}
+		}
+
 		result.CompletedAmount = len(result.Logs)
 
 		results = append(results, result)

svelte-ui/src/App.svelte

@@ -8,13 +8,12 @@
 	import GroupPage from "./pages/GroupPage.svelte";
 	import GoalPage from "./pages/GoalPage.svelte";
 
-	import TaskAddForm from "./forms/TaskAddForm.svelte";
-	import TaskEditForm from "./forms/TaskEditForm.svelte";
-	import TaskDeleteForm from "./forms/TaskDeleteForm.svelte";
 	import GroupForm from "./forms/GroupForm.svelte";
 	import GoalForm from "./forms/GoalForm.svelte";
 	import LogForm from "./forms/LogForm.svelte";
 	import ProjectForm from "./forms/ProjectForm.svelte";
+	import ItemForm from "./forms/ItemForm.svelte";
+	import TaskForm from "./forms/TaskForm.svelte";
 	import LoginForm from "./forms/LoginForm.svelte";
 
 	import ModalRoute from "./components/ModalRoute.svelte";
@@ -22,7 +21,6 @@
 	import Menu from "./components/Menu.svelte";
 
 	import authStore from "./stores/auth";
-import ItemForm from "./forms/ItemForm.svelte";
 
 	onMount(() => {
 		authStore.check()
@@ -45,9 +43,9 @@ import ItemForm from "./forms/ItemForm.svelte";
 		<ModalRoute name="log.add"> <LogForm creation/> </ModalRoute>
 		<ModalRoute name="log.edit"> <LogForm/> </ModalRoute>
 		<ModalRoute name="log.delete"> <LogForm deletion/> </ModalRoute>
-		<ModalRoute name="task.add"> <TaskAddForm/> </ModalRoute>
-		<ModalRoute name="task.edit"> <TaskEditForm/> </ModalRoute>
-		<ModalRoute name="task.delete"> <TaskDeleteForm/> </ModalRoute>
+		<ModalRoute name="task.add"> <TaskForm creation/> </ModalRoute>
+		<ModalRoute name="task.edit"> <TaskForm/> </ModalRoute>
+		<ModalRoute name="task.delete"> <TaskForm deletion/> </ModalRoute>
 		<ModalRoute name="project.add"> <ProjectForm creation/> </ModalRoute>
 		<ModalRoute name="project.edit"> <ProjectForm/> </ModalRoute>
 		<ModalRoute name="project.delete"> <ProjectForm deletion/> </ModalRoute>

svelte-ui/src/components/ItemSelect.svelte

@@ -3,6 +3,7 @@
 
   export let value = "";
   export let name = "";
+  export let disabled = false;
 
   $: {
     if ($groupStore.stale && !$groupStore.loading) {
@@ -20,7 +21,7 @@
   }
 </script>
 
-<select name={name} bind:value={value} disabled={$groupStore.loading}>
+<select name={name} bind:value={value} disabled={disabled || $groupStore.loading}>
   {#each $groupStore.groups as group (group.id)}
     <optgroup label={group.name}>
       {#each group.items as item (item.id)}

svelte-ui/src/components/Modal.svelte

@@ -169,6 +169,10 @@ div.modal :global(input), div.modal :global(select), div.modal :global(textarea)
 div.modal :global(select) {
   padding-left: 0.5ch;
 }
+div.modal :global(select:disabled) {
+  background: #4a4a4a;
+  color: #aaa;
+}
 div.modal :global(input:disabled) {
   background: #444;
   color: #aaa;

svelte-ui/src/components/Progress.svelte

@@ -18,6 +18,7 @@
   let onClass = COLORS[1];
   let ons = 0;
   let offs = 1;
+  let nonSegmented = false;
 
   $: {
     let level = Math.floor(count / target);
@@ -41,16 +42,27 @@
       onClass = "green"
       offClass = "none"
     }
+
+    // Mark it non-segmented if the target is too high. This prevents a clunky progress bar,
+    // or a browser freeze if you set the target very high. 
+    if (target > 50) {
+      nonSegmented = true;
+    }
   }
 </script>
 
 <div class="bar" class:thin>
+  {#if nonSegmented}
+    <div style="flex: {ons}" class={"non-segmented on " + onClass}></div>
+    <div style="flex: {offs}" class={"non-segmented off " + offClass}></div>
+  {:else}
     {#each {length: ons} as _}
       <div class={"on " + onClass}></div>
     {/each}
     {#each {length: offs} as _}
       <div class={"off " + offClass}></div>
     {/each}
+  {/if}
 </div>
 
 <style>
@@ -71,6 +83,11 @@
     border: 1px solid #000;
   }
 
+  div.non-segmented {
+    flex-grow: inherit;
+    flex-basis: inherit;
+  }
+
   div.none { background-color: #555555; }
   div.bronze { background-color: #f4b083; }
   div.silver { background-color: #d8dce4; }

svelte-ui/src/components/ProjectEntry.svelte

@@ -69,7 +69,7 @@
     <div class="list" class:full={showAllOptions}>
       {#each project.tasks as task (task.id)}
         {#if !hideInactive || task.active}
-          <TaskEntry showAllOptions={showAllOptions} task={task} />
+          <TaskEntry showAllOptions={showAllOptions} task={task} project={project} />
         {/if}
       {/each}
     </div>

svelte-ui/src/components/TaskEntry.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { link } from "svelte-routing";
+  import type Project from "../models/project";
   import type { TaskResult } from "../models/task";
   import type { ModalData } from "../stores/modal";
   import DateSpan from "./DateSpan.svelte";
@@ -10,6 +10,7 @@
   import OptionRow from "./OptionRow.svelte";
 
   export let task: TaskResult = null;
+  export let project: Project = null;
   export let showAllOptions: boolean = false;
 
   let showLogs = false;
@@ -28,9 +29,9 @@
     showLogs = !showLogs;
   }
 
-  $: mdLogAdd = {name: "log.add", task};
-  $: mdTaskEdit = {name: "task.edit", task};
-  $: mdTaskDelete = {name: "task.delete", task};
+  $: mdLogAdd = {name: "log.add", task: {...task, project}};
+  $: mdTaskEdit = {name: "task.edit", task: {...task, project}};
+  $: mdTaskDelete = {name: "task.delete", task: {...task, project}};
 </script>
 
 <div class="task">

svelte-ui/src/forms/TaskAddForm.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-  import stuffLogClient from "../clients/stufflog";
-  import ItemSelect from "../components/ItemSelect.svelte";
-  import Modal from "../components/Modal.svelte";
-  import type { ProjectResult } from "../models/project"; 
-  import modalStore from "../stores/modal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-  import taskStore, { fpTaskStore } from "../stores/tasks";
-
-  let project: ProjectResult
-  let endTime = "";
-  let itemId = "";
-  let name = "";
-  let description = "";
-  let itemAmount = 1;
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    loading = true;
-
-    stuffLogClient.createTask({
-      projectId: project.id, 
-      itemId: itemId,
-      active: true,
-      endTime: ( endTime == "") ? null : new Date(endTime),
-
-      name, description, itemAmount,
-    }).then(() => {
-      projectStore.markStale();
-      fpProjectStore.markStale();
-      taskStore.markStale();
-      fpTaskStore.markStale();
-      modalStore.close();
-    }).catch(err => {
-      error = err.message ? err.message : err.toString();
-    }).finally(() => {
-      loading = false;
-    })
-
-    error = null;
-  }
-
-  function onClose() {
-    modalStore.close();
-  }
-
-  $: {
-    const md = $modalStore;
-    if (md.name !== "task.add") {
-      throw new Error("Wrong form");
-    }
-
-    if (itemId === "") {
-      project = md.project;
-      if (project.tasks.length > 0) {
-        itemId = project.tasks[0].itemId;
-      }
-    }
-  }
-</script>
-
-<Modal show title="Add Task" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <label for="projectName">Project</label>
-    <input disabled name="projectName" type="text" value={project.name} />
-    <label for="name">Name</label>
-    <input name="name" type="text" bind:value={name} />
-    <label for="description">Description</label>
-    <textarea name="description" bind:value={description} />
-    <label for="itemId">Item</label>
-    <ItemSelect name="itemId" bind:value={itemId} />
-    <label for="itemAmount">Amount</label>
-    <input name="itemAmount" type="number" bind:value={itemAmount} />
-    <label for="endTime">Deadline (Optional)</label>
-    <input name="endTime" type="datetime-local" bind:value={endTime} />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Add Task</button>
-  </form>
-</Modal>

svelte-ui/src/forms/TaskDeleteForm.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-  import stuffLogClient from "../clients/stufflog";
-  import Checkbox from "../components/Checkbox.svelte";
-  import Modal from "../components/Modal.svelte";
-  import goalStore, { fpGoalStore } from "../stores/goal";
-  import modalStore from "../stores/modal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-  import taskStore, { fpTaskStore } from "../stores/tasks";
-  import { formatFormTime } from "../utils/time";
-
-  const md = $modalStore;
-  if (md.name !== "task.delete") {
-    throw new Error("Wrong form");
-  }
-
-  let task = md.task
-  let name = task.name;
-  let description = task.description;
-  let itemAmount = task.itemAmount;
-  let completed = !task.active;
-  let endTime = task.endTime ? formatFormTime(task.endTime) : "";
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    loading = true;
-
-    stuffLogClient.deleteTask(task.id).then(() => {
-      projectStore.markStale();
-      fpProjectStore.markStale();
-      goalStore.markStale();
-      fpGoalStore.markStale();
-      taskStore.markStale();
-      fpTaskStore.markStale();
-      modalStore.close();
-    }).catch(err => {
-      error = err.message ? err.message : err.toString();
-    }).finally(() => {
-      loading = false;
-    })
-
-    error = null;
-  }
-
-  function onClose() {
-    modalStore.close();
-  }
-</script>
-
-<Modal show title="Delete Task" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <label for="name">Name</label>
-    <input disabled name="name" type="text" value={name} />
-    <label for="description">Description</label>
-    <textarea disabled name="description" value={description} />
-    <label for="name">Item</label>
-    <input disabled name="name" type="text" value={task.item.name} />
-    <label for="itemAmount">Amount</label>
-    <input disabled name="itemAmount" type="number" value={itemAmount} />
-    <label for="endTime">Deadline (Optional)</label>
-    <input disabled name="endTime" type="datetime-local" value={endTime} />
-    <Checkbox disabled bind:checked={completed} label="Task is completed." />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Delete Task</button>
-  </form>
-</Modal>

svelte-ui/src/forms/TaskEditForm.svelte

@@ -1,74 +0,0 @@
-<script lang="ts">
-  import stuffLogClient from "../clients/stufflog";
-  import Checkbox from "../components/Checkbox.svelte";
-  import Modal from "../components/Modal.svelte";
-  import goalStore, { fpGoalStore } from "../stores/goal";
-  import modalStore from "../stores/modal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-  import taskStore, { fpTaskStore } from "../stores/tasks";
-  import { formatFormTime } from "../utils/time";
-
-  const md = $modalStore;
-  if (md.name !== "task.edit") {
-    throw new Error("Wrong form");
-  }
-
-  let task = md.task
-  let name = task.name;
-  let description = task.description;
-  let itemAmount = task.itemAmount;
-  let completed = !task.active;
-  let endTime = task.endTime ? formatFormTime(task.endTime) : "";
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    loading = true;
-
-    stuffLogClient.updateTask(task.id, {
-      endTime: (endTime == "") ? null : new Date(endTime),
-      clearEndTime: endTime == "",
-      active: !completed,
-
-      name, description, itemAmount,
-    }).then(() => {
-      projectStore.markStale();
-      fpProjectStore.markStale();
-      goalStore.markStale();
-      fpGoalStore.markStale();
-      taskStore.markStale();
-      fpTaskStore.markStale();
-      modalStore.close();
-    }).catch(err => {
-      error = err.message ? err.message : err.toString();
-    }).finally(() => {
-      loading = false;
-    })
-
-    error = null;
-  }
-
-  function onClose() {
-    modalStore.close();
-  }
-</script>
-
-<Modal show title="Add Task" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <label for="name">Name</label>
-    <input name="name" type="text" bind:value={name} />
-    <label for="description">Description</label>
-    <textarea name="description" bind:value={description} />
-    <label for="name">Item</label>
-    <input disabled name="name" type="text" value={task.item.name} />
-    <label for="itemAmount">Amount</label>
-    <input name="itemAmount" type="number" bind:value={itemAmount} />
-    <label for="endTime">Deadline (Optional)</label>
-    <input name="endTime" type="datetime-local" bind:value={endTime} />
-    <Checkbox bind:checked={completed} label="Task is completed." />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Add Task</button>
-  </form>
-</Modal>

svelte-ui/src/forms/TaskForm.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Checkbox from "../components/Checkbox.svelte";
+  import ItemSelect from "../components/ItemSelect.svelte";
+  import Modal from "../components/Modal.svelte";
+  import { iconNames } from "../external/icons";
+  import type { TaskResult } from "../models/task";
+  import markStale from "../stores/markStale";
+  import modalStore from "../stores/modal";
+  import { formatFormTime } from "../utils/time";
+
+  export let deletion = false;
+  export let creation = false;
+
+  const md = $modalStore;
+  let task: TaskResult = {
+    id: "",
+    itemId: "",
+    projectId: "",
+    itemAmount: 1,
+    name: "",
+    description: "",
+    icon: iconNames[0],
+    active: true,
+    createdTime: "",
+    item: null,
+    logs: [],
+    completedAmount: 0,
+  }
+  let verb = "Add";
+  if (md.name === "task.edit" || md.name === "task.delete") {
+    task = md.task;
+    verb = (md.name === "task.edit") ? "Edit" : "Delete";
+  } else if (md.name === "task.add") {
+    task.projectId = md.project.id;
+    task.project = md.project;
+
+    if (md.project.tasks.length > 0) {
+      task.itemId = md.project.tasks[0].itemId;
+    }
+  } else {
+    throw new Error("Wrong form")
+  }
+
+  let endTime = formatFormTime(task.endTime);
+  let itemId = task.itemId;
+  let name = task.name;
+  let description = task.description;
+  let itemAmount = task.itemAmount;
+  let completed = !task.active;
+  let error = null;
+  let loading = false;
+
+  function onSubmit() {
+    loading = true;
+    error = null;
+
+    if (creation) {
+      stuffLogClient.createTask({
+        projectId: task.projectId, 
+        itemId: itemId,
+        active: !completed,
+        endTime: (endTime == "") ? null : new Date(endTime),
+  
+        name, description, itemAmount,
+      }).then(() => {
+        markStale("project", "task");
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    } else if (deletion) {
+      stuffLogClient.deleteTask(task.id).then(() => {
+        markStale("goal", "project", "task");
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    } else {
+      stuffLogClient.updateTask(task.id, {
+        endTime: (endTime == "") ? null : new Date(endTime),
+        clearEndTime: endTime == "",
+        active: !completed,
+
+        name, description, itemAmount,
+      }).then(() => {
+        markStale("goal", "project", "task");
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    }
+  }
+</script>
+
+<Modal show title="{verb} Task" error={error} closable on:close={modalStore.close}>
+  <form on:submit|preventDefault={onSubmit}>
+    <label for="projectName">Project</label>
+    <input disabled name="projectName" type="text" value={task.project.name} />
+    <label for="name">Name</label>
+    <input disabled={deletion} name="name" type="text" bind:value={name} />
+    <label for="description">Description</label>
+    <textarea disabled={deletion} name="description" bind:value={description} />
+    <label for="itemId">Item</label>
+    <ItemSelect disabled={!creation} name="itemId" bind:value={itemId} />
+    <label for="itemAmount">Amount</label>
+    <input disabled={deletion} name="itemAmount" type="number" bind:value={itemAmount} />
+    <label for="endTime">Deadline (Optional)</label>
+    <input disabled={deletion} name="endTime" type="datetime-local" bind:value={endTime} />
+    <Checkbox disabled={deletion} bind:checked={completed} label="Task is completed." />
+
+    <hr />
+
+    <button disabled={loading} type="submit">{verb} Task</button>
+  </form>
+</Modal>

svelte-ui/src/models/task.ts

@@ -1,6 +1,7 @@
 import type { IconName } from "../external/icons";
 import type Item from "./item";
 import type Log from "./log";
+import type Project from "./project";
 
 export default interface Task {
   id: string
@@ -18,6 +19,7 @@ export interface TaskResult extends Task {
   item: Item
   logs: Log[]
   completedAmount: number
+  project?: Project
 }
 
 export interface TaskFilter {