Improve date diff page (#55)

suru33 · Apr 28, 2024 · 296e0ee · 296e0ee
1 parent 7606cef
commit 296e0ee
Show file tree

Hide file tree

Showing 9 changed files with 1,577 additions and 1,073 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
diff --git a/package.json b/package.json
@@ -1,7 +1,8 @@
 {
   "name": "boring-devtools",
   "private": true,
-  "version": "1.0.7",
+  "version": "1.0.9",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -37,6 +38,6 @@
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-react": "^7.32.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.4"
+    "vite": "5.1.0-beta.2"
   }
 }
diff --git a/src/commons/constants.ts b/src/commons/constants.ts
@@ -3,10 +3,10 @@ const __ = {
   emptyStr: "",
   space: " ",
   tzUTC: "UTC",
-  addressSeperator: "\n--\n",
+  addressSeparator: "\n--\n",
   settings: {
-    appname: "boring-devtools",
-    version: "1.0.7",
+    appName: "boring-devtools",
+    version: "1.0.9",
     fontFamily: "'JetBrains Mono', monospace",
     myURL: "https://suru.im",
     license: "MIT",

diff --git a/src/commons/utils.country.ts b/src/commons/utils.country.ts
@@ -12,5 +12,5 @@ export const generateAddress = (countries: CountryCode[], locale = defaultFakerL
     `${$faker.address.zipCode(getZipCodeFormat(country))}, ${$faker.address.city()}`,
     country === "US" ? `${$faker.address.state()}, ${getCountryName(country)}` : getCountryName(country)
   ].join(__.newLine);
-  return range(count).map(() => address(chooseRandom(countries))).join(__.addressSeperator);
+  return range(count).map(() => address(chooseRandom(countries))).join(__.addressSeparator);
 };
diff --git a/src/components/AppFooter.tsx b/src/components/AppFooter.tsx
@@ -10,7 +10,7 @@ const AppFooter = () => {
     <Footer height={30}>
       <Center style={{ height: "100%" }}>
         <Text size="xs" color="dimmed">
-          {__.settings.appname} v{__.settings.version} • {__.settings.copyright}
+          {__.settings.appName} v{__.settings.version} • {__.settings.copyright}
           {} • {__.labels.license} <Link display={__.settings.license} url={__.settings.licenseURL} />
           {} • <Link display={__.settings.myURL} url={__.settings.myURL} />
         </Text>

diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
@@ -24,7 +24,7 @@ const AppHeader = (props: AppHeaderProps) => {
         <UnstyledButton component={Link} to={"/home"}>
           <Group>
             <AppLogo size={50} colorScheme={colorScheme}/>
-            <Text size="xl" weight={fontWeight.extraBold}>{__.settings.appname}</Text>
+            <Text size="xl" weight={fontWeight.extraBold}>{__.settings.appName}</Text>
           </Group>
         </UnstyledButton>
       </Group>

diff --git a/src/components/tools/dates/DateDifferenceCalculator.tsx b/src/components/tools/dates/DateDifferenceCalculator.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useEffect, useState } from "react";
-import { Button, Group, Stack, Text } from "@mantine/core";
+import { Button, Group, Space, Stack, Table, Text } from "@mantine/core";
 import { useInputState } from "@mantine/hooks";
 import { DatePicker, TimeInput } from "@mantine/dates";
 import dayjs from "dayjs";
@@ -24,28 +24,64 @@ const DateDifferenceCalculator = (props: ToolProps) => {
   const [ endTime, onEndTimeChange ] = useInputState(et);
   const [ output, setOutput ] = useState<ReactNode>(<></>);
 
+  const DateSegment = (props: { value: number, name: string }) =>
+    <Text span color={colors.blue}>
+      {props.value}
+      <Text span color={colors.gray}>{props.name}</Text>
+    </Text>;
+
   useEffect(() => {
     const d1 = mergeDateTime(startDate, startTime);
     const d2 = mergeDateTime(endDate, endTime);
     if (d1.isAfter(d2, "seconds")) {
       setOutput(<Text color={colors.red} weight={fontWeight.bold}>{__.errmsg.dateRange}</Text>);
     } else {
-      const [ fmt, seperator ] = __.formats.splitTimestamp;
-      const diff = dayjs.duration(d2.diff(d1, "seconds"), "seconds")
+      const [ fmt, separator ] = __.formats.splitTimestamp;
+      const totalSeconds = d2.diff(d1, "seconds");
+      const byUnit = [
+        d2.diff(d1, "years"),
+        d2.diff(d1, "months"),
+        d2.diff(d1, "days"),
+        d2.diff(d1, "hours"),
+        d2.diff(d1, "minutes"),
+        totalSeconds
+      ];
+      console.log(dayjs.duration(d2.diff(d1)));
+      const diff = dayjs.duration(d2.diff(d1))
         .format(fmt)
-        .split(seperator)
+        .split(separator)
         .map(s => parseInt(s));
       setOutput(
         <Text weight={fontWeight.medium}>
           <ComponentLabel text={__.labels.differenceIs}/>
-          {
-            diff.map((v, i) =>
-              <Text span key={i} color={colors.blue}>
-                {v}
-                <Text span color={colors.gray}>{suffix(v, i)}</Text>
-              </Text>
-            )
-          }
+          <Space h="sm"/>
+          { diff.map((v, ix) => <DateSegment key={ix} value={v} name={suffix(v, ix)}/>) }
+          <Space h="xl"/>
+          <ComponentLabel text={"By Chrono Unit"}/>
+          <Space h="sm"/>
+          <Table
+            sx={{ width: "400px" }}
+            withBorder
+            withColumnBorders
+            striped
+            verticalSpacing="sm">
+            <thead>
+              <tr>
+                <th>Total</th>
+                <th>Unit</th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                byUnit.map((v, ix) =>
+                  <tr key={ix}>
+                    <td>{v}</td>
+                    <td>{suffix(v, ix)}</td>
+                  </tr>
+                )
+              }
+            </tbody>
+          </Table>
         </Text>
       );
     }

diff --git a/src/main.tsx b/src/main.tsx
@@ -11,7 +11,7 @@ if (container) {
   root.render(
     <React.StrictMode>
       <HashRouter>
-        <App/>
+        <App />
       </HashRouter>
     </React.StrictMode>
   );