1
1
<section id =" formulir-pangan" >
2
- <div class =" overflow-x-auto shadow-lg rounded- " >
2
+ <div class =" rounded- overflow-x-auto shadow-lg" >
3
3
<table class =" w-full border-collapse bg-transparent" >
4
4
<thead >
5
5
<tr class =" bg-green-dark" >
6
- <th class =" px-6 py-4 text-left text-white font-semibold" >
6
+ <th class =" px-6 py-4 text-left font-semibold text-white " >
7
7
Jenis Pangan
8
8
</th >
9
- <th class =" px-6 py-4 text-left text-white font-semibold" >
9
+ <th class =" px-6 py-4 text-left font-semibold text-white " >
10
10
Nama Pangan
11
11
</th >
12
- <th class =" px-6 py-4 text-left text-white font-semibold" >
12
+ <th class =" px-6 py-4 text-left font-semibold text-white " >
13
13
Takaran URT <span id =" takaran-unit-header" class =" text-lg" ></span >
14
14
</th >
15
- <th class =" px-6 py-4 text-left text-white font-semibold" >
15
+ <th class =" px-6 py-4 text-left font-semibold text-white " >
16
16
Aksi
17
17
</th >
18
18
</tr >
19
19
</thead >
20
20
<tbody >
21
21
<tr id =" baris-tabel-formulir-pangan" >
22
22
<td class =" px-6 py-4" >
23
- <select id =" nama-jenis" class =" appearance-none w-full px-4 py-3 border-2 border-gray-700 rounded-md bg-transparent focus:outline-none focus:ring-2 focus:ring-gray-100" >
24
- <option value = " " selected disabled >Pilih Jenis Pangan</option >
23
+ <select id =" nama-jenis" class =" w-full appearance-none rounded-md border-2 border-gray-700 bg-transparent px-4 py-3 focus:ring-2 focus:ring-gray-100 focus:outline-none " >
24
+ <option selected disabled >Pilih Jenis Pangan</option >
25
25
@foreach ($jenis_pangan as $id => $jenis )
26
26
<option value =" {{ $id } }" >{{ $jenis } } </option >
27
27
@endforeach
28
28
</select >
29
29
</td >
30
30
<td class =" px-6 py-4" >
31
- <select id =" nama-pangan" class =" appearance-none w-full px-4 py-3 border-2 border-gray-700 rounded-md bg-transparent focus:outline-none focus:ring-2 focus:ring-gray-100" >
32
- <option value = " " selected disabled >Pilih Nama Pangan</option >
31
+ <select id =" nama-pangan" class =" w-full appearance-none rounded-md border-2 border-gray-700 bg-transparent px-4 py-3 focus:ring-2 focus:ring-gray-100 focus:outline-none " >
32
+ <option selected disabled >Pilih Nama Pangan</option >
33
33
</select >
34
34
</td >
35
35
<td class =" px-6 py-4" >
36
36
<input
37
37
type =" number"
38
38
id =" urt"
39
- class =" appearance-none w-full px-4 py-3 border-2 border-gray-700 rounded-md bg-transparent focus:outline-none focus:ring-2 focus:ring-gray-100"
39
+ class =" w-full appearance-none rounded-md border-2 border-gray-700 bg-transparent px-4 py-3 focus:ring-2 focus:ring-gray-100 focus:outline-none "
40
40
placeholder =" Cth. 1"
41
41
/>
42
42
</td >
43
43
<td class =" px-6 py-4" >
44
44
<button
45
45
type =" button"
46
46
id =" tambah"
47
- class =" cursor-pointer px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-150 shadow-sm "
47
+ class =" cursor-pointer rounded-lg bg-green-600 px-4 py-2.5 text-white shadow-sm transition-colors duration-150 hover:bg-green-700 "
48
48
>
49
49
<i class =" fa-solid fa-plus" ></i >
50
50
</button >
@@ -54,12 +54,12 @@ class="cursor-pointer px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-gr
54
54
</table >
55
55
</div >
56
56
<div id =" hidden-pangan-inputs" ></div >
57
- <div id =" pangan-error" class =" text-red-500 mt-2 hidden" >Minimal 1 data pangan harus diisi!</div >
57
+ <div id =" pangan-error" class =" mt-2 hidden text-red-500 " >Minimal 1 data pangan harus diisi!</div >
58
58
</section >
59
59
60
60
@push (' skrip' )
61
61
<script >
62
- document .addEventListener (" DOMContentLoaded" , () => {
62
+ document .addEventListener (' DOMContentLoaded' , () => {
63
63
const formulir_pangan = document .getElementById (' formulir-pangan' );
64
64
const baris_tabel_formulir_pangan = document .getElementById (' baris-tabel-formulir-pangan' );
65
65
const tambah = document .getElementById (' tambah' );
@@ -99,7 +99,7 @@ class="cursor-pointer px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-gr
99
99
};
100
100
101
101
const perbarui_tabel = () => {
102
- document .querySelectorAll (' tr[data-pangan-row]' ).forEach (row => row .remove ());
102
+ document .querySelectorAll (' tr[data-pangan-row]' ).forEach (( row ) => row .remove ());
103
103
daftar_pangan .forEach ((item , index ) => {
104
104
const row = document .createElement (' tr' );
105
105
row .setAttribute (' data-pangan-row' , ' ' );
@@ -129,35 +129,35 @@ class="cursor-pointer px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-gr
129
129
};
130
130
131
131
const reset_formulir = () => {
132
- nama_jenis .value = " " ;
132
+ nama_jenis .value = ' ' ;
133
133
nama_pangan .innerHTML = ' <option value="" selected disabled>Pilih Nama Pangan</option>' ;
134
- urt .value = " " ;
135
- takaran_unit_header .textContent = " " ;
134
+ urt .value = ' ' ;
135
+ takaran_unit_header .textContent = ' ' ;
136
136
};
137
137
138
138
const pilihan_nama_pangan = (jenis_id ) => {
139
139
nama_pangan .innerHTML = ' <option value="" selected disabled>Pilih Nama Pangan</option>' ;
140
140
if (@json ($nama_pangan )[jenis_id]) {
141
141
Object .entries (@json ($nama_pangan )[jenis_id]).forEach (([id , nama ]) => {
142
- const option = document .createElement (" option" );
142
+ const option = document .createElement (' option' );
143
143
option .value = id;
144
144
option .textContent = nama;
145
145
nama_pangan .appendChild (option);
146
146
});
147
147
}
148
148
};
149
149
150
- nama_pangan .addEventListener (" change" , () => {
150
+ nama_pangan .addEventListener (' change' , () => {
151
151
const selected_option = nama_pangan .options [nama_pangan .selectedIndex ];
152
- const takaran = selected_option .dataset .takaran || " " ;
153
- takaran_unit_header .textContent = takaran ? ` (${ takaran} )` : " " ;
152
+ const takaran = selected_option .dataset .takaran || ' ' ;
153
+ takaran_unit_header .textContent = takaran ? ` (${ takaran} )` : ' ' ;
154
154
});
155
155
156
- nama_jenis .addEventListener (" change" , () => pilihan_nama_pangan (nama_jenis .value ));k
156
+ nama_jenis .addEventListener (' change' , () => pilihan_nama_pangan (nama_jenis .value ));
157
157
158
158
tambah .addEventListener (' click' , () => {
159
159
if (! nama_jenis .value || ! nama_pangan .value || ! urt .value ) {
160
- alert (" Semua bidang harus diisi!" );
160
+ alert (' Semua bidang harus diisi!' );
161
161
return ;
162
162
}
163
163
@@ -166,7 +166,7 @@ class="cursor-pointer px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-gr
166
166
nama_pangan: nama_pangan .value ,
167
167
urt: urt .value ,
168
168
teks_jenis_pangan: nama_jenis .options [nama_jenis .selectedIndex ].text ,
169
- teks_nama_pangan: nama_pangan .options [nama_pangan .selectedIndex ].text
169
+ teks_nama_pangan: nama_pangan .options [nama_pangan .selectedIndex ].text ,
170
170
};
171
171
172
172
daftar_pangan .push (item);
@@ -177,7 +177,7 @@ class="cursor-pointer px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-gr
177
177
submit_form .addEventListener (' click' , (e ) => {
178
178
if (daftar_pangan .length === 0 ) {
179
179
e .preventDefault ();
180
- alert (" Harap tambahkan setidaknya satu item pangan ke dalam tabel sebelum mengirimkan formulir!" );
180
+ alert (' Harap tambahkan setidaknya satu item pangan ke dalam tabel sebelum mengirimkan formulir!' );
181
181
return false ;
182
182
}
183
183
});
0 commit comments