parse time in modtools with seconds and milliseconds,
allow URL to be inputed in watch
This commit is contained in:
parent
2bfd556c3c
commit
6479923482
|
@ -7,7 +7,7 @@ import { useSelector, shallowEqual } from 'react-redux';
|
||||||
import { t } from 'ttag';
|
import { t } from 'ttag';
|
||||||
|
|
||||||
import useInterval from './hooks/interval';
|
import useInterval from './hooks/interval';
|
||||||
import { getToday, dateToString } from '../core/utils';
|
import { getToday, dateToString, coordsFromUrl } from '../core/utils';
|
||||||
import { shardOrigin } from '../store/actions/fetch';
|
import { shardOrigin } from '../store/actions/fetch';
|
||||||
|
|
||||||
const keptState = {
|
const keptState = {
|
||||||
|
@ -275,9 +275,12 @@ function ModCanvastools() {
|
||||||
maxWidth: '15em',
|
maxWidth: '15em',
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="X_Y"
|
placeholder="X_Y or URL"
|
||||||
onChange={(evt) => {
|
onChange={(evt) => {
|
||||||
keptState.coords = evt.target.value.trim();
|
let co = evt.target.value.trim();
|
||||||
|
co = coordsFromUrl(co) || co;
|
||||||
|
evt.target.value = co;
|
||||||
|
keptState.coords = co;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
|
@ -328,7 +331,7 @@ function ModCanvastools() {
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
<p>
|
<p>
|
||||||
{t`Top-left corner`} (X_Y):
|
{t`Top-left corner`}:
|
||||||
<input
|
<input
|
||||||
defaultValue={keptState.tlcoords}
|
defaultValue={keptState.tlcoords}
|
||||||
style={{
|
style={{
|
||||||
|
@ -337,15 +340,17 @@ function ModCanvastools() {
|
||||||
maxWidth: '15em',
|
maxWidth: '15em',
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="X_Y"
|
placeholder="X_Y or URL"
|
||||||
onChange={(evt) => {
|
onChange={(evt) => {
|
||||||
const co = evt.target.value.trim();
|
let co = evt.target.value.trim();
|
||||||
|
co = coordsFromUrl(co) || co;
|
||||||
|
evt.target.value = co;
|
||||||
keptState.tlcoords = co;
|
keptState.tlcoords = co;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
{t`Bottom-right corner`} (X_Y):
|
{t`Bottom-right corner`}:
|
||||||
<input
|
<input
|
||||||
defaultValue={keptState.brcoords}
|
defaultValue={keptState.brcoords}
|
||||||
style={{
|
style={{
|
||||||
|
@ -354,9 +359,11 @@ function ModCanvastools() {
|
||||||
maxWidth: '15em',
|
maxWidth: '15em',
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="X_Y"
|
placeholder="X_Y or URL"
|
||||||
onChange={(evt) => {
|
onChange={(evt) => {
|
||||||
const co = evt.target.value.trim();
|
let co = evt.target.value.trim();
|
||||||
|
co = coordsFromUrl(co) || co;
|
||||||
|
evt.target.value = co;
|
||||||
keptState.brcoords = co;
|
keptState.brcoords = co;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -401,7 +408,7 @@ function ModCanvastools() {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<p>
|
<p>
|
||||||
{t`Top-left corner`} (X_Y):
|
{t`Top-left corner`}:
|
||||||
<input
|
<input
|
||||||
defaultValue={keptState.tlrcoords}
|
defaultValue={keptState.tlrcoords}
|
||||||
style={{
|
style={{
|
||||||
|
@ -410,15 +417,17 @@ function ModCanvastools() {
|
||||||
maxWidth: '15em',
|
maxWidth: '15em',
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="X_Y"
|
placeholder="X_Y or URL"
|
||||||
onChange={(evt) => {
|
onChange={(evt) => {
|
||||||
const co = evt.target.value.trim();
|
let co = evt.target.value.trim();
|
||||||
|
co = coordsFromUrl(co) || co;
|
||||||
|
evt.target.value = co;
|
||||||
keptState.tlrcoords = co;
|
keptState.tlrcoords = co;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
{t`Bottom-right corner`} (X_Y):
|
{t`Bottom-right corner`}:
|
||||||
<input
|
<input
|
||||||
defaultValue={keptState.brrcoords}
|
defaultValue={keptState.brrcoords}
|
||||||
style={{
|
style={{
|
||||||
|
@ -427,9 +436,11 @@ function ModCanvastools() {
|
||||||
maxWidth: '15em',
|
maxWidth: '15em',
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="X_Y"
|
placeholder="X_Y or URL"
|
||||||
onChange={(evt) => {
|
onChange={(evt) => {
|
||||||
const co = evt.target.value.trim();
|
let co = evt.target.value.trim();
|
||||||
|
co = coordsFromUrl(co) || co;
|
||||||
|
evt.target.value = co;
|
||||||
keptState.brrcoords = co;
|
keptState.brrcoords = co;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -484,7 +495,7 @@ function ModCanvastools() {
|
||||||
{cleanerStatusString}
|
{cleanerStatusString}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
{t`Top-left corner`} (X_Y):
|
{t`Top-left corner`}:
|
||||||
<input
|
<input
|
||||||
defaultValue={keptState.tlccoords}
|
defaultValue={keptState.tlccoords}
|
||||||
style={{
|
style={{
|
||||||
|
@ -493,15 +504,17 @@ function ModCanvastools() {
|
||||||
maxWidth: '15em',
|
maxWidth: '15em',
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="X_Y"
|
placeholder="X_Y or URL"
|
||||||
onChange={(evt) => {
|
onChange={(evt) => {
|
||||||
const co = evt.target.value.trim();
|
let co = evt.target.value.trim();
|
||||||
|
co = coordsFromUrl(co) || co;
|
||||||
|
evt.target.value = co;
|
||||||
keptState.tlccoords = co;
|
keptState.tlccoords = co;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
{t`Bottom-right corner`} (X_Y):
|
{t`Bottom-right corner`}:
|
||||||
<input
|
<input
|
||||||
defaultValue={keptState.brccoords}
|
defaultValue={keptState.brccoords}
|
||||||
style={{
|
style={{
|
||||||
|
@ -510,9 +523,11 @@ function ModCanvastools() {
|
||||||
maxWidth: '15em',
|
maxWidth: '15em',
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="X_Y"
|
placeholder="X_Y or URL"
|
||||||
onChange={(evt) => {
|
onChange={(evt) => {
|
||||||
const co = evt.target.value.trim();
|
let co = evt.target.value.trim();
|
||||||
|
co = coordsFromUrl(co) || co;
|
||||||
|
evt.target.value = co;
|
||||||
keptState.brccoords = co;
|
keptState.brccoords = co;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -8,7 +8,7 @@ import { useSelector, shallowEqual } from 'react-redux';
|
||||||
import { t } from 'ttag';
|
import { t } from 'ttag';
|
||||||
|
|
||||||
import copyTextToClipboard from '../utils/clipboard';
|
import copyTextToClipboard from '../utils/clipboard';
|
||||||
import { parseInterval } from '../core/utils';
|
import { parseInterval, coordsFromUrl } from '../core/utils';
|
||||||
import { shardOrigin } from '../store/actions/fetch';
|
import { shardOrigin } from '../store/actions/fetch';
|
||||||
|
|
||||||
const keepState = {
|
const keepState = {
|
||||||
|
@ -173,7 +173,7 @@ function ModWatchtools() {
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
{t`Top-left corner`} (X_Y):
|
{t`Top-left corner`}:
|
||||||
<input
|
<input
|
||||||
defaultValue={keepState.tlcoords}
|
defaultValue={keepState.tlcoords}
|
||||||
style={{
|
style={{
|
||||||
|
@ -182,15 +182,17 @@ function ModWatchtools() {
|
||||||
maxWidth: '15em',
|
maxWidth: '15em',
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="X_Y"
|
placeholder="X_Y or URL"
|
||||||
onChange={(evt) => {
|
onChange={(evt) => {
|
||||||
const co = evt.target.value.trim();
|
let co = evt.target.value.trim();
|
||||||
|
co = coordsFromUrl(co) || co;
|
||||||
|
evt.target.value = co;
|
||||||
keepState.tlcoords = co;
|
keepState.tlcoords = co;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
{t`Bottom-right corner`} (X_Y):
|
{t`Bottom-right corner`}:
|
||||||
<input
|
<input
|
||||||
defaultValue={keepState.brcoords}
|
defaultValue={keepState.brcoords}
|
||||||
style={{
|
style={{
|
||||||
|
@ -199,9 +201,11 @@ function ModWatchtools() {
|
||||||
maxWidth: '15em',
|
maxWidth: '15em',
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="X_Y"
|
placeholder="X_Y or URL"
|
||||||
onChange={(evt) => {
|
onChange={(evt) => {
|
||||||
const co = evt.target.value.trim();
|
let co = evt.target.value.trim();
|
||||||
|
co = coordsFromUrl(co) || co;
|
||||||
|
evt.target.value = co;
|
||||||
keepState.brcoords = co;
|
keepState.brcoords = co;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -312,11 +316,13 @@ function ModWatchtools() {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'ts': {
|
case 'ts': {
|
||||||
const date = new Date(val);
|
const date = new Date(val);
|
||||||
let minutes = date.getMinutes();
|
const hours = date.getHours();
|
||||||
if (minutes < 10) minutes = `0${minutes}`;
|
const minutes = `0${date.getMinutes()}`.slice(-2);
|
||||||
|
const seconds = `0${date.getSeconds()}`.slice(-2);
|
||||||
|
const ms = `00${date.getMilliseconds()}`.slice(-3);
|
||||||
return (
|
return (
|
||||||
<td key={type} title={date.toLocaleDateString()}>
|
<td key={type} title={date.toLocaleDateString()}>
|
||||||
{`${date.getHours()}:${minutes}`}
|
{`${hours}:${minutes}:${seconds}.${ms}`}
|
||||||
</td>
|
</td>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -470,6 +470,28 @@ export function getDateTimeString(timestamp) {
|
||||||
return date.toLocaleTimeString();
|
return date.toLocaleTimeString();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* get X_Y coordinates out of URL
|
||||||
|
* @param url url ending with #canas,x,y,z coords
|
||||||
|
* @return coordinates in X_Y form or null
|
||||||
|
*/
|
||||||
|
export function coordsFromUrl(url) {
|
||||||
|
let splitInd = url.lastIndexOf('#');
|
||||||
|
if (splitInd === -1) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
let part = url.slice(splitInd + 1);
|
||||||
|
splitInd = part.indexOf('?');
|
||||||
|
if (splitInd !== -1) {
|
||||||
|
part = part.slice(0, splitInd);
|
||||||
|
}
|
||||||
|
const [, x, y] = part.split(',');
|
||||||
|
if (x && y) {
|
||||||
|
return `${x}_${y}`;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* parse interval in s/m/h form to timestamp
|
* parse interval in s/m/h form to timestamp
|
||||||
* @param interval string like "2d"
|
* @param interval string like "2d"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user