Milestone search

hiddewie · Jul 19, 2024 · c814929 · c814929
1 parent 4e123f0
commit c814929
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 13 deletions.
diff --git a/proxy/css/ui.css b/proxy/css/ui.css
@@ -24,7 +24,7 @@ body {
   font-family: monospace;
   font-size: 0.8em;
 }
-#search-results {
+#search-results, #search-milestones-form {
   display: none;
 }
 #search-results .no-results {

diff --git a/proxy/index.html b/proxy/index.html
@@ -34,7 +34,7 @@ <h5 class="modal-title">Search</h5>
             <a id="search-milestones-tab" class="nav-link" href="javascript:searchMilestones()">Milestones</a>
           </li>
         </ul>
-        <form id="facility-search-form">
+        <form id="search-facilities-form">
           <div class="form-group">
             <label class="mb-0">Search by</label>
             <div>
@@ -58,13 +58,40 @@ <h5 class="modal-title">Search</h5>
           </div>
           <div class="form-group">
             <div class="input-group">
-              <input type="search" id="search" name="term" class="form-control" placeholder="Bruxelles, EAHS, 8000294" autocomplete="no" minlength="2" required>
+              <input type="search" id="facility-term" name="term" class="form-control" placeholder="Bruxelles, EAHS, 8000294" minlength="2" required>
                 <div class="input-group-append">
                   <button class="btn btn-success" type="submit">Search</button>
                 </div>
             </div>
           </div>
         </form>
+        <form id="search-milestones-form">
+          <div class="row">
+              <div class="col">
+                <div class="form-group">
+                  <div class="input-group">
+                    <div class="input-group-prepend">
+                      <label class="input-group-text" for="milestone-ref">Reference</label>
+                    </div>
+                    <input type="text" id="milestone-ref" name="ref" class="form-control" placeholder="6020" required>
+                  </div>
+                </div>
+              </div>
+              <div class="col">
+                <div class="form-group">
+                  <div class="input-group">
+                    <div class="input-group-prepend">
+                      <label class="input-group-text" for="milestone-position">Position</label>
+                    </div>
+                    <input type="number" id="milestone-position" name="position" class="form-control" placeholder="22.7" min="0" step="0.1" required>
+                  </div>
+                </div>
+              </div>
+              <div class="col flex-grow-0">
+                <button class="btn btn-success" type="submit">Search</button>
+              </div>
+            </div>
+        </form>
         <div class="list-group" id="search-results"></div>
       </div>
     </div>

diff --git a/proxy/js/ui.js b/proxy/js/ui.js
@@ -1,8 +1,10 @@
 const searchBackdrop = document.getElementById('search-backdrop');
-const search = document.getElementById('search');
 const searchFacilitiesTab = document.getElementById('search-facilities-tab');
 const searchMilestonesTab = document.getElementById('search-milestones-tab');
-const facilitySearchForm = document.getElementById('facility-search-form');
+const searchFacilitiesForm = document.getElementById('search-facilities-form');
+const searchMilestonesForm = document.getElementById('search-milestones-form');
+const searchFacilityTermField = document.getElementById('facility-term');
+const searchMilestoneRefField = document.getElementById('milestone-ref');
 const searchResults = document.getElementById('search-results');
 const configurationBackdrop = document.getElementById('configuration-backdrop');
 const backgroundSaturationControl = document.getElementById('backgroundSaturation');
@@ -11,7 +13,7 @@ const backgroundRasterUrlControl = document.getElementById('backgroundRasterUrl'
 const legend = document.getElementById('legend')
 const legendMapContainer = document.getElementById('legend-map')
 
-function searchQuery(type, term) {
+function facilitySearchQuery(type, term) {
   const encoded = encodeURIComponent(term)
 
   switch (type) {
@@ -27,15 +29,33 @@ function searchQuery(type, term) {
   }
 }
 
-function searchFor(type, term) {
+function searchForFacilities(type, term) {
   if (!term || term.length < 2) {
     hideSearchResults();
   } else {
-    const queryString = searchQuery(type, term)
+    const queryString = facilitySearchQuery(type, term)
     fetch(`${location.origin}/api/facility?${queryString}`)
       .then(result => result.json())
       .then(result => {
-        console.info('result', result, result.body)
+        console.info('facility search result', result)
+        showSearchResults(result)
+      })
+      .catch(error => {
+        hideSearchResults();
+        hideSearch();
+        console.error(error);
+      });
+  }
+}
+
+function searchForMilestones(ref, position) {
+  if (!ref || !position) {
+    hideSearchResults();
+  } else {
+    fetch(`${location.origin}/api/milestone?ref=${encodeURIComponent(ref)}&position=${encodeURIComponent(position)}`)
+      .then(result => result.json())
+      .then(result => {
+        console.info('milestone search result', result)
         showSearchResults(result)
       })
       .catch(error => {
@@ -65,8 +85,13 @@ function hideSearchResults() {
 
 function showSearch() {
   searchBackdrop.style.display = 'block';
-  search.focus();
-  search.select();
+  if (searchFacilitiesForm.style.display === 'block') {
+    searchFacilityTermField.focus();
+    searchFacilityTermField.select();
+  } else if (searchMilestonesForm.style.display === 'block') {
+    searchMilestoneRefField.focus();
+    searchMilestoneRefField.select();
+  }
 }
 
 function hideSearch() {
@@ -76,11 +101,21 @@ function hideSearch() {
 function searchFacilities() {
   searchFacilitiesTab.classList.add('active')
   searchMilestonesTab.classList.remove('active')
+  searchFacilitiesForm.style.display = 'block';
+  searchMilestonesForm.style.display = 'none';
+  searchFacilityTermField.focus();
+  searchFacilityTermField.select();
+  hideSearchResults();
 }
 
 function searchMilestones() {
   searchFacilitiesTab.classList.remove('active')
   searchMilestonesTab.classList.add('active')
+  searchFacilitiesForm.style.display = 'none';
+  searchMilestonesForm.style.display = 'block';
+  searchMilestoneRefField.focus();
+  searchMilestoneRefField.select();
+  hideSearchResults();
 }
 
 function showConfiguration() {
@@ -102,11 +137,17 @@ function toggleLegend() {
   }
 }
 
-facilitySearchForm.addEventListener('submit', event => {
+searchFacilitiesForm.addEventListener('submit', event => {
+  event.preventDefault();
+  const formData = new FormData(event.target);
+  const data = Object.fromEntries(formData);
+  searchForFacilities(data.type, data.term)
+})
+searchMilestonesForm.addEventListener('submit', event => {
   event.preventDefault();
   const formData = new FormData(event.target);
   const data = Object.fromEntries(formData);
-  searchFor(data.type, data.term)
+  searchForMilestones(data.ref, data.position)
 })
 searchBackdrop.onclick = event => {
   if (event.target === event.currentTarget) {