From c1f1c8afb0a90fee52ca39cc1a5a42154ad8fffe Mon Sep 17 00:00:00 2001
From: Eric van der Vlist <vdv@dyomedea.com>
Date: Mon, 6 Mar 2023 21:54:36 +0100
Subject: [PATCH] Displaying Wpts description and start date

---
 src/components/wpt/WptViewer.module.css |  8 ++++++++
 src/components/wpt/WptViewer.tsx        | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 src/components/wpt/WptViewer.module.css

diff --git a/src/components/wpt/WptViewer.module.css b/src/components/wpt/WptViewer.module.css
new file mode 100644
index 0000000..c92754d
--- /dev/null
+++ b/src/components/wpt/WptViewer.module.css
@@ -0,0 +1,8 @@
+.description {
+  white-space: pre-wrap;
+}
+
+.date {
+  padding-top: 10px;
+  font-style: italic;
+}
diff --git a/src/components/wpt/WptViewer.tsx b/src/components/wpt/WptViewer.tsx
index 17655f9..7997084 100644
--- a/src/components/wpt/WptViewer.tsx
+++ b/src/components/wpt/WptViewer.tsx
@@ -1,5 +1,5 @@
 import { Button, IconButton } from '@suid/material';
-import { Component, createSignal } from 'solid-js';
+import { Component, createSignal, Show } from 'solid-js';
 import WptIcon from '../../icons/location-pin-svgrepo-com.svg?component-solid';
 import { peekCachedSignal } from '../../workers/cached-signals';
 import dispatch from '../../workers/dispatcher-main';
@@ -9,6 +9,7 @@ import WptEditButtonAndDialog from './WptEditButtonAndDialog';
 import DeleteIcon from '@suid/icons-material/Delete';
 import QuestionMarkIcon from '@suid/icons-material/QuestionMark';
 import Alert from '../alert';
+import style from './WptViewer.module.css';
 
 interface Props {
   wptId: string;
@@ -69,7 +70,16 @@ const WptViewer: Component<Props> = ({ wptId }) => {
             </div>
           </>
         }
-        content={undefined}
+        content={
+          <div>
+            <div class={style.description}>{wpt().desc}</div>
+            <Show when={wpt().extensions?.startTime}>
+              <div class={style.date}>
+                {new Date(wpt().extensions?.startTime).toLocaleDateString()}
+              </div>
+            </Show>
+          </div>
+        }
         subTree={undefined}
       />
       <Alert