change created_at to epoch created_time

website/src/pages/Histori.tsx

@@ -32,9 +32,7 @@ export default function () {
           headers={["Tanggal", "Lama Fermentasi", "Rentang Suhu", "Status"]}
           items={items().map((item) => [
             getDates(item.created_at),
-            Math.round(
-              getTimeDiff(item.waktu_awal, item.waktu_akhir) / (1000 * 60 * 60)
-            ) + " Jam",
+            Math.round((item.waktu_akhir - item.waktu_awal) / 3600) + " Jam",
             item.rentang_suhu + " C",
             <span
               class={

website/src/pages/Index.tsx

@@ -17,7 +17,7 @@ export default function () {
     const { data } = await supabase
       .from("kondisi_tapai")
       .select("*")
-      .order("created_at", { ascending: false })
+      .order("created_time", { ascending: false })
       .limit(10);
 
     if (data != null && data.length > 0) {
@@ -30,12 +30,12 @@ export default function () {
 
       data.forEach((item) => {
         setKadarGas((val) => {
-          val.push(item.kadar_gas);
+          val.push(item.kadar_gas.toString().slice(0, 4));
           return val;
         });
 
         setTimeStamps((val) => {
-          val.push(getTimes(item.created_at));
+          val.push(getTimes(item.created_time));
           return val;
         });
       });
@@ -88,7 +88,7 @@ export default function () {
                 text: "Nilai",
               },
               min: 0,
-              max: 50,
+              max: 10,
             },
           },
         },
@@ -135,11 +135,15 @@ export default function () {
           <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">
               <EyeDropperIcon class="w-12 h-12 inline-block" />
-              <div class="text-3xl mt-5">{suhu()} °C</div>
+              <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()} %</div>
+              <div class="text-3xl mt-5">
+                {kelembaban().toString().slice(0, 4)} %
+              </div>
             </div>
           </div>
         </div>

website/src/pages/Pengujian.tsx

@@ -12,11 +12,9 @@ export default function () {
       .from("kondisi_tapai")
       .select("*")
       .eq("pengujian", true)
-      .order("created_at", { ascending: false });
+      .order("created_time", { ascending: false });
 
     setItems(data as KondisiTapai[]);
-
-    console.log(items());
   };
 
   onMount(async () => {
@@ -40,11 +38,11 @@ export default function () {
           class="my-5"
           headers={["Tanggal", "Jam", "Kadar Gas", "Suhu", "Kelembaban"]}
           items={items().map((item) => [
-            getDates(item.created_at),
-            getTimes(item.created_at).slice(0, 5),
-            item.kadar_gas + "%",
-            item.suhu + " C",
-            item.kelembaban + "%",
+            getDates(item.created_time),
+            getTimes(item.created_time).slice(0, 5),
+            item.kadar_gas.toString().slice(0, 4) + " %",
+            item.suhu.toString().slice(0, 4) + " C",
+            item.kelembaban.toString().slice(0, 4) + " %",
           ])}
         ></Table>
       </div>

website/src/types/Histori.ts

@@ -1,7 +1,7 @@
 export interface Histori {
     id: number;
-    waktu_awal: string;
-    waktu_akhir: string;
+    waktu_awal: number;
+    waktu_akhir: number;
     rentang_suhu: string;
     berhasil: boolean;
     created_at: string;

website/src/types/KondisiTapai.ts

@@ -3,5 +3,5 @@ export interface KondisiTapai {
     suhu: number;
     kelembaban: number;
     kadar_gas: number;
-    created_at: string;
+    created_time: number;
   }

website/src/utils/dates.ts

@@ -1,5 +1,5 @@
-export function getTimes(date: any = null) {
-    const dates = !!date ? new Date(date) : new Date();
+export function getTimes(epochtime: any = null) {
+    const dates = !!epochtime ? new Date(epochtime * 1000 - 7000 * 3600) : new Date();
 
     const hour = dates.getHours() < 10 ? '0' + dates.getHours() : dates.getHours();
     const minute = dates.getMinutes() < 10 ? '0' + dates.getMinutes() : dates.getMinutes();
@@ -10,8 +10,8 @@ export function getTimes(date: any = null) {
     return his;
 }
 
-export function getDates(date: any = null) {
-    const dates = !!date ? new Date(date) : new Date();
+export function getDates(epochtime: any = null) {
+    const dates = !!epochtime ? new Date((typeof epochtime == 'number') ? epochtime * 1000 - 7000 * 3600 : epochtime) : new Date();
 
     const bulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];