From f03ee521fc60c06f32c1ffdfa615736a7019bbad Mon Sep 17 00:00:00 2001
From: Benjamin A <yellowjaguar5@gmail.com>
Date: Mon, 10 Feb 2025 13:55:04 -0500
Subject: [PATCH] Add calendar event icons

---
 events/cal.py             |  4 +++-
 events/models.py          | 21 +++++++++++++++++++++
 site_tmpl/events_cal.html | 29 +++++++++++++++++++++++------
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/events/cal.py b/events/cal.py
index f00001aa..d7d980a3 100644
--- a/events/cal.py
+++ b/events/cal.py
@@ -276,7 +276,8 @@ def generate_cal_json_publicfacing(queryset, from_date=None, to_date=None):
         objects_body = []
         for event in queryset:
             field = {
-                "title": conditional_escape(event.cal_name()),
+                "title": conditional_escape("%icon% "+event.cal_name()),
+                "icon": '<span class="glyphicon '+event.icon+'" aria-hidden="true"></span>',
                 "url": reverse('events:detail', args=[event.id]),
                 "className": 'cal-status-' + slugify(event.status),
                 "start": datetime_to_timestamp(event.cal_start() + timezone.timedelta(hours=-5)),
@@ -309,6 +310,7 @@ def generate_cal_json(queryset, from_date=None, to_date=None):
             field = {
                 "id": event.cal_guid(),
                 "title": event.cal_name(),
+                "icon": '<span class="glyphicon '+event.icon+'" aria-hidden="true"></span>' + ('<span class="glyphicon glyphicon-film" aria-hidden="true"></span>' if event.has_projection else ''),
                 "url": reverse('events:detail', args=[event.id]),
                 "className": 'cal-status-' + slugify(event.status),
                 "start": datetime_to_timestamp(event.cal_start() + timezone.timedelta(hours=-5)),
diff --git a/events/models.py b/events/models.py
index 5dec46a4..b5747729 100755
--- a/events/models.py
+++ b/events/models.py
@@ -357,6 +357,27 @@ def status(self):
                 return "Awaiting Payment"
             else:
                 return "To Be Billed"  # used to be "Open" git #245
+    
+    @property
+    def icon(self):
+        if self.status == "Cancelled":
+            return "glyphicon-ban-circle"
+        elif self.status == "Closed":
+            return "glyphicon-ok-circle"
+        elif self.status == "Approved":
+            return "glyphicon-ok-sign"
+        elif self.status == "Awaiting Approval":
+            return "glyphicon-time"
+        elif self.status == "Awaiting Review":
+            return "glyphicon-exclamation-sign"
+        elif self.status == "Paid":
+            return "glyphicon-check"
+        elif self.status == "To Be Billed":
+            return "glyphicon-send"
+        elif self.status == "Awaiting Payment":
+            return "glyphicon-usd"
+        else:
+            return "glyphicon-question-sign"
 
     @property
     def unpaid(self):
diff --git a/site_tmpl/events_cal.html b/site_tmpl/events_cal.html
index 43532124..9ab2ef2a 100644
--- a/site_tmpl/events_cal.html
+++ b/site_tmpl/events_cal.html
@@ -33,7 +33,19 @@
   border-color:rgb(42, 42, 42) !important
 }
 
+.cal-status-cancelled .fc-event-title { text-decoration: line-through; }
+
+.cal-status-cancelled:hover .fc-event-title { text-decoration: none !important; }
+
 .cal-status-awaiting-review { background-color: #e39c2b!important; border-color:#87572a !important}
+
+.fc-event-title-container .glyphicon {
+    margin-left: 0.4rem;
+    padding: 1px;
+    line-height: inherit !important;
+}
+
+.key > span { padding: .3em .6em !important; }
 </style>
 
 <script>
@@ -89,6 +101,8 @@
           arrow: true,
           animation: 'shift-away',
         });
+        console.log(info.event.extendedProps);
+        info.el.querySelector('.fc-event-title-container').insertAdjacentHTML('afterbegin',info.event.extendedProps.icon);
       },
     });
     calendar.render();
@@ -159,13 +173,16 @@ <h4 class="well" style="margin: 10px 15px;">
         <a class="btn btn-default{% if request.GET.projection == 'only'%} active{% endif %}" href="{% append_to_get projection='only' %}">Show Only Projection</a>
     </div>
   </h4>
-  <h4 class="well" style="margin: 10px 15px;">
+  <h4 class="well key" style="margin: 10px 15px;">
     <span class="label" style="color:black">Event Color Key</span>
-    <span class="label cal-status-awaiting-approval">Awaiting Approval</span>
-    <span class="label cal-status-approved">Confirmed</span>
-    <span class="label cal-status-awaiting-review">Awaiting Billing Review</span>
-    <span class="label cal-status-paid">To be billed, Awaiting payment, Paid, Cancelled, or Closed</span> <!-- .cal-status-paid, .cal-status-cancelled, .cal-status-closed, .cal-status-awaiting-payment, .cal-status-to-be-billed -->
-    <span class="label" style="background-color: blue; border: darkblue;">Other/Unknown</span>
+    <span class="label cal-status-awaiting-approval"><span class="glyphicon glyphicon-time"></span> Awaiting Approval</span>
+    <span class="label cal-status-approved"><span class="glyphicon glyphicon-ok-sign"></span> Confirmed</span>
+    <span class="label cal-status-awaiting-review"><span class="glyphicon glyphicon-exclamation-sign"></span> Awaiting Billing Review</span>
+    <span class="label cal-status-awaiting-payment"><span class="glyphicon glyphicon-usd"></span> Awaiting payment</span>
+    <span class="label cal-status-paid"><span class="glyphicon glyphicon-check"></span> Paid</span>
+    <span class="label cal-status-cancelled"><span class="glyphicon glyphicon-ban-circle"></span> Cancelled</span>
+    <span class="label cal-status-closed"><span class="glyphicon glyphicon-ok-circle"></span> Closed</span>
+    <span class="label" style="background-color: blue; border: darkblue;"><span class="glyphicon glyphicon-question-sign"></span> Other/Unknown</span>
   </h4>
 </div>