Merge branch 'feature-time-input' into 'main'

Provide alternative input for availabilities/slots (in addition to calendar view) and improve default slot input

Closes #174 and #124

See merge request !151

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"
 

AKModel/templates/admin/AKModel/default_slot_editor.html

@@ -18,7 +18,8 @@
                 '{{ event.timezone }}',
                 '{{ LANGUAGE_CODE }}',
                 '{{ event.start | timezone:event.timezone | date:"Y-m-d H:i:s" }}',
-                '{{ event.end | timezone:event.timezone | date:"Y-m-d H:i:s" }}'
+                '{{ event.end | timezone:event.timezone | date:"Y-m-d H:i:s" }}',
+                '00:15:00'
             );
         });
     </script>

static_common/common/js/availabilities.js

@@ -6,7 +6,7 @@
 // It was significantly changed to deal with the newer fullcalendar version, event specific timezones,
 // to remove the dependency to moments timezone and improve the visualization of deletion
 
-function createAvailabilityEditors(timezone, language, startDate, endDate) {
+function createAvailabilityEditors(timezone, language, startDate, endDate, slotResolution='00:30:00') {
     $("input.availabilities-editor-data").each(function () {
         const eventColor = '#28B62C';
 
@@ -16,6 +16,20 @@ function createAvailabilityEditors(timezone, language, startDate, endDate) {
         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) {
             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)) {
@@ -84,9 +90,22 @@ function createAvailabilityEditors(timezone, language, startDate, endDate) {
             selectOverlap: false,
             eventOverlap: false,
             eventChange: save_events,
+            slotDuration: slotResolution,
         });
         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>");