Add DB upload flow and Docker deployment setup

README.md

@@ -1,15 +1,18 @@
-# 羽毛球隊伍配對器
+# 羽毛球分組配對器
 
-這是一個使用 `React + Vite + TypeScript` 製作的網頁應用程式，專門用來協助羽毛球活動快速配對隊伍。
+這是一個使用 `React + Vite + TypeScript` 製作的網頁應用程式，用來將 A 區與 B 區成員配成羽毛球隊伍。
 
 ## 功能說明
 
-- 可分別輸入 A 區與 B 區的成員名單
-- 系統每次固定產生 3 組隊伍
-- 每組皆由 `A 區 1 位 + B 區 1 位` 組成
-- 同一輪內不會重複使用同一位成員
-- 會顯示本輪未被選中的候補名單
-- 會自動將輸入內容儲存在瀏覽器本機
+- 分別輸入 A 區與 B 區名單
+- 可指定要寫入資料庫的目標日期
+- 每次固定產生 3 組完整配對結果
+- 每一隊都由 `1 位 A 區 + 1 位 B 區` 組成
+- 每一組都會把 A 區與 B 區名單完整分配完成
+- 若某一區人數不足，系統會自動補入「那個」
+- 產生配對後可用按鈕手動上傳資料到資料庫
+- 支援換行、半形逗號、全形逗號與頓號輸入
+- 會自動去除空白與重複名稱
 
 ## 使用方式
 
@@ -18,14 +21,81 @@ npm install
 npm run dev
 ```
 
+## 資料庫欄位
+
+- `time`: 目標日期，格式為 `YYYYMMDD`
+- `personnel`: 人員清單，格式為 `[[1,"A區成員"],[0,"B區成員"]]`
+- `battlecombination`: 三組隊伍搭配，格式為 `{"0":[["A","B"]],"1":[...],"2":[...]}`
+
 ## 正式建置
 
 ```bash
 npm run build
 ```
 
-## 補充說明
+## Docker 部署
 
-- 輸入格式支援換行、半形逗號、全形逗號與頓號
-- 系統會自動去除空白與重複名稱
-- A 區與 B 區都至少需要 3 位不重複成員才能完成配對
+這個專案已提供單容器部署方式，容器啟動後會同時提供：
+
+- 網頁前端
+- `/api` 後端
+- MariaDB 寫入功能
+
+### 建立映像
+
+```bash
+docker build -t badminton-match-hub .
+```
+
+### 啟動容器
+
+```bash
+docker run -d \
+  --name badminton-match-hub \
+  -p 8787:8787 \
+  -e PORT=8787 \
+  -e DB_HOST=192.168.0.15 \
+  -e DB_PORT=3307 \
+  -e DB_USER=jianmiau \
+  -e DB_PASSWORD=你的密碼 \
+  -e DB_DATABASE=badminton \
+  -e DB_TABLE=badminton \
+  badminton-match-hub
+```
+
+### NAS 上建議設定
+
+- 容器埠使用 `8787`
+- 對外埠可自訂，例如 `8787:8787`
+- 環境變數請在 NAS 的 Docker 介面中填入
+- 不要把本機 `.env` 直接打包進映像
+
+部署完成後可直接透過：
+
+```text
+http://NAS_IP:8787
+```
+
+開啟系統。
+
+### docker-compose
+
+專案也已提供 [docker-compose.yml](D:/Users/JianMiau/Downloads/badminton-match-hub/docker-compose.yml)。
+
+```bash
+docker compose up -d --build
+```
+
+Compose 版本預設會：
+
+- 對外使用 `3500`
+- 容器內部使用 `3500`
+- 讀取 `.env` 內的資料庫設定
+
+部署後可透過：
+
+```text
+http://NAS_IP:3500
+```
+
+開啟系統。