@mixd-id/web-scaffold 0.2.240702 → 0.2.240703

package/src/components/GHeatMaps.vue

@@ -0,0 +1,317 @@
+<template>
+	<div v-if="readyState === 1" :class="$style.comp">
+    <div class="flex flex-row items-center gap-2 p-1 px-3 p-2">
+      <div class="flex-1">
+        <label class="text-text-400">{{ label }}</label>
+      </div>
+      <label class="text-sm text-text-300">Total points: {{ uniqueCount }}</label>
+    </div>
+
+		<div v-if="apiKey" ref="map" class="flex-1">
+
+    </div>
+		<div v-else class="flex-1 flex items-center justify-center text-text-400">{{ $t('Google maps api required') }}</div>
+
+    <div class="flex flex-row">
+
+      <div class="flex-1 flex items-center justify-center divide-x divide-text-50 border-l-[1px] border-r-[1px] border-text-50">
+        <button type="button" class="p-1 px-3 hover:bg-primary text-text-400" @click="zoomOut">
+          <svg width="16" height="16" class="fill-text-500 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"/></svg>
+        </button>
+        <button type="button" class="p-1 px-3 hover:bg-primary text-text-400 hover:text-text" @click="panLeft">
+          <svg width="16" height="16" class="fill-text-500 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z"/></svg>
+        </button>
+        <button type="button" class="p-1 px-3 hover:bg-primary text-text-400 hover:text-text" @click="panUp">
+          <svg width="16" height="16" class="fill-text-500 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"/></svg>
+        </button>
+        <button type="button" class="p-1 px-3 hover:bg-primary text-text-400 hover:text-text" @click="panRight">
+          <svg width="16" height="16" class="fill-text-500 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"/></svg>
+        </button>
+        <button type="button" class="p-1 px-3 hover:bg-primary text-text-400 hover:text-text" @click="panDown">
+          <svg width="16" height="16" class="fill-text-500 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+        </button>
+        <button type="button" class="p-1 px-3 hover:bg-primary text-text-400 hover:text-text" @click="zoomIn">
+          <svg width="16" height="16" class="fill-text-500 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+        </button>
+      </div>
+
+    </div>
+	</div>
+  <div v-else :class="$style.comp" class="min-h-[200px] flex items-center justify-center">
+    <label class="text-text-300">Loading...</label>
+  </div>
+</template>
+
+<script>
+
+import {Loader} from '@googlemaps/js-api-loader';
+import {readyStateMixin} from "../mixin/ready-state";
+
+let loader = null
+
+export default{
+
+  name: "GHeatMaps",
+
+	props: {
+    column: String,
+
+    label: String,
+
+    value: Object,
+
+    apiKey: {
+      type: String,
+      default: 'AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ'
+    },
+	},
+
+	data(){
+		return {
+			map: null,
+      zoom: 4,
+      center: null,
+		}
+	},
+
+  mixins: [ readyStateMixin ],
+
+	mounted() {
+		this.load()
+	},
+
+	methods: {
+
+		load(){
+			if(!this.apiKey) return
+			if(!Array.isArray(this.datasets) || this.datasets.length < 1)
+				return
+
+      if(!loader)
+        loader = new Loader({
+          apiKey: this.apiKey // "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
+        })
+
+			loader.load()
+				.then(async () => {
+
+					const { Map } = await google.maps.importLibrary([ "maps" ]);
+					await google.maps.importLibrary("visualization", ["HeatmapLayer"]);
+
+					var center = new google.maps.LatLng(
+						this.center ? this.center[0] : -6.2088,
+						this.center ? this.center[1] : 106.8456);
+
+					this.map = new Map(this.$refs.map, {
+						center: center,
+						zoom: this.zoom ?? 4,
+						mapTypeId: 'roadmap',
+						streetViewControl: false,
+						keyboardShortcuts: false,
+            disableDefaultUI: true,
+						styles: [
+							{ elementType: "geometry", stylers: [{ color: "#242f3e" }] },
+							{ elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
+							{ elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
+							{
+								featureType: "administrative.locality",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "poi",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "poi.park",
+								elementType: "geometry",
+								stylers: [{ color: "#263c3f" }],
+							},
+							{
+								featureType: "poi.park",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#6b9a76" }],
+							},
+							{
+								featureType: "road",
+								elementType: "geometry",
+								stylers: [{ color: "#38414e" }],
+							},
+							{
+								featureType: "road",
+								elementType: "geometry.stroke",
+								stylers: [{ color: "#212a37" }],
+							},
+							{
+								featureType: "road",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#9ca5b3" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "geometry",
+								stylers: [{ color: "#746855" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "geometry.stroke",
+								stylers: [{ color: "#1f2835" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#f3d19c" }],
+							},
+							{
+								featureType: "transit",
+								elementType: "geometry",
+								stylers: [{ color: "#2f3948" }],
+							},
+							{
+								featureType: "transit.station",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "water",
+								elementType: "geometry",
+								stylers: [{ color: "#17263c" }],
+							},
+							{
+								featureType: "water",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#515c6d" }],
+							},
+							{
+								featureType: "water",
+								elementType: "labels.text.stroke",
+								stylers: [{ color: "#17263c" }],
+							},
+						]
+					});
+
+					google.maps.event.addListener(this.map, 'zoom_changed', () => {
+						this.zoom = this.map.getZoom();
+					});
+
+					google.maps.event.addListener(this.map, 'center_changed', () => {
+						this.center = [
+							this.map.getCenter().lat(),
+							this.map.getCenter().lng()
+						]
+					});
+
+					var heatMapData = [];
+
+					this.datasets.forEach((item) => {
+						if(item[0] && item[1] && item[2]){
+							heatMapData.push({
+								location: new google.maps.LatLng(item[0], item[1]),
+								weight: item[2]
+							})
+						}
+					})
+
+					var heatmap = new google.maps.visualization.HeatmapLayer({
+						data: heatMapData,
+						dissipating: true
+					});
+					heatmap.set('radius', parseInt(this.mapRadius ?? 12))
+					heatmap.setMap(this.map);
+
+					const gradient = [
+						"rgba(0, 255, 255, 0)",
+						"rgba(0, 255, 255, 1)",
+						"rgba(0, 191, 255, 1)",
+						"rgba(0, 127, 255, 1)",
+						"rgba(0, 63, 255, 1)",
+						"rgba(0, 0, 255, 1)",
+						"rgba(0, 0, 223, 1)",
+						"rgba(0, 0, 191, 1)",
+						"rgba(0, 0, 159, 1)",
+						"rgba(0, 0, 127, 1)",
+						"rgba(63, 0, 91, 1)",
+						"rgba(127, 0, 63, 1)",
+						"rgba(191, 0, 31, 1)",
+						"rgba(255, 0, 0, 1)",
+					];
+					heatmap.set("gradient", gradient);
+				});
+		},
+
+    zoomIn(){
+      this.map.setZoom(this.map.getZoom() + 1)
+    },
+
+    zoomOut(){
+      this.map.setZoom(this.map.getZoom() - 1)
+    },
+
+    panLeft(){
+      this.map.panBy(-50, 0);
+    },
+
+    panUp(){
+      this.map.panBy(0, -50);
+    },
+
+    panRight(){
+      this.map.panBy(50, 0);
+    },
+
+    panDown(){
+      this.map.panBy(0, 50);
+    },
+
+	},
+
+  computed: {
+
+    uniqueCount(){
+      if(!Array.isArray(this.value?.items)) return 0
+
+      return Object.keys(this.value.items.reduce((acc, item) => {
+        acc[item[this.column]] = 1
+        return acc
+      }, {})).length
+    },
+
+    datasets(){
+      if(!Array.isArray(this.value?.items)) return []
+
+      const grouped = this.value.items.reduce((acc, item) => {
+        if(!acc[item[this.column]]) acc[item[this.column]] = 0
+        acc[item[this.column]] += 1
+        return acc
+      }, {})
+
+      const datasets = []
+      for(let coord in grouped){
+        datasets.push([parseFloat(coord.split(',')[0]), parseFloat(coord.split(',')[1]), grouped[coord]])
+      }
+
+      return datasets
+    }
+
+  },
+
+	watch: {
+
+    datasets(){
+			this.load()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col h-[40vh] border-[1px] border-text-50 bg-base-500 rounded-xl overflow-hidden;
+}
+
+</style>

package/src/components/GmapsDirection.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="flex">
+    <div v-if="config.apiKey" ref="map" class="flex-1"></div>
+    <div v-else class="flex-1 flex items-center justify-center text-text-400">{{  error }}</div>
+  </div>
+</template>
+
+<script>
+
+import { Loader } from '@googlemaps/js-api-loader';
+
+export default{
+
+  props: {
+    value: Array,
+
+    config: {
+      type: Object,
+      default: {}
+    },
+  },
+
+  data(){
+    return {
+      error: this.$t('Google maps api required'),
+      map: null
+    }
+  },
+
+  mounted() {
+    this.load()
+  },
+
+  methods: {
+
+    load(){
+      if(!this.config.apiKey) return
+      if(!this.value) return this.error = 'No value'
+
+      const loader = new Loader({
+        apiKey: this.config.apiKey // "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
+      })
+
+      loader.load()
+          .then(async () => {
+
+            loader.load().then(() => {
+              if(!Array.isArray(this.value) || this.value.length < 1) return
+
+              const map = new google.maps.Map(this.$refs.map, {
+                center: this.value[0], // Example: San Francisco
+                zoom: 12,
+                mapTypeId: 'roadmap',
+                streetViewControl: false,
+                keyboardShortcuts: false,
+                styles: [
+                  { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
+                  { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
+                  { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
+                  {
+                    featureType: "administrative.locality",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#d59563" }],
+                  },
+                  {
+                    featureType: "poi",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#d59563" }],
+                  },
+                  {
+                    featureType: "poi.park",
+                    elementType: "geometry",
+                    stylers: [{ color: "#263c3f" }],
+                  },
+                  {
+                    featureType: "poi.park",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#6b9a76" }],
+                  },
+                  {
+                    featureType: "road",
+                    elementType: "geometry",
+                    stylers: [{ color: "#38414e" }],
+                  },
+                  {
+                    featureType: "road",
+                    elementType: "geometry.stroke",
+                    stylers: [{ color: "#212a37" }],
+                  },
+                  {
+                    featureType: "road",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#9ca5b3" }],
+                  },
+                  {
+                    featureType: "road.highway",
+                    elementType: "geometry",
+                    stylers: [{ color: "#746855" }],
+                  },
+                  {
+                    featureType: "road.highway",
+                    elementType: "geometry.stroke",
+                    stylers: [{ color: "#1f2835" }],
+                  },
+                  {
+                    featureType: "road.highway",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#f3d19c" }],
+                  },
+                  {
+                    featureType: "transit",
+                    elementType: "geometry",
+                    stylers: [{ color: "#2f3948" }],
+                  },
+                  {
+                    featureType: "transit.station",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#d59563" }],
+                  },
+                  {
+                    featureType: "water",
+                    elementType: "geometry",
+                    stylers: [{ color: "#17263c" }],
+                  },
+                  {
+                    featureType: "water",
+                    elementType: "labels.text.fill",
+                    stylers: [{ color: "#515c6d" }],
+                  },
+                  {
+                    featureType: "water",
+                    elementType: "labels.text.stroke",
+                    stylers: [{ color: "#17263c" }],
+                  },
+                ]
+              });
+
+              const root = document.documentElement;
+              const primaryColor600 = getComputedStyle(root).getPropertyValue('--primary-600').trim()
+              const primaryColor300 = getComputedStyle(root).getPropertyValue('--primary-300').trim()
+
+              const line = new google.maps.Polyline({
+                path: this.value,
+                geodesic: true,
+                strokeColor: `rgb(${primaryColor600})`,
+                strokeOpacity: .8,
+                strokeWeight: 6,
+              });
+              line.setMap(map);
+
+              for(let i = this.value.length - 1 ; i >= 0 ; i--){
+                const point = this.value[i]
+
+                new google.maps.Circle({
+                  strokeColor: `rgb(${primaryColor600})`,
+                  strokeOpacity: 0.8,
+                  strokeWeight: 2,
+                  fillColor: i === 0 ? '#FFF' : `rgb(${primaryColor300})`,
+                  fillOpacity: .8,
+                  map,
+                  center: point,
+                  radius: 10, // Radius in meters (adjust as needed)
+                });
+              }
+
+            }).catch(e => {
+              this.error = 'Error loading Google Maps JavaScript API'
+            });
+          });
+    }
+
+  },
+
+  watch: {
+
+    data(){
+      this.load()
+    }
+
+  }
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Grid.vue

@@ -17,6 +17,8 @@ export default{
 
 	mixins: [ componentMixin ],
 
+  name: "Grid",
+
 	props:{
 		items: Array
 	}

package/src/components/HTMLEditor.vue

@@ -484,13 +484,13 @@ export default{
 
 				if(this.newImage.element){
 					const aDiv = document.createElement("div")
-					aDiv.innerHTML = "<img src=\"" + url + "\" " + propHtml.join(' ') + "/>"
+					aDiv.innerHTML = "<img src=\"" + url + "\" " + propHtml.join(' ') + " class='inline'/>"
 					this.newImage.element.parentNode.replaceChild(aDiv.firstChild, this.newImage.element)
 				}
 
 				else{
 					document.execCommand("insertHTML", false,
-						"<img src=\"" + url + "\" " + propHtml.join(' ') + "/>");
+						"<img src=\"" + url + "\" " + propHtml.join(' ') + " class='inline'/>");
 				}
 
 				this.$refs.imageModal.close()