polizia_frascati/resources/views/livewire/vpn-management.blade.php

<!-- resources/views/livewire/vpn-management.blade.php -->
<div>
    <!-- Content Header -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Gestione Connessione VPN</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                        <li class="breadcrumb-item active">VPN</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <div class="row">
        <!-- Stato VPN -->
        <div class="col-md-6">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-shield-alt"></i> Stato Connessione VPN
                    </h3>
                    <div class="card-tools">
                        <button type="button"
                                class="btn btn-tool"
                                wire:click="refreshStatus(false)"
                                title="Aggiorna stato database">
                            <i class="fas fa-sync"></i>
                        </button>
                        <button type="button"
                                class="btn btn-tool"
                                wire:click="syncWithSystem"
                                title="Sincronizza con sistema">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-box">
                                <span class="{{ $this->getStatusIconClass() }}">
                                    <i class="{{ $this->getStatusIcon() }}"></i>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Stato VPN</span>
                                    <span class="info-box-number">{{ $this->getStatusText() }}</span>
                                    <span class="info-box-more">
                                        @if($lastUpdate)
                                            Ultimo aggiornamento: {{ \Carbon\Carbon::parse($lastUpdate)->format('d/m/Y H:i:s') }}
                                        @else
                                            Nessun aggiornamento disponibile
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="text-center">
                                @if($vpnStatus === 'connected')
                                    <button type="button" class="btn btn-success btn-lg" disabled>
                                        <i class="fas fa-check"></i> VPN Connessa
                                    </button>
                                    <br><br>
                                    <button type="button"
                                            class="btn btn-warning btn-lg"
                                            wire:click="disconnectVpn"
                                            wire:loading.attr="disabled"
                                            wire:target="disconnectVpn">
                                        <span wire:loading.remove wire:target="disconnectVpn">
                                            <i class="fas fa-stop"></i> Disconnetti VPN
                                        </span>
                                        <span wire:loading wire:target="disconnectVpn">
                                            <i class="fas fa-spinner fa-spin"></i> Disconnettendo...
                                        </span>
                                    </button>
                                @elseif($vpnStatus === 'disconnected')
                                    <button type="button"
                                            class="btn btn-success btn-lg"
                                            wire:click="connectVpn"
                                            wire:loading.attr="disabled"
                                            wire:target="connectVpn">
                                        <span wire:loading.remove wire:target="connectVpn">
                                            <i class="fas fa-play"></i> Connetti VPN
                                        </span>
                                        <span wire:loading wire:target="connectVpn">
                                            <i class="fas fa-spinner fa-spin"></i> Connettendo...
                                        </span>
                                    </button>
                                    <br><br>
                                    <button type="button" class="btn btn-secondary btn-lg" disabled>
                                        <i class="fas fa-times"></i> VPN Disconnessa
                                    </button>
                                @else
                                    <button type="button"
                                            class="btn btn-success btn-lg"
                                            wire:click="connectVpn"
                                            wire:loading.attr="disabled"
                                            wire:target="connectVpn">
                                        <span wire:loading.remove wire:target="connectVpn">
                                            <i class="fas fa-play"></i> Connetti VPN
                                        </span>
                                        <span wire:loading wire:target="connectVpn">
                                            <i class="fas fa-spinner fa-spin"></i> Connettendo...
                                        </span>
                                    </button>
                                    <br><br>
                                    <button type="button"
                                            class="btn btn-warning btn-lg"
                                            wire:click="disconnectVpn"
                                            wire:loading.attr="disabled"
                                            wire:target="disconnectVpn">
                                        <span wire:loading.remove wire:target="disconnectVpn">
                                            <i class="fas fa-stop"></i> Disconnetti VPN
                                        </span>
                                        <span wire:loading wire:target="disconnectVpn">
                                            <i class="fas fa-spinner fa-spin"></i> Disconnettendo...
                                        </span>
                                    </button>
                                @endif

                                <br><br>
                                <button type="button"
                                        class="btn btn-info btn-sm"
                                        wire:click="syncWithSystem"
                                        wire:loading.attr="disabled"
                                        wire:target="syncWithSystem"
                                        title="Sincronizza stato con sistema">
                                    <span wire:loading.remove wire:target="syncWithSystem">
                                        <i class="fas fa-sync-alt"></i> Sincronizza
                                    </span>
                                    <span wire:loading wire:target="syncWithSystem">
                                        <i class="fas fa-spinner fa-spin"></i> Sincronizzando...
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Configurazione Credenziali -->
        <div class="col-md-6">
            <div class="card card-warning">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-cog"></i> Configurazione Credenziali
                    </h3>
                </div>
                <div class="card-body">
                    @if($successMessage)
                        <div class="alert alert-success alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            {{ $successMessage }}
                        </div>
                    @endif

                    @if($errorMessage)
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            {{ $errorMessage }}
                        </div>
                    @endif

                    <form wire:submit.prevent="updateCredentials">
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input type="text"
                                   class="form-control @error('username') is-invalid @enderror"
                                   wire:model="username"
                                   required>
                            @error('username')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password"
                                   class="form-control @error('password') is-invalid @enderror"
                                   wire:model="password"
                                   placeholder="Inserisci la password"
                                   required>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="server">Server VPN</label>
                            <input type="text"
                                   class="form-control @error('server') is-invalid @enderror"
                                   wire:model="server"
                                   required>
                            @error('server')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <button type="submit"
                                class="btn btn-primary"
                                wire:loading.attr="disabled"
                                wire:target="updateCredentials">
                            <span wire:loading.remove wire:target="updateCredentials">
                                <i class="fas fa-save"></i> Salva Credenziali
                            </span>
                            <span wire:loading wire:target="updateCredentials">
                                <i class="fas fa-spinner fa-spin"></i> Salvando...
                            </span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Log VPN -->
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card card-info">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-file-alt"></i> Informazioni VPN
                    </h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Proprietà</th>
                                    <th>Valore</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Stato Attuale</strong></td>
                                    <td>
                                        <span class="{{ $this->getStatusBadgeClass() }}">
                                            {{ $this->getStatusBadgeText() }}
                                        </span>
                                        {{ $this->getStatusText() }}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Server Configurato</strong></td>
                                    <td>{{ $server }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Username Configurato</strong></td>
                                    <td>{{ $username }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Ultimo Aggiornamento</strong></td>
                                    <td>
                                        @if($lastUpdate)
                                            {{ \Carbon\Carbon::parse($lastUpdate)->format('d/m/Y H:i:s') }}
                                        @else
                                            Non disponibile
                                        @endif
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    let loadingTimeouts = {};

    // Funzione per forzare il reset degli stati di loading
    function forceResetLoadingStates() {
        // Reset loading indicators
        document.querySelectorAll('[wire\\:loading]').forEach(el => {
            el.style.display = 'none';
        });

        // Show normal buttons
        document.querySelectorAll('[wire\\:loading\\.remove]').forEach(el => {
            el.style.display = '';
        });

        // Re-enable buttons (except permanently disabled ones)
        document.querySelectorAll('button[disabled]').forEach(btn => {
            if (!btn.classList.contains('permanently-disabled')) {
                btn.removeAttribute('disabled');
            }
        });

        // Clear all timeouts
        Object.values(loadingTimeouts).forEach(timeout => clearTimeout(timeout));
        loadingTimeouts = {};

        console.log('Loading states forcefully reset');
    }

    // Set timeout for each loading state
    function setLoadingTimeout(target, duration = 8000) {
        if (loadingTimeouts[target]) {
            clearTimeout(loadingTimeouts[target]);
        }

        loadingTimeouts[target] = setTimeout(() => {
            console.warn(`Loading timeout for ${target}, forcing reset`);
            forceResetLoadingStates();

            // Show error toast
            if (typeof toastr !== 'undefined') {
                toastr.error('Operazione completata (timeout raggiunto)');
            }
        }, duration);
    }

    // Clear timeout when loading finishes
    function clearLoadingTimeout(target) {
        if (loadingTimeouts[target]) {
            clearTimeout(loadingTimeouts[target]);
            delete loadingTimeouts[target];
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Livewire event listeners
        window.addEventListener('livewire:load', function () {
            console.log('Livewire loaded');

            // Auto-refresh status every 30 seconds (only if not loading)
            setInterval(function() {
                if (Object.keys(loadingTimeouts).length === 0) {
                    @this.call('refreshStatus', false);
                }
            }, 30000);

            // Update sidebar badge when status changes
            Livewire.on('vpnStatusUpdated', status => {
                updateSidebarBadge(status);
            });

            // Show toast notifications
            Livewire.on('showToast', (type, message) => {
                if (typeof toastr !== 'undefined') {
                    toastr[type](message);
                } else {
                    alert(type.toUpperCase() + ': ' + message);
                }
            });

            // Refresh status with delay
            Livewire.on('refreshStatusDelayed', () => {
                setTimeout(function() {
                    if (Object.keys(loadingTimeouts).length === 0) {
                        @this.call('refreshStatus', false);
                    }
                }, 3000);
            });
        });

        // Track when loading starts
        window.addEventListener('livewire:loading:start', function(event) {
            const target = event.detail.target || 'unknown';
            console.log('Loading started for:', target);
            setLoadingTimeout(target);
        });

        // Track when loading finishes
        window.addEventListener('livewire:loading:finish', function(event) {
            const target = event.detail.target || 'unknown';
            console.log('Loading finished for:', target);
            clearLoadingTimeout(target);
        });

        // Force reset after 10 seconds on page load
        setTimeout(forceResetLoadingStates, 10000);

        // Initialize sidebar badge
        const currentStatus = @json($vpnStatus ?? 'unknown');
        updateSidebarBadge(currentStatus);
    });

    function updateSidebarBadge(status) {
        const badge = document.getElementById('vpn-status-badge');
        if (badge) {
            badge.className = '';
            switch(status) {
                case 'connected':
                    badge.className = 'badge badge-success right';
                    badge.textContent = 'ON';
                    break;
                case 'disconnected':
                    badge.className = 'badge badge-danger right';
                    badge.textContent = 'OFF';
                    break;
                case 'error':
                    badge.className = 'badge badge-danger right';
                    badge.textContent = 'ERR';
                    break;
                default:
                    badge.className = 'badge badge-warning right';
                    badge.textContent = '?';
            }
        }
    }

    // Emergency reset button (remove this in production)
    function addEmergencyResetButton() {
        if (document.getElementById('emergency-reset')) return;

        const resetBtn = document.createElement('button');
        resetBtn.id = 'emergency-reset';
        resetBtn.innerHTML = '🔄 Reset Loading';
        resetBtn.className = 'btn btn-danger btn-sm';
        resetBtn.style.position = 'fixed';
        resetBtn.style.top = '10px';
        resetBtn.style.right = '10px';
        resetBtn.style.zIndex = '9999';
        resetBtn.onclick = forceResetLoadingStates;

        document.body.appendChild(resetBtn);

        // Auto-remove after 30 seconds
        setTimeout(() => {
            if (resetBtn.parentNode) {
                resetBtn.parentNode.removeChild(resetBtn);
            }
        }, 30000);
    }

    // Add emergency button if loading states persist
    setTimeout(addEmergencyResetButton, 5000);
</script>
@endpush