tanner/sensors
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Allow shifting by time range

Browse Source
This commit is contained in:
Tanner Collin 2024-07-16 01:30:23 +00:00
parent e549afce96
commit e5dbb0af39
1 changed files with 67 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
mapper/src/App.js
View File

@ -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 (
<div className='container'>
<Owntracks end={end} duration={duration} range={range} />
<Owntracks end={end} duration={duration} slider={slider} />
</div>
);
}
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 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 range = parseSlider(end, duration, slider);
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 (
<div className='menu'>
{showRange && <div className='range'>
{moment(range[0]).format('lll')} - {moment(range[1]).format('lll')}
{(showRange || !!submenu) && <div className='range'>
{rangeTime(range[0])} - {rangeTime(range[1])}
</div>}
{submenu ?
<div className='time-slider'>
<RangeSlider
min={0}
max={duration.num}
value={slider}
onInput={setSlider}
onThumbDragStart={() => setShowRange(true)}
onThumbDragEnd={() => setShowRange(false)}
onRangeDragStart={() => setShowRange(true)}
onRangeDragEnd={() => setShowRange(false)}
/>
</div>
{!!submenu &&
<div className='submenu'>
{submenu === 'end' &&
<>
@ -174,6 +208,8 @@ function Menu({duration, setDuration, end, setEnd, range, setRange}) {
</div>
<button onClick={chooseNow}>Jump to Now</button>
<button onClick={rangeStart}>Shift to Range Start</button>
<button onClick={rangeEnd}>Shift to Range End</button>
</>
}
@ -190,20 +226,6 @@ function Menu({duration, setDuration, end, setEnd, range, setRange}) {
</>
}
</div>
:
<div className='time-slider'>
<RangeSlider
min={0}
max={duration.num}
defaultValue={[0, duration.num]}
onInput={onSlider}
onThumbDragStart={() => setShowRange(true)}
onThumbDragEnd={() => setShowRange(false)}
onRangeDragStart={() => setShowRange(true)}
onRangeDragEnd={() => setShowRange(false)}
/>
</div>
}
<div className='menu-container'>
@ -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 (
<div>
@ -241,14 +263,14 @@ function App() {
setDuration={setDuration}
end={end}
setEnd={setEnd}
range={range}
setRange={setRange}
slider={slider}
setSlider={setSlider}
/>
<Graphs
end={end}
duration={duration}
range={range}
slider={slider}
/>
</div>
);