Gallery-Archivist/archivist/apps/templates/importer/source_urls.html

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

{% load static %}

{% block title %} Source URLs | Importer {% endblock title %}

{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

{% include "includes/navigation-transparent.html" %}

<div class="container-fluid">
    <div class="row row-gap-3">

        <div class="col">
            <div class="e-container-border e-container-radius">
                <div class="e-container e-container-radius p-2 pt-3 mb-3">
                    <h1 class="text-center">Source URLs</h1>

                    {% include "importer/partials/tabnavbar.html" %}

                    <h3>Complete Profiles/Galleries</h3>

                    <input type="text" class="form-control input-group-text my-2" onkeyup="filterTable('profiles', 0, this.value)" placeholder="Search for URLs...">

                    <table id="profiles" class="table table-bordered table-responsive table-striped tabel-hover">
                        <thead>
                            <tr>
                                <th>URL:</th>
                                <th>Category:</th>
                                <th>Added On:</th>
                                <th>Last Imported/Scaned:</th>
                                {% if user.is_superuser or user.is_staff %}
                                <th>Added By</th>
                                {% endif %}
                                <th>Active</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for url in SourceURLs %}
                            {% if url.source_type == "C" %}
                            <tr>
                                <td>{{ url.url }}</td>
                                <td>{{ url.category }}</td>
                                <td>{{ url.date_added|date:'Y-m-d H:i' }}</td>
                                <td>{{ url.last_imported|date:'Y-m-d H:i' }}</td>
                                {% if user.is_superuser or user.is_staff %}
                                <td>{{ url.added_by_user|capfirst }}</td>
                                {% endif %}
                                <td>{{ url.active }}</td>
                            </tr>
                            {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>

                    <hr class="my-3">

                    <h3>Single Posts</h3>

                    <input type="text" class="form-control input-group-text my-2" onkeyup="filterTable('posts', 0, this.value)" placeholder="Search for URLs...">

                    <table id="posts" class="table table-bordered table-responsive table-striped tabel-hover">
                        <thead>
                            <tr>
                                <th>URL:</th>
                                <th>Category:</th>
                                <th>Added On:</th>
                                <th>Last Imported/Scaned:</th>
                                {% if user.is_superuser or user.is_staff %}
                                <th>Added By</th>
                                {% endif %}
                                <th>Active</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for url in SourceURLs %}
                            {% if url.source_type == "P" %}
                            <tr>
                                <td>{{ url.url }}</td>
                                <td>{{ url.category }}</td>
                                <td>{{ url.date_added|date:'Y-m-d H:i' }}</td>
                                <td>{{ url.last_imported|date:'Y-m-d H:i' }}</td>
                                {% if user.is_superuser or user.is_staff %}
                                <td>{{ url.added_by_user|capfirst }}</td>
                                {% endif %}
                                <td>{{ url.active }}</td>
                            </tr>
                            {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>

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

    </div>
</div>

<script>
    function filterTable(tableId, columnIndex, input) {
        console.log(tableId, columnIndex, input.value);
        // Declare variables
        var filter = input.toUpperCase();
        var table = document.getElementById(tableId);
        var rows = table.getElementsByTagName("tr");
        
        // Loop through all table rows, and hide those who don't match the search query
        for (var i = 0; i < rows.length; i++) {
            var cells = rows[i].getElementsByTagName("td");
            if (cells.length) {
                var txtValue = cells[columnIndex].textContent || cells[columnIndex].innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    rows[i].style.display = "";
                } else {
                    rows[i].style.display = "none";
                }
            }
        }
    }

    window.onload = function() {
        document.querySelectorAll('th').forEach((element) => { // Table headers
            element.addEventListener('click', function() {
                let table = this.closest('table');

                // If the column is sortable
                if (this.querySelector('span')) {
                    let order_icon = this.querySelector('span');
                    let order      = encodeURI(order_icon.innerHTML).includes('%E2%86%91') ? 'desc' : 'asc';
                    let separator  = '-----'; // Separate the value of it's index, so data keeps intact

                    let value_list = {}; // <tr> Object
                    let obj_key    = []; // Values of selected column

                    let string_count = 0;
                    let number_count = 0;

                    // <tbody> rows
                    table.querySelectorAll('tbody tr').forEach((line, index_line) => {
                        // Value of each field
                        let key = line.children[element.cellIndex].textContent.toUpperCase();

                        // Check if value is date, numeric or string
                        if (line.children[element.cellIndex].hasAttribute('data-timestamp')) {
                            // if value is date, we store it's timestamp, so we can sort like a number
                            key = line.children[element.cellIndex].getAttribute('data-timestamp');
                        }
                        else if (key.replace('-', '').match(/^[0-9,.]*$/g)) {
                            number_count++;
                        }
                        else {
                            string_count++;
                        }

                        value_list[key + separator + index_line] = line.outerHTML.replace(/(\t)|(\n)/g, ''); // Adding <tr> to object
                        obj_key.push(key + separator + index_line);
                    });
                    if (string_count === 0) { // If all values are numeric
                        console.log(obj_key);
                        obj_key.sort(function(a, b) {
                            return a.split(separator)[0] - b.split(separator)[0];
                        });
                        console.log(obj_key);
                    }
                    else {
                        console.log(obj_key);
                        obj_key.sort();
                        console.log(obj_key);
                    }

                    if (order === 'desc') {
                        console.log(obj_key);
                        obj_key.reverse();
                        console.log(obj_key);
                        order_icon.innerHTML = '&darr;';
                    }
                    else {
                        order_icon.innerHTML = '&uarr;';
                    }

                    let html = '';
                    obj_key.forEach(function(chave) {
                        html += value_list[chave];
                    });
                    table.getElementsByTagName('tbody')[0].innerHTML = html;
                }
            });
        });
    }
</script>

{% endblock content %}