Prima release
This commit is contained in:
@@ -1,19 +1,28 @@
|
||||
import { useRef } from 'preact/hooks'
|
||||
import { useRef, useState } from 'preact/hooks'
|
||||
import { Icon } from './Icon.jsx'
|
||||
|
||||
export const ComboBox = ({ selected, options }) => {
|
||||
let ids = 0
|
||||
|
||||
function generateId() {
|
||||
return 'combo-id-' + ids++
|
||||
}
|
||||
|
||||
export const ComboBox = ({ options, value, setValue }) => {
|
||||
const [uid] = useState(() => generateId())
|
||||
const selectRef = useRef()
|
||||
|
||||
return (
|
||||
<div class="input-combo" onClick={() => selectRef.current?.click()}>
|
||||
<select ref={selectRef}>
|
||||
{options.map(({ label, value }) => (
|
||||
<option value={value} selected={value === selected}>
|
||||
{label}
|
||||
<div class="input-combo">
|
||||
<select ref={selectRef} id={uid} onInput={e => setValue(e.target.value)}>
|
||||
{options.map(option => (
|
||||
<option value={option.value} selected={option.value === value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Icon name="expand_more" />
|
||||
<label class="icon" for={uid}>
|
||||
<Icon name="expand_more" />
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import { withClasses } from '../utils.jsx'
|
||||
|
||||
export const CompoundButton = ({ options, value, setValue }) => {
|
||||
return (
|
||||
<div class="compound">
|
||||
{options.map(option => (
|
||||
<button
|
||||
class={withClasses(['radio', option.value === value && 'selected'])}
|
||||
onClick={() => setValue(option.value)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ComboBox } from './ComboBox.jsx'
|
||||
import { Icon } from './Icon.jsx'
|
||||
|
||||
export const HamburgerMenu = ({ onClose }) => {
|
||||
export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) => {
|
||||
return (
|
||||
<div class="menu">
|
||||
<div class="header">
|
||||
@@ -11,12 +11,29 @@ export const HamburgerMenu = ({ onClose }) => {
|
||||
<div class="item logo">PHC / Orari</div>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="label">Gruppo Corsi</div>
|
||||
<ComboBox
|
||||
selected={1}
|
||||
value={source}
|
||||
setValue={setSource}
|
||||
options={[
|
||||
{ label: 'Prova 1', value: 1 },
|
||||
{ label: 'Prova 2', value: 2 },
|
||||
{ label: 'Prova 3', value: 3 },
|
||||
{ value: 'anno-1', label: 'I' },
|
||||
{ value: 'anno-2', label: 'II' },
|
||||
{ value: 'anno-3', label: 'III' },
|
||||
{ value: 'magistrale', label: 'Magistrale' },
|
||||
{ value: 'tutti', label: 'Tutti' },
|
||||
]}
|
||||
/>
|
||||
<div class="label">Visualizzazione</div>
|
||||
<ComboBox
|
||||
value={mode}
|
||||
setValue={setMode}
|
||||
options={[
|
||||
{ value: 'course', label: 'Corsi' },
|
||||
{ value: 'work-week-v', label: 'Settimana' },
|
||||
{
|
||||
value: 'work-week-h',
|
||||
label: 'Settimana (Trasposto)',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1 +1,5 @@
|
||||
export const Icon = ({ name }) => <span class="material-symbols-outlined">{name}</span>
|
||||
export const Icon = ({ name, ...rest }) => (
|
||||
<span class="material-symbols-outlined" {...rest}>
|
||||
{name}
|
||||
</span>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Icon } from './Icon.jsx'
|
||||
|
||||
export const Popup = ({ title, children, onClose }) => {
|
||||
return (
|
||||
<div class="popup-container">
|
||||
<div class="popup">
|
||||
<div class="header">
|
||||
<div class="title">{title}</div>
|
||||
<button class="flat icon" onClick={onClose}>
|
||||
<Icon name="close" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="content">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+41
-58
@@ -1,6 +1,7 @@
|
||||
import { CompoundButton } from './CompoundButton.jsx'
|
||||
import { Icon } from './Icon.jsx'
|
||||
|
||||
export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu }) => {
|
||||
export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp }) => {
|
||||
return (
|
||||
<div class="toolbar">
|
||||
<div class="mobile">
|
||||
@@ -8,72 +9,54 @@ export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu }) => {
|
||||
<Icon name="menu" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="item logo">PHC / Orari</div>
|
||||
<div class="item logo">
|
||||
<img src="logo-circuit-board.svg" alt="logo" /> / <span>Orari</span>
|
||||
</div>
|
||||
<div class="option-group">
|
||||
<div class="item option">
|
||||
<div class="compound">
|
||||
<button
|
||||
class={'radio' + (source === 'anno-1' ? ' selected' : '')}
|
||||
onClick={() => setSource('anno-1')}
|
||||
>
|
||||
I
|
||||
</button>
|
||||
<button
|
||||
class={'radio' + (source === 'anno-2' ? ' selected' : '')}
|
||||
onClick={() => setSource('anno-2')}
|
||||
>
|
||||
II
|
||||
</button>
|
||||
<button
|
||||
class={'radio' + (source === 'anno-3' ? ' selected' : '')}
|
||||
onClick={() => setSource('anno-3')}
|
||||
>
|
||||
III
|
||||
</button>
|
||||
<button
|
||||
class={'radio' + (source === 'magistrale' ? ' selected' : '')}
|
||||
onClick={() => setSource('magistrale')}
|
||||
>
|
||||
Magistrale
|
||||
</button>
|
||||
{/* TODO: Aggiungere il pulsante per "tutti" */}
|
||||
{/* <button
|
||||
class={'radio' + (source === 'tutti' ? ' selected' : '')}
|
||||
onClick={() => setSource('tutti')}
|
||||
>
|
||||
Tutti
|
||||
</button> */}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item option">
|
||||
<div class="compound">
|
||||
<button
|
||||
class={'radio' + (mode === 'course' ? ' selected' : '')}
|
||||
onClick={() => setMode('course')}
|
||||
>
|
||||
Corso
|
||||
</button>
|
||||
<button
|
||||
class={'radio' + (mode === 'work-week-v' ? ' selected' : '')}
|
||||
onClick={() => setMode('work-week-v')}
|
||||
>
|
||||
Settimana
|
||||
</button>
|
||||
<button
|
||||
class={'radio' + (mode === 'work-week-h' ? ' selected' : '')}
|
||||
onClick={() => setMode('work-week-h')}
|
||||
>
|
||||
Settimana<sup>T</sup>
|
||||
</button>
|
||||
</div>
|
||||
<CompoundButton
|
||||
options={[
|
||||
{ value: 'anno-1', label: 'I' },
|
||||
{ value: 'anno-2', label: 'II' },
|
||||
{ value: 'anno-3', label: 'III' },
|
||||
{ value: 'magistrale', label: 'Magistrale' },
|
||||
{ value: 'tutti', label: 'Tutti' },
|
||||
]}
|
||||
value={source}
|
||||
setValue={setSource}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-group">
|
||||
<div class="item option">
|
||||
<button class="icon">
|
||||
<CompoundButton
|
||||
options={[
|
||||
{ value: 'course', label: 'Corsi' },
|
||||
{ value: 'work-week-v', label: 'Settimana' },
|
||||
{
|
||||
value: 'work-week-h',
|
||||
label: (
|
||||
<>
|
||||
<Icon name="warning" />
|
||||
Settimana<sup>T</sup>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
value={mode}
|
||||
setValue={setMode}
|
||||
/>
|
||||
</div>
|
||||
<div class="item option">
|
||||
<button class="icon" onClick={() => window.print()}>
|
||||
<Icon name="print" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="item option">
|
||||
<button class="icon" onClick={onHelp}>
|
||||
<Icon name="question_mark" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user