diff --git a/view/src/components/Changelog/index.ts b/view/src/components/Changelog/index.ts
new file mode 100644
index 0000000..6eb72c7
--- /dev/null
+++ b/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 ${newCommits.length} updates. Do you want to see them?`, ["yes", "no"])) === "yes") {
+ route.set("changelog")
+ }
+ }
+ }
+
+})();
+
+export default {};
\ No newline at end of file
diff --git a/view/src/components/Toast/Toast.d.ts b/view/src/components/Toast/Toast.d.ts
index 794dee7..b844e69 100644
--- a/view/src/components/Toast/Toast.d.ts
+++ b/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;
}
\ No newline at end of file
diff --git a/view/src/components/Toast/Toast.svelte b/view/src/components/Toast/Toast.svelte
index 16f3541..b4fa985 100644
--- a/view/src/components/Toast/Toast.svelte
+++ b/view/src/components/Toast/Toast.svelte
@@ -1,10 +1,13 @@
@@ -12,8 +15,16 @@
{#if type === "confirm"}
-
-
+
+
+
+ {/if}
+
+ {#if type === "ask"}
+
+ {#each options as opt}
+
+ {/each}
{/if}
@@ -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);
}
diff --git a/view/src/components/Toast/index.ts b/view/src/components/Toast/index.ts
index 55c3f54..4d2208e 100644
--- a/view/src/components/Toast/index.ts
+++ b/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;
+ let prom: Promise;
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 })
}
\ No newline at end of file