KoPKB/admin-erahn
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change different color when selecting either v1 or v2

Browse Source
This commit is contained in:
Afiq Hamzah
2024-05-30 12:11:40 +08:00
parent bfda43022a
commit a43c40dd92
1 changed files with 47 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/tetapan/payable-ujrah-branches.blade.php
+47 -3
View File
@@ -70,10 +70,13 @@
<div class="flex items-center">
@php
$selected = $cawangan->cawangan_information->version ?? '';
$select_color_v1 = 'bg-green-500 text-white';
$select_color_v2 = 'bg-indigo-500 text-white';
@endphp
<select name="version_tawarruq" data-tawarruq-version-branch="{{ $cawangan->kodcaw }}" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option {{ $selected === 'v1' ? 'selected' : '' }} value="v1">v1</option>
<option {{ $selected === 'v2' ? 'selected' : '' }} value="v2">v2</option>
<select name="version_tawarruq" data-tawarruq-version-branch="{{ $cawangan->kodcaw }}" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 {{$selected == 'v1' ? $select_color_v1 : $select_color_v2}}">
<option {{ $selected === 'v1' ? 'selected' : '' }} value="v1" class="bg-white text-black">v1</option>
<option {{ $selected === 'v2' ? 'selected' : '' }} value="v2" class="bg-white text-black">v2</option>
</select>
</div>
</div>
@@ -182,4 +185,45 @@
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const removeStylingClass = function(element, prefixes) {
prefixes.forEach(prefix => {
const classesToRemove = [];
// Find classes that start with the prefix
element.classList.forEach(className => {
if (className.startsWith(prefix)) {
classesToRemove.push(className);
}
});
// Remove the found classes
classesToRemove.forEach(className => {
element.classList.remove(className);
});
});
};
const select_version = document.querySelectorAll('select[name="version_tawarruq"]').forEach(x => {
x.addEventListener('input', (event) => {
let element = event.target;
removeStylingClass(element, ['bg-', 'text-']);
if(element.value === 'v1'){
element.classList.add('bg-green-500');
}
if(element.value === 'v2'){
element.classList.add('bg-indigo-500');
}
element.classList.add('text-white');
})
});
});
</script>
@endpush