DSO Toolkit | Component Library

Shopping Cart: Open 

<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status"><svg class="di di-chevron-up">
                <use href="../../dso-icons.svg#chevron-up" />
            </svg>U heeft 3 activiteiten gekozen
        </button>
        <ul class="dso-items">
            <li>

                Tankstation starten of veranderen
                <button type="button" class="dso-delete" title="Verwijder">
                    <svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg> </button>
                <ul class="dso-activities">
                    <li>

                        Tanken van diesel, benzine en andere vloeibare brandstof
                        <button type="button" class="dso-delete" title="Verwijder">
                            <svg class="di di-trash">
                                <use href="../../dso-icons.svg#trash" />
                            </svg> </button>
                    </li>
                    <li>

                        Tanken en opslaan van LPG
                        <button type="button" class="dso-delete" title="Verwijder">
                            <svg class="di di-trash">
                                <use href="../../dso-icons.svg#trash" />
                            </svg> </button>
                    </li>
                </ul>
            </li>
            <li>
                <svg class="di di-status-warning">
                    <use href="../../dso-icons.svg#status-warning" />
                </svg>
                Opslaan van vloeistoffen in een opslagtank
                <button type="button" class="dso-delete" title="Verwijder">
                    <svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg> </button>
                <ul class="dso-activities">
                    <li>
                        <svg class="di di-status-warning">
                            <use href="../../dso-icons.svg#status-warning" />
                        </svg>
                        Opslaan van vloeistoffen in een ondergrondse opslagtank
                        <button type="button" class="dso-delete" title="Verwijder">
                            <svg class="di di-trash">
                                <use href="../../dso-icons.svg#trash" />
                            </svg> </button>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <p class="dso-warning">
        <strong>Let op:</strong> Voor de werkzaamheden met een <svg class="di di-status-warning">
            <use href="../../dso-icons.svg#status-warning" />
        </svg> zijn geen maatregelen opgenomen in dit overzicht met maatregelen. Dit betekent niet dat er geen voorschriften en maatregelen van toepassing zijn.
    </p>
</div>
 
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
  <div class="dso-contents">
    {{#if items }}
      {{#if toggleButton ~}}
        <button type="button" class="dso-status">
          {{~#if open ~}}
            {{~> '@icon' icon='chevron-up'~}}
          {{~else~}}
            {{~> '@icon' icon='chevron-down'~}}
          {{~/if~}}U heeft {{countActivities items }} activiteit{{#if (gt (countActivities items) 1) }}en{{/if}} gekozen
        </button>
      {{/if}}
      {{#if open }}
        <ul class="dso-items">
          {{#each items }}
            <li>
              {{#if (hasWarning activities)}}{{> '@icon' icon='status-warning' }}{{/if}}
              {{ label }}
              <button type="button" class="dso-delete" title="Verwijder">
                {{> '@icon' icon='trash' }}
              </button>
              <ul class="dso-activities">
                {{#each activities }}
                  <li>
                    {{#if warning }}{{> '@icon' icon='status-warning' }}{{/if}}
                    {{ label }}
                    <button type="button" class="dso-delete" title="Verwijder">
                      {{> '@icon' icon='trash' }}
                    </button>
                  </li>
                {{/each}}
              </ul>
            </li>
          {{/each}}
        </ul>
      {{/if}}
    {{else}}
      <p class="dso-empty">U heeft nog geen activiteiten gekozen</p>
    {{/if}}
  </div>

  {{#if (and items (hasWarning items) open)}}
    <p class="dso-warning">
      <strong>Let op:</strong> Voor de werkzaamheden met een {{> '@icon' icon='status-warning' }} zijn geen maatregelen opgenomen in dit overzicht met maatregelen. Dit betekent niet dat er geen voorschriften en maatregelen van toepassing zijn.
    </p>
  {{/if}}
</div>
 
open: true
toggleButton: true
items:
  - label: Tankstation starten of veranderen
    activities:
      - label: 'Tanken van diesel, benzine en andere vloeibare brandstof'
      - label: Tanken en opslaan van LPG
  - label: Opslaan van vloeistoffen in een opslagtank
    activities:
      - label: Opslaan van vloeistoffen in een ondergrondse opslagtank
        warning: true
  • Content: 
    // Notes:
// ------
// * Each change to this file needs a restart of the fractal instance
// * Exported methods are merged as helpers in fractal.js

function accumulateActivities(items) {
  return items.reduce((t, item) => t.concat(item.activities), []);
}

module.exports = {
  countActivities(items) {
    return accumulateActivities(items).length
  },
  hasWarning(itemsOrActivities) {
    return (itemsOrActivities.some(a => a.activities) ? accumulateActivities(itemsOrActivities) : itemsOrActivities)
      .some(a => a.warning);
  }
};
  • URL: /components/raw/shopping-cart/shopping-cart.helpers.js
  • Filesystem Path: components\02-content\shopping-cart\shopping-cart.helpers.js
  • Size: 560 Bytes

There are no notes for this item.