Merge branch 'feature-better-js' into 'main'

JS-based improvements

Closes #98

See merge request kif/akplanning!238

AKPlanning/settings.py

@@ -227,7 +227,7 @@ LOGIN_REDIRECT_URL = SIMPLE_BACKEND_REDIRECT_URL
 
 # Content Security Policy
 CSP_DEFAULT_SRC = ("'self'",)
-CSP_SCRIPT_SRC = ("'self'", "'unsafe-inline'")
+CSP_SCRIPT_SRC = ("'self'", "'unsafe-inline'", "'unsafe-eval'")
 CSP_STYLE_SRC = ("'self'", "'unsafe-inline'", "fonts.googleapis.com")
 CSP_IMG_SRC = ("'self'", "data:")
 CSP_FRAME_SRC = ("'self'", )

AKSubmission/locale/de_DE/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-08-16 16:30+0200\n"
+"POT-Creation-Date: 2025-02-02 23:53+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"
@@ -17,16 +17,16 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: AKSubmission/forms.py:93
+#: AKSubmission/forms.py:95
 #, python-format
 msgid "\"%(duration)s\" is not a valid duration"
 msgstr "\"%(duration)s\" ist keine gültige Dauer"
 
-#: AKSubmission/forms.py:159
+#: AKSubmission/forms.py:155
 msgid "Duration(s)"
 msgstr "Dauer(n)"
 
-#: AKSubmission/forms.py:161
+#: AKSubmission/forms.py:157
 msgid ""
 "Enter at least one planned duration (in hours). If your AK should have "
 "multiple slots, use multiple lines"
@@ -34,7 +34,7 @@ msgstr ""
 "Mindestens eine geplante Dauer (in Stunden) angeben. Wenn der AK mehrere "
 "Slots haben soll, mehrere Zeilen verwenden"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:22
+#: AKSubmission/templates/AKSubmission/ak_detail.html:23
 #: AKSubmission/templates/AKSubmission/ak_edit.html:13
 #: AKSubmission/templates/AKSubmission/ak_history.html:16
 #: AKSubmission/templates/AKSubmission/ak_overview.html:22
@@ -52,172 +52,162 @@ msgstr ""
 msgid "AK Submission"
 msgstr "AK-Eintragung"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:77
+#: AKSubmission/templates/AKSubmission/ak_detail.html:127
 #: AKSubmission/templates/AKSubmission/ak_interest_script.html:50
 msgid "Interest indication currently not allowed. Sorry."
 msgstr "Interessenangabe aktuell nicht erlaubt. Sorry."
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:79
+#: AKSubmission/templates/AKSubmission/ak_detail.html:129
 #: AKSubmission/templates/AKSubmission/ak_interest_script.html:52
 msgid "Could not save your interest. Sorry."
 msgstr "Interesse konnte nicht gespeichert werden. Sorry."
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:100
+#: AKSubmission/templates/AKSubmission/ak_detail.html:150
 msgid "Interest"
 msgstr "Interesse"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:102
+#: AKSubmission/templates/AKSubmission/ak_detail.html:152
 #: AKSubmission/templates/AKSubmission/ak_table.html:55
 msgid "Show Interest"
 msgstr "Interesse bekunden"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:108
+#: AKSubmission/templates/AKSubmission/ak_detail.html:158
 #: AKSubmission/templates/AKSubmission/ak_table.html:46
 msgid "Open external link"
 msgstr "Externen Link öffnen"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:113
+#: AKSubmission/templates/AKSubmission/ak_detail.html:163
 msgid "Open protocol link"
 msgstr "Protokolllink öffnen"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:118
+#: AKSubmission/templates/AKSubmission/ak_detail.html:168
 #: AKSubmission/templates/AKSubmission/ak_history.html:19
 #: AKSubmission/templates/AKSubmission/ak_history.html:31
 msgid "History"
 msgstr "Versionsgeschichte"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:121
+#: AKSubmission/templates/AKSubmission/ak_detail.html:171
 #: AKSubmission/templates/AKSubmission/akmessage_add.html:8
 #: AKSubmission/templates/AKSubmission/akmessage_add.html:16
 #: AKSubmission/templates/AKSubmission/akmessage_add.html:22
 msgid "Add confidential message to organizers"
 msgstr "Sende eine private Nachricht an das Organisationsteam"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:124
-#: AKSubmission/templates/AKSubmission/ak_detail.html:269
+#: AKSubmission/templates/AKSubmission/ak_detail.html:174
+#: AKSubmission/templates/AKSubmission/ak_detail.html:317
 #: AKSubmission/templates/AKSubmission/ak_edit.html:16
 #: AKSubmission/templates/AKSubmission/ak_table.html:51
 msgid "Edit"
 msgstr "Bearbeiten"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:129
+#: AKSubmission/templates/AKSubmission/ak_detail.html:179
 #: AKSubmission/templates/AKSubmission/ak_history.html:31
 #: AKSubmission/templates/AKSubmission/ak_table.html:34
 msgid "AK Wish"
 msgstr "AK-Wunsch"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:136
+#: AKSubmission/templates/AKSubmission/ak_detail.html:187
 #, python-format
 msgid ""
-"\n"
-"                        This AK currently takes place for another "
-"%(featured_slot_remaining)s minute(s) in %(room)s.\n"
-"                        &nbsp;\n"
-"                    "
+"This AK currently takes place for another <span v-html=\"timeUntilEnd\">"
+"%(featured_slot_remaining)s</span> minute(s) in %(room)s.&nbsp;"
 msgstr ""
-"\n"
-"                        Dieser AK findet noch %(featured_slot_remaining)s "
-"Minute(n) in %(room)s statt.&nbsp;\n"
+"Dieser AK findet noch <span v-html=\"timeUntilEnd\">"
+"%(featured_slot_remaining)s</span> Minute(n) in %(room)s statt.&nbsp;\n"
 "                    "
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:142
-#, python-format
+#: AKSubmission/templates/AKSubmission/ak_detail.html:190
 msgid ""
-"\n"
-"                        This AK starts in %(featured_slot_remaining)s "
-"minute(s) in %(room)s.&nbsp;\n"
-"                    "
+"This AK starts in <span v-html=\"timeUntilStart\">"
+"%(featured_slot_remaining)s</span> minute(s) in %(room)s.&nbsp;"
 msgstr ""
-"\n"
-"                        This AK beginnt in %(featured_slot_remaining)s "
-"Minute(n) in %(room)s.&nbsp;\n"
+"Dieser AK beginnt in <span v-html=\"timeUntilStart\">"
+"%(featured_slot_remaining)s</span> Minute(n) in %(room)s.&nbsp;\n"
 "                    "
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:149
-#: AKSubmission/templates/AKSubmission/ak_detail.html:277
+#: AKSubmission/templates/AKSubmission/ak_detail.html:195
+#: AKSubmission/templates/AKSubmission/ak_detail.html:325
 msgid "Go to virtual room"
 msgstr "Zum virtuellen Raum"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:158
+#: AKSubmission/templates/AKSubmission/ak_detail.html:206
 #: AKSubmission/templates/AKSubmission/ak_table.html:10
 msgid "Who?"
 msgstr "Wer?"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:164
+#: AKSubmission/templates/AKSubmission/ak_detail.html:212
 #: AKSubmission/templates/AKSubmission/ak_history.html:36
 #: AKSubmission/templates/AKSubmission/ak_table.html:11
 msgid "Category"
 msgstr "Kategorie"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:171
+#: AKSubmission/templates/AKSubmission/ak_detail.html:219
 #: AKSubmission/templates/AKSubmission/ak_history.html:37
 msgid "Track"
 msgstr "Track"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:177
-#, fuzzy
-#| msgid "Present results of this AK"
+#: AKSubmission/templates/AKSubmission/ak_detail.html:225
 msgid "Present this AK"
-msgstr "Die Ergebnisse dieses AKs vorstellen"
+msgstr "Diesen AK vorstellen"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:182
+#: AKSubmission/templates/AKSubmission/ak_detail.html:230
 msgid "(Category Default)"
 msgstr "(Kategorievoreinstellung)"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:188
+#: AKSubmission/templates/AKSubmission/ak_detail.html:236
 msgid "Reso intention?"
 msgstr "Resoabsicht?"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:195
+#: AKSubmission/templates/AKSubmission/ak_detail.html:243
 msgid "Requirements"
 msgstr "Anforderungen"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:208
+#: AKSubmission/templates/AKSubmission/ak_detail.html:256
 msgid "Conflicting AKs"
 msgstr "AK-Konflikte"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:216
+#: AKSubmission/templates/AKSubmission/ak_detail.html:264
 msgid "Prerequisite AKs"
 msgstr "Vorausgesetzte AKs"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:224
+#: AKSubmission/templates/AKSubmission/ak_detail.html:272
 msgid "Notes"
 msgstr "Notizen"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:237
+#: AKSubmission/templates/AKSubmission/ak_detail.html:285
 msgid "When?"
 msgstr "Wann?"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:239
+#: AKSubmission/templates/AKSubmission/ak_detail.html:287
 #: AKSubmission/templates/AKSubmission/akslot_delete.html:35
 msgid "Duration"
 msgstr "Dauer"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:241
+#: AKSubmission/templates/AKSubmission/ak_detail.html:289
 msgid "Room"
 msgstr "Raum"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:272
+#: AKSubmission/templates/AKSubmission/ak_detail.html:320
 msgid "Delete"
 msgstr "Löschen"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:283
+#: AKSubmission/templates/AKSubmission/ak_detail.html:331
 msgid "Schedule"
 msgstr "Schedule"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:295
+#: AKSubmission/templates/AKSubmission/ak_detail.html:343
 msgid "Add another slot"
 msgstr "Einen neuen AK-Slot hinzufügen"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:305
+#: AKSubmission/templates/AKSubmission/ak_detail.html:353
 msgid "Possible Times"
 msgstr "Mögliche Zeiten"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:309
+#: AKSubmission/templates/AKSubmission/ak_detail.html:357
 msgid "Start"
 msgstr "Start"
 
-#: AKSubmission/templates/AKSubmission/ak_detail.html:310
+#: AKSubmission/templates/AKSubmission/ak_detail.html:358
 msgid "End"
 msgstr "Ende"
 

AKSubmission/templates/AKSubmission/ak_detail.html

@@ -27,6 +27,55 @@
     {% block imports %}
         {% include "AKPlan/plan_akslot.html" %}
 
+        <script type="module">
+          const { createApp } = Vue
+
+          function getCurrentTimestamp() {
+                return Date.now() / 1000
+            }
+
+          createApp({
+            delimiters: ["[[", "]]"],
+            data() {
+              return {
+                  featuredSlot: "{% if featured_slot %}true{% else %}false{% endif %}",
+                  timer: null,
+                  now: getCurrentTimestamp(),
+                  akStart: "{{ featured_slot.start | date:'U' }}",
+                  akEnd: "{{ featured_slot.end | date:'U' }}",
+                  showBoxWithoutJS: false,
+              }
+            },
+            computed: {
+                showFeatured() {
+                    return this.featuredSlot && this.now < this.akEnd
+                },
+                isBefore() {
+                    return this.featuredSlot && this.now < this.akStart
+                },
+                isDuring() {
+                    return this.featuredSlot && this.akStart < this.now && this.now < this.akEnd
+                },
+                timeUntilStart() {
+                    return Math.ceil((this.akStart - this.now) / 60)
+                },
+                timeUntilEnd() {
+                    return Math.floor((this.akEnd - this.now) / 60)
+                }
+            },
+            mounted: function () {
+                if(this.featuredSlot) {
+                    this.timer = setInterval(() => {
+                        this.now = getCurrentTimestamp()
+                    }, 10000)
+                }
+            },
+            beforeUnmount() {
+                clearInterval(this.timer)
+            }
+          }).mount('#app')
+        </script>
+
         <script>
             document.addEventListener('DOMContentLoaded', function () {
                 // CSRF Protection/Authentication
@@ -128,30 +177,28 @@
 
     <h2>{% if ak.wish %}{% trans "AK Wish" %}: {% endif %}{{ ak.name }}</h2>
 
-    {# Show current or upcoming slot featured in a box on top of the plage #}
-    {% if featured_slot_type != "NONE" %}
-        <div class="card border-success mt-3 mb-3">
-            <div class="card-body font-weight-bold">
-                {% if featured_slot_type == "CURRENT" %}
-                    {% blocktrans with room=featured_slot.room %}
-                        This AK currently takes place for another {{ featured_slot_remaining }} minute(s) in {{ room }}.
-                        &nbsp;
-                    {% endblocktrans %}
-
-                {% elif featured_slot_type == "UPCOMING" %}
-                    {% blocktrans with room=featured_slot.room %}
-                        This AK starts in {{ featured_slot_remaining }} minute(s) in {{ room }}.&nbsp;
-                    {% endblocktrans %}
-                {% endif %}
+    <div id="app">
+        {# Show current or upcoming slot featured in a box on top of the plage #}
+        {% if featured_slot_type != "NONE" %}
+            <div class="card border-success mt-3 mb-3" v-show="showFeatured">
+                <div class="card-body font-weight-bold">
+                    <span v-show="isDuring" style="{% if not featured_slot_type == "CURRENT" %}display:none;{% endif %}">
+                        {% blocktrans with room=featured_slot.room %}This AK currently takes place for another <span v-html="timeUntilEnd">{{ featured_slot_remaining }}</span> minute(s) in {{ room }}.&nbsp;{% endblocktrans %}
+                    </span>
+                    <span v-show="isBefore" style="{% if not featured_slot_type == "UPCOMING" %}display:none;{% endif %}">
+                        {% blocktrans with room=featured_slot.room %}This AK starts in <span v-html="timeUntilStart">{{ featured_slot_remaining }}</span> minute(s) in {{ room }}.&nbsp;{% endblocktrans %}
+                    </span>
 
-                {% if "AKOnline"|check_app_installed and featured_slot.room.virtual and featured_slot.room.virtual.url != '' %}
-                    <a class="btn btn-success" target="_parent" href="{{ featured_slot.room.virtual.url }}">
-                        {% fa6_icon 'external-link-alt' 'fas' %} {% trans "Go to virtual room" %}
-                    </a>
-                {% endif %}
+                    {% if "AKOnline"|check_app_installed and featured_slot.room.virtual and featured_slot.room.virtual.url != '' %}
+                        <a class="btn btn-success" target="_parent" href="{{ featured_slot.room.virtual.url }}">
+                            {% fa6_icon 'external-link-alt' 'fas' %} {% trans "Go to virtual room" %}
+                        </a>
+                    {% endif %}
+                </div>
             </div>
-        </div>
-    {% endif %}
+        {% endif %}
+    </div>
+
 
     <table class="table table-borderless">
         <tr>

docs/conf.py

@@ -11,7 +11,7 @@ import django
 # https://www.sphinx-doc.org/en/master/usage/configuration.html#project-information
 
 project = 'AK Planning'
-copyright = '2023, N. Geisler, B. Hättasch & more'
+copyright = '2025, N. Geisler, B. Hättasch & more'
 author = 'N. Geisler, B. Hättasch & more'
 
 # -- General configuration ---------------------------------------------------

templates/base.html

@@ -31,6 +31,7 @@
         <script src="{% static 'common/vendor/jquery/jquery-3.6.3.min.js' %}"></script>
         <script src="{% static 'common/vendor/select2/select2.min.js' %}"></script>
         {% fontawesome_6_js %}
+        <script src="{% static 'common/vendor/vuejs/vue.global.js' %}"></script>
     {% endcompress %}
 
     <script type='text/javascript'>