[#44] Added frontend source code

web/src/App.vue

@@ -0,0 +1,27 @@
+<template>
+    <Nav />    
+    <router-view />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Nav from './components/Nav.vue'
+
+export default defineComponent({
+    name: 'App',
+    components: {
+        Nav,
+    },
+})
+</script>
+
+<style>
+#app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+}
+</style>

web/src/api/ivago.ts

@@ -0,0 +1,32 @@
+export class Street {
+    name: string;
+    city: string; 
+
+    constructor(name: string, city: string) {
+        this.name = name;
+        this.city = city;
+    }
+}
+
+export class Ivago {
+    base_url: string;
+
+    constructor(url: string) {
+        this.base_url = url;
+    }
+
+    async search(search_term: string): Promise<Street[]> {
+        var r = await fetch(`${this.base_url}/ivago/search?` + new URLSearchParams({
+            q: search_term,
+        }));
+
+        if (!r.ok) {
+            return Promise.reject();
+        }
+
+        var json = await r.json();
+
+        return json.map((o: {name: string, city: string}) => new Street(o.name, o.city));
+    }
+}
+

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>

web/src/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App)
+app.use(router)
+
+app.mount('#app')

web/src/router.ts

@@ -0,0 +1,21 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Home from './components/Home.vue';
+import Ivago from './components/Ivago.vue';
+
+const routes = [
+    {
+        path: "/",
+        component: Home,
+    },
+    {
+        path: "/ivago",
+        component: Ivago,
+    },
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+export default router;

web/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}