From 60557e40941765724b2ade012ed4c2d082a5839f Mon Sep 17 00:00:00 2001
From: Muhammad Izza Alfiansyah <iansyah724@gmail.com>
Date: Fri, 19 Apr 2024 20:00:16 +0700
Subject: [PATCH] add histori fermentasi

---
 website/src/pages/Histori.tsx     | 60 +++++++++++++++++--------------
 website/src/types/Histori.ts      |  9 +++++
 website/src/types/KondisiTapai.ts |  2 +-
 website/src/utils/dates.ts        |  9 +++++
 4 files changed, 53 insertions(+), 27 deletions(-)
 create mode 100644 website/src/types/Histori.ts

diff --git a/website/src/pages/Histori.tsx b/website/src/pages/Histori.tsx
index e52f5f9..e510119 100644
--- a/website/src/pages/Histori.tsx
+++ b/website/src/pages/Histori.tsx
@@ -1,6 +1,26 @@
+import { createSignal, onMount } from "solid-js";
 import Table from "../components/Table";
+import { Histori } from "../types/Histori";
+import supabase from "../utils/supabase";
+import { getDates, getTimeDiff } from "../utils/dates";
 
 export default function () {
+  const [items, setItems] = createSignal<Histori[]>([]);
+
+  const getData = async () => {
+    const { data } = await supabase
+      .from("histori_fermentasi")
+      .select("*")
+      .order("created_at", { ascending: false })
+      .range(0, 10);
+
+    setItems(data as Histori[]);
+  };
+
+  onMount(async () => {
+    await getData();
+  });
+
   return (
     <div class="space-y-5">
       <div class="bg-white rounded p-5 shadow">
@@ -10,32 +30,20 @@ export default function () {
         </p>
         <Table
           headers={["Tanggal", "Lama Fermentasi", "Rentang Suhu", "Status"]}
-          items={[
-            [
-              "24 Maret 2024",
-              "32 Jam",
-              "35 - 40 C",
-              <span class="uppercase text-green-500">SUKSES</span>,
-            ],
-            [
-              "23 Maret 2024",
-              "6 Jam",
-              "25- 35 C",
-              <span class="uppercase text-red-500">GAGAL</span>,
-            ],
-            [
-              "22 Maret 2024",
-              "24 Jam",
-              "30 - 40 C",
-              <span class="uppercase text-green-500">SUKSES</span>,
-            ],
-            [
-              "24 Maret 2024",
-              "24 Jam",
-              "30 - 40 C",
-              <span class="uppercase text-green-500">SUKSES</span>,
-            ],
-          ]}
+          items={items().map((item) => [
+            getDates(item.created_at),
+            Math.round(
+              getTimeDiff(item.waktu_awal, item.waktu_akhir) / (1000 * 60 * 60)
+            ) + " Jam",
+            item.rentang_suhu + " C",
+            <span
+              class={
+                "uppercase " + item.berhasil ? "text-green-500" : "text-red-500"
+              }
+            >
+              {item.berhasil ? "SUKSES" : "GAGAL"}
+            </span>,
+          ])}
           class="my-5"
         ></Table>
       </div>
diff --git a/website/src/types/Histori.ts b/website/src/types/Histori.ts
new file mode 100644
index 0000000..f13b3c8
--- /dev/null
+++ b/website/src/types/Histori.ts
@@ -0,0 +1,9 @@
+export interface Histori {
+    id: number;
+    waktu_awal: string;
+    waktu_akhir: string;
+    rentang_suhu: string;
+    berhasil: boolean;
+    created_at: string;
+    selesai: boolean;
+}
\ No newline at end of file
diff --git a/website/src/types/KondisiTapai.ts b/website/src/types/KondisiTapai.ts
index 45cd4db..6a93e11 100644
--- a/website/src/types/KondisiTapai.ts
+++ b/website/src/types/KondisiTapai.ts
@@ -3,5 +3,5 @@ export interface KondisiTapai {
     suhu: number;
     kelembaban: number;
     kadar_gas: number;
-    created_at: Date;
+    created_at: string;
   }
\ No newline at end of file
diff --git a/website/src/utils/dates.ts b/website/src/utils/dates.ts
index 9163a71..690cdb7 100644
--- a/website/src/utils/dates.ts
+++ b/website/src/utils/dates.ts
@@ -19,4 +19,13 @@ export function getDates(date: any = null) {
     const month = bulan[dates.getMonth()];
 
     return dates.getDate() + ' ' + month + ' ' + year;
+}
+
+export function getTimeDiff(firstDate: string, lastDate: string) {
+    const date_awal = new Date(firstDate);
+    const date_akhir = new Date(lastDate);
+
+    const date_diff = date_akhir.getTime() - date_awal.getTime();
+    
+    return date_diff;
 }
\ No newline at end of file