IndexedDB Admin

Un pannello di amministrazione completo per i database IndexedDB del browser. Applicazione web pura (HTML/CSS/JS) senza dipendenze esterne, funzionante anche offline.

---

Caratteristiche Generali

• Zero dipendenze — Nessun framework, nessun CDN, nessun build tool
• Funziona offline — Apri index.html direttamente nel browser (anche via file://)
• Design flat e moderno — Interfaccia pulita con palette indaco
• Tema chiaro / scuro — Toggle con un click, rileva automaticamente le preferenze di sistema, persiste la scelta in localStorage
• Responsive — Layout adattivo per desktop, tablet e mobile con sidebar a scomparsa
• Navigazione hash-based — Supporto per i pulsanti Avanti/Indietro del browser
• Scorciatoie tastiera — Esc per chiudere modali, Enter per confermare

---

Gestione Database

Funzione	Descrizione
Elenco database	Visualizza tutti i database IndexedDB con nome e versione in card interattive
Crea database	Modale con campo nome
Elimina database	Con dialog di conferma
Esporta database	Scarica l'intero database (struttura + dati) come file .json
Importa database	Ricostruisce un database completo da file .json esportato

---

Gestione Object Store (Tabelle)

Funzione	Descrizione
Elenco store	Tabella con nome, key path, auto increment, numero di indici e record
Crea store	Modale con nome, key path (opzionale) e toggle auto increment
Elimina store	Con dialog di conferma (gestisce automaticamente il version bump)
Esporta store	Scarica lo store singolo (metadati + record) come .json

---

Gestione Record

Funzione	Descrizione
Tabella dinamica	Colonne auto-rilevate dalla struttura dei record
Aggiungi record	Form HTML con campi tipizzati (testo, numero, booleano, array, oggetto) pre-popolati dalla struttura esistente
Modifica record	Form HTML con i valori attuali del record
Elimina record	Con conferma e possibilita di Undo
Duplica record	Clona un record con chiave incrementata automaticamente, apre il form per modifiche prima del salvataggio
Copia negli appunti	Un click per copiare il record come JSON formattato
Selezione multipla	Checkbox su ogni riga con "Seleziona tutti"
Eliminazione bulk	Elimina tutti i record selezionati con un click (con Undo)
Ricerca testuale	Filtra i record cercando in tutti i campi
Ordinamento colonne	Click sull'header per ordinare ascendente/discendente
Paginazione	Navigazione per pagine con selettore 10 / 25 / 50 / 100 record per pagina

---

Gestione Indici

Funzione	Descrizione
Elenco indici	Tab dedicato con nome, key path, unico, multi-entry
Crea indice	Modale con nome, key path, toggle unico e multi-entry
Elimina indice	Con dialog di conferma

---

Query SQL-like

Barra di query integrata nella vista record che supporta una sintassi ispirata a SQL:

SELECT * FROM users WHERE age > 30 ORDER BY name ASC LIMIT 10
SELECT * FROM products WHERE price >= 9.99 AND category = 'electronics'
SELECT name, email FROM users WHERE name LIKE '%Mario%'

Sintassi supportata

Elemento	Esempio
Selezione campi	SELECT * oppure SELECT nome, email
Condizioni	WHERE campo = valore
Operatori	=, !=, >, <, >=, <=
Pattern matching	LIKE '%testo%' con % (qualsiasi) e _ (singolo carattere)
Connettori	AND, OR
Ordinamento	ORDER BY campo ASC oppure DESC
Limite risultati	LIMIT 50
Valori supportati	numeri, 'stringhe', true, false, null

---

Visualizzazione Schema

Tab Schema nella vista dello store che mostra una mappa visuale del database:

• Ogni object store rappresentato come una card
• Chiave primaria con indicazione auto-increment
• Conteggio record
• Lista degli indici con key path, unicita e multi-entry

---

Dashboard Storage

Pannello nella vista Database che mostra l'utilizzo dello storage:

• Barra di utilizzo globale — Storage usato vs disponibile (via navigator.storage.estimate())
• Statistiche — Bytes utilizzati e quota disponibile
• Grafico per-database — Barra orizzontale per ogni database con dimensione stimata

---

Badge Tipo Dato

Nella tabella dei record, ogni valore mostra un badge colorato che identifica il tipo:

Badge	Tipo	Colore
STR	Stringa	Verde
NUM	Numero	Giallo
BOOL	Booleano	Rosa
ARR	Array	Blu
OBJ	Oggetto	Viola
NULL	Null	Grigio

I colori si adattano automaticamente al tema chiaro e scuro.

---

Import / Export

Formato	Ambito	Descrizione
JSON Database	Intero database	Esporta/importa struttura completa (store, indici, record)
JSON Store	Singolo store	Esporta/importa metadati e record di uno store
CSV	Singolo store	Esporta i record in formato CSV

I file JSON esportati includono:

• Metadati (nome, versione, data export)
• Definizioni degli store (keyPath, autoIncrement)
• Definizioni degli indici (keyPath, unique, multiEntry)
• Tutti i record con le rispettive chiavi

---

Sistema Undo

Quando si eliminano record (singoli o multipli), appare un toast con pulsante "Annulla":

• Il toast resta visibile per 8 secondi
• Cliccando "Annulla" i record vengono ripristinati immediatamente
• Stack in memoria fino a 10 operazioni

---

Editor Record con Form HTML

L'editor dei record usa campi HTML nativi invece di JSON grezzo:

• Testo — Campo <input type="text">
• Numero — Campo <input type="number"> con supporto decimali
• Booleano — Toggle switch (true/false)
• Array / Oggetto — Textarea con JSON (per valori complessi)
• Null — Campo testo vuoto
• Il campo keyPath e' evidenziato con badge "chiave"
• Possibilita di aggiungere nuovi campi (nome + tipo)
• Possibilita di rimuovere campi con la X

Per nuovi record, i campi vengono pre-popolati automaticamente dalla struttura dei record esistenti nello store (Template Record).

---

Colonna Azioni Sticky

La colonna delle azioni nella tabella record e' fissa a destra (sticky):

• Sempre visibile anche con molte colonne e scroll orizzontale
• Quattro azioni per riga: Copia | Duplica | Modifica | Elimina
• Bottoni sempre visibili (non solo al passaggio del mouse)

---

Interfaccia Responsive

Viewport	Comportamento
Desktop (>1024px)	Layout completo con sidebar + contenuto
Tablet (768-1023px)	Sidebar ridotta a 220px
Mobile (<768px)	Sidebar nascosta, toggle via hamburger menu, modali full-screen, card layout per database

---

Struttura File

IndexedDB-admin/
  index.html    — Shell HTML dell'applicazione
  style.css     — Stili completi con temi e responsive
  app.js        — Logica applicativa completa
  README.md     — Questa documentazione

---

Requisiti Browser

• Chrome / Edge 80+ (consigliato)
• Firefox 126+ (supporto indexedDB.databases() aggiunto nel 2024)
• Safari 15+

Nota: indexedDB.databases() e' necessario per elencare i database. Su browser che non lo supportano, viene mostrato un avviso.

---

Come Usare

1. Apri index.html nel browser
2. Clicca "Crea Database" per iniziare
3. Dentro il database, crea un Object Store (tabella)
4. Aggiungi record tramite il form con campi tipizzati
5. Usa la query SQL per filtrare, la ricerca per trovare, l'ordinamento per organizzare
6. Esporta i dati in JSON o CSV per backup
7. Importa da JSON per ripristinare

---

Sviluppato come applicazione web standalone per la gestione completa dei database IndexedDB.