kaufi/kantinen-wrapper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add connectivity check and fallback modal (v1.7.2)

Browse Source
This commit is contained in:
Michael Kaufmann
2026-02-12 13:15:43 +01:00
parent d5f1a51dc6
commit 8bddff10cd
5 changed files with 123 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/bookmarklet-payload.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/bookmarklet.txt vendored
View File

File diff suppressed because one or more lines are too long

2
dist/install.html vendored
View File

File diff suppressed because one or more lines are too long

61
dist/kantine-standalone.html vendored
View File

@@ -1932,8 +1932,14 @@ body {
} catch (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');
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 {
loading.classList.add('hidden');
}
@@ -2366,6 +2372,59 @@ body {
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>
</body>
</html>

61
kantine.js
View File

@@ -792,8 +792,14 @@
} catch (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');
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 {
loading.classList.add('hidden');
}
@@ -1226,3 +1232,56 @@
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');
});
}