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