blob: 03f66ee62f2bcbf8c346c9b64ee2e6002448b070 [file] [log] [blame]
avm999631ca663e2020-12-17 19:34:22 +01001var bookletNames = [
2 'nadal2020joves',
3 'nadal2020nens',
4];
5
avm9996304c97542020-12-20 19:11:16 +01006var interval = null;
avm999631ca663e2020-12-17 19:34:22 +01007var isBookletShown = false;
8
9function showSection(section) {
10 document.querySelectorAll('section').forEach(el => {
11 if (el.id === section)
12 el.removeAttribute('hidden');
13 else
14 el.setAttribute('hidden', '');
15 });
16}
17
18function songElement(song) {
19 var div = document.createElement('div');
20 div.classList.add('song');
21
22 var title = document.createElement('h3');
23 title.classList.add('song-title');
24 title.textContent = song.title;
25
26 var author = document.createElement('div');
27 author.classList.add('song-author');
28 author.textContent = song.author;
29
30 var performers = document.createElement('div');
31 performers.classList.add('performers');
32
33 song.performers.forEach(performer => {
34 var item = document.createElement('div');
35 item.classList.add('performers-item');
36
37 var span = document.createElement('span');
38 span.classList.add('instrument');
39 span.textContent = performer.instrument;
40
41 var people = document.createTextNode(': ' + performer.names.join(', '));
42
43 item.append(span, people);
44 performers.append(item);
45 });
46
47 div.append(title, author, performers);
48 return div;
49}
50
avm9996304c97542020-12-20 19:11:16 +010051function loadBooklet(booklet, showBackButton = false) {
avm999631ca663e2020-12-17 19:34:22 +010052 console.info('Booklet: ', booklet);
53
54 document.getElementById('concert-title').textContent = booklet.title;
55 document.getElementById('concert-subtitle').textContent = booklet.subtitle;
56
57 var bookletContent = document.getElementById('booklet-content');
avm9996304c97542020-12-20 19:11:16 +010058 bookletContent.textContent = '';
avm999631ca663e2020-12-17 19:34:22 +010059 booklet.songs.forEach(song => {
60 var songEl = songElement(song);
61 bookletContent.append(songEl);
62 });
63
64 showSection('booklet');
avm9996304c97542020-12-20 19:11:16 +010065 if (showBackButton)
66 document.getElementById('previous-concerts-btn').removeAttribute('hidden');
67}
68
69function loadPreviousBookletsList(booklets) {
70 var now = Date.now();
71 var list = document.getElementById('previous-concerts-list');
72
73 var existsPreviousConcert = false;
74 booklets.forEach(booklet => {
75 if (booklet.ends * 1000 <= now) {
76 existsPreviousConcert = true;
77
78 var el = document.createElement('div');
79 el.classList.add('concert');
80
81 var title = document.createElement('div');
82 title.classList.add('concert-title');
83 title.textContent = booklet.title;
84
85 var subtitle = document.createElement('div');
86 subtitle.classList.add('concert-subtitle');
87 subtitle.textContent = booklet.subtitle;
88
89 var view = document.createElement('button');
90 view.classList.add('concert-btn', 'linkify');
91 view.textContent = 'Obre el programa';
92
93 el.append(title, subtitle, view);
94
95 el.addEventListener('click', _ => {
96 loadBooklet(booklet, true);
97 });
98
99 list.append(el);
100 }
101 });
102
103 if (existsPreviousConcert)
104 document.getElementById('previous-concerts-btn').removeAttribute('hidden');
avm999631ca663e2020-12-17 19:34:22 +0100105}
106
107function checkBooklets(booklets) {
108 if (isBookletShown)
109 return;
110
111 var now = Date.now();
112 var latest = null;
113 booklets.forEach(booklet => {
avm9996304c97542020-12-20 19:11:16 +0100114 if (booklet['begins'] * 1000 <= now && booklet['ends'] * 1000 >= now &&
115 (latest === null || latest['begins'] < booklet['begins']))
avm999631ca663e2020-12-17 19:34:22 +0100116 latest = booklet;
117 });
118
avm9996304c97542020-12-20 19:11:16 +0100119 if (latest !== null) {
120 document.getElementById('previous-concerts-btn').setAttribute('hidden', '');
avm999631ca663e2020-12-17 19:34:22 +0100121 loadBooklet(latest);
avm9996304c97542020-12-20 19:11:16 +0100122 window.clearInterval(interval);
avm999631ca663e2020-12-17 19:34:22 +0100123 isBookletShown = true;
124 }
125}
126
avm9996320fdf2a2020-12-20 13:08:16 +0100127function showUpdateFooter() {
128 document.getElementById('update-available').removeAttribute('hidden');
129}
130
avm999631ca663e2020-12-17 19:34:22 +0100131window.addEventListener('load', _ => {
avm9996304c97542020-12-20 19:11:16 +0100132 document.getElementById('previous-concerts-btn')
133 .addEventListener('click', e => {
134 showSection('previous-concerts');
135 document.getElementById('previous-concerts-btn')
136 .setAttribute('hidden', '');
137 });
138
avm999631ca663e2020-12-17 19:34:22 +0100139 if ('serviceWorker' in navigator) {
140 navigator.serviceWorker.register('/sw.js')
avm9996320fdf2a2020-12-20 13:08:16 +0100141 .then(reg => {
142 reg.addEventListener('updatefound', _ => {
143 showUpdateFooter();
144 });
145
avm999631ca663e2020-12-17 19:34:22 +0100146 var promises = [];
147 bookletNames.forEach(name => {
148 var p = fetch('concerts/' + name + '.json').then(res => res.json());
149 promises.push(p);
150 });
151
152 Promise.all(promises).then(booklets => {
avm9996304c97542020-12-20 19:11:16 +0100153 showSection('wait-screen');
154 loadPreviousBookletsList(booklets);
avm999631ca663e2020-12-17 19:34:22 +0100155 checkBooklets(booklets);
avm9996304c97542020-12-20 19:11:16 +0100156 interval = window.setInterval(_ => {
157 checkBooklets(booklets);
158 }, 15 * 1000);
avm999631ca663e2020-12-17 19:34:22 +0100159 });
160 })
161 .catch(err => {
162 showSection('cant-install');
163 console.error('The service worker failed to be registered.');
164 });
165 } else {
166 showSection('no-service-worker');
167 }
168});