From d9e7202e3b1d6a86047fcf67f8ee78c625e2fe68 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 22 Apr 2024 07:10:00 +0100
Subject: [PATCH] wip

---
 .../subjects/DatesAsNumbers.svelte            | 16 +++--
 .../subjects/NumbersAsDates.svelte            | 57 +++++++++++++++-
 .../subjects/StringsAsDates.svelte            | 65 +++++++++++++++++--
 3 files changed, 123 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
index 4921ac5823..e920395672 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
@@ -24,26 +24,32 @@
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A date can be used in place of a numeric value, but it will be converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    A datetime value can be used in place of a numeric value, but it will be converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
     <ExampleSection
       heading="Examples:"
     >
       <ExampleLine>
-        1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
+        <Block>
+          {(new Date(946684800000).toLocaleString())}
+        </Block>
+          <span class="separator">{"->"} </span><Block>946684800000</Block>
       </ExampleLine>
       <ExampleLine>
-        1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
+        <Block>
+          {(new Date(1577836800000).toLocaleString())}
+        </Block>
+          <span class="separator">{"->"} </span><Block>1577836800000</Block>
       </ExampleLine>
       <ExampleLine>
-        Now<span class="separator">:</span> <Block>{timestamp}</Block>
+        <Block>Now</Block><span class="separator">{"->"} </span><Block>{timestamp}</Block>
       </ExampleLine>
     </ExampleSection>
 </Subject>
 
 <style>
   .separator {
-    margin-right: 5px;
+    margin: 0 5px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
index b3bf785afc..f448a376d2 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
@@ -1,9 +1,60 @@
-
 <script>
+  import { onMount } from "svelte"
+  import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
+
+  let timestamp = Date.now();
+
+  onMount(() => {
+    let run = true;
+
+    const updateTimeStamp = () => {
+      timestamp = Date.now();
+      console.log(timestamp);
+      if (run) {
+        setTimeout(updateTimeStamp, 200)
+      }
+    }
+
+    updateTimeStamp();
+
+    return () => {
+      run = false;
+    }
+  })
 </script>
 
-<div>
-</div>
+<Subject heading="Numbers as Dates">
+  <Section>
+    A number value can be used in place of a datetime value, but it will be parsed as a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+  </Section>
+
+    <ExampleSection
+      heading="Examples:"
+    >
+      <ExampleLine>
+        <Block>946684800000</Block>
+        <span class="separator">{"->"}</span>
+        <Block>
+          {(new Date(946684800000).toLocaleString())}
+        </Block>
+      </ExampleLine>
+      <ExampleLine>
+        <Block>1577836800000</Block>
+        <span class="separator">{"->"}</span>
+        <Block>
+          {(new Date(1577836800000).toLocaleString())}
+        </Block>
+      </ExampleLine>
+      <ExampleLine>
+      <Block>{timestamp}</Block>
+      <span class="separator">{"->"}</span>
+        <Block>Now</Block>
+      </ExampleLine>
+    </ExampleSection>
+</Subject>
 
 <style>
+  .separator {
+    margin: 0 5px;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
index 3effc88640..af1336c28a 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
@@ -3,13 +3,13 @@
   import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
 
   let timestamp = Date.now();
+  $: iso = (new Date(timestamp)).toISOString();
 
   onMount(() => {
     let run = true;
 
     const updateTimeStamp = () => {
       timestamp = Date.now();
-      console.log(timestamp);
       if (run) {
         setTimeout(updateTimeStamp, 200)
       }
@@ -23,28 +23,79 @@
   })
 </script>
 
-<Subject heading="Dates as Numbers">
+<Subject heading="Strings as Dates">
   <Section>
-    A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    A string value can be used in place of a datetime value, but it will be parsed as:
+  </Section>
+  <Section>
+    A <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
     <ExampleSection
       heading="Examples:"
     >
       <ExampleLine>
-        1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
+        <Block>946684800000</Block>
+        <span class="separator">{"->"}</span>
+        <Block>
+          {(new Date(946684800000).toLocaleString())}
+        </Block>
       </ExampleLine>
       <ExampleLine>
-        1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
+        <Block>1577836800000</Block>
+        <span class="separator">{"->"}</span>
+        <Block>
+          {(new Date(1577836800000).toLocaleString())}
+        </Block>
       </ExampleLine>
       <ExampleLine>
-        Now<span class="separator">:</span> <Block>{timestamp}</Block>
+      <Block>{timestamp}</Block>
+      <span class="separator">{"->"}</span>
+        <Block>Now</Block>
       </ExampleLine>
     </ExampleSection>
+  <Section>
+    An <Block>ISO 8601</Block> datetime string. which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+  </Section>
+    <div class="isoExamples">
+      <ExampleSection
+        heading="Examples:"
+      >
+        <ExampleLine>
+          <Block>2000-01-01T00:00:00.000Z</Block>
+          <span class="separator">{"->"}</span>
+          <Block>
+            {(new Date(946684800000).toLocaleString())}
+          </Block>
+        </ExampleLine>
+        <ExampleLine>
+          <Block>2000-01-01T00:00:00.000Z</Block>
+          <span class="separator">{"->"}</span>
+          <Block>
+            {(new Date(1577836800000).toLocaleString())}
+          </Block>
+        </ExampleLine>
+        <ExampleLine>
+        <Block>{iso}</Block>
+        <span class="separator">{"->"}</span>
+          <Block>Now</Block>
+        </ExampleLine>
+      </ExampleSection>
+    </div>
+
 </Subject>
 
 <style>
   .separator {
-    margin-right: 5px;
+    flex-shrink: 0;
+    margin: 0 5px;
+  }
+
+  .isoExamples :global(.block) {
+    word-break: break-all;
+  }
+
+  .isoExamples :global(.exampleLine) {
+    align-items: center;
   }
 </style>