81 lines
2.9 KiB
Templ
81 lines
2.9 KiB
Templ
package web
|
|
|
|
templ SearchForm() {
|
|
@Base() {
|
|
<button id="dark-mode-toggle">🌙</button>
|
|
<div id="search-container">
|
|
<input id="search_term" name="search_term" type="text" hx-post="/findfuzzy" hx-trigger="keyup changed delay:0.25s" hx-target="#soundtracks-container"/>
|
|
<div class="radio-group" style="display: inline-block; margin-left: 10px;">
|
|
<label><input type="radio" name="search_type" value="fuzzy" checked> Fuzzy</label>
|
|
<label><input type="radio" name="search_type" value="normal"> Normal</label>
|
|
</div>
|
|
<button type="button" id="clear" name="clear">Clear</button>
|
|
</div>
|
|
<div id="soundtracks-container"></div>
|
|
<script>
|
|
// Get current search type from radio buttons
|
|
function getSearchType() {
|
|
return document.querySelector('input[name="search_type"]:checked').value;
|
|
}
|
|
|
|
// Get endpoint based on search type
|
|
function getSearchEndpoint() {
|
|
return getSearchType() === 'fuzzy' ? '/findfuzzy' : '/find';
|
|
}
|
|
|
|
// Update search input endpoint
|
|
function updateSearchEndpoint() {
|
|
const endpoint = getSearchEndpoint();
|
|
document.getElementById('search_term').setAttribute('hx-post', endpoint);
|
|
}
|
|
|
|
document.addEventListener('readystatechange', () => {
|
|
if (document.readyState == 'complete') {
|
|
// Initialize with fuzzy search (default)
|
|
htmlx.ajax('POST', '/findfuzzy', '#soundtracks-container');
|
|
document.getElementById("search_term").focus();
|
|
|
|
// Add event listeners for radio buttons
|
|
document.querySelectorAll('input[name="search_type"]').forEach(radio => {
|
|
radio.addEventListener('change', updateSearchEndpoint);
|
|
});
|
|
|
|
// Initialize dark mode from localStorage (default to dark)
|
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
|
if (savedTheme === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
document.getElementById('dark-mode-toggle').textContent = '☀️';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Dark mode toggle functionality
|
|
document.getElementById("dark-mode-toggle").addEventListener("click", function() {
|
|
const html = document.documentElement;
|
|
const currentTheme = html.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
|
|
html.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
|
|
// Update toggle button text
|
|
this.textContent = newTheme === 'dark' ? '☀️' : '🌙';
|
|
});
|
|
|
|
document.getElementById("clear").addEventListener("click", function (event) {
|
|
document.getElementById("search_term").value = "";
|
|
// Use current search type endpoint
|
|
htmlx.ajax('POST', getSearchEndpoint(), '#soundtracks-container');
|
|
document.getElementById("search_term").focus();
|
|
});
|
|
</script>
|
|
}
|
|
}
|
|
|
|
templ FoundSoundtracks(soundtracks []string) {
|
|
for _, soundtrack := range soundtracks {
|
|
<div class="bg-green-100 p-4 shadow-md rounded-lg mt-6">
|
|
<p class="soundtrack-text">{ soundtrack }</p>
|
|
</div>
|
|
}
|
|
} |