From a703ba816fdb7f497753b6cc081443faa84fcfda Mon Sep 17 00:00:00 2001
From: Muhammad Izza Alfiansyah <iansyah724@gmail.com>
Date: Mon, 15 Apr 2024 19:10:22 +0700
Subject: [PATCH] get data for pengujian page

---
 website/src/pages/Pengujian.tsx   | 35 +++++++++++++++++++++++++------
 website/src/types/KondisiTapai.ts |  7 +++++++
 website/src/utils/dates.ts        | 11 ++++++++++
 3 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 website/src/types/KondisiTapai.ts

diff --git a/website/src/pages/Pengujian.tsx b/website/src/pages/Pengujian.tsx
index 7351a39..0f60429 100644
--- a/website/src/pages/Pengujian.tsx
+++ b/website/src/pages/Pengujian.tsx
@@ -1,6 +1,28 @@
+import { createSignal, onMount } from "solid-js";
 import Table from "../components/Table";
+import supabase from "../utils/supabase";
+import { KondisiTapai } from "../types/KondisiTapai";
+import { getDates, getTimes } from "../utils/dates";
 
 export default function () {
+  const [items, setItems] = createSignal<KondisiTapai[]>([]);
+
+  const getData = async () => {
+    const { data } = await supabase
+      .from("kondisi_tapai")
+      .select("*")
+      .eq("pengujian", true)
+      .order("created_at", { ascending: false });
+
+    setItems(data as KondisiTapai[]);
+
+    console.log(items());
+  };
+
+  onMount(async () => {
+    await getData();
+  });
+
   return (
     <div class="space-y-5">
       <div class="bg-white rounded shadow p-5">
@@ -17,12 +39,13 @@ export default function () {
         <Table
           class="my-5"
           headers={["Tanggal", "Jam", "Kadar Gas", "Suhu", "Kelembaban"]}
-          items={[
-            ["23 Maret 2024", "08:00", "20%", "35 C", "50%"],
-            ["23 Maret 2024", "14:00", "23%", "35 C", "60%"],
-            ["23 Maret 2024", "20:00", "23%", "35 C", "65%"],
-            ["24 Maret 2024", "02:00", "23%", "35 C", "65%"],
-          ]}
+          items={items().map((item) => [
+            getDates(item.created_at),
+            getTimes(item.created_at).slice(0, 5),
+            item.kadar_gas + "%",
+            item.suhu + " C",
+            item.kelembaban + "%",
+          ])}
         ></Table>
       </div>
     </div>
diff --git a/website/src/types/KondisiTapai.ts b/website/src/types/KondisiTapai.ts
new file mode 100644
index 0000000..45cd4db
--- /dev/null
+++ b/website/src/types/KondisiTapai.ts
@@ -0,0 +1,7 @@
+export interface KondisiTapai {
+    id: number;
+    suhu: number;
+    kelembaban: number;
+    kadar_gas: number;
+    created_at: Date;
+  }
\ No newline at end of file
diff --git a/website/src/utils/dates.ts b/website/src/utils/dates.ts
index 0e1e2ec..9163a71 100644
--- a/website/src/utils/dates.ts
+++ b/website/src/utils/dates.ts
@@ -8,4 +8,15 @@ export function getTimes(date: any = null) {
     const his = hour + ":" + minute + ":" + second;
 
     return his;
+}
+
+export function getDates(date: any = null) {
+    const dates = !!date ? new Date(date) : new Date();
+
+    const bulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+
+    const year = dates.getFullYear();
+    const month = bulan[dates.getMonth()];
+
+    return dates.getDate() + ' ' + month + ' ' + year;
 }
\ No newline at end of file