all: Aggiunte varie feature e riscritte svariate cose
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { Link } from 'preact-router/match'
|
||||
import { isAdministrator, User, UserRole } from '../../shared/model'
|
||||
import { prependBaseUrl } from '../api'
|
||||
import { useCurrentUser } from '../hooks/useCurrentUser'
|
||||
|
||||
const ROLE_LABEL: Record<UserRole, string> = {
|
||||
['admin']: 'Admin',
|
||||
@@ -9,39 +10,42 @@ const ROLE_LABEL: Record<UserRole, string> = {
|
||||
}
|
||||
|
||||
type Props = {
|
||||
user?: User | null
|
||||
noLogin?: boolean
|
||||
}
|
||||
|
||||
export const Header = ({ user, noLogin }: Props) => (
|
||||
<header>
|
||||
<div class="logo">
|
||||
<a href={prependBaseUrl('/')}>PHC / Problemi</a>
|
||||
</div>
|
||||
<nav>
|
||||
{user ? (
|
||||
<>
|
||||
{isAdministrator(user.role) && (
|
||||
export const Header = ({ noLogin }: Props) => {
|
||||
const [user] = useCurrentUser()
|
||||
|
||||
return (
|
||||
<header>
|
||||
<div class="logo">
|
||||
<a href={prependBaseUrl('/')}>PHC / Problemi</a>
|
||||
</div>
|
||||
<nav>
|
||||
{user ? (
|
||||
<>
|
||||
{isAdministrator(user.role) && (
|
||||
<div class="nav-item">
|
||||
<Link activeClassName="active" href={prependBaseUrl('/admin')}>
|
||||
Pannello Admin
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div class="nav-item">
|
||||
<Link activeClassName="active" href={prependBaseUrl('/admin')}>
|
||||
Pannello Admin
|
||||
<Link activeClassName="active" href={prependBaseUrl('/profile')}>
|
||||
@{user.id}
|
||||
{isAdministrator(user.role) && <> ({ROLE_LABEL[user.role]})</>}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div class="nav-item">
|
||||
<Link activeClassName="active" href={prependBaseUrl('/profile')}>
|
||||
@{user.id}
|
||||
{isAdministrator(user.role) && <> ({ROLE_LABEL[user.role]})</>}
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
!noLogin && (
|
||||
<div class="nav-item">
|
||||
<Link href={prependBaseUrl('/login')}>Login</Link>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
</>
|
||||
) : (
|
||||
!noLogin && (
|
||||
<div class="nav-item">
|
||||
<Link href={prependBaseUrl('/login')}>Login</Link>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,11 +3,14 @@ import { StateUpdater, useEffect, useRef } from 'preact/hooks'
|
||||
import { Markdown } from './Markdown'
|
||||
|
||||
type Props = {
|
||||
placeholder?: string
|
||||
source: string
|
||||
setSource: StateUpdater<string>
|
||||
}
|
||||
|
||||
export const MarkdownEditor = ({ source, setSource }: Props) => {
|
||||
export const MarkdownEditor = ({ placeholder, source, setSource }: Props) => {
|
||||
placeholder ??= 'Scrivi qualcosa...'
|
||||
|
||||
const editorRef = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -28,23 +31,17 @@ export const MarkdownEditor = ({ source, setSource }: Props) => {
|
||||
<div class="editor">
|
||||
<h1>Editor</h1>
|
||||
<textarea
|
||||
onInput={e =>
|
||||
setSource(e.target instanceof HTMLTextAreaElement ? e.target.value : '')
|
||||
}
|
||||
onInput={e => setSource(e.target instanceof HTMLTextAreaElement ? e.target.value : '')}
|
||||
value={source}
|
||||
cols={60}
|
||||
ref={editorRef}
|
||||
placeholder="Scrivi una nuova soluzione..."
|
||||
placeholder={placeholder}
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<h1>Preview</h1>
|
||||
<div class="preview-content">
|
||||
{source.trim().length ? (
|
||||
<Markdown source={source} />
|
||||
) : (
|
||||
<div class="placeholder">Scrivi una nuova soluzione...</div>
|
||||
)}
|
||||
{source.trim().length ? <Markdown source={source} /> : <div class="placeholder">{placeholder}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
import { Problem as ProblemModel } from '../../shared/model'
|
||||
import { prependBaseUrl } from '../api'
|
||||
import { Markdown } from './Markdown'
|
||||
|
||||
type Props = {
|
||||
id: string
|
||||
title: string
|
||||
content: string
|
||||
solutionsCount?: number
|
||||
}
|
||||
|
||||
export const Problem = ({ id, content, solutionsCount }: Props) => {
|
||||
export const Problem = ({ id, title, content, solutionsCount }: Props) => {
|
||||
return (
|
||||
<div class="problem">
|
||||
<div class="problem-header">
|
||||
<div class="problem-title">
|
||||
<a href={prependBaseUrl(`/problem/${id}`)}>Problema {id}</a>
|
||||
<a href={prependBaseUrl(`/problem/${id}`)}>{title}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem-content">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user