More calendar work

RIGS/templates/calendar.html

@@ -3,23 +3,17 @@
 
 {% block js %}
 <script src="{% static 'js/moment.js' %}"></script>
+<script src="{% static 'js/interaction.js' %}"></script>
 <script>
     $(document).ready(function() {
             // set some button listeners
             $('#today-button').click(function(){ calendar.today(); });
             $('#go-to-date-input').change(function(){
                 if(moment($('#go-to-date-input').val()).isValid()){
-                    $('#go-to-date-button').prop('disabled', false);
+                    document.getElementById('go-to-date-button').classList.remove('disabled');
+                    document.getElementById('go-to-date-button').href = "?month=" + moment($('#go-to-date-input').val()).format("YYYY-MM");
                 } else{
-                    $('#go-to-date-button').prop('disabled', true);
-                }
-            });
-            $('#go-to-date-button').click(function(){
-                day = moment($('#go-to-date-input').val());
-                if(day.isValid()){
-                    calendar.gotoDate(day.format("YYYY-MM-DD"));
-                } else{
-                    alert('Invalid Date');
+                    document.getElementById('go-to-date-button').classList.add('disabled');
                 }
             });
         });
@@ -31,7 +25,6 @@
 .week {
   display:grid;
   grid-template-columns: repeat(7, 1fr);
-  grid-auto-flow: dense;
   grid-gap: 2px 10px;
   border: 1px solid black;
   height: 8em;
@@ -69,10 +62,6 @@
   border-bottom-left-radius: 5px;
 }
 
-.day:nth-child(1) > .event { grid-column-start: 1; }
-.day:nth-child(2) > .event { grid-column-start: 2; }
-.day:nth-child(3) > .event { grid-column-start: 3; }
-.day:nth-child(4) > .event { grid-column-start: 4; }
 
 [data-span="1"] { grid-column-end: span 1; }
 [data-span="2"] { grid-column-end: span 2; }
@@ -93,11 +82,13 @@ a {
 {% block content %}
 <div class="row justify-content-center mb-1">
     <a class="btn btn-info col-2" href="{% url 'web_calendar' %}?{{ prev_month }}"><span class="fas fa-chevron-left"></span> Previous Month</a>
-    <div class="input-group col-4">
-        <input type="date" id="go-to-date-input" placeholder="Go to date...">
-        <span class="input-group-append">
-        <button class="btn btn-success" id="go-to-date-button" type="button" disabled>Go!</button>
-        </span>
+    <div class="form-inline col-4">
+        <div class="input-group">
+            <input type="date" id="go-to-date-input" placeholder="Go to date..." class="form-control">
+            <span class="input-group-append">
+            <a class="btn btn-success" id="go-to-date-button">Go!</a>
+            </span>
+        </div>
     </div>
     <button type="button" class="btn btn-primary col-2" id="today-button">Today</button>
     <a class="btn btn-info mx-2 col-2" href="{% url 'web_calendar' %}?{{ next_month }}"><span class="fas fa-chevron-right"></span> Next Month</a>
@@ -115,10 +106,14 @@ a {
 {% for week in weeks %}
 <div class="week">
     {% for day in week %}
-    <div class="day" id="{{day.0}}">
-        <h3 class="day-label text-muted">{% if day.0 != 0 %}{{day.0}}{% endif %}</h3>
-        {{ day.2|safe }}
-    </div>
+    {% if day.0 != 0 %}
+        <div class="day" id="{{day.0}}">
+            <h3 class="day-label text-muted">{{day.0}}</h3>
+            {{ day.2|safe }}
+        </div>
+    {% else %}
+    <div class="day"><span style="grid-column: {{day.1}} + 1; grid-row: 1 / span 4;"><span></div>
+    {% endif %}
     {% endfor %}
 </div>
 {% endfor %}

RIGS/utils.py

@@ -3,45 +3,14 @@ import calendar
 from calendar import HTMLCalendar
 from RIGS.models import BaseEvent, Event, Subhire
 
-def get_html(events, day):
-    d = ''
-    for event in events:
-            # Open shared stuff
-            d += f'<a href="{event.get_edit_url()}" class="modal-href"><span class="badge badge-{event.color} w-100 text-left"'
-            if event.start_date.day != event.end_date.day:
-                if day == event.start_date.day:
-                    d += f'style="border-top-right-radius: 0; border-bottom-right-radius: 0;">{event}'
-                elif day == event.end_date.day:
-                    d += f'style="border-top-left-radius: 0; border-bottom-left-radius: 0;">&nbsp;'
-                else:
-                    d += f'style="border-radius: 0;">&nbsp;'
-            else:
-                d += f'{event}'
-            # Close shared stuff
-            d += "</span></a>"
-    return d
-
 class Calendar(HTMLCalendar):
     def __init__(self, year=None, month=None):
         self.year = year
         self.month = month
         super(Calendar, self).__init__()
 
-    # formats a day as a td
-    # filter events by day
-    def formatday(self, day, events, subhires):
-
-        d = get_html(events_per_day, day) + get_html(subhires_per_day, day)
-        if day != 0:
-            return f"<td valign='top' class='days'><span class='date'>{day}</span><br>{d}</td>"
-        return '<td></td>'
-
-    # formats a week as a tr
-    def formatweek(self, theweek, events, subhires):
-        week = ''
-        for d, weekday in theweek:
-            week += self.formatday(d, events, subhires)
-        return f'<tr> {week} </tr>'
+    def get_html(self, day, event):
+        return f"<a href='{event.get_edit_url()}' class='modal-href' style='display: contents;'><div class='event event-start event-end bg-{event.color}' data-span='{event.length}' style='grid-column-start: {day[1]}'>{event}</div></a>"
 
     def formatmonth(self, withyear=True):
         events = Event.objects.filter(start_date__year=self.year, start_date__month=self.month)
@@ -56,9 +25,9 @@ class Calendar(HTMLCalendar):
                 subhires_per_day = subhires.order_by("start_date").filter(start_date__day=day[0])
                 event_html = ""
                 for event in events_per_day:
-                    event_html += f"<a href='{event.get_edit_url()}' style='display: contents;'><div class='event event-start event-end bg-{event.color}' data-span='{event.length}'>{event}</div></a>"
+                    event_html += self.get_html(day, event)
                 for sh in subhires_per_day:
-                    event_html += f"<div class='event event-start event-end bg-{sh.color}' data-span='{sh.length}'>{sh}</div>"
+                    event_html += self.get_html(day, sh)
                 weeks_events.append((day[0], day[1], event_html))
             data.append(weeks_events)
         return data
@@ -73,12 +42,12 @@ def get_date(req_day):
 def prev_month(d):
     first = d.replace(day=1)
     prev_month = first - timedelta(days=1)
-    month = 'month=' + str(prev_month.year) + '-' + str(prev_month.month)
+    month = f'month={str(prev_month.year)}-{str(prev_month.month)}'
     return month
 
 def next_month(d):
     days_in_month = calendar.monthrange(d.year, d.month)[1]
     last = d.replace(day=days_in_month)
     next_month = last + timedelta(days=1)
-    month = 'month=' + str(next_month.year) + '-' + str(next_month.month)
+    month = f'month={str(next_month.year)}-{str(next_month.month)}'
     return month

pipeline/source_assets/js/src.js

@@ -4,16 +4,16 @@ Date.prototype.getISOString = function () {
         var dd = this.getDate().toString();
         return yyyy + '-' + (mm[1] ? mm : "0" + mm[0]) + '-' + (dd[1] ? dd : "0" + dd[0]); // padding
 };
-jQuery(document).ready(function () {
-    jQuery(document).on('click', '.modal-href', function (e) {
-        $link = jQuery(this);
+$(document).ready(function () {
+    $(document).on('click', '.modal-href', function (e) {
+        $link = $(this);
         // Anti modal inception
         if ($link.parents('#modal').length == 0) {
             e.preventDefault();
             modaltarget = $link.data('target');
             modalobject = "";
-            jQuery('#modal').load($link.attr('href'), function (e) {
-                jQuery('#modal').modal();
+            $('#modal').load($link.attr('href'), function (e) {
+                $('#modal').modal();
             });
         }
     });