first commit

svelte-ui/src/forms/GoalForm.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import modalStore from "../stores/modal";
+  import goalStore, { fpGoalStore } from "../stores/goal";
+  import groupStore from "../stores/goal";
+  import IconSelect from "../components/IconSelect.svelte";
+  import { DEFAULT_ICON } from "../external/icons";
+  import type { IconName } from "../external/icons";
+  import type { GoalResult } from "../models/goal";
+  import projectStore, { fpProjectStore } from "../stores/project";
+import { formatFormTime, nextMonth } from "../utils/time";
+import GroupSelect from "../components/GroupSelect.svelte";
+
+  export let deletion = false;
+  export let creation = false;
+
+  const md = $modalStore;
+
+  let goal: GoalResult = {
+    id: "",
+    groupId: "",
+    startTime: nextMonth(new Date()).toISOString(),
+    endTime: new Date(nextMonth(nextMonth(new Date())).getTime() - 1).toISOString(),
+    amount: 1,
+    name: "",
+    description: "",
+    completedAmount: 0,
+    group: {id: "", name: "", icon: "question", description: ""},
+    items: [],
+    logs: [],
+  };
+  let verb = "Add";
+  if (md.name === "goal.edit" || md.name === "goal.delete") {
+    goal = md.goal;
+    verb = (md.name === "goal.edit") ? "Edit" : "Delete";
+  } else if (md.name !== "goal.add") {
+    throw new Error("Wrong form")
+  }
+
+  let name = goal.name;
+  let description = goal.description;
+  let groupId = goal.groupId;
+  let amount = goal.amount;
+  let startTime = formatFormTime(goal.startTime);
+  let endTime = formatFormTime(goal.endTime);
+  
+  let error = null;
+
+  function onSubmit() {
+    if (creation) {
+      stuffLogClient.createGoal({
+        startTime: new Date(startTime), 
+        endTime: new Date(endTime),
+        groupId, name, description, amount,
+      }).then(() => {
+        goalStore.markStale();
+        fpGoalStore.markStale();
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      })
+    } else if (deletion) {
+      stuffLogClient.deleteGoal(goal.id).then(() => {
+        goalStore.markStale();
+        fpGoalStore.markStale();
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      })
+    } else {
+      stuffLogClient.updateGoal(goal.id, {
+        startTime: new Date(startTime), 
+        endTime: new Date(endTime),
+        name, description, amount,
+      }).then(() => {
+        goalStore.markStale();
+        fpGoalStore.markStale();
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      })
+    }
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="{verb} Goal" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <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="groupId">Group</label>
+    <GroupSelect disabled={!creation} name="groupId" bind:value={groupId}/>
+    <label for="amount">Amount</label>
+    <input disabled={deletion} name="amount" type="number" bind:value={amount} />
+    <label for="startTime">Start Time</label>
+    <input disabled={deletion} name="startTime" type="datetime-local" bind:value={startTime} />
+    <label for="endTime">End Time</label>
+    <input disabled={deletion} name="endTime" type="datetime-local" bind:value={endTime} />
+
+    <hr />
+
+    <button type="submit">{verb} Goal</button>
+  </form>
+</Modal>

svelte-ui/src/forms/GroupForm.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import modalStore from "../stores/modal";
+  import goalStore, { fpGoalStore } from "../stores/goal";
+  import groupStore from "../stores/group";
+  import IconSelect from "../components/IconSelect.svelte";
+  import { DEFAULT_ICON } from "../external/icons";
+  import type { IconName } from "../external/icons";
+  import type { GroupResult } from "../models/group";
+import projectStore, { fpProjectStore } from "../stores/project";
+
+  export let deletion = false;
+  export let creation = false;
+
+  const md = $modalStore;
+  let group: GroupResult = {
+    id: "",
+    name: "",
+    description: "",
+    icon: DEFAULT_ICON,
+    items: [],
+  };
+  let verb = "Add";
+  if (md.name === "group.edit" || md.name === "group.delete") {
+    group = md.group;
+    verb = (md.name === "group.edit") ? "Edit" : "Delete";
+  } else if (md.name !== "group.add") {
+    throw new Error("Wrong form")
+  }
+
+  let name = group.name;
+  let description = group.description;
+  let icon = group.icon as IconName;
+  let error = null;
+
+  function onSubmit() {
+    if (creation) {
+      stuffLogClient.createGroup({
+        name, description, icon,
+      }).then(() => {
+        groupStore.markStale();
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      })
+    } else if (deletion) {
+      stuffLogClient.deleteGroup(group.id).then(() => {
+        groupStore.markStale();
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      })
+    } else {
+      stuffLogClient.updateGroup(group.id, {
+        name, description, icon,
+      }).then(() => {
+        groupStore.markStale();
+        goalStore.markStale();
+        fpGoalStore.markStale();
+        projectStore.markStale();
+        fpProjectStore.markStale();
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      })
+    }
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="{verb} Group" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <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="icon">Icon</label>
+    <IconSelect disabled={deletion} bind:value={icon} />
+
+    <hr />
+
+    <button type="submit">{verb} Group</button>
+  </form>
+</Modal>

svelte-ui/src/forms/ItemAddForm.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import modalStore from "../stores/modal";
+  import goalStore, { fpGoalStore } from "../stores/goal";
+  import groupStore from "../stores/group";
+
+  const md = $modalStore;
+  if (md.name !== "item.add") {
+    throw new Error("Wrong form");
+  }
+
+  let group = md.group;
+  let name = "";
+  let description = "";
+  let groupWeight = 1;
+  let error = null;
+
+  function onSubmit() {
+    stuffLogClient.createItem({
+      groupId: group.id, 
+
+      name, description, groupWeight,
+    }).then(() => {
+      groupStore.markStale();
+      goalStore.markStale();
+      fpGoalStore.markStale();
+      modalStore.close();
+    })
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="Add Item" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <label for="groupName">Group</label>
+    <input disabled name="groupName" type="text" value={group.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="groupWeight">Group Weight</label>
+    <input name="groupWeight" type="number" bind:value={groupWeight} />
+
+    <hr />
+
+    <button type="submit">Add Item</button>
+  </form>
+</Modal>

svelte-ui/src/forms/ItemDeleteForm.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import modalStore from "../stores/modal";
+  import groupStore from "../stores/group";
+
+  const md = $modalStore;
+  if (md.name !== "item.delete") {
+    throw new Error("Wrong form");
+  }
+
+  let item = md.item;
+  let group = md.group;
+  let name = item.name;
+  let description = item.description;
+  let groupWeight = item.groupWeight;
+  let error = null;
+
+  function onSubmit() {
+    stuffLogClient.deleteItem(item.id).then(() => {
+      groupStore.markStale();
+      modalStore.close();
+    }).catch(err => {
+      error = err.message ? err.message : err.toString();
+    })
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="Edit Item" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <label for="groupName">Group</label>
+    <input disabled name="groupName" type="text" value={group.name} />
+    <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="groupWeight">Group Weight</label>
+    <input disabled name="groupWeight" type="number" value={groupWeight} />
+
+    <hr />
+
+    <button type="submit">Delete Item</button>
+  </form>
+</Modal>

svelte-ui/src/forms/ItemEditForm.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import modalStore from "../stores/modal";
+  import goalStore, { fpGoalStore } from "../stores/goal";
+  import groupStore from "../stores/group";
+  import projectStore, { fpProjectStore } from "../stores/project";
+
+  const md = $modalStore;
+  if (md.name !== "item.edit") {
+    throw new Error("Wrong form");
+  }
+
+  let item = md.item;
+  let group = md.group;
+  let name = item.name;
+  let description = item.description;
+  let groupWeight = item.groupWeight;
+  let error = null;
+
+  function onSubmit() {
+    stuffLogClient.updateItem(item.id, {
+      name, description, groupWeight,
+    }).then(() => {
+      groupStore.markStale();
+      goalStore.markStale();
+      fpGoalStore.markStale();
+      projectStore.markStale();
+      fpProjectStore.markStale();
+      modalStore.close();
+    })
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="Edit Item" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <label for="groupName">Group</label>
+    <input disabled name="groupName" type="text" value={group.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="groupWeight">Group Weight</label>
+    <input name="groupWeight" type="number" bind:value={groupWeight} />
+
+    <hr />
+
+    <button type="submit">Edit Item</button>
+  </form>
+</Modal>

svelte-ui/src/forms/LogAddForm.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import goalStore, { fpGoalStore } from "../stores/goal";
+import logStore from "../stores/logs";
+  import modalStore from "../stores/modal";
+  import projectStore, { fpProjectStore } from "../stores/project";
+  import { formatFormTime } from "../utils/time";
+
+  let loggedTime = formatFormTime(new Date);
+  let taskName = "";
+  let description = "";
+  let markInactive = false;
+  let error = null;
+
+  function onSubmit() {
+    const md = $modalStore;
+    if (md.name !== "log.add") {
+      throw new Error("Wrong form");
+    }
+
+    stuffLogClient.createLog({
+      taskId: md.task.id, 
+      loggedTime: new Date(loggedTime).toISOString(),
+      description,
+    }).then(() => {
+      if (markInactive) {
+        return stuffLogClient.updateTask(md.task.id, {active: false})
+      }
+    }).then(() => {
+      modalStore.close();
+    }).finally(() => {
+      projectStore.markStale();
+      fpProjectStore.markStale();
+      goalStore.markStale();
+      fpGoalStore.markStale();
+      logStore.markStale();
+    })
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+
+  $: {
+    const md = $modalStore;
+    if (md.name === "log.add") {
+      taskName = md.task.name;
+    }
+  }
+</script>
+
+<Modal show title="Add Log" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <label for="taskName">Task</label>
+    <input disabled name="taskName" type="text" bind:value={taskName} />
+
+    <label for="loggedTime">Logged Time</label>
+    <input name="loggedTime" type="datetime-local" bind:value={loggedTime} />
+    <label for="description">Description</label>
+    <textarea name="description" bind:value={description} />
+    <input id="markInactive" type="checkbox" bind:checked={markInactive} />
+    <label for="markInactive">Complete Task</label>
+
+    <hr />
+
+    <button type="submit">Add Log</button>
+  </form>
+</Modal>

svelte-ui/src/forms/LogDeleteForm.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import modalStore from "../stores/modal";
+  import goalStore, { fpGoalStore } from "../stores/goal";
+  import projectStore, { fpProjectStore } from "../stores/project";
+  import { formatFormTime } from "../utils/time";
+  import logStore from "../stores/logs";
+
+  const md = $modalStore;
+  if (md.name !== "log.delete") {
+    throw new Error("Wrong form");
+  }
+
+  let loggedTime = formatFormTime(new Date(md.log.loggedTime));
+  let description = md.log.description;
+  let error = null;
+
+  function onSubmit() {
+    const md = $modalStore;
+    if (md.name !== "log.delete") {
+      throw new Error("Wrong form");
+    }
+
+    stuffLogClient.deleteLog(md.log.id).then(() => {
+      projectStore.markStale();
+      fpProjectStore.markStale();
+      goalStore.markStale();
+      fpGoalStore.markStale();
+      logStore.markStale();
+
+      modalStore.close();
+    })
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="Delete Log" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <label for="taskName">Task</label>
+    <input disabled name="taskName" type="text" bind:value={md.log.task.name} />
+    <label for="loggedTime">Logged Time</label>
+    <input disabled name="loggedTime" type="datetime-local" bind:value={loggedTime} />
+    <label for="description">Description</label>
+    <textarea disabled name="description" bind:value={description} />
+
+    <hr />
+
+    <button type="submit">Delete Log</button>
+  </form>
+</Modal>

svelte-ui/src/forms/LogEditForm.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import modalStore from "../stores/modal";
+  import goalStore, { fpGoalStore } from "../stores/goal";
+  import projectStore, { fpProjectStore } from "../stores/project";
+  import { formatFormTime } from "../utils/time";
+  import logStore from "../stores/logs";
+
+  const md = $modalStore;
+  if (md.name !== "log.edit") {
+    throw new Error("Wrong form");
+  }
+
+  let loggedTime = formatFormTime(new Date(md.log.loggedTime));
+  let description = md.log.description;
+  let error = null;
+
+  function onSubmit() {
+    const md = $modalStore;
+    if (md.name !== "log.edit") {
+      throw new Error("Wrong form");
+    }
+
+    stuffLogClient.updateLog(md.log.id, { 
+      loggedTime: new Date(loggedTime).toISOString(),
+      description,
+    }).then(() => {
+      projectStore.markStale();
+      fpProjectStore.markStale();
+      goalStore.markStale();
+      fpGoalStore.markStale();
+      logStore.markStale();
+
+      modalStore.close();
+    })
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="Edit Log" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <label for="taskName">Task</label>
+    <input disabled name="taskName" type="text" bind:value={md.log.task.name} />
+    <label for="loggedTime">Logged Time</label>
+    <input name="loggedTime" type="datetime-local" bind:value={loggedTime} />
+    <label for="description">Description</label>
+    <textarea name="description" bind:value={description} />
+
+    <hr />
+
+    <button type="submit">Edit Log</button>
+  </form>
+</Modal>

svelte-ui/src/forms/LoginForm.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type {CognitoUser} from "amazon-cognito-identity-js";
+
+  import { signIn } from "../clients/amplify";  
+  import authStore from "../stores/auth";
+  import Modal from "../components/Modal.svelte";
+
+  let user: CognitoUser | null = null;
+  let username = "";
+  let password = "";
+  let newPassword = "";
+  let newPasswordRepeat = "";
+  let settingNewPassword = false;
+  let error = null;
+  let done = false;
+
+  function login() {
+    error = null;
+
+    if (settingNewPassword) {
+      if (newPasswordRepeat !== newPassword) {
+        error = "New passwords do not match.";
+        return;
+      }
+
+      user.completeNewPasswordChallenge(newPassword, null, {
+        onSuccess: () => {
+          done = true;
+          authStore.check();
+        },
+        onFailure: err => {
+          error = err
+        },
+      })
+    } else {
+      signIn(username, password).then(newUser => {
+        if (!newUser) {
+          error = "Incorrect username or password."
+          return
+        }
+
+        if ((newUser as any).challengeName === "NEW_PASSWORD_REQUIRED") {
+          error = "Password is expired, please update it."
+          settingNewPassword = true;
+        } else {
+          authStore.check();
+          done = true;
+        }
+
+        user = newUser;
+      }).catch(err => {
+        error = err
+      });
+    }
+  }
+</script>
+
+<Modal show={!done} title="Login" error={error}>
+  <form on:submit|preventDefault={login}>
+    <label for="username">Username</label>
+    <input name="username" type="text" bind:value={username} />
+    <label for="password">Password</label>
+    <input name="password" type="password" bind:value={password} />
+    {#if settingNewPassword}
+      <label for="newPassword">New Password</label>
+      <input name="newPassword" type="password" bind:value={newPassword} />
+      <label for="newPasswordRepeat">New Password</label>
+      <input name="newPasswordRepeat" type="password" bind:value={newPasswordRepeat} />
+    {/if}
+
+    <hr />
+    <button type="submit">Login</button>
+  </form>
+</Modal>

svelte-ui/src/forms/ProjectAddForm.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import IconSelect from "../components/IconSelect.svelte";
+  import Modal from "../components/Modal.svelte";
+  import { iconNames } from "../external/icons";
+  import modalStore from "../stores/modal";
+  import projectStore, { fpProjectStore } from "../stores/project";
+
+  let endTime = "";
+  let name = "";
+  let description = "";
+  let icon = iconNames[0];
+  let error = null;
+
+  function onSubmit() {
+    stuffLogClient.createProject({
+      active: true,
+      endTime: ( endTime == "" ) ? null : new Date(endTime),
+
+      name, description, icon,
+    }).then(() => {
+      projectStore.markStale();
+      if (endTime !== "") {
+        fpProjectStore.markStale();
+      }
+      modalStore.close();
+    }).catch(err => {
+      error = err.message ? err.message : err.toString();
+    })
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="Add Project" 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="itemId">Icon</label>
+    <IconSelect bind:value={icon} />
+    <label for="endTime">Deadline (Optional)</label>
+    <input name="endTime" type="datetime-local" bind:value={endTime} />
+
+    <hr />
+
+    <button type="submit">Add Project</button>
+  </form>
+</Modal>

svelte-ui/src/forms/ProjectDeleteForm.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import IconSelect from "../components/IconSelect.svelte";
+  import Modal from "../components/Modal.svelte";
+  import type { IconName } from "../external/icons";
+  import modalStore from "../stores/modal";
+  import projectStore, { fpProjectStore } from "../stores/project";
+  import { formatFormTime } from "../utils/time";
+
+  const md = $modalStore;
+  if (md.name !== "project.delete") {
+    throw new Error("Wrong form");
+  }
+  const project = md.project;
+
+  let endTime = project.endTime ? formatFormTime(project.endTime) : "";
+  let name = project.name;
+  let description = project.description;
+  let icon = project.icon as IconName;
+  let error = null;
+
+  function onSubmit() {
+    stuffLogClient.deleteProject(project.id).then(() => {
+      projectStore.markStale();
+      if (endTime !== "") {
+        fpProjectStore.markStale();
+      }
+      modalStore.close();
+    }).catch(err => {
+      error = err.message ? err.message : err.toString();
+    })
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="Delete Project" 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="itemId">Icon</label>
+    <IconSelect disabled value={icon} />
+    <label for="endTime">Deadline (Optional)</label>
+    <input disabled name="endTime" type="datetime-local" value={endTime} />
+
+    <hr />
+
+    <button type="submit">Delete Project</button>
+  </form>
+</Modal>

svelte-ui/src/forms/ProjectEditForm.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import IconSelect from "../components/IconSelect.svelte";
+  import Modal from "../components/Modal.svelte";
+  import type { IconName } from "../external/icons";
+  import modalStore from "../stores/modal";
+  import projectStore, { fpProjectStore } from "../stores/project";
+  import { formatFormTime } from "../utils/time";
+
+  const md = $modalStore;
+  if (md.name !== "project.edit") {
+    throw new Error("Wrong form");
+  }
+  const project = md.project;
+
+  let endTime = project.endTime ? formatFormTime(project.endTime) : "";
+  let name = project.name;
+  let description = project.description;
+  let icon = project.icon as IconName;
+  let error = null;
+
+  function onSubmit() {
+    stuffLogClient.updateProject(project.id, {
+      active: true,
+      endTime: ( endTime == "" ) ? null : new Date(endTime),
+      clearEndTime: ( endTime == "" ),
+
+      name, description, icon,
+    }).then(() => {
+      projectStore.markStale();
+      fpProjectStore.markStale();
+      modalStore.close();
+    }).catch(err => {
+      error = err.message ? err.message : err.toString();
+    })
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="Edit Project" 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="itemId">Icon</label>
+    <IconSelect bind:value={icon} />
+    <label for="endTime">Deadline (Optional)</label>
+    <input name="endTime" type="datetime-local" bind:value={endTime} />
+
+    <hr />
+
+    <button type="submit">Edit Project</button>
+  </form>
+</Modal>

svelte-ui/src/forms/TaskAddForm.svelte

@@ -0,0 +1,72 @@
+<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";
+
+  let project: ProjectResult
+  let endTime = "";
+  let itemId = "";
+  let name = "";
+  let description = "";
+  let itemAmount = 1;
+  let error = null;
+
+  function onSubmit() {
+    stuffLogClient.createTask({
+      projectId: project.id, 
+      itemId: itemId,
+      active: true,
+      endTime: ( endTime == "") ? null : new Date(endTime),
+
+      name, description, itemAmount,
+    }).then(() => {
+      projectStore.markStale();
+      fpProjectStore.markStale();
+      modalStore.close();
+    })
+
+    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 {itemId}</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 type="submit">Add Task</button>
+  </form>
+</Modal>

svelte-ui/src/forms/TaskDeleteForm.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import goalStore, { fpGoalStore } from "../stores/goal";
+  import modalStore from "../stores/modal";
+  import projectStore, { fpProjectStore } from "../stores/project";
+  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 active = task.active;
+  let endTime = task.endTime ? formatFormTime(task.endTime) : "";
+  let error = null;
+
+  function onSubmit() {
+    stuffLogClient.deleteTask(task.id).then(() => {
+      projectStore.markStale();
+      fpProjectStore.markStale();
+      goalStore.markStale();
+      fpGoalStore.markStale();
+      modalStore.close();
+    }).catch(err => {
+      error = err.message ? err.message : err.toString();
+    })
+
+    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} />
+    <input id="active" type="checkbox" checked={active} />
+    <label for="active">Task is active/incomplete</label>
+
+    <hr />
+
+    <button type="submit">Delete1 Task</button>
+  </form>
+</Modal>

svelte-ui/src/forms/TaskEditForm.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import goalStore, { fpGoalStore } from "../stores/goal";
+  import modalStore from "../stores/modal";
+  import projectStore, { fpProjectStore } from "../stores/project";
+  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 active = task.active;
+  let endTime = task.endTime ? formatFormTime(task.endTime) : "";
+  let error = null;
+
+  function onSubmit() {
+    stuffLogClient.updateTask(task.id, {
+      endTime: (endTime == "") ? null : new Date(endTime),
+      clearEndTime: endTime == "",
+
+      name, description, itemAmount, active,
+    }).then(() => {
+      projectStore.markStale();
+      fpProjectStore.markStale();
+      goalStore.markStale();
+      fpGoalStore.markStale();
+      modalStore.close();
+    })
+
+    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} />
+    <input id="active" type="checkbox" bind:checked={active} />
+    <label for="active">Task is active/incomplete</label>
+
+    <hr />
+
+    <button type="submit">Add Task</button>
+  </form>
+</Modal>