Activiteiten
Component preview opent in nieuw tabbladThere are no notes for this item.
<main>
<form>
<div class="dso-app-heading">
<h1>Aanvraag Laan van Eik en Duinen 125, Den Haag</h1>
<h2 class="dso-steps-indicator">
3. Activiteiten
<span class="dso-step">
Stap 3/7
</span>
</h2>
</div>
<dso-alert status="info">
Hulp nodig bij kiezen? Doe dan eerst de <a href="#">Vergunningscheck</a>.
</dso-alert>
<h3>Mijn activiteiten</h3>
<div class="dso-shopping-cart">
<div class="dso-contents">
<button type="button" class="dso-status">
<dso-icon icon="chevron-down"></dso-icon>U heeft 1 activiteit gekozen
</button>
</div>
</div>
<div class="dso-highlight-box">
<div class="dso-search-bar">
<div class="dso-search-bar-input">
<label for="filter_activiteiten">Zoek uw activiteiten</label>
<span class="dso-search-icon" aria-hidden="true"></span>
<input type="text" id="filter_activiteiten" placeholder="Bijvoorbeeld bouwactiviteiten" />
<button type="button">
Zoekopdracht legen
</button>
</div>
<button type="button" class="dso-secondary sr-only">
Button
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">
<fieldset>
<legend>
<h4>Filters</h4>
</legend>
<fieldset class="form-group dso-checkboxes">
<legend class="sr-only">Bestuurslaag</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Bestuurslaag
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="facets-0" name="facets" value="1">
<label for="facets-0">
Rijk (18)
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="facets-1" name="facets" value="2">
<label for="facets-1">
Gemeente (4)
</label>
</div>
</div>
</fieldset>
<fieldset class="form-group dso-checkboxes">
<legend class="sr-only">Toestemming</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Toestemming
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="facets-0" name="facets" value="1">
<label for="facets-0">
Aanvraag vergunning (11)
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="facets-1" name="facets" value="2">
<label for="facets-1">
Aanvraag maatwerkvoorschrift (3)
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="facets-2" name="facets" value="3">
<label for="facets-2">
Melding (7)
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="facets-3" name="facets" value="4">
<label for="facets-3">
Informatie (1)
</label>
</div>
</div>
</fieldset>
</fieldset>
</div>
<div class="col-xs-12 col-sm-9">
<fieldset>
<legend class="sr-only">
<h4>5 activiteiten</h4>
</legend>
<div class="dso-context-wrapper">
<span class="dso-context-label" aria-hidden="true">
<h4>5 activiteiten</h4>
</span>
<div class="dso-context-container">
<div class="dso-context-select">
<label for="sorting-select">Sorteer op:</label>
<select id="sorting-select">
<option value="most-chosen">Meest gekozen</option>
<option value="alphabetic" selected>Alfabetisch</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="dso-label-group">
<span class="dso-label">
Gemeente
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Waterschap
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Provincie
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Rijksoverheid
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Aanvraag vergunning
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Melding
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Informatie
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Informatie ongewoon voorval
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Aanvraag maatwerkvoorschrift
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Melding gelijkwaardige maatregel
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Aanvraag toestemming gelijkwaardige maatregel
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
</div>
<button type="button" class="btn dso-list-button dso-selected">
<span>Andere activiteiten dan kabels en leidingen in het beperkingengebied van een Rijksweg - Aanvraag vergunning</span>
<span class="dso-sublabel">Rijk</span>
<dso-icon icon="check"></dso-icon>
<span class="sr-only">geselecteerd</span>
</button>
<button type="button" class="btn dso-list-button">
<span>Bouwen dakkapel - Aanvraag vergunning</span>
<span class="dso-sublabel">Gemeente</span>
</button>
<div class="dso-btn-group">
<button type="button" class="btn dso-list-button">
<span>In stand houden van bouwwerken - Melding</span>
<span class="dso-sublabel">Gemeente</span>
</button>
<div class="dso-input-number">
<button type="button" class="dso-tertiary"><span class="sr-only">Aantal verlagen</span>
<dso-icon icon="minus-square"></dso-icon>
</button>
<input type="number" id="in-stand-houden-van-bouwwerken" readonly tabindex="-1" class="dso-input-step-counter" value="0">
<button type="button" class="dso-tertiary"><span class="sr-only">Aantal verhogen</span>
<dso-icon icon="plus-square"></dso-icon>
</button>
</div>
</div>
<button type="button" class="btn dso-list-button">
<span>Milieubelastende activiteit - Aanvraag vergunning</span>
<span class="dso-sublabel">Gemeente</span>
</button>
<button type="button" class="btn dso-list-button">
<span>Opslaan van vloeistoffen in opslagtanks of in tankcontainers of verpakkingen gebruikt als opslagtank - Aanvraag vergunning</span>
<span class="dso-sublabel">Rijk</span>
</button>
</div>
</div>
</fieldset>
</div>
</div>
<div class="dso-form-buttons">
<div class="dso-aside">
<button type="link" class="dso-tertiary">
<dso-icon icon="chevron-left"></dso-icon><span>Vorige stap</span>
</button>
</div>
<button type="submit" class="dso-primary"><span>Volgende stap</span>
<dso-icon icon="chevron-right"></dso-icon>
</button>
</div>
</form>
</main>
<main>
<form>
{% render '@application-heading', appheading %}
<dso-alert status="{{ alert.status }}">
{{ alert.message | safe }}
</dso-alert>
{% render '@shopping-cart', shoppingcart %}
<div class="dso-highlight-box">
{% render '@search-bar', search %}
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">
{% render '@form-fieldsets', {fieldsets: formFacets} %}
</div>
<div class="col-xs-12 col-sm-9">
<fieldset>
<legend class="sr-only">
<h4>5 activiteiten</h4>
</legend>
<div class="dso-context-wrapper">
<span class="dso-context-label" aria-hidden="true">
<h4>5 activiteiten</h4>
</span>
<div class="dso-context-container">
<div class="dso-context-select">
<label for="sorting-select">Sorteer op:</label>
<select id="sorting-select">
<option value="most-chosen">Meest gekozen</option>
<option value="alphabetic" selected>Alfabetisch</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
{% render '@label-group', labelGroup %}
{% for listButton in listButtons %}
{% render '@list-button', listButton %}
{% endfor %}
</div>
</div>
</fieldset>
</div>
</div>
{% render '@form-buttons', {buttons: buttons, asideButtons: asideButtons} %}
</form>
</main>
appheading:
title: Aanvraag Laan van Eik en Duinen 125, Den Haag
subtitle: 3. Activiteiten
step: Stap 3/7
alert:
status: info
message: Hulp nodig bij kiezen? Doe dan eerst de <a href="#">Vergunningscheck</a>.
shoppingcart:
shoppingcartTitle: Mijn activiteiten
shoppingcartTitleTag: h3
items:
- label: >-
Andere activiteiten dan kabels en leidingen in het beperkingengebied van
een Rijksweg - Aanvraag vergunning
additive: 1
collapsed: true
search:
inputType: search-bar
label: Zoek uw activiteiten
placeholder: Bijvoorbeeld bouwactiviteiten
icon: true
id: filter_activiteiten
hideSearchButton: true
clearButton: true
formFacets:
- legend: |
<h4>Filters</h4>
groups:
- id: facets
inputType: checkboxes
label: Bestuurslaag
options:
- value: 1
label: Rijk (18)
id: checkbox_1
- value: 2
label: Gemeente (4)
id: checkbox_2
- id: facets
inputType: checkboxes
label: Toestemming
options:
- value: 1
label: Aanvraag vergunning (11)
id: checkbox_3
- value: 2
label: Aanvraag maatwerkvoorschrift (3)
id: checkbox_4
- value: 3
label: Melding (7)
id: checkbox_5
- value: 4
label: Informatie (1)
id: checkbox_6
labelGroup:
labels:
- label: Gemeente
removable: true
- label: Waterschap
removable: true
- label: Provincie
removable: true
- label: Rijksoverheid
removable: true
- label: Aanvraag vergunning
removable: true
- label: Melding
removable: true
- label: Informatie
removable: true
- label: Informatie ongewoon voorval
removable: true
- label: Aanvraag maatwerkvoorschrift
removable: true
- label: Melding gelijkwaardige maatregel
removable: true
- label: Aanvraag toestemming gelijkwaardige maatregel
removable: true
listButtons:
- type: button
label: >-
Andere activiteiten dan kabels en leidingen in het beperkingengebied van
een Rijksweg - Aanvraag vergunning
sublabel: Rijk
count: '1'
- type: button
label: Bouwen dakkapel - Aanvraag vergunning
sublabel: Gemeente
- type: button
label: In stand houden van bouwwerken - Melding
sublabel: Gemeente
count: 0
inputNumber: true
id: in-stand-houden-van-bouwwerken
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen
- type: button
label: Milieubelastende activiteit - Aanvraag vergunning
sublabel: Gemeente
- type: button
label: >-
Opslaan van vloeistoffen in opslagtanks of in tankcontainers of
verpakkingen gebruikt als opslagtank - Aanvraag vergunning
sublabel: Rijk
asideButtons:
- type: link
modifier: dso-tertiary
label: Vorige stap
icon: chevron-left
buttons:
- type: submit
modifier: dso-primary
label: Volgende stap
iconAfter: chevron-right