diff --git a/mapper/src/App.js b/mapper/src/App.js
index 300b414..59132f4 100644
--- a/mapper/src/App.js
+++ b/mapper/src/App.js
@@ -22,6 +22,22 @@ const durations = [
{id: 3, len: 'Year', win: '2h', full: '2 hour', delta: [1, 'years'], format: 'M/D', num: 4380, secs: 7200},
];
+const parseSlider = (end, duration, slider) => {
+ //console.log(slider);
+ // good luck remembering how this works
+ const lowOffset = slider[0] * duration.secs - duration.num * duration.secs;
+ const highOffset = slider[1] * duration.secs - duration.num * duration.secs;
+
+ const low = moment.unix(end.unix() + lowOffset);
+ const high = moment.unix(end.unix() + highOffset);
+
+ const lowStr = low.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+ const highStr = high.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+
+ //console.log(lowStr, highStr);
+ return [lowStr, highStr];
+};
+
function useSensor(measurement, name, end, duration) {
const [data, setData] = useState(false);
const [loading, setLoading] = useState(false);
@@ -51,9 +67,11 @@ function useSensor(measurement, name, end, duration) {
-function Owntracks({end, duration, range}) {
+function Owntracks({end, duration, slider}) {
const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration);
+ const range = parseSlider(end, duration, slider);
+
const coords = data.length ? data.filter(x => !range || (x.time >= range[0] && x.time <= range[1])).map(({ lat, lon }) => [lat, lon]).filter(([lat, lon]) => lat !== null || lon !== null) : [];
const handleSubmit = (e) => {
@@ -90,73 +108,89 @@ function Owntracks({end, duration, range}) {
}
-function Graphs({end, duration, range}) {
+function Graphs({end, duration, slider}) {
return (
-
+
);
}
-function Menu({duration, setDuration, end, setEnd, range, setRange}) {
+function Menu({duration, setDuration, end, setEnd, slider, setSlider}) {
const [submenu, setSubmenu] = useState(false);
const [showRange, setShowRange] = useState(false);
const chooseDuration = (x) => {
setSubmenu(false);
- setRange(false);
+ setSlider([0, x.num]);
setDuration(x);
};
const chooseEnd = (x) => {
setSubmenu(false);
const newEnd = x.add(...duration.delta);
- setRange(false);
+ setSlider([0, duration.num]);
setEnd(newEnd);
};
const chooseNow = (x) => {
setSubmenu(false);
- setRange(false);
+ setSlider([0, duration.num]);
setEnd(moment());
};
+ const rangeStart = (x) => {
+ setEnd(moment(range[0]).add(...duration.delta));
+ setSlider([0, duration.num]);
+ };
+
+ const rangeEnd = (x) => {
+ setEnd(moment(range[1]));
+ setSlider([0, duration.num]);
+ };
+
const next = () => {
setSubmenu(false);
- setRange(false);
+ setSlider([0, duration.num]);
setEnd(prevEnd => moment(prevEnd).add(...duration.delta));
}
const prev = () => {
setSubmenu(false);
- setRange(false);
+ setSlider([0, duration.num]);
setEnd(prevEnd => moment(prevEnd).subtract(...duration.delta));
}
- const onSlider = (slider) => {
- console.log(slider);
- // good luck remembering how this works
- const lowOffset = slider[0] * duration.secs - duration.num * duration.secs;
- const highOffset = slider[1] * duration.secs - duration.num * duration.secs;
+ const range = parseSlider(end, duration, slider);
- const low = moment.unix(end.unix() + lowOffset);
- const high = moment.unix(end.unix() + highOffset);
-
- const lowStr = low.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
- const highStr = high.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-
- console.log(lowStr, highStr);
- setRange([lowStr, highStr]);
-
- }
+ const rangeTime = (x) => {
+ if (new Date().getTimezoneOffset()) { // non-librewolf browser
+ return moment(x).format('lll'); // default to browser's TZ
+ } else {
+ return moment(x).tz('America/Edmonton').format('lll');
+ }
+ };
return (
- {showRange &&
- {moment(range[0]).format('lll')} - {moment(range[1]).format('lll')}
+ {(showRange || !!submenu) &&
+ {rangeTime(range[0])} - {rangeTime(range[1])}
}
- {submenu ?
+
+ setShowRange(true)}
+ onThumbDragEnd={() => setShowRange(false)}
+ onRangeDragStart={() => setShowRange(true)}
+ onRangeDragEnd={() => setShowRange(false)}
+ />
+
+
+ {!!submenu &&
{submenu === 'end' &&
<>
@@ -174,6 +208,8 @@ function Menu({duration, setDuration, end, setEnd, range, setRange}) {
+
+
>
}
@@ -190,20 +226,6 @@ function Menu({duration, setDuration, end, setEnd, range, setRange}) {
>
}
- :
-
- setShowRange(true)}
- onThumbDragEnd={() => setShowRange(false)}
- onRangeDragStart={() => setShowRange(true)}
- onRangeDragEnd={() => setShowRange(false)}
- />
-
-
}
@@ -232,7 +254,7 @@ function Menu({duration, setDuration, end, setEnd, range, setRange}) {
function App() {
const [duration, setDuration] = useState(durations[0]);
const [end, setEnd] = useState(moment());
- const [range, setRange] = useState(false);
+ const [slider, setSlider] = useState([0, duration.num]);
return (
@@ -241,14 +263,14 @@ function App() {
setDuration={setDuration}
end={end}
setEnd={setEnd}
- range={range}
- setRange={setRange}
+ slider={slider}
+ setSlider={setSlider}
/>
);