web/package.json

@@ -5,8 +5,8 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview",
-    "lint": "eslint --ext .js,.vue src",
-    "format": "yarn run lint --fix"
+    "lint": "eslint \"src/**\"",
+    "format": "eslint --fix \"src/**\""
   },
   "dependencies": {
     "vue": "^3.0.5",

web/src/App.vue

@@ -1,8 +1,6 @@
 <template>
-    <div>
-        <Nav />
-        <router-view />
-    </div>
+    <Nav />
+    <router-view />
 </template>
 
 <script lang="ts">

web/src/api/ivago.ts

@@ -3,11 +3,11 @@ export interface Street {
     city: string
 }
 
-export async function search (searchTerm: string): Promise<Street[]> {
-    const baseURL = import.meta.env.VITE_ENDPOINT as string
+export async function search (search_term: string): Promise<Street[]> {
+    const base_url = import.meta.env.VITE_ENDPOINT as string
 
-    const r = await fetch(`${baseURL}/ivago/search?` + new URLSearchParams({
-        q: searchTerm
+    const r = await fetch(`${base_url}/ivago/search?` + new URLSearchParams({
+        q: search_term
     }))
 
     if (!r.ok) {

web/src/components/HelloWorld.vue

@@ -0,0 +1,51 @@
+<template>
+    <h1>Fej Frontend</h1>
+
+    <input id="street" type="text" placeholder="street" v-model="street" />
+    <button :onClick="onSubmit">Search</button>
+
+    <ul>
+        <li v-for="res in results">{{res.name}} ({{res.city}})</li>
+    </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Street, Ivago } from '../api/ivago'
+
+export default defineComponent({
+    name: 'HelloWorld',
+    data () {
+        return {
+            street: '',
+            results: [] as Street[]
+        }
+    },
+    methods: {
+        onSubmit () {
+            new Ivago(import.meta.env.VITE_ENDPOINT as string).search(this.$data.street)
+                .then(res => {
+                    this.$data.results = res
+                })
+        }
+    }
+})
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

web/src/components/Home.vue

@@ -1,9 +1,7 @@
 <template>
-    <div>
-        <h1>Fej</h1>
-        <p>Welcome to Fej, my frontend/backend combo.</p>
-        <p>If you can see this, the cicd worked!</p>
-    </div>
+    <h1>Fej</h1>
+    <p>Welcome to Fej, my frontend/backend combo.</p>
+    <p>If you can see this, the cicd worked!</p>
 </template>
 
 <script lang="ts">

web/src/components/Ivago.vue

@@ -1,27 +1,17 @@
 <template>
-    <div>
-        <h1>Ivago</h1>
-        <input
-            v-model="query"
-            v-on:keyup.enter="search"
-            type="text"
-            placeholder="Street..." />
-        <div id="scroll-list">
-            <ul v-if="msg === ''">
-                <li
-                    v-for="item in items"
-                    v-bind:key="`${item.name} (${item.city})`" >
-                    {{ item.name }} ({{ item.city }})
-                </li>
-            </ul>
-            <p v-else>{{ msg }}</p>
-        </div>
+    <h1>Ivago</h1>
+    <input v-model="query" v-on:keyup.enter="search" type="text" placeholder="Street..." />
+    <div id="scroll-list">
+        <ul v-if="msg === ''">
+            <li v-for="item in items">{{ item.name }} ({{ item.city }})</li>
+        </ul>
+        <p v-else>{{ msg }}</p>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { Street, search as ivagoSearch } from '../api/ivago'
+import { Street, search as ivago_search } from '../api/ivago'
 
 export default defineComponent({
     name: 'Ivago',
@@ -42,7 +32,7 @@ export default defineComponent({
                 return
             }
 
-            ivagoSearch(this.query)
+            ivago_search(this.query)
                 .then((res: Street[]) => {
                     this.items = res
                     this.msg = ''