From 6479923482a08efe3b66925cf720dcc00b18c060 Mon Sep 17 00:00:00 2001
From: HF <hf@pixelplanet.fun>
Date: Sat, 30 Dec 2023 12:22:05 +0100
Subject: [PATCH] parse time in modtools with seconds and milliseconds, allow
 URL to be inputed in watch

---
 src/components/ModCanvastools.jsx | 57 +++++++++++++++++++------------
 src/components/ModWatchtools.jsx  | 26 ++++++++------
 src/core/utils.js                 | 22 ++++++++++++
 3 files changed, 74 insertions(+), 31 deletions(-)

diff --git a/src/components/ModCanvastools.jsx b/src/components/ModCanvastools.jsx
index e94f607..4aa4b7c 100644
--- a/src/components/ModCanvastools.jsx
+++ b/src/components/ModCanvastools.jsx
@@ -7,7 +7,7 @@ import { useSelector, shallowEqual } from 'react-redux';
 import { t } from 'ttag';
 
 import useInterval from './hooks/interval';
-import { getToday, dateToString } from '../core/utils';
+import { getToday, dateToString, coordsFromUrl } from '../core/utils';
 import { shardOrigin } from '../store/actions/fetch';
 
 const keptState = {
@@ -275,9 +275,12 @@ function ModCanvastools() {
             maxWidth: '15em',
           }}
           type="text"
-          placeholder="X_Y"
+          placeholder="X_Y or URL"
           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>
@@ -328,7 +331,7 @@ function ModCanvastools() {
         ))}
       </select>
       <p>
-        {t`Top-left corner`} (X_Y):&nbsp;
+        {t`Top-left corner`}:&nbsp;
         <input
           defaultValue={keptState.tlcoords}
           style={{
@@ -337,15 +340,17 @@ function ModCanvastools() {
             maxWidth: '15em',
           }}
           type="text"
-          placeholder="X_Y"
+          placeholder="X_Y or URL"
           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;
           }}
         />
       </p>
       <p>
-        {t`Bottom-right corner`} (X_Y):&nbsp;
+        {t`Bottom-right corner`}:&nbsp;
         <input
           defaultValue={keptState.brcoords}
           style={{
@@ -354,9 +359,11 @@ function ModCanvastools() {
             maxWidth: '15em',
           }}
           type="text"
-          placeholder="X_Y"
+          placeholder="X_Y or URL"
           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;
           }}
         />
@@ -401,7 +408,7 @@ function ModCanvastools() {
             }}
           />
           <p>
-            {t`Top-left corner`} (X_Y):&nbsp;
+            {t`Top-left corner`}:&nbsp;
             <input
               defaultValue={keptState.tlrcoords}
               style={{
@@ -410,15 +417,17 @@ function ModCanvastools() {
                 maxWidth: '15em',
               }}
               type="text"
-              placeholder="X_Y"
+              placeholder="X_Y or URL"
               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;
               }}
             />
           </p>
           <p>
-            {t`Bottom-right corner`} (X_Y):&nbsp;
+            {t`Bottom-right corner`}:&nbsp;
             <input
               defaultValue={keptState.brrcoords}
               style={{
@@ -427,9 +436,11 @@ function ModCanvastools() {
                 maxWidth: '15em',
               }}
               type="text"
-              placeholder="X_Y"
+              placeholder="X_Y or URL"
               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;
               }}
             />
@@ -484,7 +495,7 @@ function ModCanvastools() {
         {cleanerStatusString}
       </p>
       <p>
-        {t`Top-left corner`} (X_Y):&nbsp;
+        {t`Top-left corner`}:&nbsp;
         <input
           defaultValue={keptState.tlccoords}
           style={{
@@ -493,15 +504,17 @@ function ModCanvastools() {
             maxWidth: '15em',
           }}
           type="text"
-          placeholder="X_Y"
+          placeholder="X_Y or URL"
           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;
           }}
         />
       </p>
       <p>
-        {t`Bottom-right corner`} (X_Y):&nbsp;
+        {t`Bottom-right corner`}:&nbsp;
         <input
           defaultValue={keptState.brccoords}
           style={{
@@ -510,9 +523,11 @@ function ModCanvastools() {
             maxWidth: '15em',
           }}
           type="text"
-          placeholder="X_Y"
+          placeholder="X_Y or URL"
           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;
           }}
         />
diff --git a/src/components/ModWatchtools.jsx b/src/components/ModWatchtools.jsx
index 18c2a4d..7f242bb 100644
--- a/src/components/ModWatchtools.jsx
+++ b/src/components/ModWatchtools.jsx
@@ -8,7 +8,7 @@ import { useSelector, shallowEqual } from 'react-redux';
 import { t } from 'ttag';
 
 import copyTextToClipboard from '../utils/clipboard';
-import { parseInterval } from '../core/utils';
+import { parseInterval, coordsFromUrl } from '../core/utils';
 import { shardOrigin } from '../store/actions/fetch';
 
 const keepState = {
@@ -173,7 +173,7 @@ function ModWatchtools() {
           />
         </p>
         <p>
-          {t`Top-left corner`} (X_Y):&nbsp;
+          {t`Top-left corner`}:&nbsp;
           <input
             defaultValue={keepState.tlcoords}
             style={{
@@ -182,15 +182,17 @@ function ModWatchtools() {
               maxWidth: '15em',
             }}
             type="text"
-            placeholder="X_Y"
+            placeholder="X_Y or URL"
             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;
             }}
           />
         </p>
         <p>
-          {t`Bottom-right corner`} (X_Y):&nbsp;
+          {t`Bottom-right corner`}:&nbsp;
           <input
             defaultValue={keepState.brcoords}
             style={{
@@ -199,9 +201,11 @@ function ModWatchtools() {
               maxWidth: '15em',
             }}
             type="text"
-            placeholder="X_Y"
+            placeholder="X_Y or URL"
             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;
             }}
           />
@@ -312,11 +316,13 @@ function ModWatchtools() {
                       switch (type) {
                         case 'ts': {
                           const date = new Date(val);
-                          let minutes = date.getMinutes();
-                          if (minutes < 10) minutes = `0${minutes}`;
+                          const hours = date.getHours();
+                          const minutes = `0${date.getMinutes()}`.slice(-2);
+                          const seconds = `0${date.getSeconds()}`.slice(-2);
+                          const ms = `00${date.getMilliseconds()}`.slice(-3);
                           return (
                             <td key={type} title={date.toLocaleDateString()}>
-                              {`${date.getHours()}:${minutes}`}
+                              {`${hours}:${minutes}:${seconds}.${ms}`}
                             </td>
                           );
                         }
diff --git a/src/core/utils.js b/src/core/utils.js
index e925c27..321d457 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -470,6 +470,28 @@ export function getDateTimeString(timestamp) {
   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
  * @param interval string like "2d"