Skip to content
GitLab
Commit e93fdc99 authored by Theis's avatar Theis
Browse files

Added a graph to visualize the data for the alarm case and made some minor code adjustments

parent 03c0091e
Pipeline #100667 passed with stage
in 4 minutes and 13 seconds
Hide whitespace changes
Inline Side-by-side
web/api/server.js
View file @ e93fdc99
......@@ -125,33 +125,30 @@ app.post("/home/:ssn", async (req, res) => {
res.send(false)
} else {
//console.log("CITIZEN DATA: ", citizenData)
//Format and sort assistive aids data from Database
var assistiveAidsWithCorrectDateFormat = changeLendDateFormat(citizenData.Assistive_Aids)
var sortedAssistiveAids = sortAssistiveAidsByDate(assistiveAidsWithCorrectDateFormat)
//console.log("SORTED AIDS BY DATE: ", sortedAssistiveAids)
//Case Complete Training
//console.log("SORTED AIDS BY DATE LENGTH: ", sortedAssistiveAids.length);
var assistiveAidsTraining = appendAssistiveAidsISO(sortedAssistiveAids);
//console.log("APPENDED AIDS: ", assistiveAidsTraining);
var loanPeriod = calculateMeanLoanPeriod(sortedAssistiveAids);
//Case Alarm
var assistiveAidsWithoutAlarm = removeAlarmFromAssistiveAidsList(sortedAssistiveAids);
//console.log("APPENDED AIDS Without Alarm: ", assistiveAidsWithoutAlarm);
var assistiveAidsAlarm = appendAssistiveAidsISO(assistiveAidsWithoutAlarm);
//console.log("APPENDED AIDS Without Alarm: ", {assistiveAidsAlarm})
//Input to ML model for both cases
var inputForCompleteTrainingPrediction = dataPreparationForML(citizenData.age, citizenData.gender, assistiveAidsTraining, loanPeriod);
var inputForAlarmPrediction = dataPreparationForML(citizenData.age, citizenData.gender, assistiveAidsAlarm, loanPeriod);
//Result from ML model for both cases
var citizenCompleteTrainingPrediction = await getCompleteTrainingPrediction(inputForCompleteTrainingPrediction);
var citizenAlarmPrediction = await getAlarmPrediction(inputForAlarmPrediction);
//console.log("Alarm Prediction: ", citizenAlarmPrediction)
convertDataSizeToKb("Combined datasize from both the ML Model and Database in Kb: ", { citizenData, citizenCompleteTrainingPrediction, citizenAlarmPrediction })
res.json({ citizenData, citizenCompleteTrainingPrediction, citizenAlarmPrediction })
await deleteVariable([
citizenData,
assistiveAidsWithCorrectDateFormat,
......@@ -170,7 +167,7 @@ function changeLendDateFormat(assistiveAids) {
assistiveAids.forEach(function(assistiveAid) {
assistiveAid.lend_date = rearrangeDateFormat(assistiveAid.lend_date)
});
return assistiveAids
return assistiveAids;
}
function rearrangeDateFormat(date) {
......@@ -179,7 +176,7 @@ function rearrangeDateFormat(date) {
var month = dateInArray[1]
var year = dateInArray[2]
var rearrangedDateFormat = month + '/' + day + '/' + '20' + year
return rearrangedDateFormat
return rearrangedDateFormat;
}
function sortAssistiveAidsByDate(assistiveAids){
......@@ -198,7 +195,7 @@ function removeAlarmFromAssistiveAidsList(assistiveAids) {
assistiveAids.splice(i, 1);
}
}
return assistiveAids
return assistiveAids;
}
function appendAssistiveAidsISO(assistiveAids) {
......
web/vue-app/src/components/AidGraph.vue
View file @ e93fdc99
<template>
<div>
<apexchart
type="line"
height="350"
:options="$_aidGraph_options"
:series="$_aidGraph_series"
/>
<div>
<apexchart type="line" height="350" :options="$_aidGraph_options" :series="$_aidGraph_series" />
<div class="text-right">
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="on"> mdi-information-outline </v-icon>
</template>
<span>
Du kan til enhver tid skjule det blå og orange plot på grafen. <br />
Lige over grafen ser du to tekstfelter kaldet "Antal Hjælpemidler" og
"Hjemmehjælpstimer/uge". <br />
Klik på en af dem for at skjule det respektive plot på grafen. <br />
Det samme gør sig gældende hvis du ønsker et af de to plots vist
igen.</span
>
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="on"> mdi-information-outline </v-icon>
</template>
<span>
Du kan til enhver tid skjule det blå og orange plot på grafen. <br />
Lige over grafen ser du to tekstfelter kaldet "Antal Hjælpemidler" og
"Hjemmehjælpstimer/uge". <br />
Klik på en af dem for at skjule det respektive plot på grafen. <br />
Det samme gør sig gældende hvis du ønsker et af de to plots vist
igen.</span>
</v-tooltip>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "AidGraph",
data() {
return {
chartOptions: {
chart: {
zoom: {
enabled: false,
},
toolbar: {
show: false,
tools: {
download: false,
name: "AidGraph",
data() {
return {
chartOptions: {
chart: {
zoom: {
enabled: false,
},
toolbar: {
show: false,
tools: {
download: false,
},
},
},
dataLabels: {
enabled: false,
},
colors: ["#247ba0", "#ffa726"],
stroke: {
width: [4, 4],
},
xaxis: {
categories: [],
},
yaxis: [{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: "#247ba0",
},
labels: {
style: {
colors: "#247ba0",
},
},
title: {
text: "Antal Hjælpemidler",
style: {
color: "#247ba0",
},
},
},
{
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: "#ffa726",
},
labels: {
style: {
colors: "#ffa726",
},
},
title: {
text: "Hjemmehjælpstimer / uge",
style: {
color: "#ffa726",
},
},
},
],
legend: {
horizontalAlign: "left",
position: "top",
fontSize: 14,
offsetX: 40,
},
},
},
},
dataLabels: {
enabled: false,
},
colors: ["#247ba0", "#ffa726"],
stroke: {
width: [4, 4],
},
xaxis: {
categories: [],
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: "#247ba0",
},
labels: {
style: {
colors: "#247ba0",
},
},
title: {
text: "Antal Hjælpemidler",
style: {
color: "#247ba0",
},
},
},
{
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: "#ffa726",
},
labels: {
style: {
colors: "#ffa726",
},
},
title: {
text: "Hjemmehjælpstimer / uge",
style: {
color: "#ffa726",
},
},
},
],
legend: {
horizontalAlign: "left",
position: "top",
fontSize: 14,
offsetX: 40,
},
},
};
},
computed: {
$_aidGraph_series: function () {
let quarters = this.$store.getters.quarters;
};
},
computed: {
$_aidGraph_series: function () {
let quarters = this.$store.getters.quarters;
let aidsVals: any[] = [];
let homehelpVals: number[] = [];
quarters.forEach(
(value: {
getNumberOfActiveAids: () => any;
getNumberOfHomehelpHours: () => number;
}) => {
aidsVals.push(value.getNumberOfActiveAids());
homehelpVals.push(Math.round(value.getNumberOfHomehelpHours()));
}
);
let aidsVals: any[] = [];
let homehelpVals: number[] = [];
quarters.forEach(
(value: {
getNumberOfActiveAids: () => any;
getNumberOfHomehelpHours: () => number;
}) => {
aidsVals.push(value.getNumberOfActiveAids());
homehelpVals.push(Math.round(value.getNumberOfHomehelpHours()));
}
);
return [
{ name: "Antal Hjælpemidler", data: aidsVals },
{ name: "Hjemmehjælpstimer/måned", data: homehelpVals },
];
},
$_aidGraph_options: function () {
let chartOptions = this.$data.chartOptions;
let quarters = this.$store.getters.quarters;
let categories_new: (string | string[])[] = [];
quarters.forEach(function (value: { quarterName: string | string[] }) {
categories_new.push(value.quarterName);
});
return [{
name: "Antal Hjælpemidler",
data: aidsVals
},
{
name: "Hjemmehjælpstimer/måned",
data: homehelpVals
},
];
},
$_aidGraph_options: function () {
let chartOptions = this.$data.chartOptions;
let quarters = this.$store.getters.quarters;
let categories_new: (string | string[])[] = [];
quarters.forEach(function (value: {
quarterName: string | string[]
}) {
categories_new.push(value.quarterName);
});
chartOptions.xaxis["categories"] = categories_new;
// console.log(chartOptions['chart'])
// console.log(chartOptions.chart['toolbar'])
return chartOptions;
chartOptions.xaxis["categories"] = categories_new;
// console.log(chartOptions['chart'])
// console.log(chartOptions.chart['toolbar'])
return chartOptions;
},
},
},
});
</script>
......
web/vue-app/src/components/AidTabs.vue
View file @ e93fdc99
......@@ -3,7 +3,6 @@
<v-tab>Hjælpemidler</v-tab>
<v-tab-item>
<aid-table class="card-margin" />
<!-- <aid-graph class="card-margin" /> -->
</v-tab-item>
<template>
......@@ -19,37 +18,19 @@
<home-care-table class="card-margin" />
</v-tab-item>
</template>
<!-- <template v-if="fall">
<v-tab>Registreret fald</v-tab>
<v-tab-item>
<registered-fall-table class="card-margin" />
</v-tab-item>
</template> -->
</v-tabs>
</template>
<script lang="ts">
import Vue from "vue";
import AidTable from "@/components/AidTable.vue";
//import AidGraph from "@/components/AidGraph.vue";
import TrainingPlanTable from "@/components/TrainingplanTable.vue";
//import RegisteredFallTable from "@/components/RegisteredFallTable.vue";
import HomeCareTable from "@/components/HomeCareTable.vue";
export default Vue.extend({
name: "AidTabs",
props: {
fall: {
type: Boolean,
required: false,
default: false,
},
},
components: {
//RegisteredFallTable,
AidTable,
//AidGraph,
TrainingPlanTable,
HomeCareTable,
},
......
web/vue-app/src/components/Explainer.vue
View file @ e93fdc99
<template>
<div>
<div class="explanationTitle">Sandsynlighedsforklaring</div>
<v-divider horizontal />
<v-card-text>
<div>
<div class="explanationTitle">Sandsynlighedsforklaring</div>
<v-divider horizontal />
<v-card-text>
<div class="explanationBody">
{{ getExplanation[0] }} {{ getExplanation[1] }} {{ getExplanation[2] }}
<ul>
<li v-for="item in getExplanation.slice(3, 13)" :key="item">
{{ item }}
</li>
</ul>
{{ getExplanation[13] }} {{ getExplanation[14] }} {{ getExplanation[15] }}.
{{ getExplanation[0] }} {{ getExplanation[1] }} {{ getExplanation[2] }}
<ul>
<li v-for="item in getExplanation.slice(3, 13)" :key="item">
{{ item }}
</li>
</ul>
{{ getExplanation[13] }} {{ getExplanation[14] }} {{ getExplanation[15] }}.
</div>
</v-card-text>
</div>
</v-card-text>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "Arguments",
props: {
fall: {
type: Boolean,
required: false,
default: false,
name: "Arguments",
props: {
alarm: {
type: Boolean,
required: false,
default: false,
},
},
},
computed: {
getExplanation: function (this: any) {
if (this.fall) {
return this.$store.getters.explainFall;
}
return this.$store.getters.explainComplete;
computed: {
getExplanation: function (this: any) {
if (this.alarm) {
return this.$store.getters.explainAlarm;
}
return this.$store.getters.explainComplete;
},
},
},
});
</script>
<style scoped>
.explanationTitle {
padding-top: 0.25rem;
padding-left: 1rem;
padding-bottom: 0.25rem;
font-size: 26px;
color: #35414f;
background-color: #e3e3e3;
padding-top: 0.25rem;
padding-left: 1rem;
padding-bottom: 0.25rem;
font-size: 26px;
color: #35414f;
background-color: #e3e3e3;
}
.explanationBody {
font-size: 18px;
color: #35414f;
font-size: 18px;
color: #35414f;
}
</style>
web/vue-app/src/components/NavigationDrawer.vue
View file @ e93fdc99
<template>
<v-navigation-drawer permanent app expand-on-hover color="#6f97a9">
<v-navigation-drawer permanent app expand-on-hover color="#6f97a9">
<v-list nav>
<v-list-item link :to="{ path: '/trainingcompletion' }">
<v-list-item-icon>
<v-icon>mdi-dumbbell</v-icon>
</v-list-item-icon>
<v-list-item-title class="text-color"
>Gennemføre Træning</v-list-item-title
>
</v-list-item>
<v-list-item link :to="{ path: '/fallprevention' }">
<v-list-item-icon>
<v-icon>mdi-walk</v-icon>
</v-list-item-icon>
<v-list-item-title class="text-color"
>Faldforebyggelse</v-list-item-title
>
</v-list-item>
</v-list>
<template v-slot:append>
<v-list nav dense>
<v-list-item @click="darkMode">
<v-list-item-icon v-if="!$vuetify.theme.dark">
<v-icon>mdi-moon-waning-crescent</v-icon>
</v-list-item-icon>
<v-list-item-icon v-else>
<v-icon>mdi-white-balance-sunny</v-icon>
</v-list-item-icon>
<v-list-item-title class="text-color"
>Mørk Tilstand</v-list-item-title
>
<v-list-item link :to="{ path: '/trainingcompletion' }">
<v-list-item-icon>
<v-icon>mdi-dumbbell</v-icon>
</v-list-item-icon>
<v-list-item-title class="text-color">Gennemføre Træning</v-list-item-title>
</v-list-item>
<v-list-item @click="signOut">
<v-list-item-icon>
<v-icon>mdi-logout-variant</v-icon>
</v-list-item-icon>
<v-list-item-title class="text-color">Log Ud</v-list-item-title>
<v-list-item link :to="{ path: '/alarmprevention' }">
<v-list-item-icon>
<v-icon>mdi-walk</v-icon>
</v-list-item-icon>
<v-list-item-title class="text-color">Nødalarm</v-list-item-title>
</v-list-item>
</v-list>
</v-list>
<template v-slot:append>
<v-list nav dense>
<v-list-item @click="signOut">
<v-list-item-icon>
<v-icon>mdi-logout-variant</v-icon>
</v-list-item-icon>
<v-list-item-title class="text-color">Log Ud</v-list-item-title>
</v-list-item>
</v-list>
</template>
</v-navigation-drawer>
</v-navigation-drawer>
</template>
<script lang="ts">
......@@ -48,25 +32,27 @@ import router from "@/router";
import Vue from "vue";
export default Vue.extend({
name: "NavigationDrawer",
methods: {
darkMode() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
},
signOut() {
this.$store.dispatch("reset_state");
router.replace({ name: "Search" });
name: "NavigationDrawer",
methods: {
darkMode() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
},
signOut() {
this.$store.dispatch("reset_state");
router.replace({
name: "Search"
});
},
},
},
});
</script>
<style scoped>
i.v-icon.v-icon {
color: whitesmoke;
color: whitesmoke;
}
.text-color {
color: whitesmoke;
color: whitesmoke;
}
</style>
web/vue-app/src/router/index.ts
View file @ e93fdc99
......@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
import Search from "@/views/Search.vue";
import Home from "@/views/Home.vue";
import TrainingCompletion from "@/views/TrainingCompletion.vue";
import FallPrevention from "@/views/FallPrevention.vue";
import AlarmPrevention from "@/views/AlarmPrevention.vue";
import store from '@/store/index';
Vue.use(VueRouter)
......@@ -44,9 +44,9 @@ const routes = [
// component: () => import(/* webpackChunkName: "about" */ '../views/TrainingCompletion')
},
{
name: 'Fall Prevention',
path: '/fallprevention',
component: FallPrevention,
name: 'Alarm Prevention',
path: '/alarmprevention',
component: AlarmPrevention,
// route level code-splitting