🔥 Firebase-integration – Bjerreds Saltsjöbad

Idag lagras inpasseringsdata hårdkodat i BASE_DATA-objektet i index.html och data.html. Det fungerar bra, men för att uppdatera siffrorna måste Kent redigera koden och publicera via GitHub – varje gång.

Firebase är Googles backend-plattform, men den innehåller faktiskt två helt skilda databasprodukter. Det är lätt att blanda ihop dem – de heter nästan likadant och lever i samma Firebase-projekt. Här är skillnaden:

Vi använder det befintliga Firebase-projektet "skylt" (skylt-e0c45), som redan är kopplat till Bjerreds Saltsjöbad via appen "Bjerreds-skylt". Inpasseringsdata sparas under en egen nod i databasen så att den inte krockar med annan data i projektet.

Nedanför visas firebaseConfig för projektet. Notera att koden är anpassad för CDN-laddning (direkt i HTML utan byggverktyg), inte npm-versionen som visas i Firebase Console.

// ============================================================
// FIREBASE-KONFIGURATION – projekt "skylt" (skylt-e0c45)
// Används för Bjerreds-skylt-appen (Web App)
//
// OBS: Konfigurationen nedan är för CDN-varianten (ES-moduler
// från gstatic.com), inte npm-versionen. Det är det format
// som fungerar direkt i en HTML-fil utan byggverktyg.
//
// databaseURL saknas ännu – läggs till när Realtime Database
// har aktiverats i Firebase Console (se steg 3 nedan).
// ============================================================

import { initializeApp, getApps }
  from 'https://www.gstatic.com/firebasejs/11.0.0/firebase-app.js';
import { getDatabase, ref, set, onValue }
  from 'https://www.gstatic.com/firebasejs/11.0.0/firebase-database.js';

const firebaseConfig = {
  apiKey:            "AIzaSyBbAX6EFxbW1VIcSYQ3Zqbr3v733sGMYD8",
  authDomain:        "skylt-e0c45.firebaseapp.com",
  projectId:         "skylt-e0c45",
  storageBucket:     "skylt-e0c45.firebasestorage.app",
  messagingSenderId: "653653642598",
  appId:             "1:653653642598:web:29e332c87fed1cd9f34ca7",
  // databaseURL – tillagd efter att Realtime Database aktiverades (steg 3 klart):
  databaseURL: "https://skylt-e0c45-default-rtdb.europe-west1.firebasedatabase.app"
};

SDK = Software Development Kit

Ett SDK (uttalas "es-dee-kay") är ett färdigt verktygslåda av kod som ett företag paketerar och ger bort till utvecklare, så att de slipper uppfinna hjulet på nytt. I stället för att skriva all kommunikation med Firebase-servrar från grunden laddar vi in Googles SDK – och sedan räcker det att anropa enkla funktioner som set() och onValue().

Firebase JS SDK – versioner

Google släpper kontinuerligt nya versioner av Firebase JavaScript SDK. Varje version kan innehålla buggfixar, prestandaförbättringar, nya funktioner – och ibland ändringar som kan bryta befintlig kod (breaking changes). Versionen anges i CDN-länken:

// Versionen styr vilken kod som laddas från Googles servrar:
import { initializeApp }
  from 'https://www.gstatic.com/firebasejs/11.0.0/firebase-app.js';

Firebase Realtime Database lagrar data som ett JSON-träd. Vi speglar strukturen i BASE_DATA-objektet rakt av, men lägger allt under noden bjerred-inpasseringar/ för att inte krocka med annan data i projektet.

{
  "rules": {
    "bjerred-inpasseringar": {
      ".read":  "true",
      ".write": "auth != null"
    }
  }
}

• ✅
  Steg 1 – Firebase-projekt valt Använder befintliga projektet "skylt" (skylt-e0c45) med appen "Bjerreds-skylt". Inget nytt projekt behövs.
• ✅
  Steg 2 – firebaseConfig hämtad Konfigurationen är kopierad från Firebase Console och dokumenterad ovan i det här dokumentet.
• ✅
  Steg 3 – Aktivera Realtime Database i Firebase Console Klart! Realtime Database är aktiverad i projektet "skylt" (europe-west1). Databasen är tom men redo att ta emot data.
  databaseURL: https://skylt-e0c45-default-rtdb.europe-west1.firebasedatabase.app
  Obs: URL:en slutar på /:null i Firebase Console – det betyder bara att databasen är tom. Det är korrekt.
• ✅
  Steg 4 – Säkerhetsregler publicerade Klart! Reglerna är publicerade i Firebase Console. Noden bjerred-inpasseringar kan läsas av alla, men bara skriva av inloggade användare (auth != null). De gamla testlägesreglerna (med utgångsdatum 2026-06-14) är borttagna.
• ✅
  Steg 5 – Firebase Authentication aktiverad Klart! Inloggningsmetoden E-post/lösenord är aktiverad. Användarkonto skapat: lundgren.kent@gmail.com (2026-05-15). Det är det kontot som används för att logga in och få skriva i databasen.
• ✅
  Steg 6 – Engångsmigration klar (2026-05-15) All historisk data är uppskriven till Firebase Realtime Database. 11 kategorier skrivna, 0 fel. Data finns under bjerred-inpasseringar/data/ i Firebase Console. Migrationen kördes inloggad som lundgren.kent@gmail.com.
• ✅
  Steg 7 – data.html omskriven för Firebase (2026-05-15) Hela JavaScript-blocket skrevs om med <script type="module"> och Firebase SDK v11.0.0 (ES-moduler via CDN).
  • onValue() prenumererar på bjerred-inpasseringar/data – tabellen uppdateras live.
  • set() sparar cellredigering direkt till Firebase.
  • BASE_DATA renderas omedelbart vid sidladdning som fallback.
  • Inloggningsmodal visas automatiskt vid cellklick om ej inloggad.
  • Grön/röd statusdot i headern visar om Firebase är uppkopplad.
  • CSP-metatag tillåter Firebase WebSocket från GitHub Pages.
  • tolkFirebaseSnapshot() hanterar kategorier med snedstreck (nästlad sökväg i Firebase).
• ✅
  Steg 8 – Testat och publicerat på GitHub Pages (2026-05-15) Pusha direkt till main via Cursor – säkerhetskopior (index copy.html, data copy.html) fungerade som skyddsnät i stället för separat branch.
  Bekräftat på live-URL: data.html:
  • Tabellen laddas från Firebase ✓
  • Live-synk bekräftad: ändring i Chrome syntes direkt i Firefox ✓
  • Inloggning och utloggning fungerar från kentlundgren.github.io ✓
  
  Tillägg efter steg 8: "Bjud in"-knapp (✉ Bjud in) lagd till i nedre vänstra hörnet av data.html. Knappen öppnar en modal där administratören fyller i namn, e-post och tillfälligt lösenord – ett färdigt välkomstbrev genereras automatiskt och kan kopieras med ett klick. Inbjudan skickad till Björn Syren (bjorn.syren1@gmail.com) 2026-05-15.

Så här gör du:

1. Se till att du är på sidan databas.html i webbläsaren
2. Tryck F12 för att öppna utvecklarverktyget
3. Klicka på fliken Console
4. Kopiera hela skriptet nedan och klistra in det i konsolen
5. Tryck Enter
6. Vänta på bekräftelsemeddelandena – hela BASE_DATA skrivs till Firebase

// ============================================================
// ENGÅNGSMIGRATION – BASE_DATA → Firebase Realtime Database
// ============================================================
// Kör detta skript EN GÅNG i konsolen (F12) på databas.html.
// Skriptet använder Firebase SDK som redan är inläst på sidan.
//
// Data skrivs till: bjerred-inpasseringar/data/{år}/{kategori}/{månadsindex}
// ============================================================

(async () => {

  // ============================================================
  // STEG 0 – Logga in med ditt Firebase-konto
  // Skriptet måste autentisera sig innan det kan skriva,
  // eftersom säkerhetsreglerna kräver auth != null.
  // Fyll i ditt lösenord på raden nedan innan du kör skriptet.
  // ============================================================
  const EPOST    = 'lundgren.kent@gmail.com';
  const LÖSENORD = 'FYLL_IN_DITT_LÖSENORD_HÄR'; // ← ändra detta

  const { getAuth, signInWithEmailAndPassword } =
    await import('https://www.gstatic.com/firebasejs/11.0.0/firebase-auth.js');
  const auth = getAuth();

  try {
    await signInWithEmailAndPassword(auth, EPOST, LÖSENORD);
    console.log('✅ Inloggad som', EPOST);
  } catch (e) {
    console.error('❌ Inloggning misslyckades:', e.message);
    return; // avbryt om inloggningen misslyckas
  }

  // ---- BASE_DATA – identisk kopia från data.html och index.html ----
  const BASE_DATA = {

    /* ---- 2024 -------------------------------------------------- */
    2024: {
      'Restaurangen':         [754,696,772,656,841, 654,696,678,725,607,795,620],
      'SMS-biljetter':        [557,458,484,331,265, 184,143,197,240,484,593,827],
      'Medlemmar – armband': [2949,2788,3096,2251,3388,3130,3581,3362,4210,3146,3299,3255]
    },

    /* ---- 2025 – 0-värden mars–juli = ombyggnad av bastun ------- */
    2025: {
      'Restaurangen/badbiljetter': [737,764,  0,  0,  0,  0, 344, 891, 991, 667, 794, 621],
      'SMS/Swish-biljett':         [801,619,  0,  0,  0,  0,   4, 140, 285, 726,1052,1373],
      'Medlemmar – armband':       [3231,2555,  0,  0,  0,  0,1524,2134,2339,1552,1400,1000],
      'Medlemmar – Wonder':        [  0,  0,  0,  0,  0,  0, 120,1359,1729,1993,2443,2513]
    },

    /* ---- 2026 – null = saknas (ännu ej rapporterat) ------------ */
    2026: {
      'Restaurangen/badbiljetter': [643, 665, 600,null,null,null,null,null,null,null,null,null],
      'SMS/Swish-biljetter':       [1114, 751,1006, 913,null,null,null,null,null,null,null,null],
      'Medlemmar – armband':       [ 492, 119,  95,  90,null,null,null,null,null,null,null,null],
      'Medlemmar – Wonder':        [2627,2445,3663,3293,null,null,null,null,null,null,null,null]
    }
  };

  // ---- Hämta Firebase-instansen som redan är initierad på sidan ----
  const { getDatabase, ref, set } =
    await import('https://www.gstatic.com/firebasejs/11.0.0/firebase-database.js');
  const db  = getDatabase();
  let   ok  = 0;
  let   fel = 0;

  // ---- Skriv år för år, kategori för kategori till Firebase --------
  for (const [år, kategorier] of Object.entries(BASE_DATA)) {
    for (const [kategori, månader] of Object.entries(kategorier)) {

      // Bygg ett objekt {0: val, 1: val, ...} – null-värden inkluderas
      const månadsObj = {};
      månader.forEach((v, i) => { månadsObj[i] = v ?? 'null'; });

      try {
        await set(
          ref(db, `bjerred-inpasseringar/data/${år}/${kategori}`),
          månadsObj
        );
        console.log(`✅ ${år} / ${kategori}`);
        ok++;
      } catch (e) {
        console.error(`❌ ${år} / ${kategori}: ${e.message}`);
        fel++;
      }
    }
  }

  // ---- Spara tidsstämpel för migrationen ---------------------------
  await set(ref(db, 'bjerred-inpasseringar/senast-uppdaterad'),
    new Date().toLocaleDateString('sv-SE'));

  console.log(`\n✅ Migration klar! ${ok} kategorier skrivna, ${fel} fel.`);
  if (fel > 0) console.warn('Kontrollera felen ovan och kör om vid behov.');

})();

Knappen nedan försöker ansluta till Firebase och skriva ett testmeddelande under noden bjerred-inpasseringar/anslutningstest. Testet fungerar inte förrän Realtime Database är aktiverad och databaseURL är inlagd.

Kent har arbetat med Firebase i två olika projekt som använder olika Firebase-tekniker. Det är viktigt att förstå skillnaden inför arbetet med inpasseringsdata.

I samband med att en ny datakategori (Engångsbadare – Wondr) lades till i data.html uppstod en förvirring som ledde till en viktig insikt om hur systemet verkligen fungerar.

🔶 Vad händer när en ny kategori läggs till i BASE_DATA?

När en ny rad läggs till i koden (t.ex. 'Engångsbadare – Wondr') syns värden direkt i tabellen – men de kommer från BASE_DATA, inte Firebase. Indikatorn i sidhuvudet visar då ● orange: Lokal fallbackdata tills data aktivt sparas till Firebase.

✅ Hur sparar man data till Firebase?

Metod 1 – Manuell cell-klick (alltid tillgänglig):

1. Öppna data.html och logga in
2. Klicka på en cell i den nya kategorins rad
3. Skriv in värdet i rutan som dyker upp
4. Tryck Enter – värdet sparas direkt i Firebase
5. Upprepa för varje månad

Metod 2 – Synkroniseringsknapp (tillagd 2026-06-03):

När man är inloggad i data.html visas en grön knapp 📥 Synka till Firebase i sidhuvudet. Den läser igenom hela BASE_DATA, jämför med vad Firebase redan har, och skickar enbart de värden som saknas. Befintliga Firebase-värden skrivs aldrig över. Perfekt för att initiera en ny kategori med ett klick.

📊 Konkret exempel – Engångsbadare Wondr, 3 juni 2026

Kategorin lades till i BASE_DATA med värden jan=17, feb=13, mar=38, apr=31, maj=173. Trots att tabellen visade dessa siffror var de inte i Firebase. Indikatorn visade orange. Problemet löstes när ett värde (1 173 som testvalue) skrevs in manuellt via cell-klick i data.html – då bytte indikatorn till grön och engangsintraden.html uppdaterades direkt.

Dokumenterat: 2026-06-03

Strax efter att kategori-synken fungerade (se lärdomen ovan) uppstod ett nytt problem: Jan–apr försvann ur tabellen för Engångsbadare – Wondr direkt efter att maj sparats i Firebase. Det såg ut som att siffror gick förlorade, men egentligen var det en bugg i hur loadData() blandade ihop Firebase och BASE_DATA.

Hur det såg ut före fixen

// GAMMAL kod – ersätter hela arrayen med Firebase
for (const [kategori, månader] of Object.entries(kategorier)) {
  data[year][kategori] = månader;   // null-värden från Firebase skriver över BASE_DATA
}

Hur det fungerar efter fixen (2026-06-03)

// NY kod – merge på månads-nivå
for (const [kategori, månader] of Object.entries(kategorier)) {
  if (!data[year][kategori]) {
    // Kategorin saknas i BASE_DATA – använd Firebase-arrayen direkt
    data[year][kategori] = månader;
  } else {
    // Kategorin finns i BASE_DATA – slå ihop månad för månad
    for (let m = 0; m < 12; m++) {
      if (månader[m] !== null) {
        data[year][kategori][m] = månader[m]; // Firebase vinner
      }
      // månader[m] === null: behåll BASE_DATA (gör ingenting)
    }
  }
}

Konkret exempel – januari till maj

Firebase-värdet 1173 används för maj. BASE_DATA 173 används ej för maj. Jan–apr hämtas från BASE_DATA eftersom Firebase har null för dem.

Dokumenterat och fixat: 2026-06-03