147 lines
4.6 KiB
TypeScript
147 lines
4.6 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
|
|
|
|
import type * as globalTypes from '../types/globalTypes'
|
|
import type * as recordTypes from '../types/recordTypes'
|
|
|
|
import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types'
|
|
|
|
declare const cityssm: cityssmGlobal
|
|
;(() => {
|
|
const los = exports.los as globalTypes.LOS
|
|
|
|
const maps: recordTypes.Map[] = exports.maps
|
|
|
|
const searchFilterElement = document.querySelector(
|
|
'#searchFilter--map'
|
|
) as HTMLInputElement
|
|
|
|
const searchResultsContainerElement = document.querySelector(
|
|
'#container--searchResults'
|
|
) as HTMLElement
|
|
|
|
function renderResults(): void {
|
|
searchResultsContainerElement.innerHTML = los.getLoadingParagraphHTML(
|
|
`Loading ${los.escapedAliases.Maps}...`
|
|
)
|
|
|
|
let searchResultCount = 0
|
|
const searchResultsTbodyElement = document.createElement('tbody')
|
|
|
|
const filterStringSplit = searchFilterElement.value
|
|
.trim()
|
|
.toLowerCase()
|
|
.split(' ')
|
|
|
|
for (const map of maps) {
|
|
const mapSearchString = `${map.mapName ?? ''} ${
|
|
map.mapDescription ?? ''
|
|
} ${map.mapAddress1 ?? ''} ${map.mapAddress2 ?? ''}`.toLowerCase()
|
|
|
|
let showMap = true
|
|
|
|
for (const filterStringPiece of filterStringSplit) {
|
|
if (!mapSearchString.includes(filterStringPiece)) {
|
|
showMap = false
|
|
break
|
|
}
|
|
}
|
|
|
|
if (!showMap) {
|
|
continue
|
|
}
|
|
|
|
searchResultCount += 1
|
|
|
|
searchResultsTbodyElement.insertAdjacentHTML(
|
|
'beforeend',
|
|
'<tr>' +
|
|
('<td>' +
|
|
'<a class="has-text-weight-bold" href="' +
|
|
los.getMapURL(map.mapId) +
|
|
'">' +
|
|
cityssm.escapeHTML(
|
|
map.mapName! === '' ? '(No Name)' : map.mapName!
|
|
) +
|
|
'</a><br />' +
|
|
'<span class="is-size-7">' +
|
|
cityssm.escapeHTML(map.mapDescription ?? '') +
|
|
'</span>' +
|
|
'</td>') +
|
|
('<td>' +
|
|
(map.mapAddress1
|
|
? cityssm.escapeHTML(map.mapAddress1) + '<br />'
|
|
: '') +
|
|
(map.mapAddress2
|
|
? cityssm.escapeHTML(map.mapAddress2) + '<br />'
|
|
: '') +
|
|
(map.mapCity || map.mapProvince
|
|
? cityssm.escapeHTML(map.mapCity ?? '') +
|
|
', ' +
|
|
cityssm.escapeHTML(map.mapProvince ?? '') +
|
|
'<br />'
|
|
: '') +
|
|
(map.mapPostalCode ? cityssm.escapeHTML(map.mapPostalCode) : '') +
|
|
'</td>') +
|
|
('<td>' + cityssm.escapeHTML(map.mapPhoneNumber ?? '') + '</td>') +
|
|
'<td class="has-text-centered">' +
|
|
(map.mapLatitude && map.mapLongitude
|
|
? '<span data-tooltip="Has Geographic Coordinates"><i class="fas fa-map-marker-alt" aria-label="Has Geographic Coordinates"></i></span>'
|
|
: '') +
|
|
'</td>' +
|
|
'<td class="has-text-centered">' +
|
|
(map.mapSVG
|
|
? '<span data-tooltip="Has Image"><i class="fas fa-image" aria-label="Has Image"></i></span>'
|
|
: '') +
|
|
'</td>' +
|
|
('<td class="has-text-right">' +
|
|
'<a href="' +
|
|
los.urlPrefix +
|
|
'/lots?mapId=' +
|
|
map.mapId +
|
|
'">' +
|
|
map.lotCount +
|
|
'</a>' +
|
|
'</td>') +
|
|
'</tr>'
|
|
)
|
|
}
|
|
|
|
searchResultsContainerElement.innerHTML = ''
|
|
|
|
if (searchResultCount === 0) {
|
|
searchResultsContainerElement.innerHTML = `<div class="message is-info">
|
|
<p class="message-body">There are no ${los.escapedAliases.maps} that meet the search criteria.</p>
|
|
</div>`
|
|
} else {
|
|
const searchResultsTableElement = document.createElement('table')
|
|
|
|
searchResultsTableElement.className =
|
|
'table is-fullwidth is-striped is-hoverable has-sticky-header'
|
|
|
|
searchResultsTableElement.innerHTML = `<thead><tr>
|
|
<th>${los.escapedAliases.Map}</th>
|
|
<th>Address</th>
|
|
<th>Phone Number</th>
|
|
<th class="has-text-centered">Coordinates</th>
|
|
<th class="has-text-centered">Image</th>
|
|
<th class="has-text-right">${los.escapedAliases.Lot} Count</th>
|
|
</tr></thead>`
|
|
|
|
searchResultsTableElement.append(searchResultsTbodyElement)
|
|
|
|
searchResultsContainerElement.append(searchResultsTableElement)
|
|
}
|
|
}
|
|
|
|
searchFilterElement.addEventListener('keyup', renderResults)
|
|
|
|
document
|
|
.querySelector('#form--searchFilters')!
|
|
.addEventListener('submit', (formEvent) => {
|
|
formEvent.preventDefault()
|
|
renderResults()
|
|
})
|
|
|
|
renderResults()
|
|
})()
|