glib-web 2.4.1 → 2.5.1

package/action.js

@@ -50,6 +50,7 @@ import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
 import ActionCommandsCopy from "./actions/commands/copy";
 import ActionCommandsCustom from "./actions/commands/custom";
+import ActionCommandsEnqueue from "./actions/commands/enqueue";
 
 import ActionToursStart from "./actions/tours/start";
 
@@ -106,6 +107,7 @@ const actions = {
 
   "commands/copy": ActionCommandsCopy,
   "commands/custom": ActionCommandsCustom,
+  "commands/enqueue": ActionCommandsEnqueue,
 
   "tours/start": ActionToursStart,
   "components/update": ActionComponentsUpdate

package/actions/commands/enqueue.js

@@ -0,0 +1,17 @@
+// import Hash from "../../utils/hash";
+
+export default class {
+  // async executeJob(spec, component) {
+  //   console.log("Waiting for next job1...");
+  //   GLib.action.execute(spec.onExecute, component);
+  //   await this.sleep(2000);
+  //   console.log("Waiting for next job2...");
+  // }
+  execute(spec, component) {
+    GLib.queue.enqueue(() => {
+      GLib.action.execute(spec.onExecute, component);
+      // console.log("Waiting for next job0...");
+      // this.executeJob(spec, component);
+    });
+  }
+}

package/actions/components/update.js

@@ -5,25 +5,24 @@ export default class {
     if (!spec.views.length > 1) {
       console.warn("Make sure views only have 1 child!");
     }
-    // const target = component.updatables[spec.targetId];
-    // if (!target) console.error("no component found :" + spec.targetId);
 
     const target = GLib.component.findById(spec.targetId);
     if (target) {
       Object.assign(target.spec, spec.views[0]);
-      this.updateComponent(target);
+      target.$recursiveUpdate();
     }
   }
 
-  updateComponent(component) {
-    component.$ready();
-    component.$forceUpdate();
+  // // TODO: Use $recursiveUpdate(). See mixins/events
+  // updateComponent(component) {
+  //   component.$ready();
+  //   component.$forceUpdate();
 
-    // Execute on next tick to ensure that the child has received the updated spec.
-    Vue.nextTick(() => {
-      component.$children.find(child => {
-        this.updateComponent(child);
-      });
-    });
-  }
+  //   // Execute on next tick to ensure that the child has received the updated spec.
+  //   Vue.nextTick(() => {
+  //     component.$children.find(child => {
+  //       this.updateComponent(child);
+  //     });
+  //   });
+  // }
 }

package/app.vue

@@ -194,6 +194,9 @@ body,
 .glib-scrollto--highlighted {
   background: yellow !important;
 }
+.glib-clickable {
+  cursor: pointer;
+}
 /******/
 </style>
 

package/components/component.vue

@@ -90,6 +90,7 @@ import CreditCardField from "./fields/creditCard";
 import RatingField from "./fields/rating";
 import PhoneField from "./fields/phone/field";
 import TimerField from "./fields/timer";
+import OtpField from "./fields/otpField";
 
 import ScrollPanel from "./panels/scroll";
 import VerticalPanel from "./panels/vertical";
@@ -179,6 +180,7 @@ export default {
     "fields-rating": RatingField,
     "fields-phone": PhoneField,
     "fields-timer": TimerField,
+    "fields-otp": OtpField,
 
     "panels-scroll": ScrollPanel,
     "panels-vertical": VerticalPanel,

package/components/fields/file.vue

@@ -2,19 +2,15 @@
   <div ref="fileUploadContainer" class="mb-3" :style="$styles()">
     <label class="v-label v-label--active">{{ spec.label }}</label>
     <div class="preview-container">
-      <v-avatar
-        v-if="placeholder.type == 'avatar'"
-        :style="genericStyles(placeholder)"
-        class="mr-4"
-      >
+      <v-avatar v-if="placeholder.type == 'avatar'" :style="genericStyles(placeholder)" class="mr-4">
         <img :src="fileImage || placeholder.url" />
       </v-avatar>
-      <img
-        v-else-if="placeholder.type == 'image'"
-        class="square-image mr-4"
-        :style="genericStyles(placeholder)"
-        :src="fileImage || placeholder.url"
-      />
+      <img v-else-if="placeholder.type == 'image'" class="square-image mr-4" :style="genericStyles(placeholder)"
+        :src="fileImage || placeholder.url" />
+
+      <v-text-field v-else-if="placeholder.type == 'input'" :value="fileTitle" outlined prominent
+        placholder="Upload your file" disabled />
+
       <span v-else class="mr-4">{{ fileTitle }}</span>
 
       <span v-if="spec.uploadText">
@@ -37,12 +33,7 @@
         </v-btn>
       </span>
     </div>
-    <input
-      ref="directUploadFile"
-      style="display: none;"
-      type="file"
-      @change="uploadFiles"
-    />
+    <input ref="directUploadFile" style="display: none;" type="file" @change="uploadFiles" />
 
     <!-- <input type="file" :name="spec.name" ref='directUploadFile' @change='uploadFiles' v-show='!uploaded'/> -->
     <v-progress-linear v-if="showProgress" v-model="progress.value" />
@@ -82,7 +73,7 @@ export default {
     };
   },
   computed: {
-    showProgress: function() {
+    showProgress: function () {
       return this.progress.value >= 0;
     }
   },
@@ -165,6 +156,9 @@ export default {
 
 <style lang="scss" scoped>
 .preview-container {
+  display: flex;
+  align-items: center;
+
   .action-container {
     padding-left: 10px;
   }

package/components/fields/otpField.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <input
+      v-for="(digit, index) in digits"
+      ref="input"
+      :key="index"
+      v-model="otp[index]"
+      maxlength="1"
+      class="otp-input"
+      @input="handleInput($event, index)"
+      @keydown="handleKeydown($event, index)"
+      @paste="handlePaste($event, index)"
+      @focus="handleFocus($event, index)"
+      @blur="handleBlur($event, index)"
+    />
+    <input type="hidden" :name="spec.name" :value="otpValue" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      digits: 0,
+      otp: []
+    };
+  },
+
+  computed: {
+    otpValue() {
+      // concatenate the digits into a single string
+      return this.otp.join("");
+    }
+  },
+  methods: {
+    $ready() {
+      this.digits = this.spec.lengths;
+      this.otp = Array(this.spec.lengths).fill("");
+    },
+    handleInput(event, index) {
+      if (event.target.value.length === 1) {
+        this.focusNext(index);
+      }
+    },
+    handleKeydown(event, index) {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        this.focusPrevious(index);
+        this.$set(this.otp, index, "");
+      }
+    },
+    handlePaste(event, index) {
+      event.preventDefault();
+      const pasted = event.clipboardData
+        .getData("text")
+        .slice(0, this.digits - index);
+      for (let i = 0; i < pasted.length; i++) {
+        this.$set(this.otp, index + i, pasted[i]);
+      }
+      this.focusNext(index + pasted.length - 1);
+    },
+    handleFocus(event, index) {
+      if (index > 0 && this.otp[index - 1] === "") {
+        this.focusPrevious(index);
+      }
+    },
+    handleBlur(event, index) {
+      if (this.otp.filter(digit => digit === "").length === 0) {
+        this.$emit("complete", this.otp.join(""));
+      }
+    },
+    focusNext(index) {
+      if (index < this.digits - 1) {
+        this.$refs.input[index + 1].focus();
+      }
+    },
+    focusPrevious(index) {
+      if (index > 0) {
+        this.$refs.input[index - 1].focus();
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.otp-input {
+  border: 1px solid #47495f;
+  text-align: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  font-size: 24px;
+  margin: 8px;
+}
+</style>

package/components/fields/text.vue

@@ -12,7 +12,7 @@
       :type="variant.type"
       :rules="rules"
       :prepend-inner-icon="leftIconName"
-      :append-icon="variant.appendIcon"
+      :append-icon="rightIconName || variant.appendIcon"
       :prefix="spec.leftText"
       :suffix="spec.rightText"
       :min="spec.min"
@@ -22,7 +22,7 @@
       :dense="$classes().includes('dense')"
       :autofocus="spec.autoFocus || false"
       validate-on-blur
-      @click:append="onRightIconClick"
+      v-on="onRightIconClick ? { 'click:append': onRightIconClick } : null"
       @input="onChange"
     />
     <input
@@ -46,6 +46,7 @@ export default {
     return {
       variant: {},
       rules: [],
+      onRightIconClick: null,
       fields: {
         email: {
           type: "email",
@@ -104,12 +105,23 @@ export default {
       const icon = this.spec.leftIcon || {};
       const materialIcon = icon.material || {};
       return materialIcon.name;
+    },
+    rightIconName() {
+      const icon = this.spec.rightIcon || {};
+      const materialIcon = icon.material || {};
+      return materialIcon.name;
     }
   },
   methods: {
     $ready() {
       this.variant = this.fields[this.type] || {};
       this.rules = this.$validation(this.variant.rules);
+
+      if (this.variant.onRightIconClick) {
+        this.onRightIconClick = () => {
+          this.variant.onRightIconClick(this);
+        };
+      }
     },
     togglePasswordVisibility() {
       const passwordField = this.fields["password"];
@@ -121,9 +133,6 @@ export default {
         passwordField.appendIcon = "visibility";
       }
     },
-    onRightIconClick() {
-      this.variant.onRightIconClick(this);
-    },
     classes() {
       return this.$classes().concat("g-text-field--hintless");
     },

package/components/map.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- <div ref="map" :style="genericStyles()"></div> -->
   <gmap-map
     ref="map"
     :center="center"
@@ -43,19 +42,48 @@
       </gmap-marker>
     </gmap-cluster>
     <template v-else>
-      <gmap-custom-marker
-        v-for="(marker, index) in markers"
-        :key="index"
-        :marker="{ lat: marker.latitude, lng: marker.longitude }"
-        @click.native="onMarkerClick(marker, index)"
-      >
-        <img v-if="marker.imageUrl" :src="marker.imageUrl" class="marker" />
-        <common-icon
-          v-else
-          class="marker"
-          :spec="{ material: { name: 'place', size: 40 }, color: '#c92b2a' }"
-        />
-      </gmap-custom-marker>
+      <template v-if="spec.direction">
+        <gmap-custom-marker
+          v-for="(marker, index) in markers"
+          :key="index"
+          :marker="{ lat: marker.latitude, lng: marker.longitude }"
+          @click.native="onMarkerClick(marker, index)"
+        >
+          <div class="marker-wrapper">
+            <img v-if="marker.imageUrl" :src="marker.imageUrl" class="marker" />
+            <common-icon
+              v-else
+              class="marker"
+              :spec="{
+                material: { name: 'circle', size: 40 },
+                color: marker.markerColor
+              }"
+            />
+            <p class="marker-number">{{ marker.markerNumber }}</p>
+          </div>
+        </gmap-custom-marker>
+      </template>
+      <template v-else>
+        <gmap-custom-marker
+          v-for="(marker, index) in markers"
+          :key="index"
+          :marker="{ lat: marker.latitude, lng: marker.longitude }"
+          @click.native="onMarkerClick(marker, index)"
+        >
+          <div class="marker-wrapper">
+            <img v-if="marker.imageUrl" :src="marker.imageUrl" class="marker" />
+            <common-icon
+              v-else
+              class="marker"
+              :spec="{
+                material: { name: 'place', size: 40 },
+                color: '#c92b2a'
+              }"
+            />
+            <p class="marker-number">{{ marker.markerNumber }}</p>
+          </div>
+        </gmap-custom-marker>
+      </template>
     </template>
   </gmap-map>
 </template>
@@ -85,9 +113,35 @@ export default {
       selectedMarker: null,
       center: { lat: 0, lng: 0 },
       zoom: 11,
-      markers: []
+      markers: [],
+      locations: this.spec.locations
     };
   },
+  // mounted: function() {
+  //   // switch (this.spec.provider) {
+  //   // case 'baidu':
+  //   //   this.renderBaiduMap()
+  //   //   break
+  //   // default:
+  //   //   this.renderGoogleMap()
+  //   // }
+  //   const { latitude, longitude, zoom } = this.spec
+  //   this.updateMapCenter(latitude, longitude)
+  //   this.zoom = zoom
+
+  //   this.fetchMarkers()
+  // }
+  mounted: function() {
+    // use $nextTick instead setTimeout
+    // https://stackoverflow.com/questions/57847474/react-and-vue-google-map-api-remove-rendered-direction-before-setting-a-new-one
+    this.$nextTick(function() {
+      this.$gmapApiPromiseLazy().then(() => {
+        if (this.spec.direction === true) {
+          this.drawLineBetweenPoint();
+        }
+      });
+    });
+  },
   methods: {
     // See https://stackoverflow.com/questions/37597324/markercluster-one-marker-for-a-group for calculator example
     _calculator(markers, numStyles) {
@@ -195,26 +249,58 @@ export default {
       const { center } = this.$refs.map.$mapObject;
       this.updateMapCenter(center.lat(), center.lng());
       this.fetchMarkers();
+    },
+    drawLineBetweenPoint() {
+      let directionService = new window.google.maps.DirectionsService();
+      let directionDisplay = new window.google.maps.DirectionsRenderer();
+
+      for (let l = 0; l < this.locations.length; l++) {
+        for (let i = 0; i < this.locations[l].length; i++) {
+          let travel = {
+            origin: this.locations[l][i],
+            destination: this.locations[l][i + 1],
+            travelMode: "DRIVING"
+          };
+
+          directionService.route(travel, (response, status) => {
+            if (status === "OK") {
+              let map = this.$refs.map;
+              directionDisplay = new window.google.maps.DirectionsRenderer({
+                suppressMarkers: true,
+                polylineOptions: {
+                  strokeColor: "#2ab3a6",
+                  stropeOpacity: 0.8,
+                  strokeWeight: 5
+                }
+              });
+              directionDisplay.setMap(map.$mapObject);
+              directionDisplay.setDirections(response);
+            }
+          });
+        }
+      }
     }
   }
-  // mounted: function() {
-  //   // switch (this.spec.provider) {
-  //   // case 'baidu':
-  //   //   this.renderBaiduMap()
-  //   //   break
-  //   // default:
-  //   //   this.renderGoogleMap()
-  //   // }
-  //   const { latitude, longitude, zoom } = this.spec
-  //   this.updateMapCenter(latitude, longitude)
-  //   this.zoom = zoom
-
-  //   this.fetchMarkers()
-  // }
 };
 </script>
 
 <style lang="scss" scoped>
+.marker-wrapper {
+  position: relative;
+  width: 40px;
+  height: 40px;
+}
+
+.marker-number {
+  font-weight: 800;
+  font-size: 16px;
+  position: absolute;
+  top: 6px;
+  width: 40px;
+  text-align: center;
+  color: white;
+}
+
 .marker {
   width: 40px;
   height: 40px;

package/components/mixins/events.js

@@ -152,6 +152,17 @@ export default {
     $updated() {
       // To be overridden
     },
+    $recursiveUpdate() {
+      this.$ready();
+      this.$forceUpdate();
+
+      // Execute on next tick to ensure that the child has received the updated spec.
+      this.$nextTick(() => {
+        this.$children.find(child => {
+          child.$recursiveUpdate();
+        });
+      });
+    },
     $dispatchEvent(name, data) {
       const event = new Event(name, { bubbles: true });
 

package/components/mixins/styles.js

@@ -125,10 +125,10 @@ export default {
         val => (styles["height"] = val)
       );
 
-      Utils.type.ifObject(
-        properties.onClick,
-        () => (styles["cursor"] = "pointer")
-      );
+      // Utils.type.ifObject(
+      //   properties.onClick,
+      //   () => (styles["cursor"] = "pointer")
+      // );
 
       // This is the main reason styles have to be used in a dynamic way.
       this._updateDisplay(styles, properties);
@@ -213,6 +213,10 @@ export default {
       const componentName = Utils.app.componentName(properties.view);
       const classes = (properties.styleClasses || []).concat(componentName);
 
+      Utils.type.ifObject(properties.onClick, () =>
+        classes.push("glib-clickable")
+      );
+
       Utils.type.ifArray(properties.styleClasses, val => {
         if (val.includes("card")) {
           classes.push("v-card");

package/components/panels/custom.vue

@@ -57,6 +57,9 @@ export default {
     $ready() {
       const onClick = this.spec.onClick ? { onClick: this.spec.onClick } : {};
       this.customData = Object.assign(onClick, this.spec.data);
+    },
+    $registryEnabled() {
+      return false;
     }
   }
 };