Fixed pin location bug on report page

Changed default location to Victory Monument
Cache pins on map tab

assets/templates/page-map.tag

@@ -21,11 +21,16 @@ page-map
      * DEFAULT
      ***************/
     self.title = opts.title;
-    self.pins = opts.pins || [];
-    self.has_more = false;
-    self.skip = 0;
-    self.limit = 50;
-    self.query = opts.query || {};
+    self.map = null;
+    self.mapbox = null;
+    self.is_loading = false;
+    self.options = _.assign({
+      pins: [],
+      has_more: true,
+      skip: 0,
+      limit: 50,
+      query: {}
+    }, opts.options || {});
 
     /***************
      * CHANGE
@@ -37,6 +42,7 @@ page-map
      ***************/
     self.on('mount', () => {
       // console.log('mount:', self.opts);
+      updateMap();
       loadNext();
     });
 
@@ -64,24 +70,29 @@ page-map
     };
 
     function loadNext() {
+      function check() {
+        return self.options.has_more && self.options.pins.length < 500;
+      }
+      if (!check()) return;
       app.busy();
       self.is_loading = true;
       $.ajax({
         url: util.site_url('/pins', app.get('service.api.url')),
         data: _.assign({
           $sort: '-created_time'
-        }, self.query, {
-          $skip: self.skip,
-          $limit: self.limit
+        }, self.options.query, {
+          $skip: self.options.skip,
+          $limit: self.options.limit
         })
       })
       .done(function(data) {
         var new_pins = data.data || [];
-        self.skip += Math.min(new_pins.length, self.limit);
-        self.has_more = new_pins.length >= self.limit;
-        self.pins = self.pins.concat(new_pins);
+        self.options.skip += Math.min(new_pins.length, self.options.limit);
+        self.options.has_more = new_pins.length >= self.options.limit;
+        self.options.pins = self.options.pins.concat(new_pins);
+        app.set('page_map_options', self.options);
 
-        if (self.has_more && self.pins.length < 500) {
+        if (check()) {
           updateMap();
           loadNext();
         } else {
@@ -95,7 +106,7 @@ page-map
     }
 
     function updateMap() {
-      riot.mount('#map-' + self.id, { pins: self.pins });
+      riot.mount('#map-' + self.id, { pins: self.options.pins });
       self.mapbox = _.get(self['map-' + self.id], '_tag');
       self.map = _.get(self.mapbox, 'map');
     }
@@ -125,16 +136,16 @@ page-map
       }
 
       if (self.mapbox) self.mapbox.clearMarker();
-      self.pins = [];
-      self.skip = 0;
-      self.has_more = false;
+      self.options.pins = [];
+      self.options.skip = 0;
+      self.options.has_more = false;
       if (keyword) {
-        self.query = {
+        self.options.query = {
           // tags: keyword,
           categories: keyword
         };
       } else {
-        self.query = {};
+        self.options.query = {};
       }
       loadNext();
     };

assets/templates/page-report.tag

@@ -61,7 +61,7 @@ page-report
                       button.location-input.btn.btn-block.btn-native(type='button', onclick='{ clickMapLocation }') { location_text }
 
                 #input-location-complete(if='{ location }')
-                  map-box#preview-location(pin-clickable='false', options-dragging='false', options-zoom='17', options-zoom-control='false', options-scroll-wheel-zoom='false', options-double-click-zoom='false', options-touch-zoom='false', options-tap='false', options-keyboard='false')
+                  map-box#preview-location(pin-clickable='false', options-dragging='false', options-zoom='{ default_zoom }', options-zoom-control='false', options-scroll-wheel-zoom='false', options-double-click-zoom='false', options-touch-zoom='false', options-tap='false', options-keyboard='false')
                   button#edit-location-btn.btn-floating.btn-large.waves-effect.waves-light.white(type='button', onclick='{ clickMapLocation }')
                     i.icon.material-icons.large.light-blue-text edit
 
@@ -169,7 +169,8 @@ page-report
     self.map = null;
     self.map_id = 'edit-location-map';
     self.location = null;
-    self.default_status = 'verified';
+    self.default_zoom = 16;
+    self.default_status = 'unverified';
     self.status = self.default_status;
     self.neighborhood = '';
     self.owner = app.get('app_user._id');
@@ -640,6 +641,10 @@ page-report
         return el._tag;
       }).toArray()), tag => {
         if (tag.map) {
+          tag.map.setView(self.location);
+          setTimeout(function() {
+            tag.map.setZoom(self.default_zoom); // options.zoom);
+          }, 300);
           tag.map.invalidateSize();
         }
       });

assets/views/app.pug

@@ -71,7 +71,7 @@ append app_script
       $('.tab-bar-view').hide();
       $('#search').show();
 
-      app.open('page-map', '#search', { title: 'ค้นหาพินรอบๆ', pins: [] });
+      app.open('page-map', '#search', { title: 'ค้นหาพินรอบๆ', options: app.get('page_map_options') });
     });
 
     // Route: #pins/:id

assets/views/home.pug

@@ -204,8 +204,8 @@ append app_script
     $.ajax({
       url: util.site_url('/searchnearby', app.get('service.api.url')),
       data: _.assign({
-        $center: '[13.7649224,100.5382705]',
-        $radius: 100,
+        $center: JSON.stringify(app.get('location.default')),
+        $radius: 1000,
         $sort: '-created_time'
       }, self.query, {
         $limit: 50
@@ -224,5 +224,5 @@ append app_script
     });
 
     function updateMap(pins) {
-      riot.mount('map-box', { pins: pins, center: [13.7649224,100.5382705] });
+      riot.mount('map-box', { pins: pins, center: app.get('location.default') });
     }

lib/config.js

@@ -202,7 +202,7 @@ const conf = convict({
     default: {
       doc: 'Default location coordinates',
       format: Array,
-      default: [13.756727, 100.5018549],
+      default: [13.7649, 100.5383],
       env: 'LOCATION_DEFAULT'
     }
   }