|
|
|
import { JSX } from 'preact/jsx-runtime'
|
|
|
|
import { ProblemId, SolutionStatus, UserId } from '../../shared/model'
|
|
|
|
import { Markdown } from './Markdown'
|
|
|
|
import { Select } from './Select'
|
|
|
|
|
|
|
|
const STATUS_SELECT_OPTIONS: Record<SolutionStatus, JSX.Element> = {
|
|
|
|
['pending']: <div class="pending">Soluzione in attesa di correzione</div>,
|
|
|
|
['correct']: <div class="correct">Soluzione corretta</div>,
|
|
|
|
['wrong']: <div class="wrong">Soluzione sbagliata</div>,
|
|
|
|
}
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
sentBy?: UserId
|
|
|
|
forProblem: ProblemId
|
|
|
|
content: string
|
|
|
|
status?: SolutionStatus
|
|
|
|
adminControls: boolean
|
|
|
|
}
|
|
|
|
|
|
|
|
export const Solution = ({ sentBy, forProblem, content, status, adminControls }: Props) => {
|
|
|
|
return (
|
|
|
|
<div class={['solution', status].join(' ')}>
|
|
|
|
<div class="solution-header">
|
|
|
|
<div>
|
|
|
|
Soluzione
|
|
|
|
{sentBy && (
|
|
|
|
<>
|
|
|
|
{' '}
|
|
|
|
di <a href={`/user/${sentBy}`}>@{sentBy}</a>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
{forProblem && (
|
|
|
|
<>
|
|
|
|
{' '}
|
|
|
|
per il <a href={`/problem/${forProblem}`}>Problema {forProblem}</a>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="solution-content">
|
|
|
|
<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 === 'pending'} class="icon">
|
|
|
|
<span class="material-symbols-outlined">hourglass_empty</span>
|
|
|
|
</button>
|
|
|
|
<button disabled={status === 'correct'} class="icon">
|
|
|
|
<span class="material-symbols-outlined correct">
|
|
|
|
check_circle
|
|
|
|
</span>
|
|
|
|
</button>
|
|
|
|
<button disabled={status === 'wrong'} class="icon">
|
|
|
|
<span class="material-symbols-outlined wrong">cancel</span>
|
|
|
|
</button>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|