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

feature: Problem sorting, solution view raw toggle button

Browse Source
This commit is contained in:
aziis98
2022-11-23 19:08:29 +01:00
parent dcaa052f30
commit 28a1a85531
9 changed files with 222 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/components/Select.tsx
+26 -18
View File
@@ -1,23 +1,31 @@
import { StateUpdater } from 'preact/hooks'
import { JSX } from 'preact/jsx-runtime'
type Props = {
options: Record<string, string>
value: string
setValue?: StateUpdater<string>
type Props<K extends string, T extends K> = {
options: Record<K, string | JSX.Element>
value: T
setValue?: StateUpdater<K>
}
export const Select = ({ options, value, setValue }: Props) => (
<div class="input-select">
<select
onInput={e => setValue?.(e.target instanceof HTMLSelectElement ? e.target.value : '')}
>
{Object.entries(options).map(([k, v]) => (
<option value={k} selected={value === k}>
{v}
</option>
))}
</select>
<span class="material-symbols-outlined">expand_more</span>
</div>
)
export const Select = <K extends string, T extends K>({ options, value, setValue }: Props<K, T>) => {
const optionValues = new Set(Object.keys(options))
return (
<div class="input-select">
<select
onInput={e => {
if (e.target instanceof HTMLSelectElement && optionValues.has(e.target.value)) {
setValue?.(e.target.value as K)
}
}}
>
{Object.entries<string | JSX.Element>(options).map(([k, v]) => (
<option value={k} selected={value === k}>
{v}
</option>
))}
</select>
<span class="material-symbols-outlined">expand_more</span>
</div>
)
}
client/components/Solution.tsx
+41 -18
View File
@@ -1,3 +1,4 @@
import { useState } from 'preact/hooks'
import { JSX } from 'preact/jsx-runtime'
import {
MetadataProps,
@@ -19,6 +20,7 @@ const STATUS_SELECT_OPTIONS: Record<SolutionStatus, JSX.Element> = {
type Props = {
id: SolutionId
createdAt: string
sentBy?: UserId
forProblem: ProblemId
content: string
@@ -31,6 +33,7 @@ type Props = {
export const Solution = ({
id,
createdAt,
sentBy,
forProblem,
content,
@@ -70,6 +73,14 @@ export const Solution = ({
refreshSolution?.()
}
const [viewRaw, setViewRaw] = useState<boolean>(false)
const toggleViewRaw = () => {
setViewRaw(prev => !prev)
}
const d = new Date(createdAt)
return (
<div class={['solution', status].join(' ')}>
<div class="solution-header">
@@ -87,35 +98,38 @@ export const Solution = ({
per il <a href={`/problem/${forProblem}`}>Problema {forProblem}</a>
</>
)}
{!isNaN(d as any) && (
<>
{' del '}
<span title={!isNaN(d as any) ? d.toISOString() : undefined} class="dotted">
{d.getFullYear()}/{d.getMonth().toString().padStart(2, '0')}/
{d.getDate().toString().padStart(2, '0')}{' '}
{d.getHours().toString().padStart(2, '0')}:
{d.getMinutes().toString().padStart(2, '0')}
</span>
</>
)}
</div>
</div>
<div class="solution-content">
<Markdown source={content} />
{viewRaw ? (
<pre>
<code>{content}</code>
</pre>
) : (
<Markdown source={content} />
)}
</div>
{status && (
<div class="solution-footer">
{/* <div class="row">
<div class="label">Stato</div>
<Select value={status} options={STATUS_SELECT_OPTIONS} />
</div> */}
<div class="row">
<div class="status-label">{STATUS_SELECT_OPTIONS[status]}</div>
{adminControls && (
<>
<button
disabled={status === 'correct'}
class="icon"
onClick={markAsCorrect}
>
<span class="material-symbols-outlined correct">
check_circle
</span>
<button disabled={status === 'correct'} class="icon" onClick={markAsCorrect}>
<span class="material-symbols-outlined correct">check_circle</span>
</button>
<button
disabled={status === 'wrong'}
class="icon"
onClick={markAsWrong}
>
<button disabled={status === 'wrong'} class="icon" onClick={markAsWrong}>
<span class="material-symbols-outlined wrong">cancel</span>
</button>
{status !== 'pending' && (
@@ -127,6 +141,15 @@ export const Solution = ({
)}
</>
)}
<button
class="icon"
onClick={toggleViewRaw}
title={!viewRaw ? 'Mostra markdown grezzo' : 'Mostra testo matematicoso'}
>
<span class="material-symbols-outlined">
{!viewRaw ? 'data_object' : 'functions'}
</span>
</button>
</div>
</div>
)}
client/hooks.tsx
-2
View File
@@ -44,8 +44,6 @@ type ResourceHookFunction = <T>(
) => [T, RefreshFunction, HeuristicStateUpdater<T>]
export const useResource: ResourceHookFunction = (url, initialValue) => {
//
const [value, setValue] = useState(initialValue)
function refresh() {
client/pages/Admin.tsx
+48 -14
View File
@@ -1,9 +1,11 @@
import { route } from 'preact-router'
import { useState } from 'preact/hooks'
import { isAdministrator, isStudent, Solution as SolutionModel } from '../../shared/model'
import { isAdministrator, isStudent, Solution as SolutionModel, SolutionId } from '../../shared/model'
import { sortByStringKey } from '../../shared/utils'
import { server } from '../api'
import { Header } from '../components/Header'
import { MarkdownEditor } from '../components/MarkdownEditor'
import { Select } from '../components/Select'
import { Solution } from '../components/Solution'
import { useCurrentUser, useListResource, useResource } from '../hooks'
@@ -25,6 +27,8 @@ const CreateProblem = ({}) => {
)
}
type SortOrder = 'latest' | 'oldest'
export const AdminPage = ({}) => {
const [user] = useCurrentUser(user => {
if (!user) {
@@ -37,26 +41,56 @@ export const AdminPage = ({}) => {
const [solutions, refreshSolutions, setSolutionHeuristic] =
useListResource<SolutionModel>(`/api/solutions`)
const [sortOrder, setSortOrder] = useState<SortOrder>('oldest')
const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, sortOrder === 'oldest')
const [trackInteracted, setTrackedInteracted] = useState<Set<SolutionId>>(new Set())
const hasUntrackedPending =
sortedSolutions.filter(s => s.status === 'pending' || trackInteracted.has(s.id)).length > 0
return (
user && (
<main class="page-admin">
<Header {...{ user }} />
<div class="subtitle">Nuovo problema</div>
<CreateProblem />
<div class="subtitle">Soluzioni ancora da approvare/rifiutare</div>
<div class="solution-list">
{solutions.map(
(s, index) =>
s.status === 'pending' && (
<Solution
adminControls
{...s}
setSolution={solFn => setSolutionHeuristic(index, solFn)}
refreshSolution={refreshSolutions}
<div class="subtitle">Soluzioni da correggere</div>
{hasUntrackedPending ? (
<div class="solution-list">
<div class="controls">
<div class="sort-order">
<Select
value={sortOrder}
setValue={setSortOrder}
options={{
latest: 'Prima più recenti',
oldest: 'Prima più antichi',
}}
/>
)
)}
</div>
</div>
</div>
{sortedSolutions.map(
(s, index) =>
(s.status === 'pending' || trackInteracted.has(s.id)) && (
<Solution
adminControls
{...s}
setSolution={solFn => {
setTrackedInteracted(prev => new Set([...prev, s.id]))
setSolutionHeuristic(index, solFn)
}}
refreshSolution={refreshSolutions}
/>
)
)}
</div>
) : (
<>
<em>Nessuna soluzione ancora da correggere</em>
</>
)}
</main>
)
)
client/pages/Home.tsx
+28 -4
View File
@@ -1,17 +1,40 @@
import { route } from 'preact-router'
import { useEffect, useState } from 'preact/hooks'
import { Problem as ProblemModel } from '../../shared/model'
import { sortByNumericKey, sortByStringKey } from '../../shared/utils'
import { Header } from '../components/Header'
import { Problem } from '../components/Problem'
import { Select } from '../components/Select'
import { useResource, useCurrentUser } from '../hooks'
function byTime(p: ProblemModel): string {
return p.createdAt
}
function bySolvedProblems(p: ProblemModel & { solutionsCount: number }): number {
return p.solutionsCount
}
type SortOrder = 'latest' | 'oldest' | 'top-solved' | 'least-solved'
const SORT_ORDER: Record<SortOrder, boolean> = {
'latest': false,
'oldest': true,
'top-solved': false,
'least-solved': true,
}
export const HomePage = () => {
const [user] = useCurrentUser()
const [problems] = useResource<ProblemModel[]>('/api/problems', [])
const [problems] = useResource<(ProblemModel & { solutionsCount: number })[]>('/api/problems', [])
console.log(problems)
const [sortOrder, setSortOrder] = useState<SortOrder>('oldest')
const sortedProblems =
sortOrder === 'latest' || sortOrder === 'oldest'
? sortByStringKey(problems, byTime, SORT_ORDER[sortOrder])
: sortByNumericKey(problems, bySolvedProblems, SORT_ORDER[sortOrder])
return (
<main class="page-home">
@@ -20,7 +43,8 @@ export const HomePage = () => {
<div class="fill-row board-controls">
<div class="sort-order">
<Select
value="oldest"
value={sortOrder}
setValue={setSortOrder}
options={{
'latest': 'Prima più recenti',
'oldest': 'Prima più antichi',
@@ -31,7 +55,7 @@ export const HomePage = () => {
</div>
</div>
{problems.map(p => (
{sortedProblems.map(p => (
<Problem {...p} />
))}
</div>
client/pages/Problem.tsx
+3 -5
View File
@@ -1,9 +1,5 @@
import { useContext, useState } from 'preact/hooks'
import {
isAdministrator,
Problem as ProblemModel,
Solution as SolutionModel,
} from '../../shared/model'
import { isAdministrator, Problem as ProblemModel, Solution as SolutionModel } from '../../shared/model'
import { server } from '../api'
import { Header } from '../components/Header'
import { MarkdownEditor } from '../components/MarkdownEditor'
@@ -37,6 +33,8 @@ export const ProblemPage = ({ id }: RouteProps) => {
content: source,
})
setSource('')
refreshSolutions()
}
client/styles/main.scss
+46 -9
View File
@@ -35,7 +35,7 @@ textarea {
padding: 1rem;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border-radius: 0.25rem;
background: #ffffff;
}
@@ -162,12 +162,12 @@ button {
}
&.icon {
padding: 0.25rem;
padding: 0.125rem;
display: grid;
place-content: center;
.material-symbols-outlined {
font-size: 20px;
font-size: 19px;
}
}
}
@@ -189,6 +189,10 @@ a:visited {
// Typography
//
.dotted {
text-decoration: underline dotted gray;
}
.math-inline {
font-size: 95%;
}
@@ -324,12 +328,16 @@ details {
}
.solution-list {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
.controls {
display: flex;
width: 100%;
gap: 1rem;
}
}
header {
@@ -381,7 +389,7 @@ header {
max-width: 80ch;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border-radius: 0.5rem;
background: #ffffff;
@@ -410,12 +418,12 @@ header {
}
.solution {
padding: 1rem;
padding: 1rem 0.5rem 0.5rem 1rem;
width: 100%;
max-width: 80ch;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border-radius: 0.5rem;
background: #ffffff;
@@ -438,10 +446,30 @@ header {
gap: 0.25rem;
font-size: 18px;
line-height: 1.25;
}
.solution-content {
@extend .text-body;
pre,
code {
margin: 0;
font-family: 'DM Mono', monospace;
font-size: 16px;
background: #f0f0f0;
}
pre {
padding: 0.25rem;
overflow-x: auto;
border-radius: 0.25rem;
}
padding-right: 0.5rem;
}
.solution-footer {
@@ -550,7 +578,7 @@ header {
padding: 1rem;
box-shadow: -2px 4px 8px 1px #00000010, 0 0 4px 0px #00000010;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border-radius: 0.25rem;
background: #ffffff;
}
@@ -622,6 +650,15 @@ header {
.markdown-editor .preview .preview-content {
padding: 0.75rem;
}
.solution {
.solution-content {
pre {
white-space: pre-line;
word-break: break-all;
}
}
}
}
@media screen and (max-width: $device-m-width), (pointer: coarse) {
shared/utils.ts
+29
View File
@@ -4,3 +4,32 @@ export function validateObjectKeys<K extends string>(obj: any, keys: K[]): boole
// @ts-ignore
return Object.keys(obj).every(key => keySet.has(key))
}
function compareStringKeys(a: string, b: string): number {
return a === b ? 0 : a < b ? -1 : 1
}
function compareNumberKeys(a: number, b: number): number {
return a === b ? 0 : a < b ? -1 : 1
}
type KeyFn<T, K> = (item: T) => K
export function sortByStringKey<T>(items: T[], keyFn: KeyFn<T, string>, ascending: boolean = true) {
return sortByKey(compareStringKeys, items, keyFn, ascending)
}
export function sortByNumericKey<T>(items: T[], keyFn: KeyFn<T, number>, ascending: boolean = true) {
return sortByKey(compareNumberKeys, items, keyFn, ascending)
}
function sortByKey<T, K>(
compareFn: (a: K, b: K) => number,
items: T[],
keyFn: (item: T) => K,
ascending: boolean
) {
const sortedList = [...items]
const order = ascending ? 1 : -1
sortedList.sort((a, b) => order * compareFn(keyFn(a), keyFn(b)))
return sortedList
}
tsconfig.node.json
+1
View File
@@ -1,6 +1,7 @@
{
"compilerOptions": {
"composite": true,
"lib": ["ESNext"],
"module": "ESNext",
"moduleResolution": "Node",
"noImplicitAny": true,