From a3ca6159fb480888d624b53e37cd764265138911 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:11:17 -0800
Subject: [PATCH] convert stats page to use new settings component

---
 client/pages/config/stats.vue | 117 +++++++++++++++++-----------------
 1 file changed, 58 insertions(+), 59 deletions(-)

diff --git a/client/pages/config/stats.vue b/client/pages/config/stats.vue
index 0c10dc44..ccd17e57 100644
--- a/client/pages/config/stats.vue
+++ b/client/pages/config/stats.vue
@@ -1,69 +1,68 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
-    <h1 class="text-xl">{{ $strings.HeaderYourStats }}</h1>
+  <div>
+    <app-settings-content :headerText="$strings.HeaderYourStats">
+      <div class="flex justify-center">
+        <div class="flex p-2">
+          <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
+            <path
+              fill="currentColor"
+              d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"
+            />
+          </svg>
+          <div class="px-3">
+            <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsFinished }}</p>
+          </div>
+        </div>
 
-    <div class="flex justify-center">
-      <div class="flex p-2">
-        <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"
-          />
-        </svg>
-        <div class="px-3">
-          <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsFinished }}</p>
+        <div class="flex p-2">
+          <div class="hidden sm:block">
+            <span class="hidden sm:block material-icons-outlined text-5xl lg:text-6xl">event</span>
+          </div>
+          <div class="px-1">
+            <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsDaysListened }}</p>
+          </div>
+        </div>
+
+        <div class="flex p-2">
+          <div class="hidden sm:block">
+            <span class="material-icons-outlined text-5xl lg:text-6xl">watch_later</span>
+          </div>
+          <div class="px-1">
+            <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsMinutesListening }}</p>
+          </div>
         </div>
       </div>
-
-      <div class="flex p-2">
-        <div class="hidden sm:block">
-          <span class="hidden sm:block material-icons-outlined text-5xl lg:text-6xl">event</span>
-        </div>
-        <div class="px-1">
-          <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsDaysListened }}</p>
-        </div>
-      </div>
-
-      <div class="flex p-2">
-        <div class="hidden sm:block">
-          <span class="material-icons-outlined text-5xl lg:text-6xl">watch_later</span>
-        </div>
-        <div class="px-1">
-          <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsMinutesListening }}</p>
-        </div>
-      </div>
-    </div>
-    <div class="flex flex-col md:flex-row overflow-hidden max-w-full">
-      <stats-daily-listening-chart :listening-stats="listeningStats" class="origin-top-left transform scale-75 lg:scale-100" />
-      <div class="w-80 my-6 mx-auto">
-        <div class="flex mb-4 items-center">
-          <h1 class="text-2xl font-book">{{ $strings.HeaderStatsRecentSessions }}</h1>
-          <div class="flex-grow" />
-          <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">{{ $strings.ButtonViewAll }}</ui-btn>
-        </div>
-        <p v-if="!mostRecentListeningSessions.length">{{ $strings.MessageNoListeningSessions }}</p>
-        <template v-for="(item, index) in mostRecentListeningSessions">
-          <div :key="item.id" class="w-full py-0.5">
-            <div class="flex items-center mb-1">
-              <p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
-              <div class="w-56">
-                <p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
-                <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
-              </div>
-              <div class="flex-grow" />
-              <div class="w-18 text-right">
-                <p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
+      <div class="flex flex-col md:flex-row overflow-hidden max-w-full">
+        <stats-daily-listening-chart :listening-stats="listeningStats" class="origin-top-left transform scale-75 lg:scale-100" />
+        <div class="w-80 my-6 mx-auto">
+          <div class="flex mb-4 items-center">
+            <h1 class="text-2xl font-book">{{ $strings.HeaderStatsRecentSessions }}</h1>
+            <div class="flex-grow" />
+            <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">{{ $strings.ButtonViewAll }}</ui-btn>
+          </div>
+          <p v-if="!mostRecentListeningSessions.length">{{ $strings.MessageNoListeningSessions }}</p>
+          <template v-for="(item, index) in mostRecentListeningSessions">
+            <div :key="item.id" class="w-full py-0.5">
+              <div class="flex items-center mb-1">
+                <p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
+                <div class="w-56">
+                  <p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
+                  <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
+                </div>
+                <div class="flex-grow" />
+                <div class="w-18 text-right">
+                  <p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
+                </div>
               </div>
             </div>
-          </div>
-        </template>
+          </template>
+        </div>
       </div>
-    </div>
-
-    <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" />
+      <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" />
+    </app-settings-content>
   </div>
 </template>