feat(ui): minecraft server stats

backend/src/plugins/minecraft.rs

@@ -9,6 +9,7 @@ struct McData {
   players: i64,
   version: String,
   latency: u64,
+  address: String,
 }
 
 static mut ACCESS_ADDRESS: String = String::new();
@@ -32,6 +33,7 @@ pub async fn minecraft(_req: tide::Request<State>) -> Result<tide::Response, tid
     players: 0,
     version: String::from("Unknown"),
     latency: 0,
+    address: access_address.clone(),
   };
 
   let (latency, response) = match mcping::get_status(access_address.as_str(), None) {

frontend/src/components/Plugins/Minecraft/Minecraft.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'preact/hooks'
+import './Minecraft.css'
+
+interface McData {
+  description: string
+  players: number
+  version: string
+  latency: number
+  address: string
+}
+
+export function Minecraft() {
+  const [data, setData] = useState({} as McData)
+
+  useEffect(() => {
+    (async () => {
+      const data = await fetch('/api/minecraft').then((res) => res.json())
+      setData(data)
+    })()
+  }, [])
+
+  return (
+    <div className="quick-stats-outer">
+      <div className="quick-stats-header">
+        <span className="quick-stats-title">Minecraft Server ({data.address})</span>
+      </div>
+
+      <div className="quick-stats">
+        <div className="stat">
+          <span className="stat-big">{data.players}</span>
+          <span className="stat-small">Players Online</span>
+        </div>
+
+        <div className="stat">
+          <span className="stat-big">{data.version}</span>
+          <span className="stat-small">Version</span>
+        </div>
+
+        <div className="stat">
+          <span className="stat-big">{data.latency}ms</span>
+          <span className="stat-small">Latency</span>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/Plugins/PluginsSection.css

@@ -0,0 +1,8 @@
+.plugin-section {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+
+  width: 100%;
+}

frontend/src/components/Plugins/PluginsSection.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'preact/hooks'
+import { Minecraft } from './Minecraft/Minecraft'
+
+import './PluginsSection.css'
+
+interface Plugin {
+  name: string
+  endpoints: string[]
+}
+
+export default function PluginsSection() {
+  const [enabled, setEnabled] = useState([] as Plugin[])
+
+  useEffect(() => {
+    (async () => {
+      const enabled = await fetch('/api/plugins').then((res) => res.json())
+      setEnabled(enabled)
+    })()
+  }, [])
+
+  if (enabled.length === 0) return (
+    <></>
+  )
+
+  return (
+    <div className="plugin-section">
+      {
+        enabled.map((plugin) => {
+          switch (plugin.name) {
+          case 'minecraft':
+            return <Minecraft />
+          }
+        })
+      }
+    </div>
+  )
+}

frontend/src/components/QuickStats.css

@@ -6,6 +6,8 @@
 
   width: 90%;
   height: 120px;
+
+  padding-bottom: 32px;
 }
 
 .quick-stats {
@@ -28,7 +30,7 @@
   width: 100%;
   text-align: center;
 
-  font-size: 24px;
+  font-size: 28px;
   font-weight: bold;
 }
 

frontend/src/pages/Home/index.tsx

@@ -4,6 +4,7 @@ import { QuickStats } from '../../components/QuickStats'
 import './style.css'
 import { randomRGBAColors } from '../../util/colors'
 import { DataHome } from './data'
+import PluginsSection from '../../components/Plugins/PluginsSection'
 
 export function Home() {
   const [sysinfo, setSysinfo] = useState({} as SystemInfo)
@@ -81,6 +82,8 @@ export function Home() {
               processList={processList}
             />
 
+            <PluginsSection />
+
             <div className="home-main">
               <DataHome
                 sysinfo={sysinfo}