Prompt utilisé pour régénérer cette page :
Page: Zahl History — Evaluation History Browser
Category: sandbox (sub-page of /sandbox/zahl/)
Description: "Browse and filter evaluation history"
No icon, no tags, no status in front matter. Parent section: Zahl (numerological text analysis).
Front matter (index.md):
---
title: "History"
description: "Browse and filter evaluation history"
---
Directory structure:
- index.md — page content (HTML structure)
- default.js — history page controller
- default.scss — page styles
- _navigation.left.md — left sidebar navigation widget
HTML structure (index.md body):
- header.history-header:
- span#bloc-filter — container for active filter badges (populated by JS)
- a#btn-filter-add (href="#", title="Add filter") — "Add filter" link
- section#bloc-history — empty container, dynamically populated with date-grouped tables
=== _navigation.left.md (widget) ===
Front matter: title="Navigation", weight=10
Content: Two nav sections with h5 headings:
- "Zahl" section: links to /sandbox/zahl/ ("Evaluate") and /sandbox/zahl/history/ ("Browse history", class="focus")
- "Information" section: link to /sandbox/zahl/map/ ("Character map")
=== default.js (history page controller) ===
Imports: storage from /_lib/storage_v1.js
Data loading:
- loadHistory(filter): scans all localStorage keys via Object.keys(storage.local). If filter array provided, matches entries where obj.r is in filter array. Otherwise includes all entries with obj.m (message property). Each localStorage entry is an object with: .m (message text), .r (result value, 3-char string), .d (timestamp number), .g (date group value for grouping). Adds ._id = localStorage key. Returns array sorted by .d descending (newest first).
Formatting helpers:
- DAYS: array of day names ['Sunday'..'Saturday']
- MONTHS: array of month names ['January'..'December']
- formatDate(d): returns "Monday 15 January 2024" format. Returns "Past entries" if invalid Date.
- limit(s, max=1024): collapses whitespace, truncates at max length with <strong>...</strong> suffix.
Rendering:
- renderRow(container, data): inserts <tr id="text-{_id}"> with 3 columns:
- td: link to /sandbox/zahl/?{_id} showing truncated message text
- td: link to ?f={result} with span.badge.badge-olive showing result value
- td: a.link.btn-delete with data-id for deletion
- renderTable(container, data): creates date section. Builds h5 heading with formatted date (from data.g). Creates table > tbody (id="history-{date}"). Returns tbody for row insertion.
Filter system:
- validateFilter(f): regex /^[1-9-]{3}$/ — exactly 3 characters, each digit 1-9 or dash.
- renderFilter(container, data): inserts badge link with data-filter attribute and X removal button (✕).
- applyFilter(filter): navigates to /sandbox/zahl/history/?f=joined (comma-separated) or bare URL if empty.
Initialization:
1. Parses URL query parameter ?f=xxx,yyy via URLSearchParams. Splits by comma, validates each, stores as filter array (undefined if empty/invalid).
2. Renders filter badges into #bloc-filter.
3. Filter badge click handler: reads data-filter from target, confirms removal, splices from array, applies filter via navigation.
4. #btn-filter-add click: prompts for 3-char pattern (default "---"), validates, adds if not duplicate, navigates.
5. Renders history entries into #bloc-history:
- Iterates loadHistory(filter) results
- Groups by .g property — creates new table section (renderTable) when group changes
- Renders each entry as row (renderRow)
6. Delete handler (delegated click on #bloc-history): checks .btn-delete class, removes from storage.local, removes TR from DOM, console.info log.
=== default.scss ===
.history-header: flex, center aligned, gap var(--layout-spacing), margin-bottom spacing.
Table styles scoped to main:
main table: padding horizontal, 100% width, collapsed borders.
tr: bottom border surface, hover surface bg, transition 200ms.
td structure: 1st column (message) width 100%, 2nd (value) width 1rem center, 3rd (action) width 1rem right.
td a: block display, half-spacing padding.
Link styles: main a[href]:hover = primary color. a.link = dotted underline, muted color, pointer.
Badge: inline-block, 2px 6px padding, 3px radius, 0.85em font. .badge-olive: olive bg, white text.
Navigation: nav a[href].focus = primary color.
Page entièrement générée et maintenue par IA, sans intervention humaine.