Introduce alternative way to input availabilities and slots

Add start and end inputs below the calendar widget that can be used to add new entries to the calendar.
Inputs are based on html5 widgets, will fallback to simple text inputs in very old browsers. Modern browsers also provide an integrated validation of the time ranges. In older browsers, this will be done latest on server side.
This implements #124

AKModel/availability/forms.py

@@ -20,7 +20,8 @@ class AvailabilitiesFormMixin(forms.Form):
     availabilities = forms.CharField(
         label=_('Availability'),
         help_text=_(
-            'Click and drag to mark the availability during the event, double-click to delete.'  # Adapted help text
+            'Click and drag to mark the availability during the event, double-click to delete. '
+            'Or use the start and end inputs to add entries to the calendar view.'  # Adapted help text
         ),
         widget=forms.TextInput(attrs={'class': 'availabilities-editor-data'}),
         required=False,

AKModel/forms.py

@@ -112,7 +112,8 @@ class DefaultSlotEditorForm(AdminIntermediateForm):
     availabilities = forms.CharField(
         label=_('Default Slots'),
         help_text=_(
-            'Click and drag to mark the availability during the event, double-click to delete.'  # Adapted help text
+            'Click and drag to add default slots, double-click to delete. '
+            'Or use the start and end inputs to add entries to the calendar view.'
         ),
         widget=forms.TextInput(attrs={'class': 'availabilities-editor-data'}),
         required=True,

AKModel/locale/de_DE/LC_MESSAGES/django.po

@@ -2,7 +2,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2022-12-27 00:33+0100\n"
+"POT-Creation-Date: 2022-12-28 01:03+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -81,23 +81,24 @@ msgstr "Constraintverletzungen auf Level \"Warning\" setzen"
 msgid "Availability"
 msgstr "Verfügbarkeit"
 
-#: AKModel/availability/forms.py:23 AKModel/forms.py:115
+#: AKModel/availability/forms.py:23
 msgid ""
 "Click and drag to mark the availability during the event, double-click to "
-"delete."
+"delete. Or use the start and end inputs to add entries to the calendar view."
 msgstr ""
 "Klicken und ziehen um die Verfügbarkeiten während des Events zu markieren. "
-"Doppelt klicken um Einträge zu löschen."
+"Doppelt klicken um Einträge zu löschen. Oder Start- und End-Eingabe "
+"verwenden, um der Kalenderansicht neue Einträge hinzuzufügen."
 
-#: AKModel/availability/forms.py:87
+#: AKModel/availability/forms.py:88
 msgid "The submitted availability does not comply with the required format."
 msgstr "Die eingetragenen Verfügbarkeit haben nicht das notwendige Format."
 
-#: AKModel/availability/forms.py:100
+#: AKModel/availability/forms.py:101
 msgid "The submitted availability contains an invalid date."
 msgstr "Die eingegebene Verfügbarkeit enthält ein ungültiges Datum."
 
-#: AKModel/availability/forms.py:123 AKModel/availability/forms.py:133
+#: AKModel/availability/forms.py:124 AKModel/availability/forms.py:134
 msgid "Please fill in your availabilities!"
 msgstr "Bitte Verfügbarkeiten eintragen!"
 
@@ -212,11 +213,20 @@ msgstr ""
 msgid "Default Slots"
 msgstr "Standardslots"
 
-#: AKModel/forms.py:124
+#: AKModel/forms.py:115
+msgid ""
+"Click and drag to add default slots, double-click to delete. Or use the "
+"start and end inputs to add entries to the calendar view."
+msgstr ""
+"Klicken und ziehen um Standardslots hinzuzufügen, doppelt klicken um "
+"Einträge zu löschen. Oder Start- und End-Eingabe verwenden, um der "
+"Kalenderansicht neue Einträge hinzuzufügen."
+
+#: AKModel/forms.py:125
 msgid "New rooms"
 msgstr "Neue Räume"
 
-#: AKModel/forms.py:125
+#: AKModel/forms.py:126
 msgid ""
 "Enter room details in CSV format. Required colum is \"name\", optional "
 "colums are \"location\", \"capacity\", and \"url\" for online/hybrid rooms. "
@@ -226,7 +236,7 @@ msgstr ""
 "Spalten sind \"location\", \"capacity\", und \"url\" for Online-/"
 "HybridräumeTrennzeichen: Semikolon"
 
-#: AKModel/forms.py:136
+#: AKModel/forms.py:137
 msgid "CSV must contain a name column"
 msgstr "CSV muss eine name-Spalte enthalten"
 

static_common/common/js/availabilities.js

@@ -16,6 +16,20 @@ function createAvailabilityEditors(timezone, language, startDate, endDate, slotR
         data_field.after(editor);
         data_field.hide();
 
+        // Add inputs to add slots without the need to click and drag
+        let manualSlotAdderSource = "<form id='formManualAdd'><table class='table table-responsive mb-0'><tr>" +
+            "<td style='vertical-align: middle;'><input type='datetime-local' id='inputStart' value='" + startDate + "' min='" + startDate + "' max='" + endDate + "'></td>" +
+            "<td style='vertical-align: middle;'><i class=\"fas fa-long-arrow-alt-right\"></i></td>" +
+            "<td style='vertical-align: middle;'><input type='datetime-local' id='inputEnd' value='" + endDate + "' min='" + startDate + "' max='" + endDate + "'></td>" +
+            "<td><button class='btn btn-primary' type='submit'><i class=\"fas fa-plus\"></i></button></td></tr></table></form>";
+        let manualSlotAdder = $(manualSlotAdderSource);
+        editor.after(manualSlotAdder);
+
+        $('#formManualAdd').submit(function(event) {
+            add($('#inputStart').val(), $('#inputEnd').val());
+            event.preventDefault();
+        });
+
         let editable = !Boolean(data_field.attr("disabled"));
         let data = JSON.parse(data_field.attr("value"));
         let events = data.availabilities.map(function (e) {
@@ -58,15 +72,7 @@ function createAvailabilityEditors(timezone, language, startDate, endDate, slotR
             events: data.availabilities,
             eventBackgroundColor: eventColor,
             select: function (info) {
-                resetDeletionCandidate();
-                plan.addEvent({
-                    title: "",
-                    start: info.start,
-                    end: info.end,
-                    id: 'new' + newEventsCounter
-                })
-                newEventsCounter++;
-                save_events();
+                add(info.start, info.end);
             },
             eventClick: function (info) {
                 if (eventMarkedForDeletion !== undefined && (eventMarkedForDeletion.id === info.event.id)) {
@@ -88,6 +94,18 @@ function createAvailabilityEditors(timezone, language, startDate, endDate, slotR
         });
         plan.render();
 
+        function add(start, end) {
+            resetDeletionCandidate();
+            plan.addEvent({
+                title: "",
+                start: start,
+                end: end,
+                id: 'new' + newEventsCounter
+            })
+            newEventsCounter++;
+            save_events();
+        }
+
         function makeDeletionCandidate(el) {
             el.classList.add("deleteEvent");
             $(el).find(".fc-event-title").html("<i class='fas fa-trash'></i> <i class='fas fa-question'></i>");