Add FitBit Report.

uzh · Aug 29, 2023 · 437a27c · 437a27c
1 parent 6b8a57c
commit 437a27c
Show file tree

Hide file tree

Showing 6 changed files with 261 additions and 45 deletions.
diff --git a/config/settings/base.py b/config/settings/base.py
@@ -203,3 +203,4 @@
 DDM_SEARCH_BP_ID = os.environ['DDM_SEARCH_BP_ID']
 
 DDM_FITBIT_PROJECT_ID = os.environ['DDM_FITBIT_PROJECT_ID']
+DDM_FITBIT_API_TOKEN = os.environ['DDM_FITBIT_API_TOKEN']
diff --git a/digital_meal/templates/digital_meal/individual_fitbit_report.html b/digital_meal/templates/digital_meal/individual_fitbit_report.html
@@ -7,9 +7,9 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>{% block title %}Individual Report{% endblock %}</title>
+  <title>{% block title %}Dein Fitbit Report{% endblock %}</title>
 
-  <link rel="shortcut icon" type="image/x-icon" href="{% static 'digital_meal/img/DigitalMeal_favicon.svg' %}">
+  <link rel="shortcut icon" type="image/x-icon" href="{% static 'ddl/img/favicons/ddl_favicon_black.svg' %}">
 
   {% block site_css %}
   <link rel="stylesheet" href="{% static 'digital_meal/css/bootstrap/bootstrap.min.css' %}">
@@ -20,8 +20,6 @@
   {% endblock extra_head %}
 </head>
 
-{% load static %}
-
 <body>
 <div id="report">
 
@@ -35,29 +33,53 @@
         </div>
       </div>
 
+      {% if sleep_plot or sleep_pulse_plot or activity_plot or steps_plot %}
       <div class="row">
         <div class="row">
-          <h1 class="mt-5 pb-3 col col-lg-6">Deine personalisierte Auswertung deiner Fitbit-Daten</h1>
+          <div class="pt-3 col col-lg-6">
+            <h1 class="mt-5 pb-3">Deine personalisierte Auswertung deiner Fitbit-Daten</h1>
+          </div>
+          <div class="col col-lg-4 align-items-center" style="padding-top: 100px;">
+            <img alt="Symbolbild FitBit Studie" src="{% static 'digital_meal/img/Steps.png' %}" height="180px">
+          </div>
         </div>
 
         <div class="row d-flex flex-row">
-          <div class="pt-3 col col-lg-4">
-            <img alt="Symbolbild FitBit Studie" src="{% static 'digital_meal/img/Steps.png' %}" height="180px">
-          </div>
-          <div class="col col-lg-6 text-end">
-            <p>In dieser persönlichen Auswertung findest Du Informationen zu Deinen persönlichen Fitbit-Daten.
+            <p>In dieser persönlichen Auswertung findest Du Informationen zu Deinen persönlichen Aktivitäts-Daten,<br>
+              wie sie von FitBit aufgezeichnet wurden.
             </p>
             <p>
               Scrolle nach unten, um mehr zu erfahren.
             </p>
+        </div>
+      </div>
+      {% else %}
+      <div class="row">
+        <div class="row">
+          <div class="pt-3 col col-lg-6">
+            <h1 class="mt-5 pb-3">Deine personalisierte Auswertung deiner Fitbit-Daten</h1>
+          </div>
+          <div class="col col-lg-4 align-items-center" style="padding-top: 100px;">
+            <img alt="Symbolbild FitBit Studie" src="{% static 'digital_meal/img/Steps.png' %}" height="180px">
           </div>
         </div>
+
+        <div class="row d-flex flex-row">
+          <p>
+            Danke für das Interesse und die Teilnahme an unserer Studie.
+          </p>
+          <p>
+            Leider konnten wir deine Daten nicht abrufen. Entweder hast du keine
+            Daten gespendet oder es ist beim Abrufen der Daten ein Fehler aufgetreten.
+          </p>
+        </div>
       </div>
+      {% endif %}
     </div>
   </div>
 
-
   <!-- SCHLAF -->
+  {% if sleep_plot or sleep_pulse_plot  %}
   <div class="section-container">
 
     <div class="position-relative">
@@ -73,17 +95,32 @@ <h1 class="mt-5 pb-3 col col-lg-6">Deine personalisierte Auswertung deiner Fitbi
         <h2>Dein Schlaf</h2>
         <div>
           <p>
-            Informationen zu Schlafdaten
+            Die folgenden Schlafdaten wurden aus Deinem FitBit-Datenexport ausgelesen:
           </p>
         </div>
-        <div class="d-flex justify-content-center">[evt. Grafik]</div>
+        <div class="d-flex justify-content-center flex-column align-items-center text-center">
+          {% if sleep_plot %}
+          <div class="col pt-5">
+            <h3>Anzahl Minuten im Tiefschlaf</h3>
+            {{ sleep_plot.div | safe }}
+          </div>
+          {% endif %}
+          {% if sleep_pulse_plot %}
+          <div class="col pt-5">
+            <h3>Ruhepuls im Schlaf</h3>
+            {{ sleep_pulse_plot.div | safe }}
+          </div>
+          {% endif %}
+        </div>
       </div>
     </div>
 
   </div>
+  {% endif %}
 
 
   <!-- AKTIVITÄTEN -->
+  {% if activity_plot %}
   <div class="section-container">
 
     <div class="position-relative">
@@ -97,20 +134,23 @@ <h2>Dein Schlaf</h2>
     <div class="report-section" style="background: #D0C3FF">
       <div class="report-content d-flex flex-row">
         <div class="pe-5">
-          <h2>Deine Aktivitäten der letzten Wochen</h2>
+          <h2>Dein Aktivitätslevel der letzten Wochen</h2>
           <p class="text-start">
-            In den letzten Wochen hat dein FitBit-Gerät an X Tagen Aktivitäten aufgezeichnet.
+            Unten siehst Du eine Übersicht der von FitBit aufgezeichneten Aktivitäten zwischen
+            {{ activity_date_min }} und {{ activity_date_max }}.
           </p>
         </div>
         <div class="detailed-use-plot">
-          [evt. GRAFIK]
+          {{ activity_plot.div | safe }}
         </div>
       </div>
     </div>
   </div>
+  {% endif %}
 
 
-  <!-- Weitere Daten -->
+  <!-- SCHRITTE -->
+  {% if steps_plot %}
   <div class="section-container">
 
     <div class="position-relative">
@@ -125,19 +165,24 @@ <h2>Deine Aktivitäten der letzten Wochen</h2>
 
         <div class="report-content d-flex flex-row pb-5 align-content-stretch pt-5">
           <div class="ps-5 pe-5 flex-grow-1 d-flex flex-column justify-content-center align-items-center">
-            <h2>Weitere Daten</h2>
+            <h2>Schritte</h2>
             <p class="text-center">
-              Hier könnte ein informativer Text stehen.
+              Unten siehst Du eine Übersicht der von FitBit aufgezeichneten Schritte:
             </p>
           </div>
-
+          <div class="d-flex justify-content-center flex-column align-items-center text-center">
+            <div class="col pt-5">
+              {{ steps_plot.div | safe }}
+            </div>
+          </div>
         </div>
       </div>
 
   </div>
+  {% endif %}
 
 
-  <!-- Weitere Daten -->
+  <!-- Weitere Daten
   <div class="section-container">
 
     <div class="position-relative">
@@ -165,7 +210,7 @@ <h2>Weitere Daten</h2>
       </div>
     </div>
   </div>
-
+  -->
 
   <div class="section-container">
 
@@ -183,7 +228,6 @@ <h3>Über diesen Report</h3>
         <p>
           Dieser Report wurde automatisch basierend auf deinen hochgeladenen Daten generiert. Er ist für eine befristete
           Zeit für Personen, die über den Link verfügen, abrufbar.
-          Wenn du diesen Report später nochmals ansehen möchtest, kannst du ihn als PDF speichern.
         </p>
 
         <p>
@@ -193,7 +237,8 @@ <h3>Über diesen Report</h3>
         </p>
 
         <p>
-          Bei Fragen oder Inputs kannst du uns jederzeit mit einer E-Mail an <a href="mailto:[email protected]">[email protected]</a> kontaktieren.
+          Bei Fragen oder Inputs kannst du uns jederzeit mit einer E-Mail an <a href="mailto:[email protected]">[email protected]</a> kontaktieren
+          oder uns direkt an unserem Scientifica-Stand ansprechen.
         </p>
 
         <div class="text-center">
@@ -210,6 +255,10 @@ <h3>Über diesen Report</h3>
 <script src="{% static 'digital_meal/js/jquery/jquery-3.6.2.min.js' %}"></script>
 <script src="{% static 'digital_meal/js/bootstrap/bootstrap.bundle.min.js' %}"></script>
 <script src="{% static 'digital_meal/js/bokeh/bokeh-3.1.1.min.js' %}"></script>
+{{ activity_plot.script | safe }}
+{{ sleep_plot.script | safe }}
+{{ sleep_pulse_plot.script | safe }}
+{{ steps_plot.script | safe }}
 
 </body>
 

diff --git a/digital_meal/templates/digital_meal/individual_report.html b/digital_meal/templates/digital_meal/individual_report.html
@@ -7,7 +7,7 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>{% block title %}Individual Report{% endblock %}</title>
+  <title>{% block title %}Dein YouTube Report{% endblock %}</title>
 
   <link rel="shortcut icon" type="image/x-icon" href="{% static 'digital_meal/img/DigitalMeal_favicon.svg' %}">
 
@@ -20,8 +20,6 @@
   {% endblock extra_head %}
 </head>
 
-{% load static %}
-
 <body>
 <div id="report">
 
@@ -36,6 +34,7 @@
         </div>
       </div>
 
+      {% if dates_plot or weekday_use_plot or fav_video.n_watched > 1 or channel_plot or n_searches > 0 %}
       <div class="row">
         <div class="row">
           <h1 class="mt-5 pb-3 col col-lg-6">Deine personalisierte Auswertung deiner YouTube-Nutzung</h1>
@@ -56,6 +55,28 @@ <h1 class="mt-5 pb-3 col col-lg-6">Deine personalisierte Auswertung deiner YouTu
           </div>
         </div>
       </div>
+      {% else %}
+      <div class="row">
+        <div class="row">
+          <div class="pt-3 col col-lg-6">
+            <h1 class="mt-5 pb-3">Deine personalisierte Auswertung deiner YouTube-Nutzung</h1>
+          </div>
+          <div class="col col-lg-4 align-items-center" style="padding-top: 100px;">
+            <img alt="Symbolbild FitBit Studie" src="{% static 'digital_meal/img/Steps.png' %}" height="180px">
+          </div>
+        </div>
+
+        <div class="row d-flex flex-row">
+          <p>
+            Danke für das Interesse und die Teilnahme an unserer Studie.
+          </p>
+          <p>
+            Leider konnten wir deine Daten nicht abrufen. Entweder hast du keine
+            Daten gespendet oder es ist beim Abrufen der Daten ein Fehler aufgetreten.
+          </p>
+        </div>
+      </div>
+      {% endif %}
     </div>
   </div>
 
@@ -230,7 +251,7 @@ <h2>Nach was Du gesucht hast</h2>
   {% endif %}
 
 
-  <!-- INTERACTIONS -->
+  <!-- INTERACTIONS
   <div class="section-container">
     <div class="position-relative">
       <div class="custom-shape-divider-bottom-1691418846">
@@ -255,9 +276,8 @@ <h2>Deine Interaktionen</h2>
       </div>
     </div>
   </div>
+  -->
 
-
-  <!-- TOPICS -->
   <div class="section-container">
 
     <div class="position-relative">
@@ -275,7 +295,6 @@ <h3>Über diesen Report</h3>
         <p>
           Dieser Report wurde automatisch basierend auf deinen hochgeladenen Daten generiert. Er ist für eine befristete
           Zeit für Personen, die über den Link verfügen, abrufbar.
-          Wenn du diesen Report später nochmals ansehen möchtest, kannst du ihn als PDF speichern.
         </p>
 
         <p>
@@ -285,7 +304,8 @@ <h3>Über diesen Report</h3>
         </p>
 
         <p>
-          Bei Fragen oder Inputs kannst du uns jederzeit mit einer E-Mail an <a href="mailto:[email protected]">[email protected]</a> kontaktieren.
+          Bei Fragen oder Inputs kannst du uns jederzeit mit einer E-Mail an <a href="mailto:[email protected]">[email protected]</a> kontaktieren
+          oder uns direkt an unserem Scientifica-Stand ansprechen.
         </p>
 
         <div class="text-center">

diff --git a/digital_meal/templates/digital_meal/scientifica_landing.html b/digital_meal/templates/digital_meal/scientifica_landing.html
@@ -11,7 +11,7 @@
   <title>Data Donation Lab | Scientifica 2023</title>
   <meta name="description" content="This is the Digital Meal website.">
 
-  <link rel="shortcut icon" type="image/x-icon" href="{% static 'digital_meal/img/DigitalMeal_favicon.svg' %}"> <!-- TOD= DDL Favicon -->
+  <link rel="shortcut icon" type="image/x-icon" href="{% static 'ddl/img/favicons/ddl_favicon_black.svg' %}">
 
   {% block site_css %}
   <link rel="stylesheet" href="{% static 'digital_meal/css/bootstrap/bootstrap.min.css' %}">
@@ -123,7 +123,7 @@ <h2>Spenden Sie Ihre Daten jetzt</h2>
         </p>
       </div>
 
-      <div class="col-md-4 text-center"><a href="{{ ddm_url }}studies/fitbit/briefing/" class="btn btn-success">Hier geht's zur Studie</a></div>
+      <div class="col-md-4 text-center"><a href="https://www.uzh.ch/zi/cl/umfragen/index.php/726552?lang=de" class="btn btn-success" style="color: white !important;">Hier geht's zur Studie</a></div>
 
     </div>