# README - Bjerreds Saltsjöbad Inpasseringssystem

## 📖 Om README-filer

### Vad är en README-fil?

En **README-fil** är en textfil som fungerar som "framsidan" för ett projekt. Namnet kommer från det engelska imperativet "READ ME" (läs mig) - en uppmaning till den som öppnar projektet att börja här.

### Användningsområden

README-filer används för att:
- **Beskriva projektets syfte** - Vad gör projektet?
- **Ge snabb orientering** - Hjälpa nya användare eller utvecklare att förstå strukturen
- **Dokumentera installation** - Hur kommer man igång?
- **Lista beroenden** - Vilka verktyg/bibliotek behövs?
- **Förklara användning** - Hur kör man projektet?
- **Dokumentera ändringar** - Vad har uppdaterats?

### En bit historia

README-filen har sitt ursprung i Unix-världen på 1970-talet. När programvara distribuerades på magnetband eller via FTP-servrar behövdes en enkel textfil som förklarade innehållet innan man började installera. Konventionen var att döpa denna fil till `README` eller `READ.ME` så den skulle sorteras först i fillistningar.

På 1990-talet blev `.txt`-formatet vanligt (README.txt), och i takt med att versionshanteringssystem som Git och plattformar som GitHub blev populära på 2000-talet etablerades **Markdown-formatet** (README.md) som standard. GitHub och andra plattformar visar automatiskt innehållet i README.md när man besöker ett repository, vilket gjort den till projektets "startsida".

**Intressant fakta:** GitHub lanserades 2008 och populariserade Markdown-formatet för README-filer. Idag har nästan alla open source-projekt på GitHub en README.md som det första besökare ser.

---

## 🏊 Om detta projekt

### Projektbeskrivning

Detta är en interaktiv webbpresentation som visualiserar **övergången från fysiska armband till digitalt inpasseringssystem (Wondr-appen)** på Bjerreds Saltsjöbad. Projektet skapades för att kommunicera till medlemmarna hur digitaliseringen av inpasseringen fortskrider.

### 🌐 Live-version

Projektet är publicerat och tillgängligt online:

**URL:** [https://kentlundgren.se/program/Bjerred/inpassering/](https://kentlundgren.se/program/Bjerred/inpassering/)

👉 **[Öppna huvudpresentationen (index.html)](index.html)**

### Bakgrund

Bjerreds Saltsjöbad introducerade sommaren 2025 ett digitalt inpasseringssystem via Wondr-appen. Tidigare använde medlemmarna fysiska armband för att ta sig in på anläggningen. Denna presentation visar statistik och trenddata över hur övergången går.

**Viktiga datum:**
- **Juli 2025:** Wondr-systemet lanseras
- **Oktober 2025:** Wondr passerar armband i antal inpasseringar (brytpunkt)
- **1 februari 2026:** Deadline - alla armband stängs av

### Målgrupp

- Medlemmar i Bjerreds Saltsjöbad
- Styrelse och funktionärer
- Allmänt intresserade av digitaliseringsprocesser

---

## 📁 Projektstruktur

### Filer i projektet

| Fil | Beskrivning |
|-----|-------------|
| `index.html` | Huvudfil med statistik, diagram och information om övergången |
| `medlemskap.html` | Information om hur man blir medlem och laddar ner Wondr-appen |
| `familjemedlemskap.html` | Detaljer om familjemedlemskap |
| `Famreg2025.jpg` | Bild som visar registreringsprocessen |
| `.gitignore` | Konfiguration för vilka filer Git ska ignorera |
| `.htaccess` | **Kritisk fil!** Webbserver-konfiguration för korrekt UTF-8 encoding ([läs mer](svenska_tecken.html#htaccess)) |
| `baraGit.html` | Personlig guide för att arbeta med lokalt Git (versionshanteras EJ) |
| `svenska_tecken.html` | Lärdom om UTF-8 encoding-problem och Git-lösning |
| `README.md` | Denna fil - projektdokumentation |

### Teknisk stack

- **HTML5** - Semantisk markup
- **CSS3** - Responsiv design med CSS Grid, Flexbox och CSS-variabler
- **JavaScript (ES6+)** - Interaktivitet och datavisualisering
- **Chart.js 4.4.0** - Bibliotek för interaktiva diagram

---

## 📊 Data och statistik

### Datakällor

Projektet innehåller faktisk statistik över inpasseringar från Bjerreds Saltsjöbad för 2025-2026:

#### Inpasseringskategorier

1. **Wondr (Digital inpassering)** - Via mobilapp
2. **Armband** - Fysiska armband (fasas ut)
3. **SMS-biljetter** - Engångsbiljetter via SMS
4. **Restaurangen** - Restauranggäster med separat inpassering

#### Aktuell dataperiod

- **Januari 2025 - Januari 2026**
- Mars-juni 2025: Anläggningen stängd för renovering (null-värden)
- November-december 2025: Vissa kategorier saknar data

### Senaste uppdatering (2026-02-04)

**Januari 2026 - Faktiska värden:**
- Wondr: **2 627** inpasseringar
- SMS-biljetter: **1 114** inpasseringar
- Restaurang: **643** inpasseringar
- Armband: Data saknas (prognos används)
- **Totalt: 4 384** inpasseringar (exkl. armband)

**Jämförelse:**
- Augusti 2025 (nyöppnad efter renovering): **4 524** totala inpasseringar
- Detta visar att verksamheten fortsätter starkt även vintertid! 🎉

---

## 🚀 Komma igång

### Förutsättningar

- Modern webbläsare (Chrome, Firefox, Edge, Safari)
- Ingen installation behövs - projektet körs direkt i webbläsaren
- Internet behövs endast för att ladda Chart.js-biblioteket från CDN

### Köra projektet

1. **Öppna i webbläsare:**
   - Högerklicka på `index.html`
   - Välj "Öppna med" → Din webbläsare
   
   Eller:
   - Dubbelklicka på `index.html`

2. **Alternativt via lokal server:**
   ```powershell
   # Om du har Python installerat
   python -m http.server 8000
   ```
   Öppna sedan `http://localhost:8000` i webbläsaren

### Funktioner

- **Interaktivt diagram** - Hover över datapunkter för detaljer
- **Filteringsmöjligheter** - Välj tidsperiod och kategorier
- **Responsiv design** - Fungerar på mobil, tablet och desktop
- **Modal-dialoger** - Ytterligare information tillgänglig via knappar

### ⚠️ Viktigt för webbpublicering: .htaccess

Om du publicerar detta projekt på en webbserver, se till att `.htaccess`-filen är uppladdad! Denna fil är **kritisk** för att svenska tecken (å, ä, ö) ska visas korrekt i webbläsaren.

**Vad gör .htaccess?**
- Tvingar webbservern att skicka alla filer med UTF-8 encoding
- Säkerställer att svenska tecken visas korrekt för alla besökare
- Fungerar för HTML, Markdown, JavaScript och CSS-filer

**Hur laddar man upp .htaccess?**
1. Filen finns redan i projektet (börjar med punkt - kan vara dold!)
2. Ladda upp den till samma katalog som `index.html` via FTP/SFTP
3. Kontrollera att filen har rättigheterna 644

👉 **[Detaljerad information om .htaccess och UTF-8 encoding finns här](svenska_tecken.html)**

---

## 📝 Versionshantering

### Git-repository

Detta projekt använder **lokalt Git** för versionshantering:

```powershell
# Initiera repository (redan gjort)
git init

# Vanliga kommandon
git status                    # Se status
git add .                     # Lägg till ändringar
git commit -m "Meddelande"    # Committa
git log --oneline             # Se historik
```

För mer information om Git-användning, se `baraGit.html` (öppna i webbläsare).

### Commit-historik

- **2026-02-04:** Initial commit med uppdaterad Wondr-data för januari 2026
- **2026-02-04:** README.md tillagd
- **2026-02-04:** UTF-8 encoding-problem löst med Git (se lärdom nedan)

### 📚 Lärdom: UTF-8 encoding och Git

Under utvecklingen av denna README stötte vi på ett klassiskt UTF-8 encoding-problem där svenska tecken (å, ä, ö) inte visades korrekt. Efter flera misslyckade försök att "fixa" problemet, löste vi det genom att använda Git för att återställa filen till en tidigare fungerande version.

**Detta var ett perfekt exempel på varför Git är så värdefullt!**

👉 **[Läs hela historien och lärdomar här: svenska_tecken.html](svenska_tecken.html)**

---

## 🔄 Uppdateringshistorik

### 2026-02-04 - Datauppdatering och lärdomar
- ✅ Wondr-data uppdaterad med faktiska värden för december 2025 (2 513) och januari 2026 (2 627)
- ✅ SMS-biljetter för januari 2026 tillagd (1 114)
- ✅ Restaurangdata för januari 2026 tillagd (643)
- ✅ Statistikkort för november 2025 borttaget
- ✅ Ny framhävd jämförelse mellan augusti 2025 och januari 2026
- ✅ Wondr-prognos ersatt med faktiska data
- ✅ Lokalt Git-repository initierat
- ✅ README.md skapad
- ✅ UTF-8 encoding-problem identifierat och löst med Git checkout
- ✅ **.htaccess skapad** - kritisk fil för korrekt UTF-8 på webbservern
- ✅ Dokumenterat lärdom i svenska_tecken.html med bilder och .htaccess-info

### 2025-12-06 - Ursprunglig version
- Första versionen av presentationen skapad
- Interaktiva diagram implementerade
- Responsiv design tillagd

---

## 📈 Framtida utveckling

### Planerade uppdateringar

- [ ] Lägga till data för februari 2026
- [ ] Uppdatera efter att armbandssystemet stängts av (1 feb 2026)
- [ ] Eventuellt lägga till årssammanfattning för 2026

### Möjliga förbättringar

- [ ] Exportera data till CSV/Excel
- [ ] Skriva ut diagram som PDF
- [ ] Lägga till fler statistiska analyser
- [ ] Jämförelse mellan år

---

## 🌐 Publicering

### Nuvarande publicering

Projektet är för närvarande publicerat på:
- **Live-webbplats:** [https://kentlundgren.se/program/Bjerred/inpassering/](https://kentlundgren.se/program/Bjerred/inpassering/)
- **Versionshantering:** Lokalt Git-repository

### GitHub (framtida möjlighet)

Om projektet senare också ska publiceras på GitHub:

1. Skapa repository på GitHub
2. Koppla lokalt repo till remote:
   ```powershell
   git remote add origin https://github.com/användarnamn/bjerred-inpassering.git
   git branch -M main
   git push -u origin main
   ```

3. Överväg:
   - **Privat eller publikt repo?** Innehåller data känslig information?
   - **Licens** - Lägg till LICENSE-fil om projektet ska vara publikt
   - **GitHub Pages** - Publicera webbsidan gratis via GitHub

Se `baraGit.html` för mer detaljer om GitHub-integration.

---

## 👤 Kontakt och underhåll

**Projektet underhålls av:**  
Kent Lundgren

**Organisation:**  
Bjerreds Saltsjöbad

**Webbplats:**  
[bjerredskallbadhus.se](https://bjerredskallbadhus.se)

---

## 📜 Licens

Detta projekt är skapat för internt bruk av Bjerreds Saltsjöbad. Kontakta organisationen för frågor om användning.

---

## 🙏 Erkännanden

### Verktyg och bibliotek

- **Chart.js** - [chartjs.org](https://www.chartjs.org/) - Interaktiva diagram
- **Wondr** - [wondr.app](https://wondr.app/) - Digitalt inpasseringssystem
- **Git** - [git-scm.com](https://git-scm.com/) - Versionshantering

### Inspiration

Presentationen designades med fokus på:
- Tydlig kommunikation av statistik
- Användarvänlighet för alla åldrar
- Responsiv design för mobil användning

---

**Senast uppdaterad:** 2026-02-04  
**Version:** 1.0  
**README-version:** 1.0