lumi2/lumi2/static/js/group_edit.js

$(function() {
    $("table").tablesorter({
        theme: 'bootstrap',
        headerTemplate: '{content} {icon}',
        cssIcon: 'bi-arrow-down-up',
        cssIconNone: '',
        cssIconAsc: 'bi-arrow-up',
        cssIconDesc: 'bi-arrow-down',
    });
});

class UserEntry {
    constructor(username, isMember, rowElement) {
        this.username = username;
        this.isMember = isMember;
        this.rowElement = rowElement;
        this.buttonElement = $(rowElement).find(".toggleMembershipButton");
        if (isMember) {
            $(this.buttonElement).click(() => this.onClickLeave());
        } else {
            $(this.buttonElement).click(() => this.onClickJoin());
        }
    }

    onClickLeave() {
        // Deactivate the last remaining member's togglebutton before leaving
        if ($(membersTable).find(".userEntry").length < 2) {
            for (entry of $(membersTable).find(".userEntry")) {
                if ($(entry).id != this.username) {
                    $(entry).find(".toggleMembershipButton")[0].prop("disabled", true);
                }
            }
        }

        this.setButtonAppearanceInProgress();

        $.ajax({
            context: {
                "userEntry": this
            },
            url: `/api/group/${groupname}`,
            type: "GET",
            dataType: "json",
        }).done(function(groupJson) {
            $.ajax({
                context: {
                    "userEntry": this.userEntry,
                },
                url: `/api/group/${groupname}`,
                type: "PUT",
                dataType: "json",
                data: JSON.stringify(groupJson),
                contentType: "application/json",
            })
            .done(function(groupJson) {
                this.userEntry.isMember = false;
                $(this.userEntry.buttonElement).off("click");
                $(this.userEntry.buttonElement).click(() => this.userEntry.onClickJoin());
                $(this.userEntry.rowElement).prependTo($("#tableNonMembers").find("tbody"));
                this.userEntry.setButtonAppearanceJoinGroup();
            })
            .fail(function(xhr, status, errorThrown) {
                console.log(`Error: ${errorThrown}`);
                console.log(`Status: ${status}`);
                console.dir(xhr);
                alert("Sorry, there was a problem sending information to the server.");

                this.userEntry.setButtonAppearanceLeaveGroup();
            });
        }).fail(function(xhr, status, errorThrown) {
            console.log(`Error: ${errorThrown}`);
            console.log(`Status: ${status}`);
            alert("Sorry, there was a problem retrieving information from the server.");

            this.userEntry.setButtonAppearanceLeaveGroup();
        });
    }

    onClickJoin() {
        this.setButtonAppearanceInProgress();

        $.ajax({
            context: {
                "userEntry": this
            },
            url: `/api/group/${groupname}`,
            type: "GET",
            dataType: "json",
        }).done(function(groupJson) {
            // Add current user to the members array
            groupJson.group.members.push(this.userEntry.username);
            $.ajax({
                context: {
                    "userEntry": this.userEntry,
                },
                url: `/api/group/${groupname}`,
                type: "PUT",
                dataType: "json",
                data: JSON.stringify(groupJson),
                contentType: "application/json",
            })
            .done(function(groupJson) {
                this.userEntry.isMember = true;
                $(this.userEntry.buttonElement).off("click");
                $(this.userEntry.buttonElement).click(() => this.userEntry.onClickLeave());
                $(this.userEntry.rowElement).prependTo($("#tableMembers").find("tbody"));
                this.userEntry.setButtonAppearanceLeaveGroup();
            })
            .fail(function(xhr, status, errorThrown) {
                console.log(`Error: ${errorThrown}`);
                console.log(`Status: ${status}`);
                console.dir(xhr);
                alert("Sorry, there was a problem sending information to the server.");

                this.userEntry.setButtonAppearanceJoinGroup();
            });
        }).fail(function(xhr, status, errorThrown) {
            console.log(`Error: ${errorThrown}`);
            console.log(`Status: ${status}`);
            alert("Sorry, there was a problem retrieving information from the server.");
            this.userEntry.setButtonAppearanceJoinGroup();
        });
    }

    setButtonAppearanceInProgress() {
        this.buttonElement.removeClass("btn-danger btn-success btn-secondary");
        this.buttonElement.addClass("btn-secondary");
        this.buttonElement.empty();
        this.buttonElement.html(
            '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>' + 
            '<span> Loading...</span>'
        );
    }

    setButtonAppearanceLeaveGroup() {
        this.buttonElement.removeClass("btn-danger btn-success btn-secondary");
        this.buttonElement.addClass("btn-danger");
        this.buttonElement.empty();
        this.buttonElement.html(
            '<i class="bi-box-arrow-right"></i> Remove from group'
        );
    }

    setButtonAppearanceJoinGroup() {
        this.buttonElement.removeClass("btn-danger btn-success btn-secondary");
        this.buttonElement.addClass("btn-success");
        this.buttonElement.empty();
        this.buttonElement.html(
            '<i class="bi-box-arrow-right"></i> Add to group'
        );
    }
}

function getUserEntries() {
    let userEntries = [];

    // Construct member entries
    for (let entry of membersTable.find("tbody").find(".userEntry")) {
        userEntries.push(new UserEntry(
            entry.id,
            true,
            entry
        ));
    }

    // Construct nonmember entries
    for (let entry of nonMembersTable.find("tbody").find(".userEntry")) {
        userEntries.push(new UserEntry(
            entry.id,
            false,
            entry
        ));
    }

    return userEntries;
}

let nonMembersTable = undefined;
let membersTable = undefined;
let entries = undefined;
const groupname = window.location.pathname.split("/").pop();

$(document).ready(function() {
    nonMembersTable = $("#tableNonMembers");
    membersTable = $("#tableMembers");
    entries = getUserEntries();
});