FJurmanovic/acc-server-manager-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add player count and track

Browse Source
This commit is contained in:
Fran Jurmanović
2025-05-24 00:46:50 +02:00
parent 12a9e55f5a
commit f10150776d
3 changed files with 78 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/EditorAssistRules.svelte
View File

@@ -166,24 +166,24 @@
</div> </div>
</div> </div>
<div class="pt-4 border-t border-gray-700"> <div class="pt-4 border-t border-gray-700">
<label class="flex items-center"> <label class="flex items-center">
<input <input
type="checkbox" type="checkbox"
bind:checked={restart} bind:checked={restart}
class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-600 rounded bg-gray-700" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-600 rounded bg-gray-700"
/> />
<span class="ml-2 text-sm text-gray-300">Restart server after saving</span> <span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
</label> </label>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<button <button
type="submit" type="submit"
disabled={formLoading} disabled={formLoading}
class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md text-sm font-medium" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md text-sm font-medium"
> >
Save Changes Save Changes
</button> </button>
</div> </div>
</form> </form>

98
src/components/ServerCard.svelte
View File

@@ -5,81 +5,85 @@
function getStatusColor(status: string) { function getStatusColor(status: string) {
switch (status) { switch (status) {
case 'SERVICE_RUNNING\r\n': return 'bg-green-500'; case 'SERVICE_RUNNING\r\n':
case 'SERVICE_STOPPED\r\n': return 'bg-red-500'; return 'bg-green-500';
case 'SERVICE_RESTARTING\r\n': return 'bg-yellow-500'; case 'SERVICE_STOPPED\r\n':
default: return 'bg-gray-500'; return 'bg-red-500';
case 'SERVICE_RESTARTING\r\n':
return 'bg-yellow-500';
default:
return 'bg-gray-500';
} }
} }
</script> </script>
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-700"> <div class="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
<a <a href={`dashboard/server/${server.id}`}>
href={`dashboard/server/${server.id}`}
>
<div class="p-4"> <div class="p-4">
<div class="flex justify-between items-start"> <div class="flex items-start justify-between">
<div> <div>
<h3 class="text-lg font-medium">{server.name}</h3> <h3 class="text-lg font-medium">{server.name}</h3>
<div class="flex items-center mt-1"> <div class="mt-1 flex items-center">
<span class={`inline-block w-2 h-2 rounded-full ${getStatusColor(server.status)} mr-2`}></span> <span class={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
<span class="text-sm capitalize">{server.status}</span> ></span>
<span class="text-sm capitalize">{server.status}</span>
</div>
</div> </div>
<button class="text-gray-400 hover:text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
/>
</svg>
</button>
</div> </div>
<button
class="text-gray-400 hover:text-white"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
</svg>
</button>
</div>
<div class="mt-4 grid grid-cols-2 gap-2 text-sm text-gray-300"> <div class="mt-4 grid grid-cols-2 gap-2 text-sm text-gray-300">
<div> <div>
<span class="text-gray-500">Track:</span> {server.track} <span class="text-gray-500">Track:</span>
</div> {server.state.track}
<div> </div>
<span class="text-gray-500">Class:</span> {server.carClass} <div>
</div> <span class="text-gray-500">Players:</span>
<div> {server.state.playerCount}
<span class="text-gray-500">Players:</span> {server.players} </div>
</div>
<div>
<span class="text-gray-500">Uptime:</span> {server.uptime}
</div>
</div> </div>
</div> </div>
</a> </a>
<form method="POST" action="?/start"> <form method="POST" action="?/start">
<div class="bg-gray-900 px-4 py-3 flex justify-between"> <div class="flex justify-between bg-gray-900 px-4 py-3">
<input type="hidden" name="id" value={server.id} /> <input type="hidden" name="id" value={server.id} />
<button <button
type="submit" type="submit"
disabled={server.status.startsWith('SERVICE_RUNNING')} disabled={server.status.startsWith('SERVICE_RUNNING')}
onclick={(e) => e.stopPropagation()} onclick={(e) => e.stopPropagation()}
class="px-3 py-1 bg-green-600 hover:bg-green-700 rounded-md text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed" class="rounded-md bg-green-600 px-3 py-1 text-xs font-medium hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
> >
Start Start
</button> </button>
<button <button
disabled={server.status.startsWith('SERVICE_STOPPED')} disabled={server.status.startsWith('SERVICE_STOPPED')}
onclick={(e) => e.stopPropagation()} onclick={(e) => e.stopPropagation()}
class="px-3 py-1 bg-yellow-600 hover:bg-yellow-700 rounded-md text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed" class="rounded-md bg-yellow-600 px-3 py-1 text-xs font-medium hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
formaction="?/restart" formaction="?/restart"
> >
Restart Restart
</button> </button>
<button <button
disabled={server.status.startsWith('SERVICE_STOPPED')} disabled={server.status.startsWith('SERVICE_STOPPED')}
onclick={(e) => e.stopPropagation()} onclick={(e) => e.stopPropagation()}
class="px-3 py-1 bg-red-600 hover:bg-red-700 rounded-md text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed" class="rounded-md bg-red-600 px-3 py-1 text-xs font-medium hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
formaction="?/stop" formaction="?/stop"
> >
Stop Stop
</button> </button>
</div> </div>
</form> </form>
</div> </div>

10
src/models/server.ts
View File

@@ -1,5 +1,13 @@
interface State {
session: string;
playerCount: number;
track: string;
maxConnections: number;
}
export interface Server { export interface Server {
id: number; id: number;
name: string; name: string;
status: string; status: string;
} state: State;
}