Akamaru/PonyWave-Tools
1
0
Fork 0
Code Issues

Zeitzonen: Korrekturn der Berechnung mit Auswahl der Zeitzonen

Browse Source
This commit is contained in:
Akamaru 2025-03-29 15:44:41 +01:00
parent 477bac5f8c
commit 973af6138d
1 changed files with 159 additions and 27 deletions

186
zeitzonen/index.html

@ -228,6 +228,30 @@
margin-top: 30px;
}
#timezone-result {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 30px;
}
.arrow-container {
display: flex;
justify-content: center;
align-items: center;
background: transparent;
box-shadow: none;
border: none;
min-width: 80px;
}
.conversion-arrow {
font-size: 2.5rem;
color: var(--secondary-color);
animation: pulse 1.5s infinite;
}
.timezone-card {
background-color: var(--card-bg);
border-radius: 10px;
@ -296,6 +320,15 @@
.input-group {
min-width: 100%;
}
#timezone-result {
flex-direction: column;
}
.arrow-container {
transform: rotate(90deg);
margin: 10px 0;
}
}
</style>
</head>
@ -345,13 +378,22 @@
<input type="hidden" id="custom-time">
</div>
<div class="input-group">
<label for="custom-timezone">Zeitzone</label>
<select id="custom-timezone"></select>
<label for="source-timezone">Quell-Zeitzone</label>
<select id="source-timezone"></select>
</div>
<div class="input-group">
<label for="target-timezone">Ziel-Zeitzone</label>
<select id="target-timezone"></select>
</div>
</div>
<button id="calculate-btn">Berechnen</button>
</div>
<h2>Ergebnis der Umrechnung</h2>
<div class="timezone-list" id="timezone-result">
<!-- Result cards will be generated here -->
</div>
<h2>Weltzeiten</h2>
<div class="timezone-list" id="timezone-list">
<!-- Timezone cards will be generated here -->
@ -406,13 +448,22 @@
{ label: "Neuseeland (Auckland)", id: "Pacific/Auckland", offset: 12 }
];
// Populate timezone dropdown
const timezoneSelect = document.getElementById('custom-timezone');
// Populate timezone dropdowns
const sourceTimezoneSelect = document.getElementById('source-timezone');
const targetTimezoneSelect = document.getElementById('target-timezone');
majorTimezones.forEach(tz => {
const option = document.createElement('option');
option.value = tz.id;
option.textContent = tz.label;
timezoneSelect.appendChild(option);
// Für Quell-Zeitzone
const sourceOption = document.createElement('option');
sourceOption.value = tz.id;
sourceOption.textContent = tz.label;
sourceTimezoneSelect.appendChild(sourceOption);
// Für Ziel-Zeitzone
const targetOption = document.createElement('option');
targetOption.value = tz.id;
targetOption.textContent = tz.label;
targetTimezoneSelect.appendChild(targetOption);
});
// Set default values for date and time inputs
@ -524,12 +575,20 @@
// Detect user's timezone
const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
document.getElementById('local-timezone').textContent =
`Deine Zeitzone: ${localTimezone} (${getTimezoneOffsetString(now)})`;
`Deine Zeitzone: ${localTimezone} (${getTimezoneOffsetString(now, localTimezone)})`;
// Set initial timezone selection to match user's timezone, if possible
for (let i = 0; i < timezoneSelect.options.length; i++) {
if (timezoneSelect.options[i].value === localTimezone) {
timezoneSelect.selectedIndex = i;
for (let i = 0; i < sourceTimezoneSelect.options.length; i++) {
if (sourceTimezoneSelect.options[i].value === localTimezone) {
sourceTimezoneSelect.selectedIndex = i;
break;
}
}
// Set target timezone initially to different timezone (e.g., New York)
for (let i = 0; i < targetTimezoneSelect.options.length; i++) {
if (targetTimezoneSelect.options[i].value === "America/New_York") {
targetTimezoneSelect.selectedIndex = i;
break;
}
}
@ -569,7 +628,7 @@
<h3>${tz.label}</h3>
<div class="time">${dateInTimezone.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
<div class="date">${dateInTimezone.toLocaleDateString()}</div>
<div class="timezone-offset">${getTimezoneOffsetString(dateInTimezone)}</div>
<div class="timezone-offset">${getTimezoneOffsetString(dateInTimezone, tz.id)}</div>
`;
container.appendChild(card);
@ -580,7 +639,8 @@
document.getElementById('calculate-btn').addEventListener('click', () => {
const dateStr = dateInput.value;
const timeStr = timeInput.value;
const selectedTimezone = timezoneSelect.value;
const sourceTimezone = sourceTimezoneSelect.value;
const targetTimezone = targetTimezoneSelect.value;
if (!dateStr || !timeStr) {
alert('Bitte gib ein Datum und eine Zeit ein');
@ -591,20 +651,66 @@
const [year, month, day] = dateStr.split('-').map(Number);
const [hours, minutes] = timeStr.split(':').map(Number);
// Create date in the selected timezone
const dateInSelectedTimezone = new Date(Date.UTC(
year,
month - 1, // JavaScript months are 0-indexed
day,
hours - getTimezoneOffsetHours(selectedTimezone),
minutes
));
// Erstelle ein Datum im lokalen Format
const inputDate = new Date(year, month - 1, day, hours, minutes);
generateTimezoneCards(dateInSelectedTimezone);
// Wir erstellen eine Referenzzeit, die der Eingabe in der Quell-Zeitzone entspricht
const utcMilliseconds = Date.UTC(year, month - 1, day, hours, minutes);
const sourceOffset = getTimezoneOffsetHours(sourceTimezone) * 60 * 60 * 1000;
const referenceDate = new Date(utcMilliseconds - sourceOffset);
// Zeige nur die Quell- und Zielzeitzone an
displayConversionResult(referenceDate, sourceTimezone, targetTimezone);
});
// Display conversion result between source and target timezone
function displayConversionResult(referenceDate, sourceTimezone, targetTimezone) {
const container = document.getElementById('timezone-result');
container.innerHTML = '';
const sourceTz = majorTimezones.find(tz => tz.id === sourceTimezone);
const targetTz = majorTimezones.find(tz => tz.id === targetTimezone);
if (!sourceTz || !targetTz) return;
// Quell-Zeitzone Karte
const sourceCard = document.createElement('div');
sourceCard.className = 'timezone-card';
const dateInSourceTimezone = getDateInTimezone(referenceDate, sourceTimezone);
sourceCard.innerHTML = `
<h3>${sourceTz.label}</h3>
<div class="time">${dateInSourceTimezone.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
<div class="date">${dateInSourceTimezone.toLocaleDateString()}</div>
<div class="timezone-offset">${getTimezoneOffsetString(dateInSourceTimezone, sourceTimezone)}</div>
`;
// Ziel-Zeitzone Karte
const targetCard = document.createElement('div');
targetCard.className = 'timezone-card';
const dateInTargetTimezone = getDateInTimezone(referenceDate, targetTimezone);
targetCard.innerHTML = `
<h3>${targetTz.label}</h3>
<div class="time">${dateInTargetTimezone.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
<div class="date">${dateInTargetTimezone.toLocaleDateString()}</div>
<div class="timezone-offset">${getTimezoneOffsetString(dateInTargetTimezone, targetTimezone)}</div>
`;
container.appendChild(sourceCard);
// Pfeil zwischen den Karten
const arrowContainer = document.createElement('div');
arrowContainer.className = 'timezone-card arrow-container';
arrowContainer.innerHTML = `<div class="conversion-arrow">→</div>`;
container.appendChild(arrowContainer);
container.appendChild(targetCard);
}
// Helper function to get a date object in a specific timezone
function getDateInTimezone(date, timezone) {
// Nutze die eingebaute Zeitzonenunterstützung von JavaScript
const options = { timeZone: timezone };
const formatter = new Intl.DateTimeFormat('en-US', {
...options,
@ -637,11 +743,37 @@
}
// Helper function to get timezone offset string (e.g., GMT+1)
function getTimezoneOffsetString(date) {
const offset = date.getTimezoneOffset() * -1;
const hours = Math.floor(Math.abs(offset) / 60);
function getTimezoneOffsetString(date, timezone) {
if (timezone) {
// Ermittle den tatsächlichen Offset für das Datum in der Zeitzone
const testDate = new Date(date); // Wir erstellen eine Kopie
// Formatiere das Datum in der angegebenen Zeitzone und hole den Offset
const formatter = new Intl.DateTimeFormat('en-US', {
timeZone: timezone,
timeZoneName: 'longOffset'
});
// Extrahiere den GMT-Offset-String aus der formatierten Ausgabe
const formattedDate = formatter.format(testDate);
const offsetMatch = formattedDate.match(/GMT([-+]\d+)/);
if (offsetMatch) {
return `GMT${offsetMatch[1]}`;
}
// Fallback: Verwende den statischen Offset aus majorTimezones
const tz = majorTimezones.find(t => t.id === timezone);
if (tz) {
const sign = tz.offset >= 0 ? '+' : '-';
return `GMT${sign}${Math.abs(tz.offset)}`;
}
}
// Wenn keine Zeitzone angegeben oder gefunden wurde, verwende den lokalen Offset
const offset = date.getTimezoneOffset() * -1 / 60;
const sign = offset >= 0 ? '+' : '-';
return `GMT${sign}${hours}`;
return `GMT${sign}${Math.abs(offset)}`;
}
// Helper function to get timezone offset in hours