From 4650963cc7c0f99a82f99cd3e93a57b29b19d3f5 Mon Sep 17 00:00:00 2001
From: Simon <simobilleter@gmail.com>
Date: Thu, 31 Aug 2023 22:28:36 +0700
Subject: [PATCH] add watch progress tiles

---
 .../home/templates/home/settings.html         |  3 ++-
 tubearchivist/static/stats.js                 | 27 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/tubearchivist/home/templates/home/settings.html b/tubearchivist/home/templates/home/settings.html
index 8d605f7..8a2256e 100644
--- a/tubearchivist/home/templates/home/settings.html
+++ b/tubearchivist/home/templates/home/settings.html
@@ -9,7 +9,8 @@
     <div id="primaryBox" class="info-box info-box-4"></div>
 </div>
 <div>
-
+    <h2>Watch Progress</h2>
+    <div id="watchBox" class="info-box info-box-3"></div>
 </div>
 <script type="text/javascript" src="{% static 'stats.js' %}"></script>
 {% endblock settings_content %}
diff --git a/tubearchivist/static/stats.js b/tubearchivist/static/stats.js
index eecf18b..0bc5e40 100644
--- a/tubearchivist/static/stats.js
+++ b/tubearchivist/static/stats.js
@@ -70,8 +70,35 @@ function buildDownloadTile(responseData) {
   return tile;
 }
 
+function watchStats() {
+  let apiEndpoint = '/api/stats/watch/';
+  let responseData = apiRequest(apiEndpoint, 'GET');
+  let watchBox = document.getElementById('watchBox');
+
+  for (const property in responseData) {
+    let tile = buildWatchTile(property, responseData[property]);
+    watchBox.appendChild(tile);
+  }
+}
+
+function buildWatchTile(title, watchDetail) {
+  let tile = buildTile(`Total ${title}`);
+  let message = document.createElement('p');
+  message.innerHTML = `
+    ${watchDetail.items} Videos<br>
+    ${watchDetail.duration} Seconds<br>
+    ${watchDetail.duration_str} Playback
+  `;
+  if (watchDetail.progress) {
+    message.innerHTML += `<br>${Number(watchDetail.progress * 100).toFixed(2)}%`;
+  }
+  tile.appendChild(message);
+  return tile;
+}
+
 function buildStats() {
   primaryStats();
+  watchStats();
 }
 
 buildStats();