lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release search

Browse Source
This commit is contained in:
lelo 2025-04-05 10:12:37 +00:00
parent 57f61b9675
commit b22ff260d3
4 changed files with 199 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
search.py
View File

@ -1,5 +1,6 @@
import sqlite3
from flask import Flask, render_template, request, request, jsonify
import os
app = Flask(__name__)
@ -15,7 +16,6 @@ def searchcommand():
cursor = search_db.cursor()
if not include_transcript:
# Simple search: all words must be in either relative_path or filename.
conditions = []
params = []
for word in words:
@ -24,6 +24,7 @@ def searchcommand():
sql = "SELECT * FROM files"
if conditions:
sql += " WHERE " + " AND ".join(conditions)
sql += " ORDER BY hitcount DESC"
cursor.execute(sql, params)
raw_results = cursor.fetchall()
results = [dict(row) for row in raw_results]
@ -46,13 +47,16 @@ def searchcommand():
transcript = result.get("transcript") or ""
total_hits = sum(transcript.lower().count(word.lower()) for word in words)
result["transcript_hits"] = total_hits
result["transcript"] = None # Remove full transcript if needed.
result["transcript"] = None
results.append(result)
# Sort results so files with more transcript hits are on top.
results.sort(key=lambda x: x["transcript_hits"], reverse=True)
results = results[:100]
return jsonify(results=results)
def search():
return render_template('search.html')
title_short = os.environ.get('TITLE_SHORT', 'Default Title')
title_long = os.environ.get('TITLE_LONG', 'Default Title')
return render_template("search.html", title_short=title_short, title_long=title_long)

7
static/app.css
View File

@ -84,13 +84,13 @@ li {
}
/* mouse symbol for links */
div.directory-item, li.directory-item, li.file-item,
div.directory-item a, li.directory-item a, li.file-item a {
div.directory-item, li.directory-item, li.file-item, li.link-item,
div.directory-item a, li.directory-item a, li.file-item a, li.link-item a {
cursor: pointer;
}
/* Directory Items (in a list) */
.directory-item {
.directory-item, .link-item {
padding: 15px;
}
@ -122,6 +122,7 @@ div.directory-item a, li.directory-item a, li.file-item a {
/* Link Styles */
.directory-link,
.link-link,
a.play-file {
color: #34495e;
text-decoration: none;

3
static/app.js
View File

@ -63,6 +63,9 @@ function renderContent(data) {
data.directories.forEach(dir => {
contentHTML += `<li class="directory-item">📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a></li>`;
});
if (data.breadcrumbs.length == 1) {
contentHTML += `<li class="link-item" onclick="window.location.href='/search'">🔎 <a href="/search" class="link-link">Suche</a></li>`;
}
contentHTML += '</ul>';
}
}

208
templates/search.html
View File

@ -8,73 +8,108 @@
<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>Dateisuche</title>
<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">
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
body {
background-color: #f8f9fa;
}
.search-container {
margin-top: 50px;
}
.card {
margin-bottom: 20px;
}
body { background-color: #f8f9fa; }
.site-header { width: 100%; }
.card { margin-bottom: 20px; }
</style>
</head>
<body>
<header class="site-header">
<a href="#">
<a href="/">
<img src="/static/logoW.png" alt="Logo" class="logo">
</a>
<h1>Suche</h1>
<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.getElementById('searchForm').addEventListener('submit', function(e) {
e.preventDefault();
const query = document.getElementById('query').value.trim();
const includeTranscript = document.getElementById('includeTranscript').checked;
document.addEventListener('DOMContentLoaded', function() {
// Prepare form data
const formData = new FormData();
formData.append('query', query);
formData.append('includeTranscript', includeTranscript);
fetch('/searchcommand', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
// 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 => {
// Create a card element for each result
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
@ -83,7 +118,10 @@ document.getElementById('searchForm').addEventListener('submit', function(e) {
<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>` : ''}
${ 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);
@ -91,10 +129,118 @@ document.getElementById('searchForm').addEventListener('submit', function(e) {
} 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>