Fixes #6 display pin not found

Updated text on homepage
Show API for developers link on homepage
Show pins around victory monument

assets/css/components/_button.scss

@@ -5,14 +5,15 @@
 .btn {
   i {
     font-size: 2.4rem;// $fs-icon-h5;
+    line-height: 1;
     vertical-align: middle;
-    // line-height: 1;
   }
 }
 .btn-large {
   font-size: $fs-md;
   i {
     font-size: $fs-icon-h4;
+    line-height: 1;
   }
 }
 

assets/css/page/_app.scss

@@ -265,3 +265,11 @@
     }
   }
 }
+
+
+#page-error {
+  .title-icon {
+    font-size: 12rem;
+    color: $cl-lightgray;
+  }
+}

assets/templates/map-box.tag

@@ -1,5 +1,5 @@
 map-box
-  .map-box-container(id='{ id }-container')
+  .map-box-container(id='{ id }-container', class='{ pin_clickable ? "" : "pin-click-disabled" }')
     .map-box-widget(id='{ id }')
 
   style(type='scss', scoped).
@@ -26,6 +26,12 @@ map-box
       z-index: 1 !important;
     }
 
+    .pin-click-disabled {
+      .leaflet-clickable {
+        cursor: default;
+      }
+    }
+
   script.
     const self = this;
     self.id = 'map-box-' + util.uniqueId();
@@ -50,8 +56,9 @@ map-box
       }
     });
 
-    self.center = app.get('location.default');
+    self.center = opts.center || app.get('location.default');
     self.markers = [];
+    self.fit_bounds = opts.fitBounds || true;
     self.pin_clickable = opts.pinClickable !== 'false';
     self.pins = _.filter(opts.pins || [], pin => {
       if (!_.get(pin, 'location.coordinates')) return false;
@@ -253,7 +260,7 @@ map-box
         return marker;
       });
 
-      if (self.markers.length > 0) {
+      if (self.fit_boudns && self.markers.length > 0) {
         const bounds = new L.LatLngBounds(_.map(self.pins, pin => _.get(pin, 'location.coordinates')));
         // // offset bounds to show pin card on right half
         // const ne = bounds.getNorthEast();

assets/templates/page-error.tag

@@ -0,0 +1,21 @@
+page-error
+
+  #page-error
+    .container
+      .row
+        .col.s12.m6.offset-m3.l4.offset-l4
+
+          .spacing-large
+
+          .center
+            i.icon.material-icons.title-icon { icon }
+            h4.center { title }
+            h5 { message }
+
+          .spacing-large
+
+  script.
+    const self = this;
+    self.title = opts.title || 'เกิดปัญหาขึ้น!';
+    self.message = opts.message || 'ลองดูใหม่นะ';
+    self.icon = opts.icon || 'info_outline'

assets/views/app.pug

@@ -20,6 +20,8 @@ append content
 
     page-feed#tag-view
 
+    page-error
+
 prepend footer
 
   footer.tab-bar
@@ -86,6 +88,10 @@ append app_script
         var pin = data || {};
         app.open('page-pin', pin);
         app.busy(false);
+      })
+      .fail(function(err_text) {
+        app.open('page-error', { icon: 'place', title: 'ป้าหาพินที่ต้องการไม่เจอ', message: 'ลองช่วยปักพินใหม่มั้ยจ๊ะ?' });
+        app.busy(false);
       });
     });
 

assets/views/home.pug

@@ -3,7 +3,7 @@ extends layouts/layout
 append content
 
   #page-home
-    map-box(pin-clickable='false', 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(pin-clickable='false', options-zoom='15', options-zoom-control='false', options-scroll-wheel-zoom='false', options-double-click-zoom='false', options-touch-zoom='false', options-tap='false', options-keyboard='false')
 
     #floating-logo
       .logo
@@ -16,14 +16,13 @@ append content
 
         .row
           .col.s12.m6.offset-m3.l6.offset-l3
-            a.btn.btn-large.btn-block.waves-effect.waves-light(href='https://www.facebook.com/youpin.city/', target='_blank') Follow Us on Facebook
-            .spacing-small
             a.btn.btn-large.btn-block.waves-effect.waves-light(href=site_url('/app')) เริ่มใช้งานยุพิน (Open Beta)
             .spacing-small
-            .btn.btn-flat.btn-large.btn-plain.btn-block.disabled API For Developers ＊
-
-        .row
-          .col.s12.center ＊ พบกันเร็ว ๆ นี้
+            a.btn.btn-large.btn-block.waves-effect.waves-light(href='https://youpin-city.github.io/youpin-api-docs/')
+              | API สำหรับนักพัฒนา
+              i.icon.material-icons(style='margin-left: 0.5rem;') fiber_new
+            .spacing-small
+            a.btn.btn-large.btn-block.waves-effect.waves-light.white.blue-text(href='https://www.facebook.com/youpin.city/', target='_blank') Follow Us on Facebook
 
     #trending-pin.clearfix
       .card-carousel
@@ -53,7 +52,8 @@ append content
           h2.section-name Bangkok Urban Hack (แหก) Day
           h3.subsection-name มาร่วม Hack เมืองให้น่าอยู่กัน
 
-          p งานเดียวที่นำเอา Designer, Developer, Thinker, Media และ Marketer ที่เก่งกาจในการแก้ปัญหา  มาเจอกับคนที่รู้ปัญหา เพื่อร่วมระดมสมองและลงมือสร้างนวัตกรรมต้นแบบ ในรูปแบบ Hackathon โดยใช้เทคโนโลยีและพลังของ Big Data ตลอด 30 ชั่วโมง!
+          p งานเดียวที่นำเอา Designer, Developer, Thinker, Media และ Marketer ที่เก่งกาจในการแก้ปัญหา มาเจอกับคนที่รู้ปัญหา เพื่อร่วมระดมสมองและลงมือสร้างนวัตกรรมต้นแบบ ในรูปแบบ Hackathon โดยใช้เทคโนโลยีและพลังของ Big Data ตลอด 30 ชั่วโมง!
+          p โดยงาน Bangkok Urban Hack Day ได้รับเงินสนับสนุนจากสำนักงานรัฐบาลอิเล็กทรอนิกส์ (EGA) และความร่วมมือจากศูนย์สร้างสรรค์งานออกแบบ (TCDC)
 
           h4 เวลางาน
           table.highlight.striped
@@ -109,7 +109,8 @@ append content
 
       .row
         .col.s12.m6.offset-m3
-          a.btn.btn-large.btn-block.waves-effect.waves-light(href='https://bkkurbanhackday.typeform.com/to/kp2FIU', target='_blank') สมัครเพื่อร่วม Hack เมือง
+          button.btn.btn-large.btn-block.disabled สมัครเพื่อร่วม Hack เมือง
+          //- a.btn.btn-large.btn-block.waves-effect.waves-light(href='https://bkkurbanhackday.typeform.com/to/kp2FIU', target='_blank') สมัครเพื่อร่วม Hack เมือง
 
     .fluid-container.alt-container
       .container
@@ -186,6 +187,29 @@ append content
 
 append app_script
   script.
-    riot.mount('map-box', {
-      pins: !{JSON.stringify(sample_pins)}
+
+    $.ajax({
+      url: util.site_url('/searchnearby', app.get('service.api.url')),
+      data: _.assign({
+        $center: '[13.7649224,100.5382705]',
+        $radius: 100,
+        $sort: '-created_time'
+      }, self.query, {
+        $limit: 50
+      })
+    })
+    .done(function(data) {
+      // TODO: remove this temporary fix for #84
+      const pins = _.map(data.data || [], pin => {
+        pin.location.coordinates = [
+          pin.location.coordinates[1],
+          pin.location.coordinates[0]
+        ];
+        return pin;
+      });
+      updateMap(pins);
     });
+
+    function updateMap(pins) {
+      riot.mount('map-box', { pins: pins, center: [13.7649224,100.5382705] });
+    }

public/js/tag.js

@@ -1,6 +1,6 @@
 'use strict';
 
-riot.tag2('map-box', '<div class="map-box-container" id="{id}-container"> <div class="map-box-widget" id="{id}"></div> </div>', 'map-box .map-box-container,[riot-tag="map-box"] .map-box-container,[data-is="map-box"] .map-box-container{ position: relative; width: 100%; height: 400px; } map-box .map-box-container .map-box-widget,[riot-tag="map-box"] .map-box-container .map-box-widget,[data-is="map-box"] .map-box-container .map-box-widget{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } map-box .leaflet-map-pane,[riot-tag="map-box"] .leaflet-map-pane,[data-is="map-box"] .leaflet-map-pane{ z-index: 2 !important; } map-box .leaflet-google-layer,[riot-tag="map-box"] .leaflet-google-layer,[data-is="map-box"] .leaflet-google-layer{ z-index: 1 !important; }', '', function (opts) {
+riot.tag2('map-box', '<div class="map-box-container {pin_clickable ? &quot;&quot; : &quot;pin-click-disabled&quot;}" id="{id}-container"> <div class="map-box-widget" id="{id}"></div> </div>', 'map-box .map-box-container,[riot-tag="map-box"] .map-box-container,[data-is="map-box"] .map-box-container{ position: relative; width: 100%; height: 400px; } map-box .map-box-container .map-box-widget,[riot-tag="map-box"] .map-box-container .map-box-widget,[data-is="map-box"] .map-box-container .map-box-widget{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } map-box .leaflet-map-pane,[riot-tag="map-box"] .leaflet-map-pane,[data-is="map-box"] .leaflet-map-pane{ z-index: 2 !important; } map-box .leaflet-google-layer,[riot-tag="map-box"] .leaflet-google-layer,[data-is="map-box"] .leaflet-google-layer{ z-index: 1 !important; } map-box .pin-click-disabled .leaflet-clickable,[riot-tag="map-box"] .pin-click-disabled .leaflet-clickable,[data-is="map-box"] .pin-click-disabled .leaflet-clickable{ cursor: default; }', '', function (opts) {
   var self = this;
   self.id = 'map-box-' + util.uniqueId();
 
@@ -18,8 +18,9 @@ riot.tag2('map-box', '<div class="map-box-container" id="{id}-container"> <div c
     }
   });
 
-  self.center = app.get('location.default');
+  self.center = opts.center || app.get('location.default');
   self.markers = [];
+  self.fit_bounds = opts.fitBounds || true;
   self.pin_clickable = opts.pinClickable !== 'false';
   self.pins = _.filter(opts.pins || [], function (pin) {
     if (!_.get(pin, 'location.coordinates')) return false;
@@ -90,7 +91,7 @@ riot.tag2('map-box', '<div class="map-box-container" id="{id}-container"> <div c
       return marker;
     });
 
-    if (self.markers.length > 0) {
+    if (self.fit_boudns && self.markers.length > 0) {
       var bounds = new L.LatLngBounds(_.map(self.pins, function (pin) {
         return _.get(pin, 'location.coordinates');
       }));
@@ -112,6 +113,13 @@ riot.tag2('map-box', '<div class="map-box-container" id="{id}-container"> <div c
   }
 });
 
+riot.tag2('page-error', '<div id="page-error"> <div class="container"> <div class="row"> <div class="col s12 m6 offset-m3 l4 offset-l4"> <div class="spacing-large"></div> <div class="center"><i class="icon material-icons title-icon">{icon}</i> <h4 class="center">{title}</h4> <h5>{message}</h5> </div> <div class="spacing-large"></div> </div> </div> </div> </div>', '', '', function (opts) {
+  var self = this;
+  self.title = opts.title || 'เกิดปัญหาขึ้น!';
+  self.message = opts.message || 'ลองดูใหม่นะ';
+  self.icon = opts.icon || 'info_outline';
+});
+
 riot.tag2('page-feed', '<div id="page-feed"> <div class="container no-padding-s"> <div class="spacing"></div> <h5 class="center" if="{title}">{title}</h5> <div class="row"> <div class="col s12 m6 l4" each="{pin in pins}"> <div class="card hover-card"><a class="card-image" href="#pins/{pin._id}{pin.mock ? &quot;?mock=1&quot; : &quot;&quot;}" riot-style="background-image: url({pin.photos &amp;&amp; pin.photos.length &gt; 0 ? pin.photos[0] : util.site_url(&quot;/public/image/pin_photo.png&quot;)})"></a> <div class="card-content"> <div class="card-description"> <div class="card-author"><strong data-url="#user/{pin.owner}">@{app.get(\'app_user.name\').toLowerCase()}</strong></div> <div class="card-text" html="{util.parse_tags(pin.detail)}"></div> <div class="tag-list" if="{pin.categories &amp;&amp; pin.categories.length &gt; 0}"><a class="tag-item" each="{cat in pin.categories}" href="#tags/{cat}">{cat}</a></div> </div> <div class="card-meta"> <div class="meta meta-time right">{moment(pin.created_time).fromNow()}</div> <div class="meta meta-status left" data-status="{pin.status}">{pin.status}</div> </div> </div> </div> </div> </div> <div class="center"> <button class="btn waves-effect waves-light white light-blue-text" if="{has_more &amp;&amp; !is_loading}" type="button" onclick="{clickLoadMore}"><i class="icon material-icons light-blue-text">expand_more</i>โหลดเพิ่ม</button> <preloader class="small" if="{is_loading}"></preloader> </div> <div class="spacing-large"></div> </div> </div>', '', '', function (opts) {
   var self = this;