-
Notifications
You must be signed in to change notification settings - Fork 0
/
scripts.js
122 lines (101 loc) · 3.36 KB
/
scripts.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
const API_ROOT = "https://reqres.in/api/";
const nbMaxAttendees = 30;
function fetchAttendees(){
return fetch(API_ROOT + `users`)
.then(res => res.json())
.then(res => res.data || [])
}
function renderAttendees(attendees=[]){
const attendeesSection = document.getElementById("attendees");
attendeesSection.innerHTML = `
<h1>Attendees: ${attendees.length} / ${nbMaxAttendees}</h1>
<ul>
${attendees.map(user => `
<li class='card'>
<img src="${user.avatar}" alt="Avatar" class="avatar">
<p>
<span class="firstname">${user.first_name}</span>
<br>
<span class="lastname">${user.last_name}</span>
</p>
</li>
`).join('')}
</ul>
`
const registerSection = document.getElementById("register");
const isFull = (attendees.length >= nbMaxAttendees);
registerSection.querySelectorAll("input, button").forEach(elm => { elm.disabled = isFull });
registerSection.querySelector(".status").innerHTML = isFull
? `Sorry, this event is full.`
: `Some places are still available for you to register for this event.`
}
document.addEventListener("DOMContentLoaded", () => {
fetchAttendees().then(renderAttendees);
});
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(serviceWorker => {
console.log("Service Worker registered: ", serviceWorker);
})
.catch(error => {
console.error("Error registering the Service Worker: ", error);
});
}
navigator.serviceWorker.onmessage = event => {
const message = JSON.parse(event.data);
// detect the type of message and refresh the view
if(message && message.type.includes("/api/users")){
console.log("List of attendees to date", message.data)
renderAttendees(message.data)
}
};
// ***** Install PWA on device with button *****
let deferredPrompt;
const installButton = document.getElementById("install_button");
window.addEventListener("beforeinstallprompt", e => {
console.log("beforeinstallprompt fired");
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Show the install button
// installButton.hidden = false;
installButton.style.display = "inline";
installButton.addEventListener("click", installApp);
});
function installApp() {
// Show the prompt
deferredPrompt.prompt();
installButton.disabled = true;
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then(choiceResult => {
if (choiceResult.outcome === "accepted") {
console.log("PWA setup accepted");
// installButton.hidden = true;
installButton.style.display = "none";
} else {
console.log("PWA setup rejected");
}
installButton.disabled = false;
deferredPrompt = null;
});
}
window.addEventListener("appinstalled", evt => {
console.log("appinstalled fired", evt);
});
// ********* Background Sync *************
// Get Permissions
function registerNotification() {
Notification.requestPermission(permission => {
if (permission === 'granted'){ registerBackgroundSync() }
else console.error("Permission was not granted.")
})
}
function registerBackgroundSync() {
if (!navigator.serviceWorker){
return console.error("Service Worker not supported")
}
navigator.serviceWorker.ready
.then(registration => registration.sync.register('syncAttendees'))
.then(() => console.log("Registered background sync"))
.catch(err => console.error("Error registering background sync", err))
}