manuel/filewizard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stability and settings

Browse Source
This commit is contained in:
Manuel Unterriker
2025-09-17 12:36:24 +00:00
parent 4d586a46e9
commit 2115238217
9 changed files with 1271 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
static/css/settings.css Normal file
View File

@@ -0,0 +1,194 @@
/* static/css/settings.css */
.settings-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--divider-color);
}
.settings-header h1 {e
margin: 0 0 0.25rem 0;
}
.settings-header p {
margin: 0;
color: var(--muted-text);
}
.back-button {
background-color: var(--secondary-color);
color: var(--text-color);
padding: 0.5rem 1rem;
border-radius: 5px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.15s ease;
white-space: nowrap;
}
.back-button:hover {
background-color: var(--primary-hover);
}
.settings-group {
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.settings-group legend {
padding: 0 0.5rem;
font-weight: 500;
color: var(--primary-color);
}
.settings-group legend h2 {
margin: 0;
font-size: 1.25rem;
}
.form-input, .form-select, .form-textarea {
width: 100%;
background-color: rgba(255,255,255,0.05);
color: var(--text-color);
padding: 0.6rem 0.8rem;
border-radius: 5px;
border: 1px solid var(--border-color);
font-family: inherit;
font-size: 0.95rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(0, 180, 255, 0.2);
}
.form-textarea {
resize: vertical;
min-height: 60px;
font-family: 'Courier New', Courier, monospace;
}
.field-description {
font-size: 0.85rem;
color: var(--muted-text);
margin-top: -0.5rem;
margin-bottom: 1rem;
}
.field-description code {
background-color: rgba(255,255,255,0.1);
padding: 0.1rem 0.3rem;
border-radius: 3px;
font-size: 0.8rem;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.checkbox-group input[type="checkbox"] {
width: 1rem;
height: 1rem;
}
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1rem;
}
.tool-card {
border: 1px solid var(--divider-color);
padding: 1rem;
border-radius: 6px;
background-color: rgba(0,0,0,0.2);
}
.tool-card h3 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.form-actions {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
}
.button-primary {
display: inline-block;
background: var(--primary-color);
background-color: transparent;
border-color: var(--border-color);
border-width: 1px;
color: #ffffff;
padding: 0.65rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.button-primary:hover {
background: var(--primary-hover);
}
.save-status {
font-weight: 500;
}
.save-status.success {
color: var(--success-color);
}
.save-status.error {
color: var(--error-color);
}
.divider {
border: none;
height: 1px;
background-color: var(--divider-color);
margin: 3rem 0;
}
.danger-zone {
border: 1px solid var(--error-color);
border-radius: 8px;
padding: 1rem;
background-color: rgba(255, 107, 107, 0.05);
}
.danger-action {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.danger-action + .danger-action {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 107, 107, 0.2);
}
.danger-action p {
margin: 0.25rem 0 0 0;
font-size: 0.9rem;
color: var(--muted-text);
}
.button-danger {
background-color: var(--error-color);
color: #1a0000;
border: none;
padding: 0.6rem 1.2rem;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.15s ease;
white-space: nowrap;
}
.button-danger:hover {
background-color: #ff8f8f;
}

169
static/css/style.css
View File

@@ -3,14 +3,15 @@
:root {
/* Core */
--bg-color: #000000;
--surface: #111111;
--card-bg: #0b0b0b;
--surface: #000000;
--card-bg: #000000;
--text-color: #e6eef6;
--muted-text: #9aa4ad;
/* Accent / interactive */
--primary-color: #00b4ff;
--primary-hover: #00d0ff;
--primary-color: #ffffff;
--secondary-color: #2b2b2b;
--primary-hover: #ffffff3d;
--success-color: #26c281;
--error-color: #ff6b6b;
--cancel-color: #f39c12; /* Orange for cancelled */
@@ -43,12 +44,14 @@ body {
/* Container */
.container {
width: 100%;
max-width: 960px;
max-width: 1280px; /* Increased max-width for 3 columns */
margin: 0 auto;
background: var(--card-bg);
border-radius: 10px;
padding: 1.5rem;
border: 1px solid var(--border-color);
margin-top: 1em;
}
@media (max-width: 768px) {
.container {
@@ -69,8 +72,10 @@ header {
header h1 {
margin: 0 0 0.25rem 0;
font-size: 1.75rem;
font-size: 3rem;
font-weight: 700;
font-family: serif;
font-weight: lighter;
}
header p {
@@ -79,18 +84,28 @@ header p {
font-size: 1rem;
}
.header-actions {
position: absolute;
top: 1.5rem;
right: 1.5rem;
}
.settings-link {
font-size: 1.5rem;
text-decoration: none;
color: var(--muted-text);
transition: color 0.2s ease;
}
.settings-link:hover {
color: var(--text-color);
}
/* Form Layout */
.form-grid {
display: grid;
grid-template-columns: 1fr;
/* MODIFICATION: Responsive grid for 1, 2, or 3 items */
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.form-grid {
grid-template-columns: 1fr 1fr;
}
}
.upload-form fieldset {
border: 1px solid var(--border-color);
@@ -130,7 +145,6 @@ input[type="file"] {
width: 100%;
height: 100%;
cursor: pointer;
text-overflow: ellipsis;
inset: 0;
}
@@ -142,8 +156,6 @@ input[type="file"] {
cursor: pointer;
transition: background-color 0.15s ease;
font-weight: 500;
text-overflow: ellipsis;
border: 1px solid rgba(255,255,255,0.1);
white-space: nowrap;
}
@@ -159,10 +171,10 @@ input[type="file"] {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 10em;
max-width: 15em;
}
/* --- STYLES FOR DROPDOWN MENU --- */
/* Form Controls (for dropdowns) */
.form-control {
margin-bottom: 1rem;
}
@@ -200,22 +212,23 @@ input[type="file"] {
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(0, 180, 255, 0.2);
}
/* ---------------------------------- */
/* Submit button */
button[type="submit"] {
display: block;
width: 100%;
background: var(--primary-color);
color: #00161b;
border: none;
background-color: transparent;
border-color: var(--border-color);
border-width: 1px;
color: #ffffff;
padding: 0.65rem 1rem;
font-size: 1rem;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.15s ease;
margin-top: auto; /* Pushes button to the bottom */
margin-top: auto;
}
button[type="submit"]:hover {
background: var(--primary-hover);
@@ -268,16 +281,24 @@ button[type="submit"]:disabled {
white-space: nowrap;
}
#job-table td[data-label="File"] {
max-width: 250px;
overflow: hidden;
.cell-value {
max-width: 10em;
text-wrap: wrap;
overflow: scroll;
}
#job-table td[data-label="File"],
#job-table td[data-label="Task"] {
overflow: scroll;
text-overflow: ellipsis;
white-space: nowrap;
text-wrap: wrap;
max-width: 15em;
}
.action-col {
text-align: center;
width: 100px;
width: 120px;
}
#job-table td.action-col {
text-align: center;
@@ -348,35 +369,87 @@ button[type="submit"]:disabled {
}
/* Action items */
.download-button {
background-color: var(--success-color);
color: #00160b;
.download-button, .cancel-button {
padding: 0.3rem 0.8rem;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
font-size: 0.85rem;
display: inline-block;
transition: transform 0.1s ease;
transition: transform 0.1s ease, background-color 0.15s ease;
border: none;
cursor: pointer;
}
.download-button {
background-color: var(--success-color);
color: #00160b;
}
.download-button:hover { transform: scale(1.05); }
.cancel-button {
background-color: var(--error-color);
color: #1a0000;
padding: 0.3rem 0.8rem;
border-radius: 5px;
font-weight: 600;
font-size: 0.85rem;
display: inline-block;
transition: transform 0.1s ease;
border: none;
cursor: pointer;
}
.cancel-button:hover { background-color: #ff8f8f; }
/* --- MODIFICATION: Dark theme for Choices.js --- */
.choices {
font-size: 0.95rem;
}
.choices__inner {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: 5px;
padding: 0.35rem 0.75rem;
color: var(--text-color);
min-height: auto;
}
.is-open .choices__inner {
border-radius: 5px 5px 0 0;
border-color: var(--primary-color);
}
.is-focused .choices__inner {
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(0, 180, 255, 0.2);
}
.choices__list--dropdown, .choices__list[aria-expanded] {
background-color: var(--surface);
border: 1px solid var(--primary-color);
border-top: none;
border-radius: 0 0 5px 5px;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background-color: var(--secondary-color);
color: var(--text-color)
}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
padding: 0.5rem 0.8rem;
font-size: 0.9rem;
}
.choices__group {
background-color: rgba(0,0,0,0.2);
border-bottom: 1px solid var(--divider-color);
}
.choices__group .choices__heading {
color: var(--primary-hover);
font-size: 0.75rem;
font-weight: 700;
border-bottom: none;
padding: 0.5rem 0.8rem;
}
.choices__input {
color: var(--text-color);
background-color: #000000;
font-size: 0.95rem;
}
.choices[data-type*="select-one"] .choices__input {
background-color: #000000;
}
/* Spinner */
.spinner-small {
border: 3px solid rgba(255,255,255,0.1);
border-top: 3px solid var(--primary-color);
@@ -392,7 +465,9 @@ button[type="submit"]:disabled {
100% { transform: rotate(360deg); }
}
/* Mobile responsive table */
@media (max-width: 768px) {
/* ... (no changes in this section) ... */
.table-wrapper {
border: none;
background-color: transparent;
@@ -432,5 +507,23 @@ button[type="submit"]:disabled {
text-align: right;
min-width: 0;
word-break: break-all;
overflow: scroll;
max-width: 100em;
}
.cell-value {
min-width: 0;
max-width: 20em;
text-wrap: nowrap;
overflow: scroll;
}
#job-table td[data-label="File"],
#job-table td[data-label="Task"] {
overflow: scroll;
text-overflow: ellipsis;
text-wrap: nowrap;
max-width: 100em;
}
}

152
static/js/script.js
View File

@@ -1,21 +1,35 @@
// static/js/script.js
document.addEventListener('DOMContentLoaded', () => {
// --- Element Selectors ---
const jobListBody = document.getElementById('job-list-body');
const pdfForm = document.getElementById('pdf-form');
const pdfFileInput = document.getElementById('pdf-file-input');
const pdfFileName = document.getElementById('pdf-file-name');
const audioForm = document.getElementById('audio-form');
const audioFileInput = document.getElementById('audio-file-input');
const audioFileName = document.getElementById('audio-file-name');
const conversionForm = document.getElementById('conversion-form');
const conversionFileInput = document.getElementById('conversion-file-input');
const conversionFileName = document.getElementById('conversion-file-name');
const outputFormatSelect = document.getElementById('output-format-select');
// MODIFICATION: Store the Choices.js instance in a variable
let conversionChoices = null;
const activePolls = new Map();
// --- Main Event Listeners ---
pdfFileInput.addEventListener('change', () => updateFileName(pdfFileInput, pdfFileName));
audioFileInput.addEventListener('change', () => updateFileName(audioFileInput, audioFileName));
pdfForm.addEventListener('submit', (e) => handleFormSubmit(e, '/ocr-pdf', pdfForm, pdfFileInput, pdfFileName));
audioForm.addEventListener('submit', (e) => handleFormSubmit(e, '/transcribe-audio', audioForm, audioFileInput, audioFileName));
conversionFileInput.addEventListener('change', () => updateFileName(conversionFileInput, conversionFileName));
pdfForm.addEventListener('submit', (e) => handleFormSubmit(e, '/ocr-pdf', pdfForm));
audioForm.addEventListener('submit', (e) => handleFormSubmit(e, '/transcribe-audio', audioForm));
conversionForm.addEventListener('submit', (e) => handleFormSubmit(e, '/convert-file', conversionForm));
jobListBody.addEventListener('click', (event) => {
if (event.target.classList.contains('cancel-button')) {
@@ -24,19 +38,55 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
function initializeConversionSelector() {
// MODIFICATION: Destroy the old instance if it exists before creating a new one
if (conversionChoices) {
conversionChoices.destroy();
}
conversionChoices = new Choices(outputFormatSelect, {
searchEnabled: true,
itemSelectText: 'Select',
shouldSort: false,
placeholder: true,
placeholderValue: 'Select a format...',
});
const tools = window.APP_CONFIG.conversionTools || {};
const choicesArray = [];
for (const toolKey in tools) {
const tool = tools[toolKey];
const group = {
label: tool.name,
id: toolKey,
disabled: false,
choices: []
};
for (const formatKey in tool.formats) {
group.choices.push({
value: `${toolKey}_${formatKey}`,
label: `${formatKey.toUpperCase()} - ${tool.formats[formatKey]}`
});
}
choicesArray.push(group);
}
conversionChoices.setChoices(choicesArray, 'value', 'label', true);
}
// --- Helper Functions ---
function updateFileName(input, nameDisplay) {
nameDisplay.textContent = input.files.length > 0 ? input.files[0].name : 'No file chosen';
nameDisplay.title = nameDisplay.textContent; // Add a tooltip for the full name
const fileName = input.files.length > 0 ? input.files[0].name : 'No file chosen';
nameDisplay.textContent = fileName;
nameDisplay.title = fileName;
}
async function handleFormSubmit(event, endpoint, form, fileInput, fileNameDisplay) {
async function handleFormSubmit(event, endpoint, form) {
event.preventDefault();
const fileInput = form.querySelector('input[type="file"]');
const fileNameDisplay = form.querySelector('.file-name');
if (!fileInput.files[0]) return;
// MODIFICATION: Use new FormData(form) to capture all form fields,
// including the new model size dropdown for the audio form.
const formData = new FormData(form);
const submitButton = form.querySelector('button[type="submit"]');
submitButton.disabled = true;
@@ -47,54 +97,49 @@ document.addEventListener('DOMContentLoaded', () => {
throw new Error(errorData.detail || `HTTP error! Status: ${response.status}`);
}
const result = await response.json();
// To provide immediate feedback, create a placeholder job object
const preliminaryJob = {
id: result.job_id,
status: 'pending',
progress: 0,
original_filename: fileInput.files[0].name,
task_type: endpoint.includes('ocr') ? 'ocr' : 'transcription',
created_at: new Date().toISOString(),
processed_filepath: null,
error_message: null
task_type: endpoint.includes('ocr') ? 'ocr' : (endpoint.includes('transcribe') ? 'transcription' : 'conversion'),
created_at: new Date().toISOString()
};
renderJobRow(preliminaryJob); // Render immediately
startPolling(result.job_id); // Start polling for updates
renderJobRow(preliminaryJob);
startPolling(result.job_id);
} catch (error) {
console.error('Error submitting job:', error);
alert(`Submission failed: ${error.message}`);
} finally {
form.reset();
fileNameDisplay.textContent = 'No file chosen';
fileNameDisplay.title = '';
if (fileNameDisplay) fileNameDisplay.textContent = 'No file chosen';
// MODIFICATION: Use the stored instance to correctly reset the dropdown
// without causing an error.
if (form.id === 'conversion-form' && conversionChoices) {
conversionChoices.clearInput();
conversionChoices.setValue([]); // Clears the selected value
}
submitButton.disabled = false;
}
}
async function handleCancelJob(jobId) {
if (!confirm('Are you sure you want to cancel this job?')) return;
try {
const response = await fetch(`/job/${jobId}/cancel`, { method: 'POST' });
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.detail || 'Failed to cancel job.');
}
// The polling mechanism will update the UI to "cancelled" automatically.
// We can stop polling immediately to be more efficient.
stopPolling(jobId);
// Optionally, force an immediate UI update
const row = document.getElementById(`job-${jobId}`);
if (row) {
const statusCell = row.querySelector('td[data-label="Status"] .cell-value');
const actionCell = row.querySelector('td[data-label="Action"] .cell-value');
if (statusCell) {
statusCell.innerHTML = `<span class="job-status-badge status-cancelled">cancelled</span>`;
}
if (actionCell) {
actionCell.innerHTML = `<span>-</span>`;
}
if (statusCell) statusCell.innerHTML = `<span class="job-status-badge status-cancelled">Cancelled</span>`;
if (actionCell) actionCell.innerHTML = `<span>-</span>`;
}
} catch (error) {
console.error('Error cancelling job:', error);
@@ -107,7 +152,7 @@ document.addEventListener('DOMContentLoaded', () => {
const response = await fetch('/jobs');
if (!response.ok) throw new Error('Failed to fetch jobs.');
const jobs = await response.json();
jobListBody.innerHTML = ''; // Clear existing
jobListBody.innerHTML = '';
for (const job of jobs.reverse()) {
renderJobRow(job);
if (['pending', 'processing'].includes(job.status)) {
@@ -126,10 +171,7 @@ document.addEventListener('DOMContentLoaded', () => {
try {
const response = await fetch(`/job/${jobId}`);
if (!response.ok) {
if (response.status === 404) {
console.warn(`Job ${jobId} not found. Stopping poll.`);
stopPolling(jobId);
}
if (response.status === 404) stopPolling(jobId);
return;
}
const job = await response.json();
@@ -139,9 +181,9 @@ document.addEventListener('DOMContentLoaded', () => {
}
} catch (error) {
console.error(`Error polling for job ${jobId}:`, error);
stopPolling(jobId); // Stop polling on network or other errors
stopPolling(jobId);
}
}, 2500); // Poll every 2.5 seconds
}, 2500);
activePolls.set(jobId, intervalId);
}
@@ -159,21 +201,28 @@ document.addEventListener('DOMContentLoaded', () => {
row.id = `job-${job.id}`;
jobListBody.prepend(row);
}
const taskTypeLabel = job.task_type.includes('ocr') ? 'PDF/Image OCR' : 'Transcription';
const formattedDate = new Date(job.created_at).toLocaleString();
let statusHtml = `<span class="job-status-badge status-${job.status}">${job.status}</span>`;
let actionHtml = `<span>-</span>`;
if (job.status === 'processing') {
// Show real progress for transcription, but an indeterminate one for OCR tasks
const progressClass = job.task_type === 'transcription' ? '' : 'indeterminate';
const progressWidth = job.task_type === 'transcription' ? job.progress : 100;
const progressBarHtml = `<div class="progress-bar-container"><div class="progress-bar ${progressClass}" style="width: ${progressWidth}%"></div></div>`;
statusHtml += progressBarHtml;
let taskTypeLabel = 'Unknown';
if (job.task_type === 'ocr' || job.task_type === 'ocr-image') {
taskTypeLabel = 'OCR';
} else if (job.task_type === 'transcription') {
taskTypeLabel = 'Transcription';
} else if (job.task_type === 'conversion' && job.processed_filepath) {
const extension = job.processed_filepath.split('.').pop();
taskTypeLabel = `Convert to ${extension.toUpperCase()}`;
} else if (job.task_type === 'conversion') {
taskTypeLabel = 'Conversion';
}
const formattedDate = new Date(job.created_at).toLocaleString();
let statusHtml = `<span class="job-status-badge status-${job.status}">${job.status}</span>`;
if (job.status === 'processing') {
const progressClass = (job.task_type === 'transcription' && job.progress > 0) ? '' : 'indeterminate';
const progressWidth = job.task_type === 'transcription' ? job.progress : 100;
statusHtml += `<div class="progress-bar-container"><div class="progress-bar ${progressClass}" style="width: ${progressWidth}%"></div></div>`;
}
let actionHtml = `<span>-</span>`;
if (job.status === 'pending' || job.status === 'processing') {
actionHtml = `<button class="cancel-button" data-job-id="${job.id}">Cancel</button>`;
} else if (job.status === 'completed' && job.processed_filepath) {
@@ -184,12 +233,10 @@ document.addEventListener('DOMContentLoaded', () => {
actionHtml = `<span class="error-text"${errorTitle}>Failed</span>`;
}
// Use textContent for filename to prevent XSS and add a title for overflow
const escapedFilename = job.original_filename.replace(/</g, "&lt;").replace(/>/g, "&gt;");
const escapedFilename = job.original_filename ? job.original_filename.replace(/</g, "&lt;").replace(/>/g, "&gt;") : "No filename";
row.innerHTML = `
<td data-label="File"><span class="cell-value" title="${escapedFilename}">${escapedFilename}</span></td>
<td data-label="Type"><span class="cell-value">${taskTypeLabel}</span></td>
<td data-label="Task"><span class="cell-value">${taskTypeLabel}</span></td>
<td data-label="Submitted"><span class="cell-value">${formattedDate}</span></td>
<td data-label="Status"><span class="cell-value">${statusHtml}</span></td>
<td data-label="Action" class="action-col"><span class="cell-value">${actionHtml}</span></td>
@@ -197,5 +244,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
// --- Initial Load ---
initializeConversionSelector();
loadInitialJobs();
});

108
static/js/settings.js Normal file
View File

@@ -0,0 +1,108 @@
// static/js/settings.js
document.addEventListener('DOMContentLoaded', () => {
const settingsForm = document.getElementById('settings-form');
const saveStatus = document.getElementById('save-status');
const clearHistoryBtn = document.getElementById('clear-history-btn');
const deleteFilesBtn = document.getElementById('delete-files-btn');
// --- Save Settings ---
settingsForm.addEventListener('submit', async (event) => {
event.preventDefault();
saveStatus.textContent = 'Saving...';
saveStatus.classList.remove('success', 'error');
const formData = new FormData(settingsForm);
const settingsObject = {};
// Convert FormData to a nested object
formData.forEach((value, key) => {
// Handle checkboxes that might not be submitted if unchecked
if (key.includes('ocr_settings')) {
const checkbox = document.querySelector(`[name="${key}"]`);
if (checkbox && checkbox.type === 'checkbox') {
value = checkbox.checked;
}
}
const keys = key.split('.');
let current = settingsObject;
keys.forEach((k, index) => {
if (index === keys.length - 1) {
current[k] = value;
} else {
current[k] = current[k] || {};
current = current[k];
}
});
});
// Ensure unchecked OCR boxes are sent as false
const ocrCheckboxes = settingsForm.querySelectorAll('input[type="checkbox"][name^="ocr_settings"]');
ocrCheckboxes.forEach(cb => {
const keys = cb.name.split('.');
if (!formData.has(cb.name)) {
// this is a bit of a hack but gets the job done for this specific form
settingsObject[keys[0]][keys[1]][keys[2]] = false;
}
});
try {
const response = await fetch('/settings/save', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(settingsObject)
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.detail || 'Failed to save settings.');
}
saveStatus.textContent = 'Settings saved successfully!';
saveStatus.classList.add('success');
} catch (error) {
saveStatus.textContent = `Error: ${error.message}`;
saveStatus.classList.add('error');
console.error('Error saving settings:', error);
} finally {
setTimeout(() => {
saveStatus.textContent = '';
saveStatus.classList.remove('success', 'error');
}, 5000);
}
});
// --- Clear History ---
clearHistoryBtn.addEventListener('click', async () => {
if (!confirm('ARE YOU SURE?\n\nThis will permanently delete all job history records from the database.')) {
return;
}
try {
const response = await fetch('/settings/clear-history', { method: 'POST' });
if (!response.ok) throw new Error('Server responded with an error.');
const result = await response.json();
alert(`Success: ${result.deleted_count} job records have been deleted.`);
} catch (error) {
alert('An error occurred while clearing history.');
console.error(error);
}
});
// --- Delete Files ---
deleteFilesBtn.addEventListener('click', async () => {
if (!confirm('ARE YOU SURE?\n\nThis will permanently delete all files in the "processed" folder.')) {
return;
}
try {
const response = await fetch('/settings/delete-files', { method: 'POST' });
if (!response.ok) throw new Error('Server responded with an error.');
const result = await response.json();
alert(`Success: ${result.deleted_count} files have been deleted.`);
} catch (error) {
alert('An error occurred while deleting files.');
console.error(error);
}
});
});