zet-lib 1.2.99 → 1.2.101

package/lib/Form.js

@@ -448,6 +448,12 @@ Form.field = (obj) => {
       displayForm = obj.html
       break
 
+    case 'location':
+      displayForm = `${prepend}<input type="text" class="form-control" id="search_map_location"  placeholder="type a place" ${required} value="" ${htmlOptions}>${information}${append}
+<textarea ${id} ${name} style="display: none" ${readonly} rows="2">${JSON.stringify(obj.value)}</textarea>
+<div id="map_${obj.id}" style="background-color:#C3C3C3;width: 100%;height: ${obj.height}px"></div>`
+      break
+
     case 'dropzone':
       displayForm = `${prepend}<div ${tabindex}  ${style}  type="text" ${classview} ${id}  ${htmlOptions}><label for="files" class="dropzone-container">
         <div class="dz-message" data-dz-message><div class="file-icon"><span class="icon-small icons-primary"><img class="icons-bg-white icon-image-large" src="/assets/icons/file-plus.svg"></span></div>

package/lib/moduleLib.js

@@ -78,6 +78,99 @@ m.dropzone = function (req, res, elem) {
     script: script,
   }
 }
+
+//module for google map
+m.location = function (req, res, key) {
+  let script = ``
+  let head = ``
+  let end = ``
+  end += `<script src="https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_KEY}&callback=initAutocompleteZmap&libraries=places&language=ID" defer></script>`
+  script += `let searchAddressMap;
+    let autocompleteMap;
+    function initAutocompleteZmap() {
+        if(mapLocationJSON && mapLocationJSON.lat) {
+            $("#search_map_location").val(mapLocationJSON.address1);
+            initMap(mapLocationJSON.lat,mapLocationJSON.lon);
+        }
+        searchAddressMap = document.querySelector("#search_map_location");
+        autocompleteMap = new google.maps.places.Autocomplete(searchAddressMap, {
+            componentRestrictions: {country: ["ID"]},
+            fields: ["address_component", "geometry"],
+        });
+        searchAddressMap.focus();
+        autocompleteMap.addListener("place_changed", fillInAddress);
+    }
+    function fillInAddress() {
+        const place = autocompleteMap.getPlace();
+        let lat = place.geometry.location.lat();
+        let lon = place.geometry.location.lng();
+        initMap(lat, lon);
+        mapLocationJSON = {
+            lat:lat,
+            lon:lon,
+            address1: $("#search_map_location").val(),
+            address2:place.address_components,
+        }
+        setAddress();
+    }
+    function setAddress() {
+        $("#${key}").val(JSON.stringify(mapLocationJSON));
+    }
+    function initMap(lat, lon) {
+        let position = {lat: lat, lng: lon}
+        const map = new google.maps.Map(document.getElementById("map_${key}"), {
+            zoom: 13,
+            center: position,
+            draggable: true
+        });
+        var marker;
+        placeMarker(position, map);
+        var infowindow = new google.maps.InfoWindow();
+        function placeMarker(position, map) {
+            marker = new google.maps.Marker({
+                position: position,
+                map: map,
+                draggable: true,
+                animation: google.maps.Animation.DROP,
+            });
+            map.panTo(position);
+        }
+        google.maps.event.addListener(marker, 'dragend', function () {
+            geocodePosition(marker.getPosition());
+        });
+        google.maps.event.addListener(marker, 'click', function() {
+            infowindow.setContent($("#search_map_location").val());
+            infowindow.open(map, this)
+        });
+        function geocodePosition(pos) {
+            mapLocationJSON.lat=pos.lat();
+            mapLocationJSON.lon=pos.lng();
+            var geocoder = new google.maps.Geocoder();
+            geocoder.geocode
+            ({
+                    latLng: pos
+                },
+                function (results, status) {
+                    if (status == google.maps.GeocoderStatus.OK) {
+                        $("#search_map_location").val(results[0].formatted_address);
+                        $("#mapErrorMsg").hide(100);
+                        mapLocationJSON.address2=results[0].formatted_address;
+                        mapLocationJSON.address1=$("#search_map_location").val();
+                        setAddress();
+                    } else {
+                        $("#mapErrorMsg").html('Cannot determine address at this location.' + status).show(100);
+                    }
+                }
+            );
+        }
+    }`
+  return {
+    head: head,
+    end: end,
+    script: script,
+  }
+}
+
 //module for datepicker
 m.datetimepicker = function (req, res, elem) {
   let script = ''

package/lib/zRoute.js

@@ -691,14 +691,39 @@ zRoute.relations = async (req, res, table) => {
 /*
  Function to create filter elements on  data table grid
  */
-
 zRoute.dataTableFilterSync = async (req, res, MYMODEL, filter) => {
   const relations = await zRoute.relations(req, res, MYMODEL.table)
-  zRoute.moduleLib(req, res, MYMODEL, relations)
+  //zRoute.moduleLib(req, res, MYMODEL, relations)
+  zRoute.moduleLibGrid(req, res, MYMODEL)
   const dataTable = zRoute.dataTableFilter(MYMODEL, relations, filter)
   return dataTable
 }
 
+zRoute.moduleLibGrid = (req, res, MYMODEL) => {
+  let autompletes = []
+  for (const key in MYMODEL.widgets) {
+    if (MYMODEL.widgets[key].name == 'typeahead') {
+      autompletes.push(key)
+    }
+  }
+  if (autompletes.length > 0) {
+    let scriptForm = ''
+    let head = ''
+    let end = ''
+    for (key of autompletes) {
+      let typeaheadObj = moduleLib.typeahead(req, res, MYMODEL.table, `#${key}Typeahead`)
+      scriptForm += typeaheadObj.script
+      head = typeaheadObj.head
+      end = typeaheadObj.end
+    }
+    if (end) {
+      moduleLib.addModule(req, res, end)
+      let contentScript = scriptForm
+      moduleLib.addScript(req, res, contentScript)
+    }
+  }
+}
+
 zRoute.dataTableFilter = (MYMODEL, relations, filter) => {
   filter = filter || {}
   let filterColumns = filter.hasOwnProperty('columns') ? filter.columns : []
@@ -983,6 +1008,10 @@ zRoute.dataTableData = (key, value, MYMODEL, relations, myid = '') => {
           myvalue = value ? JSON.stringify(value).replaceAll('","', '", "') : ''
           break
 
+        case 'location':
+          myvalue = value ? value.address1 : ''
+          break
+
         case 'json_array':
           myvalue = value ? JSON.stringify(value).replaceAll('","', '", "') : ''
           break
@@ -2426,6 +2455,16 @@ zRoute.forms = (req, res, MYMODEL, relations, data = {}) => {
           obj.type = 'textarea'
           obj.class = 'form-control editor'
           break
+        case 'location':
+          obj.type = 'location'
+          obj.class = 'form-control'
+          obj.height = obj.attributes.height || 200
+          let objLocation = { lat: '', lon: '', address1: '', address2: '' }
+          if (obj.value) {
+            objLocation = obj.value
+          }
+          script += `let mapLocationJSON = ${JSON.stringify(objLocation)};`
+          break
         case 'tinymce':
           obj.type = 'textarea'
           obj.class = 'form-control tinymce'
@@ -2498,14 +2537,23 @@ zRoute.viewFormsSync = async (req, res, MYMODEL, data = {}) => {
   const relations = await zRoute.relations(req, res, MYMODEL.table)
   let forms = zRoute.viewForm(req, res, MYMODEL, relations, data)
   let hasEditors = false
+  let hasLocation = false
+  let mapKey = ''
   for (let key in MYMODEL.widgets) {
     if (MYMODEL.widgets[key].name == 'editor') {
       hasEditors = true
     }
+    if (MYMODEL.widgets[key].name == 'location') {
+      hasLocation = true
+      mapKey = key
+    }
   }
   if (hasEditors) {
     moduleLib.build(req, res, moduleLib.editor(req, res))
   }
+  if (hasLocation) {
+    moduleLib.build(req, res, moduleLib.location(req, res, mapKey))
+  }
   //add tabs role
   if (MYMODEL.hasOwnProperty('hasTabs') && MYMODEL.hasTabs) {
     let script = ''
@@ -3015,9 +3063,6 @@ zRoute.moduleLib = (req, res, MYMODEL, relations, zForms = '', data = {}) => {
         }
       }
     } else if (MYMODEL.widgets[keys].name == 'typeahead') {
-      //employee_payroll_salary___employee_id_1
-      //let name = `${MYMODEL.widgets[keys].table}_${MYMODEL.table}___${keys}_${res.locals.companyId}`
-      //scriptTemp += `<script>const ${keys}TypeaheadData = ${JSON.stringify(myCache.get(name))}</script>`
     }
   }
 
@@ -3064,7 +3109,9 @@ zRoute.generateJS = (req, res, MYMODEL, relations, zForms = '', data = {}) => {
   let defaultScript = ''
   let hasTags = false
   let hasLexical = false
+  let hasLocation = false
   let lexicals = []
+  let mapKey = ''
   let hasAttributes = []
   for (let key in widgets) {
     if (widgets[key].name == 'datepicker') {
@@ -3087,6 +3134,12 @@ zRoute.generateJS = (req, res, MYMODEL, relations, zForms = '', data = {}) => {
       scriptForm += typeaheadObj.script
       headObj.typeahead = typeaheadObj.head
       endObj.typeahead = typeaheadObj.end
+    } else if (widgets[key].name == 'location') {
+      let locationObj = moduleLib.location(req, res, key)
+      scriptForm += locationObj.script
+      endObj.location = locationObj.end
+      hasLocation = true
+      mapKey = key
     } else if (widgets[key].name == 'datetime') {
       hasDateTimePicker = true
     } else if (widgets[key].name == 'table') {
@@ -3240,6 +3293,12 @@ zRoute.generateJS = (req, res, MYMODEL, relations, zForms = '', data = {}) => {
       `
   }
 
+  if (hasLocation) {
+    scriptForm += `
+  
+`
+  }
+
   if (hasDropzone) {
     dropzones.map((item) => {
       scriptForm += `$("div#${item}").dropzone({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zet-lib",
-  "version": "1.2.99",
+  "version": "1.2.101",
   "description": "zet is a library that part of zet generator.",
   "engines": {
     "node": ">=18"