Added fuzzy finder to search, made sync check as middleware, .id file is never used

2026-07-02 09:30:24 +02:00
parent a8df738108
commit eda60e0c07
9 changed files with 522 additions and 282 deletions
@@ -0,0 +1,81 @@
+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>
+	}
+}