glib-web 0.5.77

package/utils/http.js

@@ -0,0 +1,209 @@
+import Type from "./type";
+import Action from "../action";
+
+let loading = false;
+
+class HttpRequest {
+  constructor() {
+    this.controller = new AbortController();
+    this.canceled = false;
+  }
+
+  cancel() {
+    this.canceled = true;
+    this.controller.abort();
+  }
+}
+
+export default class {
+  static _extractFormData(properties, needCsrfToken) {
+    // if (properties["formDataEncoded"]) {
+    //   return properties["formData"];
+    // }
+
+    const data = properties.formData;
+    if (data instanceof FormData) {
+      return data;
+    }
+
+    const formData = new FormData();
+    var params = data || {};
+    for (const key in params) {
+      formData.append(key, params[key]);
+    }
+
+    if (needCsrfToken && !Type.isString(params["authenticity_token"])) {
+      formData.append("authenticity_token", Utils.dom.getCsrf());
+    }
+    return formData;
+  }
+
+  static load(properties, target, component) {
+    const url = new URL(properties["url"]);
+    const domainMatched = window.location.hostname == url.hostname;
+    if (Utils.settings.reactive && domainMatched) {
+      const currentUrl = window.location.href;
+      const htmlUrl = Utils.url.htmlUrl(properties["url"]);
+
+      Utils.http.execute(properties, "GET", component, (data, response) => {
+        if (htmlUrl !== currentUrl) {
+          const redirectUrl = Utils.url.htmlUrl(response.url);
+          Utils.history.pushPage(data, redirectUrl);
+        }
+
+        this.forceComponentUpdate(() => {
+          Utils.history.resetScroll();
+          window.vueApp.page = data;
+          Action.execute(properties["onOpen"], target, component);
+        });
+      });
+    } else {
+      window.location = Utils.url.htmlUrl(properties["url"]);
+    }
+  }
+
+  static analyticsHeaders(component) {
+    const pageAnalytics =
+      window.vueApp.temp.analytics || window.vueApp.page.analytics || {};
+    const featureAnalytics = pageAnalytics.feature;
+
+    const headers = {};
+    if (featureAnalytics) {
+      const componentAnalytics = component.spec.analytics || {};
+      if (componentAnalytics.disabled) {
+        return headers;
+      }
+
+      Utils.type.ifString(
+        componentAnalytics.group || featureAnalytics.group,
+        value => (headers["GApp-Analytics-Referer-Group"] = value)
+      );
+
+      Utils.type.ifString(
+        componentAnalytics.action || featureAnalytics.action,
+        value => (headers["GApp-Analytics-Referer-Action"] = value)
+      );
+
+      Utils.type.ifString(
+        componentAnalytics.segment || featureAnalytics.segment,
+        value => (headers["GApp-Analytics-Referer-Segment"] = value)
+      );
+
+      Utils.type.ifString(
+        componentAnalytics.placement,
+        value => (headers["GApp-Analytics-Referer-Placement"] = value)
+      );
+    }
+    return headers;
+  }
+
+  static reload(properties, component) {
+    const currentUrl = window.location.href;
+    const data = {
+      url: properties.url || currentUrl
+    };
+
+    Utils.http.execute(data, "GET", component, (page, response) => {
+      Utils.http.forceComponentUpdate(() => {
+        window.vueApp.page = page;
+        const redirectUrl = Utils.url.htmlUrl(response.url);
+        Utils.history.updatePage(redirectUrl);
+
+        GLib.action.execute(properties["onReload"], null, component);
+      });
+    });
+  }
+
+  static execute(properties, methodName, component, jsonHandler) {
+    this.startIndicator(component);
+
+    // `fetch()` only supports uppercase
+    const method = methodName.toUpperCase();
+    let url = Utils.url.jsonUrl(properties["url"]);
+    let body = this._extractFormData(properties, method !== "GET");
+    if (method === "GET") {
+      url = Utils.url.appendParams(url, body);
+      body = null;
+    }
+    console.log(`${method} ${url}`);
+
+    const request = new HttpRequest();
+    let response = null;
+    const vm = this;
+
+    const analyticsHeaders = this.analyticsHeaders(component);
+
+    fetch(url, {
+      method: method,
+      body: body,
+      headers: Object.assign({ Accept: "text/html" }, analyticsHeaders),
+      // Make sure to pass cookies for same origin URLs.
+      // Needed for some browsers, e.g. Edge and Android's native.
+      credentials: "same-origin",
+      signal: request.controller.signal
+    })
+      .then(res => {
+        vm.stopIndicator(component);
+
+        if (res.status >= 500) {
+          throw "Server error";
+        } else if (res.status >= 400) {
+          throw "Not accessible";
+        } else {
+          response = res;
+          return res.json();
+        }
+      })
+      .then(data => {
+        console.debug("Success", data);
+        jsonHandler(data, response);
+      })
+      .catch(error => {
+        vm.stopIndicator(component);
+        if (!request.canceled) {
+          console.error("Error:", error);
+          Utils.launch.snackbar.error(error);
+        } else {
+          console.info("Canceled");
+        }
+      });
+
+    return request;
+  }
+
+  static startIndicator(component) {
+    this._showIndicator();
+    component.$data._isBusy = true;
+  }
+
+  static stopIndicator(component) {
+    this._hideIndicator();
+    component.$data._isBusy = false;
+  }
+
+  static _showIndicator() {
+    loading = true;
+    setTimeout(() => {
+      if (loading) {
+        loading = false;
+        window.vueApp.indicator = true;
+      }
+    }, 200);
+  }
+
+  static _hideIndicator() {
+    loading = false;
+    window.vueApp.indicator = false;
+  }
+
+  // See generic.js
+  static forceComponentUpdate(handler) {
+    window.vueApp.isStale = true;
+
+    // Queue the execution so the first isStale has time to resets state before handler gets executed
+    setTimeout(() => {
+      handler();
+      window.vueApp.isStale = false;
+    }, 0);
+  }
+}

package/utils/launch.js

@@ -0,0 +1,135 @@
+import Vue from "vue";
+import Dialog from "../nav/dialog";
+import Sheet from "../nav/sheet";
+import Snackbar from "../nav/snackbar";
+import Vuetify from "vuetify";
+
+export default class {
+  static dialog(properties, target) {
+    if (!this.stack) {
+      this.stack = [];
+    }
+
+    // https://css-tricks.com/creating-vue-js-component-instances-programmatically/
+    const DialogClass = Vue.extend(Dialog);
+    const instance = new DialogClass({
+      vuetify: new Vuetify({
+        theme: {
+          themes: Utils.settings.themes
+        }
+      }),
+      propsData: {
+        spec: properties,
+        stack: this.stack,
+        target: target,
+        vueApp: window.vueApp
+      }
+    });
+    // instance.stack = this.stack;
+
+    const placeholder = document.body.appendChild(
+      document.createElement("div")
+    );
+    instance.$mount(placeholder);
+  }
+
+  static closeDialog(properties, target, component) {
+    if (!this.stack) {
+      this.stack = [];
+    }
+
+    Utils.type.ifObject(this.stack.last(), dialog => {
+      dialog.close();
+    });
+
+    Utils.type.ifObject(properties["onClose"], it => {
+      Action.execute(it, target, component);
+    });
+  }
+
+  static get sheet() {
+    return LaunchSheet;
+  }
+
+  static get snackbar() {
+    return LaunchSnackbar;
+  }
+
+  static alert(message, target) {
+    const properties = {
+      message: message
+    };
+    const spec = Object.assign({}, properties, {
+      buttons: [
+        {
+          text: "OK",
+          onClick: properties.onClose
+        }
+      ]
+    });
+    this.dialog(spec, target);
+  }
+}
+
+class LaunchSheet {
+  static open(properties) {
+    const SheetClass = Vue.extend(Sheet);
+    const instance = new SheetClass({
+      vuetify: new Vuetify({
+        theme: {
+          themes: Utils.settings.themes
+        }
+      }),
+      propsData: { spec: properties }
+    });
+    const placeholder = document.body.appendChild(
+      document.createElement("div")
+    );
+    instance.$mount(placeholder);
+    // instance.show = true
+    return instance;
+  }
+
+  static confirm(properties, onConfirm) {
+    const spec = Object.assign({}, properties, {
+      buttons: [
+        {
+          text: "Confirm",
+          onClickFunction: onConfirm
+        }
+      ]
+    });
+    this.open(spec);
+  }
+
+  static alert(message, buttons) {
+    const spec = { message: message, buttons: buttons };
+    this.open(spec);
+  }
+}
+
+class LaunchSnackbar {
+  static open(properties) {
+    const SnackbarClass = Vue.extend(Snackbar);
+    const instance = new SnackbarClass({
+      vuetify: window.vueApp.vuetify,
+      propsData: { spec: properties, vueApp: window.vueApp }
+    });
+
+    const placeholder = document.body.appendChild(
+      document.createElement("div")
+    );
+    instance.$mount(placeholder);
+    instance.show = true;
+    return instance;
+  }
+
+  static error(message) {
+    this.open({ message: message, styleClasses: ["error"] });
+  }
+
+  static indicator(message) {
+    const instance = this.open({ message: message, timeout: -1 });
+    instance.indicator = true;
+  }
+}

package/utils/private/ws.js

@@ -0,0 +1,22 @@
+export default class {
+  static handleResponse(payload, component) {
+    if (!Utils.type.isObject(payload)) {
+      return;
+    }
+
+    const ws = window.vueApp.webSocket;
+    Utils.type.ifObject(payload.wsHeader, header => {
+      Object.assign(ws.header, header);
+      console.log("New header: ", ws.header);
+    });
+
+    const actionName = payload.action;
+    if (actionName.startsWith("component/")) {
+      const methodName = actionName.replace(/^component\//, "");
+      console.log(`Executing component action: ${methodName}`);
+      component[`action_${methodName}`](payload);
+    } else {
+      GLib.action.execute(payload, null, component);
+    }
+  }
+}

package/utils/public.js

@@ -0,0 +1,23 @@
+import Action from "../action";
+import Url from "./url";
+import Http from "./http";
+import Type from "./type";
+import Form from "./form";
+
+export default class {
+  static get action() {
+    return Action;
+  }
+  static get url() {
+    return Url;
+  }
+  static get http() {
+    return Http;
+  }
+  static get type() {
+    return Type;
+  }
+  static get form() {
+    return Form;
+  }
+}

package/utils/settings.js

@@ -0,0 +1,48 @@
+class MutableSettings {
+  constructor() {
+    this.reactive = true;
+    this.themes = {};
+    this.gtagId = null;
+  }
+}
+const settings = new MutableSettings();
+export { settings };
+
+export default class ImmutableSettings {
+  static get reactive() {
+    return settings.reactive;
+  }
+
+  static get themes() {
+    return settings.themes;
+  }
+
+  static get env() {
+    return process.env.NODE_ENV;
+  }
+
+  static get appVersion() {
+    return require("../package.json").version;
+  }
+
+  // static get build() {
+  //   switch (this.env) {
+  //     case 'development':
+  //       return new DevBuild()
+  //     default:
+  //       return new ProdBuild()
+  //   }
+  // }
+
+  static get assetCdn() {
+    return `${this.build.assetDomain}/${this.appVersion}`;
+  }
+
+  static get apiHost() {
+    return this.build.apiDomain;
+  }
+
+  static get isDev() {
+    return this.env == "development";
+  }
+}

package/utils/storage.js

@@ -0,0 +1,9 @@
+export default class {
+  static setLocal(key, obj) {
+    localStorage.setItem(key, JSON.stringify(obj))
+  }
+  static getLocal(key) {
+    return JSON.parse(localStorage.getItem(key))
+  }
+}
+

package/utils/type.js

@@ -0,0 +1,69 @@
+export default class {
+  static isObject(obj) {
+    return typeof obj === "object" && obj !== null;
+  }
+  static isString(obj) {
+    return typeof obj === "string";
+  }
+  static isNumber(obj) {
+    return typeof obj === "number" && !isNaN(obj);
+  }
+  static isBoolean(obj) {
+    return typeof obj === "boolean";
+  }
+  static isArray(obj) {
+    return this.isObject(obj) && Array.isArray(obj);
+  }
+  static isFunction(obj) {
+    return typeof obj === "function";
+  }
+  static isNotNull(obj) {
+    return typeof obj !== "undefined" && obj !== null;
+  }
+
+  static ifObject(obj, ifCommand, elseCommand) {
+    if (this.isObject(obj)) {
+      ifCommand(obj);
+    } else if (elseCommand) {
+      elseCommand();
+    }
+  }
+  static ifString(obj, command) {
+    if (this.isString(obj)) {
+      command(obj);
+    }
+  }
+  static ifNumber(obj, command) {
+    if (this.isNumber(obj)) {
+      command(obj);
+    }
+  }
+  static ifBoolean(obj, command) {
+    if (this.isBoolean(obj)) {
+      command(obj);
+    }
+  }
+  static ifArray(obj, command) {
+    if (this.isArray(obj)) {
+      command(obj);
+    }
+  }
+  static ifFunction(obj, command) {
+    if (this.isFunction(obj)) {
+      command(obj);
+    }
+  }
+  static ifNotNull(obj, command) {
+    if (this.isNotNull(obj)) {
+      command(obj);
+    }
+  }
+
+  static floatValue(obj) {
+    return this.float(obj) || 0;
+  }
+  static float(obj) {
+    const val = parseFloat(obj);
+    return isNaN(val) ? null : val;
+  }
+}

package/utils/uploader.js

@@ -0,0 +1,121 @@
+import { DirectUpload } from "@rails/activestorage";
+import Type from "../utils/type";
+
+const MB_SIZE = 1000;
+
+export default class Uploader {
+  // constructor(input, file, url) {
+  //   this.input = input
+  //   this.file = file
+  //   this.url = url
+  //   this.upload = new DirectUpload(this.file, this.url, this)
+  // }
+
+  constructor(file, url, progress) {
+    this.file = file;
+    this.url = url;
+    this.progress = progress;
+    this.upload = new DirectUpload(this.file, this.url, this);
+  }
+
+  start(callback) {
+    this.progress.value = 0;
+    // this.dispatch("start")
+    this.upload.create((error, blob) => callback(error, blob));
+  }
+
+  // dispatchEvent(element, type, eventInit = {}) {
+  //   const { disabled } = element
+  //   const { bubbles, cancelable, detail } = eventInit
+  //   const event = document.createEvent("Event")
+
+  //   event.initEvent(type, bubbles || true, cancelable || true)
+  //   event.detail = detail || {}
+
+  //   try {
+  //     element.disabled = false
+  //     element.dispatchEvent(event)
+  //   } finally {
+  //     element.disabled = disabled
+  //   }
+
+  //   return event
+  // }
+
+  // dispatch(name, detail = {}) {
+  //   detail.file = this.file
+  //   return this.dispatchEvent(this.input, `direct-upload:${name}`, { detail })
+  // }
+
+  // Called by DirectUpload
+  directUploadWillStoreFileWithXHR(request) {
+    request.upload.addEventListener("progress", event =>
+      this.directUploadDidProgress(event)
+    );
+  }
+
+  directUploadDidProgress(event) {
+    // const progress = event.loaded / event.total * 100
+    // if (progress)
+    //   this.dispatch("progress", { progress })
+    this.progress.value = (event.loaded / event.total) * 100;
+  }
+
+  validateFile(spec) {
+    return this.validateFileAccordingToRules(spec.accepts);
+
+    // if (Type.isString(spec.accepts)) {
+    //   if (spec.accepts) {
+    //     const acceptsRegex = new RegExp(spec.accepts);
+
+    //     if (!acceptsRegex.test(this.file.type)) {
+    //       alert("Invalid file type.");
+    //       return false;
+    //     }
+    //   }
+
+    //   if (spec.file_size_limit) {
+    //     if (this.file.size > spec.file_size_limit * MB_SIZE) {
+    //       alert(spec.file_size_limit_alert_text);
+    //       return false;
+    //     }
+    //   }
+    // } else {
+    //   return this.validateFileAccordingToRules(spec.accepts);
+    // }
+
+    // return true;
+  }
+
+  validateFileAccordingToRules(spec) {
+    if (Type.isObject(spec)) {
+      let mimeType;
+      switch (spec.fileType) {
+        case "image/*": // Legacy
+        case "image":
+          mimeType = "image/*";
+          break;
+        case "pdf":
+          mimeType = "application/pdf";
+          break;
+        default:
+          return;
+      }
+
+      const acceptsRegex = new RegExp(mimeType);
+      if (!acceptsRegex.test(this.file.type)) {
+        alert(spec.fileTypeErrorText || "Invalid file type");
+        return false;
+      }
+
+      if (spec.maxFileSize) {
+        if (this.file.size > spec.maxFileSize * MB_SIZE) {
+          alert(spec.maxFileSizeErrorText || "File too big");
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+}