init

2026-05-26 12:27:23 +02:00
parent 39e23546e8
commit ffd8b3e5c9
26 changed files with 1514 additions and 1 deletions
@@ -1,2 +1,83 @@
-# mc-computer-craft-api-frontend
+# Minecraft ComputerCraft API – Frontend

+Vue 3 + TypeScript single page application for the
+[ME System Monitor backend](../mc-cc-api-backend). It shows the live contents
+of a Minecraft ME system over a websocket and renders per-item history charts.
+
+## Features
+
+- **Live view** over a websocket (`wss://…/api/ws/live`) – updates in real time.
+- **Persistent filters** – text search, sort column/order and mod filter are
+  kept in `localStorage` and re-applied by the server on every update.
+- **Item history** – clicking an item opens a detail page with a Chart.js line
+  chart plus current / min / max / change statistics.
+- **Abbreviated numbers** – `12000 → 12k`, `43452542 → 43.45M`. The full value
+  is available as a tooltip.
+- **HTTPS / WSS by default** via a self-signed certificate.
+
+## Tech stack
+
+| Concern    | Choice                              |
+| ---------- | ----------------------------------- |
+| Framework  | Vue 3 (`<script setup>`) + TypeScript |
+| Build tool | Vite 6                              |
+| Routing    | vue-router 4                        |
+| Charts     | Chart.js 4                          |
+| Dev TLS    | `@vitejs/plugin-basic-ssl`          |
+| Production | nginx (HTTPS, self-signed cert)     |
+
+## Quick start (development)
+
+```bash
+npm install
+cp .env.example .env   # adjust VITE_API_BASE / VITE_WS_BASE if needed
+npm run dev
+```
+
+The dev server runs on `https://localhost:5173` with a self-signed
+certificate. Your browser will warn about it once – accept the exception.
+
+> The backend also uses a self-signed certificate. Open
+> `https://localhost:3000/api/docs` once and accept that certificate too,
+> otherwise the browser blocks the API and websocket connections.
+
+## Build & preview
+
+```bash
+npm run build     # type-checks and builds into dist/
+npm run preview   # serves the build on https://localhost:4173
+```
+
+## Environment variables
+
+| Variable        | Default                  | Description                          |
+| --------------- | ------------------------ | ------------------------------------ |
+| `VITE_API_BASE` | `https://localhost:3000` | Backend HTTP API base URL            |
+| `VITE_WS_BASE`  | derived from API base    | Backend websocket base URL           |
+
+`VITE_*` variables are inlined at build time.
+
+## Docker
+
+```bash
+docker build \
+  --build-arg VITE_API_BASE=https://localhost:3000 \
+  -t mc-cc-frontend .
+
+docker run -p 8443:443 mc-cc-frontend
+```
+
+The container generates a self-signed certificate on first start and serves
+the SPA on port 443 (mapped to `8443` above) → `https://localhost:8443`.
+
+## Project structure
+
+```
+src/
+  api/          config, shared types, HTTP client
+  components/   FilterBar, ItemTable, HistoryChart
+  composables/  useLiveData (websocket + filter state)
+  router/       route definitions
+  utils/        number / date formatting
+  views/        LiveView, ItemHistoryView
+```