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

Compare commits

base: adam.goldsmith:880c3207710045160c193d54a3ea4a41c6a9da69
Branches Tags
adam.goldsmith:main
adam.goldsmith:renovate/configure
...
compare: adam.goldsmith:ef009b2d0eab44bdddf93f3a8a08bc690ffd874e
Branches Tags
adam.goldsmith:main
adam.goldsmith:renovate/configure

4 Commits
880c320771 ... ef009b2d0e

Author SHA1 Message Date
Adam Goldsmith
ef009b2d0e wall-display: Add an error modal for event fetching errors 2022-12-10 16:44:43 -05:00
Adam Goldsmith
084f398d41 Add a loading spinner to wall-display 
Spinner GIF derived from https://loading.io/, using `apng2gif` to get
correct transparency behavior
 2022-12-10 16:33:27 -05:00
Adam Goldsmith
cf0127c5a8 Bump dependencies 2022-12-10 12:43:22 -05:00
Adam Goldsmith
91d729eaf0 Use asset module instead of file-loader for html files in webpack 2022-12-10 12:20:16 -05:00
8 changed files with 747 additions and 751 deletions
Show Stats Expand all files Collapse all files

25
package.json
View File

@ -10,31 +10,30 @@
"serve": "webpack serve" "serve": "webpack serve"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.19.3", "@babel/core": "^7.20.5",
"@babel/plugin-transform-runtime": "^7.19.1", "@babel/plugin-transform-runtime": "^7.19.6",
"@babel/preset-env": "^7.19.3", "@babel/preset-env": "^7.20.2",
"@types/intl": "^1.2.0", "@types/intl": "^1.2.0",
"babel-loader": "^8.2.5", "babel-loader": "^9.1.0",
"css-loader": "^6.7.1", "css-loader": "^6.7.2",
"file-loader": "^6.2.0",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"ts-loader": "^9.4.1", "ts-loader": "^9.4.2",
"typescript": "^4.8.4", "typescript": "^4.9.4",
"webpack": "^5.74.0", "webpack": "^5.75.0",
"webpack-cli": "^4.10.0", "webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1" "webpack-dev-server": "^4.11.1"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.19.0", "@babel/runtime": "^7.20.6",
"@fullcalendar/core": "^5.11.3", "@fullcalendar/core": "^5.11.3",
"@fullcalendar/icalendar": "^5.11.3", "@fullcalendar/icalendar": "^5.11.3",
"@fullcalendar/resource-common": "^5.11.3", "@fullcalendar/resource-common": "^5.11.3",
"@fullcalendar/resource-timegrid": "^5.11.3", "@fullcalendar/resource-timegrid": "^5.11.3",
"@fullcalendar/resource-timeline": "^5.11.3", "@fullcalendar/resource-timeline": "^5.11.3",
"@fullcalendar/timegrid": "^5.11.3", "@fullcalendar/timegrid": "^5.11.3",
"core-js": "^3.25.5", "core-js": "^3.26.1",
"intl": "^1.2.5", "intl": "^1.2.5",
"preact": "^10.11.1", "preact": "^10.11.3",
"unique-colors": "^1.0.1" "unique-colors": "^1.0.1"
} }
} }

1388
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

BIN
src/DejaVuSans.ttf Normal file
View File

Binary file not shown.

BIN
src/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

41
src/modal.css Normal file
View File

@ -0,0 +1,41 @@
@font-face {
font-family: 'DejaVu Sans';
src: local('DejaVu Sans'), url(./DejaVuSans.ttf);
}
.modal {
position: fixed;
z-index: 99;
top: 0;
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 {
background-image: url(./loading.gif);
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';
}

7
src/wall-display.html
View File

@ -7,6 +7,13 @@
<title>Tool Reservations</title> <title>Tool Reservations</title>
</head> </head>
<body> <body>
<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>

25
src/wall-display.ts
View File

@ -10,6 +10,7 @@ import { CalendarOptions } from '@fullcalendar/core';
import { common_calendarOptions, main } from './common'; import { common_calendarOptions, main } from './common';
import './wall-display.html'; import './wall-display.html';
import './modal.css';
import './ios-fixes.css'; import './ios-fixes.css';
document.body.addEventListener('touchmove', (e) => e.preventDefault(), { document.body.addEventListener('touchmove', (e) => e.preventDefault(), {
@ -29,6 +30,30 @@ 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';
}
},
}; };
const calendar = main(calendarOptions, !toolFilter); const calendar = main(calendarOptions, !toolFilter);

12
webpack.config.js
View File

@ -4,17 +4,19 @@ const common = {
mode: 'development', mode: 'development',
module: { module: {
rules: [ rules: [
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
type: 'asset/resource',
},
{ {
test: /\.css$/i, test: /\.css$/i,
use: ['style-loader', 'css-loader'], use: ['style-loader', 'css-loader'],
}, },
{ {
test: /\.html$/i, test: /\.html$/i,
use: { type: 'asset/resource',
loader: 'file-loader', generator: {
options: { filename: '[name][ext]',
name: '[name].[ext]',
},
}, },
}, },
], ],