From de8642eadd2583c4f7a97ff58fefebc046f2095a Mon Sep 17 00:00:00 2001
From: Ammar Barakat <ammar.barakat@kgu.de>
Date: Wed, 6 Oct 2021 14:37:26 +0200
Subject: [PATCH] #4 - Add about and help pages

- Add About page
- Add Help page
- Update Start page text
---
 locales/en-US.js | 16 +++++++-------
 pages/about.vue  | 56 +++++++++++++++++++++++++++++++++++++++++++-----
 pages/help.vue   | 12 ++++++++---
 3 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/locales/en-US.js b/locales/en-US.js
index e00c2a5..dc58e47 100644
--- a/locales/en-US.js
+++ b/locales/en-US.js
@@ -95,6 +95,8 @@ export default {
     date: 'Date',
     time: 'Time',
     hourFormat: 'Hour Format',
+    frontend: 'Frontend',
+    backend: 'Backend',
     address: {
       name1: 'Universitätsklinikum Frankfurt',
       name2: 'Medical Informatics Group (MIG)',
@@ -170,13 +172,11 @@ export default {
       title: 'Home',
       subtitle: '',
       content: {
-        howdy: 'Howdy stranger!',
-        preAlpha: 'What you see here is a <b>PreAlpha</b> Version of the new DataElement Hub GUI. ' +
-          'So do not expect a fully working bug-free Version. Quite the contrary, expect the worst.',
-        bugReport: 'If you stumble over a bug, feel free to create an Issue in the projects repository, which can be found ' +
-          '<a href="https://github.com/mig-frankfurt/dataelementhub.gui" target="_blank">here</a>.',
+        howdy: 'Welcome to DataelementHub (DEHub)!',
+        preAlpha: 'What you see here is a Alpha Version of the new DataElement Hub GUI. So do not expect a fully working bug-free Version. We are continuously working on improving the software.',
+        bugReport: 'When you come across a bug, feel free to create an Issue in the projects repository, which can be found here (<a href="https://github.com/mig-frankfurt/dataelementhub.gui" target="_blank">https://github.com/mig-frankfurt/dataelementhub.gui</a>) .',
         dockerImage: 'From time to time there will be new a new Release of the corresponding Docker image. So be sure to check that too.',
-        thanks: '<b>Thanks!</b>'
+        thanks: 'For further information please visit <a href="https://dataelementhub.de" target="_blank">https://dataelementhub.de</a><br><br><b>Thanks!</b>'
       }
     },
     namespaces: {
@@ -320,11 +320,11 @@ export default {
       subtitle: ''
     },
     about: {
-      title: 'About the DataElement Hub',
+      title: 'About the DataElementHub',
       subtitle: ''
     },
     help: {
-      title: 'Help?',
+      title: 'Help',
       subtitle: ''
     },
     login: {
diff --git a/pages/about.vue b/pages/about.vue
index 3b6297c..0bc2f51 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,11 +1,57 @@
 <template>
-  <v-row justify="center" align="center">
-    <v-col cols="12" sm="8" md="6" />
-  </v-row>
+  <div>
+    <h1>{{ $t('pages.about.title') }}</h1>
+    <template v-if="backendData !== undefined">
+      <h2>{{ $t('global.backend') }}</h2>
+      <ul>
+        <li>buildVersion: {{ backendData.buildVersion }}</li>
+        <li>buildDate: {{ backendData.buildDate }}</li>
+        <li>buildBranch: {{ backendData.buildBranch }}</li>
+        <li>buildHash: {{ backendData.buildHash }}</li>
+      </ul>
+    </template>
+    <h2>{{ $t('global.frontend') }}</h2>
+    <ul>
+      <li>buildVersion: 1.0.0</li>
+      <li>buildDate: 2021-09-30</li>
+      <li>buildBranch: develop</li>
+    </ul>
+    <h2>Github</h2>
+    <p>
+      <b>DataElementHub REST</b><br>
+      <a href="https://github.com/mig-frankfurt/dataelementhub.rest" target="_blank">
+        https://github.com/mig-frankfurt/dataelementhub.rest
+      </a>
+    </p>
+    <p>
+      <b>DataElementHub GUI</b><br>
+      <a href="https://github.com/mig-frankfurt/dataelementhub.gui" target="_blank">
+        https://github.com/mig-frankfurt/dataelementhub.gui
+      </a>
+    </p>
+  </div>
 </template>
-
 <script>
 export default {
-  auth: false
+  auth: false,
+  data () {
+    return {
+      ajax: {
+        versionUrl: process.env.mdrBackendUrl + '/v1/version'
+      },
+      backendData: undefined
+    }
+  },
+  mounted () {
+    this.loadBackendVersion()
+  },
+  methods: {
+    async loadBackendVersion () {
+      await this.$axios.$get(this.ajax.versionUrl)
+        .then(function (res) {
+          this.backendData = res
+        }.bind(this))
+    }
+  }
 }
 </script>
diff --git a/pages/help.vue b/pages/help.vue
index 3b6297c..f63b2fd 100644
--- a/pages/help.vue
+++ b/pages/help.vue
@@ -1,7 +1,13 @@
 <template>
-  <v-row justify="center" align="center">
-    <v-col cols="12" sm="8" md="6" />
-  </v-row>
+  <div>
+    <h1>{{ $t('pages.help.title') }}</h1>
+    You can login with the following Account Data:
+    <p>
+      <b>User:</b> dehub-demo<br>
+      <b>Password:</b> demo
+    </p>
+    If you have any questions feel free to send an Email to: <a href="mailto:vengadeswaran@med.uni-frankfurt.de">vengadeswaran@med.uni-frankfurt.de</a>.
+  </div>
 </template>
 
 <script>