Merge pull request #30 from mcserversoft/dev

v5.3.0

Author: Fiahblade

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "mcss-remote-panel",
-	"version": "5.2.0",
+	"version": "5.3.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -12,11 +12,12 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "next",
-		"@sveltejs/adapter-static": "^1.0.0-next.42",
-		"@sveltejs/kit": "next",
-		"@typescript-eslint/eslint-plugin": "^5.27.0",
-		"@typescript-eslint/parser": "^5.27.0",
+		"@sveltejs/adapter-auto": "2.0.0",
+		"@sveltejs/adapter-static": "2.0.0",
+		"@sveltejs/kit": "1.5.0",
+		"@typescript-eslint/eslint-plugin": "^5.51.0",
+		"@typescript-eslint/parser": "^5.51.0",
+		"@vite-pwa/sveltekit": "^0.1.3",
 		"autoprefixer": "^10.4.8",
 		"eslint": "^8.16.0",
 		"eslint-config-prettier": "^8.3.0",
@@ -25,18 +26,18 @@
 		"prettier": "^2.6.2",
 		"prettier-plugin-svelte": "^2.7.0",
 		"svelte": "^3.44.0",
-		"svelte-check": "^2.7.1",
-		"svelte-preprocess": "^4.10.7",
+		"svelte-check": "^3.0.3",
+		"svelte-preprocess": "^5.0.1",
 		"tailwindcss": "^3.1.8",
-		"tslib": "^2.3.1",
+		"tslib": "^2.5.0",
 		"typescript": "^4.7.4",
-		"vite": "^3.1.0",
+		"vite": "^4.1.1",
 		"vite-plugin-zip-pack": "^1.0.5"
 	},
 	"type": "module",
 	"dependencies": {
-		"axios": "^1.2.1",
-		"daisyui": "^2.25.0",
-		"svelte-local-storage-store": "^0.3.1"
+		"axios": "^1.3.2",
+		"daisyui": "^2.50.0",
+		"svelte-local-storage-store": "^0.4.0"
 	}
 }

package.json

@@ -1,22 +1,22 @@
 import axiosClient from '$lib/code/axiosClient';
 import {
-	hasPermission,
-	Permission
+    hasPermission,
+    Permission
 } from '$lib/code/permissions';
 import { calculateUptime } from '$lib/code/shared';
 import { settings } from '$lib/code/storage';
-import { writable as writableStorage } from 'svelte-local-storage-store';
+import { persisted } from 'svelte-local-storage-store';
 import {
-	derived,
-	get,
-	writable
+    derived,
+    get,
+    writable
 } from 'svelte/store';
 
 import type {
-	IServer,
-	Memory,
-	Server,
-	Stats
+    IServer,
+    Memory,
+    Server,
+    Stats
 } from '../../types';
 import { Filter } from '../../types';
 
@@ -25,18 +25,18 @@ export const isOffline = writable(false);
 export const isLoadingServers = writable(false);
 
 // global persistent store
-export const servers = writableStorage<Server[]>('servers', new Array<Server>());
-export const selectedServerGuid = writableStorage('selectedServerGuid', '');
+export const servers = persisted<Server[]>('servers', new Array<Server>());
+export const selectedServerId = persisted('selectedServerId', '');
 
 // this should maybe be moved, api should only have api stuff
 
 // global translations
 export const getSelectedServer = derived(servers, ($servers) => {
     if ($servers) {
-        return $servers.find((s: IServer) => s.guid == get(selectedServerGuid));
+        return $servers.find((s: IServer) => s.serverId == get(selectedServerId));
     }
     return {
-        guid: '',
+        serverId: '',
         name: '',
         description: '',
         status: 0,
@@ -51,7 +51,7 @@ export const getSelectedServer = derived(servers, ($servers) => {
 export function fetchServers(filter: Filter = Filter.None): void {
     isLoadingServers.set(true);
 
-    axiosClient().get(`/api/v1/servers?filter=${filter}`)
+    axiosClient().get(`/api/v2/servers?filter=${filter}`)
         .then((response) => {
             if (response?.status !== 200) {
                 return Promise.reject(response);
@@ -76,7 +76,7 @@ export async function sendServerAction(serverId: string, action: string) {
         return;
     }
 
-    axiosClient().post(`/api/v1/servers/${serverId}/execute/action`, JSON.stringify({ action: action }))
+    axiosClient().post(`/api/v2/servers/${serverId}/execute/action`, JSON.stringify({ action: action }))
         .then((response) => {
             if (response?.status !== 200) {
                 return Promise.reject(response);
@@ -94,7 +94,7 @@ export async function sendServerCommand(serverId: string, input: string) {
         return;
     }
 
-    axiosClient().post(`/api/v1/servers/${serverId}/execute/command`, JSON.stringify({ command: input }))
+    axiosClient().post(`/api/v2/servers/${serverId}/execute/command`, JSON.stringify({ command: input }))
         .then((response) => {
             if (response?.status !== 200) {
                 return Promise.reject(response);
@@ -112,7 +112,7 @@ export function fetchServerStatus(serverId: string, report: (latestStats: Stats)
         return;
     }
 
-    axiosClient().get(`/api/v1/servers/${serverId}/stats`)
+    axiosClient().get(`/api/v2/servers/${serverId}/stats`)
         .then((response) => {
             if (response?.status !== 200) {
                 return Promise.reject(response);
@@ -163,7 +163,7 @@ export function fetchServerConsole(serverId: string, report: (consoleLines: stri
     const amountOfConsoleLines = get(settings)?.amountOfConsoleLines ?? 50;
     const reverseConsoleLines = get(settings)?.reverseConsoleLines ?? false;
 
-    axiosClient().get(`/api/v1/servers/${serverId}/console?amountOfLines=${amountOfConsoleLines}&reversed=${reverseConsoleLines}`)
+    axiosClient().get(`/api/v2/servers/${serverId}/console?amountOfLines=${amountOfConsoleLines}&reversed=${reverseConsoleLines}`)
         .then((response) => {
             if (response?.status !== 200) {
                 return Promise.reject(response);
@@ -184,7 +184,7 @@ export function isServerConsoleOutdated(serverId: string, secondLastLine: string
         return;
     }
 
-    axiosClient().get(`/api/v1/servers/${serverId}/console/outdated?secondLastLine=${secondLastLine}&lastLine=${lastLine}`)
+    axiosClient().get(`/api/v2/servers/${serverId}/console/outdated?secondLastLine=${secondLastLine}&lastLine=${lastLine}`)
         .then((response) => {
             if (response?.status !== 200) {
                 return Promise.reject(response);

src/lib/code/api.ts

@@ -1,4 +1,4 @@
-import { writable } from 'svelte-local-storage-store'
+import { persisted } from 'svelte-local-storage-store'
 import { get } from 'svelte/store';
 import { baseUrl } from '$lib/code/routing';
 import { settings } from '$lib/code/storage';
@@ -9,7 +9,7 @@ export enum LoginFailureReason {
     Unknown
 }
 
-export const auth = writable('user', {
+export const auth = persisted('user', {
     apiKey: '',
     username: '',
 })

src/lib/code/auth.ts

@@ -8,8 +8,8 @@ export enum Permission {
     useServerActions = "USE_SERVER_ACTIONS",
 }
 
-export function hasPermission(perm: Permission, guid: string): boolean {
-    const server = get(servers).find((s) => s.guid == guid);
+export function hasPermission(perm: Permission, serverId: string): boolean {
+    const server = get(servers).find((s) => s.serverId == serverId);
     if (!server) {
         return false;
     }

src/lib/code/permissions.ts

@@ -1,6 +1,6 @@
-import { writable } from 'svelte-local-storage-store'
+import { persisted } from 'svelte-local-storage-store'
 
-export const settings = writable('settings', {
+export const settings = persisted('settings', {
     serversRefreshRate: 5,
     consoleRefreshRate: 5,
     autoScrollConsole: true,

src/lib/code/storage.ts

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { get } from 'svelte/store';
 	import { clickOutside } from '$lib/code/shared';
-	import { sendServerAction, selectedServerGuid } from '$lib/code/api';
+	import { sendServerAction, selectedServerId } from '$lib/code/api';
 	import ArrowDownSvg from '$lib/svgs/ArrowDownSvg.svelte';
 
 	export let statusName: string;
@@ -20,12 +20,12 @@
 	function serverActionClick(action: string) {
 		dropdownVisible = false;
 
-		const guid = get(selectedServerGuid);
-		if (!guid) {
+		const serverId = get(selectedServerId);
+		if (!serverId) {
 			return;
 		}
 
-		sendServerAction(guid, action);
+		sendServerAction(serverId, action);
 	}
 </script>
 

src/lib/components/actionDropdown.svelte

@@ -3,7 +3,7 @@
 	import { get } from 'svelte/store';
 	import { browser } from '$app/environment';
 	import { settings } from '$lib/code/storage';
-	import { fetchServerConsole, isServerConsoleOutdated, selectedServerGuid, sendServerCommand } from '$lib/code/api';
+	import { fetchServerConsole, isServerConsoleOutdated, selectedServerId, sendServerCommand } from '$lib/code/api';
 	import ReloadSvg from '$lib/svgs/ReloadSvg.svelte';
 	import { hasPermission, Permission } from '$lib/code/permissions';
 
@@ -14,8 +14,8 @@
 	let consoleRequiresUpdate: boolean;
 
 	if (browser) {
-		const unsubscribe = selectedServerGuid.subscribe((newGuid) => {
-			reloadConsole(newGuid);
+		const unsubscribe = selectedServerId.subscribe((newServerId) => {
+			reloadConsole(newServerId);
 		});
 
 		const updateConsole = setInterval(() => {
@@ -36,15 +36,15 @@
 		}
 	});
 
-	async function reloadConsole(guid: string) {
-		if (!guid) {
+	async function reloadConsole(serverId: string) {
+		if (!serverId) {
 			return;
 		}
 
 		loadingConsole = true;
 
 		fetchServerConsole(
-			guid,
+			serverId,
 			(consoleLines: string[]) => {
 				serverConsole = consoleLines;
 				scrollToBottom();
@@ -56,9 +56,9 @@
 	}
 
 	async function updateConsoleIfNeeded() {
-		const guid = get(selectedServerGuid);
+		const serverId = get(selectedServerId);
 
-		if (!guid) {
+		if (!serverId) {
 			return;
 		}
 
@@ -71,12 +71,12 @@
 		let lastLine: string = encodeURIComponent(lines[length]);
 
 		isServerConsoleOutdated(
-			guid,
+			serverId,
 			secondLastLine,
 			lastLine,
 			(isOutdated: boolean) => {
 				if (isOutdated) {
-					reloadConsole(guid);
+					reloadConsole(serverId);
 					scrollToBottom();
 				}
 			},
@@ -87,12 +87,12 @@
 	}
 
 	function sendCommand() {
-		const guid = get(selectedServerGuid);
-		if (!consoleInput || !guid) {
+		const serverId = get(selectedServerId);
+		if (!consoleInput || !serverId) {
 			return;
 		}
 
-		sendServerCommand(guid, consoleInput);
+		sendServerCommand(serverId, consoleInput);
 		consoleInput = '';
 	}
 
@@ -125,8 +125,8 @@
 
 	<textarea bind:this={textarea} readonly class="w-full h-96 md:px-5 px-2 outline-none md:text-sm text-xs bg-inherit">{serverConsole}</textarea>
 
-	{#key $selectedServerGuid}
-		{#if hasPermission(Permission.useConsole, $selectedServerGuid)}
+	{#key $selectedServerId}
+		{#if hasPermission(Permission.useConsole, $selectedServerId)}
 			<form on:submit|preventDefault={sendCommand}>
 				<input bind:value={consoleInput} type="text" placeholder="Enter command e.g. /say hello" class="w-full px-5 pt-1 pb-3 outline-none bg-inherit" />
 			</form>

src/lib/components/console.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getFriendlyStatusName, getStatusBgColor } from '$lib/code/shared';
-	import { getSelectedServer, selectedServerGuid } from '$lib/code/api';
+	import { getSelectedServer, selectedServerId } from '$lib/code/api';
 	import ActionDropdown from '$lib/components/actionDropdown.svelte';
 	import { hasPermission, Permission } from '$lib/code/permissions';
 </script>
@@ -13,8 +13,8 @@
 		</h2>
 	</div>
 
-	{#key $selectedServerGuid}
-		{#if hasPermission(Permission.useServerActions, $selectedServerGuid)}
+	{#key $selectedServerId}
+		{#if hasPermission(Permission.useServerActions, $selectedServerId)}
 			<ActionDropdown statusName={getFriendlyStatusName($getSelectedServer?.status)} />
 		{/if}
 	{/key}

src/lib/components/server.svelte

@@ -2,7 +2,7 @@
 	import { onDestroy } from 'svelte';
 	import { get } from 'svelte/store';
 	import { browser } from '$app/environment';
-	import { fetchServerStatus, selectedServerGuid } from '$lib/code/api';
+	import { fetchServerStatus, selectedServerId } from '$lib/code/api';
 	import type { Stats } from '../../types';
 
 	let stats: Stats = {
@@ -18,7 +18,7 @@
 	let isLoadingStats: boolean = true;
 
 	if (browser) {
-		const unsubscribe = selectedServerGuid.subscribe((newGuid) => {
+		const unsubscribe = selectedServerId.subscribe((newServerId) => {
 			isLoadingStats = true;
 			updateServerStats();
 		});
@@ -32,14 +32,14 @@
 	}
 
 	async function updateServerStats() {
-		const guid = get(selectedServerGuid);
+		const serverId = get(selectedServerId);
 
-		if (!guid) {
+		if (!serverId) {
 			return;
 		}
 
 		fetchServerStatus(
-			guid,
+			serverId,
 			(latestStats: Stats) => {
 				stats = latestStats;
 			},

src/lib/components/serverStats.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { auth } from '$lib/code/auth';
-	import { servers, selectedServerGuid, isLoadingServers } from '$lib/code/api';
+	import { servers, selectedServerId, isLoadingServers } from '$lib/code/api';
 	import { getGreeting, getFriendlyStatusName, getStatusBgColor } from '$lib/code/shared';
 
-	function onServerClick(guid: string) {
-		selectedServerGuid.set(guid);
+	function onServerClick(serverId: string) {
+		selectedServerId.set(serverId);
 	}
 </script>
 
@@ -27,9 +27,9 @@
 			</div>
 
 			<ul class="pl-9 mt-1 truncate">
-				{#each $servers || [] as { guid, name, status }}
+				{#each $servers || [] as { serverId, name, status }}
 					<li class="mb-1 last:mb-0">
-						<button on:click={() => onServerClick(guid)} class=" text-slate-400 hover:text-slate-200">
+						<button on:click={() => onServerClick(serverId)} class=" text-slate-400 hover:text-slate-200">
 							<span class="inline-flex rounded-full h-2 w-2 {getStatusBgColor(status)}" title={getFriendlyStatusName(status)} /> <span class="text-sm font-medium">{name}</span>
 						</button>
 					</li>