Skip to content

Commit b69da8e

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

File tree

1 file changed

+165
-162
lines changed

1 file changed

+165
-162
lines changed

‎dist/fast-search-card.js‎

Lines changed: 165 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -8009,168 +8009,7 @@ class FastSearchCard extends HTMLElement {
80098009
`;
80108010
}
80118011

8012-
// ========================
8013-
// NEUE KLASSE - HINZUFÜGEN ZU DEINER FAST SEARCH CARD
8014-
// ========================
8015-
8016-
class WheelTimePicker {
8017-
constructor(itemId, shadowRoot, callbacks = {}) {
8018-
this.itemId = itemId;
8019-
this.shadowRoot = shadowRoot;
8020-
this.callbacks = callbacks;
8021-
8022-
// DOM Elements
8023-
this.timeDisplay = shadowRoot.getElementById(`wheel-time-display-${itemId}`);
8024-
this.hourPart = shadowRoot.getElementById(`wheel-hour-part-${itemId}`);
8025-
this.minutePart = shadowRoot.getElementById(`wheel-minute-part-${itemId}`);
8026-
this.hourWheel = shadowRoot.getElementById(`wheel-hour-picker-${itemId}`);
8027-
this.minuteWheel = shadowRoot.getElementById(`wheel-minute-picker-${itemId}`);
8028-
this.cancelBtn = shadowRoot.getElementById(`wheel-cancel-${itemId}`);
8029-
this.createBtn = shadowRoot.getElementById(`wheel-create-${itemId}`);
8030-
8031-
// State
8032-
this.currentHour = 0;
8033-
this.currentMinute = 30;
8034-
this.scrollTimeout = null;
8035-
8036-
this.init();
8037-
}
8038-
8039-
init() {
8040-
console.log('🎡 Initializing WheelTimePicker for', this.itemId);
8041-
this.createWheels();
8042-
this.bindEvents();
8043-
this.updateDisplay();
8044-
8045-
// Initial position setzen
8046-
setTimeout(() => {
8047-
this.scrollToValue(this.hourWheel, this.currentHour);
8048-
this.scrollToValue(this.minuteWheel, this.currentMinute);
8049-
}, 100);
8050-
}
8051-
8052-
createWheels() {
8053-
// Stunden (00-23)
8054-
this.hourWheel.innerHTML = '';
8055-
for (let i = 0; i < 24; i++) {
8056-
const item = document.createElement('div');
8057-
item.className = 'wheel-picker-item';
8058-
item.textContent = i.toString().padStart(2, '0');
8059-
item.dataset.value = i;
8060-
this.hourWheel.appendChild(item);
8061-
}
8062-
8063-
// Minuten (00-59 in 5er Schritten)
8064-
this.minuteWheel.innerHTML = '';
8065-
for (let i = 0; i < 60; i += 5) {
8066-
const item = document.createElement('div');
8067-
item.className = 'wheel-picker-item';
8068-
item.textContent = i.toString().padStart(2, '0');
8069-
item.dataset.value = i;
8070-
this.minuteWheel.appendChild(item);
8071-
}
8072-
}
8073-
8074-
bindEvents() {
8075-
// Button Events
8076-
this.cancelBtn.addEventListener('click', () => this.handleCancel());
8077-
this.createBtn.addEventListener('click', () => this.handleCreate());
8078-
8079-
// Scroll Events
8080-
this.hourWheel.addEventListener('scroll', () => this.handleScroll('hour'));
8081-
this.minuteWheel.addEventListener('scroll', () => this.handleScroll('minute'));
8082-
8083-
// Click Events für direkte Auswahl
8084-
this.hourWheel.addEventListener('click', (e) => {
8085-
if (e.target.classList.contains('wheel-picker-item')) {
8086-
this.scrollToValue(this.hourWheel, parseInt(e.target.dataset.value));
8087-
this.updateFromWheels();
8088-
}
8089-
});
8090-
8091-
this.minuteWheel.addEventListener('click', (e) => {
8092-
if (e.target.classList.contains('wheel-picker-item')) {
8093-
this.scrollToValue(this.minuteWheel, parseInt(e.target.dataset.value));
8094-
this.updateFromWheels();
8095-
}
8096-
});
8097-
}
8098-
8099-
handleCancel() {
8100-
console.log('🚫 WheelTimePicker cancelled');
8101-
if (this.callbacks.onCancel) {
8102-
this.callbacks.onCancel();
8103-
}
8104-
}
8105-
8106-
handleCreate() {
8107-
this.updateFromWheels();
8108-
const totalMinutes = this.currentHour * 60 + this.currentMinute;
8109-
8110-
console.log(`⏰ WheelTimePicker create: ${totalMinutes} minutes`);
8111-
8112-
// Visual feedback
8113-
this.createBtn.textContent = '✅ Erstellt!';
8114-
this.createBtn.style.background = '#4CAF50';
8115-
8116-
if (this.callbacks.onCreate) {
8117-
this.callbacks.onCreate({
8118-
hour: this.currentHour,
8119-
minute: this.currentMinute,
8120-
totalMinutes: totalMinutes
8121-
});
8122-
}
8123-
}
8124-
8125-
updateFromWheels() {
8126-
const hourIndex = Math.round(this.hourWheel.scrollTop / 30);
8127-
const minuteIndex = Math.round(this.minuteWheel.scrollTop / 30);
8128-
8129-
this.currentHour = Math.max(0, Math.min(23, hourIndex));
8130-
this.currentMinute = Math.max(0, Math.min(55, minuteIndex * 5));
8131-
8132-
this.updateDisplay();
8133-
}
8134-
8135-
updateDisplay() {
8136-
this.hourPart.textContent = this.currentHour.toString().padStart(2, '0');
8137-
this.minutePart.textContent = this.currentMinute.toString().padStart(2, '0');
8138-
}
8139-
8140-
scrollToValue(wheel, value) {
8141-
let index;
8142-
if (wheel === this.hourWheel) {
8143-
index = value;
8144-
} else {
8145-
index = value / 5;
8146-
}
8147-
8148-
wheel.scrollTo({
8149-
top: index * 30,
8150-
behavior: 'smooth'
8151-
});
8152-
}
8153-
8154-
handleScroll(type) {
8155-
clearTimeout(this.scrollTimeout);
8156-
this.scrollTimeout = setTimeout(() => {
8157-
if (type === 'hour') {
8158-
const index = Math.round(this.hourWheel.scrollTop / 30);
8159-
this.scrollToValue(this.hourWheel, index);
8160-
this.updateFromWheels();
8161-
} else {
8162-
const index = Math.round(this.minuteWheel.scrollTop / 30);
8163-
this.scrollToValue(this.minuteWheel, index * 5);
8164-
this.updateFromWheels();
8165-
}
8166-
}, 150);
8167-
}
8168-
8169-
destroy() {
8170-
clearTimeout(this.scrollTimeout);
8171-
// Cleanup falls nötig
8172-
}
8173-
}
8012+
81748013

81758014

81768015

@@ -11370,6 +11209,170 @@ class FastSearchCard extends HTMLElement {
1137011209
}
1137111210
}
1137211211

11212+
11213+
// ========================
11214+
// NEUE KLASSE - HINZUFÜGEN ZU DEINER FAST SEARCH CARD
11215+
// ========================
11216+
11217+
class WheelTimePicker {
11218+
constructor(itemId, shadowRoot, callbacks = {}) {
11219+
this.itemId = itemId;
11220+
this.shadowRoot = shadowRoot;
11221+
this.callbacks = callbacks;
11222+
11223+
// DOM Elements
11224+
this.timeDisplay = shadowRoot.getElementById(`wheel-time-display-${itemId}`);
11225+
this.hourPart = shadowRoot.getElementById(`wheel-hour-part-${itemId}`);
11226+
this.minutePart = shadowRoot.getElementById(`wheel-minute-part-${itemId}`);
11227+
this.hourWheel = shadowRoot.getElementById(`wheel-hour-picker-${itemId}`);
11228+
this.minuteWheel = shadowRoot.getElementById(`wheel-minute-picker-${itemId}`);
11229+
this.cancelBtn = shadowRoot.getElementById(`wheel-cancel-${itemId}`);
11230+
this.createBtn = shadowRoot.getElementById(`wheel-create-${itemId}`);
11231+
11232+
// State
11233+
this.currentHour = 0;
11234+
this.currentMinute = 30;
11235+
this.scrollTimeout = null;
11236+
11237+
this.init();
11238+
}
11239+
11240+
init() {
11241+
console.log('🎡 Initializing WheelTimePicker for', this.itemId);
11242+
this.createWheels();
11243+
this.bindEvents();
11244+
this.updateDisplay();
11245+
11246+
// Initial position setzen
11247+
setTimeout(() => {
11248+
this.scrollToValue(this.hourWheel, this.currentHour);
11249+
this.scrollToValue(this.minuteWheel, this.currentMinute);
11250+
}, 100);
11251+
}
11252+
11253+
createWheels() {
11254+
// Stunden (00-23)
11255+
this.hourWheel.innerHTML = '';
11256+
for (let i = 0; i < 24; i++) {
11257+
const item = document.createElement('div');
11258+
item.className = 'wheel-picker-item';
11259+
item.textContent = i.toString().padStart(2, '0');
11260+
item.dataset.value = i;
11261+
this.hourWheel.appendChild(item);
11262+
}
11263+
11264+
// Minuten (00-59 in 5er Schritten)
11265+
this.minuteWheel.innerHTML = '';
11266+
for (let i = 0; i < 60; i += 5) {
11267+
const item = document.createElement('div');
11268+
item.className = 'wheel-picker-item';
11269+
item.textContent = i.toString().padStart(2, '0');
11270+
item.dataset.value = i;
11271+
this.minuteWheel.appendChild(item);
11272+
}
11273+
}
11274+
11275+
bindEvents() {
11276+
// Button Events
11277+
this.cancelBtn.addEventListener('click', () => this.handleCancel());
11278+
this.createBtn.addEventListener('click', () => this.handleCreate());
11279+
11280+
// Scroll Events
11281+
this.hourWheel.addEventListener('scroll', () => this.handleScroll('hour'));
11282+
this.minuteWheel.addEventListener('scroll', () => this.handleScroll('minute'));
11283+
11284+
// Click Events für direkte Auswahl
11285+
this.hourWheel.addEventListener('click', (e) => {
11286+
if (e.target.classList.contains('wheel-picker-item')) {
11287+
this.scrollToValue(this.hourWheel, parseInt(e.target.dataset.value));
11288+
this.updateFromWheels();
11289+
}
11290+
});
11291+
11292+
this.minuteWheel.addEventListener('click', (e) => {
11293+
if (e.target.classList.contains('wheel-picker-item')) {
11294+
this.scrollToValue(this.minuteWheel, parseInt(e.target.dataset.value));
11295+
this.updateFromWheels();
11296+
}
11297+
});
11298+
}
11299+
11300+
handleCancel() {
11301+
console.log('🚫 WheelTimePicker cancelled');
11302+
if (this.callbacks.onCancel) {
11303+
this.callbacks.onCancel();
11304+
}
11305+
}
11306+
11307+
handleCreate() {
11308+
this.updateFromWheels();
11309+
const totalMinutes = this.currentHour * 60 + this.currentMinute;
11310+
11311+
console.log(`⏰ WheelTimePicker create: ${totalMinutes} minutes`);
11312+
11313+
// Visual feedback
11314+
this.createBtn.textContent = '✅ Erstellt!';
11315+
this.createBtn.style.background = '#4CAF50';
11316+
11317+
if (this.callbacks.onCreate) {
11318+
this.callbacks.onCreate({
11319+
hour: this.currentHour,
11320+
minute: this.currentMinute,
11321+
totalMinutes: totalMinutes
11322+
});
11323+
}
11324+
}
11325+
11326+
updateFromWheels() {
11327+
const hourIndex = Math.round(this.hourWheel.scrollTop / 30);
11328+
const minuteIndex = Math.round(this.minuteWheel.scrollTop / 30);
11329+
11330+
this.currentHour = Math.max(0, Math.min(23, hourIndex));
11331+
this.currentMinute = Math.max(0, Math.min(55, minuteIndex * 5));
11332+
11333+
this.updateDisplay();
11334+
}
11335+
11336+
updateDisplay() {
11337+
this.hourPart.textContent = this.currentHour.toString().padStart(2, '0');
11338+
this.minutePart.textContent = this.currentMinute.toString().padStart(2, '0');
11339+
}
11340+
11341+
scrollToValue(wheel, value) {
11342+
let index;
11343+
if (wheel === this.hourWheel) {
11344+
index = value;
11345+
} else {
11346+
index = value / 5;
11347+
}
11348+
11349+
wheel.scrollTo({
11350+
top: index * 30,
11351+
behavior: 'smooth'
11352+
});
11353+
}
11354+
11355+
handleScroll(type) {
11356+
clearTimeout(this.scrollTimeout);
11357+
this.scrollTimeout = setTimeout(() => {
11358+
if (type === 'hour') {
11359+
const index = Math.round(this.hourWheel.scrollTop / 30);
11360+
this.scrollToValue(this.hourWheel, index);
11361+
this.updateFromWheels();
11362+
} else {
11363+
const index = Math.round(this.minuteWheel.scrollTop / 30);
11364+
this.scrollToValue(this.minuteWheel, index * 5);
11365+
this.updateFromWheels();
11366+
}
11367+
}, 150);
11368+
}
11369+
11370+
destroy() {
11371+
clearTimeout(this.scrollTimeout);
11372+
// Cleanup falls nötig
11373+
}
11374+
}
11375+
1137311376
customElements.define('fast-search-card', FastSearchCard);
1137411377
window.customCards = window.customCards || [];
1137511378
window.customCards.push({

0 commit comments

Comments
 (0)