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 {
|
.modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
@ -5,6 +10,19 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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 {
|
#loadingSpinner {
|
||||||
@ -12,3 +30,12 @@
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="modal" id="loadingSpinner"></div>
|
<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>
|
<div id="calendar"></div>
|
||||||
<script src="bundle-wall-display.js"></script>
|
<script src="bundle-wall-display.js"></script>
|
||||||
</body>
|
</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) {
|
loading(isLoading: boolean) {
|
||||||
|
if (isLoading) {
|
||||||
|
const errorModal = document.getElementById('errorModal');
|
||||||
|
if (errorModal) {
|
||||||
|
errorModal.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const spinner = document.getElementById('loadingSpinner');
|
const spinner = document.getElementById('loadingSpinner');
|
||||||
if (spinner) {
|
if (spinner) {
|
||||||
spinner.style.display = isLoading ? '' : 'none';
|
spinner.style.display = isLoading ? '' : 'none';
|
||||||
|
Loading…
Reference in New Issue
Block a user