prevent double-submitting forms.

svelte-ui/src/components/Modal.svelte

@@ -142,6 +142,11 @@ div.modal :global(button:hover), div.modal :global(button:focus) {
   background: #222;
   color: #FFF;
 }
+div.modal :global(button:disabled) {
+  background: #444;
+  color: #AAA;
+}
+
 
 div.modal :global(label) {
   padding: 0 0 0.125em 0.25ch;

svelte-ui/src/forms/GoalForm.svelte

@@ -46,8 +46,11 @@ import GroupSelect from "../components/GroupSelect.svelte";
   let endTime = formatFormTime(goal.endTime);
   
   let error = null;
+  let loading = false;
 
   function onSubmit() {
+    loading = true;
+
     if (creation) {
       stuffLogClient.createGoal({
         startTime: new Date(startTime), 
@@ -59,6 +62,8 @@ import GroupSelect from "../components/GroupSelect.svelte";
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
       })
     } else if (deletion) {
       stuffLogClient.deleteGoal(goal.id).then(() => {
@@ -67,6 +72,8 @@ import GroupSelect from "../components/GroupSelect.svelte";
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
       })
     } else {
       stuffLogClient.updateGoal(goal.id, {
@@ -79,6 +86,8 @@ import GroupSelect from "../components/GroupSelect.svelte";
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
       })
     }
 
@@ -107,6 +116,6 @@ import GroupSelect from "../components/GroupSelect.svelte";
 
     <hr />
 
-    <button type="submit">{verb} Goal</button>
+    <button disabled={loading} type="submit">{verb} Goal</button>
   </form>
 </Modal>

svelte-ui/src/forms/GroupForm.svelte

@@ -33,8 +33,11 @@ import projectStore, { fpProjectStore } from "../stores/project";
   let description = group.description;
   let icon = group.icon as IconName;
   let error = null;
+  let loading = false;
 
   function onSubmit() {
+    loading = true;
+
     if (creation) {
       stuffLogClient.createGroup({
         name, description, icon,
@@ -43,6 +46,8 @@ import projectStore, { fpProjectStore } from "../stores/project";
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
       })
     } else if (deletion) {
       stuffLogClient.deleteGroup(group.id).then(() => {
@@ -50,6 +55,8 @@ import projectStore, { fpProjectStore } from "../stores/project";
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
       })
     } else {
       stuffLogClient.updateGroup(group.id, {
@@ -63,6 +70,8 @@ import projectStore, { fpProjectStore } from "../stores/project";
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
       })
     }
 
@@ -85,6 +94,6 @@ import projectStore, { fpProjectStore } from "../stores/project";
 
     <hr />
 
-    <button type="submit">{verb} Group</button>
+    <button disabled={loading} type="submit">{verb} Group</button>
   </form>
 </Modal>

svelte-ui/src/forms/ItemAddForm.svelte

@@ -15,8 +15,11 @@
   let description = "";
   let groupWeight = 1;
   let error = null;
+  let loading = false;
 
   function onSubmit() {
+    loading = true;
+
     stuffLogClient.createItem({
       groupId: group.id, 
 
@@ -26,6 +29,8 @@
       goalStore.markStale();
       fpGoalStore.markStale();
       modalStore.close();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -49,6 +54,6 @@
 
     <hr />
 
-    <button type="submit">Add Item</button>
+    <button disabled={loading} type="submit">Add Item</button>
   </form>
 </Modal>

svelte-ui/src/forms/ItemDeleteForm.svelte

@@ -15,13 +15,18 @@
   let description = item.description;
   let groupWeight = item.groupWeight;
   let error = null;
+  let loading = false;
 
   function onSubmit() {
+    loading = true;
+
     stuffLogClient.deleteItem(item.id).then(() => {
       groupStore.markStale();
       modalStore.close();
     }).catch(err => {
       error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -45,6 +50,6 @@
 
     <hr />
 
-    <button type="submit">Delete Item</button>
+    <button disabled={loading} type="submit">Delete Item</button>
   </form>
 </Modal>

svelte-ui/src/forms/ItemEditForm.svelte

@@ -17,8 +17,11 @@
   let description = item.description;
   let groupWeight = item.groupWeight;
   let error = null;
+  let loading = false;
 
   function onSubmit() {
+    loading = true;
+
     stuffLogClient.updateItem(item.id, {
       name, description, groupWeight,
     }).then(() => {
@@ -28,6 +31,8 @@
       projectStore.markStale();
       fpProjectStore.markStale();
       modalStore.close();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -51,6 +56,6 @@
 
     <hr />
 
-    <button type="submit">Edit Item</button>
+    <button disabled={loading} type="submit">Edit Item</button>
   </form>
 </Modal>

svelte-ui/src/forms/LogAddForm.svelte

@@ -18,8 +18,11 @@ import logStore from "../stores/logs";
   let description = "";
   let markInactive = task.completedAmount >= (task.itemAmount - 1);
   let error = null;
+  let loading = false;
 
   function onSubmit() {
+    loading = true;
+
     stuffLogClient.createLog({
       taskId: task.id, 
       loggedTime: new Date(loggedTime).toISOString(),
@@ -36,6 +39,8 @@ import logStore from "../stores/logs";
       goalStore.markStale();
       fpGoalStore.markStale();
       logStore.markStale();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -59,6 +64,6 @@ import logStore from "../stores/logs";
 
     <hr />
 
-    <button type="submit">Add Log</button>
+    <button disabled={loading} type="submit">Add Log</button>
   </form>
 </Modal>

svelte-ui/src/forms/LogDeleteForm.svelte

@@ -15,6 +15,7 @@
   let loggedTime = formatFormTime(new Date(md.log.loggedTime));
   let description = md.log.description;
   let error = null;
+  let loading = false;
 
   function onSubmit() {
     const md = $modalStore;
@@ -22,6 +23,8 @@
       throw new Error("Wrong form");
     }
 
+    loading = true;
+
     stuffLogClient.deleteLog(md.log.id).then(() => {
       projectStore.markStale();
       fpProjectStore.markStale();
@@ -30,6 +33,8 @@
       logStore.markStale();
 
       modalStore.close();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -51,6 +56,6 @@
 
     <hr />
 
-    <button type="submit">Delete Log</button>
+    <button disabled={loading} type="submit">Delete Log</button>
   </form>
 </Modal>

svelte-ui/src/forms/LogEditForm.svelte

@@ -15,6 +15,7 @@
   let loggedTime = formatFormTime(new Date(md.log.loggedTime));
   let description = md.log.description;
   let error = null;
+  let loading = false;
 
   function onSubmit() {
     const md = $modalStore;
@@ -22,6 +23,8 @@
       throw new Error("Wrong form");
     }
 
+    loading = true;
+
     stuffLogClient.updateLog(md.log.id, { 
       loggedTime: new Date(loggedTime).toISOString(),
       description,
@@ -33,6 +36,8 @@
       logStore.markStale();
 
       modalStore.close();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -54,6 +59,6 @@
 
     <hr />
 
-    <button type="submit">Edit Log</button>
+    <button disabled={loading} type="submit">Edit Log</button>
   </form>
 </Modal>

svelte-ui/src/forms/ProjectAddForm.svelte

@@ -11,8 +11,11 @@
   let description = "";
   let icon = iconNames[0];
   let error = null;
+  let loading = false;
 
   function onSubmit() {
+    loading = true;
+
     stuffLogClient.createProject({
       active: true,
       endTime: ( endTime == "" ) ? null : new Date(endTime),
@@ -26,6 +29,8 @@
       modalStore.close();
     }).catch(err => {
       error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -49,6 +54,6 @@
 
     <hr />
 
-    <button type="submit">Add Project</button>
+    <button disabled={loading} type="submit">Add Project</button>
   </form>
 </Modal>

svelte-ui/src/forms/ProjectDeleteForm.svelte

@@ -18,8 +18,11 @@
   let description = project.description;
   let icon = project.icon as IconName;
   let error = null;
+  let loading = false;
 
   function onSubmit() {
+    loading = true;
+
     stuffLogClient.deleteProject(project.id).then(() => {
       projectStore.markStale();
       if (endTime !== "") {
@@ -28,6 +31,8 @@
       modalStore.close();
     }).catch(err => {
       error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -51,6 +56,6 @@
 
     <hr />
 
-    <button type="submit">Delete Project</button>
+    <button disabled={loading} type="submit">Delete Project</button>
   </form>
 </Modal>

svelte-ui/src/forms/ProjectEditForm.svelte

@@ -20,8 +20,11 @@ import Checkbox from "../components/Checkbox.svelte";
   let description = project.description;
   let icon = project.icon as IconName;
   let error = null;
+  let loading = false;
 
   function onSubmit() {
+    loading = true;
+
     stuffLogClient.updateProject(project.id, {
       endTime: ( endTime == "" ) ? null : new Date(endTime),
       clearEndTime: ( endTime == "" ),
@@ -33,6 +36,8 @@ import Checkbox from "../components/Checkbox.svelte";
       modalStore.close();
     }).catch(err => {
       error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -57,6 +62,6 @@ import Checkbox from "../components/Checkbox.svelte";
 
     <hr />
 
-    <button type="submit">Edit Project</button>
+    <button disabled={loading} type="submit">Edit Project</button>
   </form>
 </Modal>

svelte-ui/src/forms/TaskAddForm.svelte

@@ -13,8 +13,11 @@
   let description = "";
   let itemAmount = 1;
   let error = null;
+  let loading = false;
 
   function onSubmit() {
+    loading = true;
+
     stuffLogClient.createTask({
       projectId: project.id, 
       itemId: itemId,
@@ -28,6 +31,8 @@
       modalStore.close();
     }).catch(err => {
       error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -69,6 +74,6 @@
 
     <hr />
 
-    <button type="submit">Add Task</button>
+    <button disabled={loading} type="submit">Add Task</button>
   </form>
 </Modal>

svelte-ui/src/forms/TaskDeleteForm.svelte

@@ -19,8 +19,11 @@ import Checkbox from "../components/Checkbox.svelte";
   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();
@@ -29,6 +32,8 @@ import Checkbox from "../components/Checkbox.svelte";
       modalStore.close();
     }).catch(err => {
       error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -55,6 +60,6 @@ import Checkbox from "../components/Checkbox.svelte";
 
     <hr />
 
-    <button type="submit">Delete Task</button>
+    <button disabled={loading} type="submit">Delete Task</button>
   </form>
 </Modal>

svelte-ui/src/forms/TaskEditForm.svelte

@@ -19,8 +19,11 @@ import Checkbox from "../components/Checkbox.svelte";
   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 == "",
@@ -35,6 +38,8 @@ import Checkbox from "../components/Checkbox.svelte";
       modalStore.close();
     }).catch(err => {
       error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
     })
 
     error = null;
@@ -61,6 +66,6 @@ import Checkbox from "../components/Checkbox.svelte";
 
     <hr />
 
-    <button type="submit">Add Task</button>
+    <button disabled={loading} type="submit">Add Task</button>
   </form>
 </Modal>