Merge pull request #28 from copa-ch/feat/home

Feat/home

README.md

@@ -1,14 +1,13 @@
 <p align="center">
-  <a href="" target="blank">
+  <a href="https://copa-app.herokuapp.com/" target="blank">
     <img src="banner.png" alt="COPA Logo" />
   </a>
-  <p align="center" style="margin-top: -80px">
+</p>
+<p>
     <a href="https://travis-ci.org/copa-ch/copa-frontend"><img src="https://travis-ci.org/copa-ch/copa-frontend.svg?branch=master" alt="travis-ci" /></a>
     <a href="https://github.com/semantic-release/semantic-release"><img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" alt="Sematic-Release" /></a>
-  </p>
 </p>
 
-
 ## Project setup
 
 ```

src/app/components/CreateTournamentForm.vue

@@ -0,0 +1,22 @@
+<template>
+  <section class="create-tournament-form">
+    <h1 class="title is-1 has-text-black">Create Form TODO</h1>
+    <h1 class="subtitle is-2 has-text-black">Create Form TODO</h1>
+  </section>
+</template>
+
+<script lang="ts">
+  import {defineComponent} from '@vue/composition-api'
+
+  export default defineComponent({
+    setup() {
+
+      return {}
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '../../styles/variables.scss';
+
+</style>

src/app/components/layout/Footer.vue

@@ -0,0 +1,55 @@
+<template>
+  <footer class="footer">
+    <div class="content has-text-centered">
+      <p>
+        <strong>COPA</strong>
+        by Gery Hirschfeld & Robert Kleger.
+        <br>The source code is licensed
+        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
+      </p>
+      <p>
+        App Version {{appVersion}}, API Version {{apiVersion}}
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+  import {defineComponent} from '@vue/composition-api'
+  import {useAppConfig} from '@/app/effects/config.effect'
+  import {useApiInformation} from '@/app/effects/api-information.effect'
+
+  export default defineComponent({
+    setup() {
+      const appConfig = useAppConfig()
+      const {isPending, apiVersion, getApiInformation} = useApiInformation()
+
+      getApiInformation()
+
+      return {
+        isPending,
+        apiVersion,
+        appVersion: appConfig.version,
+      }
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '../../../styles/variables.scss';
+
+  footer.footer {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 8px;
+      width: 100%;
+      background: linear-gradient(45deg, $dark, $light);
+    }
+  }
+
+</style>

src/app/components/layout/Header.vue

@@ -0,0 +1,66 @@
+<template>
+  <b-navbar shadow type="is-white">
+    <template slot="brand">
+      <b-navbar-item tag="router-link" :to="{ name: 'home' }">
+        <span class="logo">COPA</span>
+      </b-navbar-item>
+    </template>
+    <template slot="start">
+      <b-navbar-item tag="router-link" :to="{ name: 'home' }">
+        Home
+      </b-navbar-item>
+      <b-navbar-item tag="router-link" :to="{ name: 'privacy' }">
+        Privacy
+      </b-navbar-item>
+    </template>
+    <template slot="end">
+    </template>
+  </b-navbar>
+</template>
+
+
+<script lang="ts">
+  import {defineComponent} from '@vue/composition-api'
+
+  export default defineComponent({
+    setup() {
+
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '../../../styles/variables.scss';
+
+  span.logo {
+    font-family: 'Poppins';
+    font-weight: bold;
+    font-size: 32px;
+    color: $black;
+  }
+
+  nav.navbar {
+    padding-top: 8px;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      height: 8px;
+      width: 100%;
+      background: linear-gradient(45deg, $dark, $light);
+    }
+  }
+
+  .navbar-brand {
+    margin-right: 30px;
+  }
+
+  a.navbar-item {
+    font-family: 'Poppins';
+    font-weight: bold;
+    color: $black;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+</style>

src/app/effects/api-information.effect.ts

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import {ref} from '@vue/composition-api'
+import {plainToClass} from 'class-transformer'
+import {defaultApiConfig} from '@/config/api.config'
+import {ApiInformation} from '@/app/models/ApiInformation'
+
+export const useApiInformation = () => {
+  const isPending = ref(false)
+  const apiVersion = ref<string>(null)
+
+  const getApiInformation = async () => {
+    isPending.value = true
+    const response = await Vue.$http.request({
+      ...defaultApiConfig,
+    })
+    isPending.value = false
+    const apiInformation = plainToClass(ApiInformation, response.data)
+    apiVersion.value = apiInformation.version
+  }
+
+  return {
+    isPending,
+    apiVersion,
+    getApiInformation,
+  }
+}
+
+

src/app/effects/config.effect.ts

@@ -0,0 +1,9 @@
+import {ref} from '@vue/composition-api'
+import {appConfig} from '@/config/app.config'
+
+export const useAppConfig = () => {
+  const version = ref(appConfig.version)
+  return {
+    version,
+  }
+}