Primi prototipi nella pagina di appunti condivisi
parent
63ec0d559b
commit
8c4ed0b70e
@ -1,24 +1,212 @@
|
|||||||
import { render } from 'preact'
|
import { render } from 'preact'
|
||||||
import { useState } from 'preact/hooks'
|
import { useEffect, useRef, useState } from 'preact/hooks'
|
||||||
|
|
||||||
const Counter = ({}) => {
|
function randomHex(length = 16) {
|
||||||
const [value, setValue] = useState(0)
|
return Array.from({ length }, () => Math.floor(Math.random() * 16).toString(16)).join('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const useAutosizeTextarea = () => {
|
||||||
|
const [rows, setRows] = useState(1)
|
||||||
|
|
||||||
|
const onInput = e => {
|
||||||
|
const lines = e.target.value.split('\n')
|
||||||
|
console.log(lines)
|
||||||
|
|
||||||
|
setRows(lines.length)
|
||||||
|
}
|
||||||
|
|
||||||
|
return { rows, onInput }
|
||||||
|
}
|
||||||
|
|
||||||
|
const InputTags = ({ tags, setTags, availableTags }) => {
|
||||||
|
availableTags ??= []
|
||||||
|
|
||||||
|
const [id] = useState('tags-' + randomHex())
|
||||||
|
|
||||||
|
const nextRef = useRef()
|
||||||
|
const [nextText, setNextText] = useState('')
|
||||||
|
|
||||||
|
const onFocus = e => {
|
||||||
|
if (!e.target.closest('.tags .tag .remove')) {
|
||||||
|
nextRef.current?.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeTag = tag => {
|
||||||
|
setTags(tags => tags.filter(t => t !== tag))
|
||||||
|
}
|
||||||
|
|
||||||
|
const addTag = tag => {
|
||||||
|
setTags(tags => [...tags, tag])
|
||||||
|
}
|
||||||
|
|
||||||
|
const onKeyDown = e => {
|
||||||
|
if (e.key === 'Backspace' && nextText.length === 0) {
|
||||||
|
removeTag(tags.at(-1))
|
||||||
|
}
|
||||||
|
|
||||||
const increment = () => {
|
const trimmed = nextText.trim()
|
||||||
setValue(value => value + 1)
|
if (e.key === 'Enter' && trimmed.length > 0) {
|
||||||
|
addTag(trimmed)
|
||||||
|
setNextText('')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<p>
|
<div class="input-tags" onClick={onFocus}>
|
||||||
Counter: {value} <button onClick={increment}>+</button>
|
{tags.map(tag => (
|
||||||
</p>
|
<div class="tag">
|
||||||
|
<span>{tag}</span>
|
||||||
|
<span class="remove" onClick={() => removeTag(tag)}>
|
||||||
|
<i class="fa-solid fa-remove"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
ref={nextRef}
|
||||||
|
list={id}
|
||||||
|
value={nextText}
|
||||||
|
onInput={e => setNextText(e.target.value)}
|
||||||
|
onKeyDown={onKeyDown}
|
||||||
|
/>
|
||||||
|
<datalist id={id}>
|
||||||
|
{availableTags.map(({ id, label }) => (
|
||||||
|
<option value={id} label={label} />
|
||||||
|
))}
|
||||||
|
</datalist>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const App = ({}) => {
|
||||||
|
const descriptionTextareaProps = useAutosizeTextarea()
|
||||||
|
|
||||||
|
const [tags, setTags] = useState(['Geometria 1', 'Fortuna', 'Frigerio', '2013/2014'])
|
||||||
|
|
||||||
|
const availableTags = [
|
||||||
|
...Array.from({ length: 10 }, (_, i) => {
|
||||||
|
const year = new Date().getFullYear() - i
|
||||||
|
|
||||||
|
return { id: `${year}/${year + 1}`, label: `Anno Accademico ${year}/${year + 1}` }
|
||||||
|
}),
|
||||||
|
{ id: 'G1', label: 'Geometria 1' },
|
||||||
|
{ id: 'G2', label: 'Geometria 2' },
|
||||||
|
{ id: 'ETI', label: 'Elementi di Teoria degli Insiemi' },
|
||||||
|
{ id: 'ETA', label: 'Elementi di Topologia Algebrica' },
|
||||||
|
{ id: 'Analisi 1', label: 'Analisi 1' },
|
||||||
|
{ id: 'Aritmetica', label: 'Aritmetica' },
|
||||||
|
{ id: 'Programmazione', label: 'Programmazione' },
|
||||||
|
{ id: 'Fisica 1', label: 'Fisica 1' },
|
||||||
|
{ id: 'Steffe 1', label: 'Laboratorio di Comunicazione Mediante Calcolatore' },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div class="upload-region">
|
||||||
|
<span>Trascina qui un PDF oppure usa il tasto sottostante</span>
|
||||||
|
<button>Carica PDF</button>
|
||||||
|
</div>
|
||||||
|
<div class="dispense-table">
|
||||||
|
<div class="edit header"></div>
|
||||||
|
<div class="name header">Nome</div>
|
||||||
|
<div class="tags header">Tags</div>
|
||||||
|
<div class="status header">Stato</div>
|
||||||
|
|
||||||
|
<div class="separator"></div>
|
||||||
|
|
||||||
|
<div class="edit">
|
||||||
|
<button class="icon flat">
|
||||||
|
<i class="fa-solid fa-angle-down"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="name">Appunti di Geometria 1</div>
|
||||||
|
<div class="tags">
|
||||||
|
<div class="tag">Geometria 1</div>
|
||||||
|
<div class="tag">Prof. 1</div>
|
||||||
|
<div class="tag">2016/2017</div>
|
||||||
|
</div>
|
||||||
|
<div class="status approved">
|
||||||
|
<i class="fa-solid fa-check"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="separator"></div>
|
||||||
|
|
||||||
|
<div class="expanded">
|
||||||
|
<div class="edit-close">
|
||||||
|
<button class="icon flat">
|
||||||
|
<i class="fa-solid fa-angle-up"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="edit-container">
|
||||||
|
<p>
|
||||||
|
Qui puoi modificare le varie proprietà della dispensa, ricorda che se
|
||||||
|
carichi un nuovo PDF diverso dal precedente dovrà essere nuovamente
|
||||||
|
sottoposto a approvazione quindi inizialmente scomparirà dall'elenco
|
||||||
|
principale.
|
||||||
|
</p>
|
||||||
|
<div class="edit-form">
|
||||||
|
<div class="label">Nome</div>
|
||||||
|
<input type="text" placeholder="Nome" value="Mezzedimi" />
|
||||||
|
<div class="label">Descrizione</div>
|
||||||
|
<textarea
|
||||||
|
placeholder="Descrizione..."
|
||||||
|
value="Best dispensa di Geometria 1 ever written anche se non in LaTeX"
|
||||||
|
{...descriptionTextareaProps}
|
||||||
|
></textarea>
|
||||||
|
<div class="label">Tags</div>
|
||||||
|
<InputTags {...{ tags, setTags, availableTags }} />
|
||||||
|
<div class="label">PDF</div>
|
||||||
|
<input type="file" value="/mezzedimi.pdf" accept="application/pdf" />
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<button class="primary">Salva</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="separator"></div>
|
||||||
|
|
||||||
|
<div class="edit">
|
||||||
|
<button class="icon flat">
|
||||||
|
<i class="fa-solid fa-angle-down"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="name pending">Appunti di Geometria 2</div>
|
||||||
|
<div class="tags">
|
||||||
|
<div class="tag">Geometria 2</div>
|
||||||
|
<div class="tag">Prof. 2</div>
|
||||||
|
<div class="tag">2017/2018</div>
|
||||||
|
<div class="tag">Tanti Tag</div>
|
||||||
|
<div class="tag">Tanti Tag</div>
|
||||||
|
<div class="tag">Tanti Tag</div>
|
||||||
|
<div class="tag">Tanti Tag</div>
|
||||||
|
<div class="tag">Tanti Tag</div>
|
||||||
|
<div class="tag">Tanti Tag</div>
|
||||||
|
</div>
|
||||||
|
<div class="status pending" title="In attesa di approvazione...">
|
||||||
|
<i class="fas fa-hourglass"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="separator"></div>
|
||||||
|
|
||||||
|
<div class="edit">
|
||||||
|
<button class="icon flat">
|
||||||
|
<i class="fa-solid fa-angle-down"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="name rejected">F1Le SuP3R LeGaLe</div>
|
||||||
|
<div class="tags">
|
||||||
|
<div class="tag">Foo</div>
|
||||||
|
<div class="tag">Bar</div>
|
||||||
|
</div>
|
||||||
|
<div class="status rejected">
|
||||||
|
<i class="fa-solid fa-xmark"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
render(
|
render(<App />, document.querySelector('#app'))
|
||||||
<>
|
|
||||||
<h1>Preact is Working!</h1>
|
|
||||||
<Counter />
|
|
||||||
</>,
|
|
||||||
document.querySelector('#app')
|
|
||||||
)
|
|
||||||
|
|||||||
Loading…
Reference in New Issue