From c3953d75230fd0a3d20920eb119856764a4d93a5 Mon Sep 17 00:00:00 2001
From: Muhammad Izza Alfiansyah <iansyah724@gmail.com>
Date: Mon, 6 May 2024 12:24:28 +0700
Subject: [PATCH] fixed website and microcontroller

---
 .../sketch_apr22a/sketch_apr22a.ino           | 10 +++--
 website/src/App.tsx                           | 10 +++--
 website/src/pages/Histori.tsx                 | 11 +++--
 website/src/pages/Index.tsx                   | 41 +++++++++++++++++--
 4 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/microcontroller/sketch_apr22a/sketch_apr22a.ino b/microcontroller/sketch_apr22a/sketch_apr22a.ino
index 7731bfe..83e9031 100644
--- a/microcontroller/sketch_apr22a/sketch_apr22a.ino
+++ b/microcontroller/sketch_apr22a/sketch_apr22a.ino
@@ -274,14 +274,16 @@ void cekKegagalan() {
   for (int i = 0; i < dataPengujian.length(); i++) {
     int epochTime = (int) dataPengujian[i]["created_time"];
     int epochTimeDiff = epochTime - epochTimeAwal;
-    int jam = epochTimeDiff / 3600;
+    int lamaJam = epochTimeDiff / 3600;
 
     float kadarGas = (double) dataPengujian[i]["kadar_gas"];
-    float regresiKadarGas = 0.0025 * pow(jam, 2.0) - 0.0397 * jam - 0.1222;
+    float regresiKadarGas = 0.0025 * pow(lamaJam, 2.0) - 0.0397 * lamaJam - 0.1222;
     float nilaiPerempat = regresiKadarGas / 4.0;
 
-    if (kadarGas > (regresiKadarGas + nilaiPerempat) || kadarGas < (regresiKadarGas - nilaiPerempat)) {
-      status = "Gagal";
+    if (lamaJam > 12) {
+      if (kadarGas > (regresiKadarGas + nilaiPerempat) || kadarGas < (regresiKadarGas - nilaiPerempat)) {
+        status = "Gagal";
+      }
     }
   }
 
diff --git a/website/src/App.tsx b/website/src/App.tsx
index f55aea5..a3c0755 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -86,7 +86,7 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
         .limit(1);
       setTimeout(() => {
         res(data);
-      }, 5000);
+      }, 10000);
     });
 
     const { data: lastData2 } = await supabase
@@ -95,11 +95,13 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
       .order("created_time", { ascending: false })
       .limit(1);
 
-    if (lastData1![0].created_time == lastData2![0].created_time) {
-      alert("Device offline!");
+    if (lastHistori()?.selesai) {
+      if (lastData1![0].created_time == lastData2![0].created_time) {
+        alert("Device offline!");
+      }
     }
 
-    // await checkStatusDevice();
+    await checkStatusDevice();
   };
 
   onMount(async () => {
diff --git a/website/src/pages/Histori.tsx b/website/src/pages/Histori.tsx
index 3d4feed..47f0894 100644
--- a/website/src/pages/Histori.tsx
+++ b/website/src/pages/Histori.tsx
@@ -29,14 +29,19 @@ export default function () {
           Menampilkan hasil fermentasi yang telah dilakukan.
         </p>
         <Table
-          headers={["Tanggal", "Lama Fermentasi", "Rentang Suhu", "Status"]}
+          headers={[
+            "Tanggal",
+            "Lama Fermentasi" /*, "Rentang Suhu"*/,
+            "Status",
+          ]}
           items={items().map((item) => [
             getDates(item.created_at),
             Math.round((item.waktu_akhir - item.waktu_awal) / 3600) + " Jam",
-            item.rentang_suhu + " C",
+            // item.rentang_suhu + " C",
             <span
               class={
-                "uppercase " + item.berhasil ? "text-green-500" : "text-red-500"
+                "uppercase " +
+                (item.berhasil ? "text-green-500" : "text-red-500")
               }
             >
               {item.berhasil ? "SUKSES" : "GAGAL"}
diff --git a/website/src/pages/Index.tsx b/website/src/pages/Index.tsx
index a9134ca..558df74 100644
--- a/website/src/pages/Index.tsx
+++ b/website/src/pages/Index.tsx
@@ -4,6 +4,7 @@ import EyeDropperIcon from "../icons/EyeDropperIcon";
 import { Chart, registerables } from "chart.js";
 import supabase from "../utils/supabase";
 import { getTimes } from "../utils/dates";
+import { Histori } from "../types/Histori";
 
 export default function () {
   let canvas: any;
@@ -13,6 +14,21 @@ export default function () {
   const [kadarGas, setKadarGas] = createSignal<number[]>([]);
   const [timeStamps, setTimeStamps] = createSignal<any[]>([]);
 
+  const [lastHistori, setLastHistori] = createSignal<Histori | null>(null);
+
+  const getLastHistori = async () => {
+    const { data } = await supabase
+      .from("histori_fermentasi")
+      .select("*")
+      .limit(1)
+      .eq("selesai", false)
+      .order("created_at", { ascending: false });
+
+    if (!!data) {
+      setLastHistori(data[0]);
+    }
+  };
+
   const getData = async () => {
     const { data } = await supabase
       .from("kondisi_tapai")
@@ -107,12 +123,14 @@ export default function () {
 
     setTimeout(async () => {
       await renderChart();
-    }, 1000);
+      await getLastHistori();
+    }, 4000);
   };
 
   onMount(async () => {
     Chart.register(...registerables);
-    renderChart();
+    await renderChart();
+    await getLastHistori();
   });
 
   return (
@@ -129,8 +147,23 @@ export default function () {
       </Show>
       <div class={"space-y-5" + (kadarGas().length > 0 ? "" : "hidden")}>
         <div class="flex flex-wrap gap-5">
-          <div class="bg-red-500 lg:w-1/2 w-full h-52 rounded shadow text-white flex items-center justify-center">
-            <div class="uppercase text-3xl">belum matang</div>
+          <div
+            class={
+              (lastHistori()?.selesai == false
+                ? lastHistori()?.berhasil
+                  ? "bg-green-500"
+                  : "bg-red-500"
+                : "bg-orange-500") +
+              " lg:w-1/2 w-full h-52 rounded shadow text-white flex items-center justify-center"
+            }
+          >
+            <div class="uppercase text-3xl">
+              {lastHistori()?.selesai == false
+                ? lastHistori()?.berhasil
+                  ? "Matang"
+                  : "Gagal"
+                : "Menunggu"}
+            </div>
           </div>
           <div class="grid grid-cols-2 grow gap-5 ">
             <div class="bg-white rounded shadow min-h-24 flex flex-col items-center justify-center py-8">