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 (
<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">
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 class="bg-white max-w-3xl 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 max-w-3xl rounded p-5 shadow">
<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>
<Show