From b8c2848e6b38c5aaafbe307494865066c748fff8 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Sat, 17 Nov 2018 15:46:12 +0200 Subject: Initial v4.0 - migrate back to React --- src/App.css | 31 ++++++++ src/App.js | 206 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/App.test.js | 9 +++ src/index.css | 14 ++++ src/index.js | 12 +++ src/logo.svg | 7 ++ src/serviceWorker.js | 135 +++++++++++++++++++++++++++++++++ 7 files changed, 414 insertions(+) create mode 100644 src/App.css create mode 100644 src/App.js create mode 100644 src/App.test.js create mode 100644 src/index.css create mode 100644 src/index.js create mode 100644 src/logo.svg create mode 100644 src/serviceWorker.js (limited to 'src') diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..1e83715 --- /dev/null +++ b/src/App.css @@ -0,0 +1,31 @@ +#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) { + width: 80vw; + margin-left: 8vw; + } */ +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..39953d7 --- /dev/null +++ b/src/App.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 './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 new file mode 100644 index 0000000..a754b20 --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,9 @@ +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/index.css b/src/index.css new file mode 100644 index 0000000..cee5f34 --- /dev/null +++ b/src/index.css @@ -0,0 +1,14 @@ +body { + margin: 0; + padding: 0; + 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 new file mode 100644 index 0000000..0c5e75d --- /dev/null +++ b/src/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import * as serviceWorker from './serviceWorker'; + +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(); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/serviceWorker.js b/src/serviceWorker.js new file mode 100644 index 0000000..2283ff9 --- /dev/null +++ b/src/serviceWorker.js @@ -0,0 +1,135 @@ +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read http://bit.ly/CRA-PWA + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export function register(config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit http://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + +function registerValidSW(swUrl, config) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl, config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + if ( + response.status === 404 || + (contentType != null && contentType.indexOf('javascript') === -1) + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} -- cgit v1.3.1