Gegevensbeheer in Balansmaker

Dit blok is een kleine data-utility laag bovenop dezelfde state die het formulier gebruikt.

Functionaliteiten:

• JSON exporteren
• JSON importeren
• PDF / print genereren
• localStorage opslag

---

1. HTML-structuur

Dit staat in:

assets/index.html

Belangrijke IDs:

ID	Functie
exportJson	Export
importJson	Import
print	Print / PDF

Deze IDs worden gebruikt in JavaScript event listeners.

---

2. CSS styling

De styling van het gegevensbeheer blok komt uit:

assets/styles.css

Belangrijke classes:

Class	Functie
.panel	Card/panel layout
.actions	Knoppenrij
.btn	Algemene knopstijl
.btn--ghost--2	Secondary button variant

---

Print styling

Voor print/PDF wordt de editor verborgen met:

@media print;

zodat alleen de preview of rapportage zichtbaar blijft.

---

3. Werking in JavaScript

Alle functionaliteit zit in:

assets/app.js

---

localStorage opslag

Laden

function loadState() {
  return localStorage.getItem("balansmaker");
}

Opslaan

function saveState(state) {
  localStorage.setItem("balansmaker", JSON.stringify(state));
}

---

4. JSON export

De export werkt via:

1. JSON.stringify()
2. Blob
3. URL.createObjectURL()
4. tijdelijke <a download> trigger

Voorbeeld:

function exportJson(state, filename) {
  const payload = JSON.stringify(state, null, 2);

  const blob = new Blob([payload], {
    type: "application/json",
  });

  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");

  a.href = url;
  a.download = filename;
  a.click();

  URL.revokeObjectURL(url);
}

---

5. JSON import

Import gebeurt via:

FileReader.readAsText();

Daarna:

JSON.parse();

en merge met default state.

Voorbeeld:

const sanitized = JSON.parse(text);

Object.assign(state, structuredClone(defaultState), sanitized);

---

6. Print / PDF

Printen gebruikt:

window.print();

---

7. Autosave

In de originele versie van Balansmaker wordt niet automatisch opgeslagen.

Opslaan gebeurt pas wanneer de gebruiker op:

Opslaan

klikt.

---

Debounced autosave variant

Onderstaande variant is herbruikbaar in andere projecten.

gegevensbeheer.js

const STORAGE_KEY = "balansmaker";

function loadState(fallbackState) {
  const stored = localStorage.getItem(STORAGE_KEY);

  if (!stored) {
    return structuredClone(fallbackState);
  }

  try {
    return {
      ...structuredClone(fallbackState),
      ...JSON.parse(stored),
    };
  } catch {
    return structuredClone(fallbackState);
  }
}

function saveState(state, { silent = false } = {}) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));

  if (!silent) {
    showToast("Opgeslagen ✨");
  }
}

function createAutosaver({ delayMs = 800 } = {}) {
  let timeoutId = null;

  return (saveFn) => {
    window.clearTimeout(timeoutId);

    timeoutId = window.setTimeout(saveFn, delayMs);
  };
}

---

Gebruik

const state = loadState(defaultState);

const scheduleAutosave = createAutosaver({
  delayMs: 800,
});

// Aanroepen bij state wijzigingen:
scheduleAutosave(() => {
  saveState(state, {
    silent: true,
  });
});

---

Belangrijke voordelen van debounce

Debounce voorkomt:

• overmatig schrijven naar localStorage
• performance issues
• onnodige browser writes

Gebruik meestal:

300ms – 1000ms

afhankelijk van de applicatie.