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

change ui kontrol page

This commit is contained in:
Muhammad Izza Alfiansyah 2024-07-09 10:21:59 +07:00
parent 9759a60380
commit 09cd091ba2
1 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,48 +55,46 @@ export default function () {
return ( return (
<div class="space-y-5"> <div class="space-y-5">
<div class="grid lg:grid-cols-2 gap-5"> <div class="bg-white max-w-3xl shadow p-5 rounded">
<div class="bg-white shadow p-5 rounded"> <div class="text-xl">Kontrol Alarm</div>
<div class="text-xl">Kontrol Alarm</div> <p class="text-sm">Matikan buzzer alarm setelah selang waktu</p>
<p class="text-sm">Matikan buzzer alarm setelah selang waktu</p> <select
<select value={parseInt(req()?.buzzer_timer as any)}
value={parseInt(req()?.buzzer_timer as any)} onChange={(e) => {
onChange={(e) => { console.log(e.currentTarget.value);
console.log(e.currentTarget.value); handleReqChange("buzzer_timer", e.currentTarget.value);
handleReqChange("buzzer_timer", e.currentTarget.value); handleSubmit();
handleSubmit(); }}
}} class="input max-w-xl mt-3"
class="input max-w-xl mt-3" >
> <option value="15">15 detik</option>
<option value="15">15 detik</option> <option value="30">30 detik</option>
<option value="30">30 detik</option> <option value="60">1 menit</option>
<option value="60">1 menit</option> <option value={(60 * 2).toString()}>2 menit</option>
<option value={(60 * 2).toString()}>2 menit</option> <option value={(60 * 5).toString()}>5 menit</option>
<option value={(60 * 5).toString()}>5 menit</option> </select>
</select> </div>
</div> <div class="bg-white max-w-3xl rounded p-5 shadow">
<div class="bg-white rounded p-5 shadow"> <div class="text-xl">Kontrol Alat</div>
<div class="text-xl">Kontrol Alat</div> <p class="text-sm">
<p class="text-sm"> Atur pengendalian suhu secara otomatis atau secara manual
Atur pengendalian suhu secara otomatis atau secara manual </p>
</p> <div class="mt-3">
<div class="mt-3"> <label class="inline-flex items-center cursor-pointer mt-2">
<label class="inline-flex items-center cursor-pointer mt-2"> <input
<input type="checkbox"
type="checkbox" checked={req()?.auto}
checked={req()?.auto} onChange={(e) => {
onChange={(e) => { handleReqChange("auto", e.currentTarget.checked);
handleReqChange("auto", e.currentTarget.checked); handleSubmit();
handleSubmit(); }}
}} class="sr-only peer"
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>
<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">
<span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"> {req()?.auto ? "Otomatis" : "Manual"}
{req()?.auto ? "Otomatis" : "Manual"} </span>
</span> </label>
</label>
</div>
</div> </div>
</div> </div>
<Show <Show