get data for pengujian page

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={[
+          items={items().map((item) => [
-            ["23 Maret 2024", "08:00", "20%", "35 C", "50%"],
+            getDates(item.created_at),
-            ["23 Maret 2024", "14:00", "23%", "35 C", "60%"],
+            getTimes(item.created_at).slice(0, 5),
-            ["23 Maret 2024", "20:00", "23%", "35 C", "65%"],
+            item.kadar_gas + "%",
-            ["24 Maret 2024", "02:00", "23%", "35 C", "65%"],
+            item.suhu + " C",
-          ]}
+            item.kelembaban + "%",
+          ])}
         ></Table>
       </div>
     </div>

website/src/types/KondisiTapai.ts

@@ -0,0 +1,7 @@
+export interface KondisiTapai {
+    id: number;
+    suhu: number;
+    kelembaban: number;
+    kadar_gas: number;
+    created_at: Date;
+  }

website/src/utils/dates.ts

@@ -9,3 +9,14 @@ export function getTimes(date: any = null) {
 
     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;
+}