phc/problemi
6
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: link alla pagina scores e qualche tweak allo stile della tabella scores

Browse Source
This commit is contained in:
aziis98
2023-01-05 15:05:52 +01:00
parent 0ad660b33c
commit 19541630fc
3 changed files with 92 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/pages/ScoresPage.tsx
+33 -12
View File
@@ -1,5 +1,5 @@
import { useContext, useState } from 'preact/hooks'
import { Solution as SolutionModel, SolutionStat, User } from '../../shared/model'
import { SolutionStat } from '../../shared/model'
import { sortByNumericKey, sortByStringKey } from '../../shared/utils'
import { Header } from '../components/Header'
@@ -16,13 +16,13 @@ export const ScoresPage = () => {
type Order = 'ascending' | 'descending'
type SortStateSpace = [Column, Order]
const [[sortStateColumn, sortStateOrder], setSortState] = useState<SortStateSpace>(['sent', 'descending'])
const [[sortStateColumn, sortStateOrder], setSortState] = useState<SortStateSpace>(['correct', 'descending'])
const transitionColumn: (k: Column) => Partial<Record<Column, Record<Order, (c: Column) => SortStateSpace>>> = k => ({
[k]: {
'ascending': (c: Column) => c === k ? [k, 'descending'] : [c, 'ascending'],
'descending': (c: Column) => c === k ? [k, 'ascending'] : [c, 'ascending']
}
ascending: (c: Column) => (c === k ? [k, 'descending'] : [c, 'ascending']),
descending: (c: Column) => (c === k ? [k, 'ascending'] : [c, 'ascending']),
},
})
const transitionMap: Record<Column, Record<Order, (c: Column) => SortStateSpace>> = {
@@ -36,8 +36,12 @@ export const ScoresPage = () => {
if (sortStateColumn === 'student') {
orderedStats = sortByStringKey(Object.entries(stats), ([user, s]) => user, sortStateOrder === 'ascending')
} else {
// @ts-ignore
orderedStats = sortByNumericKey(Object.entries(stats), ([user, s]) => s[sortStateColumn + 'SolutionsCount'], sortStateOrder === 'ascending')
orderedStats = sortByNumericKey(
Object.entries(stats),
// @ts-ignore
([user, s]) => s[sortStateColumn + 'SolutionsCount'],
sortStateOrder === 'ascending'
)
}
return (
@@ -49,20 +53,37 @@ export const ScoresPage = () => {
<div class="cell header">
<span>Studente</span>
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('student'))}>
<span class="material-symbols-outlined icon">{sortStateColumn === 'student' ? (sortStateOrder === 'ascending' ? 'expand_more' : 'expand_less') : 'unfold_more'}</span>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'student'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</span>
</span>
</div>
<div class="cell header">
<span>Soluzioni Inviate</span>
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('sent'))}>
<span class="material-symbols-outlined icon">{sortStateColumn === 'sent' ? (sortStateOrder === 'ascending' ? 'expand_more' : 'expand_less') : 'unfold_more'}</span>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'sent'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</span>
</span>
</div>
<div class="cell header">
<span>Soluzioni Corrette</span>
<span onClick={() => setSortState(transitionMap[sortStateColumn][sortStateOrder]('correct'))}>
<span class="material-symbols-outlined icon">{sortStateColumn === 'correct' ? (sortStateOrder === 'ascending' ? 'expand_more' : 'expand_less') : 'unfold_more'}</span>
<span class="material-symbols-outlined icon">
{sortStateColumn === 'correct'
? sortStateOrder === 'ascending'
? 'expand_more'
: 'expand_less'
: 'unfold_more'}
</span>
</span>
</div>
{orderedStats.map(([user, s]) => (
@@ -73,7 +94,7 @@ export const ScoresPage = () => {
</>
))}
</div>
</main >
</main>
</>
)
}