PythonGallery/onlylegs/templates/group.html

{% extends 'base.html' %}
{% from 'macros/image.html' import gallery_item %}
{% block nav_groups %}selected{% endblock %}

{% block head %}
    {% if images %}
        <meta property="og:image" content="{{ url_for('api.media', path='uploads/' + images.0.filename) }}"/>
        <meta name="twitter:image" content="{{ url_for('api.media', path='uploads/' + images.0.filename) }}">
        <meta name="theme-color" content="rgb{{ images.0.colours.0 }}"/>
        <meta name="twitter:card" content="summary_large_image">
    {% endif %}

    <script type="text/javascript">
        {% if current_user.id == group.author.id %}
            function groupDelete() {
                cancelBtn = document.createElement('button');
                cancelBtn.classList.add('btn-block');
                cancelBtn.classList.add('transparent');
                cancelBtn.innerHTML = 'AAAAAAAAAA';
                cancelBtn.onclick = popupDissmiss;

                deleteBtn = document.createElement('button');
                deleteBtn.classList.add('btn-block');
                deleteBtn.classList.add('critical');
                deleteBtn.innerHTML = 'No ragrats!';
                deleteBtn.onclick = deleteConfirm;
                
                popUpShow('Yeet!',
                          'Are you surrrre? This action is irreversible and very final.' +
                          ' This wont delete the images, but it will remove them from this group.',
                          null,
                          [cancelBtn, deleteBtn]);
            }

            function deleteConfirm(event) {
                // AJAX takes control of subby form :3
                event.preventDefault();
            
                let formID = {{ group.id }};
            
                if (!formID) {
                    addNotification("Dont tamper with the JavaScript pls!", 3);
                    return;
                }
            
                // Make form
                const formData = new FormData();
                formData.append("group", formID);
            
                fetch('{{ url_for('api.delete_group') }}', {
                    method: 'POST',
                    body: formData
                }).then(response => {
                    if (response.status === 200) {
                        // Redirect to groups page
                        window.location.href = '{{ url_for('group.groups') }}';
                    } else {
                        switch (response.status) {
                            case 500:
                                addNotification('Server exploded, F\'s in chat', 2);
                                break;
                            case 403:
                                addNotification('None but devils play past here... Bad information', 2);
                                break;
                            default:
                                addNotification('Error logging in, blame someone', 2);
                                break;
                        }
                    }
                }).catch(error => {
                    addNotification('Error yeeting group!', 2);
                });
            }

            function groupEdit() {
                // Create elements
                cancelBtn = document.createElement('button');
                cancelBtn.classList.add('btn-block');
                cancelBtn.classList.add('transparent');
                cancelBtn.innerHTML = 'go baaaaack';
                cancelBtn.onclick = popupDissmiss;

                submitBtn = document.createElement('button');
                submitBtn.classList.add('btn-block');
                submitBtn.classList.add('primary');
                submitBtn.innerHTML = 'Saveeee';
                submitBtn.type = 'submit';
                submitBtn.setAttribute('form', 'editForm');

                // Create form
                editForm = document.createElement('form');
                editForm.id = 'editForm';
                editForm.setAttribute('onsubmit', 'return edit(event);');

                groupInput = document.createElement('input');
                groupInput.classList.add('input-block');
                groupInput.type = 'text';
                groupInput.placeholder = 'Group ID';
                groupInput.value = {{ group.id }};
                groupInput.id = 'group';

                imageInput = document.createElement('input');
                imageInput.classList.add('input-block');
                imageInput.type = 'text';
                imageInput.placeholder = 'Image ID';
                imageInput.id = 'image';

                actionInput = document.createElement('input');
                actionInput.classList.add('input-block');
                actionInput.type = 'text';
                actionInput.placeholder = 'add/remove';
                actionInput.value = 'add';
                actionInput.id = 'action';

                editForm.appendChild(groupInput);
                editForm.appendChild(imageInput);
                editForm.appendChild(actionInput);

                popUpShow(
                    'Nothing stays the same',
                    'Add, remove, or change, the power is in your hands...',
                    editForm,
                    [cancelBtn, submitBtn]
                );
            }

            function edit(event) {
                // AJAX takes control of subby form :3
                event.preventDefault();
            
                let formGroup = document.querySelector("#group").value;
                let formImage = document.querySelector("#image").value;
                let formAction = document.querySelector("#action").value;
            
                if (!formGroup || !formImage || !formAction) {
                    addNotification("All values must be set!", 3);
                    return;
                }
            
                // Make form
                const formData = new FormData();
                formData.append("group", formGroup);
                formData.append("image", formImage);
                formData.append("action", formAction);
            
                fetch('{{ url_for('api.modify_group') }}', {
                    method: 'POST',
                    body: formData
                }).then(response => {
                    if (response.status === 200) {
                        addNotification('Group edited!!!', 1);
                        popupDissmiss();
                    } else {
                        switch (response.status) {
                            case 500:
                                addNotification('Server exploded, F\'s in chat', 2);
                                break;
                            case 403:
                                addNotification('None but devils play past here... Bad information', 2);
                                break;
                            default:
                                addNotification('Error logging in, blame someone', 2);
                                break;
                        }
                    }
                }).catch(error => {
                    addNotification('Error!!!!! Panic!!!!', 2);
                });
            }
        {% endif %}
    </script>

    <style>
        {% if images %}
            :root { --bg-100: {{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }} }

            body {
                background: rgb{{ images.0.colours.0 }} !important;
                color: {{ text_colour }} !important;
            }
            main {
                background: rgba(var(--white), 0.6) !important;
            }


            .navigation-item.selected { color: {{ text_colour }} !important; }

            .banner .banner-content .banner-header,
            .banner .banner-content .banner-info,
            .banner .banner-content .banner-subtitle {
                color: {{ text_colour }} !important;
            }
            .banner-content .link {
                background-color: {{ text_colour }} !important;
                color: rgb{{ images.0.colours.0 }} !important;
            }
            .banner-content .link:hover {
                background-color: rgb{{ images.0.colours.0 }} !important;
                color: {{ text_colour }} !important;
            }

            .banner-filter {
                background: linear-gradient(90deg, rgb{{ images.0.colours.0 }}, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.3)) !important;
            }
            @media (max-width: 800px) {
                .banner-filter {
                    background: linear-gradient(180deg, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.4), rgba({{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }}, 0.3)) !important;
                }
            }
        {% endif %}
    </style>
{% endblock %}

{% block header %}
    {% if images %}
        <div class="banner">
            <picture>
                <source srcset="{{ url_for('api.media', path='uploads/' + images.0.filename) }}?r=prev&e=webp">
                <source srcset="{{ url_for('api.media', path='uploads/' + images.0.filename) }}?r=prev&e=png">
                <img
                    src="{{ url_for('api.media', path='uploads/' + images.0.filename) }}?r=prev"
                    alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"
                    onload="imgFade(this)" style="opacity:0;"
                />
            </picture>
            <span class="banner-filter"></span>
            <div class="banner-content">
                <p class="banner-info"><a href="{{ url_for('profile.profile', id=group.author.id) }}" class="link">By {{ group.author.username }}</a></p>
                <h1 class="banner-header">{{ group.name }}</h1>
                <p class="banner-subtitle">{{ images|length }} Images · {{ group.description }}</p>
                <div class="pill-row">
                    <div>
                        <button class="pill-item" onclick="copyToClipboard(window.location.href)"><i class="ph ph-export"></i></button>
                    </div>
                    {% if current_user.id == group.author.id %}
                        <div>
                            <button class="pill-item pill__critical" onclick="groupDelete()"><i class="ph ph-trash"></i></button>
                            <button class="pill-item pill__critical" onclick="groupEdit()"><i class="ph ph-pencil-simple"></i></button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% else %}
        <div class="banner-small">
            <div class="banner-content">
                <h1 class="banner-header">{{ group.name }}</h1>
                <p class="banner-info">By {{ group.author.username }}</p>
                <div class="pill-row">
                    <div>
                        <button class="pill-item" onclick="copyToClipboard(window.location.href)"><i class="ph ph-export"></i></button>
                    </div>
                    {% if current_user.id == group.author.id %}
                        <div>
                            <button class="pill-item pill__critical" onclick="groupDelete()"><i class="ph ph-trash"></i></button>
                            <button class="pill-item pill__critical" onclick="groupEdit()"><i class="ph ph-pencil-simple"></i></button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block content %}
    {% if images %}
        <div class="gallery-grid">
            {% for image in images %}{{ gallery_item(image) }}{% endfor %}
        </div>
    {% else %}
        <div class="big-text">
            <h1>*crickets chirping*</h1>
            {% if current_user.is_authenticated %}
                <p>Add some images to the group!</p>
            {% else %}
                <p>Login to start managing this image group!</p>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}