From b3ec8233391c08298edc3644c647da83131e87db Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Sat, 17 Nov 2018 19:31:35 +0200 Subject: Cleanup and rename Geshem files --- src/App.css | 37 ---------- src/App.js | 206 ----------------------------------------------------- src/App.test.js | 9 --- src/Geshem.css | 33 +++++++++ src/Geshem.js | 206 +++++++++++++++++++++++++++++++++++++++++++++++++++++ src/Geshem.test.js | 9 +++ src/index.css | 6 +- src/index.js | 7 +- 8 files changed, 251 insertions(+), 262 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/App.js delete mode 100644 src/App.test.js create mode 100644 src/Geshem.css create mode 100644 src/Geshem.js create mode 100644 src/Geshem.test.js (limited to 'src') diff --git a/src/App.css b/src/App.css deleted file mode 100644 index e34c45d..0000000 --- a/src/App.css +++ /dev/null @@ -1,37 +0,0 @@ -body { - user-select: none; -} - -#map { - position: absolute; - top: 0; - bottom: 0; - width: 100%; -} - -#datetime { - position: absolute; - margin: 20px 0px 0px 20px; - color: white; - font-family: monospace; -} -#date { - font-size: 1.4em; -} -#time { - font-size: 1.8em; -} - -#slider { - position: absolute; - bottom: 8vh; - width: 30vw; - margin-left: 35vw; -} - -@media only screen and (max-device-width: 812px) { - #slider { - width: 80vw; - margin-left: 8vw; - } -} diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 39953d7..0000000 --- a/src/App.js +++ /dev/null @@ -1,206 +0,0 @@ -import React, { Component } from 'react'; -import Slider from 'rc-slider'; -import { DateTime } from 'luxon'; -import axios from 'axios'; -import mapboxgl from 'mapbox-gl'; - -import './App.css'; -import 'mapbox-gl/dist/mapbox-gl.css'; -import 'rc-slider/assets/index.css'; - -mapboxgl.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw'; - -const IMGS_BASE_URL = 'https://imgs.geshem.space/' - - -class App extends Component { - - constructor(props) { - super(props); - this.state = { - mapLoaded: false, - imgs: null, - res: 280, - slider: 9, - lng: 35, - lat: 31.9, - zoom: 6.3, - 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] - ] - }, - }; - } - - loadSources() { - const { imgs } = this.state; - let i = 0; - while (i < imgs['140'].length) { - this.addRadarSource('140', i, imgs['140'][i]) - this.addRadarLayer('140', i++) - } - i = 0; - while (i < imgs['280'].length) { - this.addRadarSource('280', i, imgs['280'][i]) - this.addRadarLayer('280', i++) - } - this.showRadarLayer('280', 9) - } - - loadRadarData() { - axios({ - url: IMGS_BASE_URL + 'imgs.json', - method: 'get', - }).then((res) => { - this.setState({ - imgs: res.data - }) - if (this.state.mapLoaded) { - this.loadSources(); - } - }).catch(function(error) { - console.log(error) - }) - } - - addRadarSource(res, i, url) { - this.map.addSource(`radar-${res}-${i}`, { - type: 'image', - url: IMGS_BASE_URL + url, - coordinates: this.state.rasterCoords[res] - }) - } - - addRadarLayer(res, i) { - this.map.addLayer({ - id: `radar-${res}-${i}`, - source: `radar-${res}-${i}`, - type: 'raster', - paint: { - 'raster-opacity': 0, - 'raster-opacity-transition': { - 'duration': 0 - } - } - }) - } - - showRadarLayer(res, i) { - this.map.setPaintProperty(`radar-${res}-${i}`, 'raster-opacity', 0.85); - } - - hideRadarLayer(res, i) { - this.map.setPaintProperty(`radar-${res}-${i}`, 'raster-opacity', 0); - } - - removeRadarLayer(res, i) { - this.map.removeLayer(`radar-${res}-${i}`) - } - - onChangeSlider(val) { - this.hideRadarLayer(this.state.res, this.state.slider); - this.setState({ slider: val }); - this.showRadarLayer(this.state.res, val); - } - - initMap() { - const { lng, lat, zoom } = this.state; - - this.map = new mapboxgl.Map({ - container: this.mapContainer, - style: 'mapbox://styles/mapbox/dark-v9', - maxZoom: 10, - minZoom: 5, - center: [lng, lat], - zoom: zoom, - hash: false - }); - - this.map.on('style.load', () => { - this.setState({ - mapLoaded: true - }); - if (this.state.imgs !== null) { - this.loadSources(); - } - }); - - this.map.on('zoom', () => { - const zoomIn = this.map.getZoom() > 7; - const from = zoomIn ? '280' : '140'; - const to = zoomIn ? '140' : '280'; - if (to !== this.state.res) { - this.hideRadarLayer(from, this.state.slider); - this.showRadarLayer(to, this.state.slider); - this.setState({ res: to }); - } - }); - } - - componentDidMount() { - this.loadRadarData(); - this.initMap(); - } - - getDateTime() { - const {imgs, res, slider} = this.state; - - if (imgs === null) { - return null; - } - - const ds = imgs[res][slider].substr(5, 13); - return DateTime.fromFormat(ds, 'yyyyMMdd/HHmm', {zone: 'utc'}).setZone('Asia/Jerusalem'); - } - - render() { - const handleStyle = { - height: 40, - width: 40, - border: 0, - marginTop: -10, - marginLeft: -20, - boxShadow: '.5px .5px 2px 1px rgba(0,0,0,.32)' - } - - const railStyle = { - height: 20, - backgroundColor: '#3498db' - } - - const trackStyle={ - display: 'none' - } - - const datetime = this.getDateTime(); - console.log(datetime); - const date = datetime ? datetime.toFormat('y-MM-dd') : ''; - const time = datetime ? datetime.toFormat('HH:mm') : ''; - - return ( -
-
this.mapContainer = el} className="absolute top right left bottom" /> -
-
{ date }
-
{ time }
-
-
- this.onChangeSlider(val)}/> -
-
- ); - } -} - -export default App; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index a754b20..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/Geshem.css b/src/Geshem.css new file mode 100644 index 0000000..22915d6 --- /dev/null +++ b/src/Geshem.css @@ -0,0 +1,33 @@ +#map { + position: absolute; + top: 0; + bottom: 0; + width: 100%; +} + +#datetime { + position: absolute; + margin: 20px 0px 0px 20px; + color: white; + font-family: monospace; +} +#date { + font-size: 1.4em; +} +#time { + font-size: 1.8em; +} + +#slider { + position: absolute; + bottom: 8vh; + width: 30vw; + margin-left: 35vw; +} + +@media only screen and (max-device-width: 812px) { + #slider { + width: 80vw; + margin-left: 8vw; + } +} diff --git a/src/Geshem.js b/src/Geshem.js new file mode 100644 index 0000000..4bb90b5 --- /dev/null +++ b/src/Geshem.js @@ -0,0 +1,206 @@ +import React, { Component } from 'react'; +import Slider from 'rc-slider'; +import { DateTime } from 'luxon'; +import axios from 'axios'; +import mapboxgl from 'mapbox-gl'; + +import './Geshem.css'; +import 'mapbox-gl/dist/mapbox-gl.css'; +import 'rc-slider/assets/index.css'; + +mapboxgl.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw'; + +const IMGS_BASE_URL = 'https://imgs.geshem.space/' + + +class Geshem extends Component { + + constructor(props) { + super(props); + this.state = { + mapLoaded: false, + imgs: null, + res: 280, + slider: 9, + lng: 35, + lat: 31.9, + zoom: 6.3, + 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] + ] + }, + }; + } + + loadSources() { + const { imgs } = this.state; + let i = 0; + while (i < imgs['140'].length) { + this.addRadarSource('140', i, imgs['140'][i]) + this.addRadarLayer('140', i++) + } + i = 0; + while (i < imgs['280'].length) { + this.addRadarSource('280', i, imgs['280'][i]) + this.addRadarLayer('280', i++) + } + this.showRadarLayer('280', 9) + } + + loadRadarData() { + axios({ + url: IMGS_BASE_URL + 'imgs.json', + method: 'get', + }).then((res) => { + this.setState({ + imgs: res.data + }) + if (this.state.mapLoaded) { + this.loadSources(); + } + }).catch(function(error) { + console.log(error) + }) + } + + addRadarSource(res, i, url) { + this.map.addSource(`radar-${res}-${i}`, { + type: 'image', + url: IMGS_BASE_URL + url, + coordinates: this.state.rasterCoords[res] + }) + } + + addRadarLayer(res, i) { + this.map.addLayer({ + id: `radar-${res}-${i}`, + source: `radar-${res}-${i}`, + type: 'raster', + paint: { + 'raster-opacity': 0, + 'raster-opacity-transition': { + 'duration': 0 + } + } + }) + } + + showRadarLayer(res, i) { + this.map.setPaintProperty(`radar-${res}-${i}`, 'raster-opacity', 0.85); + } + + hideRadarLayer(res, i) { + this.map.setPaintProperty(`radar-${res}-${i}`, 'raster-opacity', 0); + } + + removeRadarLayer(res, i) { + this.map.removeLayer(`radar-${res}-${i}`) + } + + onChangeSlider(val) { + this.hideRadarLayer(this.state.res, this.state.slider); + this.setState({ slider: val }); + this.showRadarLayer(this.state.res, val); + } + + initMap() { + const { lng, lat, zoom } = this.state; + + this.map = new mapboxgl.Map({ + container: this.mapContainer, + style: 'mapbox://styles/mapbox/dark-v9', + maxZoom: 10, + minZoom: 5, + center: [lng, lat], + zoom: zoom, + hash: false + }); + + this.map.on('style.load', () => { + this.setState({ + mapLoaded: true + }); + if (this.state.imgs !== null) { + this.loadSources(); + } + }); + + this.map.on('zoom', () => { + const zoomIn = this.map.getZoom() > 7; + const from = zoomIn ? '280' : '140'; + const to = zoomIn ? '140' : '280'; + if (to !== this.state.res) { + this.hideRadarLayer(from, this.state.slider); + this.showRadarLayer(to, this.state.slider); + this.setState({ res: to }); + } + }); + } + + componentDidMount() { + this.loadRadarData(); + this.initMap(); + } + + getDateTime() { + const {imgs, res, slider} = this.state; + + if (imgs === null) { + return null; + } + + const ds = imgs[res][slider].substr(5, 13); + return DateTime.fromFormat(ds, 'yyyyMMdd/HHmm', {zone: 'utc'}).setZone('Asia/Jerusalem'); + } + + render() { + const handleStyle = { + height: 40, + width: 40, + border: 0, + marginTop: -10, + marginLeft: -20, + boxShadow: '.5px .5px 2px 1px rgba(0,0,0,.32)' + } + + const railStyle = { + height: 20, + backgroundColor: '#3498db' + } + + const trackStyle={ + display: 'none' + } + + const datetime = this.getDateTime(); + console.log(datetime); + const date = datetime ? datetime.toFormat('y-MM-dd') : ''; + const time = datetime ? datetime.toFormat('HH:mm') : ''; + + return ( +
+
this.mapContainer = el} className="absolute top right left bottom" /> +
+
{ date }
+
{ time }
+
+
+ this.onChangeSlider(val)}/> +
+
+ ); + } +} + +export default Geshem; diff --git a/src/Geshem.test.js b/src/Geshem.test.js new file mode 100644 index 0000000..185b1f4 --- /dev/null +++ b/src/Geshem.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Geshem from './Geshem'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/src/index.css b/src/index.css index cee5f34..6c06094 100644 --- a/src/index.css +++ b/src/index.css @@ -1,14 +1,10 @@ body { margin: 0; padding: 0; + user-select: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; -} diff --git a/src/index.js b/src/index.js index 0c5e75d..a27f6af 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,9 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; +import Geshem from './Geshem'; import * as serviceWorker from './serviceWorker'; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: http://bit.ly/CRA-PWA serviceWorker.unregister(); -- cgit v1.3.1