Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: implement custom toggle switch for firewall enable/disable functionality in Proxmox view, enhancing user interaction and visual appeal

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-01 12:49:35 -05:00
parent 0d7364085b
commit 0a451e0c01
1 changed files with 62 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
extensions/Servers/Proxmox/views/firewall.blade.php
View File

@@ -1,5 +1,55 @@
<x-proxmox::layout :server="$server" view="firewall" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
<style>
.firewall-toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.firewall-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.firewall-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e5e7eb;
transition: 0.3s;
border-radius: 24px;
}
.dark .firewall-toggle-slider {
background-color: #374151;
}
.firewall-toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.firewall-toggle-switch input:checked + .firewall-toggle-slider {
background-color: #2563eb;
}
.firewall-toggle-switch input:checked + .firewall-toggle-slider:before {
transform: translateX(20px);
}
.firewall-toggle-switch input:disabled + .firewall-toggle-slider {
opacity: 0.5;
cursor: not-allowed;
}
</style>
<div class="space-y-6">
<!-- Firewall Status Card -->
<div class="bg-background border border-neutral rounded-lg p-6">
@@ -13,15 +63,18 @@
<p class="text-sm text-base/60 mt-1">Enable or disable the firewall for this virtual machine</p>
</div>
</div>
<label class="inline-flex items-center cursor-pointer">
<input
type="checkbox"
wire:model.live="firewallEnabled"
wire:click="toggleFirewall"
:disabled="loading"
class="sr-only peer">
<div class="relative w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
<div class="flex items-center gap-3">
<span class="text-sm font-medium text-base/70">Disabled</span>
<label class="firewall-toggle-switch" wire:loading.attr="disabled" wire:target="toggleFirewall">
<input
type="checkbox"
wire:model="firewallEnabled"
wire:change="toggleFirewall"
wire:loading.attr="disabled">
<span class="firewall-toggle-slider"></span>
</label>
<span class="text-sm font-medium text-base/70">Enabled</span>
</div>
</div>
@if($error)
<div class="bg-error/10 border border-error/30 rounded-lg p-3 mt-4">