From 38a00d3617eedd57d31acce2ce2179233bd518a1 Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Thu, 30 Nov 2023 17:39:13 +1300
Subject: [PATCH] addiction mitigation: time tracking

---
 app/static/js/scripts.js    | 86 ++++++++++++++++++++++++++++++++++++-
 app/static/site.webmanifest |  4 +-
 app/static/styles.css       |  4 ++
 app/static/styles.scss      |  4 ++
 app/templates/base.html     |  2 +-
 5 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/app/static/js/scripts.js b/app/static/js/scripts.js
index 46028b44..dc4ec25c 100644
--- a/app/static/js/scripts.js
+++ b/app/static/js/scripts.js
@@ -3,6 +3,7 @@ document.addEventListener("DOMContentLoaded", function () {
     setupCommunityNameInput();
     setupShowMoreLinks();
     setupConfirmFirst();
+    setupTimeTracking();
 });
 
 
@@ -150,7 +151,7 @@ function setupHideButtons() {
         });
     });
 
-    if(toBeHidden) {
+    if(typeof toBeHidden !== "undefined" && toBeHidden) {
         toBeHidden.forEach((arrayElement) => {
           // Build the ID of the outer div
           const divId = "comment_" + arrayElement;
@@ -178,4 +179,87 @@ function setupHideButtons() {
 function titleToURL(title) {
   // Convert the title to lowercase and replace spaces with hyphens
   return title.toLowerCase().replace(/\s+/g, '_');
+}
+
+var timeTrackingInterval;
+var currentlyVisible = true;
+
+function setupTimeTracking() {
+    // Check for Page Visibility API support
+    if (document.visibilityState) {
+        const lastUpdate = new Date(localStorage.getItem('lastUpdate')) || new Date();
+
+       // Initialize variables to track time
+       let timeSpent = parseInt(localStorage.getItem('timeSpent')) || 0;
+
+       displayTimeTracked();
+
+       timeTrackingInterval = setInterval(() => {
+          timeSpent += 2;
+          localStorage.setItem('timeSpent', timeSpent);
+          // Display timeSpent
+          displayTimeTracked();
+       }, 2000)
+
+
+       // Event listener for visibility changes
+       document.addEventListener("visibilitychange", function() {
+          const currentDate = new Date();
+
+          if (currentDate.getMonth() !== lastUpdate.getMonth() || currentDate.getFullYear() !== lastUpdate.getFullYear()) {
+            // Reset counter for a new month
+            timeSpent = 0;
+            localStorage.setItem('timeSpent', timeSpent);
+            localStorage.setItem('lastUpdate', currentDate.toString());
+            displayTimeTracked();
+          }
+
+          if (document.visibilityState === "visible") {
+              console.log('visible')
+              currentlyVisible = true
+              timeTrackingInterval = setInterval(() => {
+                  timeSpent += 2;
+                  localStorage.setItem('timeSpent', timeSpent);
+                  displayTimeTracked();
+              }, 2000)
+          } else {
+              currentlyVisible = false;
+              if(timeTrackingInterval) {
+                 clearInterval(timeTrackingInterval);
+              }
+          }
+       });
+    }
+}
+
+function formatTime(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+
+  let result = '';
+
+  if (hours > 0) {
+    result += `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+  }
+
+  if (minutes > 0) {
+    if (result !== '') {
+      result += ' ';
+    }
+    result += `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`;
+  }
+
+  if (result === '') {
+    result = 'Less than a minute';
+  }
+
+  return result;
+}
+
+function displayTimeTracked() {
+    const timeSpentElement = document.getElementById('timeSpent');
+    let timeSpent = parseInt(localStorage.getItem('timeSpent')) || 0;
+    if(timeSpentElement && timeSpent) {
+        timeSpentElement.textContent = formatTime(timeSpent)
+    }
 }
\ No newline at end of file
diff --git a/app/static/site.webmanifest b/app/static/site.webmanifest
index 13fe9f8b..e39940a0 100644
--- a/app/static/site.webmanifest
+++ b/app/static/site.webmanifest
@@ -1,6 +1,6 @@
 {
-    "name": "PyFedi",
-    "short_name": "PyFedi",
+    "name": "PieFed",
+    "short_name": "PieFed",
     "icons": [
         {
             "src": "/static/images/logo_square_192.png",
diff --git a/app/static/styles.css b/app/static/styles.css
index 8c0f2c2c..5b6ceba5 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -454,6 +454,10 @@ nav.navbar {
   text-align: right;
 }
 
+#timeSpent {
+  cursor: wait;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #777;
diff --git a/app/static/styles.scss b/app/static/styles.scss
index 28ef2963..530efa96 100644
--- a/app/static/styles.scss
+++ b/app/static/styles.scss
@@ -178,6 +178,10 @@ nav.navbar {
   text-align: right;
 }
 
+#timeSpent {
+  cursor: wait;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: $dark-grey;
diff --git a/app/templates/base.html b/app/templates/base.html
index 58e27d7f..5c980ce1 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -98,7 +98,7 @@
             {% block app_content %}{% endblock %}
         </div>
         <footer class="footer mt-auto">
-
+            <p id="timeSpent" class="text-center mt-4" title="This is how long you have spent using PieFed during this month. We hope this use of your time aligns with your priorities and values."></p>
         </footer>
     {% endblock %}