88 lines
3.7 KiB
TypeScript
88 lines
3.7 KiB
TypeScript
|
import { h, mount } from '../dom'
|
|||
|
|
import { getBaseUrl, setBaseUrl, DEFAULT_BASE_URL } from '../config'
|
|||
|
|
import { signOut } from '../store'
|
|||
|
|
import { showToast } from '../toast'
|
|||
|
|
|
|||
|
|
export function renderPlus(root: HTMLElement, rerender: () => void): void {
|
|||
|
|
const serverInput = h('input', {
|
|||
|
|
class: 'w-full bg-slate-900/80 border border-slate-700/80 rounded-xl px-3.5 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-sky-500 transition-colors',
|
|||
|
|
value: getBaseUrl(),
|
|||
|
|
autocomplete: 'off',
|
|||
|
|
inputMode: 'url',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const legendItems: { icon: string; title: string; accent: string; desc: string }[] = [
|
|||
|
|
{ icon: '☀️', title: 'Grand Soleil', accent: 'text-sky-400', desc: 'Journée calme. Aucun examen répertorié ni suspecté.' },
|
|||
|
|
{ icon: '🌫️', title: 'Brouillard', accent: 'text-purple-400', desc: 'Zone d’incertitude. Rumeur ou sous-entendu d’un professeur.' },
|
|||
|
|
{ icon: '💨', title: 'Coup de vent', accent: 'text-amber-400', desc: 'Interrogation surprise potentielle ou petit QCM (coeff faible).' },
|
|||
|
|
{ icon: '🌩️', title: 'Orage / Pluie', accent: 'text-rose-400', desc: 'Devoir Surveillé (DS) confirmé ou évaluation de chapitre.' },
|
|||
|
|
{ icon: '🚨', title: 'Alerte Rouge / Tempête', accent: 'text-red-500', desc: 'Examen blanc, épreuve commune ou gros devoir de fin de trimestre.' },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
mount(
|
|||
|
|
root,
|
|||
|
|
h(
|
|||
|
|
'div',
|
|||
|
|
{ class: 'space-y-5' },
|
|||
|
|
h(
|
|||
|
|
'div',
|
|||
|
|
{ class: 'bg-slate-800 border border-slate-700 rounded-2xl p-4' },
|
|||
|
|
h('h3', { class: 'text-xs font-black text-slate-400 uppercase tracking-wider mb-3' }, 'Serveur API'),
|
|||
|
|
serverInput,
|
|||
|
|
h('p', { class: 'text-[10px] text-slate-500 font-semibold mt-2' },
|
|||
|
|
'Adresse de l’API. Sur l’émulateur Android : 10.0.2.2:8787'),
|
|||
|
|
h(
|
|||
|
|
'button',
|
|||
|
|
{
|
|||
|
|
class: 'mt-3 w-full bg-sky-500 text-slate-950 text-xs font-extrabold py-2.5 rounded-xl active:scale-95 transition-transform',
|
|||
|
|
onclick: () => {
|
|||
|
|
setBaseUrl(serverInput.value.trim() || DEFAULT_BASE_URL)
|
|||
|
|
showToast('Adresse du serveur enregistrée', 'success')
|
|||
|
|
rerender()
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
'Enregistrer l’adresse',
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
h(
|
|||
|
|
'div',
|
|||
|
|
{ class: 'bg-slate-800 border border-slate-700 rounded-2xl p-4' },
|
|||
|
|
h('h3', { class: 'text-xs font-black text-slate-400 uppercase tracking-wider mb-1' }, 'Session'),
|
|||
|
|
h(
|
|||
|
|
'button',
|
|||
|
|
{
|
|||
|
|
class: 'w-full bg-rose-500/10 border border-rose-500/25 text-rose-400 text-xs font-extrabold py-2.5 rounded-xl active:scale-95 transition-transform',
|
|||
|
|
onclick: () => {
|
|||
|
|
signOut()
|
|||
|
|
rerender()
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
h('i', { class: 'fa-solid fa-right-from-bracket mr-1.5' }),
|
|||
|
|
'Se déconnecter',
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
h('div', {},
|
|||
|
|
h('h3', { class: 'text-xs font-black text-slate-400 uppercase tracking-wider mb-2' }, 'Légende météorologique'),
|
|||
|
|
h('div', { class: 'grid grid-cols-1 gap-2.5' },
|
|||
|
|
...legendItems.map((item) =>
|
|||
|
|
h(
|
|||
|
|
'div',
|
|||
|
|
{ class: 'bg-slate-800/80 border border-slate-700/60 rounded-xl p-3 flex items-center gap-3' },
|
|||
|
|
h('span', { class: 'text-3xl' }, item.icon),
|
|||
|
|
h('div', {},
|
|||
|
|
h('h4', { class: `text-sm font-black ${item.accent}` }, item.title),
|
|||
|
|
h('p', { class: 'text-xs text-slate-300 font-medium' }, item.desc),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
h(
|
|||
|
|
'p',
|
|||
|
|
{ class: 'text-[10px] text-slate-600 font-semibold text-center' },
|
|||
|
|
'Météo Exam — v0.1.0 · Radar de rumeurs et métriques en phase 2',
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
)
|
|||
|
|
}
|