Merge branch 'master' into dev

# Conflicts: # client/src/App.vue # client/src/components/Navigation.vue # client/src/components/laboratory/LinkTestAndPatient.vue # client/src/components/laboratory/LinkTestResultAndPatient.vue # client/src/routes/routes.js # client/src/util/randomize.js
ImisDevelopers · Mar 26, 2020 · f96f810 · f96f810
2 parents 76b60de + 669ec93
commit f96f810
Show file tree

Hide file tree

Showing 15 changed files with 307 additions and 145 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -1,36 +1,46 @@
 <template>
   <div id="app">
-    <a-layout>
-      <div class="prototype-warning">
-        Dies ist ein Prototyp - Eingetragene Daten werden vor dem Absenden
-        anonymisiert.
-      </div>
-
-      <a-layout style="min-height: calc(100vh - 35px);">
-        <a-layout-header style="height: auto">
-          <Navigation />
-        </a-layout-header>
-        <a-layout-content
-          style="margin: auto; box-sizing: border-box; padding: 0rem 4rem; width: 100%;"
-        >
-          <div :style="{ padding: '0px', minHeight: '360px', width: '100%' }">
-            <router-view></router-view>
-          </div>
-        </a-layout-content>
-        <a-layout-footer style="textAlign: center">
-          IMIS ©2020 Created by WeVsVirus
-        </a-layout-footer>
+    <div v-if="this.$route.path === '/'">
+      <LandingPage />
+    </div>
+    <div v-else>
+      <a-layout id="components-layout-demo-responsive">
+        <a-layout>
+          <a-layout-header style="height: auto">
+            <Navigation />
+          </a-layout-header>
+          <a-layout-content
+            style="margin: auto; box-sizing: border-box; padding: 0rem 4rem; width: 100%;"
+          >
+            <div :style="{ padding: '0px', minHeight: '360px', width: '100%' }">
+              <router-view></router-view>
+            </div>
+          </a-layout-content>
+          <a-layout-footer style="textAlign: center">
+            IMIS ©2020 Created by WeVsVirus
+          </a-layout-footer>
+        </a-layout>
       </a-layout>
-    </a-layout>
+    </div>
   </div>
 </template>
 
 <script>
 import Navigation from "./components/Navigation";
+import LandingPage from "./components/LandingPage";
 
 export default {
   components: {
-    Navigation
+    Navigation,
+    LandingPage
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    currentPath: function() {
+      return location.pathname;
+    }
   },
   name: "App"
 };
@@ -51,4 +61,8 @@ export default {
   height: 35px;
   background-color: #ffdddd;
 }
+
+#components-layout-demo-responsive {
+  min-height: 100vh;
+}
 </style>
diff --git a/client/src/assets/imis-logo.svg b/client/src/assets/imis-logo.svg
diff --git a/client/src/assets/vision.png b/client/src/assets/vision.png
diff --git a/client/src/components/LandingPage.vue b/client/src/components/LandingPage.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="main">
+    <div class="left-part">
+      <div>
+        <h1>
+          <img
+            src="../assets/logo.png"
+            aspect-ratio="1.7"
+            style="vertical-align: middle"
+          />
+          <span style="margin-left: 15px">Schnell. Einfach. Zuverlässig.</span>
+        </h1>
+        <br />
+        <table>
+          <tr style="vertical-align: middle;">
+            <td width="60%">
+              <iframe
+                allowfullscreen="true"
+                id="youtube"
+                v-bind:style="{ width: '100%', height: (38 / 16) * 9 + 'vw' }"
+                src="https://www.youtube.com/embed/XIIlMh3Lbsc"
+                style="vertical-align: top"
+                >Video vom Browser nicht unterstützt.
+              </iframe>
+            </td>
+            <td width="40%">
+              <div style="padding-left: 50px; text-align: justify">
+                {{ paragraph1 }}
+              </div>
+              <br />
+              <div style="padding-left: 50px; text-align: justify">
+                {{ paragraph2 }}
+              </div>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <br>
+      <!--
+      <div>
+        <h2 style="text-align: center">Unsere Vision</h2>
+        <img src="../assets/vision.png" width="80%"/>
+      </div>
+      -->
+      <br />
+    </div>
+    <div class="transition"></div>
+    <div class="right-part">
+      <table style="position: absolute; top: 5px;">
+        <tr>
+          <td><a-button type="primary" block="true"  href="mailto:[email protected]" icon="mail" shape="round">Kontakt</a-button></td>
+          <td><a-button type="primary" block="true" href="https://devpost.com/software/imis-infektions-melde-und-informations-system" icon="bulb" shape="round">DevPost</a-button></td>
+          <td><a-button type="primary" block="true" href="https://github.com/ImisDevelopers/1_011_a_infektionsfall_uebermittellung" icon="tool" shape="round">GitHub</a-button></td>
+        </tr>
+      </table>
+      <h1>Hier geht's zur Live-Demo:</h1>
+      <a-button
+        type="primary"
+        shape="round"
+        icon="arrow-right"
+        size="large"
+        href="/prototype/register-patient"
+        block
+        >Zum Prototypen
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      paragraph1:
+        "Das Sammeln und Verwalten der aktuellen Infektionszahlen erfordert extrem viel Zeit und Ressourcen. IMIS ist unsere Lösung für eine einfache Infektionsfall-Erfassung für Ärzte, Gesundheitsämter und Labore. Damit ermöglichen wir, dass wichtige Ressourcen an anderer Stelle besser eingesetzt werden können.",
+      paragraph2:
+        "Die COVID-19 Pandemie stellt für das bestehende Infektionsmeldewesen in Deutschland eine immense Herausforderung dar. Ärzte und über 400 Gesundheitsämter benutzen gegenwärtig einen uneinheitlichen Mix aus Fax, E-Mails und Excel Tabellen um Fälle zusammenzutragen. Verspätet Meldungen an das RKI und überlastete Gesundheitsämter sind die Folge. So wurden laut RKI von einigen Gesundheitsämtern sogar keine Zahlen für dieses Wochenende übermittelt. Diese ungenaue Datenlage sorgt für eine große Unsicherheit und macht es schwer, angemessen auf die Krise zu reagieren. "
+    };
+  },
+  name: "LandingPage"
+};
+</script>
+
+<style>
+.main {
+  background-color: whitesmoke;
+  margin: 0 auto;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.left-part {
+  display: table-cell;
+  width: 70vw;
+  height: 100vh;
+  text-align: left;
+  padding: 1%;
+}
+
+.transition {
+  display: table-cell;
+  background-image: linear-gradient(
+    80deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0) 50%,
+    lightgrey 50%,
+    lightgrey 100%
+  );
+  width: 10vw;
+  height: 100vh;
+}
+
+.right-part {
+  display: table-cell;
+  width: 20vw;
+  height: 100vh;
+  background-color: lightgrey;
+  text-align: left;
+  vertical-align: middle;
+  padding-right: 40px;
+}
+</style>
diff --git a/client/src/components/Navigation.vue b/client/src/components/Navigation.vue
@@ -13,36 +13,40 @@
 const items = [
   {
     key: "0",
-    url: "/register-institution",
-    type: "home",
-    text: "Instutition Registrieren"
-  },
-  {
-    key: "1",
-    url: "/register-patient",
+    url: "/prototype/register-patient",
     type: "user-add",
     text: "Patient Registrieren"
   },
   {
     key: "2",
-    url: "/link-test-and-patient",
+    url: "/prototype/link-test-and-patient",
     type: "deployment-unit",
     text: "Probe Zuordnen"
   },
   {
     key: "3",
-    url: "/link-test-result",
+    url: "/prototype/link-test-result",
     type: "experiment",
     text: "Testresultat Zuordnen"
   },
-  { key: "4", url: "/patient-overview", type: "user", text: "Patienten-Daten" },
-  { key: "5", url: "/all-data", type: "team", text: "Alle Patienten" },
+  {
+    key: "4",
+    url: "/prototype/patient-overview",
+    type: "user",
+    text: "Patienten-Daten"
+  },
+  {
+    key: "5",
+    url: "/prototype/all-data",
+    type: "team",
+    text: "Alle Patienten"
+  },
   {
     key: "6",
-    url: "/public-statistics",
+    url: "/prototype/public-statistics",
     type: "stock",
     text: "Öffentliche Statistiken"
-  },
+  }
 ];
 
 export default {

diff --git a/client/src/components/PublicStatisticsComponent.vue b/client/src/components/PublicStatisticsComponent.vue
@@ -119,7 +119,7 @@
             create(e) {
                 e.preventDefault();
                 if (this.content.length > 0) {
-                    fetch('/exampleEntities',
+                    /*fetch('/exampleEntities',
                         {
                             method: 'POST',
                             body: JSON.stringify({ content: this.content }),
@@ -132,19 +132,19 @@
                         })
                         .then((entity) => {
                             this.entities.push(entity);
-                        });
+                        });*/
                     this.content = "";
                 }
             }
         },
         created() {
-            fetch('/exampleEntities')
+            /*fetch('/exampleEntities')
                 .then((response) => {
                     return response.json();
                 })
                 .then((entities) => {
                     this.entities.push(...entities);
-                });
+                });*/
         }
     }
 </script>

diff --git a/client/src/components/laboratory/LinkTestAndPatient.vue b/client/src/components/laboratory/LinkTestAndPatient.vue
@@ -8,10 +8,9 @@
         :form="form"
         @submit="handleSubmit"
       >
-        <BarcodeInput
-          placeholder="z.B 43A78F0B"
-          label="Patienten-ID"
-          :validation="[
+        <a-form-item label="Patienten-ID">
+          <a-input
+            v-decorator="[
               'patientId',
               {
                 rules: [
@@ -22,11 +21,12 @@
                 ]
               }
             ]"
+            placeholder="z.B 43A78F0B"
           />
-        <BarcodeInput
-          label="Test-ID"
-          placeholder="z.B ae48-hr43-sk97"
-          :validation="[
+        </a-form-item>
+        <a-form-item label="Test-ID">
+          <a-input
+            v-decorator="[
               'testId',
               {
                 rules: [
@@ -37,7 +37,9 @@
                 ]
               }
             ]"
-        />
+            placeholder="z.B ae48-hr43-sk97"
+          />
+        </a-form-item>
         <a-form-item label="Kommentar">
           <a-textarea
             v-decorator="['comment']"
@@ -64,11 +66,9 @@
 
 <script>
 import Api from "../../api/Api";
-import BarcodeInput from "../BarcodeInput";
 
 export default {
   name: "LinkTestAndPatient",
-  components: {BarcodeInput},
   props: {
     laboratoryId: {
       type: String,
@@ -89,6 +89,7 @@ export default {
         if (err) {
           return;
         }
+
         const request = {
           ...values,
           laboratoryId: this.laboratoryId