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

feat: implement server icon customization with AJAX support

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-06 10:06:09 -05:00
parent ecb037ce04
commit b6987ab1e8
4 changed files with 209 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/Http/Controllers/ServerIconController.php Normal file
View File

@@ -0,0 +1,42 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Paymenter\Extensions\Servers\Proxmox\Models\Server;
class ServerIconController extends Controller
{
// Update the icon and color for a server
public function update(Request $request, $serverId)
{
$request->validate([
'icon' => 'nullable|string|max:64',
'color' => 'nullable|string|max:32',
]);
$server = Server::where('id', $serverId)
->where('user_id', Auth::id())
->firstOrFail();
$server->user_set_icon = $request->input('icon');
$server->user_set_icon_color = $request->input('color');
$server->save();
return response()->json(['success' => true]);
}
// Get the icon and color for a server
public function show($serverId)
{
$server = Server::where('id', $serverId)
->where('user_id', Auth::id())
->firstOrFail();
return response()->json([
'icon' => $server->user_set_icon,
'color' => $server->user_set_icon_color,
]);
}
}

39
extensions/Servers/Proxmox/Http/Controllers/ServerIconController.php Normal file
View File

@@ -0,0 +1,39 @@
<?php
namespace Paymenter\Extensions\Servers\Proxmox\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Paymenter\Extensions\Servers\Proxmox\Models\Server;
class ServerIconController
{
public function update(Request $request, $serverId)
{
$request->validate([
'icon' => 'nullable|string|max:64',
'color' => 'nullable|string|max:32',
]);
$server = Server::where('id', $serverId)
->where('user_id', Auth::id())
->firstOrFail();
$server->user_set_icon = $request->input('icon');
$server->user_set_icon_color = $request->input('color');
$server->save();
return response()->json(['success' => true]);
}
public function get($serverId)
{
$server = Server::where('id', $serverId)
->where('user_id', Auth::id())
->firstOrFail();
return response()->json([
'icon' => $server->user_set_icon,
'color' => $server->user_set_icon_color,
]);
}
}

121
extensions/Servers/Proxmox/views/overview.blade.php
View File

@@ -75,6 +75,127 @@
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 min-w-0">
<h2 class="text-xl font-semibold break-words">Server Details</h2>
<!-- Standalone Server Icon Customization (Alpine.js, AJAX) -->
<div x-data="serverIconModal({
serverId: '{{ $server->id }}',
initialIcon: @json($server->user_set_icon),
initialColor: @json($server->user_set_icon_color)
})" class="flex items-center gap-2">
<button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="p-2 rounded-lg bg-secondary/10 hover:bg-secondary/20 transition-colors">
<template x-if="icon">
<x-dynamic-component :is="'x-ri-' + icon" class="size-5" :style="color ? 'color: ' + color : ''" />
</template>
<template x-if="!icon">
<x-ri-server-line class="size-5 text-secondary" />
</template>
</button>
<!-- Modal -->
<div x-show="show" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div class="bg-white dark:bg-background-secondary rounded-xl shadow-2xl p-6 w-full max-w-md relative">
<button @click="closeModal()" class="absolute top-3 right-3 text-base/50 hover:text-base transition-colors">
<x-ri-close-line class="size-5" />
</button>
<h3 class="text-lg font-semibold mb-4">Customize Server Icon</h3>
<div class="flex items-center gap-4 mb-4">
<div class="size-12 rounded-xl border flex items-center justify-center" :style="color ? 'color: ' + color + '; border-color: ' + color : ''">
<template x-if="icon">
<x-dynamic-component :is="'x-ri-' + icon" class="size-8" />
</template>
<template x-if="!icon">
<x-ri-server-line class="size-8 text-base/40" />
</template>
</div>
<input x-model="search" type="text" placeholder="Search icons..." class="border rounded px-2 py-1 text-sm w-40" />
</div>
<div class="grid grid-cols-6 gap-2 mb-4 max-h-32 overflow-y-auto">
<template x-for="i in filteredIcons" :key="i">
<button @click="icon = i" :class="icon === i ? 'ring-2 ring-primary' : ''" class="rounded p-1 border flex items-center justify-center">
<x-dynamic-component :is="'x-ri-' + i" class="size-5" />
</button>
</template>
</div>
<div class="flex flex-wrap gap-2 mb-4">
<template x-for="c in colors" :key="c">
<button @click="color = c" :style="'background:' + (c || '#e5e7eb')" :class="color === c ? 'ring-2 ring-primary' : ''" class="size-6 rounded-full border"></button>
</template>
</div>
<div class="flex gap-2 justify-end">
<button @click="resetIcon()" class="text-xs text-base/60 hover:text-danger">Reset</button>
<button @click="saveIcon()" class="px-3 py-1 rounded bg-primary text-white text-xs hover:bg-primary/80">Save</button>
</div>
<template x-if="message">
<div class="mt-2 text-xs text-success" x-text="message"></div>
</template>
</div>
</div>
</div>
<script>
function serverIconModal({serverId, initialIcon, initialColor}) {
return {
show: false,
icon: initialIcon || '',
color: initialColor || '',
search: '',
message: '',
icons: [
'server-line', 'database-2-line', 'computer-line', 'cpu-line', 'hard-drive-2-line',
'cloud-line', 'terminal-box-line', 'code-s-slash-line', 'braces-line',
'global-line', 'earth-line', 'wifi-line', 'signal-tower-line',
'shield-check-line', 'shield-keyhole-line', 'lock-line', 'lock-unlock-line', 'key-2-line',
'rocket-line', 'rocket-2-line', 'send-plane-line', 'flashlight-line', 'fire-line',
'sparkling-line', 'star-line', 'heart-line', 'home-line', 'home-2-line',
'building-line', 'building-2-line', 'store-line', 'box-3-line', 'archive-line',
'inbox-line', 'inbox-2-line', 'folder-line', 'folder-open-line',
'settings-3-line', 'settings-4-line', 'tools-line', 'hammer-line',
'flask-line', 'bug-line', 'puzzle-line', 'bar-chart-box-line', 'pie-chart-line',
'line-chart-line', 'money-dollar-circle-line', 'money-euro-circle-line',
'bank-card-line', 'wallet-line', 'user-line', 'user-3-line', 'group-line', 'team-line',
'mail-line', 'mail-open-line', 'chat-3-line', 'discuss-line',
'camera-line', 'vidicon-line', 'film-line', 'music-line',
'book-open-line', 'file-text-line', 'sun-line', 'moon-line',
'palette-line', 'brush-line', 'trophy-line', 'graduation-cap-line',
'lightbulb-line', 'fingerprint-line', 'eye-line', 'map-2-line', 'map-pin-line',
'time-line', 'calendar-line', 'gift-line', 'cake-2-line',
'gamepad-line', 'ghost-line', 'aliens-line', 'space-ship-line',
'android-line', 'apple-line', 'windows-line', 'ubuntu-line',
'github-line', 'gitlab-line', 'discord-line', 'slack-line'
],
colors: [
'', '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981',
'#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7',
'#d946ef', '#ec4899', '#f43f5e', '#78716c', '#64748b'
],
get filteredIcons() {
if (!this.search) return this.icons;
const q = this.search.toLowerCase();
return this.icons.filter(i => i.toLowerCase().includes(q));
},
openModal() { this.show = true; this.message = ''; },
closeModal() { this.show = false; },
resetIcon() {
this.icon = '';
this.color = '';
},
saveIcon() {
fetch(`/proxmox/server/${serverId}/icon`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content
},
body: JSON.stringify({ icon: this.icon, color: this.color })
})
.then(r => r.json())
.then(data => {
if (data.success) {
this.message = 'Icon saved!';
setTimeout(() => { this.closeModal(); location.reload(); }, 800);
}
});
}
}
}
</script>
<div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
<x-ri-question-line class="size-4" />

7
routes/web.php
View File

@@ -1,3 +1,10 @@
// Server icon API (AJAX, not Livewire)
use App\Http\Controllers\ServerIconController;
Route::middleware(['web', 'auth'])->group(function () {
Route::get('/proxmox/server/{server}/icon', [ServerIconController::class, 'show']);
Route::post('/proxmox/server/{server}/icon', [ServerIconController::class, 'update']);
});
<?php
use App\Http\Controllers\SocialLoginController;