diff --git a/src/components/HelpModal.jsx b/src/components/HelpModal.jsx index d467f50..a723f53 100644 --- a/src/components/HelpModal.jsx +++ b/src/components/HelpModal.jsx @@ -32,6 +32,7 @@ const HelpModal = () => (

Click a color in palette to select

Press G to toggle grid

Press X to toggle showing of pixel activity

+

Press H to toggle historical view

Press R to copy coordinates

Press Q or E to zoom

Press W,A,S, D to move

@@ -45,6 +46,7 @@ const HelpModal = () => (

3D Controls

Press W,A,S, D to move

Press ,,, to move

+

Press E and C to fly up and down

Scroll mouse wheel to zoom

Left click and drag mouse to rotate

Middle click and drag mouse to zoom

diff --git a/src/components/HistorySelect.jsx b/src/components/HistorySelect.jsx index 7223577..87f17aa 100644 --- a/src/components/HistorySelect.jsx +++ b/src/components/HistorySelect.jsx @@ -14,10 +14,18 @@ function dateToString(date) { // YYYYMMDD return timeString; } +function stringToDate(timeString) { + // YYYYMMDD + // eslint-disable-next-line max-len + const date = `${timeString.substr(0, 4)}-${timeString.substr(4, 2)}-${timeString.substr(6, 2)}`; + // YYYY-MM-DD + return date; +} async function getTimes(day, canvasId) { try { - const response = await fetch(`./api/history?day=${day}&id=${canvasId}`); + const date = dateToString(day); + const response = await fetch(`./api/history?day=${date}&id=${canvasId}`); if (response.status !== 200) { return []; } @@ -48,6 +56,7 @@ class HistorySelect extends React.Component { submitting: false, selectedDate: null, selectedTime: null, + times: [], max, }; this.dateSelect = null; @@ -75,7 +84,7 @@ class HistorySelect extends React.Component { canvasId, setTime, } = this.props; - const date = dateToString(evt.target.value); + const date = evt.target.value; const times = await getTimes(date, canvasId); if (times.length === 0) { this.setState({ @@ -117,6 +126,7 @@ class HistorySelect extends React.Component { if (!selectedTime || times.length === 0) { return; } + const { setTime, canvasId, @@ -129,7 +139,7 @@ class HistorySelect extends React.Component { } else { this.dateSelect.stepUp(1); } - selectedDate = dateToString(this.dateSelect.value); + selectedDate = this.dateSelect.value; this.setState({ submitting: true, times: [], @@ -162,18 +172,42 @@ class HistorySelect extends React.Component { const { canvasStartDate, } = this.props; + const { submitting, + max, + } = this.state; + let { times, selectedDate, selectedTime, - max, } = this.state; + + if (!selectedDate) { + const { + historicalDate, + historicalTime, + } = this.props; + + if (historicalDate && historicalTime) { + selectedDate = stringToDate(historicalDate); + selectedTime = historicalTime; + times = [historicalTime]; + + this.setState({ + selectedDate, + selectedTime, + times, + }); + } + } + return (
{ this.dateSelect = ref; }} @@ -193,7 +227,12 @@ class HistorySelect extends React.Component { onChange={this.handleTimeChange} > {times.map((value) => ( - + ))}