From 5f143ff66888fd73a29b03e2c8ab7ca4977ae89a Mon Sep 17 00:00:00 2001
From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sat, 19 Apr 2025 06:56:34 -0400
Subject: [PATCH] Jam event tweaks and date fixes

---
 src/littlesongplace/static/nav.js             |  6 +++++
 src/littlesongplace/static/styles.css         | 19 +++++++++++---
 .../templates/jam-event-list.html             | 11 ++++----
 src/littlesongplace/templates/jam-event.html  | 25 +++++++++++--------
 4 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/littlesongplace/static/nav.js b/src/littlesongplace/static/nav.js
index 1e1af84..cd695aa 100644
--- a/src/littlesongplace/static/nav.js
+++ b/src/littlesongplace/static/nav.js
@@ -33,6 +33,12 @@ document.addEventListener("DOMContentLoaded", (e) => {
 
     // Update activity indicator status
     checkForNewActivity();
+
+    // Convert UTC to local date/time
+    document.querySelectorAll(".date").forEach((e) => {
+        let date = new Date(e.dataset.date);
+        e.textContent = date.toLocaleString();
+    });
 });
 
 function onLinkClick(event) {
diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index 74c3b10..8a143ea 100644
--- a/src/littlesongplace/static/styles.css
+++ b/src/littlesongplace/static/styles.css
@@ -27,6 +27,10 @@ h2 {
     font-size: 20px;
 }
 
+h3 {
+    font-size: 16px;
+}
+
 textarea {
     font-family: sans-serif;
     font-size: 16px;
@@ -35,14 +39,14 @@ textarea {
     border-radius: 10px;
     padding: 10px;
     background: var(--yellow);
-    height: 100px;
+    height: 200px;
     width: calc(100% - 20px);
     box-sizing: border-box;
     resize: vertical;
     margin: 10px;
 }
 
-input[type=text], input[type=password], input[type=url] {
+input[type=text], input[type=password], input[type=url], input[type=datetime-local] {
     background: var(--yellow);
     margin: 10px;
     font-family: sans-serif;
@@ -51,7 +55,8 @@ input[type=text], input[type=password], input[type=url] {
     border: 3px solid var(--purple);
     border-radius: 10px;
     padding: 5px;
-    width: 200px;
+    width: 300px;
+    max-width: calc(100% - 40px);
 }
 
 .button, input[type=submit] {
@@ -145,6 +150,14 @@ div.page-header {
     color: var(--purple);
 }
 
+.info {
+    line-height: 2;
+}
+
+.actions {
+    margin: 10px 0px;
+}
+
 /* Sliders (e.g. volume) */
 
 input[type=range] {
diff --git a/src/littlesongplace/templates/jam-event-list.html b/src/littlesongplace/templates/jam-event-list.html
index 4340d7b..148c5e5 100644
--- a/src/littlesongplace/templates/jam-event-list.html
+++ b/src/littlesongplace/templates/jam-event-list.html
@@ -1,9 +1,9 @@
 {% macro jam_event_list(list_title, events, date_label, which_date) %}
 {% if events %}
 <h3>{{ list_title }}</h3>
-<div class="jam-event-list">
+<ul class="jam-event-list">
     {% for event in events %}
-    <div class="jam-event-list-entry">
+    <li class="jam-event-list-entry">
         {% if event.hidden -%}
         <span class="visibility-indicator">[Upcoming Event]</span>
         {%- else -%}
@@ -11,18 +11,19 @@
             <a href="/jams/{{ event.jamid }}/events/{{ event.eventid }}">{{ event.title }}</a>
         </span>
         {%- endif %}
-        -
+        <strong>&nbsp;|&nbsp;</strong>
         <span class="jam-event-list-jam-title">
             <a href="/jams/{{ event.jamid }}">{{ event.jam_title }}</a>
         </span>
+        <strong>&nbsp;|&nbsp;</strong>
         <strong>{{ date_label }}:</strong>
         {% if which_date == "start" and event.startdate %}
         <span class="date" data-date="{{ event.startdate.isoformat() }}"><!-- Populated by nav.js --></span>
         {% elif which_date == "end" and event.enddate %}
         <span class="date" data-date="{{ event.enddate.isoformat() }}"><!-- Populated by nav.js --></span>
         {% endif %}
-    </div>
+    </li>
     {% endfor %}
-</div>
+</ul>
 {% endif %}
 {% endmacro %}
diff --git a/src/littlesongplace/templates/jam-event.html b/src/littlesongplace/templates/jam-event.html
index cd3da92..e36b87c 100644
--- a/src/littlesongplace/templates/jam-event.html
+++ b/src/littlesongplace/templates/jam-event.html
@@ -7,38 +7,43 @@
 <h1>{% if event.hidden -%}[Upcoming Event]{%- else -%}{{ event.title }}{%- endif %} - {{ jam.title }}</h1>
 
 <div id="jam-event-view">
-    <div>
+    <div class="info">
         <strong>Host:</strong>
             <a href="/users/{{ jam.ownername }}" class="profile-link">{{ jam.ownername }}</a>
             <br/>
         {% if event.startdate %}
         <strong>Start Date:</strong>
-            {{ event.startdate.strftime("%Y-%m-%d %I:%M%p") }} (UTC)
+            <span class="date" data-date="{{ event.startdate.isoformat() }}"><!-- Populated by nav.js --></span>
             <br/>
         {% endif %}
         {% if event.enddate %}
         <strong>End Date:</strong>
-            {{ event.enddate.strftime("%Y-%m-%d %I:%M%p") }} (UTC)
+            <span class="date" data-date="{{ event.enddate.isoformat() }}"><!-- Populated by nav.js --></span>
         {% endif %}
     </div>
 
     {% if session["userid"] == jam.ownerid -%}
-    <div class="jam-actions">
+    <div class="actions">
     <button class="song-list-button" onclick="showJamEventEditor()" title="Edit"><img class="lsp_btn_edit02" /></button>
     <a href="/jams/{{ jam.jamid }}/delete" class="song-list-button" onclick="return confirm('Are you sure you want to delete this jam and all events?')" title="Delete"><img class="lsp_btn_delete02" /></a>
     </div>
     {%- endif %}
 
     <div class="jam-description">
+        <h2>Event Details</h2>
         {% if event.hidden -%}
-        <em>Event description is hidden until the event starts.</em>
+        <em>Event details are hidden until the event starts.</em>
         {%- else -%}
-        {{ event.description }}
+        {{ (event.description.replace("\n", "<br>"))|safe }}
         {%- endif %}
     </div>
 
     <h2>About the Jam</h2>
-    <div class="jam-description">
+    <div>
+        <strong><a href="/jams/{{ jam.jamid }}">{{ jam.title }}</a></strong>
+    </div>
+    <br/>
+    <div>
     {{ jam.description }}
     </div>
 
@@ -62,7 +67,7 @@
         <label>Title<br/><input type="text" name="title" value="{{ event.title }}"/></label>
         <br/>
         <label>
-            Description
+            Details
             <textarea name="description">{{ event.description|safe }}</textarea>
         </label>
         <br/>
@@ -76,8 +81,8 @@
             <input type="datetime-local" name="enddate" value="{% if event.enddate %}{{ event.enddate.replace(tzinfo=None).isoformat() }}{% endif %}" required/> (UTC)
         </label>
         <br/>
-        <input type="submit" value="Save"/>
-        <a href="javascript:hideJamEventEditor()">Cancel</a>
+        <br/>
+        <input type="submit" value="Save"/>&nbsp;&nbsp;&nbsp;<a href="javascript:hideJamEventEditor()">Cancel</a>
     </form>
 </div> <!-- jam-event-edit -->
 
-- 
2.39.5