granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update database tables with icon columns and imports

Browse source
This commit is contained in:
Justin Edmund 2025-09-17 06:43:34 -07:00
parent 78a617db0e
commit 03be26395f
9 changed files with 68 additions and 237 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/routes/database/characters/+page.server.ts
View file

@ -2,15 +2,15 @@ import { redirect } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
export const load: PageServerLoad = async ({ locals }) => { export const load: PageServerLoad = async ({ locals }) => {
// Enforce authorization at individual page level // Enforce authorization at individual page level
if (!locals.session.isAuthenticated) { if (!locals.session.isAuthenticated) {
throw redirect(302, '/login') throw redirect(302, '/login')
} }
const role = locals.session.account?.role ?? 0 const role = locals.session.account?.role ?? 0
if (role < 7) { if (role < 7) {
throw redirect(302, '/') throw redirect(302, '/')
} }
return {} return {}
} }

58
src/routes/database/characters/+page.svelte
View file

@ -1,28 +1,18 @@
<svelte:options runes={true} /> <svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types' import DatabaseGridWithProvider from '$lib/components/database/DatabaseGridWithProvider.svelte'
import DatabaseGrid from '$lib/components/database/DatabaseGrid.svelte'
import { goto } from '$app/navigation'
import { page as pageStore } from '$app/state'
import type { IColumn } from 'wx-svelte-grid' import type { IColumn } from 'wx-svelte-grid'
import CharacterImageCell from '$lib/components/database/cells/CharacterImageCell.svelte' import CharacterImageCell from '$lib/components/database/cells/CharacterImageCell.svelte'
import { import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
elementLabel, import { getRarityLabel } from '$lib/utils/rarity'
elementClass
} from '$lib/utils/database'
const { data }: { data: PageData } = $props() // Column configuration for characters
console.log('[Characters Page] Received data:', data)
console.log('[Characters Page] Items count:', data.items?.length || 0)
// Convert data to SVAR Grid format - column id must match data property
const columns: IColumn[] = [ const columns: IColumn[] = [
{ {
id: 'granblue_id', id: 'granblue_id',
header: 'Image', header: 'Image',
width: 60, width: 80,
cell: CharacterImageCell cell: CharacterImageCell
}, },
{ {
@ -42,21 +32,15 @@
id: 'rarity', id: 'rarity',
header: 'Rarity', header: 'Rarity',
width: 80, width: 80,
sort: true sort: true,
template: (rarity) => getRarityLabel(rarity)
}, },
{ {
id: 'element', id: 'element',
header: 'Element', header: 'Element',
width: 100, width: 100,
sort: true, sort: true,
htmlEnable: true, cell: ElementCell
template: (element) => {
const label = elementLabel(element)
const className = elementClass(element)
return className
? `<span class="${className}">${label}</span>`
: label
}
}, },
{ {
id: 'max_level', id: 'max_level',
@ -65,20 +49,6 @@
sort: true sort: true
} }
] ]
// Handle pagination
const handlePageChange = (newPage: number) => {
const url = new URL(pageStore.url)
url.searchParams.set('page', newPage.toString())
goto(url.toString())
}
const handlePageSizeChange = (newPageSize: number) => {
const url = new URL(pageStore.url)
url.searchParams.set('page', '1')
url.searchParams.set('per_page', newPageSize.toString())
goto(url.toString())
}
</script> </script>
<div class="database-page"> <div class="database-page">
@ -87,16 +57,10 @@
<p class="subtitle">Browse and search all available characters</p> <p class="subtitle">Browse and search all available characters</p>
</div> </div>
<DatabaseGrid <DatabaseGridWithProvider
data={data.items} resource="characters"
{columns} {columns}
page={data.page} pageSize={20}
totalPages={data.totalPages}
pageSize={data.pageSize}
total={data.total}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
loading={false}
/> />
</div> </div>

18
src/routes/database/characters/+page.ts
View file

@ -1,18 +0,0 @@
import type { PageLoad } from './$types'
import { searchCharacters } from '$lib/api/resources/search'
export const load: PageLoad = async ({ fetch, url }) => {
const page = Number(url.searchParams.get('page') || '1') || 1
const pageSize = Number(url.searchParams.get('pageSize') || '20') || 20
const search = await searchCharacters({ page, per: pageSize }, undefined, fetch)
return {
items: search.results || [],
page: search.meta?.page || page,
totalPages: search.meta?.total_pages || 1,
total: search.meta?.count || 0,
pageSize: search.meta?.per_page || pageSize
}
}

18
src/routes/database/summons/+page.server.ts
View file

@ -2,15 +2,15 @@ import { redirect } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
export const load: PageServerLoad = async ({ locals }) => { export const load: PageServerLoad = async ({ locals }) => {
// Enforce authorization at individual page level // Enforce authorization at individual page level
if (!locals.session.isAuthenticated) { if (!locals.session.isAuthenticated) {
throw redirect(302, '/login') throw redirect(302, '/login')
} }
const role = locals.session.account?.role ?? 0 const role = locals.session.account?.role ?? 0
if (role < 7) { if (role < 7) {
throw redirect(302, '/') throw redirect(302, '/')
} }
return {} return {}
} }

58
src/routes/database/summons/+page.svelte
View file

@ -1,28 +1,18 @@
<svelte:options runes={true} /> <svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types' import DatabaseGridWithProvider from '$lib/components/database/DatabaseGridWithProvider.svelte'
import DatabaseGrid from '$lib/components/database/DatabaseGrid.svelte'
import { goto } from '$app/navigation'
import { page as pageStore } from '$app/state'
import type { IColumn } from 'wx-svelte-grid' import type { IColumn } from 'wx-svelte-grid'
import SummonImageCell from '$lib/components/database/cells/SummonImageCell.svelte' import SummonImageCell from '$lib/components/database/cells/SummonImageCell.svelte'
import { import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
elementLabel, import { getRarityLabel } from '$lib/utils/rarity'
elementClass
} from '$lib/utils/database'
const { data }: { data: PageData } = $props() // Column configuration for summons
console.log('[Summons Page] Received data:', data)
console.log('[Summons Page] Items count:', data.items?.length || 0)
// Convert data to SVAR Grid format - column id must match data property
const columns: IColumn[] = [ const columns: IColumn[] = [
{ {
id: 'granblue_id', id: 'granblue_id',
header: 'Image', header: 'Image',
width: 60, width: 80,
cell: SummonImageCell cell: SummonImageCell
}, },
{ {
@ -42,21 +32,15 @@
id: 'rarity', id: 'rarity',
header: 'Rarity', header: 'Rarity',
width: 80, width: 80,
sort: true sort: true,
template: (rarity) => getRarityLabel(rarity)
}, },
{ {
id: 'element', id: 'element',
header: 'Element', header: 'Element',
width: 100, width: 100,
sort: true, sort: true,
htmlEnable: true, cell: ElementCell
template: (element) => {
const label = elementLabel(element)
const className = elementClass(element)
return className
? `<span class="${className}">${label}</span>`
: label
}
}, },
{ {
id: 'max_level', id: 'max_level',
@ -65,20 +49,6 @@
sort: true sort: true
} }
] ]
// Handle pagination
const handlePageChange = (newPage: number) => {
const url = new URL(pageStore.url)
url.searchParams.set('page', newPage.toString())
goto(url.toString())
}
const handlePageSizeChange = (newPageSize: number) => {
const url = new URL(pageStore.url)
url.searchParams.set('page', '1')
url.searchParams.set('per_page', newPageSize.toString())
goto(url.toString())
}
</script> </script>
<div class="database-page"> <div class="database-page">
@ -87,16 +57,10 @@
<p class="subtitle">Browse and search all available summons</p> <p class="subtitle">Browse and search all available summons</p>
</div> </div>
<DatabaseGrid <DatabaseGridWithProvider
data={data.items} resource="summons"
{columns} {columns}
page={data.page} pageSize={20}
totalPages={data.totalPages}
pageSize={data.pageSize}
total={data.total}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
loading={false}
/> />
</div> </div>

18
src/routes/database/summons/+page.ts
View file

@ -1,18 +0,0 @@
import type { PageLoad } from './$types'
import { searchSummons } from '$lib/api/resources/search'
export const load: PageLoad = async ({ fetch, url }) => {
const page = Number(url.searchParams.get('page') || '1') || 1
const pageSize = Number(url.searchParams.get('pageSize') || '20') || 20
const search = await searchSummons({ page, per: pageSize }, undefined, fetch)
return {
items: search.results || [],
page: search.meta?.page || page,
totalPages: search.meta?.total_pages || 1,
total: search.meta?.count || 0,
pageSize: search.meta?.per_page || pageSize
}
}

18
src/routes/database/weapons/+page.server.ts
View file

@ -2,15 +2,15 @@ import { redirect } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
export const load: PageServerLoad = async ({ locals }) => { export const load: PageServerLoad = async ({ locals }) => {
// Enforce authorization at individual page level // Enforce authorization at individual page level
if (!locals.session.isAuthenticated) { if (!locals.session.isAuthenticated) {
throw redirect(302, '/login') throw redirect(302, '/login')
} }
const role = locals.session.account?.role ?? 0 const role = locals.session.account?.role ?? 0
if (role < 7) { if (role < 7) {
throw redirect(302, '/') throw redirect(302, '/')
} }
return {} return {}
} }

70
src/routes/database/weapons/+page.svelte
View file

@ -1,32 +1,19 @@
<svelte:options runes={true} /> <svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types' import DatabaseGridWithProvider from '$lib/components/database/DatabaseGridWithProvider.svelte'
import DatabaseGrid from '$lib/components/database/DatabaseGrid.svelte'
import { goto } from '$app/navigation'
import { page as pageStore } from '$app/state'
import type { IColumn } from 'wx-svelte-grid' import type { IColumn } from 'wx-svelte-grid'
import WeaponImageCell from '$lib/components/database/cells/WeaponImageCell.svelte' import WeaponImageCell from '$lib/components/database/cells/WeaponImageCell.svelte'
import { import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
elementLabel, import ProficiencyCell from '$lib/components/database/cells/ProficiencyCell.svelte'
elementClass import { getRarityLabel } from '$lib/utils/rarity'
} from '$lib/utils/database'
const { data }: { data: PageData } = $props() // Column configuration for weapons
console.log('[Weapons Page] Received data:', data)
console.log('[Weapons Page] Items count:', data.items?.length || 0)
// Add console logging to debug
console.log('[Weapons Page] Sample item:', data.items?.[0])
console.log('[Weapons Page] Sample name:', data.items?.[0]?.name)
// Convert data to SVAR Grid format - column id must match data property
const columns: IColumn[] = [ const columns: IColumn[] = [
{ {
id: 'granblue_id', id: 'granblue_id',
header: 'Image', header: 'Image',
width: 60, width: 80,
cell: WeaponImageCell cell: WeaponImageCell
}, },
{ {
@ -46,21 +33,22 @@
id: 'rarity', id: 'rarity',
header: 'Rarity', header: 'Rarity',
width: 80, width: 80,
sort: true sort: true,
template: (rarity) => getRarityLabel(rarity)
}, },
{ {
id: 'element', id: 'element',
header: 'Element', header: 'Element',
width: 100, width: 100,
sort: true, sort: true,
htmlEnable: true, cell: ElementCell
template: (element) => { },
const label = elementLabel(element) {
const className = elementClass(element) id: 'proficiency',
return className header: 'Proficiency',
? `<span class="${className}">${label}</span>` width: 100,
: label sort: true,
} cell: ProficiencyCell
}, },
{ {
id: 'max_level', id: 'max_level',
@ -69,20 +57,6 @@
sort: true sort: true
} }
] ]
// Handle pagination
const handlePageChange = (newPage: number) => {
const url = new URL(pageStore.url)
url.searchParams.set('page', newPage.toString())
goto(url.toString())
}
const handlePageSizeChange = (newPageSize: number) => {
const url = new URL(pageStore.url)
url.searchParams.set('page', '1')
url.searchParams.set('per_page', newPageSize.toString())
goto(url.toString())
}
</script> </script>
<div class="database-page"> <div class="database-page">
@ -91,16 +65,10 @@
<p class="subtitle">Browse and search all available weapons</p> <p class="subtitle">Browse and search all available weapons</p>
</div> </div>
<DatabaseGrid <DatabaseGridWithProvider
data={data.items} resource="weapons"
{columns} {columns}
page={data.page} pageSize={20}
totalPages={data.totalPages}
pageSize={data.pageSize}
total={data.total}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
loading={false}
/> />
</div> </div>

29
src/routes/database/weapons/+page.ts
View file

@ -1,29 +0,0 @@
import type { PageLoad } from './$types'
import { searchWeapons } from '$lib/api/resources/search'
export const load: PageLoad = async ({ fetch, url }) => {
const page = Number(url.searchParams.get('page') || '1') || 1
const pageSize = Number(url.searchParams.get('pageSize') || '20') || 20
console.log('[Database Weapons] Loading page:', page, 'pageSize:', pageSize)
const search = await searchWeapons({ page, per: pageSize }, undefined, fetch)
console.log('[Database Weapons] API Response:', search)
console.log('[Database Weapons] Meta:', search.meta)
console.log('[Database Weapons] Results count:', search.results?.length || 0)
// Extract data from meta object
const result = {
items: search.results || [],
page: search.meta?.page || page,
totalPages: search.meta?.total_pages || 1,
total: search.meta?.count || 0,
pageSize: search.meta?.per_page || pageSize
}
console.log('[Database Weapons] Returning to component:', result)
return result
}