wall-display: Add an error modal for event fetching errors
This commit is contained in:
parent
084f398d41
commit
ef009b2d0e
BIN
src/DejaVuSans.ttf
Normal file
BIN
src/DejaVuSans.ttf
Normal file
Binary file not shown.
@ -1,3 +1,8 @@
|
||||
@font-face {
|
||||
font-family: 'DejaVu Sans';
|
||||
src: local('DejaVu Sans'), url(./DejaVuSans.ttf);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
@ -5,6 +10,19 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#loadingSpinner {
|
||||
@ -12,3 +30,12 @@
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#errorModal {
|
||||
background-color: rgba(200, 200, 200, 0.6);
|
||||
}
|
||||
|
||||
.modal-icon {
|
||||
font-size: 10em;
|
||||
font-family: 'DejaVu Sans';
|
||||
}
|
||||
|
@ -8,6 +8,12 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="modal" id="loadingSpinner"></div>
|
||||
<div class="modal" id="errorModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-icon">⚠</div>
|
||||
<div class="modal-message"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="calendar"></div>
|
||||
<script src="bundle-wall-display.js"></script>
|
||||
</body>
|
||||
|
@ -30,7 +30,25 @@ const calendarOptions: CalendarOptions = {
|
||||
};
|
||||
})
|
||||
: [],
|
||||
eventSourceFailure(error: { message: string }) {
|
||||
console.error('Error fetching events', error);
|
||||
const errorModal = document.getElementById('errorModal');
|
||||
if (errorModal) {
|
||||
errorModal.style.display = '';
|
||||
const message = errorModal.querySelector('.modal-message');
|
||||
if (message) {
|
||||
message.textContent = `Failed to fetch events: ${error.message}. Displayed events may not be accurate.`;
|
||||
}
|
||||
}
|
||||
},
|
||||
loading(isLoading: boolean) {
|
||||
if (isLoading) {
|
||||
const errorModal = document.getElementById('errorModal');
|
||||
if (errorModal) {
|
||||
errorModal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
const spinner = document.getElementById('loadingSpinner');
|
||||
if (spinner) {
|
||||
spinner.style.display = isLoading ? '' : 'none';
|
||||
|
Loading…
Reference in New Issue
Block a user