Show a tooltip when disabling the lookup button on status page
And fix some auto-formatting
This commit is contained in:
parent
49b10a7d7e
commit
d464a5fbd0
3 changed files with 121 additions and 80 deletions
|
|
@ -164,24 +164,23 @@ class AddressOrReportInput extends HTMLElement {
|
|||
this.shadowRoot.querySelectorAll('.suggestion-item').forEach(el => {
|
||||
el.addEventListener('click', e => {
|
||||
const type = el.dataset.type;
|
||||
let detail = null;
|
||||
if (type == "report") {
|
||||
const index = parseInt(el.dataset.index);
|
||||
const report = this._reports[index];
|
||||
this.value = _formatReportID(report.id);
|
||||
detail = this._reports[index];
|
||||
this.value = _formatReportID(detail.id);
|
||||
this._suggestionsContainer.innerHTML = "";
|
||||
} else if (type == "address") {
|
||||
const index = parseInt(el.dataset.index);
|
||||
const address = this._addresses[index];
|
||||
this.SetValue(address);
|
||||
detail = this._addresses[index];
|
||||
this.SetValue(detail);
|
||||
// Dispatch custom event
|
||||
this.dispatchEvent(new CustomEvent('address-selected', {
|
||||
bubbles: true,
|
||||
composed: true, // Allows event to cross shadow DOM boundary
|
||||
detail: {
|
||||
location: address
|
||||
}
|
||||
}));
|
||||
}
|
||||
this.dispatchEvent(new CustomEvent('suggestion-selected', {
|
||||
bubbles: true,
|
||||
composed: true, // Allows event to cross shadow DOM boundary
|
||||
detail: detail,
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<link rel="icon" href="/static/favicon-rmo.ico" type="image/x-icon" />
|
||||
{{ block "extraheader" . }}{{ end }}
|
||||
<script>
|
||||
var tooltipByElementId = {};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var popoverTriggerList = [].slice.call(
|
||||
document.querySelectorAll('[data-bs-toggle="popover"]'),
|
||||
|
|
@ -28,7 +29,12 @@
|
|||
document.querySelectorAll('[data-bs-toggle="tooltip"]'),
|
||||
);
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
let t = new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
if (tooltipTriggerEl.id != "") {
|
||||
tooltipByElementId[tooltipTriggerEl.id] = t;
|
||||
console.log("added tooltip to", tooltipTriggerEl.id);
|
||||
}
|
||||
return t;
|
||||
});
|
||||
console.log("Initialized ", tooltipTriggerList.length, " tooltips");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
{{template "base.html" .}}
|
||||
{{ template "base.html" . }}
|
||||
|
||||
{{define "title"}}Status{{end}}
|
||||
{{define "extraheader"}}
|
||||
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
|
||||
<script src="/static/js/address-or-report-suggestion.js"></script>
|
||||
<script src="/static/js/geocode.js"></script>
|
||||
<script src="/static/js/location.js"></script>
|
||||
<script src="/static/js/map-multipoint.js"></script>
|
||||
<script src="/static/js/report-table.js"></script>
|
||||
{{ define "title" }}Status{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js"></script>
|
||||
<script src="/static/js/address-or-report-suggestion.js"></script>
|
||||
<script src="/static/js/geocode.js"></script>
|
||||
<script src="/static/js/location.js"></script>
|
||||
<script src="/static/js/map-multipoint.js"></script>
|
||||
<script src="/static/js/report-table.js"></script>
|
||||
<script>
|
||||
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
|
||||
var markers = [];
|
||||
|
|
@ -46,13 +46,16 @@ function handleLookupFormSubmit(e) {
|
|||
|
||||
function maybeEnableLookupButton(e) {
|
||||
const lookupButton = document.getElementById("lookup");
|
||||
const lookupButtonTooltip = tooltipByElementId["lookup-tooltip"];
|
||||
const reportId = e.target.value.replace(/-/g, "");
|
||||
if (reportId.length == 12) {
|
||||
lookupButton.disabled = true;
|
||||
lookupButton.classList.add("disabled");
|
||||
} else {
|
||||
lookupButton.disabled = false;
|
||||
lookupButton.classList.remove("disabled");
|
||||
lookupButtonTooltip.disable()
|
||||
} else {
|
||||
lookupButton.disabled = true;
|
||||
lookupButton.classList.add("disabled");
|
||||
lookupButtonTooltip.enable()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -137,6 +140,7 @@ function onLoad() {
|
|||
window.location = "/status/" + e.detail.reportId;
|
||||
})
|
||||
|
||||
document.querySelector("address-or-report-input").addEventListener("suggestion-selected", maybeEnableLookupButton);
|
||||
document.querySelector("address-or-report-input").addEventListener("input", maybeEnableLookupButton);
|
||||
document.getElementById("lookup-form").addEventListener("submit", handleLookupFormSubmit);
|
||||
}
|
||||
|
|
@ -161,71 +165,104 @@ function renderReports(features) {
|
|||
}
|
||||
document.addEventListener('DOMContentLoaded', onLoad);
|
||||
</script>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
{{if (eq .District nil)}}
|
||||
{{template "header-rmo" .}}
|
||||
{{else}}
|
||||
{{template "header-district" .District}}
|
||||
{{end}}
|
||||
<div class="container my-4">
|
||||
<!-- Search Box -->
|
||||
<div class="card search-box mb-4">
|
||||
<div class="card-body">
|
||||
<form class="row g-3 align-items-center" action="#" id="lookup-form"/>
|
||||
<div class="col-md-9">
|
||||
<address-or-report-input
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
{{ if (eq .District nil) }}
|
||||
{{ template "header-rmo" . }}
|
||||
{{ else }}
|
||||
{{ template "header-district" .District }}
|
||||
{{ end }}
|
||||
<div class="container my-4">
|
||||
<!-- Search Box -->
|
||||
<div class="card search-box mb-4">
|
||||
<div class="card-body">
|
||||
<form class="row g-3 align-items-center" action="#" id="lookup-form">
|
||||
<div class="col-md-9">
|
||||
<address-or-report-input
|
||||
api-key="{{ .MapboxToken }}"
|
||||
name="address-or-report"
|
||||
placeholder="Enter a report ID, address, neighborhood, or zip code"
|
||||
></address-or-report-input>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<span
|
||||
data-bs-toggle="tooltip"
|
||||
id="lookup-tooltip"
|
||||
title="You can look up a report once you type in the full report ID. Start typing and I'll suggest complete IDs"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-lg w-100 disabled"
|
||||
disabled
|
||||
id="lookup"
|
||||
>
|
||||
Lookup Report by ID
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check custom-circle-checkbox">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="checkboxNuisance"
|
||||
data-color="danger"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<button type="submit" class="btn btn-primary btn-lg w-100 disabled" disabled id="lookup">Lookup</button>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check custom-circle-checkbox">
|
||||
<input class="form-check-input" type="checkbox" id="checkboxNuisance" data-color="danger">
|
||||
<label class="form-check-label" for="checkboxNuisance">Mosquito Nuisance</label>
|
||||
</div>
|
||||
<label class="form-check-label" for="checkboxNuisance"
|
||||
>Mosquito Nuisance</label
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-check custom-circle-checkbox">
|
||||
<input class="form-check-input" type="checkbox" id="checkboxWater" data-color="success">
|
||||
<label class="form-check-label" for="checkboxWater">Standing Water</label>
|
||||
<div class="form-check custom-circle-checkbox">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="checkboxWater"
|
||||
data-color="success"
|
||||
/>
|
||||
<label class="form-check-label" for="checkboxWater"
|
||||
>Standing Water</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="mb-0"><i class="bi bi-pin-map-fill me-2"></i>Reports Map</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<map-multipoint
|
||||
<!-- Map Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="mb-0"><i class="bi bi-pin-map-fill me-2"></i>Reports Map</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<map-multipoint
|
||||
api-key="{{ .MapboxToken }}"
|
||||
latitude="36.3"
|
||||
longitude="-119.2"
|
||||
tegola="{{.URL.Tegola}}"
|
||||
tegola="{{ .URL.Tegola }}"
|
||||
zoom="9"
|
||||
/></map-multipoint>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Section -->
|
||||
<div class="card">
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="bi bi-geo-fill me-2"></i>Reports Near You</h5>
|
||||
<span class="badge bg-light text-dark" id="report-count">- Reports Found</span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<report-table />
|
||||
></map-multipoint>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
|
||||
<!-- Results Section -->
|
||||
<div class="card">
|
||||
<div
|
||||
class="card-header bg-primary text-white d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-geo-fill me-2"></i>Reports Near You
|
||||
</h5>
|
||||
<span class="badge bg-light text-dark" id="report-count"
|
||||
>- Reports Found</span
|
||||
>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<report-table />
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="card-footer">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center mb-0">
|
||||
|
|
@ -241,7 +278,6 @@ document.addEventListener('DOMContentLoaded', onLoad);
|
|||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
-->
|
||||
--></div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue