search bars

Travigo · Dec 17, 2024 · ab2e1ff · ab2e1ff
1 parent 32a0671
commit ab2e1ff
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 18 deletions.
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-4">
+  <div class="mt-4 relative">
     <input
       type="text" id="searchTerm"
       :class="searchClasses + ' shadow-md border rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'"
@@ -8,11 +8,30 @@
       v-model="searchTerm"
       v-on:input="searchStops"
     >
+
+    <div 
+      :class="searchClasses + ' absolute top-0 left-0 cursor-pointer border rounded-lg block w-full  dark:text-white'"
+      v-if="selectedResult !== undefined"
+      @click="this.selectedResult = undefined"
+    >
+      <div class="flex">
+        <div class="mt-0.5">
+          <StopIcon :stop="selectedResult" size="4" />
+        </div>
+
+        <div class="flex-auto my-auto font-medium ml-2 dark:text-white">
+          <div>
+            {{ selectedResult.PrimaryName }}
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
   <ul class="rounded-lg bg-white shadow-md p-3 border border-gray-200 dark:bg-gray-800 dark:border-gray-600" v-if="this.results?.stops?.length > 0">
     <li v-for="result in this.results.stops">
-      <router-link
-          :to="{'name': 'stops/view', params: {'id': result.PrimaryIdentifier}}"
+      <a
+        class="cursor-pointer"
+        @click="handleClick(result)"
       >
         <div class="flex">
           <div class="mt-0.5">
@@ -29,7 +48,7 @@
             </div>
           </div>
         </div>
-      </router-link>
+      </a>
     </li>
   </ul>
 </template>
@@ -43,16 +62,18 @@ import StopIcon from "@/components/StopIcon.vue";
 
 export default {
   props: {
+    modelValue: {},
     placeholder: {
       default: ''
     },
     searchClasses: {
       default: ''
     },
     mode: {
-      
+      default: 'link'
     }
   },
+  emits: ['update:modelValue'],
   components: {StopIcon, ServiceIcon},
   computed: {
     search() {
@@ -63,10 +84,42 @@ export default {
     return {
       searchTerm: '',
       loadingResults: false,
-      results: {}
+      results: {},
+      selectedResult: undefined,
     }
   },
+  mounted: function() {
+    if (this.modelValue == "" || this.modelValue === undefined) {
+      return
+    }
+
+    this.searchTerm = this.modelValue + "...."
+
+    axios
+      .get(`${API.URL}/core/stops/${this.modelValue}`)
+      .then(response => {
+        this.searchTerm = ""
+        this.selectedResult = response.data
+      })
+      .catch(error => {
+        console.log(error)
+        // this.error = error
+      })
+      // .finally(() => this.loading = false)
+  },
   methods: {
+    handleClick(result) {
+      console.log(result)
+
+      if (this.mode == 'link') {
+        this.$router.push({ name: 'stops/view', params: {'id': result.PrimaryIdentifier} })
+      } else if(this.mode == 'store') {
+        this.selectedResult = result
+        this.searchTerm = ""
+        this.results = {}
+        this.$emit('update:modelValue', result.PrimaryIdentifier)
+      }
+    },
     searchStops() {
       if (this.searchTerm === '') {
         this.results = []

diff --git a/src/views/Planner/Home.vue b/src/views/Planner/Home.vue
@@ -5,28 +5,25 @@
     </PageTitle>
     <Card>
       <Alert type="warning">
-        <strong>Limited Functionality</strong> Currently must enter the Stop IDs and can only support direct journeys
+        <strong>Limited Functionality</strong> Currently only supports direct journeys
       </Alert>
 
       <form>
         <div class="mb-6">
-          <SearchBar 
+          <SearchBar
+            mode="store"
             placeholder="Origin"
             searchClasses="bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-sm p-2.5 text-gray-900"
-          />
-          <input 
-            type="text" id="origin" 
-            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-            placeholder="Origin" required
             v-model="originStop"
-          >
+          />
         </div>
         <div class="mb-6">
-          <input type="text" id="destination" 
-            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-            placeholder="Destination" required
+          <SearchBar
+            mode="store"
+            placeholder="Destination"
+            searchClasses="bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-sm p-2.5 text-gray-900"
             v-model="destinationStop"
-          >
+          />
         </div>
         <button 
           type="submit"