From c017c18e0b5db8c3e0c92e08819e829a7cdc8388 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Wed, 18 Oct 2017 20:41:50 +0300
Subject: Component refactoring, slider works
---
Geshem.vue | 86 +++++++++++++++++++++++++++++++++++++++++++++++++---
geshem.js | 71 +++----------------------------------------
static/js/build.js | 8 ++---
templates/index.html | 4 +--
4 files changed, 91 insertions(+), 78 deletions(-)
diff --git a/Geshem.vue b/Geshem.vue
index 44a233d..897f88f 100644
--- a/Geshem.vue
+++ b/Geshem.vue
@@ -1,22 +1,92 @@
-
Hello World
+
14-10-2017
+
21:58
@@ -24,4 +94,12 @@
#geshem {
position: absolute;
}
+ #date {
+ color: white;
+ font-size: 1.2em;
+ }
+ #time {
+ color: white;
+ font-size: 1.6em;
+ }
diff --git a/geshem.js b/geshem.js
index 5766887..50ff992 100644
--- a/geshem.js
+++ b/geshem.js
@@ -2,72 +2,9 @@ import mapboxgl from 'mapbox-gl';
import Vue from 'vue';
import Geshem from './Geshem.vue';
-var app = new Vue({
- el: '#app',
- render: h => h(Geshem),
- data: {
- imgs: window.imgs,
- res: 280,
- rasterCoords: {
- 140: [
- [33.35317413, 33.27232471],
- [36.32243686, 33.27232471],
- [36.32243686, 30.72293428],
- [33.35317413, 30.72293428]
- ],
- 280: [
- [31.93095218, 34.5156862],
- [37.86644267, 34.5156862],
- [37.86644267, 29.42911589],
- [31.93095218, 29.42911589]
- ]
- }
- }
-});
-
mapboxgl.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';
-var map = new mapboxgl.Map({
- container: 'map',
- style: 'mapbox://styles/mapbox/dark-v9',
- container: 'map',
- maxZoom: 10,
- minZoom: 5,
- zoom: 6.3,
- center: [35, 31.9],
- hash: false
-});
-
-function addRadarSource(res, i, url) {
- map.addSource('radar-' + res + '-' + i, {
- type: 'image',
- url: '/static/img/' + url,
- coordinates: app.rasterCoords[res]
- })
-}
-function addRadarLayer(res, i) {
- map.addLayer({
- id: 'radar-' + res + '-' + i,
- source: 'radar-' + res + '-' + i,
- type: 'raster',
- paint: {
- 'raster-opacity': 0.85
- }
- })
-}
-
-function removeRadarLayer(res, i) {
- map.removeLayer('radar-' + res + '-' + i)
-}
-
-map.on('style.load', function () {
- var i = 0;
- while (i < app.imgs['140'].length) {
- addRadarSource('140', i, app.imgs['140'][i++])
- }
- var i = 0;
- while (i < app.imgs['280'].length) {
- addRadarSource('280', i, app.imgs['280'][i++])
- }
- addRadarLayer('280', 0)
-})
+var vm = new Vue({
+ el: '#app',
+ render: h => h(Geshem)
+});
diff --git a/static/js/build.js b/static/js/build.js
index 029533a..70302f0 100644
--- a/static/js/build.js
+++ b/static/js/build.js
@@ -80,7 +80,7 @@ eval("// shim for using process in browser\nvar process = module.exports = {};\n
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
-eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mapbox_gl__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mapbox_gl___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_mapbox_gl__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_vue__ = __webpack_require__(4);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Geshem_vue__ = __webpack_require__(8);\nvar _ref;\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nvar app = new __WEBPACK_IMPORTED_MODULE_1_vue__[\"a\" /* default */]({\n el: '#app',\n render: function render(h) {\n return h(__WEBPACK_IMPORTED_MODULE_2__Geshem_vue__[\"a\" /* default */]);\n },\n data: {\n imgs: window.imgs,\n res: 280,\n rasterCoords: {\n 140: [[33.35317413, 33.27232471], [36.32243686, 33.27232471], [36.32243686, 30.72293428], [33.35317413, 30.72293428]],\n 280: [[31.93095218, 34.5156862], [37.86644267, 34.5156862], [37.86644267, 29.42911589], [31.93095218, 29.42911589]]\n }\n }\n});\n\n__WEBPACK_IMPORTED_MODULE_0_mapbox_gl___default.a.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';\nvar map = new __WEBPACK_IMPORTED_MODULE_0_mapbox_gl___default.a.Map((_ref = {\n container: 'map',\n style: 'mapbox://styles/mapbox/dark-v9'\n}, _defineProperty(_ref, 'container', 'map'), _defineProperty(_ref, 'maxZoom', 10), _defineProperty(_ref, 'minZoom', 5), _defineProperty(_ref, 'zoom', 6.3), _defineProperty(_ref, 'center', [35, 31.9]), _defineProperty(_ref, 'hash', false), _ref));\n\nfunction addRadarSource(res, i, url) {\n map.addSource('radar-' + res + '-' + i, {\n type: 'image',\n url: '/static/img/' + url,\n coordinates: app.rasterCoords[res]\n });\n}\n\nfunction addRadarLayer(res, i) {\n map.addLayer({\n id: 'radar-' + res + '-' + i,\n source: 'radar-' + res + '-' + i,\n type: 'raster',\n paint: {\n 'raster-opacity': 0.85\n }\n });\n}\n\nfunction removeRadarLayer(res, i) {\n map.removeLayer('radar-' + res + '-' + i);\n}\n\nmap.on('style.load', function () {\n var i = 0;\n while (i < app.imgs['140'].length) {\n addRadarSource('140', i, app.imgs['140'][i++]);\n }\n var i = 0;\n while (i < app.imgs['280'].length) {\n addRadarSource('280', i, app.imgs['280'][i++]);\n }\n addRadarLayer('280', 0);\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9nZXNoZW0uanM/MWNhZSJdLCJuYW1lcyI6WyJhcHAiLCJlbCIsInJlbmRlciIsImgiLCJkYXRhIiwiaW1ncyIsIndpbmRvdyIsInJlcyIsInJhc3RlckNvb3JkcyIsIm1hcGJveGdsIiwiYWNjZXNzVG9rZW4iLCJtYXAiLCJNYXAiLCJjb250YWluZXIiLCJzdHlsZSIsImFkZFJhZGFyU291cmNlIiwiaSIsInVybCIsImFkZFNvdXJjZSIsInR5cGUiLCJjb29yZGluYXRlcyIsImFkZFJhZGFyTGF5ZXIiLCJhZGRMYXllciIsImlkIiwic291cmNlIiwicGFpbnQiLCJyZW1vdmVSYWRhckxheWVyIiwicmVtb3ZlTGF5ZXIiLCJvbiIsImxlbmd0aCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUE7QUFDQTtBQUNBOztBQUVBLElBQUlBLE1BQU0sSUFBSSxvREFBSixDQUFRO0FBQ2hCQyxNQUFJLE1BRFk7QUFFaEJDLFVBQVE7QUFBQSxXQUFLQyxFQUFFLDREQUFGLENBQUw7QUFBQSxHQUZRO0FBR2hCQyxRQUFNO0FBQ0pDLFVBQU1DLE9BQU9ELElBRFQ7QUFFSkUsU0FBSyxHQUZEO0FBR0pDLGtCQUFjO0FBQ1osV0FBSyxDQUNILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FERyxFQUVILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FGRyxFQUdILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FIRyxFQUlILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FKRyxDQURPO0FBT1osV0FBSyxDQUNILENBQUMsV0FBRCxFQUFjLFVBQWQsQ0FERyxFQUVILENBQUMsV0FBRCxFQUFjLFVBQWQsQ0FGRyxFQUdILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FIRyxFQUlILENBQUMsV0FBRCxFQUFjLFdBQWQsQ0FKRztBQVBPO0FBSFY7QUFIVSxDQUFSLENBQVY7O0FBdUJBLGlEQUFBQyxDQUFTQyxXQUFULEdBQXVCLDBGQUF2QjtBQUNBLElBQUlDLE1BQU0sSUFBSSxpREFBQUYsQ0FBU0csR0FBYjtBQUNSQyxhQUFXLEtBREg7QUFFUkMsU0FBTztBQUZDLHNDQUdHLEtBSEgsb0NBSUMsRUFKRCxvQ0FLQyxDQUxELGlDQU1GLEdBTkUsbUNBT0EsQ0FBQyxFQUFELEVBQUssSUFBTCxDQVBBLGlDQVFGLEtBUkUsU0FBVjs7QUFXQSxTQUFTQyxjQUFULENBQXdCUixHQUF4QixFQUE2QlMsQ0FBN0IsRUFBZ0NDLEdBQWhDLEVBQXFDO0FBQ25DTixNQUFJTyxTQUFKLENBQWMsV0FBV1gsR0FBWCxHQUFpQixHQUFqQixHQUF1QlMsQ0FBckMsRUFBd0M7QUFDdENHLFVBQU0sT0FEZ0M7QUFFdENGLFNBQUssaUJBQWlCQSxHQUZnQjtBQUd0Q0csaUJBQWFwQixJQUFJUSxZQUFKLENBQWlCRCxHQUFqQjtBQUh5QixHQUF4QztBQUtEOztBQUVELFNBQVNjLGFBQVQsQ0FBdUJkLEdBQXZCLEVBQTRCUyxDQUE1QixFQUErQjtBQUM3QkwsTUFBSVcsUUFBSixDQUFhO0FBQ1hDLFFBQUksV0FBV2hCLEdBQVgsR0FBaUIsR0FBakIsR0FBdUJTLENBRGhCO0FBRVhRLFlBQVEsV0FBV2pCLEdBQVgsR0FBaUIsR0FBakIsR0FBdUJTLENBRnBCO0FBR1hHLFVBQU0sUUFISztBQUlYTSxXQUFPO0FBQ0wsd0JBQWtCO0FBRGI7QUFKSSxHQUFiO0FBUUQ7O0FBRUQsU0FBU0MsZ0JBQVQsQ0FBMEJuQixHQUExQixFQUErQlMsQ0FBL0IsRUFBa0M7QUFDaENMLE1BQUlnQixXQUFKLENBQWdCLFdBQVdwQixHQUFYLEdBQWlCLEdBQWpCLEdBQXVCUyxDQUF2QztBQUNEOztBQUVETCxJQUFJaUIsRUFBSixDQUFPLFlBQVAsRUFBcUIsWUFBWTtBQUMvQixNQUFJWixJQUFJLENBQVI7QUFDQSxTQUFPQSxJQUFJaEIsSUFBSUssSUFBSixDQUFTLEtBQVQsRUFBZ0J3QixNQUEzQixFQUFtQztBQUNqQ2QsbUJBQWUsS0FBZixFQUFzQkMsQ0FBdEIsRUFBeUJoQixJQUFJSyxJQUFKLENBQVMsS0FBVCxFQUFnQlcsR0FBaEIsQ0FBekI7QUFDRDtBQUNELE1BQUlBLElBQUksQ0FBUjtBQUNBLFNBQU9BLElBQUloQixJQUFJSyxJQUFKLENBQVMsS0FBVCxFQUFnQndCLE1BQTNCLEVBQW1DO0FBQ2pDZCxtQkFBZSxLQUFmLEVBQXNCQyxDQUF0QixFQUF5QmhCLElBQUlLLElBQUosQ0FBUyxLQUFULEVBQWdCVyxHQUFoQixDQUF6QjtBQUNEO0FBQ0RLLGdCQUFjLEtBQWQsRUFBcUIsQ0FBckI7QUFDRCxDQVZEIiwiZmlsZSI6IjIuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgbWFwYm94Z2wgZnJvbSAnbWFwYm94LWdsJztcbmltcG9ydCBWdWUgZnJvbSAndnVlJztcbmltcG9ydCBHZXNoZW0gZnJvbSAnLi9HZXNoZW0udnVlJztcblxudmFyIGFwcCA9IG5ldyBWdWUoe1xuICBlbDogJyNhcHAnLFxuICByZW5kZXI6IGggPT4gaChHZXNoZW0pLFxuICBkYXRhOiB7XG4gICAgaW1nczogd2luZG93LmltZ3MsXG4gICAgcmVzOiAyODAsXG4gICAgcmFzdGVyQ29vcmRzOiB7XG4gICAgICAxNDA6IFtcbiAgICAgICAgWzMzLjM1MzE3NDEzLCAzMy4yNzIzMjQ3MV0sXG4gICAgICAgIFszNi4zMjI0MzY4NiwgMzMuMjcyMzI0NzFdLFxuICAgICAgICBbMzYuMzIyNDM2ODYsIDMwLjcyMjkzNDI4XSxcbiAgICAgICAgWzMzLjM1MzE3NDEzLCAzMC43MjI5MzQyOF1cbiAgICAgIF0sXG4gICAgICAyODA6IFtcbiAgICAgICAgWzMxLjkzMDk1MjE4LCAzNC41MTU2ODYyXSxcbiAgICAgICAgWzM3Ljg2NjQ0MjY3LCAzNC41MTU2ODYyXSxcbiAgICAgICAgWzM3Ljg2NjQ0MjY3LCAyOS40MjkxMTU4OV0sXG4gICAgICAgIFszMS45MzA5NTIxOCwgMjkuNDI5MTE1ODldXG4gICAgICBdXG4gICAgfVxuICB9XG59KTtcblxubWFwYm94Z2wuYWNjZXNzVG9rZW4gPSAncGsuZXlKMUlqb2llWFYyWVdSdElpd2lZU0k2SW1OcGNuTXhiekJ1YVRBd1pXZG9hMjVvY3pselpta3diSGNpZlEuVUh0TG5nYkttOU84OTQ1cEptMjNOdyc7XG52YXIgbWFwID0gbmV3IG1hcGJveGdsLk1hcCh7XG4gIGNvbnRhaW5lcjogJ21hcCcsXG4gIHN0eWxlOiAnbWFwYm94Oi8vc3R5bGVzL21hcGJveC9kYXJrLXY5JyxcbiAgY29udGFpbmVyOiAnbWFwJyxcbiAgbWF4Wm9vbTogMTAsXG4gIG1pblpvb206IDUsXG4gIHpvb206IDYuMyxcbiAgY2VudGVyOiBbMzUsIDMxLjldLFxuICBoYXNoOiBmYWxzZVxufSk7XG5cbmZ1bmN0aW9uIGFkZFJhZGFyU291cmNlKHJlcywgaSwgdXJsKSB7XG4gIG1hcC5hZGRTb3VyY2UoJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpLCB7XG4gICAgdHlwZTogJ2ltYWdlJyxcbiAgICB1cmw6ICcvc3RhdGljL2ltZy8nICsgdXJsLFxuICAgIGNvb3JkaW5hdGVzOiBhcHAucmFzdGVyQ29vcmRzW3Jlc11cbiAgfSlcbn1cblxuZnVuY3Rpb24gYWRkUmFkYXJMYXllcihyZXMsIGkpIHtcbiAgbWFwLmFkZExheWVyKHtcbiAgICBpZDogJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpLFxuICAgIHNvdXJjZTogJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpLFxuICAgIHR5cGU6ICdyYXN0ZXInLFxuICAgIHBhaW50OiB7XG4gICAgICAncmFzdGVyLW9wYWNpdHknOiAwLjg1XG4gICAgfVxuICB9KVxufVxuXG5mdW5jdGlvbiByZW1vdmVSYWRhckxheWVyKHJlcywgaSkge1xuICBtYXAucmVtb3ZlTGF5ZXIoJ3JhZGFyLScgKyByZXMgKyAnLScgKyBpKVxufVxuXG5tYXAub24oJ3N0eWxlLmxvYWQnLCBmdW5jdGlvbiAoKSB7XG4gIHZhciBpID0gMDtcbiAgd2hpbGUgKGkgPCBhcHAuaW1nc1snMTQwJ10ubGVuZ3RoKSB7XG4gICAgYWRkUmFkYXJTb3VyY2UoJzE0MCcsIGksIGFwcC5pbWdzWycxNDAnXVtpKytdKVxuICB9XG4gIHZhciBpID0gMDtcbiAgd2hpbGUgKGkgPCBhcHAuaW1nc1snMjgwJ10ubGVuZ3RoKSB7XG4gICAgYWRkUmFkYXJTb3VyY2UoJzI4MCcsIGksIGFwcC5pbWdzWycyODAnXVtpKytdKVxuICB9XG4gIGFkZFJhZGFyTGF5ZXIoJzI4MCcsIDApXG59KVxuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIC4vZ2VzaGVtLmpzIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///2\n");
+eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mapbox_gl__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mapbox_gl___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_mapbox_gl__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_vue__ = __webpack_require__(4);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Geshem_vue__ = __webpack_require__(8);\n\n\n\n\n__WEBPACK_IMPORTED_MODULE_0_mapbox_gl___default.a.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';\n\nvar vm = new __WEBPACK_IMPORTED_MODULE_1_vue__[\"a\" /* default */]({\n el: '#app',\n render: function render(h) {\n return h(__WEBPACK_IMPORTED_MODULE_2__Geshem_vue__[\"a\" /* default */]);\n }\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9nZXNoZW0uanM/MWNhZSJdLCJuYW1lcyI6WyJtYXBib3hnbCIsImFjY2Vzc1Rva2VuIiwidm0iLCJlbCIsInJlbmRlciIsImgiXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUE7QUFDQTtBQUNBOztBQUVBLGlEQUFBQSxDQUFTQyxXQUFULEdBQXVCLDBGQUF2Qjs7QUFFQSxJQUFJQyxLQUFLLElBQUksb0RBQUosQ0FBUTtBQUNmQyxNQUFJLE1BRFc7QUFFZkMsVUFBUTtBQUFBLFdBQUtDLEVBQUUsNERBQUYsQ0FBTDtBQUFBO0FBRk8sQ0FBUixDQUFUIiwiZmlsZSI6IjIuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgbWFwYm94Z2wgZnJvbSAnbWFwYm94LWdsJztcbmltcG9ydCBWdWUgZnJvbSAndnVlJztcbmltcG9ydCBHZXNoZW0gZnJvbSAnLi9HZXNoZW0udnVlJztcblxubWFwYm94Z2wuYWNjZXNzVG9rZW4gPSAncGsuZXlKMUlqb2llWFYyWVdSdElpd2lZU0k2SW1OcGNuTXhiekJ1YVRBd1pXZG9hMjVvY3pselpta3diSGNpZlEuVUh0TG5nYkttOU84OTQ1cEptMjNOdyc7XG5cbnZhciB2bSA9IG5ldyBWdWUoe1xuICBlbDogJyNhcHAnLFxuICByZW5kZXI6IGggPT4gaChHZXNoZW0pXG59KTtcblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyAuL2dlc2hlbS5qcyJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///2\n");
/***/ }),
/* 3 */
@@ -130,7 +130,7 @@ eval("// style-loader: Adds some css to the DOM by adding a