template/module/journey/leg/drawer.pug

@@ -1,17 +1,50 @@
-.row
-    .input.text-dark(style="width: 100%")
-        input(
-            type="search"
-            @input="search_active"
-            placeholder="Search ... "
-            style="width:85%;"
-        )
-        .spinner(v-if="query.load")
-    ul
-        li(
-            v-for="item in query.res" 
-            :key="item.id" 
+.input.text-dark(style="width: 100%")
+    input#query_input(
+        type="search"
+        @input="search_active"
+        placeholder="Search ... "
+        style="width:85%;"
+    )
+    .spinner(v-if="query.load")
+div(style="width:100%" 
+    v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0")
+    template(v-for="(item, idx) in query.res" )
+        .col-12.bg-white.text-dark(
+            style="display:flex;align-items:center; border-radius:3px;"
+            :key="'q'+idx" 
             @mouseover="drawer_hover_item(item)" 
             @mouseleave="drawer_hover_item()"
             @click="drawer_click_item(item)" )
-            | {{ item.name }}
+            div( v-html="generate_icon(item, 'var(--dark)')")
+            .col-10()
+                | {{ item.name }}
+        .bg-dark.divider(
+            :key="'qdiv'+idx" style="height:1px" )
+    .col-12.bg-white.text-dark(
+        v-if="query.load==false && query.res.length==0"
+        style="display:flex;align-items:center; border-radius:3px;" )
+        div( v-html="generate_icon('star', 'var(--dark)')")
+        .col-10()
+            | Add custom
+
+    .col-12.text-white.text-center(
+        ) {{query.load? `Loading ...` : `Found ${query.res.length} results`}}
+div(style="width:100%" 
+    v-else-if="['flight'].indexOf(query.type)>=0")
+    template(v-for="(item, idx) in query.res" )
+        .col-12.bg-white.text-dark(
+            style="display:flex;align-items:center; border-radius:3px;"
+            :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" )
+div(style="width:100%" v-else)
+    template()
+        .col-12.bg-white.text-dark(
+            style="display:flex;align-items:center; border-radius:3px;")
+        | Unsuppored Query type {{query.type}}