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 @@ @@ -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