Wir haben euch bereits unsere Applikation für Veranstaltungs-Buchungen vorgestellt. Sind bereits alle Plätze für einen Termin einer Veranstaltung vergeben, haben wir nun die Funktionalität für eine Warteliste hinzugefügt. In diesem Beitrag möchten wir euch gerne genauere Einblicke in die Umsetzung geben.

Anmelden zur Veranstaltungs-Warteliste

Ein Benutzer hat die Möglichkeit sich zu einem Termin einer Veranstaltung anzumelden. Jeder Termin hat jedoch eine fixe Teilnehmeranzahl. Wurden bereits alle Plätze gebucht, stellen wir dies mit einem Hinweis bei dem Termin dar. Ein Benutzer hat dann allerdings die Möglichkeit, sich auf eine Warteliste für diesen Termin setzen zu lassen. Dafür muss er einfach auf den Button „Auf die Warteliste“ klicken.

Wenn sich dann ein Benutzer, welcher den Termin gebucht hat, abmeldet, rückt der nächste Benutzer von der Warteliste automatisch nach. Er ist damit für den Termin angemeldet und wird per E-Mail verständigt.

Weiters hat ein Benutzer auch die Möglichkeit, sich wieder von der Warteliste abzumelden.

Technische Umsetzung

Für die Warteliste haben wir ein neues Feld „Warteliste“ vom Typ „Mehrere Textzeilen“ in der Termin-Liste hinzugefügt. Dort speichern wir uns die ID, den Namen und die E-Mail-Adresse der Benutzer für die Warteliste im JSON Format ab.

Beispiel:
[{"id":13,"title":"Verena Schönleitner","email":"verena@openinnovationhub.onmicrosoft.com"}]

Meldet sich ein Benutzer für die Warteliste an, fügen wir diesen in das Feld „Warteliste“ hinzu.

let waitingList: IAttendee[] = listItem.Warteliste 
    ? JSON.parse(listItem.Warteliste) as IAttendee[] 
    : [];

const updatedListItem = await sp.web.lists.getByTitle(this.eventDateList).items.getById(eventDate.id).update({
    Warteliste: this.serializeWaitingList([...waitingList, attendee]),
});

Meldet sich ein Benutzer, welcher den Termin gebucht hat, ab, lesen wir die Warteliste aus. Wir entfernen dann den ersten Benutzer der Warteliste und fügen ihn zu den Teilnehmern hinzu. Wir informieren den Benutzer darüber mit einer E-Mail.

let existingAttendeeIds = listItem.Teilnehmer !== undefined 
    ? listItem.Teilnehmer.filter(t => t.Id !== attendee.id) 
    : [];

const waitingList: IAttendee[] = listItem.Warteliste !== undefined 
    ? JSON.parse(listItem.Warteliste) as IAttendee[] 
    : [];

// Moves the first attendee from wating list up
let waitingListAttendeeElevated = false;
let waitingListAttendee: IAttendee;
if (waitingList && waitingList.length > 0) {
    waitingListAttendee = waitingList.shift();
    existingAttendeeIds = [...existingAttendeeIds, waitingListAttendee.id];
    waitingListAttendeeElevated = true;
}

const updatedListItem = await sp.web.lists.getByTitle(this.eventDateList).items.getById(eventDate.id).update({
    TeilnehmerId: { results: [...existingAttendeeIds] },
    Warteliste: this.serializeWaitingList(waitingList),
});

// Send mail if attendee moves up from waiting list
if (waitingListAttendeeElevated) {
    await this.sendEmailToAttendee(event, updatedEventDate, waitingListAttendee);
}

Haben wir euer Interesse geweckt und hättet ihr gerne nähere Informationen zu unserer SharePoint Veranstaltungs-Warteliste? Dann nehmt gerne Kontakt mit uns auf.

Kontakt aufnehmen