renewing ui ux dashboard page

website/src/App.tsx

@@ -142,11 +142,11 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
       //   .order("created_time", { ascending: false })
       //   .limit(1);
 
-      if (lastData1![0] == lastData2![0]) {
+      // if (lastData1![0] == lastData2![0]) {
-        alert("Device offline!");
+      //   alert("Device offline!");
-      } else if (lastData1![0].created_time == lastData2![0].created_time) {
+      // } else if (lastData1![0].created_time == lastData2![0].created_time) {
-        alert("Device offline!");
+      //   alert("Device offline!");
-      }
+      // }
 
       await checkStatusDevice();
     }
@@ -160,7 +160,7 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
 
       if (!item.running) {
         if (location.pathname != "/") {
-          navigate("/");
+          // navigate("/");
         }
       } else {
         setCanNavigate(true);

website/src/pages/Index.tsx

@@ -14,6 +14,7 @@ export default function () {
   const [kelembaban, setKelembaban] = createSignal<number>(0);
   const [kadarGas, setKadarGas] = createSignal<number[]>([]);
   const [timeStamps, setTimeStamps] = createSignal<any[]>([]);
+  const [lamaJam, setLamaJam] = createSignal<number>();
 
   const [lastHistori, setLastHistori] = createSignal<Histori | null>(null);
   const [pengaturan, setPengaturan] = createSignal<Pengaturan | null>(null);
@@ -31,6 +32,37 @@ export default function () {
     }
   };
 
+  const getLamaFermentasi = async () => {
+    const { data: dataAwals } = await supabase
+      .from("kondisi_tapai")
+      .select("created_time")
+      .limit(1)
+      .order("created_time", { ascending: true });
+
+    const { data: dataAkhirs } = await supabase
+      .from("kondisi_tapai")
+      .select("created_time")
+      .limit(1)
+      .order("created_time", { ascending: false });
+
+    type CData = {
+      created_time: number;
+    };
+
+    let lama = 0;
+
+    console.log(dataAwals);
+
+    if (dataAwals?.length) {
+      const dataAwal: CData = dataAwals![0];
+      const dataAkhir: CData = dataAkhirs![0];
+
+      lama = dataAkhir.created_time - dataAwal.created_time;
+    }
+
+    setLamaJam(Math.round(lama / 3600));
+  };
+
   const getData = async () => {
     const { data } = await supabase
       .from("realtime_data")
@@ -130,10 +162,24 @@ export default function () {
               display: true,
               title: {
                 display: true,
-                text: "Nilai",
+                text: "Kadar Gas Alkohol",
               },
               min: 0,
               max: 10,
+              ticks: {
+                callback: (val) => {
+                  return val + "%";
+                },
+              },
+            },
+          },
+          plugins: {
+            tooltip: {
+              callbacks: {
+                label(tooltipItem) {
+                  return "Kadar Gas: " + tooltipItem.parsed.y + "%";
+                },
+              },
             },
           },
         },
@@ -152,6 +198,7 @@ export default function () {
 
     setTimeout(async () => {
       await renderChart();
+      await getLamaFermentasi();
       await getLastHistori();
     }, 4000);
   };
@@ -192,6 +239,7 @@ export default function () {
     await getPengaturan();
     Chart.register(...registerables);
     await renderChart();
+    await getLamaFermentasi();
     await getLastHistori();
   });
 
@@ -224,40 +272,32 @@ export default function () {
           </div>
         </Show>
         <div class={"space-y-5" + (kadarGas().length > 0 ? "" : "hidden")}>
-          <div class="flex flex-wrap gap-5 mb-5">
+          <div class="mb-5">
             <div
               class={
                 (lastHistori()?.selesai == false
                   ? lastHistori()?.berhasil
                     ? "bg-green-500"
                     : "bg-red-500"
-                  : "bg-orange-500") +
+                  : "bg-orange-500") + " rounded shadow text-white p-10"
-                " lg:w-1/2 w-full h-52 rounded shadow text-white flex items-center justify-center"
               }
             >
-              <div class="uppercase text-3xl">
+              <div class="text-3xl">
-                {lastHistori()?.selesai == false
+                Status Fermentasi:{" "}
-                  ? lastHistori()?.berhasil
+                <span class="font-semibold">
-                    ? "Matang"
+                  {lastHistori()?.selesai == false
-                    : "Gagal"
+                    ? lastHistori()?.berhasil
-                  : "Menunggu"}
+                      ? "Matang"
+                      : "Gagal"
+                    : "Menunggu"}
+                </span>
               </div>
-            </div>
+              <div class="mt-1">
-            <div class="grid grid-cols-2 grow gap-5 ">
+                <div class="text-base">Waktu Berlalu : {lamaJam()} jam</div>
-              <div class="bg-white rounded shadow min-h-24 flex flex-col items-center justify-center py-8">
-                <EyeDropperIcon class="w-12 h-12 inline-block" />
-                <div class="text-3xl mt-5">
-                  {suhu().toString().slice(0, 4)} °C
-                </div>
-              </div>
-              <div class="bg-white rounded shadow min-h-24 flex flex-col items-center justify-center py-8">
-                <BeakerIcon class="w-12 h-12 inline-block" />
-                <div class="text-3xl mt-5">
-                  {kelembaban().toString().slice(0, 4)} %
-                </div>
               </div>
             </div>
           </div>
+
           <div class="bg-white rounded p-5 shadow mb-5">
             Terjadi kesalahan dan ingin membatalkan fermentasi? Klik di{" "}
             <a
@@ -268,9 +308,40 @@ export default function () {
               sini
             </a>
           </div>
+
+          <div class="grid lg:grid-cols-2 grow gap-5 mb-5">
+            <div class="bg-white rounded shadow min-h-24 flex flex-row items-center gap-5 p-5">
+              <div class="p-3 rounded bg-yellow-400">
+                <EyeDropperIcon class="w-12 h-12 inline-block text-white" />
+              </div>
+              <div>
+                <div class="text-base">Temperatur</div>
+                <div class="text-3xl mt-2">
+                  {suhu().toString().slice(0, 4)} C
+                </div>
+              </div>
+            </div>
+            <div class="bg-white rounded shadow min-h-24 flex flex-row items-center gap-5 p-5">
+              <div class="p-3 rounded bg-blue-400">
+                <BeakerIcon class="w-12 h-12 inline-block text-white" />
+              </div>
+              <div>
+                <div class="text-base">Kelembaban</div>
+                <div class="text-3xl mt-2">
+                  {kelembaban().toString().slice(0, 4)} %
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="bg-white rounded shadow p-5">
             <div class="text-xl">Grafik Kadar Gas</div>
             <canvas ref={canvas} style={{ "max-height": "400px" }}></canvas>
+            <div
+              class="text-sm text-center -mt-4"
+              style={{ "font-family": "Arial" }}
+            >
+              Waktu Fermentasi
+            </div>
           </div>
         </div>
       </div>

website/src/pages/Kontrol.tsx

@@ -40,34 +40,63 @@ export default function () {
     await getData();
   };
 
+  const getSuhu = () => {
+    let suhu = [];
+    for (let i = 30; i <= 40; i++) {
+      suhu.push(i);
+    }
+
+    return suhu;
+  };
+
   onMount(async () => {
     await getData();
   });
 
   return (
     <div class="space-y-5">
-      <div class="bg-white rounded p-5 shadow">
+      <div class="grid lg:grid-cols-2 gap-5">
-        <div class="text-xl">Kontrol Alat</div>
+        <div class="bg-white shadow p-5 rounded">
-        <p class="text-sm">
+          <div class="text-xl">Kontrol Alarm</div>
-          Pemilik bisa mengatur environment untuk pengendalian suhu secara
+          <p class="text-sm">Matikan buzzer alarm setelah selang waktu</p>
-          otomatis atau secara manual
+          <select
-        </p>
+            value={parseInt(req()?.buzzer_timer as any)}
-        <div class="my-5">
+            onChange={(e) => {
-          <label class="inline-flex items-center cursor-pointer mt-2">
+              console.log(e.currentTarget.value);
-            <input
+              handleReqChange("buzzer_timer", e.currentTarget.value);
-              type="checkbox"
+              handleSubmit();
-              checked={req()?.auto}
+            }}
-              onChange={(e) => {
+            class="input max-w-xl mt-3"
-                handleReqChange("auto", e.currentTarget.checked);
+          >
-                handleSubmit();
+            <option value="15">15 detik</option>
-              }}
+            <option value="30">30 detik</option>
-              class="sr-only peer"
+            <option value="60">1 menit</option>
-            />
+            <option value={(60 * 2).toString()}>2 menit</option>
-            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+            <option value={(60 * 5).toString()}>5 menit</option>
-            <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+          </select>
-              {req()?.auto ? "Otomatis" : "Manual"}
+        </div>
-            </span>
+        <div class="bg-white rounded p-5 shadow">
-          </label>
+          <div class="text-xl">Kontrol Alat</div>
+          <p class="text-sm">
+            Atur pengendalian suhu secara otomatis atau secara manual
+          </p>
+          <div class="mt-3">
+            <label class="inline-flex items-center cursor-pointer mt-2">
+              <input
+                type="checkbox"
+                checked={req()?.auto}
+                onChange={(e) => {
+                  handleReqChange("auto", e.currentTarget.checked);
+                  handleSubmit();
+                }}
+                class="sr-only peer"
+              />
+              <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+              <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+                {req()?.auto ? "Otomatis" : "Manual"}
+              </span>
+            </label>
+          </div>
         </div>
       </div>
       <Show
@@ -128,13 +157,13 @@ export default function () {
                   <select
                     value={req()?.suhu_min}
                     onChange={(e) => {
-                      handleReqChange("suhu_min", e.target.value);
+                      handleReqChange("suhu_min", e.currentTarget.value);
                       handleSubmit();
                     }}
                     class="input"
                   >
-                    {Array.from({ length: 11 }).map((_, i) => (
+                    {getSuhu().map((i) => (
-                      <option value={i + 30}>{i + 30}</option>
+                      <option value={i}>{i}</option>
                     ))}
                   </select>
                 </div>
@@ -143,13 +172,13 @@ export default function () {
                   <select
                     value={req()?.suhu_max}
                     onChange={(e) => {
-                      handleReqChange("suhu_max", e.target.value);
+                      handleReqChange("suhu_max", e.currentTarget.value);
                       handleSubmit();
                     }}
                     class="input"
                   >
-                    {Array.from({ length: 11 }).map((_, i) => (
+                    {getSuhu().map((i) => (
-                      <option value={i + 30}>{i + 30}</option>
+                      <option value={i}>{i}</option>
                     ))}
                   </select>
                 </div>

website/src/types/Pengaturan.ts

@@ -8,4 +8,5 @@ export interface Pengaturan {
     auto: boolean;
     fan_on: boolean;
     lamp_on: boolean;
+    buzzer_timer: number;
 }