work on initialization

web/static/src/ts/store/notifications.ts

@@ -0,0 +1,55 @@
+import { EventBus as Bus } from "../core/event_bus";
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+export interface INotification {
+  id: number;
+  title: string;
+  message: string;
+  type: "notification" | "warning";
+  sticky: boolean;
+}
+
+export interface INotificationManager {
+  add(notif: Partial<INotification>): number;
+  close(id: number): void;
+  on(
+    event: "notification_added",
+    owner: any,
+    callback: (notif: INotification) => void
+  ): void;
+  on(
+    event: "notification_closed",
+    owner: any,
+    callback: (id: number) => void
+  ): void;
+}
+
+//------------------------------------------------------------------------------
+// Notification Manager
+//------------------------------------------------------------------------------
+
+export class NotificationManager extends Bus implements INotificationManager {
+  nextID = 1;
+
+  add(notif: Partial<INotification>): number {
+    const id = this.nextID++;
+    const defaultVals = {
+      title: "",
+      message: "",
+      type: "notification",
+      sticky: false
+    };
+    const notification = Object.assign(defaultVals, notif, { id });
+    this.trigger("notification_added", notification);
+    if (!notification.sticky) {
+      setTimeout(() => this.close(id), 2500);
+    }
+    return id;
+  }
+  close(id: number) {
+    this.trigger("notification_closed", id);
+  }
+}

web/static/src/ts/store/router.ts

@@ -0,0 +1,67 @@
+import { EventBus, Callback } from "../core/event_bus";
+
+//------------------------------------------------------------------------------
+// Types and helpers
+//------------------------------------------------------------------------------
+
+export type Query = { [key: string]: string };
+
+function clearSlashes(s: string): string {
+  return s.replace(/\/$/, "").replace(/^\//, "");
+}
+
+export type RouterEvent = "query_changed";
+
+export interface IRouter {
+  navigate(query: Query): void;
+  on(event: RouterEvent, owner: any, callback: Callback): void;
+  getQuery(): Query;
+  formatURL(path: string, query: Query): string;
+}
+
+//------------------------------------------------------------------------------
+// Router
+//------------------------------------------------------------------------------
+
+export class Router extends EventBus implements IRouter {
+  currentQuery: Query;
+
+  constructor() {
+    super();
+    this.currentQuery = this.getQuery();
+    window.onhashchange = () => {
+      this.currentQuery = this.getQuery();
+      this.trigger("query_changed", this.currentQuery);
+    };
+  }
+
+  /**
+   * @param {Query} query
+   */
+  navigate(query: Query) {
+    const url = this.formatURL("", query);
+    window.history.replaceState(null, document.title, url);
+  }
+
+  formatQuery(query: Query): string {
+    let parts: string[] = [];
+    for (let key in query) {
+      parts.push(`${key}=${query[key]}`);
+    }
+    return parts.join("&");
+  }
+
+  formatURL(path: string, query: Query): string {
+    let url = clearSlashes(path);
+    return `/${url}#${this.formatQuery(query)}`;
+  }
+
+  getQuery(): Query {
+    const query = {};
+    for (let part of window.location.hash.slice(1).split("&")) {
+      let [key, value] = part.split("=");
+      query[key] = value;
+    }
+    return query;
+  }
+}