avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 1 | var bookletNames = [ |
avm99963 | c26d16b | 2021-02-28 00:58:56 +0100 | [diff] [blame] | 2 | 'ciba2021', |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 3 | 'nadal2020nens', |
avm99963 | c26d16b | 2021-02-28 00:58:56 +0100 | [diff] [blame] | 4 | 'nadal2020joves', |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 5 | ]; |
| 6 | |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 7 | var interval = null; |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 8 | var isBookletShown = false; |
avm99963 | d6027c3 | 2021-02-28 00:54:49 +0100 | [diff] [blame] | 9 | var showAllConcerts = false; |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 10 | |
| 11 | function showSection(section) { |
| 12 | document.querySelectorAll('section').forEach(el => { |
| 13 | if (el.id === section) |
| 14 | el.removeAttribute('hidden'); |
| 15 | else |
| 16 | el.setAttribute('hidden', ''); |
| 17 | }); |
| 18 | } |
| 19 | |
avm99963 | b2a3fa9 | 2020-12-21 16:07:29 +0100 | [diff] [blame] | 20 | function convertTime(time) { |
| 21 | var hour = Math.floor(time); |
| 22 | var totalMinutes = time*60; |
| 23 | var minutes = totalMinutes - hour*60; |
| 24 | |
| 25 | return hour + ':' + minutes; |
| 26 | } |
| 27 | |
| 28 | function songElement(song, hasTimes) { |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 29 | var div = document.createElement('div'); |
| 30 | div.classList.add('song'); |
| 31 | |
avm99963 | b2a3fa9 | 2020-12-21 16:07:29 +0100 | [diff] [blame] | 32 | if (hasTimes) { |
| 33 | var time = document.createElement('div'); |
| 34 | time.classList.add('song-time'); |
| 35 | console.log(song.begins); |
| 36 | time.textContent = convertTime(song.begins); |
| 37 | |
| 38 | div.append(time); |
| 39 | } |
| 40 | |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 41 | var title = document.createElement('h3'); |
| 42 | title.classList.add('song-title'); |
| 43 | title.textContent = song.title; |
| 44 | |
| 45 | var author = document.createElement('div'); |
| 46 | author.classList.add('song-author'); |
| 47 | author.textContent = song.author; |
| 48 | |
| 49 | var performers = document.createElement('div'); |
| 50 | performers.classList.add('performers'); |
| 51 | |
| 52 | song.performers.forEach(performer => { |
| 53 | var item = document.createElement('div'); |
| 54 | item.classList.add('performers-item'); |
| 55 | |
| 56 | var span = document.createElement('span'); |
| 57 | span.classList.add('instrument'); |
| 58 | span.textContent = performer.instrument; |
| 59 | |
| 60 | var people = document.createTextNode(': ' + performer.names.join(', ')); |
| 61 | |
| 62 | item.append(span, people); |
| 63 | performers.append(item); |
| 64 | }); |
| 65 | |
| 66 | div.append(title, author, performers); |
| 67 | return div; |
| 68 | } |
| 69 | |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 70 | function loadBooklet(booklet, showBackButton = false) { |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 71 | console.info('Booklet: ', booklet); |
| 72 | |
avm99963 | b2a3fa9 | 2020-12-21 16:07:29 +0100 | [diff] [blame] | 73 | var hasTimes = booklet.hasTimes; |
| 74 | if (hasTimes) { |
| 75 | booklet.songs.sort((a, b) => { |
| 76 | return a.begins - b.begins; |
| 77 | }); |
| 78 | } |
| 79 | |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 80 | document.getElementById('concert-title').textContent = booklet.title; |
| 81 | document.getElementById('concert-subtitle').textContent = booklet.subtitle; |
| 82 | |
avm99963 | a8c89e8 | 2021-03-01 22:41:39 +0100 | [diff] [blame] | 83 | if ('customHeader' in booklet) |
| 84 | document.getElementById('booklet-custom-header').innerHTML = |
| 85 | booklet.customHeader; |
| 86 | if ('customFooter' in booklet) |
| 87 | document.getElementById('booklet-custom-footer').innerHTML = |
| 88 | booklet.customFooter; |
| 89 | |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 90 | var bookletContent = document.getElementById('booklet-content'); |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 91 | bookletContent.textContent = ''; |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 92 | booklet.songs.forEach(song => { |
avm99963 | b2a3fa9 | 2020-12-21 16:07:29 +0100 | [diff] [blame] | 93 | var songEl = songElement(song, hasTimes); |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 94 | bookletContent.append(songEl); |
| 95 | }); |
| 96 | |
| 97 | showSection('booklet'); |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 98 | if (showBackButton) |
| 99 | document.getElementById('previous-concerts-btn').removeAttribute('hidden'); |
| 100 | } |
| 101 | |
| 102 | function loadPreviousBookletsList(booklets) { |
| 103 | var now = Date.now(); |
| 104 | var list = document.getElementById('previous-concerts-list'); |
| 105 | |
| 106 | var existsPreviousConcert = false; |
| 107 | booklets.forEach(booklet => { |
avm99963 | d6027c3 | 2021-02-28 00:54:49 +0100 | [diff] [blame] | 108 | if (showAllConcerts || booklet.ends * 1000 <= now) { |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 109 | existsPreviousConcert = true; |
| 110 | |
| 111 | var el = document.createElement('div'); |
| 112 | el.classList.add('concert'); |
| 113 | |
| 114 | var title = document.createElement('div'); |
| 115 | title.classList.add('concert-title'); |
| 116 | title.textContent = booklet.title; |
| 117 | |
| 118 | var subtitle = document.createElement('div'); |
| 119 | subtitle.classList.add('concert-subtitle'); |
| 120 | subtitle.textContent = booklet.subtitle; |
| 121 | |
| 122 | var view = document.createElement('button'); |
| 123 | view.classList.add('concert-btn', 'linkify'); |
| 124 | view.textContent = 'Obre el programa'; |
| 125 | |
| 126 | el.append(title, subtitle, view); |
| 127 | |
| 128 | el.addEventListener('click', _ => { |
| 129 | loadBooklet(booklet, true); |
| 130 | }); |
| 131 | |
| 132 | list.append(el); |
| 133 | } |
| 134 | }); |
| 135 | |
| 136 | if (existsPreviousConcert) |
| 137 | document.getElementById('previous-concerts-btn').removeAttribute('hidden'); |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 138 | } |
| 139 | |
| 140 | function checkBooklets(booklets) { |
| 141 | if (isBookletShown) |
| 142 | return; |
| 143 | |
| 144 | var now = Date.now(); |
| 145 | var latest = null; |
| 146 | booklets.forEach(booklet => { |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 147 | if (booklet['begins'] * 1000 <= now && booklet['ends'] * 1000 >= now && |
| 148 | (latest === null || latest['begins'] < booklet['begins'])) |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 149 | latest = booklet; |
| 150 | }); |
| 151 | |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 152 | if (latest !== null) { |
| 153 | document.getElementById('previous-concerts-btn').setAttribute('hidden', ''); |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 154 | loadBooklet(latest); |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 155 | window.clearInterval(interval); |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 156 | isBookletShown = true; |
| 157 | } |
| 158 | } |
| 159 | |
avm99963 | 20fdf2a | 2020-12-20 13:08:16 +0100 | [diff] [blame] | 160 | function showUpdateFooter() { |
| 161 | document.getElementById('update-available').removeAttribute('hidden'); |
| 162 | } |
| 163 | |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 164 | window.addEventListener('load', _ => { |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 165 | document.getElementById('previous-concerts-btn') |
| 166 | .addEventListener('click', e => { |
| 167 | showSection('previous-concerts'); |
| 168 | document.getElementById('previous-concerts-btn') |
| 169 | .setAttribute('hidden', ''); |
| 170 | }); |
| 171 | |
avm99963 | d6027c3 | 2021-02-28 00:54:49 +0100 | [diff] [blame] | 172 | var searchParams = new URLSearchParams(location.search); |
| 173 | if (searchParams.has('showAllConcerts')) |
| 174 | showAllConcerts = true; |
| 175 | |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 176 | if ('serviceWorker' in navigator) { |
| 177 | navigator.serviceWorker.register('/sw.js') |
avm99963 | 20fdf2a | 2020-12-20 13:08:16 +0100 | [diff] [blame] | 178 | .then(reg => { |
| 179 | reg.addEventListener('updatefound', _ => { |
| 180 | showUpdateFooter(); |
| 181 | }); |
| 182 | |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 183 | var promises = []; |
| 184 | bookletNames.forEach(name => { |
| 185 | var p = fetch('concerts/' + name + '.json').then(res => res.json()); |
| 186 | promises.push(p); |
| 187 | }); |
| 188 | |
| 189 | Promise.all(promises).then(booklets => { |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 190 | showSection('wait-screen'); |
| 191 | loadPreviousBookletsList(booklets); |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 192 | checkBooklets(booklets); |
avm99963 | 04c9754 | 2020-12-20 19:11:16 +0100 | [diff] [blame] | 193 | interval = window.setInterval(_ => { |
| 194 | checkBooklets(booklets); |
| 195 | }, 15 * 1000); |
avm99963 | 1ca663e | 2020-12-17 19:34:22 +0100 | [diff] [blame] | 196 | }); |
| 197 | }) |
| 198 | .catch(err => { |
| 199 | showSection('cant-install'); |
| 200 | console.error('The service worker failed to be registered.'); |
| 201 | }); |
| 202 | } else { |
| 203 | showSection('no-service-worker'); |
| 204 | } |
| 205 | }); |