From 350ca9318b59e0d27b17ad16b47bfa76d48036d3 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Sat, 21 Oct 2017 20:10:59 +0300
Subject: Fix raster source loading

---
 .gitignore      |  4 +---
 Geshem.vue      | 63 +++++++++++++++++++++++++++++++++++++++------------------
 package.json    |  1 +
 server.js       |  2 +-
 views/index.pug |  4 +---
 yarn.lock       | 15 +++++++++++++-
 6 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/.gitignore b/.gitignore
index 72e881e..27d93e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,3 @@
-*.pyc
-__pycache__/
 node_modules/
-static/img/
 dump.rdb
+static/js/build.js
\ No newline at end of file
diff --git a/Geshem.vue b/Geshem.vue
index afba8ce..de22c7b 100644
--- a/Geshem.vue
+++ b/Geshem.vue
@@ -11,6 +11,7 @@
 </template>
 
 <script>
+  import axios from 'axios';
   import vueSlider from 'vue-slider-component';
   import mapboxgl from 'mapbox-gl';
   export default {
@@ -20,7 +21,7 @@
     },
     data: function () {
       return {
-        imgs: window.imgs,
+        imgs: null,
         res: 280,
         slider: 7,
         rasterCoords: {
@@ -37,6 +38,7 @@
             [31.93095218, 29.42911589]
           ]
         },
+        mapLoaded: false,
         map: new mapboxgl.Map({
           container: 'map',
           style: 'mapbox://styles/mapbox/dark-v9',
@@ -51,10 +53,12 @@
     },
     computed: {
       date: function () {
+        if (!this.imgs) { return '' };
         var d = this.imgs[this.res][7-this.slider].substr(0, 8);
         return `${d.substr(6, 2)}-${d.substr(4, 2)}-${d.substr(0, 4)}`;
       },
       time: function () {
+        if (!this.imgs) { return '' };
         var t = this.imgs[this.res][7-this.slider].substr(9, 6);
         return `${t.substr(0, 2)}:${t.substr(2, 2)}`;
       },
@@ -62,9 +66,41 @@
         return 7 - this.slider;
       }
     },
-    created: function () {
+    mounted: function () {
       var vm = this;
-      this.map.on('style.load', function () {
+      axios.get('/imgs').then((res) => {
+        vm.imgs = res.data;
+        if (vm.mapLoaded) {
+          vm.loadSources();
+        }
+      })
+    },
+    created: function () {
+      this.initMap();
+    },
+    methods: {
+      initMap: function() {
+        var vm = this;
+        this.map.on('style.load', function () {
+          vm.mapLoaded = true;
+          if (vm.imgs) {
+            vm.loadSources();
+          }
+        });
+        this.map.on('zoom', function () {
+          var zoomIn = vm.map.getZoom() > 7;
+          var from = zoomIn ? '280' : '140';
+          var to = zoomIn ? '140' : '280';
+          if (to != vm.res) {
+            vm.removeRadarLayer(from, vm.curImg);
+            vm.addRadarLayer(to, vm.curImg);
+            vm.res = to;
+          }
+        });
+      },
+      loadSources: function () {
+        // sources are loaded either in mounted() or in after style load in initMap() depending on which happened last
+        var vm = this;
         var i = 0;
         while (i < vm.imgs['140'].length) {
           vm.addRadarSource('140', i, vm.imgs['140'][i++])
@@ -74,24 +110,11 @@
           vm.addRadarSource('280', i, vm.imgs['280'][i++])
         }
         vm.addRadarLayer('280', 0)
-      });
-      this.map.on('zoom', function () {
-        var zoomIn = vm.map.getZoom() > 7;
-        var from = zoomIn ? '280' : '140';
-        var to = zoomIn ? '140' : '280';
-        if (to != vm.res) {
-          console.log(`Zoom event from ${from} to ${to}`);
-          vm.removeRadarLayer(from, vm.curImg);
-          vm.addRadarLayer(to, vm.curImg);
-          vm.res = to;
-        }
-      });
-    },
-    methods: {
+      },
       addRadarSource: function(res, i, url) {
         this.map.addSource(`radar-${res}-${i}`, {
           type: 'image',
-          url: '/static/img/' + url,
+          url: 'http://imgs.geshem.space/' + url,
           coordinates: this.rasterCoords[res]
         })
       },
@@ -111,8 +134,8 @@
     },
     watch: {
       slider: function (to, from) {
-        this.removeRadarLayer(this.res, 7-from);
-        this.addRadarLayer(this.res, 7-to);
+        this.removeRadarLayer(this.res, from);
+        this.addRadarLayer(this.res, to);
       }
     }
   }
diff --git a/package.json b/package.json
index 6a3b469..ae6821c 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "aws-sdk": "^2.138.0",
+    "axios": "^0.16.2",
     "express": "^4.16.2",
     "mapbox-gl": "^0.40.1",
     "moment": "^2.19.1",
diff --git a/server.js b/server.js
index 5ae4c22..08968c6 100644
--- a/server.js
+++ b/server.js
@@ -74,7 +74,7 @@ app.set('port', (process.env.PORT || 3000));
 app.set('view engine', 'pug')
 app.set('views', __dirname + '/views');
 
-app.use('/static', express.static(__dirname + 'static'))
+app.use('/static', express.static(__dirname + '/static'))
 
 app.use('/', function (req, res, next){
   res.on('finish', function(){
diff --git a/views/index.pug b/views/index.pug
index ed99ce9..fe227b2 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -3,7 +3,7 @@ html
   head
     meta(charset='utf-8')
     meta(name='viewport', content='initial-scale=1,maximum-scale=1,user-scalable=no')
-    title Geshem.space - Let it rain!
+    title Geshem.space
     if prod
       script(type='text/javascript').
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -13,8 +13,6 @@ html
         ga('create', 'UA-71416554-1', 'auto');
         ga('send', 'pageview');
   body(style='margin: 0;')
-    script(type='text/javascript').
-      window.imgs = {{ imgs|safe }};
     div(id='map', style='position: absolute; top: 0; bottom: 0; width: 100%;')
     div(id='app', style='position: absolute;')
     script(src='/static/js/build.js')
diff --git a/yarn.lock b/yarn.lock
index f5f2dae..b34b95c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -273,6 +273,13 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@^0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.16.2.tgz#ba4f92f17167dfbab40983785454b9ac149c3c6d"
+  dependencies:
+    follow-redirects "^1.2.3"
+    is-buffer "^1.1.5"
+
 babel-code-frame@^6.11.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -1464,7 +1471,7 @@ de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
 
-debug@2.6.9, debug@^2.2.0, debug@^2.6.8:
+debug@2.6.9, debug@^2.2.0, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -1937,6 +1944,12 @@ flow-remove-types@^1.1.2:
     babylon "^6.15.0"
     vlq "^0.2.1"
 
+follow-redirects@^1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.2.5.tgz#ffd3e14cbdd5eaa72f61b6368c1f68516c2a26cc"
+  dependencies:
+    debug "^2.6.9"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
-- 
cgit v1.3.1