Activiteiten

Component preview opent in nieuw tabblad

There 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 class="dso-context-wrapper">
                    <legend class="dso-context-label">
                        <h4>5 activiteiten</h4>
                    </legend>
                    <div class="dso-context-container">
                        <button type="button" class="dso-tertiary">
                            <dso-icon icon="chevron-down"></dso-icon><span>Versies</span>
                        </button>

                    </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 class="dso-context-wrapper">
          <legend class="dso-context-label">
            <h4>5 activiteiten</h4>
          </legend>
          <div class="dso-context-container">
            {% render '@button', { type: 'button', modifier: 'dso-tertiary', label: 'Versies', icon: 'chevron-down' } %}
          </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