70 lines
3.1 KiB
Text
Executable file
70 lines
3.1 KiB
Text
Executable file
<div class="archive-controls">
|
|
<label for="archive-date-selector-%%current_world_key%%">Archivdatum:</label>
|
|
<select id="archive-date-selector-%%current_world_key%%">
|
|
<option value="">-- Bitte wählen --</option>
|
|
</select>
|
|
<span id="archive-error-msg-%%current_world_key%%" class="archive-error"></span>
|
|
</div>
|
|
|
|
<div class="archive-image-container">
|
|
<img id="archive-image-%%current_world_key%%" alt="Archivierte Karte" style="display:none; max-width:100%;">
|
|
<p id="archive-placeholder-%%current_world_key%%">Bitte ein Datum auswählen, um die Karte anzuzeigen.</p>
|
|
</div>
|
|
|
|
<script>
|
|
// Um zu verhindern, dass das Skript mehrfach ausgeführt wird
|
|
if (!window.archiveScriptLoaded_%%current_world_key%%) {
|
|
window.archiveScriptLoaded_%%current_world_key%% = true;
|
|
|
|
const selector = document.getElementById('archive-date-selector-%%current_world_key%%');
|
|
const imageElement = document.getElementById('archive-image-%%current_world_key%%');
|
|
const placeholder = document.getElementById('archive-placeholder-%%current_world_key%%');
|
|
const errorMessage = document.getElementById('archive-error-msg-%%current_world_key%%');
|
|
const availableDates = %%available_archive_dates_js_array%%;
|
|
const imageBaseUrl = '%%archive_world_rel_to_webroot%%';
|
|
|
|
if (selector && availableDates && availableDates.length > 0) {
|
|
availableDates.forEach(dateStr => {
|
|
const option = document.createElement('option');
|
|
const parts = dateStr.split('-');
|
|
option.value = dateStr;
|
|
option.textContent = `${parts[2]}.${parts[1]}.${parts[0]}`;
|
|
selector.appendChild(option);
|
|
});
|
|
|
|
selector.addEventListener('change', function() {
|
|
imageElement.style.display = 'none';
|
|
errorMessage.textContent = '';
|
|
|
|
const selectedDate = this.value;
|
|
|
|
if (selectedDate) {
|
|
// WICHTIGE ÄNDERUNG: Platzhalter wird jetzt hier versteckt
|
|
placeholder.style.display = 'none';
|
|
const dateParts = selectedDate.split('-');
|
|
const imageUrl = `${imageBaseUrl}/${dateParts[0]}/${dateParts[1]}/${dateParts[2]}.png?v=%%CACHE_BUSTER%%`;
|
|
imageElement.src = imageUrl;
|
|
} else {
|
|
// Wenn "-- Bitte wählen --" ausgewählt wird, Platzhalter wieder anzeigen
|
|
placeholder.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
imageElement.onload = function() {
|
|
this.style.display = 'block';
|
|
errorMessage.textContent = ''; // Sicherstellen, dass keine alte Fehlermeldung mehr da ist
|
|
};
|
|
|
|
imageElement.onerror = function() {
|
|
this.style.display = 'none';
|
|
// WICHTIGE ÄNDERUNG: Fehlermeldung ersetzt jetzt den Platzhalter
|
|
placeholder.style.display = 'none';
|
|
errorMessage.textContent = 'Fehler: Bild für dieses Datum konnte nicht geladen werden.';
|
|
};
|
|
|
|
} else if (selector) {
|
|
selector.disabled = true;
|
|
selector.querySelector('option').textContent = 'Keine Archive verfügbar';
|
|
}
|
|
}
|
|
</script>
|