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}