251 lines
11 KiB
HTML
251 lines
11 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<meta property="og:title" content="Gottesdienste Speyer und Schwegenheim" />
|
|
<meta property="og:description" content="... uns aber, die wir gerettet werden, ist es eine Gotteskraft." />
|
|
<meta property="og:image" content="https://app.bethaus-speyer.de/static/icons/logo-200x200.png" />
|
|
<meta property="og:url" content="https://app.bethaus-speyer.de" />
|
|
|
|
<title>{{ title_short }}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<meta name="description" content="... uns aber, die wir gerettet werden, ist es eine Gotteskraft.">
|
|
<meta name="author" content="Bethaus Speyer">
|
|
<link rel="icon" href="/static/icons/logo-192x192.png" type="image/png" sizes="192x192">
|
|
|
|
|
|
<!-- Web App Manifest -->
|
|
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
|
|
|
|
<!-- Android Theme Color -->
|
|
<meta name="theme-color" content="#34495e">
|
|
|
|
<!-- Apple-specific tags -->
|
|
<link rel="touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-status-bar-style" content="default">
|
|
<meta name="mobile-web-app-title" content="Gottesdienste">
|
|
|
|
<!-- Your CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
|
|
|
|
<!-- Bootstrap CSS for modern styling -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<style>
|
|
body { background-color: #f8f9fa; }
|
|
.site-header { width: 100%; }
|
|
.card { margin-bottom: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<a href="/">
|
|
<img src="/static/logoW.png" alt="Logo" class="logo">
|
|
</a>
|
|
<h1>{{ title_long }}</h1>
|
|
</header>
|
|
<div class="container search-container">
|
|
<h1>Suche</h1>
|
|
<form id="searchForm" method="post" class="mb-4">
|
|
<div class="mb-3">
|
|
<label for="query" class="form-label">Suchwörter:</label>
|
|
<input type="text" id="query" name="query" class="form-control" required>
|
|
</div>
|
|
<!-- Radio Button for Kategorie -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Kategorie:</label>
|
|
<div>
|
|
<div class="form-check form-check-inline">
|
|
<!-- "Alles" is default if nothing is selected -->
|
|
<input class="form-check-input" type="radio" name="category" id="none" value="" checked>
|
|
<label class="form-check-label" for="none">Alles</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="category" id="lied" value="Lied">
|
|
<label class="form-check-label" for="lied">Lied</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="category" id="gedicht" value="Gedicht">
|
|
<label class="form-check-label" for="gedicht">Gedicht</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="category" id="predigt" value="Predigt">
|
|
<label class="form-check-label" for="predigt">Predigt</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="category" id="chor" value="chor">
|
|
<label class="form-check-label" for="chor">Chor</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="category" id="orchester" value="orchester">
|
|
<label class="form-check-label" for="orchester">Orchester</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Checkbox for transcript search -->
|
|
<div class="form-check mb-3">
|
|
<input type="checkbox" class="form-check-input" id="includeTranscript" name="includeTranscript">
|
|
<label class="form-check-label" for="includeTranscript">Im Transkript suchen</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Suchen</button>
|
|
<!-- Clear Button -->
|
|
<button type="button" id="clearBtn" class="btn btn-secondary ms-2">neue Suche</button>
|
|
<!-- Back Button -->
|
|
<button type="button" id="backBtn" class="btn btn-secondary ms-2">zurück</button>
|
|
</form>
|
|
<!-- Container for AJAX-loaded results -->
|
|
<div id="results"></div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// Function to render search results from a response object
|
|
function renderResults(data) {
|
|
const resultsDiv = document.getElementById('results');
|
|
resultsDiv.innerHTML = ''; // Clear previous results
|
|
|
|
if (data.results && data.results.length > 0) {
|
|
data.results.forEach(file => {
|
|
const card = document.createElement('div');
|
|
card.className = 'card';
|
|
card.innerHTML = `
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
<a href="/path/${file.relative_path}" target="_blank">${file.filename}</a>
|
|
</h5>
|
|
<h6 class="card-subtitle mb-2 text-muted">${file.relative_path}</h6>
|
|
${ file.transcript_hits !== undefined
|
|
? `<p class="card-text">Treffer im Transkript: ${file.transcript_hits}</p>`
|
|
: `<p class="card-text">Downloads: ${file.hitcount}</p>`
|
|
}
|
|
</div>
|
|
`;
|
|
resultsDiv.appendChild(card);
|
|
});
|
|
} else {
|
|
resultsDiv.innerHTML = '<p>No results found.</p>';
|
|
}
|
|
}
|
|
|
|
// Restore previous search response if available from localStorage
|
|
const previousResponse = localStorage.getItem("searchResponse");
|
|
if (previousResponse) {
|
|
try {
|
|
const data = JSON.parse(previousResponse);
|
|
renderResults(data);
|
|
} catch (e) {
|
|
console.error('Error parsing searchResponse from localStorage:', e);
|
|
}
|
|
}
|
|
|
|
// Restore previous search word (Suchwort) if available
|
|
const previousQuery = localStorage.getItem("searchQuery");
|
|
if (previousQuery) {
|
|
document.getElementById('query').value = previousQuery;
|
|
}
|
|
|
|
// Restore previous selected category if available, otherwise default remains "Alles"
|
|
const previousCategory = localStorage.getItem("searchCategory");
|
|
if (previousCategory !== null) {
|
|
const radio = document.querySelector('input[name="category"][value="' + previousCategory + '"]');
|
|
if (radio) {
|
|
radio.checked = true;
|
|
}
|
|
}
|
|
|
|
// Restore the checkbox state for "Im Transkript suchen"
|
|
const previousIncludeTranscript = localStorage.getItem("searchIncludeTranscript");
|
|
if (previousIncludeTranscript !== null) {
|
|
document.getElementById('includeTranscript').checked = (previousIncludeTranscript === 'true');
|
|
}
|
|
|
|
// Form submission event
|
|
document.getElementById('searchForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const query = document.getElementById('query').value.trim();
|
|
const includeTranscript = document.getElementById('includeTranscript').checked;
|
|
|
|
// Get the selected category radio button, if any
|
|
const categoryRadio = document.querySelector('input[name="category"]:checked');
|
|
const category = categoryRadio ? categoryRadio.value : '';
|
|
|
|
// Append the category to the search query if selected
|
|
const fullQuery = category ? query + " " + category : query;
|
|
|
|
// Prevent accidental re-selection of already selected radio buttons
|
|
const radios = document.querySelectorAll('input[name="category"]');
|
|
radios.forEach(radio => {
|
|
radio.addEventListener('mousedown', function(e) {
|
|
this.wasChecked = this.checked;
|
|
});
|
|
radio.addEventListener('click', function(e) {
|
|
if (this.wasChecked) {
|
|
this.checked = false;
|
|
this.wasChecked = false;
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Prepare form data for the fetch request
|
|
const formData = new FormData();
|
|
formData.append('query', fullQuery);
|
|
formData.append('includeTranscript', includeTranscript);
|
|
|
|
fetch('/searchcommand', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Render the results
|
|
renderResults(data);
|
|
// Store the raw response in localStorage
|
|
try {
|
|
localStorage.setItem("searchResponse", JSON.stringify(data));
|
|
} catch (e) {
|
|
console.error('Error saving searchResponse to localStorage:', e);
|
|
}
|
|
// Save the search word, selected category, and checkbox state in localStorage
|
|
localStorage.setItem("searchQuery", query);
|
|
localStorage.setItem("searchCategory", category);
|
|
localStorage.setItem("searchIncludeTranscript", includeTranscript);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
});
|
|
|
|
// Clear button event handler
|
|
document.getElementById('clearBtn').addEventListener('click', function() {
|
|
// Remove stored items
|
|
localStorage.removeItem("searchResponse");
|
|
localStorage.removeItem("searchQuery");
|
|
localStorage.removeItem("searchCategory");
|
|
localStorage.removeItem("searchIncludeTranscript");
|
|
// Reset form fields to defaults
|
|
document.getElementById('query').value = '';
|
|
document.querySelector('input[name="category"][value=""]').checked = true;
|
|
const otherRadios = document.querySelectorAll('input[name="category"]:not([value=""])');
|
|
otherRadios.forEach(radio => radio.checked = false);
|
|
document.getElementById('includeTranscript').checked = false;
|
|
// Clear the results div
|
|
document.getElementById('results').innerHTML = '';
|
|
});
|
|
|
|
// Back button event handler - redirect to the root path
|
|
document.getElementById('backBtn').addEventListener('click', function() {
|
|
window.location.href = '/';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Bootstrap Bundle with Popper -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|