PYRSS-Website/apps/home/static/home/js/servers.js

// #region Loaded Servers

var _loadedServers = []
var selectedServer = null;

function getLoadedServer(options) {
    let servers = _loadedServers.filter(item => {

        for (let key in options) {
            if (item[key] !== options[key]) {
                return false
            }
        }

        return true;
    });

    return servers || [];
}

function getServerFromSnowflake(id) {
    server = getLoadedServer({id: id});
    if (!server.length) {
        throw new Error("No Server with that ID");
    }

    return server[0];
}

function addToLoadedServers(serverData, autoSelect=false) {
    _loadedServers.push(serverData);
    createSelectButton(serverData);

    if (autoSelect) {
        selectServer(serverData["id"]);
    }
}

function removeFromLoadedServers(id) {
    _loadedServers = _loadedServers.filter(item => item.id !== id);
    removeSelectButton(id)

    if (selectedServer.id === id) {
        selectedServer(null);
    }
}

// #endregion

// #region UI Buttons

function createSelectButton(serverData) {
    // server details
    let id = serverData["id"];
    let name = serverData["name"];
    let iconHash = serverData["icon"];

    let template = $($("#serverItemTemplate").html());
    let imageUrl = `https://cdn.discordapp.com/icons/${id}/${iconHash}.webp?size=80`;
    let altText = name.split(' ').map(word => word.charAt(0)).join('');  // initials of server name, used if iconUrl is 404

    template.find("img").attr("src", imageUrl).attr("alt", altText);
    template.find(".js-guildName").text(name);
    template.find(".js-guildId").text(id);
    template.attr("data-id", id);

    // Bind the button for selecting this server
    template.find(".server-item-selector").off("click").on("click", function() {
        $(".server-item-selector").removeClass("active");
        $(this).addClass("active");
        selectServer(id);
    });

    $("#serverList").prepend(template);
}

function removeSelectButton(id) {
    $(`#serverList .server-item[data-id=${id}]`).remove();
}

$("#backToSelectServer").on("click", function() {
    $("#noSelectedServer").show();
    $("#selectedServerContainer").hide();
    $("#serverList .server-item > .server-item-selector.active").removeClass("active");
    selectedServer = null;
});

// #endregion

// #region Server Selection

function selectServer(id) {
    let server = getServerFromSnowflake(id);
    if (!server) {
        $("#noSelectedServer").show();
        $("#selectedServerContainer").hide();
        selectServer = null;
        return;
    }

    // Change appearance of selected vs none-selected items
    $("#serverList .server-item").removeClass("active");
    $(`#serverList .server-item[data-id=${id}]`).addClass("active"); 

    // Global variable
    selectedServer = server;

    // Update UI
    $("#noSelectedServer").hide();
    $("#selectedServerContainer").show().css("display", "flex");

    // Announce change to any listeners
    $(document).trigger("selectedServerChange");
}

// #endregion

// #region Resolve Strings

function resolveServerStrings() {
    // Server icon
    $(".resolve-to-server-icon").attr(
        "src",
        `https://cdn.discordapp.com/icons/${selectedServer.id}/${selectedServer.icon}.webp?size=80`
    );

    // Server names
    $(".resolve-to-server-name").text(selectedServer.name);

    // Server Guild Ids
    $(".resolve-to-server-id").text(selectedServer.id);

    // Bot Invite links
    $(".resolve-to-invite-link").attr("href", `https://discord.com/oauth2/authorize
?client_id=${discordClientId}
&permissions=2147534848
&scope=bot+applications.commands
&guild_id=${selectedServer.id}
&disable_guild_select=true`);
}

// #endregion

// #region Change Listener

$(document).on("selectedServerChange", function() {
    resolveServerStrings();
    $("#serverJoinAlert").hide();
});

// #endregion

// #region Load Servers

async function loadServers() {

    $(".server-loading-item").show();
    try {
        let response = await generateServers();
        $(".server-loading-item").hide();

        if (response.hasOwnProperty("retry_after")) {
            $(".server-rate-limit").show();
            return;
        }

        response.forEach(server => {
            addToLoadedServers(server, false);
        });

    }
    catch (error) {
        logError(error);
    }
}

// #endregion