update
This commit is contained in:
parent
bea4040028
commit
a718f7eff0
|
|
@ -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';
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue