Major changes on the Search page and refactoring

web/src/model/Aid.ts

@@ -16,7 +16,6 @@ export class Aid extends DateFormat {
         this.$_handInDate = new Date(handInDate)
         this.$_grantType = grantType
         this.$_grantReason = grantReason
-
         this.$_aidName = this.$_hmiNumber.HmiName
     }
 

web/src/store/AidStore.ts

@@ -10,7 +10,6 @@ const aidStore: Module<any, any> = {
             new Aid('120606', '2019-04-01', '', '86', 'Borger har svært ved at holde balancen og har to etager i sit hjem.'),
             new Aid('120606', '2019-09-01', '', '86', 'Borger har svært ved at holde balancen og har to etager i sit hjem.'),
             new Aid('123103', '2020-07-01', '', 'APV', 'Aflastning af hjemmehjælp.'),
-            // new Aid('222718', '2020-10-01', '', '83a', 'Afhjælpning af funktionsnedsættelse7'),
             new Aid('222718', '2020-10-03', '', '83a', 'Faldalarm da borger svært ved at holde balancen selv og kan have svært ved at rejse sig.'),
             new Aid('242103', '2020-11-01', '', '86', 'Gør det nemmere for borger at hold fast i ting.')
         ],

web/src/views/Home.vue

@@ -24,7 +24,7 @@ export default Vue.extend({
   created: function() {
     const axios = require('axios');
     axios.post('https://air-fastapi.azurewebsites.net/predict_complete', {
-      "Gender": 0,
+      "Gender": 1,
       "BirthYear": 68,
       "LoanPeriod": 180,
       "Ats": "222718,093307,181210"
@@ -44,7 +44,7 @@ export default Vue.extend({
         });
 
     axios.post('https://air-fastapi.azurewebsites.net/predict_fall', {
-      "Gender": 0,
+      "Gender": 1,
       "BirthYear": 68,
       "LoanPeriod": 180,
       "Ats": "222718,093307,181210"

web/src/views/Login.vue

 <template>
-  <v-app>
+  <v-app
+    style="
+      background: rgb(244, 252, 255);
+      background: linear-gradient(150deg,rgba(244, 252, 255, 1) 0%,rgba(0, 57, 108, 1) 100%);">
+    <div class="logo">
+      <v-img src="../assets/AIR.png" max-height="154" max-width="536"> </v-img>
+    </div>
     <v-main>
-      <v-form>
-        <v-container>
-          <v-row justify="center">
-            <v-col md="4">
-              <h1>AIR login</h1>
-              <v-text-field
-                  label="Brugernavn"
-                  value="John"
-              />
-              <v-text-field
-                  :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-                  @click:append="showPassword = !showPassword"
-                  :type="showPassword ? 'text' : 'password'"
-                  label="Kodeord"
-                  required
-                  autofocus
-              />
-              <router-link :to="{name: 'Home'}">
-                <v-btn @click="authenticateUser">Login</v-btn>
-              </router-link>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-form>
+      <v-container fill-height>
+        <v-row justify="center" align="center">
+          <v-col cols="12" sm="5">
+            <div v-if="errorMessageNoSSN != ''">
+              <v-alert color="red" type="error">{{errorMessageNoSSN}} </v-alert>
+            </div>
+            <v-text-field
+              class="search"
+              placeholder="Indtast borgerens CPR-nummer"
+              color="#000000"
+              v-model="ssn"
+            />
+            <router-link :to="{name: 'Home'}">
+              <v-card-actions class="justify-center">
+                <p>
+                  <v-btn
+                    @click="authenticateUser"
+                    color="accent"
+                    elevation="6"
+                    x-large
+                    >Søg
+                  </v-btn>
+                </p>
+              </v-card-actions>
+            </router-link>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-main>
   </v-app>
 </template>
@@ -35,17 +45,55 @@ import Vue from 'vue';
 export default Vue.extend({
       name: "Login",
       data: () => ({
-        showPassword: false,
-      }),
+      ssn: '',
+      errorMessageNoSSN: '',
+    }),
       methods: {
         authenticateUser: function () {
-          this.$store.dispatch('authenticateUser')
+          if(this.ssn === '') {
+            this.errorMessageNoSSN = 'Du skal indtaste et CPR nummer'
+          } else {
+            this.$store.dispatch('authenticateUser')
+          }
+          //Send request to "Server" for validation of SSN (Express)
+          //If successful then provide access for the user and manage all available data from "Server"
+          //If not then provide error screeen
+          //Error check on both invalid SSN, no SSN and no SSN found on "Server"
         },
+      },
+      /*watch: {
+          generateSSN() {
+            let realNumber = this.ssn.replace(/-/gi, '')
+            let dashedNumber = realNumber.match(/.{1,6}/g)
+
+            if(dashedNumber !=null){
+            this.ssn = dashedNumber.join('-')       
+            }
       }
-    }
-);
+    }*/
+})
 </script>
 
-<style scoped>
+<style>
+
+.h3 {
+  text-align: center;
+}
+
+.logo {
+  padding-top: 1rem;
+  padding-left: 1rem;
+}
+
+.search input {
+  color: rgb(46, 46, 46) !important;
+  font-size: 28px;
+  text-align: center;
+}
 
+.search input::placeholder {
+  color: rgb(36, 58, 58) !important;
+  font-size: 26px;
+  opacity: 0.95;
+}
 </style>

web/vue.config.js

 module.exports = {
+  devServer: {
+    port: 8080,
+    open: true
+  },
   "transpileDependencies": [
     "vuetify"
   ],