Change daily vaccinations source data to RAW. Add translations

nelmuniz · Apr 11, 2021 · 85b685b · 85b685b
1 parent 10ffd96
commit 85b685b
Show file tree

Hide file tree

Showing 4 changed files with 184 additions and 55 deletions.
diff --git a/app.js b/app.js
@@ -50,11 +50,11 @@ app.use('*', async (req, res) => {
 
         }
         // If daily vaccinations informed
-        if (day.daily_vaccinations != null) {
+        if (day.daily_vaccinations_raw != null) {
             // Insert dates array
             dates_daily.push(new String(`"` + day.date + `"`));
             // Insert daily vaccinations array
-            daily.push(new String(`"` + day.daily_vaccinations + `"`));
+            daily.push(new String(`"` + day.daily_vaccinations_raw + `"`));
         }
     });
 
@@ -70,7 +70,7 @@ app.use('*', async (req, res) => {
     last_people = data.reduce((a, b) => ((b.date > a.date) && (b.people_vaccinated_per_hundred != null)) ? b : a).people_vaccinated_per_hundred;
 
     // Last - Daily vaccinations
-    last_daily = data.reduce((a, b) => ((b.date > a.date) && (b.daily_vaccinations != null)) ? b : a).daily_vaccinations;
+    last_daily = data.reduce((a, b) => ((b.date > a.date) && (b.daily_vaccinations_raw != null)) ? b : a).daily_vaccinations_raw;
 
     // Render Index with Spain data
     res.render('index.ejs', {

diff --git a/public/texts.json b/public/texts.json
@@ -0,0 +1,46 @@
+{
+  "title": {
+    "es": "Vacunación Covid-19 España",
+    "en": "Spain Covid-19 Vaccination"
+  },
+  "fully_hundred": {
+    "es": "Personas totalmente vacunadas por cada 100",
+    "en": "People fully vaccinated per hundred"
+  },
+  "people_hundred": {
+    "es": "Personas vacunadas por cada 100",
+    "en": "People vaccinated per hundred"
+  },
+  "daily": {
+    "es": "Vacunación diaria de Covid-19 en España",
+    "en": "Spain Covid-19 daily vaccinations"
+  },
+  "last_update": {
+    "es": "Última actualización: ",
+    "en": "Last update: "
+  },
+  "card_fully": {
+    "es": "Personas totalmente vacunadas: ",
+    "en": "People fully vaccinated: "
+  },
+  "card_people": {
+    "es": "Personas vacunadas: ",
+    "en": "People vaccinated: "
+  },
+  "card_daily": {
+    "es": "Vacunaciones diarias: ",
+    "en": "Daily vaccinations: "
+  },
+  "language": {
+    "es": "Idioma",
+    "en": "Language"
+  },
+  "spanish": {
+    "es": "Español",
+    "en": "Spanish"
+  },
+  "english": {
+    "es": "Inglés",
+    "en": "English"
+  }
+}
diff --git a/views/index.ejs b/views/index.ejs
@@ -7,7 +7,7 @@
 
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Spain Covid-19 Vaccination</title>
+  <title class="t-title"></title>
 
   <!-- Bootstrap styles -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
@@ -25,8 +25,24 @@
   <header>
     <nav class="navbar navbar-expand-md navbar-dark bg-dark">
       <div class="container-fluid">
-        <span class="navbar-brand mb-0 h1">Spain Covid-19 Vaccination</span>
-      </div>
+        <a href="http://vac.nelmuniz.com" class="navbar-brand mb-0 h1 t-title"></a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
+          aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarCollapse">
+          <ul class="navbar-nav me-auto mb-2 mb-md-0">
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                <span class="t-language"></span>
+              </a>
+              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <li><a id="spanish" class="dropdown-item" href="#"><span class="t-spanish"></span></a></li>
+                <li><a id="english" class="dropdown-item" href="#"><span class="t-english"></span></a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
     </nav>
   </header>
 
@@ -38,7 +54,7 @@
       <div class="row mt-3">
         <div class="col-sm-12">
           <div class="alert alert-secondary text-center" role="alert">
-            Last update: <%- last_date %>
+            <span class="t-last_update"></span><%- last_date %>
           </div>
         </div>
       </div>
@@ -50,23 +66,23 @@
         <div class="col-sm-4 mb-3">
           <div class="card">
             <div class="card-body">
-              <h5 class="card-title">People fully vaccinated</h5>
+              <h5 class="card-title"><span class="t-card_fully"></span></h5>
               <span class="badge bg-primary"><%- last_fully %>%</span>
             </div>
           </div>
         </div>
         <div class="col-sm-4 mb-3">
           <div class="card">
             <div class="card-body">
-              <h5 class="card-title">People vaccinated</h5>
+              <h5 class="card-title"><span class="t-card_people"></span></h5>
               <span class="badge bg-primary"><%- last_people %>%</span>
             </div>
           </div>
         </div>
         <div class="col-sm-4 mb-3">
           <div class="card">
             <div class="card-body">
-              <h5 class="card-title">Daily vaccinations</h5>
+              <h5 class="card-title"><span class="t-card_daily"></span></h5>
               <span class="badge bg-primary"><%- last_daily %></span>
             </div>
           </div>
@@ -92,7 +108,8 @@
   <!-- Footer -->
   <footer class="footer mt-auto py-3 bg-light">
     <div class="container-fluid">
-      <span class="text-muted">@nel_muniz</span>
+      <a class="text-muted text-decoration-none" href="https://www.github.com/nelmuniz" target="_blank"
+        rel="noopener noreferrer">@nelmuniz</a>
     </div>
   </footer>
 
@@ -106,6 +123,10 @@
     integrity="sha512-2uu1jrAmW1A+SMwih5DAPqzFS2PI+OPw79OVLS4NJ6jGHQ/GmIVDDlWwz4KLO8DnoUmYdU8hTtFcp8je6zxbCg=="
     crossorigin="anonymous"></script>
 
+  <!-- jQuery-->
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+
   <!-- Functions -->
   <%- include ('partials/functions') %>
 

diff --git a/views/partials/functions.ejs b/views/partials/functions.ejs
@@ -1,66 +1,128 @@
 <script>
-    // Vaccinated chart
-    var vaccinatedChart = new Chart(document.getElementById("vaccinated"), {
-        type: "line",
-        data: {
-            labels: [ <%- dates_vaccinated %> ],
-            datasets: [{
-                    label: "People fully vaccinated per hundred",
+
+let texts = {};
+let lan;
+let vaccinatedChart;
+let dailyChart;
+
+    // Load
+    let load = async () => {
+
+        // Get Spanish texts 
+        await getTexts('es');
+
+        // Get charts
+        getCharts();
+
+    }
+
+    // Get translated texts
+    let getTexts = async (language) => {
+
+        // Set language
+        lan = language;
+
+        // Get texts
+        await $.getJSON("texts.json", (data) => texts = data);
+
+        // Get texts keys
+        let keys = Object.keys(texts);
+
+        // Iterate texts keys
+        keys.forEach((key, index) => {
+            // Set text
+            $(`.t-${key}`).html(texts[key][lan]);
+        });
+    }
+
+    // Get Charts
+    let = getCharts = () => {
+
+        // Vaccinated chart
+        vaccinatedChart = new Chart($("#vaccinated"), {
+            type: "line",
+            data: {
+                labels: [ <%- dates_vaccinated %> ],
+                datasets: [{
+                    label: texts.fully_hundred[lan],
                     data: [ <%- fully_hundred %> ],
                     fill: false,
                     borderColor: "green",
                     tension: 0.1,
                 },
                 {
-                    label: "People vaccinated per hundred",
+                    label: texts.people_hundred[lan],
                     data: [ <%- people_hundred %> ],
                     fill: false,
                     borderColor: "blue",
                     tension: 0.1,
                 },
-            ],
-        },
-        options: {
-            maintainAspectRatio: false,
-            responsive: true,
-            plugins: {
-                legend: {
-                    position: "top",
-                },
-                title: {
-                    display: true,
-                    text: "Spain COVID-19 vaccination",
+                ],
+            },
+            options: {
+                maintainAspectRatio: false,
+                responsive: true,
+                plugins: {
+                    legend: {
+                        position: "top",
+                    },
+                    title: {
+                        display: true,
+                        text: texts.title[lan],
+                    },
                 },
             },
-        },
-    });
-
-    // Daily vaccinations chart
-    let dailyChart = new Chart(document.getElementById("daily"), {
-        type: "line",
-        data: {
-            labels: [ <%- dates_daily %> ],
-            datasets: [{
-                    label: "Spain COVID-19 daily vaccinations",
+        });
+
+        // Daily vaccinations chart
+        dailyChart = new Chart($("#daily"), {
+            type: "line",
+            data: {
+                labels: [ <%- dates_daily %> ],
+                datasets: [{
+                    label: texts.daily[lan],
                     data: [ <%- daily %> ],
                     fill: false,
                     borderColor: "purple",
                     tension: 0.1,
                 },
-            ],
-        },
-        options: {
-            maintainAspectRatio: false,
-            responsive: true,
-            plugins: {
-                legend: {
-                    position: "top",
-                },
-                title: {
-                    display: true,
-                    text: "Spain daily vaccinations",
+                ],
+            },
+            options: {
+                maintainAspectRatio: false,
+                responsive: true,
+                plugins: {
+                    legend: {
+                        position: "top",
+                    },
+                    title: {
+                        display: true,
+                        text: texts.daily[lan],
+                    },
                 },
             },
-        },
-    });
+        });
+
+    }
+
+    // Reset Charts
+    let resetCharts = () => {
+
+        // Destroy Charts
+        vaccinatedChart.destroy();
+        dailyChart.destroy();
+
+        // Get Charts
+        getCharts();
+    }
+
+    // Event - DOMContentLoaded
+    document.addEventListener("DOMContentLoaded", (event) => load());
+
+    // Event - Click Spanish
+    document.getElementById("spanish").addEventListener("click", () => { getTexts("es"); resetCharts() });
+
+    // Event - Click English
+    document.getElementById("english").addEventListener("click", () => { getTexts("en"); resetCharts() });
+
 </script>