mstoeck3/forensic-pathways
2
0
Fork 0
Code Issues 17 Pull Requests Projects Releases Activity

iteration UI overhaul

Browse Source
This commit is contained in:
overcuriousity
2025-07-27 16:51:28 +02:00
parent 1f9df5c1a8
commit 0d22210040
5 changed files with 399 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/components/TargetedScenarios.astro Normal file
View File

@@ -0,0 +1,168 @@
---
import { getToolsData } from '../utils/dataService.js';
const data = await getToolsData();
const scenarios = data.scenarios || [];
// Configuration
const maxDisplayed = 9;
const displayedScenarios = scenarios.slice(0, maxDisplayed);
---
<section id="targeted-section" class="targeted-section">
<div class="targeted-header">
<h3>Gezielte Tool-Suche</h3>
<p class="targeted-subtitle">
Finden Sie schnell das passende Werkzeug für Ihre spezifische Anforderung
</p>
</div>
<div class="search-interface">
<div class="search-box">
<div class="search-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
</div>
<input
type="text"
class="targeted-search-input"
placeholder="z.B. 'Windows Registry analysieren' oder 'PCAP-Dateien auswerten'..."
id="targeted-search-input"
/>
</div>
{scenarios.length > 0 && (
<div class="search-suggestions" id="scenario-suggestions">
{displayedScenarios.map((scenario) => (
<div
class="suggestion-chip"
data-scenario-id={scenario.id}
onclick={`applyScenarioSearch('${scenario.id}')`}
>
<span class="scenario-emoji">{scenario.icon}</span>
<span class="scenario-text">{scenario.friendly_name}</span>
</div>
))}
</div>
)}
{scenarios.length > maxDisplayed && (
<div class="more-scenarios">
<button class="btn-more-scenarios" onclick="toggleAllScenarios()" id="more-scenarios-btn">
+ {scenarios.length - maxDisplayed} weitere Szenarien
</button>
</div>
)}
</div>
<div class="targeted-tip">
<p>
<strong>Tipp:</strong> Die Szenarien durchsuchen automatisch nach passenden Tags und Beschreibungen.
Für KI-gestützte Empfehlungen nutzen Sie den entsprechenden Modus.
</p>
</div>
</section>
<script define:vars={{ allScenarios: scenarios, maxDisplay: maxDisplayed }}>
let showingAllScenarios = false;
// Apply scenario search using existing search functionality
window.applyScenarioSearch = function(scenarioId) {
console.log(`Applying scenario search: ${scenarioId}`);
// Find the main search input (existing)
const mainSearchInput = document.getElementById('search-input');
if (mainSearchInput) {
// Use scenario ID as search term (it should match tool tags)
mainSearchInput.value = scenarioId;
// Trigger existing search functionality
const inputEvent = new Event('input', { bubbles: true });
mainSearchInput.dispatchEvent(inputEvent);
// Switch to grid view
const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
if (gridToggle && !gridToggle.classList.contains('active')) {
gridToggle.click();
}
// Scroll to results
setTimeout(() => {
const toolsGrid = document.getElementById('tools-grid');
if (toolsGrid) {
toolsGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, 200);
}
// Visual feedback
document.querySelectorAll('.suggestion-chip').forEach(chip => {
chip.classList.remove('active');
});
document.querySelector(`[data-scenario-id="${scenarioId}"]`)?.classList.add('active');
};
// Toggle showing all scenarios
window.toggleAllScenarios = function() {
const suggestionsContainer = document.getElementById('scenario-suggestions');
const moreBtn = document.getElementById('more-scenarios-btn');
if (!showingAllScenarios) {
// Show additional scenarios
const additionalScenarios = allScenarios.slice(maxDisplay);
additionalScenarios.forEach(scenario => {
const chip = document.createElement('div');
chip.className = 'suggestion-chip additional-scenario';
chip.setAttribute('data-scenario-id', scenario.id);
chip.onclick = () => applyScenarioSearch(scenario.id);
chip.innerHTML = `
<span class="scenario-emoji">${scenario.icon}</span>
<span class="scenario-text">${scenario.friendly_name}</span>
`;
suggestionsContainer.appendChild(chip);
});
moreBtn.textContent = 'Weniger anzeigen';
showingAllScenarios = true;
} else {
// Hide additional scenarios
document.querySelectorAll('.additional-scenario').forEach(chip => chip.remove());
moreBtn.textContent = `+ ${allScenarios.length - maxDisplay} weitere Szenarien`;
showingAllScenarios = false;
}
};
// Handle targeted search input
document.addEventListener('DOMContentLoaded', () => {
const targetedInput = document.getElementById('targeted-search-input');
if (targetedInput) {
targetedInput.addEventListener('input', (e) => {
const mainSearchInput = document.getElementById('search-input');
if (mainSearchInput && e.target.value.length > 2) {
mainSearchInput.value = e.target.value;
const inputEvent = new Event('input', { bubbles: true });
mainSearchInput.dispatchEvent(inputEvent);
}
});
targetedInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
// Switch to grid view and scroll to results
const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
if (gridToggle) {
gridToggle.click();
setTimeout(() => {
const toolsGrid = document.getElementById('tools-grid');
if (toolsGrid) {
toolsGrid.scrollIntoView({ behavior: 'smooth' });
}
}, 100);
}
}
});
}
});
</script>