adam.goldsmith/reservations_display
1
0
Fork 0
Code Issues Pull Requests 1 Activity

wall-display: Add an error modal for event fetching errors

Browse Source
This commit is contained in:
Adam Goldsmith 2022-12-10 16:44:43 -05:00
parent 084f398d41
commit ef009b2d0e
4 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/DejaVuSans.ttf Normal file
View File

Binary file not shown.

27
src/modal.css
View File

@ -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';
}

6
src/wall-display.html
View File

@ -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">&#9888;</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>

18
src/wall-display.ts
View File

@ -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';