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

252 lines
11 KiB
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...">
<div class="table-responsive">
<table id="profiles" class="table table-sm table-striped table-bordered table-responsive table-striped tabel-hover text-nowrap">
<thead>
<tr>
<th>URL:<span class="ms-1 text-primary"></span></th>
<th>Category:<span class="ms-1 text-primary"></span></th>
<th>Added On:<span class="ms-1 text-primary"></span></th>
<th data-bs-toggle="tooltip" title="Last Imported/Scaned">Imported:<span class="ms-1 text-primary"></span></th>
{% if user.is_superuser or user.is_staff %}
<th>Added By:<span class="ms-1 text-primary"></span></th>
{% endif %}
<th>Active:<span class="ms-1 text-primary"></span></th>
</tr>
</thead>
<tbody>
{% for url in SourceURLs %}
{% if url.source_type == "C" %}
<tr id="C-{{ url.pk }}">
<td>{{ url.url }}</td>
<td>{{ url.category }}</td>
<td data-timestamp="{{ url.date_added|date:'U' }}" data-bs-toggle="tooltip" title="{{ url.date_added|date:'Y-m-d H:i' }}">{{ url.date_added|date:'Y-m-d' }}</td>
<td data-timestamp="{{ url.last_imported|date:'U' }}" data-bs-toggle="tooltip" title="{{ url.last_imported|date:'Y-m-d H:i' }}">{{ url.last_imported|date:'Y-m-d' }}</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>
<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";
}
}
}
}
function sortTable(tableId, n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById(tableId);
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 1; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/* If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
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 %}