matitos/matitos_news
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dockerization, whitenoise serving static, refactor

Browse Source
This commit is contained in:
Luciano Gervasoni
2025-04-04 10:53:16 +02:00
parent 5addfa5ba9
commit 4dbe2e55ef
39 changed files with 708 additions and 1238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
app_urls/fetcher/templates/charts.html Normal file
View File

@@ -0,0 +1,179 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charts</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background-color: #333;
color: #fff;
font-family: Arial, sans-serif;
}
h2 {
color: #fff;
text-align: center;
margin-bottom: 40px;
}
.chart-container {
width: 45%;
display: inline-block;
margin: 20px;
background-color: #444;
border-radius: 10px;
padding: 5px;
}
canvas {
background-color: #2c2c2c;
border-radius: 5px;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.filter-container {
text-align: center;
margin-bottom: 20px;
}
select {
padding: 8px;
background-color: #555;
color: white;
border: 1px solid #444;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Data Visualizations</h2>
<!-- Filter for Number of Days -->
<div class="filter-container">
<label for="daysFilter">Select Number of Days:</label>
<select id="daysFilter">
<option value="0.0625">Last 90 Minutes</option>
<option value="0.25">Last 6 Hours</option>
<option value="1">Last 24 Hours</option>
<option value="7" selected>Last 7 Days</option>
<option value="30">Last 30 Days</option>
<option value="90">Last 90 Days</option>
<option value="365">Last 365 Days</option>
</select>
</div>
<div class="container">
<div class="chart-container">
<canvas id="urlFetchDateChart"></canvas>
</div>
<div class="chart-container">
<canvas id="urlStatusChart"></canvas>
</div>
<div class="chart-container">
<canvas id="urlsPerSourceChart"></canvas>
</div>
<div class="chart-container">
<canvas id="urlsPerSearchChart"></canvas>
</div>
</div>
<script>
$(document).ready(function () {
let chartInstances = {}; // Store chart instances
// Fetch initial data (default 7 days)
const defaultDays = 7;
fetchDataAndRenderCharts(defaultDays);
// Apply the filter automatically when the user changes the selection
$('#daysFilter').on('change', function () {
const selectedDays = $(this).val();
fetchDataAndRenderCharts(selectedDays);
});
function fetchDataAndRenderCharts(days) {
fetchAndRenderChart(`/urls-by-fetch-date/?days=${days}`, 'urlFetchDateChart', 'URLs by Fetch Date', 'bar');
fetchAndRenderChart(`/urls-per-status/?days=${days}`, 'urlStatusChart', 'URLs by Status', 'bar');
fetchAndRenderChart(`/urls-per-source/?days=${days}`, 'urlsPerSourceChart', 'URLs by Source', 'bar');
fetchAndRenderChart(`/urls-per-search/?days=${days}`, 'urlsPerSearchChart', 'URLs by Search', 'bar');
}
const categoryColors = {
'URLs by Fetch Date': '#4BC0C0', // Color for this category
'URLs by Status': '#36A2EB', // Color for this category
'URLs by Source': '#4BC0C0', // Color for this category
'URLs by Search': '#36A2EB' // Color for this category
};
const maxLabelLength = 35; // Limit X-axis labels to 10 characters
function fetchAndRenderChart(url, canvasId, chartTitle, chartType) {
$.getJSON(url, function (data) {
if (chartInstances[canvasId]) {
chartInstances[canvasId].destroy(); // Destroy previous chart
}
const ctx = document.getElementById(canvasId).getContext('2d');
chartInstances[canvasId] = new Chart(ctx, {
type: chartType,
data: {
labels: data.labels, // Ensure labels are passed as strings
datasets: [{
label: chartTitle,
data: data.values,
backgroundColor: categoryColors[chartTitle], // Assign the same color based on category
}]
},
options: {
responsive: true,
plugins: {
legend: {
labels: { color: '#fff' }
}
},
scales: {
x: {
ticks: {
color: "#fff", // Set the color of x-axis ticks
callback: function (value) {
let label = data.labels[value];
if (label.length > maxLabelLength) { return label.slice(0, maxLabelLength) + '...'; }
return label;
}
},
grid: {
color: "#444" // Set the grid lines color
}
},
y: {
ticks: {
color: "#fff" // Set the color of y-axis ticks
},
grid: {
color: "#444" // Set the grid lines color
}
}
}
}
});
});
}
});
</script>
</body>
</html>

580
app_urls/fetcher/templates/filtered_urls.html Normal file
View File

@@ -0,0 +1,580 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URLs</title>
<!--
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-->
<style>
/* General Styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
color: #333;
/*transition: background 0.3s ease, color 0.3s ease;*/
}
/* Dark Mode Styles */
.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
/* Default Link Style */
a {
color: #0066cc; /* Default color for links */
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Dark Mode Links */
.dark-mode a {
color: #52a8ff; /* Adjust this color to make the link more visible in dark mode */
}
.dark-mode a:hover {
color: #66ccff; /* Change the hover color to something lighter or a contrasting color */
}
/* Layout */
.container {
display: flex;
}
/* Sidebar */
.sidebar {
min-width: 110px; /* Minimum width */
max-width: 200px; /* Maximum width */
width: 100%; /* Make it take full width within the defined min and max */
padding: 5px;
box-sizing: border-box; /* Ensure padding doesn't increase the overall width */
transition: width 0.3s ease-in-out; /* Smooth transition for resizing */
background-color: #f4f4f4;
box-sizing: border-box;
word-wrap: break-word; /* Allow wrapping of long words */
overflow-wrap: break-word; /* Ensures wrapping across browsers */
white-space: normal; /* Ensure normal word wrapping */
}
.dark-mode .sidebar {
background-color: #1e1e1e;
}
/* Sidebar Headers */
.sidebar h3 {
margin-top: 15px;
margin-bottom: 2px;
font-size: 16px;
}
/* Table Container */
.table-container {
flex-grow: 1;
}
/* Table */
table {
width: 97.5%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 10px;
text-align: left;
}
/* Dark Mode Table */
.dark-mode table {
border-color: #444;
}
.dark-mode th, .dark-mode td {
border-color: #555;
}
/* Dark Mode Checkbox Labels */
.dark-mode label {
color: #e0e0e0;
}
/* Checkbox Styling */
input[type="checkbox"] {
cursor: pointer;
}
/* Themed Toggle Button */
.theme-button, .home-button, .chart-button {
background-color: var(--sidebar);
border: 1px solid var(--sidebar);
border-radius: 50%;
width: 30px;
height: 45px;
font-size: 25px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.1s, color 0.1s, transform 0.1s;
cursor: pointer;
}
.theme-button:hover, .home-button:hover, .chart-button:hover {
transform: rotate(20deg);
}
.theme-button:active, .home-button:active, .chart-button:acive {
transform: scale(0.95);
}
.button-container {
display: flex;
align-items: center;
gap: 10px; /* Space between buttons */
}
/* PAGINATION */
.pagination-container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-family: Arial, sans-serif;
}
.pagination-link {
padding: 8px 15px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 25px;
font-size: 14px;
display: inline-block;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.pagination-link:hover {
background-color: #0056b3;
transform: scale(1.1);
}
.pagination-link:active {
background-color: #003366;
transform: scale(0.95);
}
.first-page, .last-page {
font-weight: bold;
}
.prev-page, .next-page {
font-weight: normal;
}
/* ROUNDED SWITCH*/
/* Hide the default checkbox */
.checkbox-slider {
display: none;
}
/* Container for the toggle switch */
.slider-container {
display: inline-block;
width: 60px;
height: 30px;
position: relative;
}
/* Label for the slider */
.slider-container label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
border-radius: 30px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* The toggle circle */
.slider-container label::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s ease;
}
/* When the checkbox is checked */
.checkbox-slider:checked + .slider-container label {
background-color: #0940b8;
}
/* When the checkbox is checked, move the circle */
.checkbox-slider:checked + .slider-container label::before {
transform: translateX(30px);
}
</style>
</head>
<body>
{% load custom_filters %}
<div class="container">
<div class="sidebar">
<div class="button-container">
<button id="homeButton" class="home-button">🏠</button>
<button id="themeToggle" class="theme-button">🌙</button>
<button id="chartButton" class="chart-button">📊</button>
</div>
<form method="GET" action="" id="filterForm">
<!-- Switch: Table / Charts
<form>
<label>
<input type="radio" name="view" value="table" checked id="tableRadio"> Table
</label>
<label>
<input type="radio" name="view" value="chart" id="chartRadio"> Charts
</label>
</form>
-->
<!-- Rounded switch
<input type="checkbox" id="toggle" class="checkbox-slider">
<div class="slider-container">
<label for="toggle"></label>
<span class="slider-text">
<span id="onText" class="on-text">ON</span>
<span id="offText" class="off-text">OFF</span>
</span>
</div>
-->
<!-- Pages Per Page Dropdown -->
<h3>Pages Per Page</h3>
<select id="perPageSelect" name="per_page">
<option value="25" {% if per_page|stringformat:"s" == '25' %}selected{% endif %}>25</option>
<option value="100" {% if per_page|stringformat:"s" == '100' %}selected{% endif %}>100</option>
<option value="500" {% if per_page|stringformat:"s" == '500' %}selected{% endif %}>500</option>
</select>
<br>
<!-- Filter by Time Range -->
<h3>Fetch Date</h3>
<select id="timeFilterSelect" name="days">
<!--
{% for form_days in form_days_list %}
<option value=form_days.1|stringformat:"s" {% if selected_days|stringformat:"s" == form_days.1|stringformat:"s" %}selected{% endif %}>form_days.2</option>
{% endfor %}
-->
<option value="0.25" {% if selected_days|stringformat:"s" == '0.25' %}selected{% endif %}>Last 6 hours</option>
<option value="1" {% if selected_days|stringformat:"s" == '1' %}selected{% endif %}>Last 24 hours</option>
<option value="7" {% if selected_days|stringformat:"s" == '7' %}selected{% endif %}>Last 7 days</option>
<option value="30" {% if selected_days|stringformat:"s" == '30' %}selected{% endif %}>Last 30 days</option>
<option value="90" {% if selected_days|stringformat:"s" == '90' %}selected{% endif %}>Last 90 days</option>
<option value="365" {% if selected_days|stringformat:"s" == '365' %}selected{% endif %}>Last 365 days</option>
</select>
<br>
<!-- Filter by Status -->
<h3>Status</h3>
<button type="button" class="toggle-all-btn" data-toggle="status">Toggle All</button><br>
{% for status in statuses %}
<label>
<input type="checkbox" name="status" value="{{ status.0 }}"
{% if status.0 in selected_status or 'all' in selected_status %}checked{% endif %}>
{{ status.1 }}
</label><br>
{% endfor %}
<!-- Filter by valid content -->
<h3>Valid content</h3>
<button type="button" class="toggle-all-btn" data-toggle="valid_content">Toggle All</button><br>
{% for vc in valid_contents %}
<label>
<input type="checkbox" name="valid_content" value="{{ vc }}"
{% if vc|stringformat:"s" in selected_valid_contents or 'all' in selected_valid_contents%}checked{% endif %}>
{{ vc|truncatechars:50 }}
</label><br>
{% endfor %}
<!-- Filter by Search -->
<h3>Search</h3>
<button type="button" class="toggle-all-btn" data-toggle="search">Toggle All</button><br>
{% for search in searches %}
<label>
<input type="checkbox" name="search" value="{{ search.id }}"
{% if search.id|stringformat:"s" in selected_search or 'all' in selected_search %}checked{% endif %}>
[{{ search.type }}] {{ search.search|truncatechars:50 }}
</label><br>
{% endfor %}
<!-- Filter by Source -->
<h3>Source</h3>
<button type="button" class="toggle-all-btn" data-toggle="source">Toggle All</button><br>
{% for source in sources %}
<label>
<input type="checkbox" name="source" value="{{ source.id }}"
{% if source.id|stringformat:"s" in selected_source or 'all' in selected_source %}checked{% endif %}>
{{ source.source|truncatechars:50 }}
</label><br>
{% endfor %}
<!-- Filter by language -->
<h3>Language</h3>
<button type="button" class="toggle-all-btn" data-toggle="language">Toggle All</button><br>
{% for lang in languages %}
<label>
<input type="checkbox" name="language" value="{{ lang }}"
{% if lang|stringformat:"s" in selected_language or 'all' in selected_language%}checked{% endif %}>
{{ lang|truncatechars:50 }}
</label><br>
{% endfor %}
</form>
</div>
<!-- Table URLs data -->
<div class="table-container">
<table>
<thead>
<tr>
<th>ID</th>
<th>URL</th>
<th>Status</th>
<th>Fetch Date</th>
<th>Search</th>
<th>Source</th>
<th>Valid content?</th>
<th>Language</th>
</tr>
</thead>
<tbody>
{% for url in urls %}
<tr>
<td><a href="./{{ url.id }}" class="btn btn-primary btn-sm" target="_blank">{{ url.id }}</a></td>
<td><a href="{{ url.url }}/" target="_blank">{{ url.url }}</a></td>
<td>
{% if url.status == 'raw' %}
<span class="badge bg-secondary">{{ url.status|capfirst }}</span>
{% elif url.status == 'error' %}
<span class="badge bg-danger">{{ url.status|capfirst }}</span>
{% elif url.status == 'valid' %}
<span class="badge bg-success">{{ url.status|capfirst }}</span>
{% elif url.status == 'unknown' %}
<span class="badge bg-warning">{{ url.status|capfirst }}</span>
{% elif url.status == 'invalid' %}
<span class="badge bg-danger">{{ url.status|capfirst }}</span>
{% elif url.status == 'duplicate' %}
<span class="badge bg-info">{{ url.status|capfirst }}</span>
{% else %}
<span class="badge bg-light">Unknown</span>
{% endif %}
</td>
<td>
<span class="ts-fetch" data-ts="{{ url.ts_fetch|date:'c' }}"></span>
</td>
<td>
{% with sources_map|dict_get:url.id as sources %}
{% if sources %}
{% for source in sources %}
<span class="badge bg-secondary">{{ source }}</span>
{% endfor %}
{% else %}
<span class="text-muted">No sources</span>
{% endif %}
{% endwith %}
</td>
<td>
{% with searches_map|dict_get:url.id as searches %}
{% if searches %}
{% for search in searches %}
<span class="badge bg-secondary">{{ search }}</span>
{% endfor %}
{% else %}
<span class="text-muted">No searches</span>
{% endif %}
{% endwith %}
</td>
<td>
{% with url_content_map|dict_get:url.id as content %}
{{ content.valid_content }}
{% endwith %}
</td>
<td>
{% with url_content_map|dict_get:url.id as content %}
{{ content.language }}
{% endwith %}
</td>
</tr>
{% empty %}
<tr>
<td colspan="5">No URLs found for the selected filters.</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- Pagination Controls -->
<div class="pagination">
<!-- <div class="pagination-controls"> -->
<div class="pagination-container" style="margin-top: 20px;margin-bottom: 20px;">
{% if urls.has_previous %}
<a href="#" class="pagination-link" data-page="1">« First</a>
<a href="#" class="pagination-link" data-page="{{ urls.previous_page_number }}">Previous</a>
{% endif %}
<span>Page {{ urls.number }} of {{ urls.paginator.num_pages }}</span>
{% if urls.has_next %}
<a href="#" class="pagination-link" data-page="{{ urls.next_page_number }}">Next</a>
<a href="#" class="pagination-link" data-page="{{ urls.paginator.num_pages }}">Last »</a>
{% endif %}
</div>
</div>
</div>
</div>
<script>
//////////////////////////////////////////////////////////////////////
document.addEventListener("DOMContentLoaded", function () {
//////////////////////////////////////////////
// Theme & Home
const themeToggle = document.getElementById("themeToggle");
const body = document.body;
// Load theme from localStorage
if (localStorage.getItem("theme") === "dark") {
body.classList.add("dark-mode");
themeToggle.textContent = "🌞";
}
// Toggle theme on button click
themeToggle.addEventListener("click", function () {
if (body.classList.contains("dark-mode")) {
body.classList.remove("dark-mode");
localStorage.setItem("theme", "light");
themeToggle.textContent = "🌙";
} else {
body.classList.add("dark-mode");
localStorage.setItem("theme", "dark");
themeToggle.textContent = "🌞";
}
});
// Home
document.getElementById("homeButton").addEventListener("click", function () {
window.location.href = "./"; // Change this to your homepage URL if different
});
// Charts
document.getElementById("chartButton").addEventListener("click", function () {
window.location.href = "./charts"; // Change this to your homepage URL if different
});
//////////////////////////////////////////////
// Timestamp to local timezone
document.querySelectorAll(".ts-fetch").forEach(element => {
let utcDate = element.getAttribute("data-ts"); // Get timestamp from data attribute
let options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12:false};
if (utcDate) {
let localDate = new Date(utcDate).toLocaleString("en-GB", options); // Convert to local timezone
element.textContent = localDate; // Update the text content
}
});
//////////////////////////////////////////////
});
//////////////////////////////////////////////////////////////////////
// Function to update pagination links
function updatePaginationLinks(pageNumber) {
// Get current URL and remove existing page parameter
const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set('page', pageNumber); // Update page parameter
window.location.href = currentUrl.toString(); // Redirect to the updated URL
}
// Attach event listeners to pagination links
document.querySelectorAll('.pagination-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const pageNumber = this.getAttribute('data-page');
updatePaginationLinks(pageNumber); // Update the page number in the URL
});
});
// Function to update the form parameters for all sections before submitting
function updateFormParameters() {
// Get all distinct sections by selecting all checkboxes and extracting their "name" attributes
const sections = new Set([...document.querySelectorAll("input[type='checkbox']")].map(cb => cb.name));
sections.forEach(section => {
if (!section) return; // Skip any checkboxes without a name
const checkboxes = document.querySelectorAll(`[name='${section}']`);
const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
// If all checkboxes in a section are checked, remove them and add a hidden input
if (allChecked) {
checkboxes.forEach(checkbox => checkbox.removeAttribute("name"));
let hiddenInput = document.createElement("input");
hiddenInput.type = "hidden";
hiddenInput.name = section;
hiddenInput.value = "all";
document.getElementById("filterForm").appendChild(hiddenInput);
} else {
checkboxes.forEach(checkbox => checkbox.setAttribute("name", section));
document.querySelectorAll(`input[name="${section}"][type="hidden"]`).forEach(hiddenInput => hiddenInput.remove());
}
});
// Submit the form after updating all sections
document.getElementById("filterForm").submit();
}
//////////////////////////////////////////////////////////////////////
// Function to toggle all checkboxes in a section
function toggleCheckboxes(section) {
const checkboxes = document.querySelectorAll(`[name='${section}']`);
const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
checkboxes.forEach(cb => cb.checked = !allChecked);
updateFormParameters();
}
// Attach event listeners to "Toggle All" buttons
document.querySelectorAll('.toggle-all-btn').forEach(button => {
button.addEventListener('click', function() {
const section = this.getAttribute('data-toggle');
toggleCheckboxes(section);
});
});
//////////////////////////////////////////////////////////////////////
// Automatically submit the form when any checkbox changes
document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
updateFormParameters();
});
});
document.getElementById('perPageSelect').addEventListener('change', function() {
updateFormParameters();
});
document.getElementById('timeFilterSelect').addEventListener('change', function() {
updateFormParameters();
});
</script>
</body>
</html>

297
app_urls/fetcher/templates/url_detail.html Normal file
View File

@@ -0,0 +1,297 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}News{% endblock %}</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Add jQuery from CDN (before other scripts) -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Markdown -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom Styles -->
<style>
body {
background-color: #f4f4f4;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255,255,255,0.75);
}
.chat-box {
background-color: #fff;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
overflow-y: auto; /* Enable vertical scrolling */
max-width: 100%;
min-height: 150px;
max-height: 450px;
white-space: normal;
word-wrap: break-word;
word-break: break-word;
}
.table {
table-layout: auto;
width: 100%;
}
th {
white-space: nowrap;
}
td {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Sidebar */
.sidebar {
min-width: 110px; /* Minimum width */
max-width: 200px; /* Maximum width */
width: 100%; /* Make it take full width within the defined min and max */
padding: 5px;
box-sizing: border-box; /* Ensure padding doesn't increase the overall width */
transition: width 0.3s ease-in-out; /* Smooth transition for resizing */
background-color: #f4f4f4;
box-sizing: border-box;
word-wrap: break-word; /* Allow wrapping of long words */
overflow-wrap: break-word; /* Ensures wrapping across browsers */
white-space: normal; /* Ensure normal word wrapping */
}
.dark-mode .sidebar {
background-color: #1e1e1e;
}
</style>
</head>
<script>
//////////////////////////////////////////////////////////////////////
document.addEventListener("DOMContentLoaded", function () {
//////////////////////////////////////////////
// Timestamp to local timezone
document.querySelectorAll(".ts-fetch").forEach(element => {
let utcDate = element.getAttribute("data-ts"); // Get timestamp from data attribute
let options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12:false};
if (utcDate) {
let localDate = new Date(utcDate).toLocaleString("en-GB", options); // Convert to local timezone
element.textContent = localDate; // Update the text content
}
});
document.querySelectorAll(".ts-publish").forEach(element => {
let utcDate = element.getAttribute("data-ts"); // Get timestamp from data attribute
let options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12:false};
if (utcDate) {
let localDate = new Date(utcDate).toLocaleString("en-GB", options); // Convert to local timezone
element.textContent = localDate; // Update the text content
}
});
});
function fetchDetails(urlId, url) {
// Show the loading spinner
document.getElementById("loading-spinner").style.display = "block";
// Get the input value
let inputText = document.getElementById(`custom-input-${urlId}`).value;
// Get the input model
let selectedModel = document.getElementById(`options-${urlId}`).value;
// Check if a model is selected
if (!selectedModel) {
alert("Please select a model before fetching details.");
return;
}
// Fetch URL
let fetchUrl = `/urls/${urlId}/fetch/?url=${encodeURIComponent(url)}&model=${encodeURIComponent(selectedModel)}&text=${encodeURIComponent(inputText)}`;
let resultContainer = $("#chat-output");
resultContainer.html(""); // Clear previous content before fetching
let fetchButton = $("button[onclick^='fetchDetails']"); // Select the button
fetchButton.prop("disabled", true); // Disable button
fetch(fetchUrl/*, {
method: "POST",
body: JSON.stringify({
text: inputText
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
}*/).then(response => {
if (!response.ok) {
throw new Error("Error on network response");
}
const reader = response.body.getReader();
const decoder = new TextDecoder();
let accumulatedText = ""; // Store streamed text before rendering Markdown
let messageContainer = $('<div class="chat-message"></div>'); // Create a temporary container for streaming response
resultContainer.append(messageContainer);
function read() {
return reader.read().then(({ done, value }) => {
if (done) {
messageContainer.html(marked.parse(accumulatedText));
fetchButton.prop("disabled", false); // Re-enable button when done
return;
}
// Decode the streamed chunk
let chunk = decoder.decode(value);
// Append to the accumulated text
accumulatedText += chunk;
// Render Markdown progressively (but safely)
messageContainer.html(marked.parse(accumulatedText));
// Auto-scroll to bottom
resultContainer.scrollTop(resultContainer[0].scrollHeight);
return read();
});
}
return read();
})
.catch(error => {
resultContainer.html(`<p class="text-danger">Error fetching details: ${error.message}</p>`);
fetchButton.prop("disabled", false); // Re-enable button on error
})
.finally(() => {
// Hide the loading spinner after request is complete
document.getElementById("loading-spinner").style.display = "none";
});
}
</script>
<body>
<!--
<div class="sidebar">
<div class="button-container">
<button id="homeButton" class="home-button">🏠</button>
<button id="themeToggle" class="theme-button">🌙</button>
</div>
</div>
-->
<!-- Main Content -->
<div class="container mt-4">
<!-- <h2>URL Details</h2> -->
<table class="table table-bordered">
<tr>
<th>URL</th>
<td><a href="{{ url_item.url|safe }}" target="_blank">{{ url_item.url }}</a></td>
</tr>
<tr>
<th>Fetch Date</th>
<td> <span class="ts-fetch" data-ts="{{ url_item.ts_fetch|date:'c' }}"></span> </td>
</tr>
<tr>
<th>Source</th>
<td>{{ sources|join:", " }}</td>
</tr>
<tr>
<th>Search</th>
<td>{{ searches|join:", " }}</td>
</tr>
<tr>
<th>Status</th>
<td>{{ url_item.status }}</td>
</tr>
<tr>
<th>URL host</th>
<td> <a href="{{ url_content.url_host|safe }}" target="_blank">{{ url_content.url_host }}</a> </td>
</tr>
<tr>
<th>Site name</th>
<td>{{ url_content.site_name|default:"" }}</td>
</tr>
<tr>
<th>Published Date</th>
<td> <span class="ts-publish" data-ts="{{ url_content.date_published|date:'c' }}"></span> </td>
</tr>
<tr>
<th>Valid news content?</th>
<td>{{ url_content.valid_content }}</td>
</tr>
<tr>
<th>Tags</th>
<td>{{ url_content.tags|default:"" }}</td>
</tr>
<tr>
<th>Authors</th>
<td>{{ url_content.authors|default:"" }}</td>
</tr>
<tr>
<th>Keywords</th>
<td>{{ url_content.keywords|default:"" }}</td>
</tr>
<tr>
<th>Language</th>
<td>{{ url_content.language|default:"" }}</td>
</tr>
<tr>
<th>Main image</th>
<td><a href="{{ url_content.image_main_url|safe }}" target="_blank">{{ url_content.image_main_url|default:"" }}</a></td>
</tr>
<tr>
<th>Image URLs</th>
<td>{{ url_content.image_urls|default:"" }}</td>
</tr>
<tr>
<th>Video URLs</th>
<td>{{ url_content.videos_url|default:"" }}</td>
</tr>
<tr>
<th>Title</th>
<td>{{ url_content.title|default:"" }}</td>
</tr>
<tr>
<th>Description</th>
<td>{{ url_content.description|default:"" }}</td>
</tr>
<tr>
<th>Content</th>
<td>{{ url_content.content|default:"" }}</td>
</tr>
</table>
<!-- Independent form for optional values -->
<form onsubmit="fetchDetailsWithSelection(event, {{ url_item.id }}, '{{ url_item.url }}')">
<label for="options-{{ url_item.id }}">Model:</label>
<select id="options-{{ url_item.id }}" class="form-control mb-2">
{% for model in models %}
<option value="{{ model }}">{{ model }}</option>
{% endfor %}
</select>
</form>
<!-- Input field with a default value -->
<label for="custom-input-{{ url_item.id }}">Prompt:</label>
<textarea id="custom-input-{{ url_item.id }}" class="form-control mb-2" rows="5">{{ prompt }}
{{ url_item.url }}</textarea>
<div class="d-flex align-items-center">
<!-- Fetch details button -->
<button class="btn btn-primary" onclick="fetchDetails({{ url_item.id }}, '{{ url_item.url }}')">
Fetch Details
</button>
<!-- Loading Spinner (Hidden by Default) -->
<div id="loading-spinner" class="spinner-border text-primary ms-2" role="status" style="display: none;">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!-- Chatbot-style response box -->
<div class="chat-box mt-3 p-3 border rounded">
<div id="chat-output"></div>
</div>
</div>
{% block extra_js %}{% endblock %}
</body>
</html>