This commit is contained in:
Devdatt Bhatt 2026-06-08 05:10:16 +00:00
parent bea4040028
commit a718f7eff0
2 changed files with 26 additions and 17 deletions

View File

@ -158,17 +158,19 @@ $selected_interface = $_GET['interface'] ?? array_keys($interface_data)[0] ?? nu
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Multicast</label> <label class="form-label">Multicast</label>
<div class="form-check form-switch"> <div class="switch-container">
<input <label class="switch">
class="form-check-input multicast-toggle" <input
type="checkbox" type="checkbox"
id="multicast-<?php echo $selected_interface; ?>" class="multicast-toggle"
name="multicast" name="multicast"
value="on" value="on"
<?php echo (($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on') ? 'checked' : ''; ?>> <?php echo (($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on') ? 'checked' : ''; ?>>
<label class="form-check-label" for="multicast-<?php echo $selected_interface; ?>"> <span class="slider"></span>
<?php echo (($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on') ? 'Enabled' : 'Disabled'; ?>
</label> </label>
<span class="switch-label">
<?php echo (($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on') ? 'Enabled' : 'Disabled'; ?>
</span>
</div> </div>
</div> </div>
@ -264,8 +266,8 @@ $selected_interface = $_GET['interface'] ?? array_keys($interface_data)[0] ?? nu
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.multicast-toggle').forEach(function(checkbox) { document.querySelectorAll('.multicast-toggle').forEach(function(checkbox) {
checkbox.addEventListener('change', function() { checkbox.addEventListener('change', function() {
const interfaceName = this.id.replace('multicast-', ''); const switchContainer = this.closest('.switch-container');
const label = this.nextElementSibling; // Get the label element const label = switchContainer.querySelector('.switch-label');
if (label) { if (label) {
label.textContent = this.checked ? 'Enabled' : 'Disabled'; label.textContent = this.checked ? 'Enabled' : 'Disabled';

View File

@ -877,12 +877,19 @@ main {
} }
} }
.switch-container {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 50px; width: 50px;
height: 24px; height: 24px;
margin: 10px 0; margin: 0;
} }
.switch input { .switch input {
@ -915,16 +922,16 @@ main {
border-radius: 50%; border-radius: 50%;
} }
input:checked + .slider { input:checked+.slider {
background-color: var(--accent-blue-light); background-color: var(--accent-blue-light);
} }
input:checked + .slider:before { input:checked+.slider:before {
transform: translateX(26px); transform: translateX(26px);
} }
.switch-label { .switch-label {
margin-left: 10px; margin: 0;
vertical-align: middle; vertical-align: middle;
font-size: 0.9rem; font-size: 0.9rem;
color: var(--text-primary); color: var(--text-primary);