update check last Histori

website/src/App.tsx

@@ -9,6 +9,7 @@ import { Histori } from "./types/Histori";
 import { Pengaturan } from "./types/Pengaturan";
 import BarsIcon from "./icons/BarsIcon";
 import AdjusmentIcon from "./icons/AdjusmentIcon";
+import BellAlert from "./icons/BellAlert";
 
 export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
   const menus = [
@@ -52,7 +53,6 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
       .from("histori_fermentasi")
       .select("*")
       .limit(1)
-      .eq("selesai", false)
       .order("created_at", { ascending: false });
 
     if (!!data) {
@@ -60,8 +60,8 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
     }
   };
 
-  const deleteAllData = async () => {
+  const fermentasiSelesai = async () => {
-    await supabase.from("pengaturan").update({ running: false }).eq("id", 1);
+    // await supabase.from("pengaturan").update({ running: false }).eq("id", 1);
     await supabase.from("kondisi_tapai").delete().neq("id", "0");
     await supabase
       .from("realtime_data")
@@ -74,9 +74,6 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
       .eq("id", 1);
 
     setLastHistori(null);
-
-    window.alert("Aksi berhasil dilakukan");
-    window.location.reload();
   };
 
   const saveHistori = async () => {
@@ -94,7 +91,7 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
       })
       .eq("id", lastHistori()?.id);
 
-    await deleteAllData();
+    await fermentasiSelesai();
   };
 
   const noSaveHistori = async () => {
@@ -103,7 +100,7 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
       .delete()
       .eq("id", lastHistori()?.id);
 
-    await deleteAllData();
+    await fermentasiSelesai();
   };
 
   const checkStatusDevice = async () => {
@@ -142,13 +139,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();
     }
   };
 
@@ -165,10 +160,16 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
       } else {
         setCanNavigate(true);
         await checkStatusDevice();
+        await checkPengaturan();
       }
     }
   };
 
+  const turnOffBuzzer = async () => {
+    await supabase.from("pengaturan").update({ buzzer_on: false }).eq("id", 1);
+    await checkPengaturan();
+  };
+
   const toggleSidebar = () => {
     setShowSidebar(!showSidebar());
   };
@@ -186,9 +187,11 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
         <div class="text-xl font-medium uppercase">
           <span class="text-primary">Ferm</span>onitor
         </div>
+        <div class="space-x-5 flex flex-row">
           <A href="/pengaturan">
             <SettingIcon class="w-6 h-6" />
           </A>
+        </div>
       </nav>
       <div class="grow relative">
         <div
@@ -219,8 +222,11 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
       </div>
 
       <Switch>
-        <Match when={!!lastHistori()}>
+        <Match when={!!lastHistori() && !lastHistori()?.selesai}>
-          <div class="bg-black bg-opacity-25 fixed top-0 left-0 right-0 bottom-0 z-[500] flex items-center justify-center p-5">
+          <div
+            class="bg-black bg-opacity-25 fixed top-0 left-0 right-0 bottom-0 z-[500] items-center justify-center p-5 hidden"
+            classList={{ "!flex": !lastHistori()?.selesai }}
+          >
             <div class="bg-white rounded shadow p-5 w-full lg:w-1/2">
               <div class="text-xl mb-5">Pemberitahuan</div>
               Fermentasi tapai telah dilakukan dengan hasil{" "}
@@ -257,6 +263,19 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
           </div>
         </Match>
       </Switch>
+      <button
+        type="button"
+        class="fixed bottom-10 right-10 transform transition flex p-2 flex-row-reverse items-center inline-block overflow-x-hidden"
+        classList={{ "!translate-x-[50vh]": !pengaturan()?.buzzer_on }}
+        onClick={turnOffBuzzer}
+      >
+        <div class="bg-blue-500 z-10 rounded-full h-18 w-18 flex items-center justify-center p-3.5 peer animate-bounce mt-3.5">
+          <BellAlert class="text-white w-8 h-8 animate-wiggle" />
+        </div>
+        <div class="bg-white rounded-full p-3.5 shadow px-8 mr-3 transform transition translate-x-[50vh] peer-hover:translate-x-0">
+          Matikan alarm buzzer
+        </div>
+      </button>
     </div>
   );
 }

website/src/icons/BellAlert.tsx

@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5"
+      />
+    </svg>
+  );
+}

website/src/icons/BellSnooze.tsx

@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M10.5 8.25h3l-3 4.5h3"
+      />
+    </svg>
+  );
+}

website/src/index.css

@@ -11,3 +11,15 @@
 .input {
     @apply border border-gray-200 rounded h-12 w-full block transition outline-none px-3;
 }
+
+.animate-wiggle {
+    animation: wiggle .35s infinite alternate-reverse;
+}
+
+@keyframes wiggle {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(20deg); }
+    50% { transform: rotate(0eg); }
+    75% { transform: rotate(-20deg); }
+    100% { transform: rotate(0deg); }
+}

website/src/types/Pengaturan.ts

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