update statuses to enums

src/components/ServerCard.svelte

@@ -1,20 +1,8 @@
 <script lang="ts">
 	import type { Server } from '$models/server';
+	import { getStatusColor, ServiceStatus } from '$lib/types/serviceStatus';
 
 	let { server }: { server: Server } = $props();
-
-	function getStatusColor(status: string) {
-		switch (status) {
-			case 'SERVICE_RUNNING\r\n':
-				return 'bg-green-500';
-			case 'SERVICE_STOPPED\r\n':
-				return 'bg-red-500';
-			case 'SERVICE_RESTARTING\r\n':
-				return 'bg-yellow-500';
-			default:
-				return 'bg-gray-500';
-		}
-	}
 </script>
 
 <div class="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
@@ -61,14 +49,14 @@
 			<input type="hidden" name="id" value={server.id} />
 			<button
 				type="submit"
-				disabled={server.status.startsWith('SERVICE_RUNNING')}
+				disabled={server.status === ServiceStatus.Running}
 				onclick={(e) => e.stopPropagation()}
 				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
 			</button>
 			<button
-				disabled={server.status.startsWith('SERVICE_STOPPED')}
+				disabled={server.status === ServiceStatus.Stopped}
 				onclick={(e) => e.stopPropagation()}
 				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"
@@ -76,7 +64,7 @@
 				Restart
 			</button>
 			<button
-				disabled={server.status.startsWith('SERVICE_STOPPED')}
+				disabled={server.status === ServiceStatus.Stopped}
 				onclick={(e) => e.stopPropagation()}
 				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"

src/lib/types/server.ts

@@ -0,0 +1,32 @@
+import type { ServiceStatus } from './serviceStatus';
+
+export interface ServerState {
+	session: string;
+	sessionStart: string;
+	playerCount: number;
+	track: string;
+	maxConnections: number;
+}
+
+export interface Server {
+	id: number;
+	name: string;
+	status: ServiceStatus;
+	state: ServerState;
+}
+
+// Helper function to parse server data from API
+export const parseServer = (data: any): Server => {
+	return {
+		id: data.id,
+		name: data.name,
+		status: data.status,
+		state: {
+			session: data.state.session,
+			sessionStart: data.state.sessionStart,
+			playerCount: data.state.playerCount,
+			track: data.state.track,
+			maxConnections: data.state.maxConnections
+		}
+	};
+};

src/lib/types/serviceStatus.ts

@@ -0,0 +1,76 @@
+export enum ServiceStatus {
+	Unknown,
+	Stopped,
+	Stopping,
+	Restarting,
+	Starting,
+	Running
+}
+
+export const serviceStatusToString = (status: ServiceStatus): string => {
+	switch (status) {
+		case ServiceStatus.Running:
+			return 'Running';
+		case ServiceStatus.Stopped:
+			return 'Stopped';
+		case ServiceStatus.Starting:
+			return 'Starting';
+		case ServiceStatus.Stopping:
+			return 'Stopping';
+		case ServiceStatus.Restarting:
+			return 'Restarting';
+		default:
+			return 'Unknown';
+	}
+};
+
+export const parseServiceStatus = (status: string): ServiceStatus => {
+	switch (status) {
+		case 'Running':
+			return ServiceStatus.Running;
+		case 'SERVICE_STOPPED':
+			return ServiceStatus.Stopped;
+		case 'SERVICE_STARTING':
+			return ServiceStatus.Starting;
+		case 'SERVICE_STOPPING':
+			return ServiceStatus.Stopping;
+		case 'SERVICE_RESTARTING':
+			return ServiceStatus.Restarting;
+		default:
+			return ServiceStatus.Unknown;
+	}
+};
+
+export const getStatusColor = (status: ServiceStatus): string => {
+	switch (status) {
+		case ServiceStatus.Running:
+			return 'text-green-500';
+		case ServiceStatus.Stopped:
+			return 'text-red-500';
+		case ServiceStatus.Starting:
+			return 'text-blue-500';
+		case ServiceStatus.Stopping:
+			return 'text-yellow-500';
+		case ServiceStatus.Restarting:
+			return 'text-purple-500';
+		default:
+			return 'text-gray-500';
+	}
+};
+
+export const getStatusIcon = (status: ServiceStatus): string => {
+	switch (status) {
+		case ServiceStatus.Running:
+			return '🟢'; // or use an icon library like 'play-circle'
+		case ServiceStatus.Stopped:
+			return '🔴'; // or 'stop-circle'
+		case ServiceStatus.Starting:
+			return '🔵'; // or 'arrow-up-circle'
+		case ServiceStatus.Stopping:
+			return '🟡'; // or 'arrow-down-circle'
+		case ServiceStatus.Restarting:
+			return '🟣'; // or 'refresh-circle'
+		default:
+			return '⚪'; // or 'help-circle'
+	}
+};

src/models/server.ts

@@ -1,13 +1,15 @@
+import type { ServiceStatus } from '$lib/types/serviceStatus';
+
 interface State {
-    session: string;
-    playerCount: number;
-    track: string;
-    maxConnections: number;
+	session: string;
+	playerCount: number;
+	track: string;
+	maxConnections: number;
 }
 
 export interface Server {
-    id: number;
-    name: string;
-    status: string;
-    state: State;
+	id: number;
+	name: string;
+	status: ServiceStatus;
+	state: State;
 }

src/routes/dashboard/server/[id]/+page.svelte

@@ -4,6 +4,7 @@
 	import EditorEvent from '$components/EditorEvent.svelte';
 	import EditorEventRules from '$components/EditorEventRules.svelte';
 	import EditorSettings from '$components/EditorSettings.svelte';
+	import { getStatusColor } from '$lib/types/serviceStatus.js';
 	import { configFile } from '$models/config.js';
 
 	let { data } = $props();
@@ -12,144 +13,156 @@
 	const id = data.id;
 	const server = data.server;
 	let tab = $state(configFile.event);
-
-	function getStatusColor(status: string) {
-		console.log({status})
-		switch (status) {
-		case 'SERVICE_RUNNING\r\n': return 'bg-green-500';
-		case 'SERVICE_STOPPED\r\n': return 'bg-red-500';
-		case 'SERVICE_RESTARTING\r\n': return 'bg-yellow-500';
-		default: return 'bg-gray-500';
-		}
-	}
 </script>
 
 <svelte:head>
 	<title>{server.name}</title>
 </svelte:head>
 
-<div class="min-h-screen bg-gray-900 text-white flex">
-  <!-- Sidebar -->
-  <aside class="w-64 bg-gray-800 border-r border-gray-700 flex-shrink-0">
-    <!-- Update the sidebar header to make the server name clickable -->
-    <div class="p-4 border-b border-gray-700">
-      <a href="/dashboard" class="hover:text-green-400 transition-colors">
-        <h2 class="text-lg font-semibold truncate">{server.name}</h2>
-      </a>
-      <div class="flex items-center mt-1">
-        <span class={`inline-block w-2 h-2 rounded-full ${getStatusColor(server.status)} mr-2`}></span>
-        <span class="text-sm capitalize">{server.status}</span>
-      </div>
-    </div>
-    
-    <nav class="p-2">
-      <ul class="space-y-1">
-        <li>
-          <button 
-            class={`w-full text-left px-3 py-2 rounded-md ${tab === configFile.event ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
-			disabled={tab === configFile.event || !configs.event}
-			onclick={() => (tab = configFile.event)}
-          >
-            Event 
-          </button>
-        </li>
-        <li>
-          <button 
-            class={`w-full text-left px-3 py-2 rounded-md ${tab === configFile.configuration ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
-			disabled={tab === configFile.configuration || !configs.configuration}
-			onclick={() => (tab = configFile.configuration)}
-          >
-            Configuration 
-          </button>
-        </li>
-        <li>
-          <button 
-            class={`w-full text-left px-3 py-2 rounded-md ${tab === configFile.settings ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
-			disabled={tab === configFile.settings || !configs.settings}
-			onclick={() => (tab = configFile.settings)}
-          >
-            Settings 
-          </button>
-        </li>
-		{#if configs.assistRules}
-        <li>
-          <button 
-            class={`w-full text-left px-3 py-2 rounded-md ${tab === configFile.assistRules ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
-			disabled={tab === configFile.assistRules || !configs.assistRules}
-			onclick={() => (tab = configFile.assistRules)}
-          >
-            Assist Rules 
-          </button>
-        </li>
-		{/if}
-		{#if configs.eventRules}
-        <li>
-          <button 
-            class={`w-full text-left px-3 py-2 rounded-md ${tab === configFile.eventRules ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
-			disabled={tab === configFile.eventRules || !configs.eventRules}
-			onclick={() => (tab = configFile.eventRules)}
-          >
-            Event Rules
-          </button>
-        </li>
-		{/if}
-		
-      </ul>
-    </nav>
-  </aside>
-
-<main class="flex-1 overflow-auto">
-    <header class="bg-gray-800 shadow-md p-4 flex justify-between items-center">
-      <h1 class="text-xl font-semibold">
-		{#if tab === configFile.event}
-			Event
-		{:else if tab === configFile.configuration}
-			Configuration
-		{:else if tab === configFile.settings}
-			Settings
-		{:else if tab === configFile.assistRules}
-			Assist Rules
-		{:else if tab === configFile.eventRules}
-			Event Rules
-		{/if}
-      </h1>
-      <div class="flex space-x-3">
-        <a 
-          href="/dashboard" 
-          class="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded-md text-sm flex items-center"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-          </svg>
-          Back to Dashboard
-        </a>
-        <a 
-          href="/logout" 
-          class="px-3 py-1.5 bg-red-700 hover:bg-red-800 rounded-md text-sm flex items-center"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-          </svg>
-          Logout
-        </a>
-      </div>
-    </header>
-    <div class="p-6">
-		{#if tab === configFile.event}
-			<EditorEvent config={configs.event} {tracks} {id} />
-		{:else if tab === configFile.configuration}
-			<EditorConfiguration config={configs.configuration} {id} />
-		{:else if tab === configFile.settings}
-			<EditorSettings config={configs.settings} {id} />
-		{:else if tab === configFile.assistRules}
-			<EditorAssistRules config={configs.assistRules} {id} />
-		{:else if tab === configFile.eventRules}
-			<EditorEventRules config={configs.eventRules} {id} />
-		{:else}
-		<div class="bg-gray-800 rounded-lg p-6 text-center">
-			<p class="text-gray-400">Select a section from the sidebar to edit settings</p>
+<div class="flex min-h-screen bg-gray-900 text-white">
+	<!-- Sidebar -->
+	<aside class="w-64 flex-shrink-0 border-r border-gray-700 bg-gray-800">
+		<!-- Update the sidebar header to make the server name clickable -->
+		<div class="border-b border-gray-700 p-4">
+			<a href="/dashboard" class="transition-colors hover:text-green-400">
+				<h2 class="truncate text-lg font-semibold">{server.name}</h2>
+			</a>
+			<div class="mt-1 flex items-center">
+				<span class={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
+				></span>
+				<span class="text-sm capitalize">{server.status}</span>
+			</div>
 		</div>
-		{/if}
-	</div>
-</main>
+
+		<nav class="p-2">
+			<ul class="space-y-1">
+				<li>
+					<button
+						class={`w-full rounded-md px-3 py-2 text-left ${tab === configFile.event ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
+						disabled={tab === configFile.event || !configs.event}
+						onclick={() => (tab = configFile.event)}
+					>
+						Event
+					</button>
+				</li>
+				<li>
+					<button
+						class={`w-full rounded-md px-3 py-2 text-left ${tab === configFile.configuration ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
+						disabled={tab === configFile.configuration || !configs.configuration}
+						onclick={() => (tab = configFile.configuration)}
+					>
+						Configuration
+					</button>
+				</li>
+				<li>
+					<button
+						class={`w-full rounded-md px-3 py-2 text-left ${tab === configFile.settings ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
+						disabled={tab === configFile.settings || !configs.settings}
+						onclick={() => (tab = configFile.settings)}
+					>
+						Settings
+					</button>
+				</li>
+				{#if configs.assistRules}
+					<li>
+						<button
+							class={`w-full rounded-md px-3 py-2 text-left ${tab === configFile.assistRules ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
+							disabled={tab === configFile.assistRules || !configs.assistRules}
+							onclick={() => (tab = configFile.assistRules)}
+						>
+							Assist Rules
+						</button>
+					</li>
+				{/if}
+				{#if configs.eventRules}
+					<li>
+						<button
+							class={`w-full rounded-md px-3 py-2 text-left ${tab === configFile.eventRules ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
+							disabled={tab === configFile.eventRules || !configs.eventRules}
+							onclick={() => (tab = configFile.eventRules)}
+						>
+							Event Rules
+						</button>
+					</li>
+				{/if}
+			</ul>
+		</nav>
+	</aside>
+
+	<main class="flex-1 overflow-auto">
+		<header class="flex items-center justify-between bg-gray-800 p-4 shadow-md">
+			<h1 class="text-xl font-semibold">
+				{#if tab === configFile.event}
+					Event
+				{:else if tab === configFile.configuration}
+					Configuration
+				{:else if tab === configFile.settings}
+					Settings
+				{:else if tab === configFile.assistRules}
+					Assist Rules
+				{:else if tab === configFile.eventRules}
+					Event Rules
+				{/if}
+			</h1>
+			<div class="flex space-x-3">
+				<a
+					href="/dashboard"
+					class="flex items-center rounded-md bg-gray-700 px-3 py-1.5 text-sm hover:bg-gray-600"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="mr-1 h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M10 19l-7-7m0 0l7-7m-7 7h18"
+						/>
+					</svg>
+					Back to Dashboard
+				</a>
+				<a
+					href="/logout"
+					class="flex items-center rounded-md bg-red-700 px-3 py-1.5 text-sm hover:bg-red-800"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="mr-1 h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+						/>
+					</svg>
+					Logout
+				</a>
+			</div>
+		</header>
+		<div class="p-6">
+			{#if tab === configFile.event}
+				<EditorEvent config={configs.event} {tracks} {id} />
+			{:else if tab === configFile.configuration}
+				<EditorConfiguration config={configs.configuration} {id} />
+			{:else if tab === configFile.settings}
+				<EditorSettings config={configs.settings} {id} />
+			{:else if tab === configFile.assistRules}
+				<EditorAssistRules config={configs.assistRules} {id} />
+			{:else if tab === configFile.eventRules}
+				<EditorEventRules config={configs.eventRules} {id} />
+			{:else}
+				<div class="rounded-lg bg-gray-800 p-6 text-center">
+					<p class="text-gray-400">Select a section from the sidebar to edit settings</p>
+				</div>
+			{/if}
+		</div>
+	</main>
 </div>