From 59a2fec6398d6faef8a1b46625bab9d2d29b032b Mon Sep 17 00:00:00 2001
From: Ray <sympatheticfire@gmail.com>
Date: Fri, 6 Oct 2023 01:05:54 +0100
Subject: [PATCH] Changed demo to be interactive

---
 demo-test.html | 303 ++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 221 insertions(+), 82 deletions(-)
diff --git a/demo-test.html b/demo-test.html
index 7d4b4c7..11020e7 100644
--- a/demo-test.html
+++ b/demo-test.html
@@ -17,29 +17,71 @@
 </head>
 <body>
 
-  <canvas id="myCanvas"></canvas>
+  <div class="row">
+    <div class="column1">
+      <canvas id="myCanvas"></canvas>
+
+      <p>
+        <textarea id="memoBox1" readonly></textarea>
+
+      </p>
+    </div>
+    <div class="column2">
+
+      <p>
+        <button onclick="Clear()">Clear</button>
+        <button onclick="ToggleDebug()">Toggle Debug</button>
+        <button onclick="Refresh()">Refresh</button>
+      </p>
+      <hr />
+
+      <p>
+        <button onclick="SetToday()">Set Today</button>
+      </p>
+      <hr />
+
+      <p>
+        <button onclick="GenerateRandomMarker()">Add/Generate Random Marker</button>
+      </p>
+      <hr />
+
+      <p>
+        <button onclick="GoToToday()">Show Start Date</button>
+        <button onclick="GoToPreviousMonth()">Show Previous Month</button>
+        <button onclick="GoToNextMonth()">Show Next Month</button>
+      </p>
+      <hr />
+
+      <p>
+        <button onclick="UpdateLabel()">Rename Marker</button>
+        <button onclick="UpdateMarker()">Change Marker Style</button>
+        <button onclick="DeleteMarker()">Delete Marker</button>
+      </p>
+      <hr />
+
+      <p>
+        <button onclick="FindVisibleEvents()">Find Visible Events</button>
+        <button onclick="FindAllEvents()">Find All Events</button>
+      </p>
+      <hr />
+
+
+      <p>
+        <input type="date" id="textbox1" />
+        <button onclick="FindEvent()">Find Event (By Date)</button>
+      </p>
+      <p>
+        <input type="date" id="textbox2" />
+        <button onclick="FindDatePosition()">Find Date Position (If Visible)</button>
+      </p>
+      <hr />
+
+    </div>
+  </div>
+
+
+
 
-<p>
-  <button onclick="Clear()">Clear</button>
-  <button onclick="LoadDemo()">Load Demo Events</button>
-  <button onclick="ToggleDebug()">Toggle Debug</button>
-</p>
-<p>
-  <button onclick="LoadToday()">Show Start Date</button>
-  <button onclick="LoadPrevious()">Show Previous Month</button>
-  <button onclick="LoadNext()">Show Next Month</button>
-</p>
-<p>
-  <button onclick="UpdateLabel()">Update Label</button>
-  <button onclick="UpdateMarker()">Update Marker</button>
-  <button onclick="DeleteMarker()">Delete Marker</button>
-</p>
-<p>
-  <button onclick="GetDisplayedDateRange()">Get Displayed Date Range</button>
-  <button onclick="FindEvent()">Find Event</button>
-  <button onclick="FindDatePosition()">Find Date Position</button>
-  <button onclick="FindVisibleEvents()">Find Visible Events</button>
-</p>
   <style>
 
 body {
@@ -56,6 +98,27 @@ canvas {
   margin: 0;
 }
 
+textarea {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #000000;
+  min-height: calc(100vh - 500px);
+  padding: 10px;
+  width: 100%;
+}
+
+.column1 {
+  flex: 70%;
+  padding: 20px;
+}
+.column2 {
+  flex: 30%;
+  padding: 20px;
+}
+.row {
+  display: flex;
+}
+
   </style>
 
   <script>
@@ -65,108 +128,184 @@ timeline1.OnEventClick = function(sender, e, event) {
   // console.log(e);
 }
 
-LoadDemo();
-LoadToday();
+SetToday();
 
 
 
 
 
-function Clear()
-{
+function Clear() {
   timeline1.Clear(true);
 }
 
-function LoadDemo()
-{
-  timeline1.AddEvent("2001-01-05", "Event", { Title: Math.random(), Description: Math.random() });
-  timeline1.AddEvent("2001-01-06", "Event", { Title: Math.random(), Description: Math.random() });
-  timeline1.AddEvent("2001-01-06", null, { Title: Math.random(), Description: Math.random() });
-  timeline1.AddEvent("2001-01-16", "Event", { Title: Math.random(), Description: Math.random() });
-  timeline1.AddEvent("2001-01-06", "Event 2", { Title: Math.random(), Description: Math.random() });
-  timeline1.AddEvent("2001-01-06", null, { Title: Math.random(), Description: Math.random() });
-
-  timeline1.AddEvent("2001-01-20", "Very Long Event", { Title: Math.random(), Description: Math.random() });
-  timeline1.AddEvent("2001-01-21", "Event", { Title: Math.random(), Description: Math.random() });
-  timeline1.AddEvent("2001-01-23", "Event", { Title: Math.random(), Description: Math.random() });
-  timeline1.AddEvent("2001-01-26", "Event", { Title: Math.random(), Description: Math.random() });
-
-  timeline1.AddEvent("2001-02-05", "Event", { Title: Math.random(), Description: Math.random() });
-  timeline1.AddEvent("2001-02-07", "Event", { Title: Math.random(), Description: Math.random() });
-
-  LoadToday();
-  timeline1.Invalidate(false, true);
-}
-
-function ToggleDebug()
-{
+function ToggleDebug() {
   timeline1.Debug = !timeline1.Debug;
   timeline1.Invalidate(true, true);
 }
 
-function LoadToday()
-{
-  // const date = timeline1.DateToString(new Date(), "yyyy-MM-dd");
-
-  timeline1.Load("2001-01-01");
+function Refresh() {
+  timeline1.Invalidate(true, true);
 }
 
-function LoadPrevious()
-{
+function SetToday() {
+  const msPerDay = 1000 * 60 * 60 * 24;
+  const startDate = timeline1.DateToString(new Date(), "yyyy-MM-dd");
+
+  timeline1.Load(startDate);
+
+  const endDate = timeline1.CalcEndDate();
+  const noDays = Math.floor((timeline1.ConvertToDate(endDate) - timeline1.ConvertToDate(startDate)) / msPerDay);
+
+  LogInfo("Set start date to today (" + startDate + ")");
+  LogInfo("Show " + startDate + " to " + endDate + " (" + noDays + " days)");
+}
+
+function GenerateRandomMarker() {
+  const msPerDay = 1000 * 60 * 60 * 24;
+  const endDate = timeline1.CalcEndDate();
+  const noDays = Math.floor((timeline1.ConvertToDate(endDate) - timeline1.ConvertToDate(timeline1.ShowDate)) / msPerDay);
+
+  let randomDay = GetRandy(1, (noDays - 1));
+
+  let date = timeline1.ConvertToDate(timeline1.ShowDate);
+  date.setDate(date.getDate() + randomDay);
+
+  const markerDate = timeline1.DateToString(date, timeline1.DateParsePattern);
+
+  const markerName = "Random Marker #" + GetRandy(10000, 99999);
+
+  timeline1.AddEvent(markerDate, markerName, { Title: markerName, Description: "This is a randomly generated marker" });
+  timeline1.Invalidate(false, true);
+
+  LogInfo("Add marker (" + markerDate + ")");
+}
+
+function GoToToday() {
+  timeline1.Show(timeline1.StartDate);
+
+  LogInfo("Go to " + timeline1.ShowDate);
+}
+
+function GoToPreviousMonth() {
   timeline1.ShowPrevious();
+
+  LogInfo("Go to " + timeline1.ShowDate);
 }
 
-function LoadNext()
-{
+function GoToNextMonth() {
   timeline1.ShowNext();
+
+  LogInfo("Go to " + timeline1.ShowDate);
 }
 
-function UpdateLabel()
-{
-  timeline1.UpdateLabel("2001-01-21", "Very Long Event");
+function UpdateLabel() {
+  const visibleMarkers = timeline1.FindVisibleEvents();
+  if (visibleMarkers.length <= 0) {
+    LogInfo("No visible markers");
+    return;
+  }
+
+  const randy = GetRandy(0, (visibleMarkers.length - 1));
+  const newMarkerName = "Renamed Random Marker #" + GetRandy(10000, 99999);
+
+  LogInfo("Renamed marker #" + randy + " [" + visibleMarkers[randy].Label + "] to [" + newMarkerName + "]");
+
+  timeline1.UpdateLabel(visibleMarkers[randy].Date, newMarkerName);
 }
 
-function UpdateMarker()
-{
-  timeline1.UpdateMarker("2001-01-21", "#E68422", "#FAE7D3");
+function UpdateMarker() {
+  const visibleMarkers = timeline1.FindVisibleEvents();
+  if (visibleMarkers.length <= 0) {
+    LogInfo("No visible markers");
+    return;
+  }
+
+  const randy = GetRandy(0, (visibleMarkers.length - 1));
+
+  LogInfo("Change marker style #" + randy + " [" + visibleMarkers[randy].Label + "]");
+
+  timeline1.UpdateMarker(visibleMarkers[randy].Date, "#E68422", "#FAE7D3");
 }
 
-function DeleteMarker()
-{
-  timeline1.DeleteMarker("2001-01-06");
+function DeleteMarker() {
+  const visibleMarkers = timeline1.FindVisibleEvents();
+  if (visibleMarkers.length <= 0) {
+    LogInfo("No visible markers");
+    return;
+  }
+
+  const randy = GetRandy(0, (visibleMarkers.length - 1));
+
+  LogInfo("Delete marker #" + randy + " [" + visibleMarkers[randy].Label + "]");
+
+  timeline1.DeleteMarker(visibleMarkers[randy].Date);
   timeline1.Invalidate(false, true);
 }
 
-function GetDisplayedDateRange()
-{
-  alert(timeline1.ShowDate + " - " + timeline1.CalcEndDate());
+function FindVisibleEvents() {
+  const visibleMarkers = timeline1.FindVisibleEvents();
+
+  LogInfo("");
+  LogInfo(JSON.stringify(visibleMarkers));
+  LogInfo("");
 }
 
-function FindEvent()
-{
-  const result = timeline1.FindEvent("2001-01-26");
+function FindAllEvents() {
+  LogInfo("");
+  LogInfo(JSON.stringify(timeline1.Events));
+  LogInfo("");
+}
 
-  console.log(result);
+function FindEvent() {
+  const date = document.getElementById("textbox1").value;
+  if (date == null) {
+    LogInfo("No marker found");
+    return;
+  }
 
-  alert(JSON.stringify(result));
+  const marker = timeline1.FindEvent(date);
+  if (marker == null) {
+    LogInfo("No marker found");
+    return;
+  }
+
+  LogInfo("");
+  LogInfo(JSON.stringify(marker));
+  LogInfo("");
 }
 
 function FindDatePosition()
 {
-  const result = timeline1.FindDatePosition("2001-01-26");
+  const date = document.getElementById("textbox2").value;
+  if (date == null) {
+    LogInfo("No date position found");
+    return;
+  }
 
-  console.log(result);
+  const marker = timeline1.FindDatePosition(date);
+  if (marker == null) {
+    LogInfo("No marker position found");
+    return;
+  }
 
-  alert(JSON.stringify(result));
+  LogInfo("");
+  LogInfo(JSON.stringify(marker));
+  LogInfo("");
 }
 
-function FindVisibleEvents()
+
+function LogInfo(value)
 {
-  const result = timeline1.FindVisibleEvents()
+  document.getElementById("memoBox1").value += value + "\n";
+}
 
-  console.log(result);
+function GetRandy(min, max)
+{
+  let rand = Math.random();
+  rand = Math.floor(rand * (max - min));
+  rand = rand + min;
 
-  alert(JSON.stringify(result));
+  return rand;
 }
 
 </script>
