From bee29b913723fd1ed578cbc6b9b455deb784a6ad Mon Sep 17 00:00:00 2001 From: srgooglo Date: Wed, 12 Oct 2022 19:45:38 +0200 Subject: [PATCH] added debug console --- packages/app/src/App.jsx | 12 ++ .../components}/index.js | 0 .../components}/theme/index.jsx | 0 .../components}/theme/index.less | 0 .../components/timeCalculation/index.jsx | 113 ++++++++++++++++++ .../components/timeCalculation/index.less | 29 +++++ packages/app/src/debug/index.jsx | 40 +++++++ packages/app/src/debug/index.less | 0 8 files changed, 194 insertions(+) rename packages/app/src/{debugComponents => debug/components}/index.js (100%) rename packages/app/src/{debugComponents => debug/components}/theme/index.jsx (100%) rename packages/app/src/{debugComponents => debug/components}/theme/index.less (100%) create mode 100644 packages/app/src/debug/components/timeCalculation/index.jsx create mode 100644 packages/app/src/debug/components/timeCalculation/index.less create mode 100644 packages/app/src/debug/index.jsx create mode 100644 packages/app/src/debug/index.less diff --git a/packages/app/src/App.jsx b/packages/app/src/App.jsx index fabcf4a7..9e8a5537 100644 --- a/packages/app/src/App.jsx +++ b/packages/app/src/App.jsx @@ -60,6 +60,9 @@ import { Session, User } from "models" import config from "config" import { NotFound, RenderError, Crash, Settings, Navigation, Login, UserRegister, Creator, Searcher } from "components" +import { DOMWindow } from "components/RenderWindow" +import loadable from "@loadable/component" + import { Icons } from "components/Icons" import Layout from "./layout" @@ -326,6 +329,15 @@ class App extends React.Component { } return await StatusBar.show() }, + openDebugger: () => { + // create a new dom window + const win = new DOMWindow({ + id: "debug", + title: "Debug", + }) + + win.createDefaultWindow(loadable(() => import("./debug"))) + } } constructor(props) { diff --git a/packages/app/src/debugComponents/index.js b/packages/app/src/debug/components/index.js similarity index 100% rename from packages/app/src/debugComponents/index.js rename to packages/app/src/debug/components/index.js diff --git a/packages/app/src/debugComponents/theme/index.jsx b/packages/app/src/debug/components/theme/index.jsx similarity index 100% rename from packages/app/src/debugComponents/theme/index.jsx rename to packages/app/src/debug/components/theme/index.jsx diff --git a/packages/app/src/debugComponents/theme/index.less b/packages/app/src/debug/components/theme/index.less similarity index 100% rename from packages/app/src/debugComponents/theme/index.less rename to packages/app/src/debug/components/theme/index.less diff --git a/packages/app/src/debug/components/timeCalculation/index.jsx b/packages/app/src/debug/components/timeCalculation/index.jsx new file mode 100644 index 00000000..7ee8ae97 --- /dev/null +++ b/packages/app/src/debug/components/timeCalculation/index.jsx @@ -0,0 +1,113 @@ +import React from "react" +import * as antd from "antd" + +import momentTimezone from "moment-timezone" +import { DateTime } from "luxon" + +const timezones = momentTimezone.tz.names() + +import "./index.less" + +export default (props) => { + const [simulatedTime, setSimulatedTime] = React.useState(null) + const [simlatedTimezone, setSimlatedTimezone] = React.useState(null) + + const localTimezone = momentTimezone.tz.guess() + + const setSimulatedTimezoneAsLocal = () => { + setSimlatedTimezone(localTimezone) + } + + const handleSimulatedTimeChange = (moment) => { + // set with UTC time string and input simlatedTimezone + const value = momentTimezone.tz(Date.now(), simlatedTimezone).format() + + setSimulatedTime(value) + } + + const getTimezoneOfString = (value) => { + const timezone = momentTimezone.tz(value).tz() + + return timezone + } + + const calculateTimeAgo = (inputTime) => { + if (!inputTime) { + return "No time" + } + + // calculate the absolute time ago between the input time and the current time using luxon, and return a string + const inputTimezone = momentTimezone.tz(value).tz() + + const inputTimeInLocalTimezone = momentTimezone.tz(inputTime, inputTimezone).tz(localTimezone).format() + + const timeAgo = DateTime.fromISO(inputTimeInLocalTimezone).toRelative() + + return timeAgo + } + + return
+

Adjust simulated params

+ +
+
+

+ Select a simulated a timezone +

+ + {timezones.map((timezone, index) => { + return + {timezone} + + })} + + + + Set current {localTimezone} + + +

+ value: {simlatedTimezone} +

+
+ +
+

+ Set a simulated time +

+ + + +

+ value: {simulatedTime} +

+
+ +
+ setSimulatedTime(e.target.value)} + value={simulatedTime} + /> +
+
+ +

Resulting Data

+ +
+

+ Time ago from now (in your timezone {localTimezone}) +

+ +

+ { + calculateTimeAgo(simulatedTime) + } +

+
+
+} \ No newline at end of file diff --git a/packages/app/src/debug/components/timeCalculation/index.less b/packages/app/src/debug/components/timeCalculation/index.less new file mode 100644 index 00000000..21553fd7 --- /dev/null +++ b/packages/app/src/debug/components/timeCalculation/index.less @@ -0,0 +1,29 @@ +.timeCalculation { + display: flex; + flex-direction: column; + + width: 100%; + max-width: 1200px; + + * { + user-select: unset; + } + + .ant-select { + width: 100%; + } + + .simulatedTimezone { + display: flex; + flex-direction: row; + + .field { + display: flex; + flex-direction: column; + + margin-right: 30px; + } + + margin-bottom: 40px; + } +} \ No newline at end of file diff --git a/packages/app/src/debug/index.jsx b/packages/app/src/debug/index.jsx new file mode 100644 index 00000000..413c4e38 --- /dev/null +++ b/packages/app/src/debug/index.jsx @@ -0,0 +1,40 @@ +import React from "react" +import * as antd from "antd" + +const DebuggersComponents = import.meta.glob("/src/debug/components/**/[a-z[]*.jsx") + +export default (props) => { + const [activeDebugger, setActiveDebugger] = React.useState(null) + + const handleDebbugerSelect = (key) => { + setActiveDebugger(key) + } + + if (activeDebugger) { + const Debugger = DebuggersComponents[activeDebugger] + + return
+
+ setActiveDebugger(null)}> + Back + +
+ + +
+ } + + return
+

Select a debugger

+ +
+ {Object.keys(DebuggersComponents).map((key, index) => { + return
+ +
+ })} +
+
+} \ No newline at end of file diff --git a/packages/app/src/debug/index.less b/packages/app/src/debug/index.less new file mode 100644 index 00000000..e69de29b