Skip to content

Commit 5090e25

Browse files
fastenderfastender
authored
Update fast-search-card.js
1 parent 6375720 commit 5090e25

File tree

1 file changed

+98
-65
lines changed

1 file changed

+98
-65
lines changed

‎dist/fast-search-card.js‎

Lines changed: 98 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -7857,60 +7857,92 @@ class FastSearchCard extends HTMLElement {
78577857
getShortcutsHTML(item) {
78587858
return `
78597859
<div class="shortcuts-container">
7860+
78607861
<div class="shortcuts-header">
78617862
<h3>Shortcuts für ${item.name}</h3>
7862-
<div class="shortcuts-controls">
7863-
<button class="shortcuts-btn active" data-shortcuts-tab="timer">Timer</button>
7864-
<button class="shortcuts-btn" data-shortcuts-tab="zeitplan">Zeitplan</button>
7865-
<button class="shortcuts-btn" data-shortcuts-tab="actions">Aktionen</button>
7866-
</div>
7867-
</div>
7868-
7869-
<div class="shortcuts-content">
7870-
<!-- ✅ TIMER TAB - Nur noch Timer-spezifische Inhalte -->
7871-
<div class="shortcuts-tab-content active" data-shortcuts-content="timer">
7872-
<div id="timer-section-${item.id}">
7873-
<!-- Aktive Timer Anzeige -->
7874-
<div class="active-timers" id="active-timers-${item.id}">
7875-
<div class="loading-timers">Lade Timer...</div>
7863+
</div>
7864+
7865+
<div class="shortcuts-content">
7866+
<!-- ACCORDION CONTAINER -->
7867+
<div class="accordion-container">
7868+
7869+
<!-- TIMER ACCORDION -->
7870+
<div class="accordion-item">
7871+
<div class="accordion-header active" data-accordion="timer">
7872+
<span>📋 Timer</span>
7873+
<span class="accordion-arrow">
7874+
<svg width="20px" height="20px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7875+
<path d="M6 12H12M18 12H12M12 12V6M12 12V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
7876+
</svg>
7877+
</span>
78767878
</div>
7877-
7878-
<!-- 🚨 HIER DIREKT TIMER-PRESETS - KEIN Timer/Zeitplan Button mehr -->
7879-
<div class="timer-control-design" id="timer-control-${item.id}">
7880-
<!-- ✅ Direkt die Action Presets (größeres Design) -->
7881-
<div class="timer-control-presets timer-action-presets visible" data-is-open="true">
7882-
<div class="timer-control-presets-grid">
7883-
${this.getTimerPresetsForDevice(item)}
7879+
<div class="accordion-content open" data-content="timer">
7880+
<div id="timer-section-${item.id}">
7881+
<!-- Aktive Timer Anzeige -->
7882+
<div class="active-timers" id="active-timers-${item.id}">
7883+
<div class="loading-timers">Lade Timer...</div>
7884+
</div>
7885+
7886+
<!-- Timer Controls -->
7887+
<div class="timer-control-design" id="timer-control-${item.id}">
7888+
<div class="timer-control-presets timer-action-presets visible" data-is-open="true">
7889+
<div class="timer-control-presets-grid">
7890+
${this.getTimerPresetsForDevice(item)}
7891+
</div>
7892+
</div>
78847893
</div>
78857894
</div>
78867895
</div>
78877896
</div>
7888-
</div>
7889-
7890-
<!-- ✅ NEUER ZEITPLAN TAB -->
7891-
<div class="shortcuts-tab-content" data-shortcuts-content="zeitplan">
7892-
<div id="schedule-section-${item.id}">
7893-
<!-- Aktive Zeitpläne Anzeige -->
7894-
<div class="active-schedules" id="active-schedules-${item.id}">
7895-
<div class="loading-schedules">Lade Zeitpläne...</div>
7897+
7898+
<!-- ZEITPLAN ACCORDION -->
7899+
<div class="accordion-item">
7900+
<div class="accordion-header" data-accordion="zeitplan">
7901+
<span>📅 Zeitplan</span>
7902+
<span class="accordion-arrow">
7903+
<svg width="20px" height="20px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7904+
<path d="M6 12H12M18 12H12M12 12V6M12 12V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
7905+
</svg>
7906+
</span>
78967907
</div>
7897-
7898-
<!-- Zeitplan Controls -->
7899-
<div class="schedule-control-design" id="schedule-control-${item.id}">
7900-
<div class="timer-control-presets schedule-action-presets visible" data-is-open="true">
7901-
<div class="timer-control-presets-grid">
7902-
${this.getTimerPresetsForDevice(item)}
7908+
<div class="accordion-content" data-content="zeitplan">
7909+
<div id="schedule-section-${item.id}">
7910+
<!-- Aktive Zeitpläne Anzeige -->
7911+
<div class="active-schedules" id="active-schedules-${item.id}">
7912+
<div class="loading-schedules">Lade Zeitpläne...</div>
7913+
</div>
7914+
7915+
<!-- Zeitplan Controls -->
7916+
<div class="schedule-control-design" id="schedule-control-${item.id}">
7917+
<div class="timer-control-presets schedule-action-presets visible" data-is-open="true">
7918+
<div class="timer-control-presets-grid">
7919+
${this.getTimerPresetsForDevice(item)}
7920+
</div>
7921+
</div>
79037922
</div>
7904-
</div>
7923+
</div>
79057924
</div>
79067925
</div>
7907-
</div>
7908-
7909-
<!-- ✅ AKTIONEN TAB -->
7910-
<div class="shortcuts-tab-content" data-shortcuts-content="actions">
7911-
<p>Aktionen Content - wird implementiert</p>
7926+
7927+
<!-- AKTIONEN ACCORDION -->
7928+
<div class="accordion-item">
7929+
<div class="accordion-header" data-accordion="actions">
7930+
<span>⚙️ Aktionen</span>
7931+
<span class="accordion-arrow">
7932+
<svg width="20px" height="20px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7933+
<path d="M6 12H12M18 12H12M12 12V6M12 12V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
7934+
</svg>
7935+
</span>
7936+
</div>
7937+
<div class="accordion-content" data-content="actions">
7938+
<p>Aktionen Content - wird implementiert</p>
7939+
</div>
7940+
</div>
7941+
79127942
</div>
79137943
</div>
7944+
7945+
79147946
</div>
79157947
`;
79167948
}
@@ -11554,42 +11586,43 @@ class FastSearchCard extends HTMLElement {
1155411586
const shortcutsBtns = this.shadowRoot.querySelectorAll('.shortcuts-btn');
1155511587
console.log('🎯 Found shortcuts buttons:', shortcutsBtns.length);
1155611588

11557-
shortcutsBtns.forEach(btn => {
11558-
btn.addEventListener('click', (e) => {
11559-
e.preventDefault();
11560-
e.stopPropagation();
11589+
// NEU: Accordion Event Listeners
11590+
const accordionHeaders = this.shadowRoot.querySelectorAll('.accordion-header');
11591+
accordionHeaders.forEach(header => {
11592+
header.addEventListener('click', () => {
11593+
const accordionType = header.dataset.accordion;
11594+
const content = this.shadowRoot.querySelector(`[data-content="${accordionType}"]`);
11595+
const arrow = header.querySelector('.accordion-arrow svg');
1156111596

11562-
const targetTab = btn.dataset.shortcutsTab;
11563-
console.log(`🎯 Switching to tab: ${targetTab}`);
11564-
11565-
// Alle Buttons deaktivieren
11566-
shortcutsBtns.forEach(b => b.classList.remove('active'));
11567-
btn.classList.add('active');
11597+
// Toggle
11598+
const isOpen = content.classList.contains('open');
1156811599

11569-
// Alle Contents verstecken
11570-
const shortcutsContents = this.shadowRoot.querySelectorAll('.shortcuts-tab-content');
11571-
shortcutsContents.forEach(content => content.classList.remove('active'));
11600+
if (isOpen) {
11601+
content.classList.remove('open');
11602+
header.classList.remove('active');
11603+
arrow.style.transform = 'rotate(0deg)';
11604+
} else {
11605+
content.classList.add('open');
11606+
header.classList.add('active');
11607+
arrow.style.transform = 'rotate(45deg)';
11608+
}
1157211609

11573-
// Ziel-Content anzeigen
11574-
const targetContent = this.shadowRoot.querySelector(`[data-shortcuts-content="${targetTab}"]`);
11575-
if (targetContent) {
11576-
targetContent.classList.add('active');
11577-
11578-
// Tab-spezifische Initialisierung
11579-
switch(targetTab) {
11610+
// Tab-spezifische Initialisierung wenn geöffnet
11611+
if (!isOpen) {
11612+
switch(accordionType) {
1158011613
case 'timer':
11581-
this.initializeTimerTab(item, targetContent);
11614+
this.initializeTimerTab(item, content);
1158211615
break;
1158311616
case 'zeitplan':
11584-
this.initializeScheduleTab(item, targetContent);
11617+
this.initializeScheduleTab(item, content);
1158511618
break;
1158611619
case 'actions':
11587-
this.initializeActionsTab(item, targetContent);
11620+
this.initializeActionsTab(item, content);
1158811621
break;
1158911622
}
1159011623
}
1159111624
});
11592-
});
11625+
});
1159311626

1159411627
// Initial Timer Tab aktivieren
1159511628
const timerContent = this.shadowRoot.querySelector('[data-shortcuts-content="timer"]');

0 commit comments

Comments
 (0)