Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Christian Fischer Pedersen
AIR
Commits
e93fdc99
Commit
e93fdc99
authored
Dec 22, 2021
by
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
Changes
15
Pipelines
1
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
Fall
Prevention
from
"
@/views/
Fall
Prevention.vue
"
;
import
Alarm
Prevention
from
"
@/views/
Alarm
Prevention.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
:
'
/
f
al
l
prevention
'
,
component
:
Fall
Prevention
,
name
:
'
Alarm
Prevention
'
,
path
:
'
/al
arm
prevention
'
,
component
:
Alarm
Prevention
,