|
|
|
@ -186,7 +186,7 @@ const CORSI_DISPONIBILI: Corso[] = [
|
|
|
|
{ nome: 'Ultrafiltri e metodi non-standard', anno: 'M', cfu: 6 },
|
|
|
|
{ nome: 'Ultrafiltri e metodi non-standard', anno: 'M', cfu: 6 },
|
|
|
|
]
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
function MediaPesataApp() {
|
|
|
|
export function MediaPesataApp() {
|
|
|
|
// Funzioni per localStorage
|
|
|
|
// Funzioni per localStorage
|
|
|
|
const loadFromStorage = () => {
|
|
|
|
const loadFromStorage = () => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
@ -220,13 +220,22 @@ function MediaPesataApp() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Inizializzazione con dati salvati
|
|
|
|
// Inizializzazione con dati salvati
|
|
|
|
const initialData = loadFromStorage()
|
|
|
|
// const initialData = loadFromStorage()
|
|
|
|
const [tipoStudente, setTipoStudente] = useState<TipoStudente>(initialData.tipoStudente)
|
|
|
|
const [tipoStudente, setTipoStudente] = useState<TipoStudente>('triennale')
|
|
|
|
const [corsiSelezionati, setCorsiSelezionati] = useState<CorsoSelezionato[]>(initialData.corsiSelezionati)
|
|
|
|
const [corsiSelezionati, setCorsiSelezionati] = useState<CorsoSelezionato[]>([])
|
|
|
|
const [showCustomForm, setShowCustomForm] = useState(false)
|
|
|
|
const [showCustomForm, setShowCustomForm] = useState(false)
|
|
|
|
const [customCorso, setCustomCorso] = useState<CorsoCustom>({ nome: '', cfu: 0 })
|
|
|
|
const [customCorso, setCustomCorso] = useState<CorsoCustom>({ nome: '', cfu: 0 })
|
|
|
|
const [sezioniAperte, setSezioniAperte] = useState<Record<string, boolean>>(initialData.sezioniAperte)
|
|
|
|
const [sezioniAperte, setSezioniAperte] = useState<Record<string, boolean>>({})
|
|
|
|
const [mostraRisultati, setMostraRisultati] = useState(initialData.mostraRisultati)
|
|
|
|
const [mostraRisultati, setMostraRisultati] = useState(false)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Load data from localStorage on mount
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
const initialData = loadFromStorage()
|
|
|
|
|
|
|
|
setTipoStudente(initialData.tipoStudente)
|
|
|
|
|
|
|
|
setCorsiSelezionati(initialData.corsiSelezionati)
|
|
|
|
|
|
|
|
setSezioniAperte(initialData.sezioniAperte)
|
|
|
|
|
|
|
|
setMostraRisultati(initialData.mostraRisultati)
|
|
|
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
// Salva automaticamente quando cambiano i dati importanti
|
|
|
|
// Salva automaticamente quando cambiano i dati importanti
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
@ -482,15 +491,6 @@ function MediaPesataApp() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const cambiaTipoStudente = (nuovoTipo: TipoStudente) => {
|
|
|
|
const cambiaTipoStudente = (nuovoTipo: TipoStudente) => {
|
|
|
|
if (corsiSelezionati.length > 0 && nuovoTipo !== tipoStudente) {
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
|
|
|
!confirm(
|
|
|
|
|
|
|
|
'Cambiando il tipo di studente, alcune materie potrebbero non essere più disponibili. Continuare?',
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
setTipoStudente(nuovoTipo)
|
|
|
|
setTipoStudente(nuovoTipo)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -501,64 +501,64 @@ function MediaPesataApp() {
|
|
|
|
const cfuError = totaleCfu > maxCfu
|
|
|
|
const cfuError = totaleCfu > maxCfu
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="media-pesata-app">
|
|
|
|
<div class="media-pesata-app">
|
|
|
|
{/* Selezione tipo studente */}
|
|
|
|
{/* Selezione tipo studente */}
|
|
|
|
<div className="student-type-selector">
|
|
|
|
<div class="card student-type-switcher wide">
|
|
|
|
|
|
|
|
<div class="grid-center">
|
|
|
|
<h2>Corso di Laurea</h2>
|
|
|
|
<h2>Corso di Laurea</h2>
|
|
|
|
<div className="radio-group">
|
|
|
|
<div class="compound-button">
|
|
|
|
<label>
|
|
|
|
<button
|
|
|
|
<input
|
|
|
|
class={tipoStudente === 'triennale' ? 'active' : ''}
|
|
|
|
type="radio"
|
|
|
|
onClick={() => cambiaTipoStudente('triennale')}
|
|
|
|
value="triennale"
|
|
|
|
>
|
|
|
|
checked={tipoStudente === 'triennale'}
|
|
|
|
|
|
|
|
onChange={e => cambiaTipoStudente((e.target as HTMLInputElement).value as TipoStudente)}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
Triennale
|
|
|
|
Triennale
|
|
|
|
</label>
|
|
|
|
</button>
|
|
|
|
<label>
|
|
|
|
<button
|
|
|
|
<input
|
|
|
|
class={tipoStudente === 'magistrale' ? 'active' : ''}
|
|
|
|
type="radio"
|
|
|
|
onClick={() => cambiaTipoStudente('magistrale')}
|
|
|
|
value="magistrale"
|
|
|
|
>
|
|
|
|
checked={tipoStudente === 'magistrale'}
|
|
|
|
|
|
|
|
onChange={e => cambiaTipoStudente((e.target as HTMLInputElement).value as TipoStudente)}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
Magistrale
|
|
|
|
Magistrale
|
|
|
|
</label>
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* Counter CFU */}
|
|
|
|
{/* Counter CFU */}
|
|
|
|
<div className={`cfu-counter ${cfuError ? 'error' : ''}`}>
|
|
|
|
<div class={`cfu-counter wide ${cfuError ? 'error' : ''}`}>
|
|
|
|
<h3>
|
|
|
|
<h3>
|
|
|
|
CFU Totali: {totaleCfu}/{maxCfu}
|
|
|
|
CFU Totali: {totaleCfu}/{maxCfu}
|
|
|
|
{tipoStudente === 'triennale' ? ' (+9 tesi)' : ' (+27 tesi)'}
|
|
|
|
{tipoStudente === 'triennale' ? ' (+9 tesi)' : ' (+27 tesi)'}
|
|
|
|
</h3>
|
|
|
|
</h3>
|
|
|
|
{cfuError && <p className="error-text">⚠️ Hai superato il limite di CFU consentiti!</p>}
|
|
|
|
{cfuError && <p class="error-text">⚠️ Hai superato il limite di CFU consentiti!</p>}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className="main-content">
|
|
|
|
|
|
|
|
{/* Sezione selezione corsi */}
|
|
|
|
{/* Sezione selezione corsi */}
|
|
|
|
<div className="course-selection">
|
|
|
|
<div class="card">
|
|
|
|
|
|
|
|
<div class="title">
|
|
|
|
<h2>Seleziona Materie</h2>
|
|
|
|
<h2>Seleziona Materie</h2>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{Object.entries(gruppiCorsi).map(([categoria, corsi]) => (
|
|
|
|
{Object.entries(gruppiCorsi).map(([categoria, corsi]) => (
|
|
|
|
<div key={categoria} className="course-category">
|
|
|
|
<div key={categoria} class="course-category">
|
|
|
|
<button className="category-header" onClick={() => toggleSezione(categoria)}>
|
|
|
|
<button onClick={() => toggleSezione(categoria)}>
|
|
|
|
<h3>{categoria}</h3>
|
|
|
|
<div class="h-flex">
|
|
|
|
<span className={`toggle-icon ${sezioniAperte[categoria] ? 'expanded' : ''}`}>▶</span>
|
|
|
|
{categoria}
|
|
|
|
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
|
|
|
<span class={`toggle-icon ${sezioniAperte[categoria] ? 'expanded' : ''}`}>▶</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
{sezioniAperte[categoria] && (
|
|
|
|
{sezioniAperte[categoria] && (
|
|
|
|
<div className="course-grid">
|
|
|
|
<div class="course-grid">
|
|
|
|
{corsi.map((corso, index) => (
|
|
|
|
{corsi.map((corso, index) => (
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
key={index}
|
|
|
|
key={index}
|
|
|
|
className="course-button"
|
|
|
|
class="course-button"
|
|
|
|
onClick={() => aggiungiCorso(corso)}
|
|
|
|
onClick={() => aggiungiCorso(corso)}
|
|
|
|
disabled={corsiSelezionati.some(c => c.nome === corso.nome)}
|
|
|
|
disabled={corsiSelezionati.some(c => c.nome === corso.nome)}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span className="course-name">{corso.nome}</span>
|
|
|
|
<span class="course-name">{corso.nome}</span>
|
|
|
|
<span className="course-cfu">{corso.cfu} CFU</span>
|
|
|
|
<span class="course-cfu">{corso.cfu} CFU</span>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -567,14 +567,12 @@ function MediaPesataApp() {
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
|
|
|
|
|
|
|
|
{/* Form per materia custom */}
|
|
|
|
{/* Form per materia custom */}
|
|
|
|
<div className="custom-course">
|
|
|
|
<div class="custom-course">
|
|
|
|
<h3>Materia Personalizzata</h3>
|
|
|
|
<h3>Materia Personalizzata</h3>
|
|
|
|
{!showCustomForm ? (
|
|
|
|
{!showCustomForm ? (
|
|
|
|
<button onClick={() => setShowCustomForm(true)} className="add-custom-btn">
|
|
|
|
<button onClick={() => setShowCustomForm(true)}>+ Aggiungi Materia Personalizzata</button>
|
|
|
|
+ Aggiungi Materia Personalizzata
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
) : (
|
|
|
|
) : (
|
|
|
|
<div className="custom-form">
|
|
|
|
<div class="custom-form">
|
|
|
|
<input
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
type="text"
|
|
|
|
placeholder="Nome materia"
|
|
|
|
placeholder="Nome materia"
|
|
|
|
@ -597,42 +595,34 @@ function MediaPesataApp() {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<button onClick={aggiungiCorsoCustom} className="confirm-btn">
|
|
|
|
<button onClick={aggiungiCorsoCustom}>Aggiungi</button>
|
|
|
|
Aggiungi
|
|
|
|
<button onClick={() => setShowCustomForm(false)}>Annulla</button>
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button onClick={() => setShowCustomForm(false)} className="cancel-btn">
|
|
|
|
|
|
|
|
Annulla
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* Sezione lista corsi selezionati */}
|
|
|
|
{/* Sezione lista corsi selezionati */}
|
|
|
|
<div className="selected-courses">
|
|
|
|
<div class="card">
|
|
|
|
<div className="section-header">
|
|
|
|
<div class="h-flex">
|
|
|
|
|
|
|
|
<div class="title">
|
|
|
|
<h2>Materie Selezionate</h2>
|
|
|
|
<h2>Materie Selezionate</h2>
|
|
|
|
{corsiSelezionati.length > 0 && (
|
|
|
|
</div>
|
|
|
|
<button onClick={resetTutto} className="reset-btn">
|
|
|
|
<div class="spacer"></div>
|
|
|
|
🗑️ Cancella Tutto
|
|
|
|
{corsiSelezionati.length > 0 && <button onClick={resetTutto}>🗑️ Cancella Tutto</button>}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{corsiSelezionati.length === 0 ? (
|
|
|
|
{corsiSelezionati.length === 0 ? (
|
|
|
|
<p className="no-courses">Nessuna materia selezionata</p>
|
|
|
|
<p>Nessuna materia selezionata</p>
|
|
|
|
) : (
|
|
|
|
) : (
|
|
|
|
<div className="courses-list">
|
|
|
|
<div class="courses-list">
|
|
|
|
{corsiSelezionati.map(corso => (
|
|
|
|
{corsiSelezionati.map(corso => (
|
|
|
|
<div key={corso.id} className="course-item">
|
|
|
|
<div key={corso.id} class="course-item">
|
|
|
|
<div className="course-info">
|
|
|
|
<span class="course-name">{corso.nome}</span>
|
|
|
|
<span className="course-name">{corso.nome}</span>
|
|
|
|
<span class="course-cfu">{corso.cfu} CFU</span>
|
|
|
|
<span className="course-cfu">{corso.cfu} CFU</span>
|
|
|
|
|
|
|
|
{corso.passFailOnly && <span className="pass-fail-badge">Pass/Fail</span>}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{!corso.passFailOnly && (
|
|
|
|
{!corso.passFailOnly && (
|
|
|
|
<div className="course-grade">
|
|
|
|
<div class="course-grade tall">
|
|
|
|
<input
|
|
|
|
<input
|
|
|
|
type="number"
|
|
|
|
type="number"
|
|
|
|
placeholder="Voto"
|
|
|
|
placeholder="Voto"
|
|
|
|
@ -648,8 +638,9 @@ function MediaPesataApp() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<label className={`lode-checkbox ${corso.voto !== 30 ? 'disabled' : ''}`}>
|
|
|
|
<label class={`lode-checkbox ${corso.voto !== 30 ? 'disabled' : ''}`}>
|
|
|
|
<input
|
|
|
|
<input
|
|
|
|
|
|
|
|
class="star"
|
|
|
|
type="checkbox"
|
|
|
|
type="checkbox"
|
|
|
|
checked={corso.lode}
|
|
|
|
checked={corso.lode}
|
|
|
|
disabled={corso.voto !== 30}
|
|
|
|
disabled={corso.voto !== 30}
|
|
|
|
@ -662,56 +653,55 @@ function MediaPesataApp() {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="actions tall">
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
|
|
|
|
class="icon remove-btn"
|
|
|
|
onClick={() => rimuoviCorso(corso.id)}
|
|
|
|
onClick={() => rimuoviCorso(corso.id)}
|
|
|
|
className="remove-btn"
|
|
|
|
|
|
|
|
title="Rimuovi materia"
|
|
|
|
title="Rimuovi materia"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
×
|
|
|
|
×
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* Pulsante Calcola */}
|
|
|
|
{/* Pulsante Calcola */}
|
|
|
|
{corsiSelezionati.length > 0 && (
|
|
|
|
{corsiSelezionati.length > 0 && (
|
|
|
|
<div className="calculate-section">
|
|
|
|
<div class="calculate-section wide">
|
|
|
|
<button onClick={calcolaMedia} className="calculate-btn">
|
|
|
|
<button onClick={calcolaMedia}>🧮 Calcola Media e Voto di Laurea</button>
|
|
|
|
🧮 Calcola Media e Voto di Laurea
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
|
|
{/* Risultati */}
|
|
|
|
{/* Risultati */}
|
|
|
|
{risultati && mostraRisultati && (
|
|
|
|
{risultati && mostraRisultati && (
|
|
|
|
<div className="results">
|
|
|
|
<div class="results wide">
|
|
|
|
<h2>Risultati</h2>
|
|
|
|
<h2>Risultati</h2>
|
|
|
|
{risultati.errore ? (
|
|
|
|
{risultati.errore ? (
|
|
|
|
<div className="error-message">
|
|
|
|
<div class="error-message">
|
|
|
|
<p>⚠️ {risultati.errore}</p>
|
|
|
|
<p>⚠️ {risultati.errore}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
) : (
|
|
|
|
<div className="results-grid">
|
|
|
|
<div class="results-grid">
|
|
|
|
<div className="result-item">
|
|
|
|
<div class="result-item">
|
|
|
|
<span className="label">Media Pesata:</span>
|
|
|
|
<span class="label">Media Pesata:</span>
|
|
|
|
<span className="value">{risultati.mediaPesata}</span>
|
|
|
|
<span class="value">{risultati.mediaPesata}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="result-item">
|
|
|
|
<div class="result-item">
|
|
|
|
<span className="label">Bonus Lodi:</span>
|
|
|
|
<span class="label">Bonus Lodi:</span>
|
|
|
|
<span className="value">+{risultati.bonusLodi}</span>
|
|
|
|
<span class="value">+{risultati.bonusLodi}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="result-item highlight">
|
|
|
|
<div class="result-item highlight">
|
|
|
|
<span className="label">Voto di Ammissione:</span>
|
|
|
|
<span class="label">Voto di Ammissione:</span>
|
|
|
|
<span className="value">{risultati.votoAmmissione}</span>
|
|
|
|
<span class="value">{risultati.votoAmmissione}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="result-item highlight">
|
|
|
|
<div class="result-item highlight">
|
|
|
|
<span className="label">Massimo Voto Di Laurea Possibile:</span>
|
|
|
|
<span class="label">Massimo Voto Di Laurea Possibile:</span>
|
|
|
|
<span className="value">
|
|
|
|
<span class="value">
|
|
|
|
{risultati.massimoVotoLaurea}
|
|
|
|
{risultati.massimoVotoLaurea}
|
|
|
|
{risultati.conLode && <span className="lode-badge">(+lode)</span>}
|
|
|
|
{risultati.conLode && <span class="lode-badge">(+lode)</span>}
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -720,9 +710,9 @@ function MediaPesataApp() {
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
|
|
{/* Nota informativa */}
|
|
|
|
{/* Nota informativa */}
|
|
|
|
<div className="info-section">
|
|
|
|
<div class="card wide">
|
|
|
|
<h3>📋 Come viene calcolata la media</h3>
|
|
|
|
<h3>📋 Come viene calcolata la media</h3>
|
|
|
|
<div className="info-content">
|
|
|
|
<div class="info-content">
|
|
|
|
<h4>Regole di esclusione CFU:</h4>
|
|
|
|
<h4>Regole di esclusione CFU:</h4>
|
|
|
|
<ul>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<li>
|
|
|
|
@ -763,11 +753,11 @@ function MediaPesataApp() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Funzione per inizializzare l'app
|
|
|
|
// Funzione per inizializzare l'app
|
|
|
|
export function initMediaPesataApp() {
|
|
|
|
// export function initMediaPesataApp() {
|
|
|
|
const container = document.getElementById('media-pesata-app')
|
|
|
|
// const container = document.getElementById('media-pesata-app')
|
|
|
|
if (container) {
|
|
|
|
// if (container) {
|
|
|
|
render(<MediaPesataApp />, container)
|
|
|
|
// render(<MediaPesataApp />, container)
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
export default MediaPesataApp
|
|
|
|
// export default MediaPesataApp
|
|
|
|
|
