feat: add connectivity check and fallback modal (v1.7.2)
This commit is contained in:
2
dist/bookmarklet-payload.js
vendored
2
dist/bookmarklet-payload.js
vendored
File diff suppressed because one or more lines are too long
2
dist/bookmarklet.txt
vendored
2
dist/bookmarklet.txt
vendored
File diff suppressed because one or more lines are too long
2
dist/install.html
vendored
2
dist/install.html
vendored
File diff suppressed because one or more lines are too long
61
dist/kantine-standalone.html
vendored
61
dist/kantine-standalone.html
vendored
@@ -1932,8 +1932,14 @@ body {
|
|||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching menu:', error);
|
console.error('Error fetching menu:', error);
|
||||||
document.getElementById('menu-container').innerHTML = `<p class="error">Fehler beim Laden der Menüdaten: ${error.message}</p>`;
|
|
||||||
progressModal.classList.add('hidden');
|
progressModal.classList.add('hidden');
|
||||||
|
|
||||||
|
showErrorModal(
|
||||||
|
'Keine Verbindung',
|
||||||
|
`Die Menüdaten konnten nicht geladen werden. Möglicherweise besteht keine Verbindung zur API oder zur Bessa-Webseite.<br><br><small style="color:var(--text-secondary)">${error.message}</small>`,
|
||||||
|
'Zur Original-Seite',
|
||||||
|
'https://web.bessa.app/knapp-kantine'
|
||||||
|
);
|
||||||
} finally {
|
} finally {
|
||||||
loading.classList.add('hidden');
|
loading.classList.add('hidden');
|
||||||
}
|
}
|
||||||
@@ -2366,6 +2372,59 @@ body {
|
|||||||
|
|
||||||
console.log('Kantine Wrapper loaded ✅');
|
console.log('Kantine Wrapper loaded ✅');
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
// === Error Modal ===
|
||||||
|
function showErrorModal(title, htmlContent, btnText, url) {
|
||||||
|
const modalId = 'error-modal';
|
||||||
|
let modal = document.getElementById(modalId);
|
||||||
|
if (modal) modal.remove();
|
||||||
|
|
||||||
|
modal = document.createElement('div');
|
||||||
|
modal.id = modalId;
|
||||||
|
modal.className = 'modal hidden';
|
||||||
|
modal.innerHTML = `
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h2 style="color: var(--error-color); display: flex; align-items: center; gap: 10px;">
|
||||||
|
<span class="material-icons-round">signal_wifi_off</span>
|
||||||
|
${title}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div style="padding: 20px;">
|
||||||
|
<p style="margin-bottom: 15px; color: var(--text-primary);">${htmlContent}</p>
|
||||||
|
<div style="margin-top: 20px; display: flex; justify-content: center;">
|
||||||
|
<button id="btn-error-redirect" style="
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: none;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform 0.1s;
|
||||||
|
">
|
||||||
|
${btnText}
|
||||||
|
<span class="material-icons-round">open_in_new</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
|
document.getElementById('btn-error-redirect').addEventListener('click', () => {
|
||||||
|
window.location.href = url;
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
61
kantine.js
61
kantine.js
@@ -792,8 +792,14 @@
|
|||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching menu:', error);
|
console.error('Error fetching menu:', error);
|
||||||
document.getElementById('menu-container').innerHTML = `<p class="error">Fehler beim Laden der Menüdaten: ${error.message}</p>`;
|
|
||||||
progressModal.classList.add('hidden');
|
progressModal.classList.add('hidden');
|
||||||
|
|
||||||
|
showErrorModal(
|
||||||
|
'Keine Verbindung',
|
||||||
|
`Die Menüdaten konnten nicht geladen werden. Möglicherweise besteht keine Verbindung zur API oder zur Bessa-Webseite.<br><br><small style="color:var(--text-secondary)">${error.message}</small>`,
|
||||||
|
'Zur Original-Seite',
|
||||||
|
'https://web.bessa.app/knapp-kantine'
|
||||||
|
);
|
||||||
} finally {
|
} finally {
|
||||||
loading.classList.add('hidden');
|
loading.classList.add('hidden');
|
||||||
}
|
}
|
||||||
@@ -1226,3 +1232,56 @@
|
|||||||
|
|
||||||
console.log('Kantine Wrapper loaded ✅');
|
console.log('Kantine Wrapper loaded ✅');
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
// === Error Modal ===
|
||||||
|
function showErrorModal(title, htmlContent, btnText, url) {
|
||||||
|
const modalId = 'error-modal';
|
||||||
|
let modal = document.getElementById(modalId);
|
||||||
|
if (modal) modal.remove();
|
||||||
|
|
||||||
|
modal = document.createElement('div');
|
||||||
|
modal.id = modalId;
|
||||||
|
modal.className = 'modal hidden';
|
||||||
|
modal.innerHTML = `
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h2 style="color: var(--error-color); display: flex; align-items: center; gap: 10px;">
|
||||||
|
<span class="material-icons-round">signal_wifi_off</span>
|
||||||
|
${title}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div style="padding: 20px;">
|
||||||
|
<p style="margin-bottom: 15px; color: var(--text-primary);">${htmlContent}</p>
|
||||||
|
<div style="margin-top: 20px; display: flex; justify-content: center;">
|
||||||
|
<button id="btn-error-redirect" style="
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: none;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform 0.1s;
|
||||||
|
">
|
||||||
|
${btnText}
|
||||||
|
<span class="material-icons-round">open_in_new</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
|
document.getElementById('btn-error-redirect').addEventListener('click', () => {
|
||||||
|
window.location.href = url;
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user