feat: prominent date display

index.html

@@ -26,6 +26,7 @@ <h3>Error: no data...</h3>
         </div>
       </header>
       <div id="map">
+        <div id="date-display">foo</div>
         <div id="timeline-controls-container">
           <div id="timeline-controls">
             <!-- <button class="timeline-player-btn" id="timeline-play" name="play"></button> -->

src/helper.ts

@@ -10,6 +10,16 @@ export const dateKey2dateString = (dateKey: any): string => {
   return dateString;
 };
 
+export const dateKey2dateString2 = (dateKey: any): string => {
+  const pattern = /(\d{4})(\d{2})(\d{2})/;
+  const match = pattern.exec(dateKey);
+  let dateString = 'xxxx-xx-xx'; // fallback
+  if (match !== null) {
+    dateString = `${match[3]}.${match[2]}.${match[1]}`;
+  }
+  return dateString;
+};
+
 export const prepareGeosData = (data: GeosData) => {
   const geosCollections: any = [];
   const uaGeosFeatures: any = [];

src/main.ts

@@ -1045,9 +1045,14 @@ class MapViewer {
     // update input date
     const dateControl: HTMLInputElement | null =
       document.querySelector('#timeline-input');
+    const dateDisplay: HTMLInputElement | null =
+    document.querySelector('#date-display');
     if (dateControl !== null) {
       dateControl.value = helper.dateKey2dateString(this.currentDateKey);
     }
+    if (dateDisplay !== null) {
+      dateDisplay.innerHTML = helper.dateKey2dateString2(this.currentDateKey);
+    }
   }
 }
 

src/styles/map/_datedisplay.scss

@@ -0,0 +1,15 @@
+#date-display {
+  margin: 0 auto auto auto;
+  padding: 2px 10px;
+  z-index: 9999;
+  background: rgba(255, 255, 255, 0.8);
+  border-left: 1px solid rgba(0, 0, 0, 0.5);
+  border-right: 1px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  position: relative;
+  font-size: 20px;
+  min-width: 120px;
+  text-align: center;
+}

src/styles/map/_index.scss

@@ -1,3 +1,4 @@
 @import "controls";
 @import "search";
 @import "labels";
+@import "datedisplay";