Made better code separation for API calls

web/server.js

@@ -13,7 +13,6 @@ var corsOptions = {
 };
 
 const log = bunyan.createLogger({ name: "AIR_Express" });
-
 const predictURl = 'https://air-fastapi.azurewebsites.net/predict'
 
 const input = {
@@ -28,16 +27,28 @@ function calculateDataSizeInKb(data) {
   return size / 1024;
 }
 
+function ifdb(){
+  // Calls the ifdb and retrieves: Citizen information, Assistive aids, etc.
+}
+
+function dataProcessor(data) {
+  // Processing IFDb data (Cura and KMD)
+}
+
+function mlPredict(){
+  // Calls the ML API and retrieves: Probability, SHAP and Arguments
+}
+
 app.post("/home:ssn", (req, res) => {
   //To handle the SSN from the Search page
 });
 
 app.post("/home", (req, res) => {
   axios.post(predictURl, input).then(result => {
-    log.info(`Data size from ML in Kb: `, calculateDataSizeInKb(result.data));
+    log.info("Data size from ML in Kb:", calculateDataSizeInKb(result.data));
     res.json(result.data)
   }).catch(error => {
-    log.error(`Home endpoint threw an exception: `, error)
+    log.error("Home endpoint threw an exception: ", error)
   })
 });
 

web/src/components/NavigationDrawer.vue

@@ -33,7 +33,6 @@
           >
         </v-list-item>
         <v-list-item @click="signOut">
-          <!-- link exact :to="{name: 'Login'} -->
           <v-list-item-icon>
             <v-icon>mdi-logout-variant</v-icon>
           </v-list-item-icon>
@@ -55,8 +54,8 @@ export default Vue.extend({
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
     },
     signOut() {
-      this.$store.dispatch("authenticateUser", false);
-      router.push({ name: "Login" });
+      this.$store.dispatch("searchForCitizen", false);
+      router.push({ name: "Search" });
     },
   },
 });

web/src/router/index.ts

 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Login from "@/views/Login.vue";
+import Search from "@/views/Search.vue";
 import Home from "@/views/Home.vue";
 import TrainingCompletion from "@/views/TrainingCompletion.vue";
 import FallPrevention from "@/views/FallPrevention.vue";
@@ -11,15 +11,15 @@ Vue.use(VueRouter)
 const routes = [
     {
         path: '/',
-        name: 'Login',
-        component: Login,
+        name: 'Search',
+        component: Search,
     },
     {
         path: '/home',
         name: 'Home',
         component: Home,
         beforeEnter: (to: any, from: any, next: any) => {
-            if (store.getters.authenticated == false) {
+            if (store.getters.search == false) {
                 next(false);
             } else {
                 next();

web/src/services/DataService.ts

 import http from "../http-common";
+import store from "../store/index";
 
 class DataService {
 
-  predict() {
-    return http.post('home');
+  search() : boolean {
+    const data = http.post('home');
+    if(data != null) {
+      this.storeData(data)
+      return true;
+    }
+    return false;
+  }
+
+  //All data has to be managed and stored from here (Exception Handling)
+  storeData(data: any) {
+    data.then(
+      (response: {
+        data: {
+          CompleteProb: number;
+          FallProb: number;
+          ComplianceProb: number;
+          CompleteShapValues: any;
+          FallShapValues: any;
+          Arguments: any;
+        };
+      }) => {
+        store.dispatch("addProbabilityComplete", response.data.CompleteProb);
+        store.dispatch("addProbabilityFall", response.data.FallProb);
+        store.dispatch("addCompliance", response.data.ComplianceProb);
+        store.dispatch("arguments", response.data.Arguments);
+        store.dispatch("shapComplete", response.data.CompleteShapValues);
+        store.dispatch("shapFall", response.data.FallShapValues);  
+      }
+    );
   }
 }
 

web/src/store/AuthStore.ts → web/src/store/SearchStore.ts

 import {Module} from "vuex";
 
-const authStore: Module<any,any> = {
+const searchStore: Module<any,any> = {
     state: {
-        authenticated: false,
+        search: false,
     },
     mutations: {
-        SET_AUTHENTICATED(state, value){
-            state.authenticated = value
+        SSN_SEARCH(state, value){
+            state.search = value
             }
         },
     actions: {
-        authenticateUser({commit, state}, value){
-            commit('SET_AUTHENTICATED', value)
+        searchForCitizen({commit, state}, value){
+            commit('SSN_SEARCH', value)
             }
         },
     getters: {
-        authenticated: state => state.authenticated
+        search: state => state.search
     }
 }
 
-export default authStore
\ No newline at end of file
+export default searchStore
\ No newline at end of file

web/src/store/index.ts

@@ -4,7 +4,7 @@ import {Aid} from "@/model/Aid";
 import {Quarter} from "@/model/Quarter";
 import {Month} from "@/model/Month";
 
-import authStore from "@/store/AuthStore";
+import searchStore from "@/store/SearchStore";
 import citizenStore from "@/store/CitizenStore";
 import probabilityStore from "@/store/ProbabilityStore";
 import complianceStore from "@/store/ComplianceStore";
@@ -99,7 +99,7 @@ export default new Vuex.Store({
         },
     },
     modules: {
-        authStore,
+        searchStore,
         citizenStore,
         probabilityStore,
         complianceStore,

web/src/views/Home.vue

@@ -14,7 +14,6 @@
 import Vue from "vue";
 import CitizenProfile from "@/components/CitizenProfile.vue";
 import NavigationDrawer from "@/components/NavigationDrawer.vue";
-import DataService from "@/services/DataService";
 
 export default Vue.extend({
   name: "Home",
@@ -22,28 +21,6 @@ export default Vue.extend({
     NavigationDrawer,
     CitizenProfile,
   },
-  created: function () {
-    const resultProbAndSHAP = DataService.predict();
-    resultProbAndSHAP.then(
-      (response: {
-        data: {
-          CompleteProb: number;
-          FallProb: number;
-          ComplianceProb: number;
-          CompleteShapValues: any;
-          FallShapValues: any;
-          Arguments: any;
-        };
-      }) => {
-        this.$store.dispatch("addProbabilityComplete", response.data.CompleteProb);
-        this.$store.dispatch("addProbabilityFall", response.data.FallProb);
-        this.$store.dispatch("addCompliance", response.data.ComplianceProb);
-        this.$store.dispatch("arguments", response.data.Arguments);
-        this.$store.dispatch("shapComplete", response.data.CompleteShapValues);
-        this.$store.dispatch("shapFall", response.data.FallShapValues);
-      }
-    );
-  },
 });
 </script>
 

web/src/views/Login.vue → web/src/views/Search.vue

 <template>
   <v-app
-    style="background: rgb(244, 252, 255);
+    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">
@@ -27,7 +28,8 @@
               <v-card-actions class="justify-center">
                 <p>
                   <v-btn
-                    @click="authenticateUser"
+                    @click="searchForCitizen"
+                    :loading="loading"
                     color="accent"
                     elevation="4"
                     x-large
@@ -47,24 +49,27 @@
 
 <script lang="ts">
 import Vue from "vue";
+import DataService from "@/services/DataService";
 
 export default Vue.extend({
-  name: "Login",
+  name: "Search",
   data: () => ({
     ssn: "",
     errorMessageNoSSN: "",
+    citizenExist: false,
+    loading: false,
   }),
   methods: {
-    authenticateUser: function () {
+    searchForCitizen: function () {
+      this.loading = true;
       if (this.ssn === "") {
         this.errorMessageNoSSN = "Du skal indtaste et CPR nummer";
-      } else {
-        this.$store.dispatch("authenticateUser", true);
+      } else if(this.ssn != "") {
+        this.citizenExist = DataService.search(); //Needs to be renamed later
+        this.$store.dispatch("searchForCitizen", this.citizenExist);
       }
-      //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"
+      this.loading = false;
+      //Error checking on both invalid SSN, no SSN and no SSN found on "Server"
     },
   },
 });