update reinstall vps

This commit is contained in:
Pham Bao
2025-08-03 23:06:08 +07:00
parent 983964e573
commit 160b7cdb47
25 changed files with 319 additions and 262 deletions
-1
View File
@@ -1,3 +1,2 @@
require('./bootstrap');
// index.js
import "flyonui/flyonui"
+3
View File
@@ -769,3 +769,6 @@ function snapshotTable() {
},
};
}
// Make snapshotTable available globally for Alpine.js
window.snapshotTable = snapshotTable;
@@ -2,19 +2,15 @@
@push('viewStyles')
<link rel="stylesheet" href="{{ asset('lib/wmks/css/wmks-all.css') }}" />
<link rel="stylesheet" href="{{ asset('lib/adminlte/adminlte.css') }}">
<link rel="stylesheet" href="{{ asset('css/service/console.css') }}">
@endpush
@section('content')
<div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-6 py-8">
<!-- Main Layout: 2 Columns -->
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- Console Display - Main Column (3/4) -->
<div class="lg:col-span-3">
<div class="flex flex-col gap-3">
<div class="w-full">
<div class="console-container">
<!-- Console Header -->
<div class="console-header">
@@ -46,45 +42,29 @@
</div>
</div>
</div>
<div class="w-full">
<div class="control-panel">
<div class="flex flex-row gap-2 items-center p-2">
<button onclick="enterFullScreen()" class="btn-secondary flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
</svg>
Toàn màn hình
</button>
<!-- Control Panel - Sidebar (1/4) -->
<div class="lg:col-span-1">
<div class="space-y-6">
<!-- Quick Actions -->
<div class="control-panel p-6">
<h3 class="section-title">Bảng điều khiển</h3>
<div class="space-y-3">
<button onclick="enterFullScreen()"
class="btn-secondary w-full flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
</svg>
Toàn màn hình
</button>
<button onclick="sendCAD()" class="btn-secondary w-full flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
Ctrl + Alt + Del
</button>
</div>
</div>
<!-- Text Input -->
<div class="control-panel p-6">
<h4 class="section-title">Gửi văn bản</h4>
<div class="space-y-3">
<button onclick="sendCAD()" class="btn-secondary flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
Ctrl + Alt + Del
</button>
<div class="flex flex-row gap-2 items-center">
<input type="text" id="sendStringText" placeholder="Type your message..."
class="input-field" />
<button onclick="sendInputString()"
class="btn-primary w-full flex items-center justify-center">
<button onclick="sendInputString()" class="btn-primary flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
@@ -1,13 +1,15 @@
<div class="bg-gray-50 hover:bg-gray-100 rounded-lg p-4 text-center cursor-pointer transition-colors duration-200 border border-gray-200 hover:border-green-300"
@click="showNotification('{{ __('Chức năng đang phát triển') }}', 'info')">
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-3">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<flux:modal.trigger name="reinstall-vm">
<div
class="bg-gray-50 hover:bg-gray-100 rounded-lg p-4 text-center cursor-pointer transition-colors duration-200 border border-gray-200 hover:border-green-300">
<div class="flex flex-col items-center">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-3">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-sm font-medium text-gray-700">{{ __('Cài lại') }}</span>
</div>
<span class="text-sm font-medium text-gray-700">{{ __('Cài lại') }}</span>
</div>
</div>
</flux:modal.trigger>
@@ -41,4 +41,9 @@
{{-- Notes Section --}}
@include('frontend.service.partials.control-notes')
@livewire('v-p-s-reinstall-modal', [
'productId' => $invoice->invoiceItem->first()?->getProductAttribute()?->id,
'invoiceId' => $invoice->id
])
</div>
</div>
@@ -0,0 +1,95 @@
<flux:modal name="reinstall-vm" class="md:w-[600px]">
<div class="space-y-6">
<div>
<flux:heading size="lg">{{ __('Chọn lại Hệ điều hành') }}</flux:heading>
<p class="text-sm text-gray-600 mt-2">{{ __('Chọn hệ điều hành mới cho máy ảo của bạn.') }}</p>
</div>
@if ($currentOs)
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<p class="text-sm font-medium text-blue-800">{{ __('Hệ điều hành hiện tại:') }}</p>
<p class="text-sm text-blue-700">
@if ($currentOs && $currentOs->osGroup)
{{ $currentOs->osGroup->name }} - {{ $currentOs->version ?? 'N/A' }}
@else
{{ __('Không xác định') }}
@endif
</p>
</div>
</div>
</div>
@endif
@if ($osGroups->count() > 0)
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Chọn loại hệ điều hành</label>
<flux:select wire:model="selectedOsGroupId" placeholder="Chọn lại Hệ điều hành">
<flux:select.option value="">Chọn lại hệ điều hành</flux:select.option>
@foreach ($osGroups as $osGroup)
<flux:select.option value="{{ $osGroup->id }}">{{ $osGroup->name }}</flux:select.option>
@endforeach
</flux:select>
</div>
@if ($selectedOsGroupId && $operatingSystems->count() > 0)
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Chọn phiên bản:') }}</label>
<div class="grid grid-cols-1 gap-3 max-h-60 overflow-y-auto">
@foreach ($operatingSystems as $os)
<label
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
<input type="radio" wire:model="selectedOsId" value="{{ $os->id }}"
class="mr-3">
<div class="flex-1">
<div class="font-medium text-gray-900">{{ $os->osGroup->name . ' - ' . $os->version }}
</div>
</div>
<div class="flex items-center space-x-2">
@if ($currentOs && $currentOs->id == $os->id)
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
Hiện tại
</span>
@endif
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
Khả dụng
</span>
</div>
</label>
@endforeach
</div>
</div>
@elseif($selectedOsGroupId)
<div class="text-center py-8">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.47-.881-6.08-2.33" />
</svg>
<h3 class="mt-2 text-sm font-medium text-gray-900">{{ __('Không có phiên bản nào') }}</h3>
<p class="mt-1 text-sm text-gray-500">
{{ __('Không có phiên bản hệ điều hành nào khả dụng cho loại này.') }}</p>
</div>
@endif
<div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
<flux:button variant="primary" x-on:click="$flux.modal('reinstall-vm').close()">
{{ __('Hủy') }}
</flux:button>
<flux:button variant="primary" color="orange" wire:click="confirmReinstall">
{{ __('Xác nhận cài lại') }}
</flux:button>
</div>
</div>
@else
@endif
</div>
</flux:modal>