Initial prototype
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..7c97bfd
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,107 @@
+var bookletNames = [
+ 'nadal2020joves',
+ 'nadal2020nens',
+];
+
+var isBookletShown = false;
+
+function showSection(section) {
+ document.querySelectorAll('section').forEach(el => {
+ if (el.id === section)
+ el.removeAttribute('hidden');
+ else
+ el.setAttribute('hidden', '');
+ });
+}
+
+function songElement(song) {
+ var div = document.createElement('div');
+ div.classList.add('song');
+
+ var title = document.createElement('h3');
+ title.classList.add('song-title');
+ title.textContent = song.title;
+
+ var author = document.createElement('div');
+ author.classList.add('song-author');
+ author.textContent = song.author;
+
+ var performers = document.createElement('div');
+ performers.classList.add('performers');
+
+ song.performers.forEach(performer => {
+ var item = document.createElement('div');
+ item.classList.add('performers-item');
+
+ var span = document.createElement('span');
+ span.classList.add('instrument');
+ span.textContent = performer.instrument;
+
+ var people = document.createTextNode(': ' + performer.names.join(', '));
+
+ item.append(span, people);
+ performers.append(item);
+ });
+
+ div.append(title, author, performers);
+ return div;
+}
+
+function loadBooklet(booklet) {
+ console.info('Booklet: ', booklet);
+
+ document.getElementById('concert-title').textContent = booklet.title;
+ document.getElementById('concert-subtitle').textContent = booklet.subtitle;
+
+ var bookletContent = document.getElementById('booklet-content');
+ booklet.songs.forEach(song => {
+ var songEl = songElement(song);
+ bookletContent.append(songEl);
+ });
+
+ showSection('booklet');
+}
+
+function checkBooklets(booklets) {
+ if (isBookletShown)
+ return;
+
+ var now = Date.now();
+ var latest = null;
+ booklets.forEach(booklet => {
+ if (booklet.begins * 1000 <= now &&
+ (latest === null || booklet.begins * 1000 < booklet.begins))
+ latest = booklet;
+ });
+
+ if (latest === null)
+ showSection('wait-screen');
+ else {
+ loadBooklet(latest);
+ isBookletShown = true;
+ }
+}
+
+window.addEventListener('load', _ => {
+ if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.register('/sw.js')
+ .then(_ => {
+ var promises = [];
+ bookletNames.forEach(name => {
+ var p = fetch('concerts/' + name + '.json').then(res => res.json());
+ promises.push(p);
+ });
+
+ Promise.all(promises).then(booklets => {
+ checkBooklets(booklets);
+ window.setTimeout(_ => { checkBooklets(booklets); }, 60 * 1000);
+ });
+ })
+ .catch(err => {
+ showSection('cant-install');
+ console.error('The service worker failed to be registered.');
+ });
+ } else {
+ showSection('no-service-worker');
+ }
+});