glib-web 0.5.77

package/components/mixins/table/import.js

@@ -0,0 +1,106 @@
+export default {
+  data: function() {
+    return {
+      importable: false,
+      importSubmitUrl: null,
+      importParamName: "row"
+    };
+  },
+  methods: {
+    initCsvImport() {
+      const vm = this;
+      Utils.type.ifObject(this.spec.import, obj => {
+        vm.importable = true;
+        vm.importSubmitUrl = obj.submitUrl;
+        vm.importParamName = obj.paramName;
+      });
+    },
+    submitRows(event, section) {
+      const vm = this;
+      const keys = section.header.dataCells;
+      const rows = [];
+      section.dataRows.forEach(row => {
+        const cells = {};
+        row.forEach((cell, index) => {
+          const key = `${vm.importParamName}[${keys[index]}]`;
+          cells[key] = cell;
+        });
+        rows.push(cells);
+      });
+
+      if (Utils.type.isString(this.importSubmitUrl)) {
+        vm._submitEachRow(rows, event.target);
+      }
+    },
+    _submitEachRow(rows, target) {
+      const vm = this;
+      const row = rows.shift();
+      if (row) {
+        const data = {
+          url: this.importSubmitUrl,
+          formData: row
+        };
+        Utils.http.execute(data, "POST", vm, response => {
+          GLib.action.handleResponse(response, vm);
+          // Action.execute(response["onResponse"], target, vm);
+          vm._submitEachRow(rows, target);
+        });
+      }
+    },
+    loadFile(event, section) {
+      const reader = new FileReader();
+      reader.readAsText(event.target.files[0]);
+      reader.onload = e => {
+        const rows = this._parseCsv(e.target.result);
+        section.header.dataCells = rows.shift().map(cell => {
+          return cell.trim();
+        });
+        section.dataRows = rows;
+      };
+
+      // Reset value so it will trigger again the next time the same file is selected.
+      event.target.value = null;
+    },
+    _parseCsv: function(csvString) {
+      // https://stackoverflow.com/a/41563966/9970813
+      let prevLetter = "",
+        row = [""],
+        result = [row],
+        columnIndex = 0,
+        rowIndex = 0,
+        canSplit = true,
+        letter;
+      for (let i = 0; i <= csvString.length; ++i) {
+        letter = csvString[i];
+
+        if ('"' === letter) {
+          if (canSplit && letter === prevLetter) {
+            row[columnIndex] += letter;
+          }
+          canSplit = !canSplit;
+        } else if ("," === letter && canSplit) {
+          letter = row[++columnIndex] = "";
+        } else if ("\n" === letter && canSplit) {
+          if ("\r" === prevLetter) {
+            row[columnIndex] = row[columnIndex].slice(0, -1);
+          }
+          row = result[++rowIndex] = [(letter = "")];
+          columnIndex = 0;
+        } else if (Utils.type.isString(letter)) {
+          row[columnIndex] += letter;
+        }
+        prevLetter = letter;
+      }
+
+      // Remove any blank rows
+      result = result.filter(r => {
+        return r[0] !== "";
+      });
+      // result = result.filter(r => {
+      //   return r[0] !== "undefined"
+      // });
+
+      return result;
+    }
+  }
+};

package/components/mixins/text.js

@@ -0,0 +1,20 @@
+export default {
+  methods: {
+    textStyles(spec) {
+      const styles = this.$styles(spec);
+
+      switch (this.spec.textAlign) {
+        case "center":
+          styles["text-align"] = "center";
+          break;
+        case "right":
+          styles["text-align"] = "right";
+          break;
+        default:
+          styles["text-align"] = "left";
+      }
+
+      return styles;
+    }
+  }
+};

package/components/mixins/ws/actionCable.js

@@ -0,0 +1,48 @@
+import { createConsumer } from "@rails/actioncable";
+
+const consumer = createConsumer();
+
+export default {
+  data: function() {
+    return {
+      _wsSocket: null
+    };
+  },
+  methods: {
+    $wsInitActionCable(spec) {
+      const component = this;
+      Utils.type.ifObject(
+        spec,
+        ws => {
+          const channelName = ws.channel;
+          const subscription = Object.assign({}, ws.params, {
+            channel: channelName
+          });
+
+          console.log("Connecting to channel", subscription);
+
+          consumer.subscriptions.create(subscription, {
+            connected() {
+              const ws = window.vueApp.actionCable;
+              ws.channels[channelName] = this;
+              console.log("Connected to channel", channelName);
+            },
+
+            disconnected() {},
+
+            received(data) {
+              const action = data.action;
+              const payload = { ...action, filterKey: ws.filterKey };
+              if (ws.filterKey === data.filterKey) {
+                GLib.action.execute(payload, null, component);
+              }
+            }
+          });
+        },
+        () => {
+          // this._wsDisconnectSocket();
+        }
+      );
+    }
+  }
+};

package/components/mixins/ws/phoenixSocket.js

@@ -0,0 +1,117 @@
+import { Socket } from "phoenix";
+import Hash from "../../../utils/hash";
+
+export default {
+  data: function() {
+    return {
+      _wsSocket: null
+    };
+  },
+  methods: {
+    $wsInitPhoenixSocket(spec) {
+      Utils.type.ifObject(
+        spec,
+        ws => {
+          console.log("Connecting socket...");
+          Utils.launch.snackbar.indicator("Connecting...");
+          Utils.http.startIndicator(this);
+
+          // Without this, at times the indicator doesn't disappear because there isn't enough delay
+          // between startIndicator() and stopIndicator()
+          setTimeout(() => {
+            this._wsConnectSocket(ws);
+          }, 100);
+        },
+        () => {
+          this._wsDisconnectSocket();
+        }
+      );
+    },
+    // https://medium.com/@imiked/real-time-feature-with-phoenix-and-vue-js-c7677663a6f5
+    _wsConnectSocket(spec) {
+      const host = Utils.settings.isDev
+        ? "ws://localhost:4019"
+        : "wss://prod.com";
+
+      // const host = Utils.settings.isDev
+      //   ? "ws://192.168.1.109:4019"
+      //   : "wss://prod.com";
+
+      // const url = Utils.url.appendParams(
+      //   `${host}${conf.endpoint}?`,
+      //   conf.params
+      // );
+
+      const conf = spec.socket;
+      // See https://github.com/phoenixframework/phoenix/blob/master/assets/js/phoenix.js
+      const endpoint = `${host}${conf.endpoint}`.replace(/\/websocket$/, "");
+      const params = new Hash(conf.params);
+      const version = params.remove("vsn");
+      const socket = new Socket(endpoint, {
+        params: params,
+        vsn: version
+      });
+
+      this._wsSocket = socket;
+      socket.onOpen(() => {
+        console.log("Connected socket");
+        this._wsJoinChannel(socket, spec);
+        Utils.http.stopIndicator(this);
+      });
+      socket.onError(() => {
+        // Start the indicator again because this can trigger even after successfully connected.
+        Utils.http.startIndicator(this);
+        console.log("Unable to connect socket");
+      });
+      socket.connect();
+    },
+    _wsJoinChannel(socket, spec) {
+      const ws = window.vueApp.webSocket;
+      Utils.type.ifObject(spec.header, header => {
+        ws.header = header;
+      });
+
+      const topicName = spec.topic;
+      const events = spec.events;
+      if (!Utils.type.isString(topicName) || !Utils.type.isArray(events)) {
+        return;
+      }
+
+      const channel = socket.channel(topicName, {});
+
+      for (const eventName of events) {
+        console.log(`Registering event '${eventName}'`);
+        channel.on(eventName, payload => {
+          console.debug(`Received '${eventName}' event`, payload);
+          Utils.ws.handleResponse(payload.onResponse, this);
+        });
+      }
+
+      channel
+        .join()
+        .receive("ok", resp => {
+          console.log(`Channel joined '${topicName}'`, resp);
+          ws.channels[topicName] = channel;
+        })
+        .receive("error", resp => {
+          console.log(`Unable to join channel '${topicName}'`, resp);
+          Utils.launch.snackbar.error("Unable to connect. Please try again.");
+        });
+    },
+    _wsDisconnectSocket() {
+      if (this._wsSocket) {
+        console.log("Disconnecting socket");
+        // Sometimes this doesn't prevent errorneous socket from trying to reconnect. In this case,
+        // the socket will keep attempting to connect.
+        this._wsSocket.disconnect();
+        this._wsSocket = null;
+
+        const ws = window.vueApp.webSocket;
+        ws.channels = {};
+        ws.header = {};
+
+        Utils.http.stopIndicator(this);
+      }
+    }
+  }
+};

package/components/p.vue

@@ -0,0 +1,36 @@
+<template>
+  <!-- <p :style="genericStyles()" :class="$classes()" v-html="compiledText" /> -->
+  <p :style="genericStyles()" :class="$classes()">{{ spec.text }}</p>
+</template>
+
+<script>
+// import marked from "marked";
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  }
+  // computed: {
+  //   compiledText() {
+  //     if (this.spec.format == "markdown") {
+  //       return marked(this.spec.text, { sanitize: true });
+  //     } else {
+  //       return this.spec.text;
+  //     }
+  //   }
+  // }
+};
+</script>
+
+<style scoped>
+p {
+  white-space: pre-line;
+
+  /* Without this, padding-top doesn't work */
+  display: inline-block;
+  margin-bottom: 0;
+}
+p.muted {
+  opacity: 0.7;
+}
+</style>

package/components/panels/carousel.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-card flat tile :style="$styles()">
+    <v-window v-model="selectedIndex">
+      <v-window-item v-for="(item, index) in spec.childViews" :key="index">
+        <ui-component :spec="item" />
+      </v-window-item>
+    </v-window>
+
+    <v-card-actions class="justify-space-between">
+      <v-btn text @click="prev">
+        <v-icon>chevron_left</v-icon>
+      </v-btn>
+      <v-item-group v-model="selectedIndex" class="text-center" mandatory>
+        <v-item v-for="(item, index) in spec.childViews" :key="index">
+          <v-btn
+            slot-scope="{ active, toggle }"
+            :input-value="active"
+            icon
+            @click="toggle"
+          >
+            <v-icon size="8">lens</v-icon>
+          </v-btn>
+        </v-item>
+      </v-item-group>
+      <v-btn text @click="next">
+        <v-icon>chevron_right</v-icon>
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: () => ({
+    selectedIndex: 0
+  }),
+  methods: {
+    next() {
+      const length = this.spec.childViews.length;
+      this.selectedIndex =
+        this.selectedIndex + 1 === length ? 0 : this.selectedIndex + 1;
+    },
+    prev() {
+      const length = this.spec.childViews.length;
+      this.selectedIndex =
+        this.selectedIndex - 1 < 0 ? length - 1 : this.selectedIndex - 1;
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/panels/column.vue

@@ -0,0 +1,117 @@
+<template>
+  <v-col
+    :xl="xl.cols"
+    :lg="lg.cols"
+    :md="md.cols"
+    :sm="sm.cols"
+    :style="cssStyles()"
+    cols="12"
+  >
+    <panels-responsive :spec="spec" />
+  </v-col>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      xl: {},
+      lg: {},
+      md: {},
+      sm: {},
+      xs: {}
+    };
+  },
+  methods: {
+    $ready() {
+      this.xl = this.spec.xl || this.xl;
+      this.lg = this.spec.lg || this.lg;
+      this.md = this.spec.md || this.md;
+      this.sm = this.spec.sm || this.sm;
+      this.xs = this.spec.xs || this.xs;
+    },
+    cssStyles() {
+      const styles = this.$styles();
+      switch (this.$vuetify.breakpoint.name) {
+        case "xl":
+          this.applyStyles(styles, this.xs);
+          this.applyStyles(styles, this.sm);
+          this.applyStyles(styles, this.md);
+          this.applyStyles(styles, this.lg);
+          this.applyStyles(styles, this.xl);
+          this.applyStyles(styles, this.spec.xlAndDown || {});
+          this.applyStyles(styles, this.spec.xlOnly || {});
+          break;
+        case "lg":
+          this.applyStyles(styles, this.xs);
+          this.applyStyles(styles, this.sm);
+          this.applyStyles(styles, this.md);
+          this.applyStyles(styles, this.lg);
+          this.applyStyles(styles, this.spec.xlAndDown || {});
+          this.applyStyles(styles, this.spec.lgAndDown || {});
+          this.applyStyles(styles, this.spec.lgOnly || {});
+          break;
+        case "md":
+          this.applyStyles(styles, this.xs);
+          this.applyStyles(styles, this.sm);
+          this.applyStyles(styles, this.md);
+          this.applyStyles(styles, this.spec.xlAndDown || {});
+          this.applyStyles(styles, this.spec.lgAndDown || {});
+          this.applyStyles(styles, this.spec.mdAndDown || {});
+          this.applyStyles(styles, this.spec.mdOnly || {});
+          break;
+        case "sm":
+          this.applyStyles(styles, this.xs);
+          this.applyStyles(styles, this.sm);
+          this.applyStyles(styles, this.spec.xlAndDown || {});
+          this.applyStyles(styles, this.spec.lgAndDown || {});
+          this.applyStyles(styles, this.spec.mdAndDown || {});
+          this.applyStyles(styles, this.spec.smAndDown || {});
+          this.applyStyles(styles, this.spec.smOnly || {});
+          break;
+        case "xs":
+          this.applyStyles(styles, this.xs);
+          this.applyStyles(styles, this.spec.xlAndDown || {});
+          this.applyStyles(styles, this.spec.lgAndDown || {});
+          this.applyStyles(styles, this.spec.mdAndDown || {});
+          this.applyStyles(styles, this.spec.smAndDown || {});
+          this.applyStyles(styles, this.spec.xsAndDown || {});
+          this.applyStyles(styles, this.spec.xsOnly || {});
+          break;
+
+        // const padding = this.lg.padding;
+        // Utils.type.ifObject(this.lg.padding, padding => {
+        //   Utils.type.ifNumber(
+        //     padding.top,
+        //     top => (styles["padding-top"] = `${top}px`)
+        //   );
+        //   Utils.type.ifNumber(
+        //     padding.bottom,
+        //     bottom => (styles["padding-bottom"] = `${bottom}px`)
+        //   );
+        //   Utils.type.ifNumber(
+        //     padding.left,
+        //     left => (styles["padding-left"] = `${left}px`)
+        //   );
+        //   Utils.type.ifNumber(
+        //     padding.right,
+        //     right => (styles["padding-right"] = `${right}px`)
+        //   );
+        // });
+      }
+      return styles;
+    },
+    applyStyles(styles, spec) {
+      Object.assign(styles, this.$styles(spec));
+      Utils.type.ifBoolean(spec.hide, () => {
+        styles["display"] = "none";
+      });
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/panels/custom.vue

@@ -0,0 +1,52 @@
+<template>
+  <div :style="genericStyles()">
+    <component
+      :is="template"
+      v-if="customData"
+      :name="spec.template"
+      :spec="customData"
+    />
+  </div>
+</template>
+
+<script>
+import UnsupportedTemplate from "../../templates/unsupported";
+import ThumbnailTemplate from "../../templates/thumbnail";
+import FeaturedTemplate from "../../templates/featured";
+
+export default {
+  components: {
+    "template-thumbnail": ThumbnailTemplate,
+    "template-featured": FeaturedTemplate,
+    "template-unsupported": UnsupportedTemplate
+  },
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      customData: null
+    };
+  },
+  computed: {
+    template() {
+      const name = `template-${this.spec.template.replace("/", "-")}`;
+      const strict = false;
+      if (strict) {
+        return name;
+      } else {
+        if (this.$options.components[name]) {
+          return name;
+        }
+        return "template-unsupported";
+      }
+    }
+  },
+  methods: {
+    $ready() {
+      const onClick = this.spec.onClick ? { onClick: this.spec.onClick } : {};
+      this.customData = Object.assign(onClick, this.spec.data);
+    }
+  }
+};
+</script>

package/components/panels/flow.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="cssClasses" :style="cssStyles">
+    <template v-for="(item, index) in spec.childViews">
+      <!--
+        The wrapper prevents its content (e.g. image component) from getting stretched to fill
+        remaining space on the new line.
+      -->
+      <div :key="index" :style="innerStyles">
+        <ui-component :spec="item" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  computed: {
+    cssClasses: function() {
+      const classes = this.$classes().concat("layouts-flow");
+      // switch(this.spec.distribution) {
+      //   case 'fillEqually':
+      //     classes.push('layouts-horizontal--fill-equally')
+      //     break
+      //   case 'spaceEqually':
+      //     classes.push('layouts-horizontal--space-equally')
+      //     break
+      // }
+      return classes;
+    },
+    cssStyles: function() {
+      const styles = this.$styles();
+      // switch(this.spec.align) {
+      //   case 'middle':
+      //     styles['align-items'] = 'center'
+      //     break
+      //   case 'bottom':
+      //     styles['align-items'] = 'flex-end'
+      //     break
+      //   default:
+      //     styles['align-items'] = 'flex-start'
+      // }
+      return styles;
+    },
+    innerStyles() {
+      const styles = {};
+      Utils.type.ifObject(this.spec.innerPadding, padding => {
+        Utils.type.ifNumber(
+          padding.top,
+          top => (styles["padding-top"] = `${top}px`)
+        );
+        Utils.type.ifNumber(
+          padding.bottom,
+          bottom => (styles["padding-bottom"] = `${bottom}px`)
+        );
+        Utils.type.ifNumber(
+          padding.left,
+          left => (styles["padding-left"] = `${left}px`)
+        );
+        Utils.type.ifNumber(
+          padding.right,
+          right => (styles["padding-right"] = `${right}px`)
+        );
+      });
+      return styles;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.layouts-flow {
+  display: flex;
+  flex-wrap: wrap;
+}
+/* .layouts-horizontal > div {
+  display: inline-block;
+} */
+</style>