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">
<label class="form-label">Multicast</label>
<div class="form-check form-switch">
<input
class="form-check-input multicast-toggle"
type="checkbox"
id="multicast-<?php echo $selected_interface; ?>"
name="multicast"
value="on"
<?php echo (($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on') ? 'checked' : ''; ?>>
<label class="form-check-label" for="multicast-<?php echo $selected_interface; ?>">
<?php echo (($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on') ? 'Enabled' : 'Disabled'; ?>
<div class="switch-container">
<label class="switch">
<input
type="checkbox"
class="multicast-toggle"
name="multicast"
value="on"
<?php echo (($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on') ? 'checked' : ''; ?>>
<span class="slider"></span>
</label>
<span class="switch-label">
<?php echo (($interface_data[$selected_interface]['config']['multicast'] ?? 'off') === 'on') ? 'Enabled' : 'Disabled'; ?>
</span>
</div>
</div>
@ -264,8 +266,8 @@ $selected_interface = $_GET['interface'] ?? array_keys($interface_data)[0] ?? nu
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.multicast-toggle').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
const interfaceName = this.id.replace('multicast-', '');
const label = this.nextElementSibling; // Get the label element
const switchContainer = this.closest('.switch-container');
const label = switchContainer.querySelector('.switch-label');
if (label) {
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 {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
margin: 10px 0;
margin: 0;
}
.switch input {
@ -915,17 +922,17 @@ main {
border-radius: 50%;
}
input:checked + .slider {
input:checked+.slider {
background-color: var(--accent-blue-light);
}
input:checked + .slider:before {
input:checked+.slider:before {
transform: translateX(26px);
}
.switch-label {
margin-left: 10px;
margin: 0;
vertical-align: middle;
font-size: 0.9rem;
color: var(--text-primary);
}
}