izzaalfiansyah
/
TKK_E32211868
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

renewing ui ux dashboard page

This commit is contained in:
Muhammad Izza Alfiansyah 2024-07-08 17:20:26 +07:00
parent fb82faa477
commit 1364b1b5a3
4 changed files with 158 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
website/src/App.tsx
View File

@ -142,11 +142,11 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
// .order("created_time", { ascending: false })
// .limit(1);
if (lastData1![0] == lastData2![0]) {
alert("Device offline!");
} else if (lastData1![0].created_time == lastData2![0].created_time) {
alert("Device offline!");
}
// if (lastData1![0] == lastData2![0]) {
// alert("Device offline!");
// } else if (lastData1![0].created_time == lastData2![0].created_time) {
// 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);

107
website/src/pages/Index.tsx
View File

@ -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") +
" lg:w-1/2 w-full h-52 rounded shadow text-white flex items-center justify-center"
: "bg-orange-500") + " rounded shadow text-white p-10"
}
>
<div class="uppercase text-3xl">
<div class="text-3xl">
Status Fermentasi:{" "}
<span class="font-semibold">
{lastHistori()?.selesai == false
? lastHistori()?.berhasil
? "Matang"
: "Gagal"
: "Menunggu"}
</span>
</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">
<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 class="mt-1">
<div class="text-base">Waktu Berlalu : {lamaJam()} jam</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>

47
website/src/pages/Kontrol.tsx
View File

@ -40,19 +40,47 @@ 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="grid lg:grid-cols-2 gap-5">
<div class="bg-white shadow p-5 rounded">
<div class="text-xl">Kontrol Alarm</div>
<p class="text-sm">Matikan buzzer alarm setelah selang waktu</p>
<select
value={parseInt(req()?.buzzer_timer as any)}
onChange={(e) => {
console.log(e.currentTarget.value);
handleReqChange("buzzer_timer", e.currentTarget.value);
handleSubmit();
}}
class="input max-w-xl mt-3"
>
<option value="15">15 detik</option>
<option value="30">30 detik</option>
<option value="60">1 menit</option>
<option value={(60 * 2).toString()}>2 menit</option>
<option value={(60 * 5).toString()}>5 menit</option>
</select>
</div>
<div class="bg-white rounded p-5 shadow">
<div class="text-xl">Kontrol Alat</div>
<p class="text-sm">
Pemilik bisa mengatur environment untuk pengendalian suhu secara
otomatis atau secara manual
Atur pengendalian suhu secara otomatis atau secara manual
</p>
<div class="my-5">
<div class="mt-3">
<label class="inline-flex items-center cursor-pointer mt-2">
<input
type="checkbox"
@ -70,6 +98,7 @@ export default function () {
</label>
</div>
</div>
</div>
<Show
when={req()?.auto}
fallback={
@ -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) => (
<option value={i + 30}>{i + 30}</option>
{getSuhu().map((i) => (
<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) => (
<option value={i + 30}>{i + 30}</option>
{getSuhu().map((i) => (
<option value={i}>{i}</option>
))}
</select>
</div>

1
website/src/types/Pengaturan.ts
View File

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