Skip to content

Commit 103ebad

Browse files
fastenderfastender
authored
Update fast-search-card.js
1 parent b69da8e commit 103ebad

File tree

1 file changed

+218
-62
lines changed

1 file changed

+218
-62
lines changed

‎dist/fast-search-card.js‎

Lines changed: 218 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3702,6 +3702,138 @@ class FastSearchCard extends HTMLElement {
37023702
.timer-wheel-create:hover {
37033703
background: var(--accent-hover, #0056cc);
37043704
transform: translateY(-1px);
3705+
}
3706+
3707+
3708+
/* =========================
3709+
ZUSÄTZLICHE CSS VERBESSERUNGEN - ZU DEINEN BESTEHENDEN STYLES HINZUFÜGEN
3710+
========================= */
3711+
3712+
/* Verbesserte Zeit-Anzeige mit Action-Indikator */
3713+
.wheel-time-display {
3714+
display: flex;
3715+
flex-direction: column;
3716+
align-items: center;
3717+
justify-content: center;
3718+
padding: 20px;
3719+
background: rgba(var(--accent-rgb, 0, 122, 255), 0.1);
3720+
border-bottom: 1px solid rgba(255,255,255,0.12);
3721+
color: var(--text-primary, #ffffff);
3722+
}
3723+
3724+
.selected-action-indicator {
3725+
font-size: 14px;
3726+
font-weight: 500;
3727+
color: var(--accent, #007aff);
3728+
margin-bottom: 8px;
3729+
opacity: 0.9;
3730+
}
3731+
3732+
.time-display-main {
3733+
display: flex;
3734+
align-items: center;
3735+
font-size: 36px;
3736+
font-weight: 300;
3737+
letter-spacing: 3px;
3738+
margin: 8px 0;
3739+
}
3740+
3741+
.time-display-subtitle {
3742+
font-size: 12px;
3743+
color: var(--text-secondary, rgba(255,255,255,0.6));
3744+
margin-top: 4px;
3745+
}
3746+
3747+
/* Verbesserte Wheel Time Parts */
3748+
.wheel-time-part {
3749+
min-width: 60px;
3750+
text-align: center;
3751+
position: relative;
3752+
background: rgba(255,255,255,0.08);
3753+
border-radius: 8px;
3754+
padding: 4px 8px;
3755+
margin: 0 4px;
3756+
}
3757+
3758+
.wheel-time-separator {
3759+
margin: 0 12px;
3760+
opacity: 0.6;
3761+
font-weight: 400;
3762+
}
3763+
3764+
/* Smooth Transitions für bessere UX */
3765+
.timer-control-design {
3766+
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
3767+
}
3768+
3769+
.active-timers {
3770+
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
3771+
}
3772+
3773+
/* TimePicker Container Verbesserungen */
3774+
.timer-time-selection {
3775+
background: rgba(0,0,0,0.6);
3776+
border-radius: 16px;
3777+
margin-top: 16px;
3778+
overflow: hidden;
3779+
backdrop-filter: blur(20px);
3780+
border: 1px solid rgba(255,255,255,0.08);
3781+
}
3782+
3783+
/* Wheel Controls verbessert */
3784+
.timer-wheel-controls {
3785+
display: flex;
3786+
justify-content: space-between;
3787+
padding: 20px;
3788+
border-top: 1px solid rgba(255,255,255,0.12);
3789+
background: rgba(0,0,0,0.3);
3790+
gap: 16px;
3791+
}
3792+
3793+
.timer-wheel-btn {
3794+
flex: 1;
3795+
padding: 14px 20px;
3796+
border: none;
3797+
border-radius: 10px;
3798+
font-size: 15px;
3799+
font-weight: 600;
3800+
cursor: pointer;
3801+
transition: all 0.2s ease;
3802+
position: relative;
3803+
overflow: hidden;
3804+
}
3805+
3806+
.timer-wheel-cancel {
3807+
background: rgba(255,255,255,0.08);
3808+
color: rgba(255,255,255,0.8);
3809+
border: 1px solid rgba(255,255,255,0.15);
3810+
}
3811+
3812+
.timer-wheel-cancel:hover {
3813+
background: rgba(255,255,255,0.15);
3814+
color: rgba(255,255,255,1);
3815+
transform: translateY(-1px);
3816+
}
3817+
3818+
.timer-wheel-create {
3819+
background: linear-gradient(135deg, var(--accent, #007aff) 0%, #0056cc 100%);
3820+
color: white;
3821+
border: 1px solid var(--accent, #007aff);
3822+
box-shadow: 0 4px 12px rgba(var(--accent-rgb, 0, 122, 255), 0.3);
3823+
}
3824+
3825+
.timer-wheel-create:hover {
3826+
background: linear-gradient(135deg, #0056cc 0%, #003d99 100%);
3827+
transform: translateY(-2px);
3828+
box-shadow: 0 6px 16px rgba(var(--accent-rgb, 0, 122, 255), 0.4);
3829+
}
3830+
3831+
/* Wheel Picker Verbesserungen */
3832+
.wheel-picker-selection {
3833+
background: rgba(var(--accent-rgb, 0, 122, 255), 0.2);
3834+
border: 2px solid rgba(var(--accent-rgb, 0, 122, 255), 0.5);
3835+
border-radius: 8px;
3836+
box-shadow: 0 0 20px rgba(var(--accent-rgb, 0, 122, 255), 0.3);
37053837
}
37063838
37073839
</style>
@@ -7604,8 +7736,9 @@ class FastSearchCard extends HTMLElement {
76047736
}
76057737
}
76067738

7739+
76077740
// ========================
7608-
// ERSETZE DEINE BESTEHENDE showTimeSelection METHODE
7741+
// ERSETZE DEINE showTimeSelection METHODE
76097742
// ========================
76107743

76117744
showTimeSelection(item, action, container) {
@@ -7634,49 +7767,47 @@ class FastSearchCard extends HTMLElement {
76347767
);
76357768
}
76367769

7637-
// Animiere das Erscheinen
7770+
// SEQUENZIELLE ANIMATIONEN:
76387771
const insertedContainer = container.querySelector('.timer-time-selection');
76397772
if (insertedContainer) {
7640-
// Animation 1: Time Selection einblenden
7641-
insertedContainer.animate([
7642-
{ maxHeight: '0px', opacity: 0 },
7643-
{ maxHeight: '400px', opacity: 1 }
7773+
7774+
// 1. ACTIVE TIMERS nach oben schieben und ausblenden
7775+
const activeTimersAnimation = activeTimersSection?.animate([
7776+
{ transform: 'translateY(0)', opacity: 1 },
7777+
{ transform: 'translateY(-100px)', opacity: 0 }
76447778
], {
7645-
duration: 400,
7779+
duration: 300,
76467780
fill: 'forwards',
76477781
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
76487782
});
76497783

7650-
// Animation 2: Active Timers nach oben schieben
7651-
if (activeTimersSection) {
7652-
const moveDistance = 300; // Geschätzte Höhe des TimePickers
7653-
7654-
activeTimersSection.animate([
7655-
{ transform: 'translateY(0)', opacity: 1 },
7656-
{ transform: `translateY(-${moveDistance}px)`, opacity: 0.3 }
7784+
// 2. TIMER CONTROL DESIGN (Action Buttons) nach oben schieben und ausblenden
7785+
const timerControlAnimation = timerControlDesign?.animate([
7786+
{ transform: 'translateY(0)', opacity: 1 },
7787+
{ transform: 'translateY(-100px)', opacity: 0 }
7788+
], {
7789+
duration: 300,
7790+
fill: 'forwards',
7791+
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
7792+
});
7793+
7794+
// 3. Nach den Ausblend-Animationen: TimePicker einblenden
7795+
setTimeout(() => {
7796+
insertedContainer.animate([
7797+
{ maxHeight: '0px', opacity: 0, transform: 'translateY(20px)' },
7798+
{ maxHeight: '400px', opacity: 1, transform: 'translateY(0)' }
76577799
], {
76587800
duration: 400,
76597801
fill: 'forwards',
76607802
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
76617803
});
76627804

7663-
// Timer Control auch nach oben bewegen
7664-
if (timerControlDesign) {
7665-
timerControlDesign.animate([
7666-
{ transform: 'translateY(0)' },
7667-
{ transform: `translateY(-${moveDistance}px)` }
7668-
], {
7669-
duration: 400,
7670-
fill: 'forwards',
7671-
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
7672-
});
7673-
}
7674-
}
7675-
7676-
// Initialisiere den WheelTimePicker nach der Animation
7677-
setTimeout(() => {
7678-
this.initializeWheelTimePicker(item, action, insertedContainer);
7679-
}, 200);
7805+
// TimePicker initialisieren nach der Animation
7806+
setTimeout(() => {
7807+
this.initializeWheelTimePicker(item, action, insertedContainer);
7808+
}, 200);
7809+
7810+
}, 200); // Start TimePicker Animation 200ms nach Ausblend-Start
76807811
}
76817812
}
76827813

@@ -7897,11 +8028,11 @@ class FastSearchCard extends HTMLElement {
78978028
}
78988029

78998030
// ========================
7900-
// ERWEITERE DEINE BESTEHENDE resetToInitialTimerState METHODE
8031+
// ERSETZE DEINE resetToInitialTimerState METHODE
79018032
// ========================
79028033

79038034
resetToInitialTimerState(container) {
7904-
console.log('🔄 Reset to Initial Timer State (with Wheel TimePicker)');
8035+
console.log('🔄 Reset to Initial Timer State (with hidden Action-Buttons)');
79058036

79068037
this.isTimeSelectionOpen = false;
79078038

@@ -7915,11 +8046,13 @@ class FastSearchCard extends HTMLElement {
79158046
this.currentWheelTimePicker = null;
79168047
}
79178048

8049+
// REVERSE ANIMATION SEQUENCE:
8050+
79188051
// 1. Time Selection ausblenden
79198052
if (timeSelectionContainer) {
79208053
timeSelectionContainer.animate([
7921-
{ maxHeight: '400px', opacity: 1 },
7922-
{ maxHeight: '0px', opacity: 0 }
8054+
{ maxHeight: '400px', opacity: 1, transform: 'translateY(0)' },
8055+
{ maxHeight: '0px', opacity: 0, transform: 'translateY(-20px)' }
79238056
], {
79248057
duration: 300,
79258058
fill: 'forwards',
@@ -7929,60 +8062,64 @@ class FastSearchCard extends HTMLElement {
79298062
});
79308063
}
79318064

7932-
// 2. Timer Control Design zurück zur ursprünglichen Position
7933-
if (timerControlDesign) {
7934-
setTimeout(() => {
8065+
// 2. Nach TimePicker ausblenden: Action-Buttons und Active Timers wieder einblenden
8066+
setTimeout(() => {
8067+
8068+
// Timer Control Design (Action Buttons) wieder einblenden
8069+
if (timerControlDesign) {
79358070
timerControlDesign.animate([
7936-
{ transform: timerControlDesign.style.transform || 'translateY(0)' },
7937-
{ transform: 'translateY(0)' }
8071+
{ transform: 'translateY(-100px)', opacity: 0 },
8072+
{ transform: 'translateY(0)', opacity: 1 }
79388073
], {
79398074
duration: 400,
79408075
fill: 'forwards',
79418076
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
79428077
});
7943-
}, 100);
7944-
}
7945-
7946-
// 3. Active Timers wieder einblenden
7947-
if (activeTimersSection) {
7948-
setTimeout(() => {
8078+
}
8079+
8080+
// Active Timers wieder einblenden
8081+
if (activeTimersSection) {
79498082
activeTimersSection.animate([
7950-
{ opacity: 0.3, transform: 'translateY(-300px)' },
7951-
{ opacity: 1, transform: 'translateY(0)' }
8083+
{ transform: 'translateY(-100px)', opacity: 0 },
8084+
{ transform: 'translateY(0)', opacity: 1 }
79528085
], {
79538086
duration: 400,
79548087
fill: 'forwards',
79558088
easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
79568089
});
7957-
}, 200);
7958-
}
8090+
}
8091+
8092+
}, 150); // Start Einblend-Animation 150ms nach TimePicker Ausblend-Start
79598093

7960-
// 4. Button-States zurücksetzen
7961-
const timerPresets = container.querySelectorAll('.timer-control-preset');
7962-
timerPresets.forEach(p => p.classList.remove('active'));
8094+
// 3. Button-States zurücksetzen (nach allen Animationen)
8095+
setTimeout(() => {
8096+
const timerPresets = container.querySelectorAll('.timer-control-preset');
8097+
timerPresets.forEach(p => p.classList.remove('active'));
8098+
}, 600);
79638099
}
79648100

79658101

79668102

79678103
// ========================
7968-
// NEUE METHODE - HINZUFÜGEN ZU DEINER FAST SEARCH CARD KLASSE
8104+
// ERSETZE DEINE createWheelTimePickerHTML METHODE
79698105
// ========================
79708106

79718107
createWheelTimePickerHTML(item, action) {
79728108
const actionLabel = this.getActionLabel(action);
79738109

79748110
return `
79758111
<div class="timer-time-selection" data-timer-id="${item.id}">
7976-
<div class="time-selection-header">
7977-
<div class="action-label">${actionLabel}</div>
7978-
<div class="action-subtitle">Wann soll diese Aktion ausgeführt werden?</div>
7979-
</div>
7980-
79818112
<div class="wheel-timepicker-container">
79828113
<div class="wheel-time-display" id="wheel-time-display-${item.id}">
7983-
<span class="wheel-time-part" id="wheel-hour-part-${item.id}">00</span>
7984-
<span class="wheel-time-separator">:</span>
7985-
<span class="wheel-time-part" id="wheel-minute-part-${item.id}">30</span>
8114+
<div class="selected-action-indicator">
8115+
${this.getActionIcon(action)} ${actionLabel}
8116+
</div>
8117+
<div class="time-display-main">
8118+
<span class="wheel-time-part" id="wheel-hour-part-${item.id}">00</span>
8119+
<span class="wheel-time-separator">:</span>
8120+
<span class="wheel-time-part" id="wheel-minute-part-${item.id}">30</span>
8121+
</div>
8122+
<div class="time-display-subtitle">in Stunden:Minuten</div>
79868123
</div>
79878124
79888125
<div class="wheel-picker-wheels">
@@ -8008,6 +8145,25 @@ class FastSearchCard extends HTMLElement {
80088145
</div>
80098146
`;
80108147
}
8148+
8149+
// ========================
8150+
// NEUE HELPER METHODE - Action Icon bekommen
8151+
// ========================
8152+
8153+
getActionIcon(action) {
8154+
const iconMap = {
8155+
'turn_off': '🔴',
8156+
'turn_on': '💡',
8157+
'dim_30': '🌙',
8158+
'dim_50': '🌗',
8159+
'heat_22': '🔥',
8160+
'cool_18': '❄️',
8161+
'play': '▶️',
8162+
'pause': '⏸️'
8163+
};
8164+
8165+
return iconMap[action] || '⚙️';
8166+
}
80118167

80128168

80138169

0 commit comments

Comments
 (0)