Joseph.Rawlings
a7cb561053
- Implemented page load animations using Alpine.js for smoother transitions in various views including firewall, help, index, network, overview, reinstall, server, statistics, storage, subdomain, and system. - Added opacity and translate effects to elements for improved visual feedback during loading. - Enhanced hover effects on cards and buttons for better user interaction. - Adjusted transition timings and delays for a more cohesive user experience.
140 lines
8.4 KiB
PHP
140 lines
8.4 KiB
PHP
<x-proxmox::layout :server="$server" view="backups" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
|
|
<div class="space-y-4" x-data="{ pageLoaded: false }" x-init="setTimeout(() => pageLoaded = true, 50)">
|
|
<div class="flex items-center justify-between"
|
|
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
|
|
style="transition: all 0.4s ease-out;">
|
|
<div class="flex items-center gap-2">
|
|
<h2 class="text-lg font-semibold">Backups</h2>
|
|
<div class="relative" x-data="{ open: false }" x-cloak>
|
|
<button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
|
<x-ri-question-line class="size-4" />
|
|
</button>
|
|
<div x-show="open" @click="open = false" @keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50 backdrop-blur-sm" style="display: none;"></div>
|
|
<div x-show="open" @click.away="open = false"
|
|
class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
|
|
<div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-xl p-4">
|
|
<button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
|
<x-ri-close-line class="size-4" />
|
|
</button>
|
|
<div class="flex items-center gap-2 mb-3 pr-6">
|
|
<div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
|
|
<x-ri-database-2-line class="size-4 text-primary" />
|
|
</div>
|
|
<h6 class="text-base font-semibold">Backup Details</h6>
|
|
</div>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3">Manage VM backups stored on the KVM server.</p>
|
|
<div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2 text-xs text-gray-600 dark:text-gray-400">
|
|
<p><strong>Restore:</strong> Restores VM state. Must be powered off.</p>
|
|
<p><strong>Delete:</strong> Permanently removes backup. Cannot be undone.</p>
|
|
<p><strong>Note:</strong> Includes disk data, config, and metadata.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-2 w-fit hidden lg:flex">
|
|
<livewire:proxmox.backups.create :server="$server" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md"
|
|
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
|
|
style="transition: all 0.4s ease-out 0.15s;">
|
|
<div class="overflow-x-auto rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
|
|
<thead>
|
|
<tr class="text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">
|
|
<th class="px-3 py-2">Backup</th>
|
|
<th class="px-3 py-2">Size</th>
|
|
<th class="px-3 py-2">Created</th>
|
|
<th class="px-3 py-2 text-center">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700 text-gray-700 dark:text-gray-300">
|
|
@forelse($backups as $index => $backup)
|
|
@php $backup = (object) $backup; @endphp
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200"
|
|
:class="pageLoaded ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-2'"
|
|
:style="'transition-delay: {{ ($index + 2) * 75 }}ms'">
|
|
<td class="px-3 py-3"><span class="font-medium text-gray-800 dark:text-gray-200">{{ $backup->notes ?: '—' }}</span></td>
|
|
<td class="px-3 py-3">{{ Illuminate\Support\Number::fileSize($backup->size, 2) }}</td>
|
|
<td class="px-3 py-3">{{ date('Y-m-d H:i', $backup->ctime) }}</td>
|
|
<td class="px-3 py-3">
|
|
<div class="flex flex-wrap items-center justify-center gap-1">
|
|
<x-proxmox::ui.button
|
|
@click="$wire.set('showRestore', true); $wire.set('volid', '{{ $backup->volid }}')"
|
|
variant="secondary"
|
|
size="sm"
|
|
icon="ri-checkbox-circle-fill">
|
|
Restore
|
|
</x-proxmox::ui.button>
|
|
<x-proxmox::ui.button
|
|
wire:click="promptDelete('{{ $backup->volid }}')"
|
|
variant="danger"
|
|
size="sm"
|
|
icon="ri-delete-bin-fill">
|
|
Delete
|
|
</x-proxmox::ui.button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" class="px-3 py-4 text-center text-gray-400 text-sm">No backups available.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if($showRestore)
|
|
<x-modal id="restore-backup" title="Restore Backup" open>
|
|
<div class="flex flex-col gap-4">
|
|
<x-form.checkbox label="I'm sure I want to restore this backup and delete all current data. This process is irreversible. "
|
|
wire:model="confirmRestore" name="confirmRestore" required />
|
|
<div class="text-sm font-semibold">
|
|
Please ensure that the virtual private server is powered off before proceeding. If the server is not powered off, the restore <u>will</u> fail.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-4 mt-4">
|
|
<x-proxmox::ui.button wire:click="$set('showRestore', false)" variant="secondary">
|
|
Cancel
|
|
</x-proxmox::ui.button>
|
|
<x-proxmox::ui.button wire:click="restoreBackup" wire:loading.attr="disabled" variant="primary">
|
|
<span wire:loading.remove wire:target="restoreBackup">Restore</span>
|
|
<span wire:loading wire:target="restoreBackup">Restoring...</span>
|
|
</x-proxmox::ui.button>
|
|
</div>
|
|
</x-modal>
|
|
@endif
|
|
|
|
@if($showDelete)
|
|
<x-modal id="delete-backup" title="Delete Backup" open>
|
|
<div class="flex flex-col gap-4">
|
|
<x-form.checkbox label="I understand this backup will be permanently deleted and cannot be recovered."
|
|
wire:model="confirmDelete" name="confirmDelete" required />
|
|
<div class="text-sm font-semibold text-error">
|
|
Ensure you have downloaded or verified this backup before deleting.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-4 mt-4">
|
|
<x-proxmox::ui.button wire:click="$set('showDelete', false)" variant="secondary">
|
|
Cancel
|
|
</x-proxmox::ui.button>
|
|
<x-proxmox::ui.button wire:click="deleteBackup" wire:loading.attr="disabled" variant="danger">
|
|
<span wire:loading.remove wire:target="deleteBackup">Delete Backup</span>
|
|
<span wire:loading wire:target="deleteBackup">Deleting...</span>
|
|
</x-proxmox::ui.button>
|
|
</div>
|
|
</x-modal>
|
|
@endif
|
|
|
|
</x-proxmox::layout>
|
|
|