Pagina admin con creazione problemi e pagina utente personale
This commit is contained in:
@@ -22,3 +22,41 @@ $ npm run dev
|
||||
$ npm run build
|
||||
$ npm run serve
|
||||
```
|
||||
|
||||
# TODO
|
||||
|
||||
- Pagina profilo utente
|
||||
- Lista soluzioni inviate (con stato delle soluzioni: approvate o rifiutate)
|
||||
|
||||
- Pagina dell'admin
|
||||
- Lista delle soluzioni non corrette
|
||||
- Creazione nuovi problemi
|
||||
|
||||
- DBv2
|
||||
|
||||
```js
|
||||
relations: [
|
||||
{
|
||||
from: 'Solution'
|
||||
name: 'for'
|
||||
to: 'Problem'
|
||||
entries: [
|
||||
['LRLAH2NoLFQAQHQgz', '1']
|
||||
['JzyiDnwRCrkpzLL8W', '1']
|
||||
['FFYMJjP2yr4ohdmdT', '2']
|
||||
['VFHTb8fSrLOkPNVFx', '2']
|
||||
]
|
||||
}
|
||||
{
|
||||
from: 'User'
|
||||
name: 'owns'
|
||||
to: 'Solution'
|
||||
entries: [
|
||||
['aziis98', 'LRLAH2NoLFQAQHQgz']
|
||||
['aziis98', 'JzyiDnwRCrkpzLL8W']
|
||||
['BachoSeven', 'FFYMJjP2yr4ohdmdT']
|
||||
['BachoSeven', 'VFHTb8fSrLOkPNVFx']
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@@ -1,10 +1,12 @@
|
||||
import Router from 'preact-router'
|
||||
import { route } from 'preact-router'
|
||||
import { useEffect } from 'preact/hooks'
|
||||
import { AdminPage } from './pages/Admin.jsx'
|
||||
|
||||
import { HomePage } from './pages/Home.jsx'
|
||||
import { LoginPage } from './pages/Login.jsx'
|
||||
import { ProblemPage } from './pages/Problem.jsx'
|
||||
import { ProfilePage } from './pages/Profile.jsx'
|
||||
|
||||
const Redirect = ({ to }) => {
|
||||
useEffect(() => {
|
||||
@@ -23,7 +25,9 @@ export const App = ({ url }) => {
|
||||
<Router url={url}>
|
||||
<HomePage path="/" />
|
||||
<LoginPage path="/login" />
|
||||
<ProfilePage path="/profile" />
|
||||
<ProblemPage path="/problem/:id" />
|
||||
<AdminPage path="/admin" />
|
||||
<Redirect default to="/" />
|
||||
</Router>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
export const server = {
|
||||
async get(url) {
|
||||
const res = await fetch(url, { credentials: 'include' })
|
||||
return await res.json()
|
||||
},
|
||||
async post(url, body) {
|
||||
const res = await fetch(url, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
|
||||
return await res.json()
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Link } from 'preact-router/match'
|
||||
|
||||
const ROLE_LABEL = {
|
||||
admin: 'Admin',
|
||||
moderator: 'Moderatore',
|
||||
}
|
||||
|
||||
export const Header = ({ user, noLogin }) => (
|
||||
<header>
|
||||
<div class="logo">
|
||||
<a href="/">PHC / Problemi</a>
|
||||
</div>
|
||||
<nav>
|
||||
{user ? (
|
||||
<>
|
||||
{user.role !== 'student' && (
|
||||
<div class="nav-item">
|
||||
<Link activeClassName="active" href="/admin">
|
||||
Pannello Admin
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div class="nav-item">
|
||||
<Link activeClassName="active" href="/profile">
|
||||
@{user.username}
|
||||
{user.role !== 'student' && <> ({ROLE_LABEL[user.role]})</>}
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
!noLogin && (
|
||||
<div class="nav-item">
|
||||
<Link href="/login">Login</Link>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
@@ -7,20 +7,34 @@ import remarkRehype from 'remark-rehype'
|
||||
import rehypeKatex from 'rehype-katex'
|
||||
import rehypeStringify from 'rehype-stringify'
|
||||
|
||||
async function renderMarkdownAsync(source) {
|
||||
return await unified()
|
||||
.use(remarkParse)
|
||||
.use(remarkMath)
|
||||
.use(remarkRehype)
|
||||
.use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
|
||||
.use(rehypeStringify)
|
||||
.process(source)
|
||||
}
|
||||
|
||||
// function renderMarkdownSync(source) {
|
||||
// console.warn(`[Markdown] Rendering ${source.length} characters of markdown in sync mode`)
|
||||
|
||||
// return unified()
|
||||
// .use(remarkParse)
|
||||
// .use(remarkMath)
|
||||
// .use(remarkRehype)
|
||||
// .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
|
||||
// .use(rehypeStringify)
|
||||
// .processSync(source)
|
||||
// }
|
||||
|
||||
export const Markdown = ({ source }) => {
|
||||
const elementRef = useRef()
|
||||
|
||||
useEffect(async () => {
|
||||
const renderedHtml = await unified()
|
||||
.use(remarkParse)
|
||||
.use(remarkMath)
|
||||
.use(remarkRehype)
|
||||
.use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
|
||||
.use(rehypeStringify)
|
||||
.process(source)
|
||||
|
||||
if (elementRef.current) {
|
||||
elementRef.current.innerHTML = renderedHtml
|
||||
elementRef.current.innerHTML = await renderMarkdownAsync(source)
|
||||
}
|
||||
}, [source])
|
||||
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { useEffect, useRef } from 'preact/hooks'
|
||||
import { Markdown } from './Markdown.jsx'
|
||||
|
||||
export const MarkdownEditor = ({ source, setSource }) => {
|
||||
const editorRef = useRef()
|
||||
|
||||
useEffect(() => {
|
||||
if (editorRef.current) {
|
||||
// settare questo ad "auto" toglie l'altezza al contenitore che passa alla sua
|
||||
// dimensione minima iniziale, ciò serve per permettere all'autosize della textarea di
|
||||
// crescere e ridursi ma ha il problema che resetta lo scroll della pagina che deve
|
||||
// essere preservato a mano
|
||||
const oldScrollY = window.scrollY
|
||||
editorRef.current.style.height = 'auto'
|
||||
editorRef.current.style.height = editorRef.current.scrollHeight + 'px'
|
||||
window.scrollTo(0, oldScrollY)
|
||||
}
|
||||
}, [source])
|
||||
|
||||
return (
|
||||
<div class="markdown-editor">
|
||||
<div class="editor">
|
||||
<h1>Editor</h1>
|
||||
<textarea
|
||||
onInput={e => setSource(e.target.value)}
|
||||
value={source}
|
||||
cols="60"
|
||||
ref={editorRef}
|
||||
placeholder="Scrivi una nuova soluzione..."
|
||||
></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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -7,7 +7,6 @@ export const Problem = ({ id, content, createdBy }) => {
|
||||
<div class="problem-title">
|
||||
<a href={`/problem/${id}`}>Problema {id}</a>
|
||||
</div>
|
||||
{createdBy && <div class="problem-author">Creato da @{createdBy}</div>}
|
||||
</div>
|
||||
<div class="problem-content">
|
||||
<Markdown source={content} />
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
export const Select = ({ options, value, setValue }) => (
|
||||
<div class="input-select">
|
||||
<select onInput={e => setValue?.(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>
|
||||
)
|
||||
@@ -1,10 +1,24 @@
|
||||
import { Markdown } from './Markdown.jsx'
|
||||
|
||||
export const Solution = ({ userId, content }) => {
|
||||
export const Solution = ({ userId, problemId, content }) => {
|
||||
return (
|
||||
<div class="solution">
|
||||
<div class="solution-header">
|
||||
<div>@{userId}</div>
|
||||
<div>
|
||||
Soluzione
|
||||
{userId && (
|
||||
<>
|
||||
{' '}
|
||||
di <a href={`/user/${userId}`}>@{userId}</a>
|
||||
</>
|
||||
)}
|
||||
{problemId && (
|
||||
<>
|
||||
{' '}
|
||||
per il <a href={`/problem/${problemId}`}>Problema {problemId}</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-content">
|
||||
<Markdown source={content} />
|
||||
|
||||
@@ -2,11 +2,3 @@ import { hydrate } from 'preact'
|
||||
import { App } from './App.jsx'
|
||||
|
||||
hydrate(<App />, document.body)
|
||||
|
||||
window.fetchServer = url => {
|
||||
fetch(url, { credentials: 'include' })
|
||||
.then(res => res.ok && res.json())
|
||||
.then(data => {
|
||||
console.log(data)
|
||||
})
|
||||
}
|
||||
|
||||
+6
-14
@@ -1,32 +1,24 @@
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
|
||||
import { createContext } from 'preact'
|
||||
import { server } from './api.jsx'
|
||||
|
||||
export const MetadataContext = createContext({})
|
||||
|
||||
export const useCurrentUser = onLoaded => {
|
||||
const [user, setUser] = useState(null)
|
||||
|
||||
const logout = () => {
|
||||
const logout = async () => {
|
||||
await server.post('/api/logout')
|
||||
setUser(null)
|
||||
}
|
||||
|
||||
useEffect(async () => {
|
||||
const res = await fetch(`/api/current-user`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
const user = await res.json()
|
||||
const user = await server.get('/api/current-user')
|
||||
setUser(user)
|
||||
|
||||
console.log(`Current user is`, user)
|
||||
|
||||
onLoaded?.(user)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
console.log(user)
|
||||
}, [user])
|
||||
|
||||
return [user, logout]
|
||||
}
|
||||
|
||||
@@ -35,8 +27,8 @@ export const useReadResource = (url, initialValue) => {
|
||||
|
||||
function refresh() {
|
||||
const controller = new AbortController()
|
||||
|
||||
fetch(url, { signal: controller.signal })
|
||||
const realUrl = typeof url === 'function' ? url() : url
|
||||
fetch(realUrl, { signal: controller.signal })
|
||||
.then(res => {
|
||||
if (res.ok) {
|
||||
return res.json()
|
||||
|
||||
+35
-15
@@ -1,26 +1,46 @@
|
||||
import { route } from 'preact-router'
|
||||
import { useEffect } from 'preact/hooks'
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
import { server } from '../api.jsx'
|
||||
import { Header } from '../components/Header.jsx'
|
||||
import { MarkdownEditor } from '../components/MarkdownEditor.jsx'
|
||||
import { useCurrentUser } from '../hooks.jsx'
|
||||
|
||||
export const Admin = ({}) => {
|
||||
const CreateProblem = ({}) => {
|
||||
const [source, setSource] = useState('')
|
||||
const createProblem = async () => {
|
||||
const id = await server.post('/api/problem', {
|
||||
content: source,
|
||||
})
|
||||
|
||||
route(`/problem/${id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<MarkdownEditor {...{ source, setSource }} />
|
||||
<button onClick={createProblem}>Aggiungi Problema</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const AdminPage = ({}) => {
|
||||
const [user] = useCurrentUser(user => {
|
||||
if (!user || user.role !== 'admin') {
|
||||
if (!user) {
|
||||
route('/login', true)
|
||||
} else if (user.role !== 'admin' && user.role !== 'moderator') {
|
||||
route('/', true)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<main class="admin">
|
||||
<div class="logo">PHC / Problemi</div>
|
||||
<div class="subtitle">
|
||||
{user ? (
|
||||
<>
|
||||
Logged in as {user.role} @{user.username}
|
||||
</>
|
||||
) : (
|
||||
<a href="/login">Login</a>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
user && (
|
||||
<main class="page-admin">
|
||||
<Header {...{ user }} />
|
||||
<div class="subtitle">Nuovo problema</div>
|
||||
<CreateProblem />
|
||||
<div class="subtitle">Soluzioni ancora da approvare/rifiutare</div>
|
||||
...
|
||||
</main>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
+19
-25
@@ -1,39 +1,33 @@
|
||||
import { route } from 'preact-router'
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
import { Header } from '../components/Header.jsx'
|
||||
|
||||
import { Problem } from '../components/Problem.jsx'
|
||||
import { Select } from '../components/Select.jsx'
|
||||
import { useReadResource, useCurrentUser } from '../hooks.jsx'
|
||||
|
||||
export const HomePage = () => {
|
||||
const [user, logout] = useCurrentUser()
|
||||
|
||||
const handleLogout = async () => {
|
||||
await fetch(`/api/logout`, {
|
||||
method: 'POST',
|
||||
})
|
||||
|
||||
logout()
|
||||
}
|
||||
|
||||
const [user] = useCurrentUser()
|
||||
const [problems] = useReadResource('/api/problems', [])
|
||||
|
||||
return (
|
||||
<main class="home">
|
||||
<div class="logo">PHC / Problemi</div>
|
||||
<div class="subtitle">
|
||||
{user ? (
|
||||
<>
|
||||
Logged in as {user.role} @{user.username} (
|
||||
<span class="link" onClick={handleLogout}>
|
||||
Logout
|
||||
</span>
|
||||
)
|
||||
</>
|
||||
) : (
|
||||
<a href="/login">Login</a>
|
||||
)}
|
||||
</div>
|
||||
<main class="page-home">
|
||||
<Header {...{ user }} />
|
||||
<div class="board">
|
||||
<div class="fill-row board-controls">
|
||||
<div class="sort-order">
|
||||
<Select
|
||||
value="oldest"
|
||||
options={{
|
||||
'latest': 'Prima più recenti',
|
||||
'oldest': 'Prima più antichi',
|
||||
'top-solved': 'Prima più risolti',
|
||||
'least-solved': 'Prima meno risolti',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{problems.map(p => (
|
||||
<Problem {...p} />
|
||||
))}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { route } from 'preact-router'
|
||||
|
||||
import { useState } from 'preact/hooks'
|
||||
import { Header } from '../components/Header.jsx'
|
||||
|
||||
export const LoginPage = () => {
|
||||
const [username, setUsername] = useState('')
|
||||
@@ -20,10 +21,9 @@ export const LoginPage = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<main class="login">
|
||||
<div class="logo">PHC / Problemi</div>
|
||||
<main class="page-login">
|
||||
<Header noLogin />
|
||||
<div class="subtitle">Accedi</div>
|
||||
|
||||
<div class="form">
|
||||
<label for="login-username">Username</label>
|
||||
<input
|
||||
|
||||
+11
-62
@@ -1,5 +1,7 @@
|
||||
import { useContext, useEffect, useRef, useState } from 'preact/hooks'
|
||||
import { Markdown } from '../components/Markdown.jsx'
|
||||
import { server } from '../api.jsx'
|
||||
import { Header } from '../components/Header.jsx'
|
||||
import { MarkdownEditor } from '../components/MarkdownEditor.jsx'
|
||||
import { Problem } from '../components/Problem.jsx'
|
||||
import { Solution } from '../components/Solution.jsx'
|
||||
import { MetadataContext, useCurrentUser, useReadResource } from '../hooks.jsx'
|
||||
@@ -11,49 +13,23 @@ export const ProblemPage = ({ id }) => {
|
||||
const [user] = useCurrentUser()
|
||||
|
||||
const [source, setSource] = useState('')
|
||||
const editorRef = useRef()
|
||||
|
||||
const [{ content }] = useReadResource(`/api/problem/${id}`, { content: '' })
|
||||
|
||||
const [solutions] = useReadResource(`/api/solutions?problem=${id}`, [])
|
||||
|
||||
const sendSolution = async () => {
|
||||
const res = await fetch(`/api/solution`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
problemId: id,
|
||||
content: source,
|
||||
}),
|
||||
await server.post('/api/solution', {
|
||||
problemId: id,
|
||||
content: source,
|
||||
})
|
||||
|
||||
location.reload()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (editorRef.current) {
|
||||
// settare questo ad "auto" toglie l'altezza al contenitore che passa alla sua
|
||||
// dimensione minima iniziale, ciò serve per permettere all'autosize della textarea di
|
||||
// crescere e ridursi ma ha il problema che resetta lo scroll della pagina che deve
|
||||
// essere preservato a mano
|
||||
const oldScrollY = window.scrollY
|
||||
editorRef.current.style.height = 'auto'
|
||||
editorRef.current.style.height = editorRef.current.scrollHeight + 'px'
|
||||
window.scrollTo(0, oldScrollY)
|
||||
}
|
||||
}, [source])
|
||||
|
||||
return (
|
||||
<main class="problem">
|
||||
<div class="logo">PHC / Problemi</div>
|
||||
{user && (
|
||||
<div class="subtitle">
|
||||
Logged in as {user.role} @{user.username}
|
||||
</div>
|
||||
)}
|
||||
<main class="page-problem">
|
||||
<Header {...{ user }} />
|
||||
<div class="subtitle">Testo del problema</div>
|
||||
<Problem id={id} content={content} />
|
||||
{solutions.length > 0 && (
|
||||
@@ -66,39 +42,12 @@ export const ProblemPage = ({ id }) => {
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
{user ? (
|
||||
{user && (
|
||||
<>
|
||||
<div class="subtitle">Invia una soluzione al problema</div>
|
||||
<div class="solution-editor">
|
||||
<div class="editor">
|
||||
<h1>Editor</h1>
|
||||
<textarea
|
||||
onInput={e => setSource(e.target.value)}
|
||||
value={source}
|
||||
cols="60"
|
||||
ref={editorRef}
|
||||
placeholder="Scrivi una nuova soluzione..."
|
||||
></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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit-solution">
|
||||
<button onClick={sendSolution}>Invia Soluzione</button>
|
||||
</div>
|
||||
<MarkdownEditor {...{ source, setSource }} />
|
||||
<button onClick={sendSolution}>Invia Soluzione</button>
|
||||
</>
|
||||
) : (
|
||||
<div class="subtitle">
|
||||
<a href="/login">Accedi</a> per inviare una soluzione
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import { route } from 'preact-router'
|
||||
import { useState } from 'preact/hooks'
|
||||
import { server } from '../api.jsx'
|
||||
import { Header } from '../components/Header.jsx'
|
||||
import { Solution } from '../components/Solution.jsx'
|
||||
import { useCurrentUser, useReadResource } from '../hooks.jsx'
|
||||
|
||||
export const ProfilePage = ({}) => {
|
||||
const [solutions, setSolutions] = useState([])
|
||||
|
||||
const [user, logout] = useCurrentUser(async user => {
|
||||
if (!user) {
|
||||
route('/login', true)
|
||||
}
|
||||
|
||||
setSolutions(await server.get(`/api/solutions?user=${user.username}`))
|
||||
})
|
||||
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
route('/')
|
||||
}
|
||||
|
||||
return (
|
||||
user && (
|
||||
<main class="page-profile">
|
||||
<Header {...{ user }} />
|
||||
<div class="subtitle">Le tue soluzioni</div>
|
||||
<div class="solution-list">
|
||||
{solutions.map(({ problemId, content }) => (
|
||||
<Solution {...{ problemId, content }} />
|
||||
))}
|
||||
</div>
|
||||
<div class="subtitle">Altro</div>
|
||||
<button onClick={handleLogout}>Logout</button>
|
||||
</main>
|
||||
)
|
||||
)
|
||||
}
|
||||
+283
-154
@@ -1,6 +1,10 @@
|
||||
$device-s-width: 640px;
|
||||
$device-m-width: 1200px;
|
||||
|
||||
:root {
|
||||
--accent: #7b3a99;
|
||||
}
|
||||
|
||||
// Normalize
|
||||
|
||||
*,
|
||||
@@ -58,6 +62,51 @@ input[type='text'] {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.input-select {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
cursor: pointer;
|
||||
font-family: 'Lato';
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
|
||||
border: 1px solid #c8c8c8;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0;
|
||||
|
||||
box-shadow: -2px 2px 16px 0 #00000010;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
background: linear-gradient(180deg, #f0f0f0, #e8e8e8 20%, #e0e0e0 90%, #cdcdcd);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #c4c4c4;
|
||||
box-shadow: -2px 2px 20px 0 #00000010;
|
||||
background: linear-gradient(180deg, #fff, #ededed 20%, #e8e8e8 90%, #c0c0c0);
|
||||
}
|
||||
|
||||
select {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
|
||||
appearance: none;
|
||||
|
||||
padding: 0.5rem 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
|
||||
font-family: 'Lato';
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -88,7 +137,7 @@ a,
|
||||
a:visited {
|
||||
cursor: pointer;
|
||||
|
||||
color: #3a9999;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
@@ -96,7 +145,13 @@ a:visited {
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
.math-inline {
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
@@ -176,21 +231,12 @@ main {
|
||||
|
||||
gap: 2rem;
|
||||
|
||||
.logo {
|
||||
// font-size: 42px;
|
||||
// font-family: 'EB Garamond';
|
||||
// font-weight: 600;
|
||||
font-size: 38px;
|
||||
font-family: 'Lato';
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
main.home {
|
||||
main.page-home {
|
||||
.board {
|
||||
width: 100%;
|
||||
// min-width: 0;
|
||||
@@ -200,171 +246,208 @@ main.home {
|
||||
gap: 2rem;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
.fill-row {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.board-controls {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main.problem {
|
||||
main.page-problem {
|
||||
summary {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.solution-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
main {
|
||||
.problem {
|
||||
padding: 1rem;
|
||||
.solution-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
max-width: 80ch;
|
||||
header {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.5rem;
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
.logo {
|
||||
font-size: 42px;
|
||||
font-family: 'Lato';
|
||||
font-weight: 300;
|
||||
|
||||
.problem-header {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
gap: 0.25rem;
|
||||
|
||||
.problem-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.problem-author {
|
||||
grid-row: 2;
|
||||
|
||||
font-size: 16px;
|
||||
color: #000000dd;
|
||||
// font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-content {
|
||||
@extend .text-body;
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 3px solid var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
.solution {
|
||||
padding: 1rem;
|
||||
|
||||
max-width: 80ch;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.5rem;
|
||||
background: #ffffff;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
|
||||
.solution-header {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.solution-content {
|
||||
@extend .text-body;
|
||||
}
|
||||
}
|
||||
|
||||
.solution-editor {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
nav {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
.editor,
|
||||
.preview {
|
||||
width: 100%;
|
||||
max-width: 70ch;
|
||||
.nav-item {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.editor {
|
||||
justify-self: end;
|
||||
|
||||
textarea {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 18px;
|
||||
|
||||
resize: none;
|
||||
overflow-y: hidden;
|
||||
|
||||
min-height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
justify-self: start;
|
||||
|
||||
.placeholder {
|
||||
color: #444;
|
||||
a.active {
|
||||
border-bottom: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
@extend .text-body;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.25rem;
|
||||
background: #ffffff;
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
min-width: 50ch;
|
||||
|
||||
background: #e0e0e0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
border: 1px solid #c0c0c0;
|
||||
border-radius: 1rem;
|
||||
|
||||
// box-shadow: -2px 4px 16px 4px #00000018, -2px 4px 4px 1px #00000018;
|
||||
|
||||
padding: 1.5rem 2rem 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.fill {
|
||||
grid-column: span 2;
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.math-inline {
|
||||
font-size: 95%;
|
||||
.problem {
|
||||
padding: 1rem;
|
||||
|
||||
max-width: 80ch;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.5rem;
|
||||
background: #ffffff;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
|
||||
.problem-header {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
gap: 0.25rem;
|
||||
|
||||
.problem-title {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.problem-content {
|
||||
@extend .text-body;
|
||||
}
|
||||
}
|
||||
|
||||
.solution {
|
||||
padding: 1rem;
|
||||
|
||||
max-width: 80ch;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.5rem;
|
||||
background: #ffffff;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
|
||||
.solution-header {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
gap: 0.25rem;
|
||||
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.solution-content {
|
||||
@extend .text-body;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
min-width: 50ch;
|
||||
|
||||
background: #e0e0e0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
border: 1px solid #c0c0c0;
|
||||
border-radius: 1rem;
|
||||
|
||||
// box-shadow: -2px 4px 16px 4px #00000018, -2px 4px 4px 1px #00000018;
|
||||
|
||||
padding: 1.5rem 2rem 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.fill {
|
||||
grid-column: span 2;
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-editor {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
gap: 1rem;
|
||||
|
||||
.editor,
|
||||
.preview {
|
||||
width: 100%;
|
||||
max-width: 70ch;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.editor {
|
||||
justify-self: end;
|
||||
|
||||
textarea {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 18px;
|
||||
|
||||
resize: none;
|
||||
overflow-y: hidden;
|
||||
|
||||
min-height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
justify-self: start;
|
||||
|
||||
.placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
@extend .text-body;
|
||||
|
||||
width: 100%;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
box-shadow: -2px 4px 8px 1px #00000020, -1px 1px 1px 0px #00000010;
|
||||
border-radius: 0.25rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
@@ -379,23 +462,69 @@ main {
|
||||
// On mobile
|
||||
@media screen and (max-width: $device-s-width), (pointer: coarse) {
|
||||
main {
|
||||
.solution-editor {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto;
|
||||
padding: 1rem 1rem 6rem;
|
||||
|
||||
&.page-home {
|
||||
.board {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 2rem;
|
||||
|
||||
nav {
|
||||
position: relative;
|
||||
right: unset;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.problem {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.markdown-editor {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
|
||||
min-width: unset;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
label {
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
textarea,
|
||||
.markdown-editor .preview .preview-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $device-m-width), (pointer: coarse) {
|
||||
main {
|
||||
.solution-editor {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto;
|
||||
.markdown-editor {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
.preview,
|
||||
.editor {
|
||||
justify-self: center;
|
||||
}
|
||||
.preview,
|
||||
.editor {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,6 +17,10 @@
|
||||
href="https://fonts.googleapis.com/css2?family=DM+Mono&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="/node_modules/katex/dist/katex.css" />
|
||||
<link rel="stylesheet" href="/client/styles/main.scss" />
|
||||
|
||||
@@ -8,7 +8,7 @@ import { createServer as createViteServer } from 'vite'
|
||||
|
||||
import { createApiRouter } from './server/routes.js'
|
||||
|
||||
const HTML_ROUTES = ['/', '/login', '/problem/:id', '/admin']
|
||||
const HTML_ROUTES = ['/', '/login', '/problem/:id', '/admin', '/profile']
|
||||
|
||||
const config = {
|
||||
isDevelopment: process.env.MODE === 'development',
|
||||
|
||||
@@ -112,6 +112,24 @@ export const getUser = (db, id) =>
|
||||
// Problems
|
||||
//
|
||||
|
||||
export const createProblem = (db, { content, createdBy }) =>
|
||||
withDatabase(db, state => {
|
||||
const nextId = (
|
||||
Object.keys(state.problems)
|
||||
.map(k => parseInt(k))
|
||||
.reduce((acc, id) => Math.max(acc, id)) + 1
|
||||
).toString()
|
||||
|
||||
state.problems[nextId] = {
|
||||
id: nextId,
|
||||
content,
|
||||
createdBy,
|
||||
createdAt: new Date().toJSON(),
|
||||
}
|
||||
|
||||
return nextId
|
||||
})
|
||||
|
||||
export const getProblem = (db, id) =>
|
||||
withDatabase(db, state => {
|
||||
return state.problems[id]
|
||||
|
||||
+20
-5
@@ -8,6 +8,7 @@ import express from 'express'
|
||||
import { createStatusRouter, PingRouter } from './middlewares.js'
|
||||
import {
|
||||
createDatabase,
|
||||
createProblem,
|
||||
createSolution,
|
||||
getProblem,
|
||||
getProblems,
|
||||
@@ -92,6 +93,25 @@ export async function createApiRouter() {
|
||||
res.json(await getProblem(db, req.params.id))
|
||||
})
|
||||
|
||||
r.post('/api/problem', async (req, res) => {
|
||||
const user = await getRequestUser(req)
|
||||
if (!user) {
|
||||
res.sendStatus(401)
|
||||
return
|
||||
}
|
||||
if (user.role !== 'admin' && user.role !== 'moderator') {
|
||||
res.sendStatus(401)
|
||||
return
|
||||
}
|
||||
|
||||
const id = await createProblem(db, {
|
||||
content: req.body.content,
|
||||
createBy: user.username,
|
||||
})
|
||||
|
||||
res.json(id)
|
||||
})
|
||||
|
||||
r.get('/api/solutions', async (req, res) => {
|
||||
let queryUserId = req.query.user
|
||||
let queryProblemId = req.query.problem
|
||||
@@ -146,10 +166,5 @@ export async function createApiRouter() {
|
||||
res.json(requestedUser)
|
||||
})
|
||||
|
||||
// r.post('/api/user/:id', async (req, res) => {
|
||||
// await updateUser(db, req.params.id, req.body)
|
||||
// res.sendStatus(200)
|
||||
// })
|
||||
|
||||
return r
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user