[#44] Added frontend source code

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

@@ -0,0 +1,13 @@
+<template>
+    <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">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'Home',
+})
+</script>

web/src/components/Ivago.vue

@@ -0,0 +1,52 @@
+<template>
+    <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 }}</li>
+        </ul>
+        <p v-else>{{ msg }}</p>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Street, Ivago } from '../api/ivago'
+
+export default defineComponent({
+    name: 'Ivago',
+    data() {
+        return {
+            items: [] as Street[],
+            msg: "",
+            query: "",
+        }
+    },
+    methods: {
+        search() {
+            this.items = []
+            this.msg = "Loading..."
+
+            if (this.query === "") {
+                this.msg = ""
+                return
+            }
+
+            new Ivago(import.meta.env.VITE_ENDPOINT as string)
+                .search(this.query)
+                .then((res: Street[]) => {
+                    this.items = res
+                    this.msg = ""
+                })
+        }
+    }
+})
+</script>
+
+<style scoped>
+#scroll-list {
+    height: 200px;
+    overflow: hidden;
+    overflow-y: auto;
+}
+</style>

web/src/components/Nav.vue

@@ -0,0 +1,43 @@
+<template>
+    <div id="menu-wrapper">
+        <nav id="menu">
+            <router-link to="/">Home</router-link>
+            <router-link to="/ivago">Ivago</router-link>
+        </nav>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'Nav',
+})
+
+</script>
+
+<style scoped>
+#menu-wrapper {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 150px;
+    background-color: #242624;
+    text-align: center;
+}
+
+#menu {
+    margin: 20px;
+}
+
+#menu > a {
+    display: block;
+    width: 100%;
+    color: #5f635f;
+    text-decoration: none;
+}
+#menu > a:hover {
+    color: #c2ccc1;
+}
+</style>