github.com/PDOK/gokoala@v0.50.6/internal/ogc/features/templates/features.go.html

{{- /*gotype: github.com/PDOK/gokoala/internal/engine.TemplateData*/ -}}
{{define "content"}}
{{ $cfg := .Config }}
{{ $baseUrl := $cfg.BaseURL }}

<script>
    {{- /* generic function to update query string parameters */ -}}
    function updateQueryString(name, value) {
        const url = new URL(window.location.href);
        url.searchParams.delete('cursor'); // when filters change, we can't continue pagination.
        if (value) {
          if (name === 'datetime') {
            url.searchParams.set(name, new Date(value).toISOString()); // input is %Y-%m-%d, but parameter value should be RFC3339
          } else {
            url.searchParams.set(name, value);
          }
        } else {
          url.searchParams.delete(name);
        }
        window.location.href = url.toString();
    }

</script>

<hgroup>
    <h1 class="title h2" id="title">{{ .Config.Title }} - {{ if and .Params.Metadata .Params.Metadata.Title }}{{ .Params.Metadata.Title }}{{ else }}{{ .Params.CollectionID }}{{ end }}</h1>
</hgroup>

<section class="row py-3">
    <div class="col-md-6 col-sm-12">
        <!-- description -->
        <div class="card">
            <h2 class="card-header h5">
                {{ if and .Params.Metadata .Params.Metadata.Title }}
                    {{ .Params.Metadata.Title }}
                {{ else }}
                    {{ .Params.CollectionID }}
                {{ end }}
            </h2>
            <div class="card-body">
                {{ if and .Params.Metadata .Params.Metadata.Description }}
                    {{ markdown .Params.Metadata.Description }}
                {{ end }}
            </div>
        </div>

        <!-- filters -->
        <form class="col-12 mt-4">
            <!-- projection -->
            <div class="row mb-2">
                <label for="srs-select" class="col-sm-3 col-form-label fw-bold">{{ i18n "Projection" }}</label>
                <div class="col-sm">
                    <select id="srs-select" class="form-select" onchange="updateQueryString('crs', this.value)">
                        <option value="http://www.opengis.net/def/crs/OGC/1.3/CRS84" selected>
                            http://www.opengis.net/def/crs/OGC/1.3/CRS84
                        </option>
                        {{ range $index, $srs := .Config.OgcAPI.Features.ProjectionsForCollection $.Params.CollectionID }}
                        <option value=http://www.opengis.net/def/crs/EPSG/0/{{ trimPrefix "EPSG:" $srs }}>http://www.opengis.net/def/crs/EPSG/0/{{ $srs }}</option>
                        {{ end }}
                    </select>
                </div>
            </div>
            {{ if and .Params.Metadata .Params.Metadata.TemporalProperties }}
            <!-- datetime -->
            <div class="row mb-2">
                <label for="referencedate-input" class="col-sm-3 col-form-label fw-bold">{{ i18n "ReferenceDate" }}</label>
                <div class="col-sm">
                    <input id="referencedate-input" type="date" class="form-control"
                           value="{{ if .Params.ReferenceDate }}{{ .Params.ReferenceDate | date "2006-01-02" }}{{ end }}"
                           onchange="updateQueryString('datetime', this.value)">
                </div>
            </div>
            {{ end }}
            <!-- limit -->
            <div class="row mb-2">
                <label for="limit-select" class="col-sm-3 col-form-label fw-bold">{{ i18n "Limit" }}</label>
                <div class="col-sm">
                    <select id="limit-select" class="form-select" aria-label="Limit selection"
                            onchange="updateQueryString('limit', this.value)">
                        <option value="10" {{if eq .Params.Limit 10 }}selected{{end}}>10 {{ i18n "Items" }}</option>
                        <option value="100" {{if eq .Params.Limit 100 }}selected{{end}}>100 {{ i18n "Items" }}</option>
                        {{/* see Limit.Max in config.go, can't be smaller than 100 */}}
                        <option value="{{ $cfg.OgcAPI.Features.Limit.Max }}" {{if eq .Params.Limit
                                $cfg.OgcAPI.Features.Limit.Max }}selected{{end}}>{{ $cfg.OgcAPI.Features.Limit.Max }} {{
                            i18n "Items" }} ({{ i18n "Max" }})
                        </option>
                    </select>
                </div>
            </div>
            <!-- property filters -->
            {{- range $propFilter := $cfg.OgcAPI.Features.PropertyFiltersForCollection $.Params.CollectionID -}}
            <div class="row mb-2">
                <label for="{{ $propFilter.Name }}-input" class="col-sm-3 col-form-label fw-bold text-truncate"
                       title="{{ $propFilter.Name | title }}">{{ $propFilter.Name | title }}</label>
                <div class="col-sm">
                    <input id="{{ $propFilter.Name }}-input" type="text" class="form-control"
                           value="{{ index $.Params.PropertyFilters $propFilter.Name }}"
                           onchange="updateQueryString('{{ $propFilter.Name }}', this.value)">
                </div>
            </div>
            {{ end }}
        </form>
    </div>

    <!-- map viewer -->
    <div class="col-md-6 col-sm-12">
        <link rel="stylesheet" type="text/css" href="view-component/styles.css">
        <script type="text/javascript" src="view-component/main.js"></script>
        <script type="text/javascript" src="view-component/polyfills.js"></script>
        <script type="text/javascript" src="view-component/runtime.js"></script>
        <app-feature-view id="viewer" background-map="{{ $cfg.OgcAPI.Features.Basemap }}" class="card"></app-feature-view>
        <script type="module">
          const url = new URL(window.location.href)
          url.searchParams.set('f','json');
          const viewer = document.getElementById('viewer');
          viewer.setAttribute('items-url', url);

          if (url.searchParams.get('crs') !== null) {
            let crs = url.searchParams.get('crs');
            document.getElementById('srs-select').value = crs;
            viewer.setAttribute('projection', crs)
          }

          viewer.addEventListener('box', selectbox => {
            updateQueryString("bbox", selectbox.detail)
          })
        </script>
        <noscript>Enable Javascript to view features on a map</noscript>
    </div>
</section>

<section class="row">
    <!-- pagination -->
    <div class="col-md-12">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a class="page-link  {{if not .Params.Cursor.HasPrev }}disabled{{end}}" href="{{ .Params.PrevLink }}" aria-label="{{ i18n "Prev" }}">
                        <span aria-hidden="true">&laquo;</span>
                        {{ i18n "Prev" }}
                    </a>
                </li>
                <li>
                    <a class="page-link {{if not .Params.Cursor.HasNext }}disabled{{end}}" href="{{ .Params.NextLink }}" aria-label="{{ i18n "Next" }}">
                        {{ i18n "Next" }}
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- results/features -->
    <div class="col-md-12">
        {{ range $feat := .Params.Features }}
        <table class="table table-striped">
            <thead>
            <tr>
                <th colspan="2"><a href="{{ $baseUrl }}/collections/{{ $.Params.CollectionID }}/items/{{ $feat.ID }}" aria-label="{{ i18n "To" }} feature {{ $feat.ID }}">{{ $feat.ID }}</a></th>
            </tr>
            </thead>
            <tbody>
            {{ range $key, $value := $feat.Properties }}
            <tr>
                <td class="w-20">{{ $key }}</td>
                <td>{{ $value }}</td>
            </tr>
            {{ end }}
            </tbody>
        </table>
        {{ end }}
    </div>
</section>
{{end}}