Add private event invitations

app/templates/new_concert.html

@@ -126,6 +126,21 @@
                 <small>Zum Beispiel ein gemeinsames Vortrinken vor einem Konzert.</small>
             </p>
 
+            <fieldset id="event-visibility-field" hidden>
+                <legend>Sichtbarkeit</legend>
+                <label><input type="radio" name="visibility" value="public" checked> Öffentlich – alle können die Veranstaltung sehen und teilnehmen</label><br>
+                <label><input type="radio" name="visibility" value="friends"> Nur Freunde – nur bestätigte Freunde können sie sehen und teilnehmen</label><br>
+                <label><input type="radio" name="visibility" value="private"> Privat – nur gezielt eingeladene Mitglieder</label>
+            </fieldset>
+
+            <fieldset id="event-invitations-field" hidden>
+                <legend>Mitglieder einladen</legend>
+                <p class="flyer-help">Eingeladene erhalten eine Benachrichtigung und sehen die Veranstaltung in ihrer Übersicht.</p>
+                {% for member in invitable_users %}
+                    <label style="display:block;margin:7px 0"><input type="checkbox" name="invited_user_ids" value="{{ member.id }}"> {{ member.display_name }} <small>@{{ member.username }}</small></label>
+                {% else %}<p>Noch keine weiteren Mitglieder vorhanden.</p>{% endfor %}
+            </fieldset>
+
             <!-- ================================================= -->
             <!-- Künstler -->
             <!-- ================================================= -->
@@ -389,6 +404,9 @@ const parentEventField = document.getElementById("parent-event-field");
 const parentEventId = document.getElementById("parent-event-id");
 const festivalEndField = document.getElementById("festival-end-field");
 const festivalEndDatetime = document.getElementById("festival-end-datetime");
+const eventVisibilityField = document.getElementById("event-visibility-field");
+const eventInvitationsField = document.getElementById("event-invitations-field");
+const visibilityInputs = [...document.querySelectorAll('input[name="visibility"]')];
 
 function updateEventFields() {
     const isFestival = eventType.value === "festival";
@@ -396,11 +414,15 @@ function updateEventFields() {
     festivalEndField.hidden = !isFestival;
     festivalEndDatetime.required = isFestival;
     parentEventField.hidden = !isOther;
+    eventVisibilityField.hidden = !isOther;
+    const isPrivate = isOther && document.querySelector('input[name="visibility"]:checked').value === "private";
+    eventInvitationsField.hidden = !isPrivate;
     if (!isFestival) festivalEndDatetime.value = "";
     if (!isOther) parentEventId.value = "";
 }
 
 eventType.addEventListener("change", updateEventFields);
+visibilityInputs.forEach(input => input.addEventListener("change", updateEventFields));
 updateEventFields();
 
 /* ============================================================