v1

.env.example

@@ -0,0 +1,2 @@
+API_KEY="your serverTap API key here"
+API_URL="your serverTap API URL here"

.gitignore

@@ -5,6 +5,7 @@
 .nitro
 .cache
 dist
+build
 
 # Node dependencies
 node_modules

README.md

@@ -1,75 +1,16 @@
-# Nuxt 3 Minimal Starter
+# Minecraft server dashboard for ServerTap
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+A simple Minecraft server dashboard. Using Nuxt3, ServerTap, NuxtUI.  
+Made to be running ON the machine that runs the minecraft server, so the ServerTap port does not have to be exposed.
 
-## Setup
+<img width="318" alt="image" src="https://github.com/ItsMeRomian/mcdash/assets/13468715/cc6fc0d1-fa05-4c04-97eb-57fd5532b934">
 
-Make sure to install the dependencies:
 
-```bash
-# npm
-npm install
 
-# pnpm
-pnpm install
+## Features
 
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+- See if the server is working
+- See online players
+- Whitelist management
+- Access to the console, if you are in the local network (this could be expoosed)
+- Quick actions to stop/start/save the server

app.config.ts

@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    notifications: {
+      // Show toasts at the top right of the screen
+      position: "top-0 bottom-auto",
+    },
+  },
+});

app.vue

@@ -1,107 +1,83 @@
 <script setup lang="ts">
-export interface ServerResponse {
-  tps: string;
-  onlinePlayers: number;
-  maxPlayers: number;
-  version: string;
-  health: {
-    uptime: number;
-    totalMemory: number;
-    maxMemory: number;
-  };
-  whitelistedPlayers: {
-    name: string;
-  }[];
-  currentOnlinePlayers: {
-    displayName: string;
-    location: any[];
-  }[];
-}
+import type { ServerResponse } from "./server/api/refresh";
 
-const online = ref(false);
+export type PlayerName = string;
+
+const online = computed(() => Boolean(serverData.value));
 const serverData = ref<ServerResponse | null>(null);
+const lastOnline = ref<Record<string, number>>({});
+
+const updateLastOnline = (playerName: PlayerName, timestampMillis: number) => {
+  console.log("Updating last online for", playerName.split("11m")[1]);
+
+  if (playerName.split("11m")[1] && serverData.value)
+    lastOnline.value[playerName.split("11m")[1]] = timestampMillis;
+};
 
 const doRefresh = async () => {
-  try {
-    const { data: newserverData } = await useFetch<ServerResponse>(
-      "http://192.168.1.100:4567/v1/server",
-      {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          key: "s3p3rS3cur3!",
-        },
-      }
-    );
-    const { data: onlinePlayersData } = await useFetch<
-      { displayName: string; location: any[] }[]
-    >("http://192.168.1.100:4567/v1/players", {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        key: "s3p3rS3cur3!",
-      },
+  const fresh = await $fetch("/api/refresh");
+  if (fresh.error) {
+    useToast().add({
+      title: "Server is offline!",
+      description: fresh.error,
+      color: "red",
+      timeout: 0,
+      id: "server-offline",
     });
-    if (newserverData && onlinePlayersData.value) {
-      online.value = true;
-      serverData.value = newserverData.value;
-      if (serverData.value)
-        serverData.value.currentOnlinePlayers = onlinePlayersData.value.map(
-          (player) => {
-            return {
-              displayName: player.displayName.split("§r")[0],
-              location: player.location,
-            };
-          }
-        );
-    } else {
-      online.value = false;
-      throw new Error("No data");
-    }
-  } catch (error) {
-    online.value = false;
-    return null;
+    serverData.value = null;
+    return;
   }
+  try {
+    useToast().remove("server-offline");
+  } catch (error) {}
+  serverData.value = fresh;
 };
 </script>
 
 <template>
-  <div class="flex flex-row">
-    <Menu />
-    <div class="grid grid-cols-4 justify-center gap-4 p-4">
-      <Block title="Server Stats">
-        <ServerStats
-          v-if="serverData"
-          :server="serverData"
-          @refresh="doRefresh()"
-        />
+  <div class="flex flex-row w-full">
+    <div class="grid grid-cols-1 justify-center gap-4 p-4 w-full">
+      <div
+        class="text-center space-y-2 fixed w-full -m-4 bg-gradient-to-b from-gray-800 pt-2"
+      >
+        <h2 class="font-display text-4xl font-bold tracking-tight text-white">
+          DynaFools
+        </h2>
+        <h3 class="">Moderator Tools</h3>
+      </div>
+      <Block title="Server Stats" class="md:col-span-4 z-20 h-fit mt-24">
+        <ServerStats :server="serverData" @refresh="doRefresh()" />
         <Refresher
           v-slot:footer
           @refresh="() => doRefresh()"
           :is-server-online="online"
         />
       </Block>
-      <Block title="Whitelist">
+      <Block title="Whitelist" class="md:col-span-4 z-20">
         <Whitelist
-          v-if="serverData"
           :server="serverData"
           @refresh="doRefresh()"
+          :last-online="lastOnline"
         />
       </Block>
-      <Block title="Actions" class="col-span-2">
-        <Actions
-          v-if="serverData"
-          :server="serverData"
-          @refresh="doRefresh()"
-        />
+      <Block title="Actions" class="col-span-1 md:col-span-4 h-fit z-20">
+        <Actions v-if="serverData" />
+        <div v-else class="flex flex-col gap-4" v-for="i in 3">
+          <USkeleton class="h-12 w-full my-1" />
+        </div>
       </Block>
-      <Block title="Console" class="col-span-4">
+      <Block title="Console" class="col-span-1 md:col-span-12 z-20">
         <Console
           v-if="serverData"
           :server="serverData"
           @refresh="doRefresh()"
+          @update-last-online="
+            (playerName, timestampMillis) =>
+              updateLastOnline(playerName, timestampMillis)
+          "
         />
       </Block>
     </div>
   </div>
+  <UNotifications />
 </template>