all: Aggiunte varie feature e riscritte svariate cose

This commit is contained in:
2022-12-01 03:45:29 +01:00
parent bd055f484d
commit 8fdef2981d
22 changed files with 714 additions and 422 deletions
+37 -28
View File
@@ -1,21 +1,14 @@
import { useState } from 'preact/hooks'
import { JSX } from 'preact/jsx-runtime'
import {
MetadataProps,
ProblemId,
Solution as SolutionModel,
SolutionId,
SolutionStatus,
UserId,
} from '../../shared/model'
import { ProblemId, Solution as SolutionModel, SolutionId, SolutionStatus, UserId } from '../../shared/model'
import { prependBaseUrl, server } from '../api'
import { useCurrentUser } from '../hooks/useCurrentUser'
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>,
['pending']: <div class="pending">In attesa di correzione</div>,
['correct']: <div class="correct">Corretta</div>,
['wrong']: <div class="wrong">Sbagliata</div>,
}
type Props = {
@@ -43,6 +36,8 @@ export const Solution = ({
setSolution,
refreshSolution,
}: Props) => {
const [user] = useCurrentUser()
const markAsCorrect = async () => {
setSolution?.(prevSolution => ({ ...prevSolution, status: 'correct' }))
@@ -73,6 +68,13 @@ export const Solution = ({
refreshSolution?.()
}
const deleteSolution = async () => {
if (confirm('Sei proprio sicuro di voler eliminare questa soluzione?')) {
await server.delete(`/api/solution/${id}`)
refreshSolution?.()
}
}
const [viewRaw, setViewRaw] = useState<boolean>(false)
const toggleViewRaw = () => {
@@ -85,7 +87,9 @@ export const Solution = ({
<div class={['solution', status].join(' ')}>
<div class="solution-header">
<div>
Soluzione
<span title={id} class="dotted">
Soluzione
</span>
{sentBy && (
<>
{' '}
@@ -95,18 +99,15 @@ export const Solution = ({
{forProblem && (
<>
{' '}
per il{' '}
<a href={prependBaseUrl(`/problem/${forProblem}`)}>Problema {forProblem}</a>
per il <a href={prependBaseUrl(`/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')}
{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>
</>
)}
@@ -127,29 +128,37 @@ export const Solution = ({
<div class="status-label">{STATUS_SELECT_OPTIONS[status]}</div>
{adminControls && (
<>
<button disabled={status === 'correct'} class="icon" onClick={markAsCorrect}>
<button title="Segna come corretta" 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 title="Segna come sbagliata" disabled={status === 'wrong'} class="icon" onClick={markAsWrong}>
<span class="material-symbols-outlined wrong">cancel</span>
</button>
{status !== 'pending' && (
<button class="icon" onClick={changeVisibility}>
<span class="material-symbols-outlined">
{visible ? 'visibility' : 'visibility_off'}
</span>
<button
title={visible ? 'Nascondi al pubblico' : 'Rendi visibile al pubblico'}
class="icon"
onClick={changeVisibility}
>
<span class="material-symbols-outlined">{visible ? 'visibility' : 'visibility_off'}</span>
</button>
)}
</>
)}
{user && (user.role === 'admin' || sentBy === user.id) && (
<>
<button class="icon" title="Elimina questa soluzione" onClick={() => deleteSolution()}>
<span class="material-symbols-outlined wrong">delete</span>
</button>
</>
)}
<div class="vr"></div>
<button
class="icon"
onClick={toggleViewRaw}
title={!viewRaw ? 'Mostra markdown grezzo' : 'Mostra testo matematicoso'}
>
<span class="material-symbols-outlined">
{!viewRaw ? 'data_object' : 'functions'}
</span>
<span class="material-symbols-outlined">{!viewRaw ? 'data_object' : 'functions'}</span>
</button>
</div>
</div>