Add template

frontend/src/App.vue

@@ -0,0 +1,35 @@
+<template>
+    <div id="app">
+        <img alt="TU Wien" src="./assets/dsg_logo.png">
+        <HelloWorld/>
+    </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator';
+import HelloWorld from './components/HelloWorld.vue';
+
+@Component({
+  components: {
+    HelloWorld,
+  },
+})
+export default class App extends Vue {
+}
+</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;
+    }
+  #app img {
+    width: 450px;
+    height: 75px;
+      margin-bottom: 2em;
+  }
+</style>

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="hello">
+        <h1>Advanced Internet Computing 2019/20</h1>
+        <p>Connection to API server: <span class="status" v-bind:class="{success}">{{ serverStatus }}</span></p>
+    </div>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import axios from "axios";
+import config from "../config";
+
+@Component
+export default class HelloWorld extends Vue {
+    @Prop() private msg!: string;
+    private serverStatus: string = "unknown";
+    private success: boolean = false;
+
+    constructor() {
+      super();
+    }
+
+    async created() {
+      try {
+        const response = await axios.get(`${config.apiUrl}/health`);
+        if (response.status === 200) {
+          this.serverStatus = "ok :-)";
+          this.success = true;
+        } else {
+          this.serverStatus = `unknown (?)`;
+          this.success = false;
+        }
+
+      } catch (e) {
+        this.serverStatus = `unknown (${e.name}: ${e.message})`;
+        this.success = false;
+      }
+
+      // eslint-disable-next-line no-console
+      console.log("yay created");
+    }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+    h3 {
+        margin: 40px 0 0;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    li {
+        display: inline-block;
+        margin: 0 10px;
+    }
+
+    a {
+        color: #42b983;
+    }
+    span.status {
+        font-weight: bold;
+        color: red;
+    }
+    span.status.success {
+        color: darkgreen;
+    }
+</style>

frontend/src/config.ts

@@ -0,0 +1,4 @@
+
+export default {
+  apiUrl: "http://localhost:3000"
+}

frontend/src/main.ts

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

frontend/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

frontend/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}