Skip to content

Commit a9397f1

Browse files
fastenderfastender
authored
Add files via upload
1 parent 1f5a89b commit a9397f1

File tree

1 file changed

+87
-169
lines changed

1 file changed

+87
-169
lines changed

‎dist/fast-search-card.js‎

Lines changed: 87 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -1349,33 +1349,6 @@ class FastSearchCard extends HTMLElement {
13491349
scrollbar-width: none;
13501350
max-height: 100%;
13511351
}
1352-
1353-
#tab-content-container.shortcuts-active {
1354-
padding: 0px;
1355-
}
1356-
1357-
/* Accordion Styles nur im Shortcuts Tab */
1358-
#tab-content-container.shortcuts-active .accordion-content.open {
1359-
background: rgba(0, 0, 0, 0.3);
1360-
max-height: 300px;
1361-
overflow-y: auto;
1362-
scrollbar-width: thin;
1363-
scrollbar-color: rgba(255,255,255,0.2) transparent;
1364-
}
1365-
1366-
#tab-content-container.shortcuts-active .accordion-content.open::-webkit-scrollbar {
1367-
width: 4px;
1368-
}
1369-
1370-
#tab-content-container.shortcuts-active .accordion-content.open::-webkit-scrollbar-track {
1371-
background: transparent;
1372-
}
1373-
1374-
#tab-content-container.shortcuts-active .accordion-content.open::-webkit-scrollbar-thumb {
1375-
background: rgba(255,255,255,0.2);
1376-
border-radius: 2px;
1377-
}
1378-
13791352
#tab-content-container::-webkit-scrollbar { display: none; }
13801353

13811354
.detail-tab-content { display: none; }
@@ -7884,88 +7857,60 @@ class FastSearchCard extends HTMLElement {
78847857
getShortcutsHTML(item) {
78857858
return `
78867859
<div class="shortcuts-container">
7887-
7888-
<div class="shortcuts-content">
7889-
<!-- ACCORDION CONTAINER -->
7890-
<div class="accordion-container">
7891-
7892-
<!-- TIMER ACCORDION -->
7893-
<div class="accordion-item">
7894-
<div class="accordion-header active" data-accordion="timer">
7895-
<span>📋 Timer</span>
7896-
<span class="accordion-arrow">
7897-
<svg width="20px" height="20px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7898-
<path d="M6 12H12M18 12H12M12 12V6M12 12V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
7899-
</svg>
7900-
</span>
7860+
<div class="shortcuts-header">
7861+
<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>
79017876
</div>
7902-
<div class="accordion-content open" data-content="timer">
7903-
<div id="timer-section-${item.id}">
7904-
<!-- Aktive Timer Anzeige -->
7905-
<div class="active-timers" id="active-timers-${item.id}">
7906-
<div class="loading-timers">Lade Timer...</div>
7907-
</div>
7908-
7909-
<!-- Timer Controls -->
7910-
<div class="timer-control-design" id="timer-control-${item.id}">
7911-
<div class="timer-control-presets timer-action-presets visible" data-is-open="true">
7912-
<div class="timer-control-presets-grid">
7913-
${this.getTimerPresetsForDevice(item)}
7914-
</div>
7915-
</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)}
79167884
</div>
79177885
</div>
79187886
</div>
79197887
</div>
7920-
7921-
<!-- ZEITPLAN ACCORDION -->
7922-
<div class="accordion-item">
7923-
<div class="accordion-header" data-accordion="zeitplan">
7924-
<span>📅 Zeitplan</span>
7925-
<span class="accordion-arrow">
7926-
<svg width="20px" height="20px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7927-
<path d="M6 12H12M18 12H12M12 12V6M12 12V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
7928-
</svg>
7929-
</span>
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>
79307896
</div>
7931-
<div class="accordion-content" data-content="zeitplan">
7932-
<div id="schedule-section-${item.id}">
7933-
<!-- Aktive Zeitpläne Anzeige -->
7934-
<div class="active-schedules" id="active-schedules-${item.id}">
7935-
<div class="loading-schedules">Lade Zeitpläne...</div>
7936-
</div>
7937-
7938-
<!-- Zeitplan Controls -->
7939-
<div class="schedule-control-design" id="schedule-control-${item.id}">
7940-
<div class="timer-control-presets schedule-action-presets visible" data-is-open="true">
7941-
<div class="timer-control-presets-grid">
7942-
${this.getTimerPresetsForDevice(item)}
7943-
</div>
7944-
</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)}
79457903
</div>
7946-
</div>
7947-
</div>
7948-
</div>
7949-
7950-
<!-- AKTIONEN ACCORDION -->
7951-
<div class="accordion-item">
7952-
<div class="accordion-header" data-accordion="actions">
7953-
<span>⚙️ Aktionen</span>
7954-
<span class="accordion-arrow">
7955-
<svg width="20px" height="20px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
7956-
<path d="M6 12H12M18 12H12M12 12V6M12 12V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
7957-
</svg>
7958-
</span>
7959-
</div>
7960-
<div class="accordion-content" data-content="actions">
7961-
<p>Aktionen Content - wird implementiert</p>
7904+
</div>
79627905
</div>
79637906
</div>
7964-
7907+
</div>
7908+
7909+
<!-- ✅ AKTIONEN TAB -->
7910+
<div class="shortcuts-tab-content" data-shortcuts-content="actions">
7911+
<p>Aktionen Content - wird implementiert</p>
79657912
</div>
79667913
</div>
7967-
7968-
79697914
</div>
79707915
`;
79717916
}
@@ -8691,14 +8636,7 @@ class FastSearchCard extends HTMLElement {
86918636

86928637
// Cancel Button
86938638
cancelBtn.addEventListener('click', () => {
8694-
// FIX: Korrekte Container-Suche für Accordion
8695-
const accordionContent = container.closest('.accordion-content');
8696-
if (accordionContent) {
8697-
this.closeMinimalTimePicker(accordionContent);
8698-
} else {
8699-
// Fallback für Tab-System
8700-
this.closeMinimalTimePicker(container.closest('.shortcuts-tab-content'));
8701-
}
8639+
this.closeMinimalTimePicker(container.closest('.shortcuts-tab-content'));
87028640
});
87038641

87048642
// Create Button
@@ -9076,9 +9014,7 @@ class FastSearchCard extends HTMLElement {
90769014
await this.createActionTimer(item, action, totalMinutes);
90779015

90789016
// Schließe den Picker
9079-
const timePickerElement = this.shadowRoot.querySelector('.minimal-time-picker');
9080-
const parentContainer = timePickerElement.closest('.accordion-content') ||
9081-
timePickerElement.closest('.shortcuts-tab-content');
9017+
const parentContainer = this.shadowRoot.querySelector('.minimal-time-picker').closest('.shortcuts-tab-content');
90829018
this.closeMinimalTimePicker(parentContainer);
90839019

90849020
// Warte kurz und lade dann die Timer-Liste neu
@@ -9100,32 +9036,29 @@ class FastSearchCard extends HTMLElement {
91009036
// Reset state
91019037
this.timePickerState = null;
91029038

9103-
// Zeige normale Controls wieder
9039+
// Zeige normale Timer-Controls wieder
91049040
const timerControls = parentContainer.querySelector('.timer-control-design');
91059041
const activeTimers = parentContainer.querySelector('.active-timers');
91069042
const scheduleControls = parentContainer.querySelector('.schedule-control-design');
91079043
const activeSchedules = parentContainer.querySelector('.active-schedules');
91089044

9109-
if (timerControls) timerControls.style.display = 'block';
9110-
if (activeTimers) activeTimers.style.display = 'block';
9111-
if (scheduleControls) scheduleControls.style.display = 'block';
9112-
if (activeSchedules) activeSchedules.style.display = 'block';
9045+
if (timerControls) timerControls.style.display = '';
9046+
if (activeTimers) activeTimers.style.display = ''; // ← Das war falsch!
9047+
if (scheduleControls) scheduleControls.style.display = '';
9048+
if (activeSchedules) activeSchedules.style.display = '';
91139049

91149050
// Reset alle preset buttons
91159051
const allPresets = parentContainer.querySelectorAll('.timer-control-preset');
91169052
allPresets.forEach(p => p.classList.remove('active'));
91179053

9118-
// Entity ID aus dem Accordion-System finden
9119-
const detailPanel = parentContainer.closest('.detail-panel');
9120-
const entityId = detailPanel?.querySelector('[data-entity]')?.dataset.entity ||
9121-
this.currentDetailItem?.id;
9122-
9054+
// Lade aktive Timer neu
9055+
const entityId = parentContainer.closest('[data-entity-id]')?.dataset.entityId;
91239056
if (entityId) {
91249057
this.loadActiveTimers(entityId);
91259058
}
91269059

91279060
console.log('✅ Minimal Time Picker geschlossen');
9128-
}
9061+
}
91299062

91309063

91319064

@@ -11621,65 +11554,50 @@ class FastSearchCard extends HTMLElement {
1162111554
const shortcutsBtns = this.shadowRoot.querySelectorAll('.shortcuts-btn');
1162211555
console.log('🎯 Found shortcuts buttons:', shortcutsBtns.length);
1162311556

11624-
// NEU: Accordion Event Listeners (nur eines gleichzeitig)
11625-
const accordionHeaders = this.shadowRoot.querySelectorAll('.accordion-header');
11626-
accordionHeaders.forEach(header => {
11627-
header.addEventListener('click', () => {
11628-
const accordionType = header.dataset.accordion;
11629-
const content = this.shadowRoot.querySelector(`[data-content="${accordionType}"]`);
11630-
const arrow = header.querySelector('.accordion-arrow svg');
11557+
shortcutsBtns.forEach(btn => {
11558+
btn.addEventListener('click', (e) => {
11559+
e.preventDefault();
11560+
e.stopPropagation();
1163111561

11632-
const isOpen = content.classList.contains('open');
11562+
const targetTab = btn.dataset.shortcutsTab;
11563+
console.log(`🎯 Switching to tab: ${targetTab}`);
1163311564

11634-
// ALLE anderen Accordions schließen
11635-
accordionHeaders.forEach(otherHeader => {
11636-
const otherContent = this.shadowRoot.querySelector(`[data-content="${otherHeader.dataset.accordion}"]`);
11637-
const otherArrow = otherHeader.querySelector('.accordion-arrow svg');
11638-
11639-
otherContent.classList.remove('open');
11640-
otherHeader.classList.remove('active');
11641-
otherArrow.style.transform = 'rotate(0deg)';
11642-
});
11565+
// Alle Buttons deaktivieren
11566+
shortcutsBtns.forEach(b => b.classList.remove('active'));
11567+
btn.classList.add('active');
1164311568

11644-
// Aktuelles Toggle (nur öffnen wenn es geschlossen war)
11645-
if (!isOpen) {
11646-
content.classList.add('open');
11647-
header.classList.add('active');
11648-
arrow.style.transform = 'rotate(45deg)';
11569+
// Alle Contents verstecken
11570+
const shortcutsContents = this.shadowRoot.querySelectorAll('.shortcuts-tab-content');
11571+
shortcutsContents.forEach(content => content.classList.remove('active'));
11572+
11573+
// Ziel-Content anzeigen
11574+
const targetContent = this.shadowRoot.querySelector(`[data-shortcuts-content="${targetTab}"]`);
11575+
if (targetContent) {
11576+
targetContent.classList.add('active');
1164911577

11650-
// NACH dem DOM-Update initialisieren
11651-
requestAnimationFrame(() => {
11652-
switch(accordionType) {
11653-
case 'timer':
11654-
this.initializeTimerTab(item, content);
11655-
break;
11656-
case 'zeitplan':
11657-
this.initializeScheduleTab(item, content);
11658-
break;
11659-
case 'actions':
11660-
this.initializeActionsTab(item, content);
11661-
break;
11662-
}
11663-
});
11578+
// Tab-spezifische Initialisierung
11579+
switch(targetTab) {
11580+
case 'timer':
11581+
this.initializeTimerTab(item, targetContent);
11582+
break;
11583+
case 'zeitplan':
11584+
this.initializeScheduleTab(item, targetContent);
11585+
break;
11586+
case 'actions':
11587+
this.initializeActionsTab(item, targetContent);
11588+
break;
11589+
}
1166411590
}
1166511591
});
1166611592
});
1166711593

11668-
// Initial Timer Accordion öffnen und initialisieren
11669-
const firstAccordionHeader = this.shadowRoot.querySelector('.accordion-header[data-accordion="timer"]');
11670-
const firstAccordionContent = this.shadowRoot.querySelector('[data-content="timer"]');
11671-
if (firstAccordionHeader && firstAccordionContent) {
11672-
firstAccordionHeader.classList.add('active');
11673-
firstAccordionContent.classList.add('open');
11674-
const arrow = firstAccordionHeader.querySelector('.accordion-arrow svg');
11675-
if (arrow) arrow.style.transform = 'rotate(45deg)';
11676-
11677-
requestAnimationFrame(() => {
11678-
this.initializeTimerTab(item, firstAccordionContent);
11679-
});
11594+
// Initial Timer Tab aktivieren
11595+
const timerContent = this.shadowRoot.querySelector('[data-shortcuts-content="timer"]');
11596+
if (timerContent) {
11597+
this.initializeTimerTab(item, timerContent);
1168011598
}
1168111599
}, 100);
11682-
}
11600+
}
1168311601

1168411602
// ✅ Aktionen Tab Initialisierung
1168511603
initializeActionsTab(item, container) {

0 commit comments

Comments
 (0)