---
phase: 01-historia-cen
plan: 02
subsystem: ui
tags: [popup, modal, ajax, vanilla-js, scss, css, widget]

requires:
  - phase: 01-historia-cen
    plan: 01
    provides: AJAX endpoint apartamenty_get_price_history + wp_localize_script (apartamentsData)

provides:
  - popup „Historia cen" z danymi AJAX na stronie /apartamenty/
  - przycisk .btn-historia-cen z data-post-id w widgecie
  - style .price-history-modal / .price-history-overlay w main.scss + main.css
  - JS handler: fetch AJAX → render modal → open/close

affects: []

tech-stack:
  added: []
  patterns:
    - Globalny popup (jeden egzemplarz poza pętlą while) wypełniany przez JS
    - Vanilla JS fetch + FormData zamiast jQuery AJAX
    - CSS class toggle (is-open) zamiast display inline

key-files:
  modified:
    - wp-content/plugins/elementor-addon/widgets/apartaments.php
    - wp-content/plugins/elementor-addon/assets/css/main.scss
    - wp-content/plugins/elementor-addon/assets/css/main.css
    - wp-content/plugins/elementor-addon/assets/js/main.js

key-decisions:
  - "ID price-history-sqm zamiast price-history-price-m2 — spójna zmiana w HTML i JS"
  - "max-height + overflow-y:auto na .price-history-modal__table-wrap — scroll gdy dużo historii"

patterns-established:
  - "Popup globalny poza pętlą — jeden egzemplarz na stronę, wypełniany przez JS"
  - "Vanilla JS fetch z FormData dla AJAX WordPress (bez jQuery)"

duration: ~30min
started: 2026-03-12T00:00:00Z
completed: 2026-03-12T00:30:00Z
---

# Faza 01 Plan 02: Popup Historia Cen — Summary

**Klikalny modal „Historia cen" na kartach apartamentów — AJAX, vanilla JS, CSS zgodny z projektem.**

## Performance

| Metric | Value |
|--------|-------|
| Duration | ~30 min |
| Started | 2026-03-12 |
| Completed | 2026-03-12 |
| Tasks | 3 auto + 1 checkpoint |
| Files modified | 4 |

## Acceptance Criteria Results

| Criterion | Status | Notes |
|-----------|--------|-------|
| AC-1: Przycisk klikalny z data-post-id | Pass | `.btn-historia-cen[data-post-id]` w każdym wierszu |
| AC-2: Popup otwiera się z danymi | Pass | Tytuł, cena brutto, cena m², tabela historii z AJAX |
| AC-3: Popup zamyka się | Pass | X, klik overlay, Escape — wszystkie działają |
| AC-4: Stan ładowania i błędu | Pass | „Ładowanie..." przy otwarciu, „Brak danych" / „Błąd ładowania" przy problemach |
| AC-5: Pusta historia | Pass | `<td colspan="3">Brak historii cen</td>` gdy historia pusta |

## Accomplishments

- Modal popup bez bibliotek zewnętrznych — vanilla JS + CSS
- Jeden egzemplarz popupa na stronę (poza pętlą `while`) — poprawna architektura
- Scroll w tabeli historii (`max-height: 40vh; overflow-y: auto`) gdy dużo wpisów
- Stan ładowania i pełna obsługa błędów AJAX

## Files Created/Modified

| File | Change | Purpose |
|------|--------|---------|
| `widgets/apartaments.php` | Modified | Dodano `.btn-historia-cen` + `data-post-id` + popup HTML |
| `assets/css/main.scss` | Modified | Dodano style `.price-history-overlay` i `.price-history-modal` |
| `assets/css/main.css` | Modified | Skompilowana wersja CSS (append) |
| `assets/js/main.js` | Modified | Dodano obsługę AJAX + open/close popupa |

## Decisions Made

| Decision | Rationale | Impact |
|----------|-----------|--------|
| ID `price-history-sqm` zamiast `price-history-price-m2` | Krótsza nazwa, spójna w HTML i JS | Brak wpływu na działanie |
| `max-height` + `overflow-y:auto` na tabeli | Ochrona przed bardzo długą historią cen | Lepsze UX przy wielu wpisach |

## Deviations from Plan

| Type | Opis | Impact |
|------|------|--------|
| Auto-fixed | ID `price-history-price-m2` → `price-history-sqm` | Kosmetyczna, HTML i JS spójne |

## Issues Encountered

None.

## Next Phase Readiness

**Ready:**
- Faza 01 kompletna — oba plany (01-01 i 01-02) ukończone
- Milestone v0.1 ma ukończone obie fazy (01 i 02)

**Concerns:**
- None

**Blockers:**
- None

---
*Phase: 01-historia-cen, Plan: 02*
*Completed: 2026-03-12*