feat(ui): add 'ask' type toast

view/src/components/Changelog/index.ts

@@ -0,0 +1,36 @@
+import Toast from "components/Toast";
+import { commitStore, route } from "stores";
+
+(async () => {
+
+  const commits = (await fetch("build/git.json").then(res => res.json())).map(c => {
+    c.date = Date.parse(c.date);
+    return c;
+  })
+
+
+  commitStore.set(commits);
+
+  let currentCommit = localStorage.getItem("currentCommit");
+  if (!currentCommit) currentCommit = commits[0].id;
+  localStorage.setItem("currentCommit", currentCommit);
+
+  let reachedCurrentCommit = false;
+  const newCommits = commits.filter(c => {
+    if (reachedCurrentCommit) return true;
+    if (c.id === currentCommit) {
+      reachedCurrentCommit = true;
+    }
+  });
+
+  if (newCommits.length > 2) {
+    if (window.location.hash !== "#changelog") {
+      if ((await Toast.ask(`There are <b>${newCommits.length}</b> updates. Do you want to see them?`, ["yes", "no"])) === "yes") {
+        route.set("changelog")
+      }
+    }
+  }
+
+})();
+
+export default {};

view/src/components/Toast/Toast.d.ts

@@ -1,8 +1,10 @@
 interface Toast {
   type: string;
   msg: string;
-  time: number;
+  duration: number;
 
-  res?: () => void;
-  rej?: () => void;
+  options?: string[];
+
+  resolve?: () => void;
+  reject?: () => void;
 }

view/src/components/Toast/Toast.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { fly } from "svelte/transition";
   export let msg;
-  //export let time;
+  //export let duration;
   export let type;
-  export let res;
-  export let rej;
+  export let resolve;
+
+  export let options = ["okay", "nope"];
+
+  const gridCols = options.map((v) => "auto").join(" ");
 </script>
 
 <div transition:fly={{ duration: 500, x: -50 }} class={`wrapper type-${type}`}>
@@ -12,8 +15,16 @@
 
   {#if type === "confirm"}
     <div class="button-wrapper">
-      <button on:click={res}>okay</button>
-      <button on:click={rej}>nope</button>
+      <button on:click={() => resolve(true)} class="accept">okay</button>
+      <button on:click={() => resolve(false)} class="reject">nope</button>
+    </div>
+  {/if}
+
+  {#if type === "ask"}
+    <div class="button-wrapper" style={`grid-template-columns: ${gridCols};`}>
+      {#each options as opt}
+        <button on:click={() => resolve(opt)}>{opt}</button>
+      {/each}
     </div>
   {/if}
 </div>
@@ -24,7 +35,8 @@
     padding-top: 2.5px;
     margin: 5px;
     background-color: white;
-    z-index: 999;
+    font-size: 1.2em;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
   }
 
   .wrapper.type-warn {
@@ -40,7 +52,7 @@
   .button-wrapper {
     width: 100%;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    border-top: solid thin black;
   }
 
   .button-wrapper > button {
@@ -48,15 +60,20 @@
     background: none;
     height: 100%;
     padding: 0px;
+    padding: 2px 5px;
     border: none;
     color: black;
-    outline: solid thin black;
+    border-right: solid thin black;
   }
 
-  .button-wrapper > button:first-child {
+  .button-wrapper > button:last-child {
+    border: none;
+  }
+
+  .accept {
     background-color: rgb(131, 255, 131);
   }
-  .button-wrapper > button:last-child {
+  .reject {
     background-color: rgb(255, 126, 126);
   }
 

view/src/components/Toast/index.ts

@@ -1,24 +1,31 @@
 import store from "./store";
 
-function add(type, msg, duration) {
+interface addOptions {
+  type?: string,
+  msg?: string,
+  duration?: number,
+  options?: string[]
+}
+function add({ type = "info", msg = "Hey :)", duration = 3000, options = [] }: addOptions) {
 
-  let prom: Promise<boolean>;
+  let prom: Promise<boolean | string>;
 
   const toast: Toast = {
     type,
     msg,
-    time: duration
+    options,
+    duration
   }
 
-  if (type === "confirm") {
-    prom = new Promise((res, rej) => {
-      toast.res = () => {
+  if (type === "confirm" || type === "ask") {
+    prom = new Promise((resolve, rej) => {
+      toast.resolve = (result = true) => {
         store.update(toasts => toasts.filter(t => t !== toast));
-        res(true);
+        resolve(result);
       };
-      toast.rej = () => {
+      toast.reject = (result = false) => {
         store.update(toasts => toasts.filter(t => t !== toast));
-        res(false);
+        resolve(result);
       };
     })
   }
@@ -27,8 +34,8 @@ function add(type, msg, duration) {
 
   setTimeout(() => {
     store.update(toasts => toasts.filter(t => t !== toast));
-    if (type === "confirm") {
-      toast.rej();
+    if (type === "confirm" || type === "ask") {
+      toast.reject();
     }
   }, duration);
 
@@ -37,8 +44,9 @@ function add(type, msg, duration) {
 }
 
 export default {
-  info: msg => add("info", msg, 3000),
-  warn: msg => add("warn", msg, 3000),
-  error: msg => add("error", msg, 3000),
-  confirm: msg => add("confirm", msg, 10000),
+  info: msg => add({ msg }),
+  warn: msg => add({ type: "warn", msg }),
+  error: msg => add({ type: "error", msg }),
+  confirm: msg => add({ type: "confirm", msg, duration: 10000 }),
+  ask: (msg, options) => add({ type: "ask", msg, options, duration: 10000 })
 }