From 8d3bf429c7552e06eede124e19960380d15b2086 Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Fri, 15 Feb 2019 09:50:42 +0100 Subject: [PATCH 01/14] add proxy to prod --- package.json | 4 ++-- src/actions.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 3282a02..baac8c8 100644 --- a/package.json +++ b/package.json @@ -155,7 +155,7 @@ }, "proxy": { "/bootstrap/": { - "target": "https://nxt3.staging.lizard.net/", + "target": "https://ijgenzon.lizard.net/", "changeOrigin": true, "ssl": false, "secure": false, @@ -165,7 +165,7 @@ } }, "/api/v3/": { - "target": "https://nxt3.staging.lizard.net/", + "target": "https://ijgenzon.lizard.net/", "changeOrigin": true, "ssl": false, "secure": false, diff --git a/src/actions.js b/src/actions.js index 20ff22b..6e2ba15 100644 --- a/src/actions.js +++ b/src/actions.js @@ -142,7 +142,7 @@ export function fetchBootstrap(dispatch, sessionState) { dispatch(fetchBootstrapAction()); - getBootstrap("parramatta-dashboard").then( + getBootstrap("tomdeboer").then( bootstrap => { dispatch(receiveBootstrapSuccessAction(bootstrap)); }, From 659de33816001b83ee360b1d99aecc79716cd6ba Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Fri, 15 Feb 2019 15:49:57 +0100 Subject: [PATCH 02/14] add timer first try --- src/App.js | 27 +++++++++++++++++++++++++-- src/actions.js | 30 ++++++++++++++++++++++++++++++ src/components/GridLayout.js | 15 +++++++++++---- src/reducers.js | 7 +++++++ 4 files changed, 73 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index cfba327..639ad9f 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,7 @@ import FullLayout from "./components/FullLayout"; import { connect } from "react-redux"; import { Route, withRouter } from "react-router-dom"; -import { fetchAlarms } from "./actions"; +import { fetchAlarms, setDateTimeAction } from "./actions"; import styles from "./App.css"; class App extends Component { @@ -12,6 +12,28 @@ class App extends Component { if (!this.props.iframeModeActive) { this.props.fetchAlarms(); } + + const props = this.props; + + setInterval(function() { + console.log("increment timer _____ ", new Date()); + + const jsDateObject = new Date(); + const dateStr = + jsDateObject.getUTCFullYear() + + "-" + + (jsDateObject.getUTCMonth() + 1) + + "-" + + jsDateObject.getUTCDate(); + const timeStr = + jsDateObject.getUTCHours() + ":" + jsDateObject.getUTCMinutes(); + + props.setDateTimeAction(dateStr, timeStr); + + // store.dispatch({ + // type : 'INCREMENT_TIMER' + // }) + }, 50000); } render() { @@ -32,7 +54,8 @@ function mapStateToProps(state) { function mapDispatchToProps(dispatch) { return { - fetchAlarms: () => fetchAlarms(dispatch) + fetchAlarms: () => fetchAlarms(dispatch), + setDateTimeAction: (date, time) => setDateTimeAction(dispatch) }; } diff --git a/src/actions.js b/src/actions.js index 85e7514..5237c75 100644 --- a/src/actions.js +++ b/src/actions.js @@ -23,6 +23,7 @@ export const RECEIVE_BOOTSTRAP_SUCCESS = "RECEIVE_BOOTSTRAP_SUCCESS"; export const RECEIVE_BOOTSTRAP_ERROR = "RECEIVE_BOOTSTRAP_ERROR"; // SettingsActions +export const SET_DATE_TIME = "SET_DATE_TIME"; export const SET_DATE = "SET_DATE"; export const SET_TIME = "SET_TIME"; export const RESET_DATETIME = "RESET_DATETIME"; @@ -45,6 +46,24 @@ const setIframeModeAction = bool => { }; }; +// setInterval( function() { +// console.log('increment timer _____ ', new Date()) + +// const jsDateObject = new Date(); +// const dateStr = jsDateObject.getUTCFullYear() + '-' + (jsDateObject.getUTCMonth() + 1 ) + '-' jsDateObject.getUTCDate(); +// const timeStr = jsDateObject.getUTCHours() + ':' + jsDateObject.getUTCMinutes(); + +// setDateTimeAction( +// dateStr, +// timeStr +// ); + +// // store.dispatch({ +// // type : 'INCREMENT_TIMER' +// // }) + +// }, 50000 ) + export function setIframeMode(dispatch, mustSetIframeMode) { dispatch(setIframeModeAction(mustSetIframeMode)); } @@ -201,6 +220,17 @@ const receiveRasterEventsAction = (uuid, geomKey, start, end, events) => { }; }; +export const setDateTimeAction = function(dispatch) { + return (date, time) => + dispatch({ + type: SET_DATE_TIME, + data: { + data: date, + time: time + } + }); +}; + export const setDateAction = function(dispatch) { return date => dispatch({ diff --git a/src/components/GridLayout.js b/src/components/GridLayout.js index 6f64a42..909eae0 100644 --- a/src/components/GridLayout.js +++ b/src/components/GridLayout.js @@ -162,8 +162,10 @@ class GridLayout extends Component { type="date" name="date" value={this.props.date} - onChange={event => - this.props.changeDate(event.target.value)} + onChange={event => { + console.log(event.target.value); + this.props.changeDate(event.target.value); + }} />
@@ -172,8 +174,13 @@ class GridLayout extends Component { type="time" name="time" value={this.props.time} - onChange={event => - this.props.changeTime(event.target.value)} + onChange={event => { + console.log( + "this.props.changeTime", + event.target.value + ); + this.props.changeTime(event.target.value); + }} />
diff --git a/src/reducers.js b/src/reducers.js index 08dfcc6..a097563 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -7,6 +7,7 @@ import { RECEIVE_TIMESERIES_EVENTS, FETCH_RASTER_EVENTS, RECEIVE_RASTER_EVENTS, + SET_DATE_TIME, SET_DATE, SET_TIME, RESET_DATETIME, @@ -217,6 +218,12 @@ function settings( action ) { switch (action.type) { + case SET_DATE_TIME: + return { + ...state, + configuredDate: action.data.date, + configuredTime: action.data.time + }; case SET_DATE: return { ...state, configuredDate: action.date }; case SET_TIME: From 2db9c6d8d6166f4f11f5ab224b6432fe2278c0c5 Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Fri, 22 Feb 2019 15:49:45 +0100 Subject: [PATCH 03/14] fix dispatcher --- src/App.js | 6 ++++-- src/actions.js | 7 +++++-- src/components/GridLayout.js | 6 ++++++ src/reducers.js | 2 ++ 4 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 639ad9f..ca69948 100644 --- a/src/App.js +++ b/src/App.js @@ -28,12 +28,14 @@ class App extends Component { const timeStr = jsDateObject.getUTCHours() + ":" + jsDateObject.getUTCMinutes(); + console.log("setInterval 5", dateStr, timeStr); + props.setDateTimeAction(dateStr, timeStr); // store.dispatch({ // type : 'INCREMENT_TIMER' // }) - }, 50000); + }, 15000); } render() { @@ -55,7 +57,7 @@ function mapStateToProps(state) { function mapDispatchToProps(dispatch) { return { fetchAlarms: () => fetchAlarms(dispatch), - setDateTimeAction: (date, time) => setDateTimeAction(dispatch) + setDateTimeAction: (date, time) => setDateTimeAction(dispatch)(date, time) }; } diff --git a/src/actions.js b/src/actions.js index 5237c75..0a289db 100644 --- a/src/actions.js +++ b/src/actions.js @@ -221,14 +221,17 @@ const receiveRasterEventsAction = (uuid, geomKey, start, end, events) => { }; export const setDateTimeAction = function(dispatch) { - return (date, time) => + console.log("setDateTimeAction 1"); + return (date, time) => { + console.log("setDateTimeAction 2"); dispatch({ type: SET_DATE_TIME, data: { - data: date, + date: date, time: time } }); + }; }; export const setDateAction = function(dispatch) { diff --git a/src/components/GridLayout.js b/src/components/GridLayout.js index 909eae0..208e140 100644 --- a/src/components/GridLayout.js +++ b/src/components/GridLayout.js @@ -71,6 +71,7 @@ class GridLayout extends Component { } render() { + console.log("render gridlayout 1"); const { width, height, settingsMenu, settingsMenuId } = this.state; const { tiles, history } = this.props; @@ -399,6 +400,11 @@ class GridLayout extends Component { } const mapStateToProps = (state, ownProps) => { + console.log( + "mapStateToProps gridlayout", + getConfiguredDate(state), + getConfiguredTime(state) + ); return { session: state.session, tiles: getAllTiles(state), diff --git a/src/reducers.js b/src/reducers.js index a097563..d0bfc78 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -217,8 +217,10 @@ function settings( }, action ) { + console.log("reducer settings", action); switch (action.type) { case SET_DATE_TIME: + console.log("reducer 2 settings", action); return { ...state, configuredDate: action.data.date, From 1fe8455327159d5e56446ca813ecc5dc0dddc9ee Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Fri, 22 Feb 2019 16:42:37 +0100 Subject: [PATCH 04/14] refresh every minute --- src/App.js | 18 +++++++----------- src/components/TimeseriesChart.js | 2 ++ 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index ca69948..f368f65 100644 --- a/src/App.js +++ b/src/App.js @@ -15,27 +15,23 @@ class App extends Component { const props = this.props; + // update redux time every minute (60000 miliseconds) because redux only saves time on the minute accurate setInterval(function() { - console.log("increment timer _____ ", new Date()); - const jsDateObject = new Date(); + const utcMinutes = jsDateObject.getUTCMinutes(); + const utcMinutesZeroPrefixed = + utcMinutes < 10 ? "0" + utcMinutes : utcMinutes; + const dateStr = jsDateObject.getUTCFullYear() + "-" + (jsDateObject.getUTCMonth() + 1) + "-" + jsDateObject.getUTCDate(); - const timeStr = - jsDateObject.getUTCHours() + ":" + jsDateObject.getUTCMinutes(); - - console.log("setInterval 5", dateStr, timeStr); + const timeStr = jsDateObject.getUTCHours() + ":" + utcMinutesZeroPrefixed; props.setDateTimeAction(dateStr, timeStr); - - // store.dispatch({ - // type : 'INCREMENT_TIMER' - // }) - }, 15000); + }, 60000); } render() { diff --git a/src/components/TimeseriesChart.js b/src/components/TimeseriesChart.js index 47d2bb5..b467a73 100644 --- a/src/components/TimeseriesChart.js +++ b/src/components/TimeseriesChart.js @@ -629,6 +629,8 @@ class TimeseriesChartComponent extends Component { } render() { + console.log("timeserieschart render 1"); + const { tile } = this.props; const timeseriesEvents = tile.timeseries From a7aeaf76fe2deec2c125dd1a5d24312f0118222b Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Fri, 22 Feb 2019 17:08:51 +0100 Subject: [PATCH 05/14] add static datetime --- src/actions.js | 31 +++++++++++-------------------- src/reducers.js | 41 +++++++++++++++++++++++++++++++++++------ 2 files changed, 46 insertions(+), 26 deletions(-) diff --git a/src/actions.js b/src/actions.js index d52e6a6..df0543a 100644 --- a/src/actions.js +++ b/src/actions.js @@ -26,6 +26,7 @@ export const RECEIVE_BOOTSTRAP_ERROR = "RECEIVE_BOOTSTRAP_ERROR"; export const SET_DATE_TIME = "SET_DATE_TIME"; export const SET_DATE = "SET_DATE"; export const SET_TIME = "SET_TIME"; +export const SET_DATE_TIME_STATIC = "SET_DATE_TIME_STATIC"; export const RESET_DATETIME = "RESET_DATETIME"; export const SET_MAP_BACKGROUND = "SET_MAP_BACKGROUND"; @@ -46,24 +47,6 @@ const setIframeModeAction = bool => { }; }; -// setInterval( function() { -// console.log('increment timer _____ ', new Date()) - -// const jsDateObject = new Date(); -// const dateStr = jsDateObject.getUTCFullYear() + '-' + (jsDateObject.getUTCMonth() + 1 ) + '-' jsDateObject.getUTCDate(); -// const timeStr = jsDateObject.getUTCHours() + ':' + jsDateObject.getUTCMinutes(); - -// setDateTimeAction( -// dateStr, -// timeStr -// ); - -// // store.dispatch({ -// // type : 'INCREMENT_TIMER' -// // }) - -// }, 50000 ) - export function setIframeMode(dispatch, mustSetIframeMode) { dispatch(setIframeModeAction(mustSetIframeMode)); } @@ -222,9 +205,7 @@ const receiveRasterEventsAction = (uuid, geomKey, start, end, events) => { }; export const setDateTimeAction = function(dispatch) { - console.log("setDateTimeAction 1"); return (date, time) => { - console.log("setDateTimeAction 2"); dispatch({ type: SET_DATE_TIME, data: { @@ -235,6 +216,16 @@ export const setDateTimeAction = function(dispatch) { }; }; +export const setDateTimeStaticAction = function(dispatch) { + return isStatic => { + // isStatic = bool + dispatch({ + type: SET_DATE_TIME_STATIC, + data: isStatic + }); + }; +}; + export const setDateAction = function(dispatch) { return date => dispatch({ diff --git a/src/reducers.js b/src/reducers.js index fc95619..a2a8f01 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -10,6 +10,7 @@ import { SET_DATE_TIME, SET_DATE, SET_TIME, + SET_DATE_TIME_STATIC, RESET_DATETIME, SET_MAP_BACKGROUND, RECEIVE_ALARMS, @@ -213,25 +214,53 @@ function settings( state = { configuredDate: null, configuredTime: null, + dateTimeStatic: false, mapBackground: MAP_BACKGROUNDS[1] }, action ) { console.log("reducer settings", action); switch (action.type) { + // the case SET_DATE_TIME_STATIC case is for now not used, but instead done via other existing actions + // anyway it may be used for training module. otherwise it should be removed. + case SET_DATE_TIME_STATIC: + return { + ...state, + dateTimeStatic: action.data + }; case SET_DATE_TIME: console.log("reducer 2 settings", action); + // only update date time is this is not static + // date time is static if the user configured a static date time through settings + if (state.dateTimeStatic === true) { + return state; + } else { + return { + ...state, + configuredDate: action.data.date, + configuredTime: action.data.time + }; + } + + case SET_DATE: return { ...state, - configuredDate: action.data.date, - configuredTime: action.data.time + configuredDate: action.date, + dateTimeStatic: true }; - case SET_DATE: - return { ...state, configuredDate: action.date }; case SET_TIME: - return { ...state, configuredTime: action.time }; + return { + ...state, + configuredTime: action.time, + dateTimeStatic: true + }; case RESET_DATETIME: - return { ...state, configuredDate: null, configuredTime: null }; + return { + ...state, + configuredDate: null, + configuredTime: null, + dateTimeStatic: false + }; case SET_MAP_BACKGROUND: return { ...state, mapBackground: action.mapBackground }; default: From 503cb2d2c4bda86fbdcfcc02e5bf372a248b9ca3 Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Mon, 25 Feb 2019 16:06:49 +0100 Subject: [PATCH 06/14] keep plotly zoomlevel in state --- src/components/TimeseriesChart.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/TimeseriesChart.js b/src/components/TimeseriesChart.js index b467a73..314af4e 100644 --- a/src/components/TimeseriesChart.js +++ b/src/components/TimeseriesChart.js @@ -36,7 +36,9 @@ class TimeseriesChartComponent extends Component { wantedAxes: null, combinedEvents: null, isFinishedFetchingRasterEvents: false, - isFinishedFetchingTimeseriesEvents: false + isFinishedFetchingTimeseriesEvents: false, + // keep xaxis of plotly graph in case data is refreshed by timer but user zoomed in and likes to preserve the zoom level + zoomedXaxis: null }; this._areAllRasterEventsLoaded = this._areAllRasterEventsLoaded.bind(this); @@ -689,6 +691,13 @@ class TimeseriesChartComponent extends Component { const verticalOffset = Math.round(this.props.height / 2) - Math.round(SPINNER_SIZE / 2); + // set Xaxis of state in case user is zoomed in so zooming is preserved if component is updated by time refresh + let tmpLayout = this.getLayout(this.state.wantedAxes, thresholds); + // only set xaxis if it is actually set in state of component + if (this.state.zoomedXaxis) { + tmpLayout.xaxis = this.state.zoomedXaxis; + } + return (
{ + // set Xaxis of state when user zoomes in so zooming is preserved if component is updated by time refresh + this.setState({ zoomedXaxis: figure.layout.xaxis }); + }} /> ) : (
Date: Wed, 27 Feb 2019 11:47:17 +0100 Subject: [PATCH 07/14] update timeseries --- src/actions.js | 6 ++ src/components/TimeseriesChart.js | 141 ++++++++++++++++++------------ 2 files changed, 92 insertions(+), 55 deletions(-) diff --git a/src/actions.js b/src/actions.js index df0543a..52d35df 100644 --- a/src/actions.js +++ b/src/actions.js @@ -165,6 +165,7 @@ export const addTimeseries = (uuid, timeseries) => { }; const fetchTimeseriesEventsAction = (uuid, start, end) => { + console.log("fetchTimeseriesEventsAction 1"); return { type: FETCH_TIMESERIES_EVENTS, uuid, @@ -288,13 +289,18 @@ export function getTimeseriesMetadataAction(uuid) { } export function getTimeseriesEvents(uuid, start, end, params) { + console.log("getTimeseriesEvents 1", start, end); return (dispatch, getState) => { + console.log("getTimeseriesEvents 2"); const timeseriesEvents = getState().timeseriesEvents; const events = timeseriesEvents[uuid]; + console.log("getTimeseriesEvents 2.5 ", events); if (events && events.start === start && events.end === end) { + console.log("getTimeseriesEvents 3"); return; // Up to date. } else if (!events || !events.isFetching) { + console.log("getTimeseriesEvents 4"); // Fetch it dispatch(fetchTimeseriesEventsAction(uuid, start, end)); diff --git a/src/components/TimeseriesChart.js b/src/components/TimeseriesChart.js index 314af4e..9a6b14d 100644 --- a/src/components/TimeseriesChart.js +++ b/src/components/TimeseriesChart.js @@ -104,6 +104,30 @@ class TimeseriesChartComponent extends Component { }); } + componentWillUpdate() { + const currentTime = currentPeriod( + this.props.configuredNow, + this.props.bootstrap + ); + console.log( + "componentWillUpdate currentPeriod", + currentPeriod, + currentTime + ); + + if (this.state.start != currentTime.start) { + this.setState({ + start: currentTime.start, + end: currentTime.end + }); + } + } + + componentDidUpdate() { + console.log("timeseriescharts componentDidUpdate 1"); + this.updateTimeseries(); + } + ///////////////////////////////////////////////////////////////////////////// // Component - custom functions ///////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////// @@ -115,11 +139,18 @@ class TimeseriesChartComponent extends Component { } updateTimeseries() { - (this.props.tile.timeseries || []).map(uuid => - this.props.getTimeseriesEvents(uuid, this.state.start, this.state.end, { - minpoints: MAX_TIMESERIES_POINTS - }) - ); + console.log("updateTimeseries 1"); + (this.props.tile.timeseries || []).map(uuid => { + console.log("updateTimeseries 2"); + return this.props.getTimeseriesEvents( + uuid, + this.state.start, + this.state.end, + { + minpoints: MAX_TIMESERIES_POINTS + } + ); + }); (this.props.tile.rasterIntersections || []).map(intersection => this.props.getRasterEvents( @@ -779,56 +810,6 @@ class TimeseriesChartComponent extends Component { } } -function mapStateToProps(state) { - return { - measuringstations: state.assets.measuringstation || {}, - getRaster: makeGetter(state.rasters), - timeseries: state.timeseries, - rasterEvents: state.rasterEvents, - areRasterEventsLoaded: intersectionUuid => { - let shortIntersectionUuid, theRasterEventsObject; - if (!state.rasterEvents) { - console.log( - "[W] Cannot check for isFetching since state.rasterEvents =", - state.rasterEvents - ); - return null; - } else { - for (let longUuid in state.rasterEvents) { - shortIntersectionUuid = longUuid.slice(0, 7); - if (shortIntersectionUuid === intersectionUuid) { - theRasterEventsObject = Object.values( - state.rasterEvents[longUuid] - )[0]; - return theRasterEventsObject.isFetching === false; - } - } - } - }, - timeseriesEvents: state.timeseriesEvents, - areTimeseriesEventsLoaded: tsUuid => { - if (!state.timeseriesEvents) { - console.log( - "[W] Cannot check for isFetching since state.timeseriesEvents =", - state.timeseriesEvents - ); - return null; - } else { - let theTimeseriesEventsObject; - for (let longUuid in state.timeseriesEvents) { - if (longUuid === tsUuid) { - theTimeseriesEventsObject = state.timeseriesEvents[tsUuid]; - return theTimeseriesEventsObject.isFetching === false; - } - } - } - }, - alarms: state.alarms, - configuredNow: getConfiguredNow(state), - bootstrap: getBootstrap(state) - }; -} - function createVerticalLine( timeInEpoch, color, @@ -904,6 +885,56 @@ function backgroundColorBetweenTwoX( }; } +function mapStateToProps(state) { + return { + measuringstations: state.assets.measuringstation || {}, + getRaster: makeGetter(state.rasters), + timeseries: state.timeseries, + rasterEvents: state.rasterEvents, + areRasterEventsLoaded: intersectionUuid => { + let shortIntersectionUuid, theRasterEventsObject; + if (!state.rasterEvents) { + console.log( + "[W] Cannot check for isFetching since state.rasterEvents =", + state.rasterEvents + ); + return null; + } else { + for (let longUuid in state.rasterEvents) { + shortIntersectionUuid = longUuid.slice(0, 7); + if (shortIntersectionUuid === intersectionUuid) { + theRasterEventsObject = Object.values( + state.rasterEvents[longUuid] + )[0]; + return theRasterEventsObject.isFetching === false; + } + } + } + }, + timeseriesEvents: state.timeseriesEvents, + areTimeseriesEventsLoaded: tsUuid => { + if (!state.timeseriesEvents) { + console.log( + "[W] Cannot check for isFetching since state.timeseriesEvents =", + state.timeseriesEvents + ); + return null; + } else { + let theTimeseriesEventsObject; + for (let longUuid in state.timeseriesEvents) { + if (longUuid === tsUuid) { + theTimeseriesEventsObject = state.timeseriesEvents[tsUuid]; + return theTimeseriesEventsObject.isFetching === false; + } + } + } + }, + alarms: state.alarms, + configuredNow: getConfiguredNow(state), + bootstrap: getBootstrap(state) + }; +} + function mapDispatchToProps(dispatch) { return { addAsset: (assetType, id, instance) => From 9d4be3ca07d21dccc42cfa827d57eff37e521c12 Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Wed, 27 Feb 2019 16:13:40 +0100 Subject: [PATCH 08/14] retrieve alarms when gauge updates --- src/App.js | 22 +++++++++++++++++++++- src/components/FullStatistics.js | 15 ++++++++++++++- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index f368f65..3851d58 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import GridLayout from "./components/GridLayout"; import FullLayout from "./components/FullLayout"; import { connect } from "react-redux"; import { Route, withRouter } from "react-router-dom"; +import { getConfiguredNow } from "./reducers"; import { fetchAlarms, setDateTimeAction } from "./actions"; import styles from "./App.css"; @@ -34,6 +35,24 @@ class App extends Component { }, 60000); } + componentDidUpdate(prevProps) { + console.log( + "app.js componentDidUpdate ", + prevProps.configuredNow, + this.props.configuredNow + ); + if ( + !prevProps.configuredNow || + this.props.configuredNow.getTime() != prevProps.configuredNow.getTime() + ) { + console.log("app.js componentDidUpdate time did change "); + if (!this.props.iframeModeActive) { + console.log("this.props.fetchAlarms() "); + this.props.fetchAlarms(); + } + } + } + render() { return (
@@ -46,7 +65,8 @@ class App extends Component { function mapStateToProps(state) { return { - iframeModeActive: state.iframeMode.active + iframeModeActive: state.iframeMode.active, + configuredNow: getConfiguredNow(state) }; } diff --git a/src/components/FullStatistics.js b/src/components/FullStatistics.js index a1728d2..7b679fd 100644 --- a/src/components/FullStatistics.js +++ b/src/components/FullStatistics.js @@ -3,6 +3,7 @@ import { connect } from "react-redux"; import { Scrollbars } from "react-custom-scrollbars"; import { fetchAlarms } from "../actions"; import { IconActiveAlarmSVG, IconInactiveAlarmSVG } from "./Icons"; +import { getConfiguredNow } from "../reducers"; import styles from "./FullStatistics.css"; @@ -12,6 +13,17 @@ class FullStatistics extends Component { this.props.fetchAlarms(); } } + componentDidUpdate(prevProps) { + console.log("fullstatistics.js componentDidUpdate ", prevProps); + if ( + !prevProps.configuredNow || + this.props.configuredNow.getTime() != prevProps.configuredNow.getTime() + ) { + if (!this.props.iframeModeActive) { + this.props.fetchAlarms(); + } + } + } getDatetimeString(utcRep) { if (utcRep === null) { return null; @@ -98,7 +110,8 @@ class FullStatistics extends Component { const mapStateToProps = (state, ownProps) => { return { alarms: state.alarms, - iframeModeActive: state.iframeMode.active + iframeModeActive: state.iframeMode.active, + configuredNow: getConfiguredNow(state) }; }; From adb3b20449ef5ce872ddfbd50f18e8c9acfde643 Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Thu, 28 Feb 2019 17:33:27 +0100 Subject: [PATCH 09/14] refactor time function --- package.json | 4 ++-- src/App.js | 40 +++++++++++++++++++++++----------------- src/actions.js | 2 +- src/reducers.js | 6 +++++- 4 files changed, 31 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 32c4907..acc6976 100644 --- a/package.json +++ b/package.json @@ -155,7 +155,7 @@ }, "proxy": { "/bootstrap/": { - "target": "https://ijgenzon.lizard.net/", + "target": "https://demo.lizard.net/", "changeOrigin": true, "ssl": false, "secure": false, @@ -165,7 +165,7 @@ } }, "/api/v3/": { - "target": "https://ijgenzon.lizard.net/", + "target": "https://demo.lizard.net/", "changeOrigin": true, "ssl": false, "secure": false, diff --git a/src/App.js b/src/App.js index 3851d58..ed689c3 100644 --- a/src/App.js +++ b/src/App.js @@ -9,30 +9,36 @@ import { fetchAlarms, setDateTimeAction } from "./actions"; import styles from "./App.css"; class App extends Component { + componentWillMount() { + this.setDateTimeActionWithNow(); + const that = this; + // update redux time every minute (60000 miliseconds) because redux only saves time on the minute accurate + setInterval(function() { + that.setDateTimeActionWithNow(); + }, 60000); + } + componentDidMount() { if (!this.props.iframeModeActive) { this.props.fetchAlarms(); } + } - const props = this.props; + setDateTimeActionWithNow() { + const jsDateObject = new Date(); + const utcMinutes = jsDateObject.getUTCMinutes(); + const utcMinutesZeroPrefixed = + utcMinutes < 10 ? "0" + utcMinutes : utcMinutes; - // update redux time every minute (60000 miliseconds) because redux only saves time on the minute accurate - setInterval(function() { - const jsDateObject = new Date(); - const utcMinutes = jsDateObject.getUTCMinutes(); - const utcMinutesZeroPrefixed = - utcMinutes < 10 ? "0" + utcMinutes : utcMinutes; + const dateStr = + jsDateObject.getUTCFullYear() + + "-" + + (jsDateObject.getUTCMonth() + 1) + + "-" + + jsDateObject.getUTCDate(); + const timeStr = jsDateObject.getUTCHours() + ":" + utcMinutesZeroPrefixed; - const dateStr = - jsDateObject.getUTCFullYear() + - "-" + - (jsDateObject.getUTCMonth() + 1) + - "-" + - jsDateObject.getUTCDate(); - const timeStr = jsDateObject.getUTCHours() + ":" + utcMinutesZeroPrefixed; - - props.setDateTimeAction(dateStr, timeStr); - }, 60000); + this.props.setDateTimeAction(dateStr, timeStr); } componentDidUpdate(prevProps) { diff --git a/src/actions.js b/src/actions.js index 52d35df..91bd47b 100644 --- a/src/actions.js +++ b/src/actions.js @@ -144,7 +144,7 @@ export function fetchBootstrap(dispatch, sessionState) { dispatch(fetchBootstrapAction()); - getBootstrap("tomdeboer").then( + getBootstrap("tdb_parra_vnrdsxt574").then( bootstrap => { dispatch(receiveBootstrapSuccessAction(bootstrap)); }, diff --git a/src/reducers.js b/src/reducers.js index a2a8f01..fbffaf7 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -214,6 +214,8 @@ function settings( state = { configuredDate: null, configuredTime: null, + nowDate: null, + nowTime: null, dateTimeStatic: false, mapBackground: MAP_BACKGROUNDS[1] }, @@ -238,7 +240,9 @@ function settings( return { ...state, configuredDate: action.data.date, - configuredTime: action.data.time + configuredTime: action.data.time, + nowDate: action.data.date, + nowTime: action.data.time }; } From 9f0170ebc58fec371e2e93e29a50d5038d3bc60e Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Thu, 28 Feb 2019 17:46:12 +0100 Subject: [PATCH 10/14] remove logs --- src/App.js | 7 ------- src/actions.js | 7 ------- src/components/FullStatistics.js | 1 - src/components/GridLayout.js | 35 +++++++++++++++---------------- src/components/TimeseriesChart.js | 14 ------------- src/reducers.js | 2 -- yarn.lock | 7 ++++++- 7 files changed, 23 insertions(+), 50 deletions(-) diff --git a/src/App.js b/src/App.js index ed689c3..6e791aa 100644 --- a/src/App.js +++ b/src/App.js @@ -42,18 +42,11 @@ class App extends Component { } componentDidUpdate(prevProps) { - console.log( - "app.js componentDidUpdate ", - prevProps.configuredNow, - this.props.configuredNow - ); if ( !prevProps.configuredNow || this.props.configuredNow.getTime() != prevProps.configuredNow.getTime() ) { - console.log("app.js componentDidUpdate time did change "); if (!this.props.iframeModeActive) { - console.log("this.props.fetchAlarms() "); this.props.fetchAlarms(); } } diff --git a/src/actions.js b/src/actions.js index 91bd47b..f5f29ee 100644 --- a/src/actions.js +++ b/src/actions.js @@ -73,7 +73,6 @@ export function fetchAlarms(dispatch) { getRasterAlarms({ active: true, page_size: 1000 }).then( alarms => { - console.log("[P] Received alarms:", alarms); dispatch(receiveAlarmsAction(alarms, false)); }, error => { @@ -165,7 +164,6 @@ export const addTimeseries = (uuid, timeseries) => { }; const fetchTimeseriesEventsAction = (uuid, start, end) => { - console.log("fetchTimeseriesEventsAction 1"); return { type: FETCH_TIMESERIES_EVENTS, uuid, @@ -289,18 +287,13 @@ export function getTimeseriesMetadataAction(uuid) { } export function getTimeseriesEvents(uuid, start, end, params) { - console.log("getTimeseriesEvents 1", start, end); return (dispatch, getState) => { - console.log("getTimeseriesEvents 2"); const timeseriesEvents = getState().timeseriesEvents; const events = timeseriesEvents[uuid]; - console.log("getTimeseriesEvents 2.5 ", events); if (events && events.start === start && events.end === end) { - console.log("getTimeseriesEvents 3"); return; // Up to date. } else if (!events || !events.isFetching) { - console.log("getTimeseriesEvents 4"); // Fetch it dispatch(fetchTimeseriesEventsAction(uuid, start, end)); diff --git a/src/components/FullStatistics.js b/src/components/FullStatistics.js index 7b679fd..079e47c 100644 --- a/src/components/FullStatistics.js +++ b/src/components/FullStatistics.js @@ -14,7 +14,6 @@ class FullStatistics extends Component { } } componentDidUpdate(prevProps) { - console.log("fullstatistics.js componentDidUpdate ", prevProps); if ( !prevProps.configuredNow || this.props.configuredNow.getTime() != prevProps.configuredNow.getTime() diff --git a/src/components/GridLayout.js b/src/components/GridLayout.js index c5eaf5c..ae65bb4 100644 --- a/src/components/GridLayout.js +++ b/src/components/GridLayout.js @@ -71,7 +71,6 @@ class GridLayout extends Component { } render() { - console.log("render gridlayout 1"); const { width, height, settingsMenu, settingsMenuId } = this.state; const { tiles, history } = this.props; @@ -150,7 +149,7 @@ class GridLayout extends Component {
{settingsMenuId === 0 ? ( -
+

Date/time settings   @@ -164,7 +163,6 @@ class GridLayout extends Component { name="date" value={this.props.date} onChange={event => { - console.log(event.target.value); this.props.changeDate(event.target.value); }} /> @@ -176,21 +174,22 @@ class GridLayout extends Component { name="time" value={this.props.time} onChange={event => { - console.log( - "this.props.changeTime", - event.target.value - ); this.props.changeTime(event.target.value); }} />

-
- +
+
) : null} {settingsMenuId === 1 ? ( -
+

Map settings

@@ -212,13 +211,18 @@ class GridLayout extends Component { Switch
-
- +
+
) : null} {settingsMenuId === 2 ? ( -
+

Contact info

@@ -390,11 +394,6 @@ class GridLayout extends Component { } const mapStateToProps = (state, ownProps) => { - console.log( - "mapStateToProps gridlayout", - getConfiguredDate(state), - getConfiguredTime(state) - ); return { session: state.session, tiles: getAllTiles(state), diff --git a/src/components/TimeseriesChart.js b/src/components/TimeseriesChart.js index 9a6b14d..b771c42 100644 --- a/src/components/TimeseriesChart.js +++ b/src/components/TimeseriesChart.js @@ -109,11 +109,6 @@ class TimeseriesChartComponent extends Component { this.props.configuredNow, this.props.bootstrap ); - console.log( - "componentWillUpdate currentPeriod", - currentPeriod, - currentTime - ); if (this.state.start != currentTime.start) { this.setState({ @@ -124,7 +119,6 @@ class TimeseriesChartComponent extends Component { } componentDidUpdate() { - console.log("timeseriescharts componentDidUpdate 1"); this.updateTimeseries(); } @@ -139,9 +133,7 @@ class TimeseriesChartComponent extends Component { } updateTimeseries() { - console.log("updateTimeseries 1"); (this.props.tile.timeseries || []).map(uuid => { - console.log("updateTimeseries 2"); return this.props.getTimeseriesEvents( uuid, this.state.start, @@ -662,8 +654,6 @@ class TimeseriesChartComponent extends Component { } render() { - console.log("timeserieschart render 1"); - const { tile } = this.props; const timeseriesEvents = tile.timeseries @@ -894,10 +884,6 @@ function mapStateToProps(state) { areRasterEventsLoaded: intersectionUuid => { let shortIntersectionUuid, theRasterEventsObject; if (!state.rasterEvents) { - console.log( - "[W] Cannot check for isFetching since state.rasterEvents =", - state.rasterEvents - ); return null; } else { for (let longUuid in state.rasterEvents) { diff --git a/src/reducers.js b/src/reducers.js index fbffaf7..36bdd62 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -221,7 +221,6 @@ function settings( }, action ) { - console.log("reducer settings", action); switch (action.type) { // the case SET_DATE_TIME_STATIC case is for now not used, but instead done via other existing actions // anyway it may be used for training module. otherwise it should be removed. @@ -231,7 +230,6 @@ function settings( dateTimeStatic: action.data }; case SET_DATE_TIME: - console.log("reducer 2 settings", action); // only update date time is this is not static // date time is static if the user configured a static date time through settings if (state.dateTimeStatic === true) { diff --git a/yarn.lock b/yarn.lock index 8cb3295..349c5e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3731,7 +3731,7 @@ ignore@^3.3.3: version "3.3.5" resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.5.tgz#c4e715455f6073a8d7e5dae72d2fc9d71663dba6" -immutable@^3.8.2: +immutable@, immutable@^3.8.2: version "3.8.2" resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3" @@ -4656,6 +4656,11 @@ listr@^0.12.0: stream-to-observable "^0.1.0" strip-ansi "^3.0.1" +lizard-api-client@../lizard-api-client: + version "0.1.0" + dependencies: + immutable "" + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" From 924eb010805c8eea310105bb353b68bd2005ba5a Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Fri, 1 Mar 2019 17:00:10 +0100 Subject: [PATCH 11/14] seperate now and configured time --- src/reducers.js | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/reducers.js b/src/reducers.js index 36bdd62..431393f 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -216,6 +216,7 @@ function settings( configuredTime: null, nowDate: null, nowTime: null, + // dateTimeStatic is curnetly doing nothing. Remove it ? dateTimeStatic: false, mapBackground: MAP_BACKGROUNDS[1] }, @@ -237,8 +238,6 @@ function settings( } else { return { ...state, - configuredDate: action.data.date, - configuredTime: action.data.time, nowDate: action.data.date, nowTime: action.data.time }; @@ -370,26 +369,17 @@ export const getConfiguredTime = function(state) { return state.settings.configuredTime || ""; }; -const _getCurrentDate = function() { - return new Date().toISOString().split("T")[0]; -}; - -const _getCurrentTime = function() { - const isoTimeStr = new Date().toISOString().split("T")[1]; - return isoTimeStr.slice(0, isoTimeStr.length - 1); -}; - export const getConfiguredDateTime = function(state) { let dateResult, timeResult; if (!state.settings.configuredDate && !state.settings.configuredTime) { return null; } else if (!state.settings.configuredDate && state.settings.configuredTime) { - dateResult = _getCurrentDate(); + dateResult = state.settings.nowDate; timeResult = state.settings.configuredTime; } else if (state.settings.configuredDate && !state.settings.configuredTime) { dateResult = state.settings.configuredDate; - timeResult = _getCurrentTime(); + timeResult = state.settings.nowTime; } else { dateResult = state.settings.configuredDate; timeResult = state.settings.configuredTime; From 7b1132c26f374d16e072b432017240f9ba55222a Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Fri, 1 Mar 2019 17:55:09 +0100 Subject: [PATCH 12/14] fix reset bug --- src/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.js b/src/App.js index 6e791aa..a976a18 100644 --- a/src/App.js +++ b/src/App.js @@ -44,6 +44,7 @@ class App extends Component { componentDidUpdate(prevProps) { if ( !prevProps.configuredNow || + (prevProps.configuredNow && !this.props.configuredNow) || this.props.configuredNow.getTime() != prevProps.configuredNow.getTime() ) { if (!this.props.iframeModeActive) { From 86a9dcc73d714dc71ac028d024a7d55f20cf0de3 Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Mon, 4 Mar 2019 10:46:19 +0100 Subject: [PATCH 13/14] always update nowdatetime, always use nowdatetime --- src/reducers.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/reducers.js b/src/reducers.js index 431393f..f13800f 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -231,17 +231,11 @@ function settings( dateTimeStatic: action.data }; case SET_DATE_TIME: - // only update date time is this is not static - // date time is static if the user configured a static date time through settings - if (state.dateTimeStatic === true) { - return state; - } else { - return { - ...state, - nowDate: action.data.date, - nowTime: action.data.time - }; - } + return { + ...state, + nowDate: action.data.date, + nowTime: action.data.time + }; case SET_DATE: return { @@ -373,7 +367,8 @@ export const getConfiguredDateTime = function(state) { let dateResult, timeResult; if (!state.settings.configuredDate && !state.settings.configuredTime) { - return null; + dateResult = state.settings.nowDate; + timeResult = state.settings.nowTime; } else if (!state.settings.configuredDate && state.settings.configuredTime) { dateResult = state.settings.nowDate; timeResult = state.settings.configuredTime; From a4f4209e0e87f92934a28779beb960eed5dcb248 Mon Sep 17 00:00:00 2001 From: Tom de Boer Date: Mon, 4 Mar 2019 10:50:26 +0100 Subject: [PATCH 14/14] remove static time in redux store --- src/actions.js | 11 ----------- src/reducers.js | 19 +++---------------- 2 files changed, 3 insertions(+), 27 deletions(-) diff --git a/src/actions.js b/src/actions.js index f5f29ee..6d7dff6 100644 --- a/src/actions.js +++ b/src/actions.js @@ -26,7 +26,6 @@ export const RECEIVE_BOOTSTRAP_ERROR = "RECEIVE_BOOTSTRAP_ERROR"; export const SET_DATE_TIME = "SET_DATE_TIME"; export const SET_DATE = "SET_DATE"; export const SET_TIME = "SET_TIME"; -export const SET_DATE_TIME_STATIC = "SET_DATE_TIME_STATIC"; export const RESET_DATETIME = "RESET_DATETIME"; export const SET_MAP_BACKGROUND = "SET_MAP_BACKGROUND"; @@ -215,16 +214,6 @@ export const setDateTimeAction = function(dispatch) { }; }; -export const setDateTimeStaticAction = function(dispatch) { - return isStatic => { - // isStatic = bool - dispatch({ - type: SET_DATE_TIME_STATIC, - data: isStatic - }); - }; -}; - export const setDateAction = function(dispatch) { return date => dispatch({ diff --git a/src/reducers.js b/src/reducers.js index f13800f..44db6b8 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -10,7 +10,6 @@ import { SET_DATE_TIME, SET_DATE, SET_TIME, - SET_DATE_TIME_STATIC, RESET_DATETIME, SET_MAP_BACKGROUND, RECEIVE_ALARMS, @@ -216,20 +215,11 @@ function settings( configuredTime: null, nowDate: null, nowTime: null, - // dateTimeStatic is curnetly doing nothing. Remove it ? - dateTimeStatic: false, mapBackground: MAP_BACKGROUNDS[1] }, action ) { switch (action.type) { - // the case SET_DATE_TIME_STATIC case is for now not used, but instead done via other existing actions - // anyway it may be used for training module. otherwise it should be removed. - case SET_DATE_TIME_STATIC: - return { - ...state, - dateTimeStatic: action.data - }; case SET_DATE_TIME: return { ...state, @@ -240,21 +230,18 @@ function settings( case SET_DATE: return { ...state, - configuredDate: action.date, - dateTimeStatic: true + configuredDate: action.date }; case SET_TIME: return { ...state, - configuredTime: action.time, - dateTimeStatic: true + configuredTime: action.time }; case RESET_DATETIME: return { ...state, configuredDate: null, - configuredTime: null, - dateTimeStatic: false + configuredTime: null }; case SET_MAP_BACKGROUND: return { ...state, mapBackground: action.mapBackground };