Skip to content

Refactor #856

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
rubenrouwhof wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Refactor #856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3bd4b4
Refactor frontend: opruimen CSS, verwijderen duplicaten en bugs
rubenrouwhof Mar 11, 2026
32f88f1
Refactor volledige codebase: security, deduplicatie, opruiming
rubenrouwhof Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,16 @@ site

# python cache
**/__pycache__/**
*.pyc

# IDE files
.idea/

# OS files
.DS_Store

# npm
.npm-cache/

.Rproj.user
/tmp-site/
52 changes: 24 additions & 28 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,51 @@ hide:
- toc
---

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px;" class="responsive-grid-2">
<div style="background-color: #e5f1f9; padding: 1.5em 1em 1em 1.5em;">
<div class="responsive-grid-2">
<div class="homepage-card">
<h2>Over het algoritmekader</h2>
<p>Belangrijkste wetten en regels voor verantwoord gebruik van overheidsalgoritmes, met tips en hulpmiddelen.</p>
<p><a href="over-het-algoritmekader/over-het-algoritmekader/">Meer informatie over het algoritmekader</a></p>
</div>
<div style="padding-left: 1.5em; padding-top: 0;">
<h2 style="padding-top: 0; margin-top: 0;">Lees alles over de Europese AI-verordening</h2>
<ul style="list-style: none; padding: 0; margin-left: 0;">
<li style="margin-left: 0;">› <a href="ai-verordening/tijdlijn-ai-verordening/">Tijdlijn: alle deadlines op een rij</a></li>
<li style="margin-left: 0;">› <a href="ai-verordening/ai-verordening-in-het-kort/">AI-verordening in het kort</a></li>
<li style="margin-left: 0;">› <a href="javascript:void(0)" onclick="showModal(event, 'beslishulp AI-verordening', {redirectUrl: 'voldoen-aan-wetten-en-regels/vereisten/'});">Beslishulp AI-verordening</a></li>
<div class="homepage-card-plain">
<h2>Lees alles over de Europese AI-verordening</h2>
<ul class="homepage-list">
<li>› <a href="ai-verordening/tijdlijn-ai-verordening/">Tijdlijn: alle deadlines op een rij</a></li>
<li>› <a href="ai-verordening/ai-verordening-in-het-kort/">AI-verordening in het kort</a></li>
<li>› <a href="javascript:void(0)" onclick="showModal(event, 'beslishulp AI-verordening', {redirectUrl: 'voldoen-aan-wetten-en-regels/vereisten/'});">Beslishulp AI-verordening</a></li>
</ul>
<p><a href="ai-verordening/">Ontdek alle informatie</a></p>
</div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;" class="responsive-grid-3">
<div style="background-color: #e5f1f9; padding: 1.5em 1em 1em 1.5em;">
<div class="responsive-grid-3">
<div class="homepage-card">
<h2>Soorten algoritmes en AI</h2>
<ul style="list-style: none; padding: 0; margin-left: 0;">
<li style="margin-left: 0;">› <a href="soorten-algoritmes-en-ai/wat-is-een-algoritme/">Wat is een algoritme?</a></li>
<li style="margin-left: 0;">› <a href="soorten-algoritmes-en-ai/generatieve-ai/">Generatieve AI</a></li>
<li style="margin-left: 0;">› <a href="soorten-algoritmes-en-ai/risico-van-ai-systemen/">Risico van AI-systemen</a></li>
<ul class="homepage-list">
<li>› <a href="soorten-algoritmes-en-ai/wat-is-een-algoritme/">Wat is een algoritme?</a></li>
<li>› <a href="soorten-algoritmes-en-ai/generatieve-ai/">Generatieve AI</a></li>
<li>› <a href="soorten-algoritmes-en-ai/risico-van-ai-systemen/">Risico van AI-systemen</a></li>
</ul>
<p><a href="soorten-algoritmes-en-ai/">Bekijk alle algoritmesoorten</a></p>
</div>

<div style="background-color: #e5f1f9; padding: 1.5em 1em 1em 1.5em;">
<div class="homepage-card">
<h2>Voldoen aan wetten en regels</h2>
<ul style="list-style: none; padding: 0; margin-left: 0;">
<li style="margin-left: 0;">› <a href="voldoen-aan-wetten-en-regels/vereisten/">Vereisten, inclusief AI-verordening</a></li>
<li style="margin-left: 0;">› <a href="voldoen-aan-wetten-en-regels/maatregelen/">Overzicht aanbevolen maatregelen</a></li>
<li style="margin-left: 0;">› <a href="voldoen-aan-wetten-en-regels/hulpmiddelen/">Hulpmiddelen</a></li>
<ul class="homepage-list">
<li>› <a href="voldoen-aan-wetten-en-regels/vereisten/">Vereisten, inclusief AI-verordening</a></li>
<li>› <a href="voldoen-aan-wetten-en-regels/maatregelen/">Overzicht aanbevolen maatregelen</a></li>
<li>› <a href="voldoen-aan-wetten-en-regels/hulpmiddelen/">Hulpmiddelen</a></li>
</ul>
<p><a href="voldoen-aan-wetten-en-regels/">Bekijk alle vereisten</a></p>
</div>

<div style="background-color: #e5f1f9; padding: 1.5em 1em 1em 1.5em;">
<div class="homepage-card">
<h2>Onderwerpen</h2>
<ul style="list-style: none; padding: 0; margin-left: 0;">
<li style="margin-left: 0;">› <a href="onderwerpen/bias-en-non-discriminatie/">Discriminatie</a></li>
<li style="margin-left: 0;">› <a href="onderwerpen/privacy-en-gegevensbescherming/">Privacy en persoonsgegevens</a></li>
<li style="margin-left: 0;">› <a href="onderwerpen/publieke-inkoop/">Publieke inkoop</a></li>
<ul class="homepage-list">
<li>› <a href="onderwerpen/bias-en-non-discriminatie/">Discriminatie</a></li>
<li>› <a href="onderwerpen/privacy-en-gegevensbescherming/">Privacy en persoonsgegevens</a></li>
<li>› <a href="onderwerpen/publieke-inkoop/">Publieke inkoop</a></li>
</ul>
<p><a href="onderwerpen/">Bekijk alle onderwerpen</a></p>
</div>
</div>



<br><br><br>
93 changes: 28 additions & 65 deletions docs/javascripts/exportExcel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,57 +97,35 @@ function capitalize(str) {
}


function exportToExcel(config) {
function exportToFormat(config, format) {
const button = document.getElementById(config.buttonId);
const originalButtonHTML = button ? button.innerHTML : '';
const formatLabel = format.toUpperCase();

try {
setButtonState(button, true, 'Exporteren...');
validateRequirements(config);

const table = document.getElementById(config.tableId);
const activeFilters = getCurrentFilters(config);
const exportData = extractTableDataForExcel(table, config, activeFilters);
const workbook = createWorkbook(exportData, activeFilters, config, 'xlsx');
const exportData = extractTableData(table, config, activeFilters);
const workbook = createWorkbook(exportData, activeFilters, config, format);

const timestamp = new Date().toISOString().slice(0, 10);
const filename = `${config.filename}_${timestamp}.xlsx`;
const filename = `${config.filename}_${timestamp}.${format}`;

XLSX.writeFile(workbook, filename, { bookType: 'xlsx' });
XLSX.writeFile(workbook, filename, { bookType: format });

} catch (error) {
console.error('Excel export error:', error);
alert(`Excel export mislukt: ${error.message}`);
console.error(`${formatLabel} export error:`, error);
alert(`${formatLabel} export mislukt: ${error.message}`);
} finally {
restoreButtonState(button, originalButtonHTML);
}
}

function exportToODS(config) {
const button = document.getElementById(config.buttonId);
const originalButtonHTML = button ? button.innerHTML : '';

try {
setButtonState(button, true, 'Exporteren...');
validateRequirements(config);

const table = document.getElementById(config.tableId);
const activeFilters = getCurrentFilters(config);
const exportData = extractTableDataForODS(table, config, activeFilters);
const workbook = createWorkbook(exportData, activeFilters, config, 'ods');

const timestamp = new Date().toISOString().slice(0, 10);
const filename = `${config.filename}_${timestamp}.ods`;

XLSX.writeFile(workbook, filename, { bookType: 'ods' });

} catch (error) {
console.error('ODS export error:', error);
alert(`ODS export mislukt: ${error.message}`);
} finally {
restoreButtonState(button, originalButtonHTML);
}
}
function exportToExcel(config) { exportToFormat(config, 'xlsx'); }
function exportToODS(config) { exportToFormat(config, 'ods'); }

function validateRequirements(config) {
if (typeof XLSX === 'undefined') {
Expand All @@ -160,39 +138,7 @@ function validateRequirements(config) {
}
}

function extractTableDataForExcel(table, config, activeFilters) {
const rows = table.getElementsByTagName("tr");

if (rows.length === 0) {
throw new Error('Geen data om te exporteren');
}

const exportData = [];
const headers = extractHeaders(rows[0]);

// Add filterrow is active filters are present
const hasActiveFilters = activeFilters && activeFilters.length > 0;
if (hasActiveFilters) {
const filterRow = [getActiveFiltersString(activeFilters)];
while (filterRow.length < headers.length) filterRow.push('');
exportData.push(filterRow);
}

exportData.push(headers);

// Only export visible rows (after filtering)
for (let i = 1; i < rows.length; i++) {
const row = rows[i];
if (row.classList && row.classList.contains('filter-row')) continue;
if (row.style.display === 'none') continue;
const rowData = extractRowData(row, headers, config);
exportData.push(rowData);
}

return exportData;
}

function extractTableDataForODS(table, config, activeFilters) {
function extractTableData(table, config, activeFilters) {
const rows = table.getElementsByTagName("tr");

if (rows.length === 0) {
Expand Down Expand Up @@ -465,6 +411,23 @@ function closeExportDropdown() {
}
}

// Event delegation for data-action attributes
document.addEventListener('click', function(e) {
var target = e.target;
var action = target.getAttribute('data-action') || (target.closest && target.closest('[data-action]') ? target.closest('[data-action]').getAttribute('data-action') : null);
if (action === 'export-excel') exportExcel();
if (action === 'export-ods') exportODS();
if (action === 'toggle-export-dropdown') toggleExportDropdown();
});

document.addEventListener('keydown', function(e) {
var target = e.target;
var action = target.getAttribute('data-action') || (target.closest && target.closest('[data-action]') ? target.closest('[data-action]').getAttribute('data-action') : null);
if (action === 'toggle-export-dropdown') handleExportKeydown(e);
var exportType = target.getAttribute('data-export-type');
if (exportType) handleDropdownKeydown(e, exportType);
});

// Export functions globally
window.toggleExportDropdown = toggleExportDropdown;
window.exportExcel = exportExcel;
Expand Down
24 changes: 0 additions & 24 deletions docs/javascripts/extra.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,30 +42,6 @@
initialize();
});

// Function to initialize Choices.js for multi-select filters
function initializeChoices() {
const elements = document.querySelectorAll('.js-example-basic-multiple');

elements.forEach(function(element) {
// Check if Choices.js is already initialized
if (!element.choicesInstance) {
const choices = new Choices(element, {
removeItemButton: true,
placeholder: true,
searchEnabled: true,
noResultsText: 'Geen resultaten',
noChoicesText: 'Geen keuzes beschikbaar',
itemSelectText: 'Klik om te selecteren',
resetScrollPosition: false
});

// Store the Choices.js instance to avoid re-initialization
element.choicesInstance = choices;
}
});
}


// Function to initialize accessible abbreviations and tooltips
function initializeAccessibleAbbreviations() {
// Handle abbreviations with custom tooltips
Expand Down
71 changes: 55 additions & 16 deletions docs/javascripts/filtering.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,23 +237,62 @@ function evaluateLabelExpression(expression, selectedLabels) {
}

try {
// Transformeer labels in de expressie naar hasLabel functie
const transformedExpression = expression.replace(/["']?([a-zA-Z0-9-_]+)["']?/g, "hasLabel('$1')");

// Maak de functie die geëvalueerd wordt
const functionBody = `
const hasLabel = (label) => {
// Controleer of een van de geselecteerde labels overeenkomt via labelMapper
for (const selLabel of selectedLabels) {
const mappedLabel = labelMapper.find(selLabel)?.label;
if (mappedLabel && mappedLabel === label) return true;
}
return false;
};
return ${transformedExpression};
`;
// Helper: check if a label is present in selectedLabels via labelMapper
var hasLabel = function(label) {
for (var i = 0; i < selectedLabels.length; i++) {
var mappedLabel = labelMapper.find(selectedLabels[i]);
if (mappedLabel && mappedLabel.label === label) return true;
}
return false;
};

// Tokenize the expression into parentheses, operators, and label identifiers
var tokens = expression.match(/\(|\)|&&|\|\||!|[a-zA-Z0-9_-]+/g) || [];
var pos = 0;

function peek() { return tokens[pos]; }
function consume() { return tokens[pos++]; }

function parseOr() {
var left = parseAnd();
while (peek() === '||') {
consume();
var right = parseAnd();
left = left || right;
}
return left;
}

function parseAnd() {
var left = parseNot();
while (peek() === '&&') {
consume();
var right = parseNot();
left = left && right;
}
return left;
}

function parseNot() {
if (peek() === '!') {
consume();
return !parsePrimary();
}
return parsePrimary();
}

function parsePrimary() {
if (peek() === '(') {
consume(); // consume '('
var result = parseOr();
consume(); // consume ')'
return result;
}
var label = consume();
return hasLabel(label);
}

return new Function('selectedLabels', functionBody)(selectedLabels);
return parseOr();
} catch (error) {
console.error('Error evaluating label expression (oude logica):', error, 'Expression:', expression);
return false;
Expand Down
Loading
Loading