add Watchtools basics
This commit is contained in:
parent
35ee5cc61e
commit
3c1fb0ead9
260
src/components/ModWatchtools.jsx
Normal file
260
src/components/ModWatchtools.jsx
Normal file
|
@ -0,0 +1,260 @@
|
||||||
|
/*
|
||||||
|
* ModWatchtools
|
||||||
|
* Tools to check who placed what where
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useSelector, shallowEqual } from 'react-redux';
|
||||||
|
import { t } from 'ttag';
|
||||||
|
|
||||||
|
const keepState = {
|
||||||
|
tlcoords: '',
|
||||||
|
brcoords: '',
|
||||||
|
interval: '15m',
|
||||||
|
iid: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
function parseInterval(interval) {
|
||||||
|
if (!interval) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const lastChar = interval.slice(-1).toLowerCase();
|
||||||
|
const num = parseInt(interval.slice(0, -1), 10);
|
||||||
|
if (Number.isNaN(num) || num <= 0 || num > 600
|
||||||
|
|| !['s', 'm', 'h'].includes(lastChar)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
let factor = 1000;
|
||||||
|
if (lastChar === 'm') {
|
||||||
|
factor *= 60;
|
||||||
|
} else if (lastChar === 'h') {
|
||||||
|
factor *= 3600;
|
||||||
|
}
|
||||||
|
return Date.now() - (num * factor);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submitWatchAction(
|
||||||
|
action,
|
||||||
|
canvas,
|
||||||
|
tlcoords,
|
||||||
|
brcoords,
|
||||||
|
interval,
|
||||||
|
iid,
|
||||||
|
callback,
|
||||||
|
) {
|
||||||
|
const time = parseInterval(interval);
|
||||||
|
if (!time) {
|
||||||
|
callback({ info: t`Interval is invalid` });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const data = new FormData();
|
||||||
|
data.append('watchaction', action);
|
||||||
|
data.append('ulcoor', tlcoords);
|
||||||
|
data.append('brcoor', brcoords);
|
||||||
|
data.append('time', time);
|
||||||
|
data.append('iid', iid);
|
||||||
|
try {
|
||||||
|
const resp = await fetch('./api/modtools', {
|
||||||
|
credentials: 'include',
|
||||||
|
method: 'POST',
|
||||||
|
body: data,
|
||||||
|
});
|
||||||
|
const ret = await resp.json();
|
||||||
|
callback(await ret);
|
||||||
|
} catch (err) {
|
||||||
|
callback({
|
||||||
|
info: `Error: ${err.message}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function ModWatchtools() {
|
||||||
|
const [selectedCanvas, selectCanvas] = useState(0);
|
||||||
|
const [tlcoords, selectTLCoords] = useState(keepState.tlcoords);
|
||||||
|
const [brcoords, selectBRCoords] = useState(keepState.brcoords);
|
||||||
|
const [interval, selectInterval] = useState(keepState.interval);
|
||||||
|
const [iid, selectIid] = useState(keepState.iid);
|
||||||
|
const [resp, setResp] = useState(null);
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
|
||||||
|
const [
|
||||||
|
canvasId,
|
||||||
|
canvases,
|
||||||
|
] = useSelector((state) => [
|
||||||
|
state.canvas.canvasId,
|
||||||
|
state.canvas.canvases,
|
||||||
|
], shallowEqual);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
selectCanvas(canvasId);
|
||||||
|
}, [canvasId]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
|
||||||
|
{resp && (
|
||||||
|
<div style={{
|
||||||
|
borderStyle: 'solid',
|
||||||
|
borderColor: '#D4D4D4',
|
||||||
|
borderWidth: 2,
|
||||||
|
padding: 5,
|
||||||
|
display: 'inline-block',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{resp.split('\n').map((line) => (
|
||||||
|
<p className="modaltext">
|
||||||
|
{line}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
<span
|
||||||
|
role="button"
|
||||||
|
tabIndex={-1}
|
||||||
|
className="modallink"
|
||||||
|
onClick={() => setResp(null)}
|
||||||
|
>
|
||||||
|
{t`Close`}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<p className="modalcotext">{t`Check who placed in an area`}</p>
|
||||||
|
<p className="modalcotext">{t`Canvas`}:
|
||||||
|
<select
|
||||||
|
value={selectedCanvas}
|
||||||
|
onChange={(e) => {
|
||||||
|
const sel = e.target;
|
||||||
|
selectCanvas(sel.options[sel.selectedIndex].value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
Object.keys(canvases).map((canvas) => ((canvases[canvas].v)
|
||||||
|
? null
|
||||||
|
: (
|
||||||
|
<option
|
||||||
|
value={canvas}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
canvases[canvas].title
|
||||||
|
}
|
||||||
|
</option>
|
||||||
|
)))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
{` ${t`Interval`}: `}
|
||||||
|
<input
|
||||||
|
value={interval}
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '5em',
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
placeholder="15m"
|
||||||
|
onChange={(evt) => {
|
||||||
|
const newInterval = evt.target.value.trim();
|
||||||
|
selectInterval(newInterval);
|
||||||
|
keepState.interval = newInterval;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{` ${t`IID (optional)`}: `}
|
||||||
|
<input
|
||||||
|
value={iid}
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '10em',
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
placeholder="xxxx-xxxxx-xxxx"
|
||||||
|
onChange={(evt) => {
|
||||||
|
const newIid = evt.target.value.trim();
|
||||||
|
selectIid(newIid);
|
||||||
|
keepState.iid = newIid;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
<p className="modalcotext">
|
||||||
|
{t`Top-left corner`} (X_Y):
|
||||||
|
<input
|
||||||
|
value={tlcoords}
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '15em',
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
placeholder="X_Y"
|
||||||
|
onChange={(evt) => {
|
||||||
|
const co = evt.target.value.trim();
|
||||||
|
selectTLCoords(co);
|
||||||
|
keepState.tlcoords = co;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
<p className="modalcotext">
|
||||||
|
{t`Bottom-right corner`} (X_Y):
|
||||||
|
<input
|
||||||
|
value={brcoords}
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '15em',
|
||||||
|
}}
|
||||||
|
type="text"
|
||||||
|
placeholder="X_Y"
|
||||||
|
onChange={(evt) => {
|
||||||
|
const co = evt.target.value.trim();
|
||||||
|
selectBRCoords(co);
|
||||||
|
keepState.brcoords = co;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
if (submitting) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSubmitting(true);
|
||||||
|
submitWatchAction(
|
||||||
|
'all',
|
||||||
|
selectedCanvas,
|
||||||
|
tlcoords,
|
||||||
|
brcoords,
|
||||||
|
interval,
|
||||||
|
iid,
|
||||||
|
(ret) => {
|
||||||
|
setSubmitting(false);
|
||||||
|
setResp(ret.info);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{(submitting) ? '...' : t`Get Pixels`}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
if (submitting) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSubmitting(true);
|
||||||
|
submitWatchAction(
|
||||||
|
'summary',
|
||||||
|
selectedCanvas,
|
||||||
|
tlcoords,
|
||||||
|
brcoords,
|
||||||
|
interval,
|
||||||
|
iid,
|
||||||
|
(ret) => {
|
||||||
|
setSubmitting(false);
|
||||||
|
setResp(ret.info);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{(submitting) ? '...' : t`Get Users`}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(ModWatchtools);
|
|
@ -5,13 +5,15 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
|
|
||||||
import ModCanvastools from './ModCanvastools';
|
import Canvastools from './ModCanvastools';
|
||||||
import Admintools from './Admintools';
|
import Admintools from './Admintools';
|
||||||
|
import Watchtools from './ModWatchtools';
|
||||||
|
|
||||||
|
|
||||||
const CONTENT = {
|
const CONTENT = {
|
||||||
Canvas: ModCanvastools,
|
Canvas: Canvastools,
|
||||||
Admin: Admintools,
|
Admin: Admintools,
|
||||||
|
Watch: Watchtools,
|
||||||
};
|
};
|
||||||
|
|
||||||
function Modtools() {
|
function Modtools() {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user