PYRSS-Website/apps/templates/home/index.html

{% extends "layouts/base.html" %}

{% load static %}

{% block title %} Blank Page {% endblock title %}

<!-- Specific CSS goes HERE  -->
{% block stylesheets %}
<link rel="stylesheet" href="{% static 'css/home/main.css' %}">
<link rel="stylesheet" href="{% static '/css/select2-bootstrap.min.css' %}">
{% endblock stylesheets %}

{% block content %}

<!-- ### $App Screen Content ### -->
<main class="main-content bg-body-tertiary">
    <div id="mainContent">
        <div class="full-container d-flex">

            <div class="peers as-s ai-s w-100">
                <div class="peer bg-body-secondary">
                    <div id="serverList" class="p-2 layers border-end h-100">
                        <div class="layer mb-2">
                            <button type="button" id="newServerBtn" class="btn btn-secondary rounded-3 p-1 bd" onclick="javascript: openServerModal();">
                                <span class="d-flex jc-c ai-c" style="width: 50px; height: 50px;">
                                    <i class="bi bi-plus-lg fs-4"></i>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="peer-greed">
                    <header class="px-4 py-3 border-bottom">
                        <div class="peers">
                            <div class="peer-greed">
                                <div class="peers ai-c">
                                    <div class="peer">
                                        <img src="https://cdn.discordapp.com/icons/136501320340209664/bc41eb01d667196c17e05c045f357268.webp?size=80" alt="" width="80">
                                    </div>
                                    <div class="peer-greed ms-4">
                                        <h3 class="mb-1">Project Zomboid</h3>
                                        <h6 class="mb-0">1039201459188805692</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="peer d-flex as-s ai-c">
                                <button type="button" id="newSubscriptionBtn" class="btn btn-primary">New Subscription</button>
                            </div>
                        </div>
                    </header>

                    <div id="subscriptionContainer" class="container-fluid p-4">
                        <div class="row">
                            <div class="col-3 mb-4">
                                <div class="bg-body p-4 bd rounded-3">
                                    test
                                </div>
                            </div>
                            <div class="col-3 mb-4">
                                <div class="bg-body p-4 bd rounded-3">
                                    test
                                </div>
                            </div>
                            <div class="col-3 mb-4">
                                <div class="bg-body p-4 bd rounded-3">
                                    test
                                </div>
                            </div>
                            <div class="col-3 mb-4">
                                <div class="bg-body p-4 bd rounded-3">
                                    test
                                </div>
                            </div>
                            <div class="col-3 mb-4">
                                <div class="bg-body p-4 bd rounded-3">
                                    test
                                </div>
                            </div>
                            <div class="col-3 mb-4">
                                <div class="bg-body p-4 bd rounded-3">
                                    test
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</main>

{% include "home/includes/servermodal.html" %}

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

<script id="serverItemTemplate" type="text/template">
    <div class="layer mb-2">
        <button type="button" class="rounded-3 p-1 bg-body bd">
            <img src="" class="rounded-3" alt="" width="50" height="50">
            <!-- https://cdn.discordapp.com/icons/136501320340209664/bc41eb01d667196c17e05c045f357268.webp?size=80 -->
        </button>
    </div>
</script>

<script src="{% static 'js/api.js' %}"></script>
<script>
    function openServerModal() {

        $("#newServerBtn").prop("disabled", true);

        $('#serverOptions').val(null).trigger('change');
        $("#serverOptions").empty();

        $.ajax({
            url: "/guilds",
            type: "GET",
            success: function(response) {
                for (i = 1; i < response.length; i++) {
                    var guild = response[i];
                    $("#serverOptions").append($("<option>", {
                        value: guild.id,
                        text: guild.name,
                        "data-icon": guild.icon
                    }));
                }

                $("#newServerBtn").prop("disabled", false);
                $("#serverForm .modal").modal("show");
            },
            error: function(response) {
                $("#newServerBtn").prop("disabled", false);
                alert(JSON.stringify(response, null, 4));
            }
        });
    };

    function addServer(serverName, serverId, serverIconHash) {
        var formData = new FormData();
        formData.append("name", serverName);
        formData.append("guild_id", serverId);
        formData.append("icon", serverIconHash);

        newSavedGuild(formData)
            .then(resp => {
                alert(JSON.stringify(resp, null, 4));
            })
            .catch(err => {
                alert(JSON.stringify(err, null, 4));
            })

        addServerTemplate(serverId, serverIconHash);
    }

    $(document).ready(function() {
        getSavedGuilds()
            .then(resp => {
                alert(JSON.stringify(resp, null, 4));
                for (i=0; i < resp.length; i++) {
                    var guild = resp[i];
                    addServerTemplate(guild.guild_id, guild.icon);
                }
            })
            .catch(err => {
                alert(JSON.stringify(err, null, 4));
            })
    });
    
    function addServerTemplate(serverId, serverIconHash) {
        template = $($("#serverItemTemplate").html());
        template.find("img").attr("src", `https://cdn.discordapp.com/icons/${serverId}/${serverIconHash}.webp?size=80`);
        $("#serverList").prepend(template);
    }

    $("#serverForm").on("submit", function(event) {
        event.preventDefault();

        var selectedOption = $("#serverOptions option:selected");
            serverName = selectedOption.text();
            serverId = selectedOption.val();
            serverIconHash = selectedOption.attr("data-icon");

        addServer(serverName, serverId, serverIconHash);

        // $.ajax({
        //     url: "",
        //     type: "GET",
        //     success: function(response) {
        //         alert(JSON.stringify(response, null, 4));
        //     },
        //     error: function(response) {
        //         alert(JSON.stringify(response, null, 4));
        //     }
        // });

        $("#serverForm .modal").modal("hide");
        alert(`${serverName} ${serverId} ${serverIconHash}`);
    });
</script>
{% endblock javascripts %}