Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add search by map area and removed search table, some cosmetic fixes #24

Merged
merged 1 commit into from
Jul 25, 2024
Merged

Add search by map area and removed search table, some cosmetic fixes #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
.parent {
/* margin: 1rem; */
/* padding: 2rem 2rem; */
text-align: center;
text-align: left;
}
.child {
display: inline-block;
padding: 1rem ;
/* padding: 1rem ; */
vertical-align: middle;
}
74 changes: 51 additions & 23 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,10 +269,8 @@ function App () {
}

function searchTable() {
var input = document.getElementById("tableSearchInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("applicationTable");
var tr = table.getElementsByTagName("tr");
var input = document.getElementById("tableSearchInput").value.toUpperCase();
var tr = document.getElementById("applicationTable").getElementsByTagName("tr");

for (let i = 0; i < tr.length; i++) {
var tdAddr = tr[i].getElementsByTagName("td")[0];
Expand All @@ -281,7 +279,7 @@ function App () {
var tdStat = tr[i].getElementsByTagName("td")[4];

if (tdAddr) {
if (tdAddr.innerText.toUpperCase().indexOf(filter) > -1 || tdRef.innerText.toUpperCase().indexOf(filter) > -1 || tdDesc.innerText.toUpperCase().indexOf(filter) > -1 ) {
if (tdAddr.innerText.toUpperCase().indexOf(input) > -1 || tdRef.innerText.toUpperCase().indexOf(input) > -1 || tdDesc.innerText.toUpperCase().indexOf(input) > -1 ) {
if (document.getElementById("filterSelect").value === "None") {
tr[i].style.display = "";
}
Expand Down Expand Up @@ -331,7 +329,7 @@ function App () {
}
};

const search = async() => {
const searchMapInput = async() => {
if (!map) {return}
document.getElementById("errorMsg").innerHTML = "";
document.getElementById("errorMsg").style.marginTop = "5px";
Expand Down Expand Up @@ -364,6 +362,41 @@ function App () {
}
};

const searchMapArea = async() => {
if (!map) { return; }
var toDisplay = [];

map.eachLayer(function (layer) {
if (layer._latlng === undefined) { return; }

if (map.getBounds().contains(layer._latlng)) {
toDisplay.push(layer.feature.properties.reference);
}

console.log(toDisplay)

var tr = document.getElementById("applicationTable").getElementsByTagName("tr");
for (let i = 0; i < tr.length; i++) {
var td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (toDisplay.includes(td.innerText)) {
tr[i].style.display = "";
}
else {
tr[i].style.display = "none";
}
}
}
});
}

function resetTable() {
var tr = document.getElementById("applicationTable").getElementsByTagName("tr");
for (let i = 0; i < tr.length; i++) {
tr[i].style.display = "";
}
}

const bindSearchToEnter = () => {
var input = document.getElementById("searchInput");
if (input === null) { return }
Expand All @@ -388,10 +421,10 @@ function App () {
<HintText>Enter a reference number or postcode</HintText>
<SearchBox>
<SearchBox.Input id="searchInput" placeholder="Type here" />
<SearchBox.Button id="searchBtn" onClick={search} />
<SearchBox.Button id="searchBtn" onClick={searchMapInput} />
</SearchBox>
<ErrorText id="errorMsg"></ErrorText>
<div data-testid="mapContainer" style={{ height: 'calc(100% - 30px)', position: 'relative' }} >
<div data-testid="mapContainer" style={{ height: 'calc(100% - 30px)', width: '100%', position: 'relative' }} >
<MapContainer ref={setMap} center={[51.505, -0.09]} zoom={13}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
Expand All @@ -401,22 +434,19 @@ function App () {
<LocationMarker />
</MapContainer>
</div>
</div>
<div>
<br />
<details className="govuk-details">
<summary className="govuk-details__summary">
<span className="govuk-details__summary-text">
View applications as a table
</span>
</summary>
<div>
<button className="govuk-button govuk-button--secondary" onClick={searchMapArea}>Search this area</button>
<button className="govuk-button govuk-button--secondary" onClick={resetTable} style={{marginLeft: "1em"}}>Reset table</button>
</div>
</div>
<div className="parent">
<div className="govuk-form-group child">
{/* <div className="govuk-form-group child">
<label className="govuk-label">
Search
</label>
<input className="govuk-input govuk-input--width-20" id="tableSearchInput" type="text" onKeyUp={searchTable}></input>
</div>
</div> */}
<div className="govuk-form-group child">
<label className="govuk-label">
Filter by status
Expand All @@ -432,14 +462,14 @@ function App () {
<option value="Returned">Returned</option>
</select>
</div>
<div className="govuk-form-group child">
<div className="govuk-form-group child" style={{marginLeft: "1em"}}>
<label className="govuk-label">
Sort by
</label>
<select className="govuk-select" id="sortSelect" name="sortSelect" onChange={sortTable} defaultValue={"None"}>
<option value="None">None</option>
<option value="date_asc">Date received (asc)</option>
<option value="date_des">Date received (desc)</option>
<option value="date_asc">Oldest first</option>
<option value="date_des">Newest first</option>
<option value="ref">Reference number</option>
</select>
</div>
Expand All @@ -457,8 +487,6 @@ function App () {
</thead>
<tbody className="govuk-table__body" id="applicationTableBody"></tbody>
</table>
</details>
</div>
</div>
);
}
Expand Down
Loading