[URGENT] [TBR] Restructure concert schema

- Add hasTimes field to concerts in the JSON schema
- Adds begins field to songs in the JSON schema
- Shows these times in the frontend
- Shows a warning message about the concert cancelation and the virtual
  concert planing
- Add CLI tool to get songs by person (tools/list.php)

Change-Id: Iec80ceb69e1a45cd467aaeaa59337a9966c78b7c
diff --git a/concerts/nadal2020joves.json b/concerts/nadal2020joves.json
index 028488f..5481a8c 100644
--- a/concerts/nadal2020joves.json
+++ b/concerts/nadal2020joves.json
@@ -3,6 +3,7 @@
   "subtitle": "Joves i adults",
   "begins": 1608312600,
   "ends": 1608339600,
+  "hasTimes": false,
   "songs": [
     {
       "title": "Santa Nit",
diff --git a/concerts/nadal2020nens.json b/concerts/nadal2020nens.json
index 7f11ce4..9b21169 100644
--- a/concerts/nadal2020nens.json
+++ b/concerts/nadal2020nens.json
@@ -1,12 +1,14 @@
 {
   "title": "Concert de Nadal 2020",
   "subtitle": "Nens i nenes",
-  "begins": 1608571800,
+  "begins": 0,
   "ends": 1608598800,
+  "hasTimes": true,
   "songs": [
     {
       "title": "Que tinguis un bon Nadal",
       "author": "Nadala popular anglesa",
+      "begins": 17.5,
       "performers": [
         {
           "instrument": "Veus i percussió",
@@ -25,6 +27,7 @@
     {
       "title": "Minuet en Sol major",
       "author": "Johann Sebastian Bach",
+      "begins": 17.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -35,6 +38,7 @@
     {
       "title": "Bailes",
       "author": "Lamote de Grignon",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -45,6 +49,7 @@
     {
       "title": "Campana del campanar",
       "author": "Nadala popular",
+      "begins": 18.5,
       "performers": [
         {
           "instrument": "Veus i percussió",
@@ -59,6 +64,7 @@
     {
       "title": "Chandelier",
       "author": "Sia",
+      "begins": 17.5,
       "performers": [
         {
           "instrument": "Veu",
@@ -73,6 +79,7 @@
     {
       "title": "Bohemian Rhapsody",
       "author": "Queen",
+      "begins": 18.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -83,6 +90,7 @@
     {
       "title": "Oda a l'alegria",
       "author": "Ludwig van Beethoven",
+      "begins": 18.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -93,6 +101,7 @@
     {
       "title": "El pastoret",
       "author": "Popular francesa",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -103,6 +112,7 @@
     {
       "title": "Santa Nit",
       "author": "Franz Grüber",
+      "begins": 18.5,
       "performers": [
         {
           "instrument": "Guitarres",
@@ -129,6 +139,7 @@
     {
       "title": "Jingle Bells",
       "author": "Popular nordamericana",
+      "begins": 18.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -139,6 +150,7 @@
     {
       "title": "Cançó de bressol",
       "author": "Johannes Brahms",
+      "begins": 18.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -149,6 +161,7 @@
     {
       "title": "Dies d'alegria",
       "author": "Thord Gummesson",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Veus",
@@ -167,6 +180,7 @@
     {
       "title": "Març",
       "author": "N. Baklanowa",
+      "begins": 18.5,
       "performers": [
         {
           "instrument": "Violí",
@@ -181,6 +195,7 @@
     {
       "title": "Serra que serra",
       "author": "Nadala popular catalana",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Veus",
@@ -199,6 +214,7 @@
     {
       "title": "Mi burrito sabanero",
       "author": "Villancico colombiano",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Saxo",
@@ -209,6 +225,7 @@
     {
       "title": "This House Is Not For Sale",
       "author": "Bon Jovi",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Veu",
@@ -231,6 +248,7 @@
     {
       "title": "El noi de la mare",
       "author": "Popular catalana",
+      "begins": 17.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -241,6 +259,7 @@
     {
       "title": "The pipers are coming",
       "author": "Johann Sebastian Bach",
+      "begins": 17.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -255,6 +274,7 @@
     {
       "title": "La patinadora",
       "author": "J. Thompson",
+      "begins": 17.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -269,6 +289,7 @@
     {
       "title": "Huahuanaca",
       "author": "Nadala popular boliviana",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Veus",
@@ -295,6 +316,7 @@
     {
       "title": "Déjame",
       "author": "Los Secretos",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Guitarres",
@@ -309,6 +331,7 @@
     {
       "title": "Oda a l'alegria",
       "author": "Ludwig van Beethoven",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Piano",
@@ -317,18 +340,9 @@
       ]
     },
     {
-      "title": "Mad World",
-      "author": "Roland Orzabal",
-      "performers": [
-        {
-          "instrument": "Piano",
-          "names": ["Carlota Bou", "Marcela Bou"]
-        }
-      ]
-    },
-    {
       "title": "Minuet",
       "author": "C. Stamitz",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Flauta travessera",
@@ -339,6 +353,7 @@
     {
       "title": "Récréation de la Flauta Màgica",
       "author": "W. A. Mozart",
+      "begins": 19.5,
       "performers": [
         {
           "instrument": "Flauta travessera",
@@ -349,6 +364,7 @@
     {
       "title": "All I Want for Christmas Is You",
       "author": "Mariah Carey",
+      "begins": 17.5,
       "performers": [
         {
           "instrument": "Veu",
diff --git a/css/styles.css b/css/styles.css
index 4de4af8..d34ec10 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -19,6 +19,7 @@
   padding: 8px 8px;
   background-color: #f3f3f3;
   box-shadow: black 0 -1px 4px;
+  z-index: 100;
 }
 
 .header .header-logo {
@@ -39,6 +40,14 @@
   margin: 74px auto 16px auto;
 }
 
+.hero-message {
+  background: orange;
+  color: black;
+  border-radius: 4px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
 .message {
   text-align: center;
 }
@@ -77,6 +86,7 @@
 }
 
 .song {
+  position: relative;
   border: solid 1px gray;
   border-radius: 3px;
   padding: 12px;
@@ -84,6 +94,12 @@
   box-shadow: #bdbdbd 0 1px 3px;
 }
 
+.song .song-time {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+
 .song .song-title {
   margin-top: 0;
   margin-bottom: 4px;
diff --git a/index.html b/index.html
index 48204f1..a3cc347 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,9 @@
       <button id="previous-concerts-btn" class="primary-btn" hidden>Concerts anteriors</button>
     </header>
     <div class="app-content">
+      <div class="hero-message">
+        <b>ATENCIÓ!</b> S'ha anul·lat el Concert de Nadal del nens i nenes d'aquesta tarda a l'Auditori. Com s'ha enviat en un comunicat, farem gravacions a l'escola de les cançons en els horaris següents, que uns dies més tard mostrarem en un concert virtual al YouTube de l'escola:
+      </div>
       <section id="no-service-worker" class="message message--error" hidden>
         <div class="message-icon">
 <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><g><path d="M19,6v10.5l1.95,1.95C20.98,18.3,21,18.15,21,18V6c0-1.1-0.9-2-2-2H6.5l2,2H19z"/><path d="M3.86,3.95c-0.35-0.35-0.92-0.35-1.27,0c-0.35,0.35-0.35,0.92,0,1.27L3,5.64L3,18c0,1.1,0.9,2,2,2h12.36l1.42,1.42 c0.35,0.35,0.92,0.35,1.27,0c0.35-0.35,0.35-0.92,0-1.27L3.86,3.95z M5,18V7.64L15.36,18H5z"/></g></g></svg></div>
diff --git a/js/script.js b/js/script.js
index 03f66ee..522f0f0 100644
--- a/js/script.js
+++ b/js/script.js
@@ -15,10 +15,27 @@
   });
 }
 
-function songElement(song) {
+function convertTime(time) {
+  var hour = Math.floor(time);
+  var totalMinutes = time*60;
+  var minutes = totalMinutes - hour*60;
+
+  return hour + ':' + minutes;
+}
+
+function songElement(song, hasTimes) {
   var div = document.createElement('div');
   div.classList.add('song');
 
+  if (hasTimes) {
+    var time = document.createElement('div');
+    time.classList.add('song-time');
+    console.log(song.begins);
+    time.textContent = convertTime(song.begins);
+
+    div.append(time);
+  }
+
   var title = document.createElement('h3');
   title.classList.add('song-title');
   title.textContent = song.title;
@@ -51,13 +68,20 @@
 function loadBooklet(booklet, showBackButton = false) {
   console.info('Booklet: ', booklet);
 
+  var hasTimes = booklet.hasTimes;
+  if (hasTimes) {
+    booklet.songs.sort((a, b) => {
+      return a.begins - b.begins;
+    });
+  }
+
   document.getElementById('concert-title').textContent = booklet.title;
   document.getElementById('concert-subtitle').textContent = booklet.subtitle;
 
   var bookletContent = document.getElementById('booklet-content');
   bookletContent.textContent = '';
   booklet.songs.forEach(song => {
-    var songEl = songElement(song);
+    var songEl = songElement(song, hasTimes);
     bookletContent.append(songEl);
   });
 
diff --git a/sw.js b/sw.js
index 582a7e9..1f8522e 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,4 @@
-// Version: 1.0.6
+// Version: 1.0.7
 var CACHE_NAME = 'all-v1';
 var urlsToCache = [
   '/',
diff --git a/tools/list.php b/tools/list.php
new file mode 100644
index 0000000..8ea32ab
--- /dev/null
+++ b/tools/list.php
@@ -0,0 +1,21 @@
+<?php
+$rawJson = file_get_contents("php://stdin");
+$json = json_decode($rawJson, true);
+
+$students = [];
+foreach ($json['songs'] as $song) {
+  foreach ($song["performers"] as $instrument) {
+    foreach ($instrument['names'] as $s) {
+      if (!isset($students[$s])) $students[$s] = [];
+      $students[$s][] = $song;
+    }
+  }
+}
+
+foreach ($students as $s => $songs) {
+  echo '==='.$s.'==='.PHP_EOL;
+  foreach ($songs as $song) {
+    echo '  - '.$song['begins'].' '.$song['title'].' '.PHP_EOL;
+  }
+  echo PHP_EOL;
+}