src/template/module/journey/leg/drawer.pug

@@ -2,49 +2,51 @@
 .input.w-100.text-dark
     input#query_input(
         type="search"
-        @input="search_active"
-        @focus="search_active"
+        @input="search_drawer.search()"
+        @focus="search_drawer.search()"
         placeholder="Search ... "
         style="width:85%;"
-        :disabled="query.note"
-        v-model="query.query"
+        :disabled="search_drawer.is_note()"
+        v-model="search_drawer.query.query"
     )
-    .spinner(v-if="query.load")
+    .spinner(v-if="search_drawer.query.load")
 
-div(v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0")
-    template(v-for="(item, idx) in query.res" )
-        .query-result.col-12.bg-white.text-dark(
-            :key="'q'+idx" 
-            @mouseover="drawer_hover_item(item)" 
-            @mouseleave="drawer_hover_item()"
-            @click="drawer_click_item(item)" )
-            div( v-html="generate_icon(item, 'var(--dark)')")
-            .col-10()
-                | {{ item.name }}
-        .bg-dark.divider(
-            :key="'qdiv'+idx" style="height:1px" )
-    .query-result.col-12.bg-white.text-dark(
-        v-if="query.load==false && query.res.length>=0 && query.query!=''"
-            @click="query.addmarker=true"  )
-        div( v-html="generate_icon('star', 'var(--dark)')")
-        .col-10()
-            | Add custom
+div(v-if="search_drawer.is_query()")
+    div(v-if="['flight'].includes(search_drawer.query.type)")
+        template(v-for="(item, idx) in search_drawer.query.res" )
+            .query-result.col-12.bg-white.text-dark(
+                :key="'q'+idx" 
+                @mouseover="drawer_hover_item(item)" 
+                @mouseleave="drawer_hover_item()"
+                @click="drawer_click_item(item)" )
+                div( v-html="generate_icon('plane', 'var(--dark)')")
+                .col-10()
+                    | {{ item.from  }} => {{item.to}}  
+            .bg-dark.divider(
+                :key="'qdiv'+idx" style="height:1px" )
 
-    .col-12.text-white.text-center(
-        ) {{query.load? `Loading ...` : `Found ${query.res.length} results`}}
-div(v-else-if="['flight'].indexOf(query.type)>=0")
-    template(v-for="(item, idx) in query.res" )
+    div(v-else-if="true")
+        template(v-for="(item, idx) in search_drawer.query.res" )
+            .query-result.col-12.bg-white.text-dark(
+                :key="'q'+idx" 
+                @mouseover="drawer_hover_item(item)" 
+                @mouseleave="drawer_hover_item()"
+                @click="drawer_click_item(item)" )
+                div( v-html="generate_icon(item, 'var(--dark)')")
+                .col-10()
+                    | {{ item.name }}
+            .bg-dark.divider(
+                :key="'qdiv'+idx" style="height:1px" )
         .query-result.col-12.bg-white.text-dark(
-            :key="'q'+idx" 
-            @mouseover="drawer_hover_item(item)" 
-            @mouseleave="drawer_hover_item()"
-            @click="drawer_click_item(item)" )
-            div( v-html="generate_icon('plane', 'var(--dark)')")
+            v-if="!search_drawer.query.load && search_drawer.query.res && search_drawer.is_query()"
+                @click="search_drawer.query.addmarker=true"  )
+            div( v-html="generate_icon('star', 'var(--dark)')")
             .col-10()
-                | {{ item.from  }} => {{item.to}}  
-        .bg-dark.divider(
-            :key="'qdiv'+idx" style="height:1px" )
-div(v-else)
-    template()
-        .query-result.col-12.bg-white.text-dark()
-        | Unsuppored Query type {{query.type}}
+                | Add custom
+
+        .col-12.text-white.text-center(
+            ) {{search_drawer.query.load? `Loading ...` : `Found ${search_drawer.query.res.length} results`}}
+    div(v-else)
+        template()
+            .query-result.col-12.bg-white.text-dark()
+            | Unsuppored Query type {{search_drawer.query.type}}