You've already forked Atomcms-edit
refactor: extract inline HTML rendering to Blade components
- Create 12 Blade components for Commandocentrum views - Reduce Commandocentrum from 1679 to 1192 lines (-29%) - Move server-info, hotel-status, alert-form, emulator-info/settings/status - Move nitro-settings/status, backups-list, clothing-status, staff-activity, update-history - Improve separation of concerns between controller logic and view rendering
This commit is contained in:
root
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,18 @@
|
|||||||
|
<div style="display:flex;gap:16px;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px;">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
wire:model="data.hotel_alert_message"
|
||||||
|
placeholder="Typ hier je alert bericht..."
|
||||||
|
style="flex:1;padding:14px 16px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;transition:border-color 0.2s;"
|
||||||
|
onfocus="this.style.borderColor='#3b82f6'"
|
||||||
|
onblur="this.style.borderColor='#e2e8f0'"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
wire:click="sendHotelAlert"
|
||||||
|
style="background:linear-gradient(135deg,#ef4444,#dc2626);padding:14px 28px;border-radius:10px;color:white;border:none;cursor:pointer;font-weight:600;font-size:14px;box-shadow:0 4px 12px rgba(239,68,68,0.3);transition:transform 0.2s,box-shadow 0.2s;"
|
||||||
|
onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 16px rgba(239,68,68,0.4)'"
|
||||||
|
onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 12px rgba(239,68,68,0.3)'"
|
||||||
|
>
|
||||||
|
📢 Verstuur Alert
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
@props(['backups'])
|
||||||
|
|
||||||
|
@if (empty($backups))
|
||||||
|
<div style="text-align:center;padding:32px;color:#64748b;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;">
|
||||||
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" style="margin:0 auto 16px;display:block;">
|
||||||
|
<path d="M21 8v13H3V8M1 3h22v5H1zM10 12h4"/>
|
||||||
|
</svg>
|
||||||
|
<div style="font-size:14px;">Nog geen backups beschikbaar</div>
|
||||||
|
<div style="font-size:12px;margin-top:8px;">Backups worden automatisch aangemaakt bij elke emulator update</div>
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;">
|
||||||
|
@foreach ($backups as $backup)
|
||||||
|
@php
|
||||||
|
$dateFormatted = str_replace('_', ' ', $backup['date']);
|
||||||
|
@endphp
|
||||||
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||||
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
|
||||||
|
<div style="display:flex;align-items:center;gap:8px;">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2">
|
||||||
|
<path d="M21 8v13H3V8M1 3h22v5H1zM10 12h4"/>
|
||||||
|
</svg>
|
||||||
|
<span style="font-weight:600;color:#1e293b;font-size:14px;">{{ $backup['jar'] }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:12px;color:#64748b;margin-bottom:12px;">{{ $dateFormatted }}</div>
|
||||||
|
<button
|
||||||
|
wire:click="restoreBackup('{{ $backup['name'] }}')"
|
||||||
|
style="width:100%;background:linear-gradient(135deg,#3b82f6,#2563eb);padding:10px;border-radius:8px;color:white;border:none;cursor:pointer;font-weight:600;font-size:13px;box-shadow:0 2px 8px rgba(37,99,235,0.3);transition:transform 0.2s;"
|
||||||
|
onmouseover="this.style.transform='translateY(-1px)'"
|
||||||
|
onmouseout="this.style.transform='translateY(0)'"
|
||||||
|
>
|
||||||
|
🔄 Herstellen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
+8
@@ -0,0 +1,8 @@
|
|||||||
|
@props(['clothingCount'])
|
||||||
|
|
||||||
|
<div style="display:flex;gap:16px;align-items:center;">
|
||||||
|
<div style="background:#f8fafc;border-radius:12px;padding:16px;border:1px solid #e2e8f0;flex:1;">
|
||||||
|
<div style="font-size:12px;color:#64748b;margin-bottom:4px;">Kleding Items</div>
|
||||||
|
<div style="font-size:24px;font-weight:700;color:#1e293b;">{{ number_format($clothingCount) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
+21
@@ -0,0 +1,21 @@
|
|||||||
|
@props([
|
||||||
|
'version',
|
||||||
|
'serviceName',
|
||||||
|
'status',
|
||||||
|
'color',
|
||||||
|
])
|
||||||
|
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px;">
|
||||||
|
<div style="background:#f8fafc;border-radius:12px;padding:16px;border:1px solid #e2e8f0;">
|
||||||
|
<div style="font-size:12px;color:#64748b;margin-bottom:4px;">Versie</div>
|
||||||
|
<div style="font-size:20px;font-weight:700;color:#1e293b;">{{ $version }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="background:#f8fafc;border-radius:12px;padding:16px;border:1px solid #e2e8f0;">
|
||||||
|
<div style="font-size:12px;color:#64748b;margin-bottom:4px;">Service</div>
|
||||||
|
<div style="font-size:20px;font-weight:700;color:#1e293b;">{{ $serviceName }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="background:{{ $color }}15;border-radius:12px;padding:16px;border:1px solid {{ $color }}30;grid-column:span 2;">
|
||||||
|
<div style="font-size:12px;color:#64748b;margin-bottom:4px;">Status</div>
|
||||||
|
<div style="font-size:24px;font-weight:700;color:{{ $color }};">● {{ $status }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
+49
@@ -0,0 +1,49 @@
|
|||||||
|
@props([
|
||||||
|
'emulatorBranchesHtml',
|
||||||
|
'emulatorStatusHtml',
|
||||||
|
])
|
||||||
|
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">GitHub URL</label>
|
||||||
|
<input type="text" wire:model="data.emulator_github_url" placeholder="https://github.com/..." style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">JAR Direct URL</label>
|
||||||
|
<input type="text" wire:model="data.emulator_jar_direct_url" placeholder="https://..." style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">JAR Pad</label>
|
||||||
|
<input type="text" wire:model="data.emulator_jar_path" placeholder="/root/emulator" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Source Repo</label>
|
||||||
|
<input type="text" wire:model="data.emulator_source_repo" placeholder="user/repo" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Source Pad</label>
|
||||||
|
<input type="text" wire:model="data.emulator_source_path" placeholder="/var/www/emulator" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Branch</label>
|
||||||
|
<select wire:model="data.emulator_github_branch" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;background:#fff;">
|
||||||
|
{!! $emulatorBranchesHtml !!}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">DB Host</label>
|
||||||
|
<input type="text" wire:model="data.emulator_database_host" placeholder="127.0.0.1" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">DB Naam</label>
|
||||||
|
<input type="text" wire:model="data.emulator_database_name" placeholder="habbo" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Service Naam</label>
|
||||||
|
<input type="text" wire:model="data.emulator_service_name" placeholder="arcturus" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div style="grid-column:span 3;">
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Status</label>
|
||||||
|
{!! $emulatorStatusHtml !!}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
+85
@@ -0,0 +1,85 @@
|
|||||||
|
@props([
|
||||||
|
'emulatorOnline',
|
||||||
|
'jarExists',
|
||||||
|
'serviceName',
|
||||||
|
'sourceCommit',
|
||||||
|
'remoteVersion',
|
||||||
|
'canBuild',
|
||||||
|
'jarPath',
|
||||||
|
'sourcePath',
|
||||||
|
])
|
||||||
|
|
||||||
|
@php
|
||||||
|
$sourceCommitShort = substr($sourceCommit, 0, 7);
|
||||||
|
$hasUpdate = $sourceCommit !== 'N/A' && $remoteVersion !== 'N/A' && $sourceCommitShort !== $remoteVersion;
|
||||||
|
$updateColor = $hasUpdate ? '#f59e0b' : '#22c55e';
|
||||||
|
$updateText = $hasUpdate ? '🔄 Update beschikbaar' : '✓ Up-to-date';
|
||||||
|
$btnColor = $hasUpdate ? '#f59e0b' : '#3b82f6';
|
||||||
|
$btnGradient = $hasUpdate ? 'linear-gradient(135deg,#f59e0b,#d97706)' : 'linear-gradient(135deg,#3b82f6,#2563eb)';
|
||||||
|
$btnText = $hasUpdate ? '⚡ Updaten' : '🔄 Herbouwen';
|
||||||
|
|
||||||
|
$jarFileName = '';
|
||||||
|
if ($jarExists) {
|
||||||
|
$jarSize = shell_exec('ls -lh ' . escapeshellarg($jarPath) . '/*.jar 2>/dev/null | head -1');
|
||||||
|
if ($jarSize) {
|
||||||
|
preg_match('/(\S+\.jar)/', $jarSize, $matches);
|
||||||
|
if (isset($matches[1])) {
|
||||||
|
$jarFileName = basename($matches[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
<div style="display:flex;flex-direction:column;gap:8px;font-size:13px;">
|
||||||
|
<div style="display:flex;gap:16px;">
|
||||||
|
@if ($emulatorOnline)
|
||||||
|
<span style="color:#22c55e;">✓ Online</span>
|
||||||
|
@else
|
||||||
|
<span style="color:#ef4444;">✗ Offline</span>
|
||||||
|
@endif
|
||||||
|
@if ($jarExists)
|
||||||
|
<span style="color:#22c55e;">✓ JAR OK</span>
|
||||||
|
@else
|
||||||
|
<span style="color:#ef4444;">✗ JAR ontbreekt</span>
|
||||||
|
@endif
|
||||||
|
<span style="color:#3b82f6;">Service: {{ e($serviceName) }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="padding-top:8px;border-top:1px solid #e2e8f0;">
|
||||||
|
<div style="font-weight:600;color:#475569;margin-bottom:8px;">GitHub Status:</div>
|
||||||
|
<div style="background:{{ $hasUpdate ? '#fef3c7' : '#dcfce7' }};padding:12px;border-radius:8px;margin-bottom:12px;">
|
||||||
|
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||||
|
<div style="display:flex;align-items:center;gap:8px;font-weight:600;color:{{ $updateColor }};">
|
||||||
|
{{ $updateText }}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
wire:click="checkEmulatorUpdates"
|
||||||
|
style="background:{{ $btnGradient }};padding:8px 16px;border-radius:6px;color:white;border:none;cursor:pointer;font-weight:600;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,0.2);transition:transform 0.2s,box-shadow 0.2s;"
|
||||||
|
onmouseover="this.style.transform='translateY(-1px)';this.style.boxShadow='0 4px 12px rgba(0,0,0,0.3)'"
|
||||||
|
onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 2px 8px rgba(0,0,0,0.2)'"
|
||||||
|
>
|
||||||
|
{{ $btnText }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>Latest:</span><span style="color:#22c55e;font-weight:600;">✓ {{ e($remoteVersion) }}</span></div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>Source:</span><span style="color:#22c55e;font-weight:600;">✓ {{ $sourceCommitShort }}</span></div>
|
||||||
|
@if ($jarFileName !== '')
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>JAR:</span><span style="color:#22c55e;font-weight:600;">✓ {{ e($jarFileName) }}</span></div>
|
||||||
|
@endif
|
||||||
|
@if ($canBuild)
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:6px 0;"><span>Bouwen:</span><span style="color:#22c55e;font-weight:600;">✓ Maven (pom.xml)</span></div>
|
||||||
|
@else
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:6px 0;"><span>Bouwen:</span><span style="color:#f59e0b;font-weight:600;">⚠️ Geen pom.xml</span></div>
|
||||||
|
@endif
|
||||||
|
<div style="margin-top:12px;padding:12px;background:#f8fafc;border-radius:8px;">
|
||||||
|
<div style="font-size:11px;color:#64748b;font-weight:600;margin-bottom:8px;">METHODE:</div>
|
||||||
|
@if ($jarExists)
|
||||||
|
<div style="color:#3b82f6;font-weight:600;">📦 JAR Download & Herstart</div>
|
||||||
|
@elseif ($canBuild)
|
||||||
|
<div style="color:#3b82f6;font-weight:600;">🔨 Maven Build & Herstart</div>
|
||||||
|
@else
|
||||||
|
<div style="color:#64748b;">Handmatig: Download JAR van GitHub</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
@props([
|
||||||
|
'serviceStatus',
|
||||||
|
'serviceColor',
|
||||||
|
'onlineUsers',
|
||||||
|
'emulatorStatus',
|
||||||
|
'dbStatus',
|
||||||
|
'dbColor',
|
||||||
|
'clientExists',
|
||||||
|
'clientColor',
|
||||||
|
'clientText',
|
||||||
|
'rendererExists',
|
||||||
|
'rendererColor',
|
||||||
|
'rendererText',
|
||||||
|
'webrootText',
|
||||||
|
'webrootColor',
|
||||||
|
])
|
||||||
|
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px;">
|
||||||
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||||
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
|
||||||
|
<div style="background:#3b82f615;padding:10px;border-radius:12px;">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/></svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">Emulator</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;">
|
||||||
|
<span style="color:#64748b;">Status</span>
|
||||||
|
<span style="font-weight:600;color:{{ $serviceColor }};background:{{ $serviceColor }}15;padding:2px 10px;border-radius:20px;font-size:12px;">{{ $serviceStatus }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;">
|
||||||
|
<span style="color:#64748b;">Online</span>
|
||||||
|
<span style="font-weight:600;color:#1e293b;">{{ $emulatorStatus }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;">
|
||||||
|
<span style="color:#64748b;">Gebruikers</span>
|
||||||
|
<span style="font-weight:700;color:#22c55e;font-size:18px;">{{ $onlineUsers }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:10px 0;">
|
||||||
|
<span style="color:#64748b;">Database</span>
|
||||||
|
<span style="font-weight:600;color:{{ $dbColor }};">{{ $dbStatus }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||||
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
|
||||||
|
<div style="background:#8b5cf615;padding:10px;border-radius:12px;">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">Nitro</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;">
|
||||||
|
<span style="color:#64748b;">Client</span>
|
||||||
|
<span style="font-weight:600;color:{{ $clientColor }};background:{{ $clientColor }}15;padding:2px 10px;border-radius:20px;font-size:12px;">{{ $clientText }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;">
|
||||||
|
<span style="color:#64748b;">Renderer</span>
|
||||||
|
<span style="font-weight:600;color:{{ $rendererColor }};background:{{ $rendererColor }}15;padding:2px 10px;border-radius:20px;font-size:12px;">{{ $rendererText }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:10px 0;">
|
||||||
|
<span style="color:#64748b;">Webroot</span>
|
||||||
|
<span style="font-weight:600;color:{{ $webrootColor }};background:{{ $webrootColor }}15;padding:2px 10px;border-radius:20px;font-size:12px;">{{ $webrootText }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
+41
@@ -0,0 +1,41 @@
|
|||||||
|
@props([
|
||||||
|
'nitroBranchesHtml',
|
||||||
|
'nitroStatusHtml',
|
||||||
|
])
|
||||||
|
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;">
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Client Pad</label>
|
||||||
|
<input type="text" wire:model="data.nitro_client_path" placeholder="/var/www/atomcms/nitro-client" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Renderer Pad</label>
|
||||||
|
<input type="text" wire:model="data.nitro_renderer_path" placeholder="/var/www/atomcms/nitro-renderer" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Build Pad</label>
|
||||||
|
<input type="text" wire:model="data.nitro_build_path" placeholder="/var/www/atomcms/nitro-client/dist" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Webroot</label>
|
||||||
|
<input type="text" wire:model="data.nitro_webroot" placeholder="/var/www/Client" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">GitHub URL</label>
|
||||||
|
<input type="text" wire:model="data.nitro_github_url" placeholder="https://github.com/..." style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Branch</label>
|
||||||
|
<select wire:model="data.nitro_github_branch" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;background:#fff;">
|
||||||
|
{!! $nitroBranchesHtml !!}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Site URL</label>
|
||||||
|
<input type="text" wire:model="data.nitro_site_url" placeholder="https://hotel.nl" style="width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label style="display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;">Status</label>
|
||||||
|
{!! $nitroStatusHtml !!}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
@props([
|
||||||
|
'clientExists',
|
||||||
|
'rendererExists',
|
||||||
|
'webrootExists',
|
||||||
|
'clientCommit',
|
||||||
|
'rendererCommit',
|
||||||
|
'clientRemote',
|
||||||
|
'rendererRemote',
|
||||||
|
])
|
||||||
|
|
||||||
|
@php
|
||||||
|
$clientCommitShort = substr($clientCommit, 0, 7);
|
||||||
|
$rendererCommitShort = substr($rendererCommit, 0, 7);
|
||||||
|
$hasClientUpdate = $clientCommitShort !== 'N/A' && $clientRemote !== 'N/A' && $clientCommitShort !== $clientRemote;
|
||||||
|
$hasRendererUpdate = $rendererCommitShort !== 'N/A' && $rendererRemote !== 'N/A' && $rendererCommitShort !== $rendererRemote;
|
||||||
|
$hasUpdate = $hasClientUpdate || $hasRendererUpdate;
|
||||||
|
$updateColor = $hasUpdate ? '#f59e0b' : '#22c55e';
|
||||||
|
$updateText = $hasUpdate ? '🔄 Update beschikbaar' : '✓ Up-to-date';
|
||||||
|
$clientColor = $hasClientUpdate ? '#f59e0b' : '#22c55e';
|
||||||
|
$clientIcon = $hasClientUpdate ? '🔄' : '✓';
|
||||||
|
$rendererColor = $hasRendererUpdate ? '#f59e0b' : '#22c55e';
|
||||||
|
$rendererIcon = $hasRendererUpdate ? '🔄' : '✓';
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
<div style="display:flex;flex-direction:column;gap:4px;font-size:13px;">
|
||||||
|
@if ($clientExists)
|
||||||
|
<span style="color:#22c55e;">✓ Client OK</span>
|
||||||
|
@else
|
||||||
|
<span style="color:#ef4444;">✗ Client ontbreekt</span>
|
||||||
|
@endif
|
||||||
|
@if ($rendererExists)
|
||||||
|
<span style="color:#22c55e;">✓ Renderer OK</span>
|
||||||
|
@else
|
||||||
|
<span style="color:#ef4444;">✗ Renderer ontbreekt</span>
|
||||||
|
@endif
|
||||||
|
@if ($webrootExists)
|
||||||
|
<span style="color:#22c55e;">✓ Webroot OK</span>
|
||||||
|
@else
|
||||||
|
<span style="color:#ef4444;">✗ Webroot ontbreekt</span>
|
||||||
|
@endif
|
||||||
|
<div style="margin-top:8px;padding-top:8px;border-top:1px solid #e2e8f0;">
|
||||||
|
<div style="font-weight:600;color:#475569;margin-bottom:8px;">GitHub Status:</div>
|
||||||
|
<div style="background:{{ $hasUpdate ? '#fef3c7' : '#dcfce7' }};padding:12px;border-radius:8px;margin-bottom:12px;">
|
||||||
|
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||||
|
<div style="display:flex;align-items:center;gap:8px;font-weight:600;color:{{ $updateColor }};">
|
||||||
|
{{ $updateText }}
|
||||||
|
</div>
|
||||||
|
@if ($hasUpdate)
|
||||||
|
<button
|
||||||
|
wire:click="checkNitroUpdates"
|
||||||
|
style="background:linear-gradient(135deg,#ec4899,#db2777);padding:8px 16px;border-radius:6px;color:white;border:none;cursor:pointer;font-weight:600;font-size:12px;box-shadow:0 2px 8px rgba(236,72,153,0.4);transition:transform 0.2s,box-shadow 0.2s;"
|
||||||
|
onmouseover="this.style.transform='translateY(-1px)';this.style.boxShadow='0 4px 12px rgba(236,72,153,0.5)'"
|
||||||
|
onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 2px 8px rgba(236,72,153,0.4)'"
|
||||||
|
>
|
||||||
|
⚡ Updaten
|
||||||
|
</button>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>Client Remote:</span><span style="color:#22c55e;font-weight:600;">✓ {{ e($clientRemote) }}</span></div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>Client Local:</span><span style="color:{{ $clientColor }};font-weight:600;">{{ $clientIcon }} {{ $clientCommitShort }}</span></div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;"><span>Renderer Remote:</span><span style="color:#22c55e;font-weight:600;">✓ {{ e($rendererRemote) }}</span></div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:6px 0;"><span>Renderer Local:</span><span style="color:{{ $rendererColor }};font-weight:600;">{{ $rendererIcon }} {{ $rendererCommitShort }}</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
@props([
|
||||||
|
'phpVersion',
|
||||||
|
'laravelVersion',
|
||||||
|
'memoryUsage',
|
||||||
|
'memoryLimit',
|
||||||
|
'diskUsage',
|
||||||
|
'uptime',
|
||||||
|
'load1',
|
||||||
|
'load5',
|
||||||
|
'load15',
|
||||||
|
])
|
||||||
|
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px;">
|
||||||
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||||
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
|
||||||
|
<div style="background:#6366f115;padding:10px;border-radius:12px;">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2"><path d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/></svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">PHP & Laravel</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;">
|
||||||
|
<span style="color:#64748b;">PHP</span>
|
||||||
|
<span style="font-weight:600;color:#6366f1;">{{ $phpVersion }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:8px 0;">
|
||||||
|
<span style="color:#64748b;">Laravel</span>
|
||||||
|
<span style="font-weight:600;color:#6366f1;">{{ $laravelVersion }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||||
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
|
||||||
|
<div style="background:#ec489915;padding:10px;border-radius:12px;">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ec4899" stroke-width="2"><path d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/></svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">Memory & Disk</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;">
|
||||||
|
<span style="color:#64748b;">Memory</span>
|
||||||
|
<span style="font-weight:600;color:#ec4899;">{{ $memoryUsage }}MB / {{ $memoryLimit }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;padding:8px 0;">
|
||||||
|
<span style="color:#64748b;">Disk</span>
|
||||||
|
<span style="font-weight:600;color:#ec4899;">{{ $diskUsage }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||||
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
|
||||||
|
<div style="background:#22c55e15;padding:10px;border-radius:12px;">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">Uptime</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:16px;font-weight:700;color:#22c55e;">{{ $uptime }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||||
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
|
||||||
|
<div style="background:#f59e0b15;padding:10px;border-radius:12px;">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||||
|
</div>
|
||||||
|
<span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">Load</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;gap:8px;">
|
||||||
|
<div style="flex:1;text-align:center;padding:8px;background:#f8fafc;border-radius:8px;">
|
||||||
|
<div style="font-size:10px;color:#94a3b8;">1m</div>
|
||||||
|
<div style="font-weight:700;color:#22c55e;">{{ $load1 }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="flex:1;text-align:center;padding:8px;background:#f8fafc;border-radius:8px;">
|
||||||
|
<div style="font-size:10px;color:#94a3b8;">5m</div>
|
||||||
|
<div style="font-weight:700;color:#f59e0b;">{{ $load5 }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="flex:1;text-align:center;padding:8px;background:#f8fafc;border-radius:8px;">
|
||||||
|
<div style="font-size:10px;color:#94a3b8;">15m</div>
|
||||||
|
<div style="font-weight:700;color:#ef4444;">{{ $load15 }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
+59
@@ -0,0 +1,59 @@
|
|||||||
|
@props(['activities'])
|
||||||
|
|
||||||
|
@php
|
||||||
|
use App\Models\StaffActivity;
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
@if ($activities->isEmpty())
|
||||||
|
<div style="text-align:center;padding:40px;color:#9ca3af;">
|
||||||
|
<svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin:0 auto 16px;opacity:0.5;">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
<p>No staff activities recorded yet.</p>
|
||||||
|
<p style="font-size:12px;margin-top:8px;">Staff actions will appear here automatically.</p>
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;">
|
||||||
|
<div style="padding:16px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;">
|
||||||
|
<span style="font-weight:600;color:#1e293b;">Recent Staff Activities</span>
|
||||||
|
<span style="font-size:12px;color:#9ca3af;">Last 20 actions</span>
|
||||||
|
</div>
|
||||||
|
<div style="max-height:400px;overflow-y:auto;">
|
||||||
|
@foreach ($activities as $activity)
|
||||||
|
@php
|
||||||
|
$icon = StaffActivity::getActionIcon($activity->action);
|
||||||
|
$timeAgo = '';
|
||||||
|
try {
|
||||||
|
$carbon = \Carbon\Carbon::parse($activity->created_at);
|
||||||
|
$now = \Carbon\Carbon::now();
|
||||||
|
$diff = $now->diffInMinutes($carbon);
|
||||||
|
if ($diff < 1) {
|
||||||
|
$timeAgo = 'Just now';
|
||||||
|
} elseif ($diff < 60) {
|
||||||
|
$timeAgo = $diff . 'm ago';
|
||||||
|
} elseif ($diff < 1440) {
|
||||||
|
$timeAgo = floor($diff / 60) . 'h ago';
|
||||||
|
} else {
|
||||||
|
$timeAgo = floor($diff / 1440) . 'd ago';
|
||||||
|
}
|
||||||
|
} catch (\Exception) {
|
||||||
|
$timeAgo = 'Unknown';
|
||||||
|
}
|
||||||
|
$username = $activity->user->username ?? 'Unknown';
|
||||||
|
@endphp
|
||||||
|
<div style="display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid #e2e8f0;">
|
||||||
|
<div style="width:36px;height:36px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:18px;">
|
||||||
|
{{ $icon }}
|
||||||
|
</div>
|
||||||
|
<div style="flex:1;">
|
||||||
|
<div style="font-weight:600;color:#1e293b;font-size:14px;">{{ e($username) }}</div>
|
||||||
|
<div style="color:#64748b;font-size:12px;">{{ e($activity->description) }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:right;">
|
||||||
|
<span style="font-size:11px;color:#9ca3af;">{{ $timeAgo }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
+23
@@ -0,0 +1,23 @@
|
|||||||
|
@props(['history'])
|
||||||
|
|
||||||
|
@if (empty($history))
|
||||||
|
<div style="padding:20px;text-align:center;color:#64748b;">Geen updates gevonden</div>
|
||||||
|
@else
|
||||||
|
<div style="display:flex;flex-direction:column;gap:8px;">
|
||||||
|
@foreach ($history as $update)
|
||||||
|
@php
|
||||||
|
$statusColor = $update->status === 'success' ? '#22c55e' : ($update->status === 'pending' ? '#f59e0b' : '#ef4444');
|
||||||
|
@endphp
|
||||||
|
<div style="display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:12px 16px;">
|
||||||
|
<div>
|
||||||
|
<span style="font-weight:600;color:#1e293b;">{{ e($update->type) }}</span>
|
||||||
|
<span style="color:#64748b;margin-left:8px;">{{ e($update->message) }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;align-items:center;gap:8px;">
|
||||||
|
<span style="color:{{ $statusColor }};font-weight:600;">{{ e($update->status) }}</span>
|
||||||
|
<span style="color:#94a3b8;font-size:12px;">{{ e($update->created_at) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
Reference in New Issue
Block a user