pokemon/nuzlocke-tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add tabbed UI for routes/bosses and boss export endpoint

Browse Source 
Refactors AdminGameDetail to use tabs instead of stacked sections,
adds GET /export/games/{game_id}/bosses endpoint, and adds Export
button to the Boss Battles tab.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-08 11:52:18 +01:00
parent 190b08eb26
commit 5d54c00af0
4 changed files with 296 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.beans/nuzlocke-tracker-6kux--admin-panel-tabs-for-routesbosses-boss-export.md Normal file
View File

@@ -0,0 +1,11 @@
---
# nuzlocke-tracker-6kux
title: 'Admin Panel: Tabs for Routes/Bosses + Boss Export'
status: completed
type: feature
priority: normal
created_at: 2026-02-08T10:49:47Z
updated_at: 2026-02-08T10:51:25Z
---
Add tabbed UI to AdminGameDetail (Routes/Bosses tabs) and boss battle export endpoint

59
backend/src/app/api/export.py
View File

@@ -6,6 +6,8 @@ from sqlalchemy.ext.asyncio import AsyncSession
from sqlalchemy.orm import selectinload
from app.core.database import get_session
from app.models.boss_battle import BossBattle
from app.models.boss_pokemon import BossPokemon
from app.models.evolution import Evolution
from app.models.game import Game
from app.models.pokemon import Pokemon
@@ -46,10 +48,10 @@ async def export_game_routes(
if not game:
raise HTTPException(status_code=404, detail="Game not found")
# Load all routes for this game with encounters and pokemon
# Load all routes for this game's version group with encounters and pokemon
result = await session.execute(
select(Route)
.where(Route.game_id == game_id)
.where(Route.version_group_id == game.version_group_id)
.options(
selectinload(Route.route_encounters).selectinload(RouteEncounter.pokemon),
)
@@ -65,6 +67,10 @@ async def export_game_routes(
children_by_parent.setdefault(r.parent_route_id, []).append(r)
def format_encounters(route: Route) -> list[dict]:
# Filter route_encounters to this specific game
game_encounters = [
enc for enc in route.route_encounters if enc.game_id == game_id
]
return [
{
"pokeapi_id": enc.pokemon.pokeapi_id,
@@ -74,7 +80,7 @@ async def export_game_routes(
"min_level": enc.min_level,
"max_level": enc.max_level,
}
for enc in sorted(route.route_encounters, key=lambda e: -e.encounter_rate)
for enc in sorted(game_encounters, key=lambda e: -e.encounter_rate)
]
def format_route(route: Route) -> dict:
@@ -106,6 +112,53 @@ async def export_game_routes(
}
@router.get("/games/{game_id}/bosses")
async def export_game_bosses(
game_id: int,
session: AsyncSession = Depends(get_session),
):
"""Export boss battles for a game in seed JSON format."""
game = await session.get(Game, game_id)
if not game:
raise HTTPException(status_code=404, detail="Game not found")
result = await session.execute(
select(BossBattle)
.where(BossBattle.version_group_id == game.version_group_id)
.options(
selectinload(BossBattle.pokemon).selectinload(BossPokemon.pokemon),
)
.order_by(BossBattle.order)
)
bosses = result.scalars().all()
return {
"filename": f"{game.slug}-bosses.json",
"data": [
{
"name": b.name,
"boss_type": b.boss_type,
"badge_name": b.badge_name,
"badge_image_url": b.badge_image_url,
"level_cap": b.level_cap,
"order": b.order,
"location": b.location,
"sprite_url": b.sprite_url,
"pokemon": [
{
"pokeapi_id": bp.pokemon.pokeapi_id,
"pokemon_name": bp.pokemon.name,
"level": bp.level,
"order": bp.order,
}
for bp in sorted(b.pokemon, key=lambda p: p.order)
],
}
for b in bosses
],
}
@router.get("/pokemon")
async def export_pokemon(session: AsyncSession = Depends(get_session)):
"""Export all pokemon in seed JSON format."""

3
frontend/src/api/admin.ts
View File

@@ -94,6 +94,9 @@ export const exportGames = () =>
export const exportGameRoutes = (gameId: number) =>
api.get<{ filename: string; data: unknown }>(`/export/games/${gameId}/routes`)
export const exportGameBosses = (gameId: number) =>
api.get<{ filename: string; data: unknown }>(`/export/games/${gameId}/bosses`)
export const exportPokemon = () =>
api.get<Record<string, unknown>[]>('/export/pokemon')

54
frontend/src/pages/admin/AdminGameDetail.tsx
View File

@@ -32,7 +32,7 @@ import {
useDeleteBossBattle,
useSetBossTeam,
} from '../../hooks/useAdmin'
import { exportGameRoutes } from '../../api/admin'
import { exportGameRoutes, exportGameBosses } from '../../api/admin'
import { downloadJson } from '../../utils/download'
import type { Route as GameRoute, CreateRouteInput, UpdateRouteInput, BossBattle } from '../../types'
import type { CreateBossBattleInput, UpdateBossBattleInput } from '../../types/admin'
@@ -118,6 +118,7 @@ export function AdminGameDetail() {
const updateBoss = useUpdateBossBattle(id)
const deleteBoss = useDeleteBossBattle(id)
const [tab, setTab] = useState<'routes' | 'bosses'>('routes')
const [showCreate, setShowCreate] = useState(false)
const [editing, setEditing] = useState<GameRoute | null>(null)
const [deleting, setDeleting] = useState<GameRoute | null>(null)
@@ -174,9 +175,32 @@ export function AdminGameDetail() {
</p>
</div>
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-medium">Routes ({routes.length})</h3>
<div className="flex gap-2">
<div className="flex border-b border-gray-200 dark:border-gray-700 mb-4">
<button
onClick={() => setTab('routes')}
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
tab === 'routes'
? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
}`}
>
Routes ({routes.length})
</button>
<button
onClick={() => setTab('bosses')}
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
tab === 'bosses'
? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
}`}
>
Boss Battles ({bosses?.length ?? 0})
</button>
</div>
{tab === 'routes' && (
<>
<div className="flex justify-end gap-2 mb-4">
<button
onClick={async () => {
const result = await exportGameRoutes(id)
@@ -193,7 +217,6 @@ export function AdminGameDetail() {
Add Route
</button>
</div>
</div>
{routes.length === 0 ? (
<div className="text-center py-8 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 rounded-lg">
@@ -284,11 +307,21 @@ export function AdminGameDetail() {
isDeleting={deleteRoute.isPending}
/>
)}
</>
)}
{/* Boss Battles Section */}
<div className="mt-10">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-medium">Boss Battles ({bosses?.length ?? 0})</h3>
{tab === 'bosses' && (
<>
<div className="flex justify-end gap-2 mb-4">
<button
onClick={async () => {
const result = await exportGameBosses(id)
downloadJson(result.data, result.filename)
}}
className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
>
Export
</button>
<button
onClick={() => setShowCreateBoss(true)}
className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
@@ -370,7 +403,8 @@ export function AdminGameDetail() {
</div>
</div>
)}
</div>
</>
)}
{/* Boss Battle Modals */}
{showCreateBoss && (