Med flow navigation

Ready

Beskrivelse
Renderet HTML kode
Handlebars kode
Data
Information

Parat til dokumentation


        
        <div class="sidebar-header sidebar--open" id="sidebarHeader">
    <div class="row">
        <div class="col"><img class="sidebar-header__bbr-logo" src="../../img/logo-bbr.svg" alt="BBR Logo" />
        </div>
        <div class="col-auto"><img class="sidebar-header__ufs-logo" src="../../img/logo-ufs.svg" alt="Udviklings og forenklingsstyrrelsen" />
        </div>
    </div>
    <hr class="sidebar-header__divider d-sm-none" />
    <div class="row d-flex d-sm-none justify-content-between align-items-end">
        <div class="col-auto">
            <div class="user-support">
                <div class="user-support__group">
                    <div class="dropdown">
                        <button class="btn btn-primary user-support__toggle user-support__toggle--support" type="button" data-bs-toggle="dropdown" id="dropdownSupportButton">Support</button>
                        <div class="dropdown-menu" aria-labelledby="dropdownSupportButton">
                            <button type="button" class="btn-close" aria-label="Luk"></button>
                            <div class="user-support__content">
                                <p>Hvis du ønsker hjælp til at bruge Ret BBR, skal du kontakte Ret BBR
                                    Supporten:</p>
                                <p>Telefon: <a href="tel:72222855">72 22 28 55</a></p>
                                <p>Telefonerne er åbne mandag til torsdag 9.00 - 15.00 og fredag 9.00
                                    - 14.00</p>
                                <h5>Kontakt til kommunen</h5>
                                <p class="mb-0">Du kan kontakte din kommune om BBR via mail, telefon
                                    eller
                                    <a href="#">denne formular</a>.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user-support__group">
                    <div class="dropdown">
                        <button class="btn btn-primary user-support__toggle user-support__toggle--user" type="button" data-bs-toggle="dropdown" id="dropdownuserInfoButton">Bruger</button>
                        <div class="dropdown-menu" aria-labelledby="dropdownuserInfoButton">
                            <button type="button" class="btn-close" aria-label="Luk"></button>
                            <div class="user-support__content">
                                <p class="mb-0 text-nowrap">Anders Landau </p>
                                <p><small class="text-muted fw-bold">Ejer</small></p>
                                <p class="mt-3"><a href="#" title="Log ud">Log ud</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary sidebar-toggle sidebar--open" id="sidebarToggleSidebarHeader" aria-label="Sidebar toggle" onclick="toggleSidebar()">
                menu
            </button>
        </div>
    </div>
</div>
<div class="sidebar sidebar--open" id="sidebar">
    <div class="sidebar__content">

        <div class="sidebar-item sidebar-item--property-info">
            <div class="sidebar-item__content">
                <div class="sidebar__back">
                    <a href="#" class="back-link">Gem og gå tilbage til vis ejendom</a>
                </div>
                <h1 class="sidebar-item__title h3">Rugbjergvej 14 </h1>
                <p class="sidebar-item__address">6230 Rødekro</p>

                <a class="btn btn-sm btn-block sidebar-item__property-information-toggle collapsed" data-bs-toggle="collapse" href="#propertyInformation" role="button" aria-expanded="false" aria-controls="propertyInformation">
                    Ejendomsinformation
                </a>
                <div class="collapse " id="propertyInformation">
                    <div class="sidebar-item__property-information">
                        <ul class="sidebar-item__list">
                            <li><strong>Ejendomsnr:</strong> 009504</li>
                            <li><strong>BFE-nummer:</strong> 5247785</li>
                            <li><strong>Kommune:</strong> Aabenraa (0580)</li>
                            <li><a href="#" class="icon-link icon-link--download" target="_blank" title="Hent BBR-meddelsen (PDF)" rel="noreferrer">Hent
                                    BBR-meddelsen (PDF)</a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <div class="sidebar-item  sidebar-item--alert">
            <div class="sidebar-item__info">
                <p class="h5">Klik på en bygning på kortet for at se oplysninger om den.</p>
                <p>Du kan flytte ikonet for bygninger og tekniske anlæg ved at klikke på ikonet og trække i det</p>
                <div class="sidebar-item__info-toggle">
                    <div class="btn btn-info"></div>
                </div>
            </div>
        </div>

        <div class="sidebar-item sidebar-item--building-info     ">
            <div class="sidebar-item__building-icon sidebar-item__building-icon--helaarsbeboelse">
                <img src="../../img/icon-warning.svg" class="sidebar-item__status-icon" alt="Advarsel" aria-label="Advarsel" />
            </div>
            <div class="sidebar-item__content">
                <h2 class="sidebar-item__title h5">

                    Bygning 1

                </h2>
                <p class="sidebar-item__address">Rugbjergvej 14, 6230 Rødekro</p>

                <p class="sidebar-item__description">Fritliggende enfamilieshus | Opført 1980 | 124 m2</p>

                <div class="callout callout--warning ">
                    <div class="row align-items-center">
                        <div class="col">
                            <div class="callout__content">
                                Flyt ikonet eller bekræft, at det er placeret korrekt
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="sidebar-item sidebar-item--building-info     ">
            <div class="sidebar-item__building-icon sidebar-item__building-icon--carport-garage">
            </div>
            <div class="sidebar-item__content">
                <h2 class="sidebar-item__title h5">
                    <s class="text--removed">
                        Bygning 2
                    </s>

                    <div class="tag tag--extra-small ">
                        <span class="tag__inner">fjernet</span>
                    </div>
                </h2>
                <p class="sidebar-item__address">Rugbjergvej 14, 6230 Rødekro</p>

                <p class="sidebar-item__description">Garage (med plads til et eller to køretøjer) | Opført 168 | 24 m2</p>

            </div>
        </div>
        <div class="sidebar-item sidebar-item--building-info     ">
            <div class="sidebar-item__building-icon sidebar-item__building-icon--olietank">
            </div>
            <div class="sidebar-item__content">
                <h2 class="sidebar-item__title h5">

                    Teknisk Anlæg 1

                    <div class="tag tag--extra-small ">
                        <span class="tag__inner">tilføjet</span>
                    </div>
                </h2>
                <p class="sidebar-item__address">Rugbjergvej 14, 6230 Rødekro</p>

                <p class="sidebar-item__description">Etableret 1987</p>

                <ul class="sidebar-item__list">
                    <li>
                        <strong>Tank:</strong> Produkt på væskeform
                    </li>
                    <li>
                        <strong>Beliggenhed:</strong> Nedgravet/underjordisk
                    </li>
                    <li>
                        <strong>Indhold:</strong> Fyringsgasolie
                    </li>
                    <li>
                        <strong>Status:</strong> I drift
                    </li>
                </ul>

            </div>
        </div>
    </div>
</div>
<button class="btn btn-primary sidebar-toggle sidebar--open" id="sidebarToggle" aria-label="Sidebar toggle" onclick="toggleSidebar()">
    menu
</button>
<div class="user-support">
    <div class="user-support__group">
        <div class="dropdown">
            <button class="btn btn-primary user-support__toggle user-support__toggle--support" type="button" data-bs-toggle="dropdown" id="dropdownSupportButton">Support</button>
            <div class="dropdown-menu" aria-labelledby="dropdownSupportButton">
                <button type="button" class="btn-close" aria-label="Luk"></button>
                <div class="user-support__content">
                    <p>Hvis du ønsker hjælp til at bruge Ret BBR, skal du kontakte Ret BBR
                        Supporten:</p>
                    <p>Telefon: <a href="tel:72222855">72 22 28 55</a></p>
                    <p>Telefonerne er åbne mandag til torsdag 9.00 - 15.00 og fredag 9.00
                        - 14.00</p>
                    <h5>Kontakt til kommunen</h5>
                    <p class="mb-0">Du kan kontakte din kommune om BBR via mail, telefon
                        eller
                        <a href="#">denne formular</a>.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="user-support__group">
        <div class="dropdown">
            <button class="btn btn-primary user-support__toggle user-support__toggle--user" type="button" data-bs-toggle="dropdown" id="dropdownuserInfoButton">Bruger</button>
            <div class="dropdown-menu" aria-labelledby="dropdownuserInfoButton">
                <button type="button" class="btn-close" aria-label="Luk"></button>
                <div class="user-support__content">
                    <p class="mb-0 text-nowrap">Anders Landau </p>
                    <p><small class="text-muted fw-bold">Ejer</small></p>
                    <p class="mt-3"><a href="#" title="Log ud">Log ud</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-wrapper sidebar--open" id="pageWrapper">

    <div class="bbr-map  bbr-map--half-screen" id="bbrMap">
        <div id="bbr-map-container"></div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col">
                <div class="data-view">
                    <div class="data-view__inner">
                        <div class="data-view-header  data-view-header--helaarsbeboelse">
                            <img src="../../img/icon-warning.svg" class="data-view-header__status-icon" alt="Advarsel" aria-label="Advarsel" />
                            <div class="row align-items-center">
                                <div class="col">
                                    <h2 class="mb-1">

                                        <strong>Bygning 1:</strong>
                                        <small>Rugbjergvej 14, 6230 Rødekro</small>

                                    </h2>
                                    <p class="mb-0">Fritliggende enfamiliehus (kode:120) | Opført 1980 | 144 m2</p>
                                    <a href="#" class="btn btn-light btn-sm data-view-header__show-on-map">Vis på kort</a>
                                </div>
                            </div>
                        </div>
                        <div class="data-view__content">
                            <div class="callout callout--warning ">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <div class="callout__content">
                                            <h4 class="callout__title">Bekræft placering</h4>
                                            Er ikonet placeret på taget af den rigtige bygning? Hvis ikke, skal du gå tilbage til kortet og placere ikonet korrekt.
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-auto mt-3 mt-sm-0">
                                        <a href="#" class="btn btn-dark btn-sm">
                                            Ja
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="data-view">
                    <div class="data-view__inner">
                        <div class="data-view-header  data-view-header--carport-garage">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h2 class="mb-1">

                                        <s class="text--removed">
                                            <strong>Bygning 2:</strong>
                                            <small>Rugbjergvej 14, 6230 Rødekro</small>
                                        </s>
                                        <div class="tag  tag--small">
                                            <span class="tag__inner">fjernet</span>
                                        </div>
                                    </h2>
                                    <p class="mb-0">Garage (med plads til et eller to køretøjer) (kode:910) | Opført 1968 | 24 m2</p>
                                    <a href="#" class="btn btn-light btn-sm data-view-header__show-on-map">Vis på kort</a>
                                </div>
                            </div>
                        </div>
                        <div class="data-view__content">
                            <div class="callout callout--success ">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <div class="callout__content">
                                            Denne bygning er blevet flyttet
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-auto mt-3 mt-sm-0">
                                        <a href="#" class="btn btn-success btn-sm">
                                            Annuler
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="data-view">
                    <div class="data-view__inner">
                        <div class="data-view-header  data-view-header--olietank">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h2 class="mb-1">

                                        <strong>Teknisk anlæg 1:</strong>
                                        <small>Rugbjergvej 14, 6230 Rødekro</small>

                                        <div class="tag  tag--small">
                                            <span class="tag__inner">tilføjet</span>
                                        </div>
                                    </h2>
                                    <p class="mb-0">Tank (kode:1110)</p>
                                    <a href="#" class="btn btn-light btn-sm data-view-header__show-on-map">Vis på kort</a>
                                </div>
                            </div>
                        </div>
                        <div class="data-view__content">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="flow-nav ">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-12 col-lg-auto order-lg-last">
                    <a href="#" class="btn btn-dark btn-lg btn-block">
                        Gem og afslut flyt beliggenhed
                    </a>
                </div>
                <div class="col-12 col-lg-auto order-lg-first">
                    <div class="row">
                        <div class="col-12 col-lg-auto mt-2 mt-lg-0">
                            <a href="#" class="btn btn-outline-white btn-block">
                                Annuler flytning af alle
                                beliggenheder
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer">
        <nav class="container" name="Footer navigation">
            <ul class="footer__nav">
                <li class="footer__nav-item"><a class="footer__nav-link" href="https://bbr.dk/om-bbr" title="Om Ret BBR">Om
                        BBR</a>
                </li>
                <li class="footer__nav-item"><a class="footer__nav-link" href="https://bbr.dk/persondata" title="Persondata">Persondata</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" href="https://bbr.dk/cookies" title="Cookies">Cookies</a>
                </li>
                <li class="footer__nav-item"><a class="footer__nav-link" href="https://www.was.digst.dk/bbr-dk" title="Tilgængelighedserklæring" target="_blank">Tilgængelighedserklæring</a></li>
                <li class="footer__nav-item"><a class="footer__nav-link" href="#" title="Tilgængelighedserklæring" target="_blank">Support</a></li>
            </ul>
        </nav>
    </footer>
</div>


        {{> @sidebar-header }}
<div class="sidebar sidebar--open" id="sidebar">
    <div class="sidebar__content">

        {{#each header }}
        {{> @sidebar-item-property }}
        {{/each}}
        
        <div class="sidebar-item  sidebar-item--alert">
            <div class="sidebar-item__info">
                <p class="h5">Klik på en bygning på kortet for at se oplysninger om den.</p>
                <p>Du kan flytte ikonet for bygninger og tekniske anlæg ved at klikke på ikonet og trække i det</p>
                <div class="sidebar-item__info-toggle">
                    <div class="btn btn-info"></div>
                </div>
            </div>
        </div>

        {{#each buildings }}
        {{> @sidebar-item-building}}
        {{/each}}

    </div>
</div>
{{> @sidebar-toggle}}
{{> @user-support}}
<div class="page-wrapper sidebar--open" id="pageWrapper">

    {{> @map isHalfScreen=true}}


    <div class="container">
        <div class="row">
            <div class="col">
                {{#each buildingsDataView}}
                <div class="data-view">
                    <div class="data-view__inner">
                        {{#each dataViewHeader }}
                        {{> @data-view-header }}
                        {{/each}}
                        <div class="data-view__content">
                            {{#each callout}}
                            {{> @callout }}
                            {{/each}}
                        </div>
                    </div>
                </div>
                {{/each}}
            </div>
        </div>
    </div>

    {{#if hasFlowNav}}
    {{> @flow-nav primaryActionLabel="Gem og afslut flyt beliggenhed" secondaryActionLabel="Annuler flytning af alle
    beliggenheder"}}
    {{/if}}

    {{> @footer }}
</div>


        
            
            {
  "header": [
    {
      "title": "Rugbjergvej 14",
      "address": "6230 Rødekro",
      "headerBackLabel": "Gem og gå tilbage til vis ejendom",
      "list": [
        {
          "listTitle": "Ejendomsnr",
          "listValue": "009504"
        },
        {
          "listTitle": "BFE-nummer",
          "listValue": "5247785"
        },
        {
          "listTitle": "Kommune",
          "listValue": "Aabenraa (0580)"
        }
      ]
    }
  ],
  "buildings": [
    {
      "title": "Bygning 1",
      "address": "Rugbjergvej 14, 6230 Rødekro",
      "buildingIcon": "helaarsbeboelse",
      "description": "Fritliggende enfamilieshus | Opført 1980 | 124 m2",
      "hasWarning": true
    },
    {
      "title": "Bygning 2",
      "address": "Rugbjergvej 14, 6230 Rødekro",
      "buildingIcon": "carport-garage",
      "description": "Garage (med plads til et eller to køretøjer) | Opført 168 | 24 m2",
      "buildYear": "Opført: 1968",
      "hasRemoved": true
    },
    {
      "title": "Teknisk Anlæg 1",
      "address": "Rugbjergvej 14, 6230 Rødekro",
      "buildingIcon": "olietank",
      "description": "Etableret 1987",
      "list": [
        {
          "listTitle": "Tank",
          "listValue": "Produkt på væskeform"
        },
        {
          "listTitle": "Beliggenhed",
          "listValue": "Nedgravet/underjordisk"
        },
        {
          "listTitle": "Indhold",
          "listValue": "Fyringsgasolie"
        },
        {
          "listTitle": "Status",
          "listValue": "I drift"
        }
      ],
      "hasAdded": true
    }
  ],
  "buildingsDataView": [
    {
      "buildingId": "1",
      "dataViewHeader": [
        {
          "buildingId": "1",
          "title": "Bygning 1",
          "address": "Rugbjergvej 14, 6230 Rødekro",
          "buildingIcon": "helaarsbeboelse",
          "description": "Fritliggende enfamiliehus (kode:120) | Opført 1980 | 144 m2",
          "isCollapsible": false,
          "showOnMap": true,
          "hasWarning": true
        }
      ],
      "callout": [
        {
          "calloutTitle": "Bekræft placering",
          "content": "Er ikonet placeret på taget af den rigtige bygning? Hvis ikke, skal du gå tilbage til kortet og placere ikonet korrekt.",
          "hasAction": true,
          "actionLabel": "Ja",
          "calloutType": "warning",
          "actionVariant": "dark"
        }
      ]
    },
    {
      "buildingId": "2",
      "dataViewHeader": [
        {
          "buildingId": "2",
          "title": "Bygning 2",
          "address": "Rugbjergvej 14, 6230 Rødekro",
          "buildingIcon": "carport-garage",
          "description": "Garage (med plads til et eller to køretøjer) (kode:910) | Opført 1968 | 24 m2",
          "isCollapsible": false,
          "showOnMap": true,
          "hasRemoved": true
        }
      ],
      "callout": [
        {
          "content": "Denne bygning er blevet flyttet",
          "hasAction": true,
          "actionLabel": "Annuler",
          "calloutType": "success",
          "actionVariant": "success"
        }
      ]
    },
    {
      "buildingId": "3",
      "dataViewHeader": [
        {
          "buildingId": "3",
          "title": "Teknisk anlæg 1",
          "address": "Rugbjergvej 14, 6230 Rødekro",
          "buildingIcon": "olietank",
          "description": "Tank (kode:1110)",
          "isCollapsible": false,
          "showOnMap": true,
          "hasAdded": true
        }
      ]
    }
  ],
  "hasFlowNav": true
}

Handle: @move-building--has-flow-nav
Varianter (2): Beliggenhed , Med flow navigation
Preview:
- Med layout
- Komponent alene
Filsystem: src/components/pages/retbbr/04-move-building.hbs
Refererer til (10): @sidebar-header, @sidebar-item-property, @sidebar-item-building, @sidebar-toggle, @user-support, @map, @data-view-header, @callout, @flow-nav, @footer