From 51350d39493088948fb2c755c5d6e1fb51909ce8 Mon Sep 17 00:00:00 2001
From: Eivind Dalholt <eividalh@stud.ntnu.no>
Date: Sat, 7 Dec 2024 15:11:03 +0100
Subject: [PATCH] feat: add records to back of card

---
 frontend/src/App.svelte                |   1 +
 frontend/src/lib/CoffeeStatsBox.svelte | 112 +++++++++++++++++--------
 frontend/src/lib/MostBrewed.svelte     |  50 +++++++++++
 3 files changed, 128 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/lib/MostBrewed.svelte

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index bf96cb6..007c5f5 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -50,5 +50,6 @@
     flex-wrap: wrap;
     align-items: center;
     gap: 2em;
+    text-align: center;
   }
 </style>
diff --git a/frontend/src/lib/CoffeeStatsBox.svelte b/frontend/src/lib/CoffeeStatsBox.svelte
index ba5ad0f..ef924e8 100644
--- a/frontend/src/lib/CoffeeStatsBox.svelte
+++ b/frontend/src/lib/CoffeeStatsBox.svelte
@@ -1,66 +1,108 @@
 <script lang="ts">
   import LastCoffee from "./LastCoffee.svelte";
   import LitersThisYear from "./LitersThisYear.svelte";
+  import MostBrewed from "./MostBrewed.svelte";
 </script>
 
-<div class="info-box">
-  <div class="section">
-    <h4 class="title">Since last brew:</h4>
-    <h4 class="content">
-      <LastCoffee />
-    </h4>
-  </div>
+<div class="card-container">
+  <div class="card">
+    <!-- Front of the card -->
+    <div class="card-front">
+      <div class="info-box">
+        <div class="section">
+          <h4 class="title">Since last brew:</h4>
+          <h4 class="content">
+            <LastCoffee />
+          </h4>
+        </div>
+
+        <div class="section">
+          <h4 class="title">Liters brewed this semester</h4>
+          <h4 class="content">
+            <LitersThisYear />
+          </h4>
+        </div>
+      </div>
+    </div>
 
-  <div class="section">
-    <h4 class="title">Liters brewed this semester</h4>
-    <h4 class="content">
-      <LitersThisYear />
-    </h4>
-    <!-- <h6 class="notice">(Logging started 30.08)</h6> -->
+    <!-- Back of the card -->
+    <div class="card-back">
+      <div class="info-box">
+        <p class="content">
+          <MostBrewed />
+        </p>
+      </div>
+    </div>
   </div>
 </div>
 
 <style>
-  .info-box {
-    padding: 1em;
-    margin-bottom: 1.5em;
-    background-color: rgba(45, 55, 72, 0.95);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
+  .card-container {
+    perspective: 1000px;
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .card {
+    position: relative;
     width: 100%;
     max-width: 400px;
+    min-height: 200px;
+    transform-style: preserve-3d;
+    transition: transform 0.6s;
     box-shadow:
       0 8px 20px rgba(0, 0, 0, 0.3),
-      0 1px 3px rgba(255, 255, 255, 0.05);
-    transition:
-      transform 0.3s ease,
-      box-shadow 0.3s ease,
-      background-color 0.3s ease;
+      0 1px 3px rgba(255, 255, 255, 0.0005);
+    border-radius: 30px;
   }
 
-  .info-box:hover {
-    background-color: rgba(35, 40, 50, 1);
-    transform: translateY(-6px);
-    box-shadow:
-      0 12px 30px rgba(0, 0, 0, 0.5),
-      0 2px 4px rgba(255, 255, 255, 0.1);
+  .card-container:hover .card {
+    transform: rotateY(180deg);
+  }
+
+  .card-front,
+  .card-back {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    border-radius: 10px;
+    padding: 1em;
+    box-sizing: border-box;
+    display: grid;
+    place-items: center;
+    background-color: rgba(45, 55, 72, 0.95);
   }
+
+  .card-back {
+    transform: rotateY(180deg);
+  }
+
   .title {
     color: #e2e2e2;
-    margin-bottom: 0.5em;
     font-size: 1rem;
     font-weight: 600;
   }
 
+  .section {
+    line-height: 0.5;
+  }
+
   .content {
     color: #e2e8f0;
     font-size: 1.2rem;
     font-weight: 500;
   }
 
-  .notice {
-    color: #a0aec0;
-    font-size: 0.8rem;
-    margin-top: 0.5em;
+  @media (max-width: 600px) {
+    .card {
+      max-width: 80%;
+    }
   }
 </style>
diff --git a/frontend/src/lib/MostBrewed.svelte b/frontend/src/lib/MostBrewed.svelte
new file mode 100644
index 0000000..b22da9b
--- /dev/null
+++ b/frontend/src/lib/MostBrewed.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import axios from "axios";
+  import { onMount } from "svelte";
+
+  let data = null;
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    const day = date.getDate();
+    const month = date.toLocaleString("default", { month: "long" });
+    const year = date.getFullYear();
+    return `${day}. ${month} ${year}`;
+  };
+
+  onMount(async () => {
+    const res = await axios.get("/coffee/records");
+    data = await res.data;
+  });
+</script>
+
+{#if data}
+  <div>
+    <p>Overall brew record</p>
+    <p>
+      <strong>{formatDate(data.overall.date)}</strong><br />
+      <strong>{data.overall.liters.toFixed(0)} liters</strong>
+    </p>
+    <p>
+      This month<br />
+      <strong>{data.thisMonth.liters.toFixed(0)} liters</strong>
+    </p>
+  </div>
+{:else}
+  <p>Loading...</p>
+{/if}
+
+<style>
+  p {
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
+  div {
+    padding: 8px;
+  }
+</style>