Skip to content

Commit

Permalink
Merge pull request #212 from PDOK/features-form
Browse files Browse the repository at this point in the history 
feat(html): add explicit submit/reset buttons for feature filters ins…
  • Loading branch information
@rkettelerij
rkettelerij authored Jul 5, 2024
2 parents 4bc455d + 07f4d97 commit 344e21f
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 31 deletions.
77 changes: 56 additions & 21 deletions internal/ogc/features/templates/features.go.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@

<script>
{{- /* generic function to update query string parameters */ -}}
function updateQueryString(name, value, skipReload) {
const url = new URL(window.location.href)
function updateQueryString(name, value, existingUrl) {
const url = existingUrl ? new URL(existingUrl) : new URL(window.location.href)
url.searchParams.delete('cursor') // when filters change, we can't continue pagination.
if (value) {
if (name === 'datetime') {
Expand All @@ -18,14 +18,49 @@
} else {
url.searchParams.delete(name)
}
return url.toString()
}

function callUrl(url, skipReload) {
if (skipReload) {
window.history.pushState({}, '', url.toString()) // only change the url but don't reload the page
window.history.pushState({}, '', url) // only change the url but don't reload the page
} else {
window.location.href = url.toString()
window.location.href = url
}
return url.toString()
}

function submitForm(event) {
event.preventDefault()

// Gather form values
const fd = new FormData(event.target)
const srsValue = fd.get('srs')
const datetimeValue = fd.get('datetime')
const limitValue = fd.get('limit')
const propertyFilters = {}
{{ range $pfName, $pf := .Params.ConfiguredPropertyFilters }}
propertyFilters["{{ $pfName }}"] = fd.get("{{ $pfName }}")
{{ end }}

// Build url with form values
let url = updateQueryString('crs', srsValue)
url = updateQueryString('datetime', datetimeValue, url)
url = updateQueryString('limit', limitValue, url)
for (const [key, value] of Object.entries(propertyFilters)) {
url = updateQueryString(key, value, url)
}

callUrl(url)
}

function resetForm() {
callUrl("{{ $baseUrl }}/collections/{{ .Params.CollectionID }}/items")
}

window.addEventListener("load", function() {
document.getElementById('form').addEventListener('submit', submitForm)
document.getElementById('form').addEventListener('reset', resetForm)
});
</script>

<hgroup>
Expand All @@ -51,12 +86,12 @@ <h2 class="card-header h5">
</div>

<!-- filters -->
<form class="col-12 mt-4">
<form id="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)">
<select id="srs-select" name="srs" class="form-select">
<option value="http://www.opengis.net/def/crs/OGC/1.3/CRS84" selected>
http://www.opengis.net/def/crs/OGC/1.3/CRS84
</option>
Expand All @@ -71,18 +106,16 @@ <h2 class="card-header h5">
<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)">
<input id="referencedate-input" name="datetime" type="date" class="form-control"
value="{{ if .Params.ReferenceDate }}{{ .Params.ReferenceDate | date "2006-01-02" }}{{ end }}">
</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)">
<select id="limit-select" name="limit" class="form-select" aria-label="Limit selection">
<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 */}}
Expand All @@ -100,24 +133,24 @@ <h2 class="card-header h5">
title="{{ $pfName | title }}">{{ $pfName | title }}</label>
<div class="col-sm">
{{ if and $pf $pf.AllowedValues }}
<select id="{{ $pfName }}-input" class="form-select"
onchange="updateQueryString('{{ $pfName }}', this.value)">
<select id="{{ $pfName }}-input" name="{{ $pfName }}" class="form-select">
<!-- default to empty value -->
<option></option>
{{ range $value := $pf.AllowedValues }}
<option value="{{ $value }}" {{if eq (index $.Params.PropertyFilters $pfName) $value }}selected{{end}}>{{ $value }}</option>
{{ end }}
</select>
{{ else }}
<input id="{{ $pfName }}-input" type="text" class="form-control"
<input id="{{ $pfName }}-input" name="{{ $pfName }}" type="text" class="form-control"
{{/* get the actual value as supplied by the user from the PropertyFilters,
not the ConfiguredPropertyFilters (which doesn't have this info) */}}
value="{{ index $.Params.PropertyFilters $pfName }}"
onchange="updateQueryString('{{ $pfName }}', this.value)">
value="{{ index $.Params.PropertyFilters $pfName }}">
{{ end }}
</div>
</div>
{{ end }}
<button type="submit" class="btn btn-primary mt-2"> {{ i18n "ApplyFilters" }}</button>
<button type="reset" class="btn btn-secondary mt-2">{{ i18n "ResetFilter" }}</button>
</form>
</div>

Expand Down Expand Up @@ -150,11 +183,13 @@ <h2 class="card-header h5">

{{ if $mapSheetProperties }}
viewer.addEventListener('box', selectBox => {
let newUrl = new URL(updateQueryString('bbox', selectBox.detail, true))
newUrl.searchParams.set('f', 'json')
let newUrl = new URL(updateQueryString('bbox', selectBox.detail))
callUrl(newUrl.toString(), true)

// when moving the map to load additional sheets we don't want to do a full page reload (like we
// do when one draws a bbox). Therefor we update the browser URL + link references (like GeoJSON/JSON-FG)
// on the page manually.
newUrl.searchParams.set('f', 'json')
viewer.setAttribute('items-url', newUrl.toString())
{{ range $formatKey, $formatName := .AvailableFormats }}
if (document.getElementById("format-{{ $formatKey }}")) {
Expand All @@ -164,11 +199,11 @@ <h2 class="card-header h5">
{{ end }}
})
viewer.addEventListener('activeFeature', activeFeature => {
updateQueryString("{{ $mapSheetProperties.MapSheetID }}", activeFeature.detail.get('{{ $mapSheetProperties.MapSheetID }}'))
callUrl(updateQueryString("{{ $mapSheetProperties.MapSheetID }}", activeFeature.detail.get('{{ $mapSheetProperties.MapSheetID }}')))
})
{{ else }}
viewer.addEventListener('box', selectBox => {
updateQueryString('bbox', selectBox.detail)
callUrl(updateQueryString('bbox', selectBox.detail))
})
{{ end }}
</script>
Expand Down
16 changes: 6 additions & 10 deletions internal/ogc/features/testdata/expected_straatnaam_silodam.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
<div class="row mb-2">
<label for="postcode-input" class="col-sm-3 col-form-label fw-bold text-truncate"
title="Postcode">Postcode</label>
<label for="postcode-input" class="col-sm-3 col-form-label fw-bold text-truncate" title="Postcode">Postcode</label>
<div class="col-sm">

<input id="postcode-input" type="text" class="form-control"
value=""
onchange="updateQueryString('postcode', this.value)">
<input id="postcode-input" name="postcode" type="text" class="form-control"
value="">

</div>
</div>
<div class="row mb-2">
<label for="straatnaam-input" class="col-sm-3 col-form-label fw-bold text-truncate"
title="Straatnaam">Straatnaam</label>
<label for="straatnaam-input" class="col-sm-3 col-form-label fw-bold text-truncate" title="Straatnaam">Straatnaam</label>
<div class="col-sm">

<input id="straatnaam-input" type="text" class="form-control"
value="Silodam"
onchange="updateQueryString('straatnaam', this.value)">
<input id="straatnaam-input" name="straatnaam" type="text" class="form-control"
value="Silodam">

</div>
</div>

0 comments on commit 344e21f

Please sign in to comment.