New: Aanmelden bedrijven

This commit is contained in:
2026-01-27 08:20:30 +01:00
parent 2661f00ac5
commit a1af2e4928
46 changed files with 4899 additions and 145 deletions

View File

@@ -0,0 +1,200 @@
{{ define "main" }}
<section class="section">
<div class="container">
<div class="row">
<div class="col-12">
<div class="py-2 px-4 px-lg-5">
<h1 class="mb-4 fw-bold">{{ .Title }}</h1>
<p class="lead">{{ .Params.Description | markdownify }}</p>
<div class="row mt-5">
<div class="col-md-4 col-lg-3">
<div class="sticky-top" style="top: 150px;">
<h2 class="h4 fw-bold">Filters</h2>
<hr>
<p class="text-muted">Filter op kenmerken van de bedrijven.</p>
<div id="builder-filters">
<div class="form-check mb-2">
<input class="form-check-input filter-checkbox" type="checkbox" value="eigen" id="filter-fabriek" data-filter="fabriek">
<label class="form-check-label small" for="filter-fabriek">
{{ i18n "label_filter_eigen_fabriek" | default "Eigen fabriek" }}
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input filter-checkbox" type="checkbox" value="mogelijk" id="filter-huur" data-filter="huur">
<label class="form-check-label small" for="filter-huur">
{{ i18n "label_filter_huur" | default "Huur mogelijk" }}
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input filter-checkbox" type="checkbox" value="mogelijk" id="filter-onderhoud" data-filter="onderhoud">
<label class="form-check-label small" for="filter-onderhoud">
{{ i18n "label_filter_onderhoud" | default "Onderhoud mogelijk" }}
</label>
</div>
<button class="btn btn-sm btn-primary text-white mt-3" id="clear-filters" style="display:none;">
{{ i18n "clear_filters" | default "Filters wissen" }}
</button>
</div>
</div>
</div>
<div class="col-md-8 col-lg-9">
<div class="row masonry-wrapper" id="builders-grid">
{{ range .Params.builders }}
<div class="mb-4 builder-card"
data-fabriek="{{ .fabriek.type | default "onbekend" | plainify }}"
data-huur="{{ .huur.type | default "onbekend" | plainify }}"
data-onderhoud="{{ .onderhoud.type | default "onbekend" | plainify }}">
<div class="card h-100 shadow-sm rounded border-0">
<div class="card-body d-flex flex-column">
<div class="mb-1">
<h2 class="h3 card-title h5 fw-bold mb-1">{{ .name }}</h3>
<span class="badge bg-light text-primary border mt-2">{{ .specialty }}</span>
</div>
<p class="card-text text-muted flex-grow-1">
{{ .description }}
</p>
<div class="bg-light rounded p-3 mt-2 mb-4">
<div class="row g-2">
<div class="col-md-6 d-flex align-items-center">
<div class="position-relative me-3">
{{ $f := .fabriek }}
{{ $fColor := "text-muted opacity-25" }}
{{ if eq $f.type "eigen" }}{{ $fColor = "text-success" }}
{{ else if eq $f.type "partner" }}{{ $fColor = "text-success opacity-50" }}{{ end }}
<i class="fas fa-industry {{ $fColor }} fa-fw"></i>
{{ if gt (int $f.aantal) 0 }}
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">
{{ $f.aantal }}
</span>
{{ end }}
</div>
<span class="small text-muted">{{ i18n (printf "label_fabriek_%s" ($f.type | default "onbekend")) }}</span>
</div>
<div class="col-md-6 d-flex align-items-center">
<i class="fas fa-file-contract fa-fw me-3 {{ if .vergunning }}text-success{{ else }}text-muted opacity-25{{ end }}"></i>
<span class="small text-muted">{{ i18n "label_vergunning" }}</span>
</div>
<div class="col-md-6 d-flex align-items-center">
{{ $o := .onderhoud }}
{{ $oColor := "text-muted opacity-25" }}
{{ if eq $o.type "mogelijk" }}{{ $oColor = "text-success" }}{{ end }}
<i class="fas fa-tools fa-fw me-3 {{ $oColor }}"></i>
<span class="small text-muted">{{ i18n (printf "label_onderhoud_%s" ($o.type | default "onbekend")) }}</span>
</div>
<div class="col-md-6 d-flex align-items-center">
{{ $h := .huur }}
{{ $hColor := "text-muted opacity-25" }}
{{ if eq $h.type "mogelijk" }}{{ $hColor = "text-success" }}{{ end }}
<i class="fas fa-key fa-fw me-3 {{ $hColor }}"></i>
<span class="small text-muted">{{ i18n (printf "label_huur_%s" ($h.type | default "onbekend")) }}</span>
</div>
</div>
</div>
<div class="mt-auto">
<a class="btn btn-primary text-white py-2" href="{{ .url }}?source=mantelzorgwoning.info" target="_blank" rel="noopener">
{{ i18n "visit_website" }}
</a>
<a class="btn btn-outline py-2" href="mailto:{{ .email }}?subject={{ i18n "mail_subject" }}">
<i class="fas fa-envelope pe-1"></i> {{ i18n "send_email" }}
</a>
</div>
</div>
</div>
</div>
{{ end }}
</div>
<div class="mt-5 pt-4 border-top">
{{ .Content }}
</div>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const grid = document.querySelector('#builders-grid');
const msnry = new Masonry(grid, {
itemSelector: '.builder-card',
percentPosition: true,
transitionDuration: '0.2s'
});
const checkboxes = document.querySelectorAll('.filter-checkbox');
const cards = document.querySelectorAll('.builder-card');
const clearBtn = document.getElementById('clear-filters');
function norm(v) {
return (v || "").trim().replace(/^"+|"+$/g, "").toLowerCase();
}
function filterCards() {
let activeFilters = {};
let hasActiveFilters = false;
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
activeFilters[checkbox.dataset.filter] = checkbox.value.trim();
hasActiveFilters = true;
}
});
cards.forEach(card => {
let shouldShow = true;
for (let filter in activeFilters) {
const cardValue = norm(card.dataset[filter]);
const filterValue = norm(activeFilters[filter]);
if (cardValue !== filterValue) {
shouldShow = false;
break;
}
}
if (shouldShow) {
card.style.display = "block";
card.classList.remove('is-filtered-out');
} else {
card.classList.add('is-filtered-out');
card.style.display = "none";
}
});
msnry.layout();
clearBtn.style.display = hasActiveFilters ? "block" : "none";
}
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', filterCards);
});
clearBtn.addEventListener('click', function() {
checkboxes.forEach(cb => cb.checked = false);
filterCards();
});
});
</script>
{{ end }}