Seguiment d'estudi · Bomber 81/26

App d'una sola pàgina (sense build step) per fer seguiment del temari, prioritzar temes, planificar el calendari d'estudi (i el dia d'avui, amb el mateix editor) i registrar minuts reals amb Forest per targeta, amb sincronització via Firebase entre dispositius.

En viu: https://toni1495ds.github.io/opocalendar/

Estructura

index.html            Punt d'entrada: només marcatge, referencia css/ i js/
css/
  main.css             Tots els estils
js/
  config.js            Credencials Firebase + codi d'accés
  helpers.js           Utilitats petites (esc, $, iconSvg) sense estat
  dateUtils.js         Parseig de dates del calendari + "quin dia és avui"
  data/                Contingut estàtic del temari (no canvia en temps d'execució)
    temes.js
    etapes.js
    estats.js
    activitats.js
    setmanes.js
    dossier.js
  state.js             Estat global (STATE: data/plan/extra/forest/amagats) + mutacions,
                       incloent el trasllat automàtic de blocs no fets al dia següent
  stats.js             Càlculs derivats de l'estat (progrés, dies fins l'examen)
  sync.js              Tot el que toca Firebase (connectar, desar sense merge, escoltar
                       canvis, forçar el desat pendent si es tanca/recarrega la pestanya)
  render.js            Dispatcher de vistes + actualització de la capçalera
  views/                Una vista = un fitxer = una pestanya de la UI
    avui.js             Editor de blocs del dia d'avui (afegir/editar/esborrar targetes),
                        igual que calendari.js però només per al dia actual
    calendari.js         Planificació setmanal per blocs, amb drag&drop per reordenar-los
    temes.js              Llista completa del temari, amb filtres i ordre (número/
                          prioritat/hores invertides amb Forest)
    prioritat.js          Dossier ØPT1M ordenat per preguntes caigudes
    estadistiques.js      Resum: % temari, concentracions Forest (totals i per tema),
                          nota mitjana dels tests, setmanes futures col·lapsades
    shared.js             Marcatge compartit entre vistes: la targeta de bloc (tema +
                          activitat + sessions Forest), la llista de tests del dia i
                          els botons d'etapa
  events.js            Cablejat d'esdeveniments DOM -> mutacions d'estat (clics, canvis
                       de formulari i drag&drop)
  auth.js              Porta d'accés (codi + sessionStorage, entra sol en arribar als
                       4 dígits)
  main.js              Entry point: wireEvents() + wireAuth()

Idea darrere la separació

Cada capa es pot tocar sense entendre les altres:

• Vols canviar el temari o afegir un tema nou → només js/data/.
• Vols canviar l'aparença → només css/main.css.
• Vols canviar com es desa/sincronitza → només js/sync.js.
• Vols afegir una pestanya nova → un fitxer nou a js/views/ + una línia a render.js i index.html.
• Vols canviar la lògica de negoci (com es calcula el progrés) → només js/stats.js.

Executar en local

Cal servir els fitxers per http (els mòduls ES no funcionen amb file://). Amb l'extensió Live Server de VS Code (ja configurada a .vscode/settings.json, port 5501) n'hi ha prou amb "Open with Live Server" sobre index.html.

Configuració

js/config.js ja té la configuració real del projecte Firebase opocalendar-3ef5a i el codi d'accés (CODI_ACCES). Les regles de Firestore obren només el document estudi/progres (allow read, write: if true).

Important: el codi d'accés és protecció superficial, no seguretat real — és visible en text pla per a qui obri js/config.js (el repositori és públic), i les regles de Firestore no exigeixen cap autenticació. Només evita que algú que trobi l'enllaç per casualitat vegi les dades d'un cop d'ull.

Desplegament

main es publica automàticament a GitHub Pages a cada git push. No cal cap pas extra.

Idees futures (to-do)

• Importar CSV de Forest: l'app Forest no té API pública ni integració en temps real, però sí permet exportar un CSV de l'historial de sessions des de la mateixa app. Es podria afegir un botó "Importa CSV" que llegeixi aquest fitxer i afegeixi soles les sessions (amb la seva durada real) a la targeta corresponent, en lloc de clicar-les a mà una per una.