Skip to content
This repository has been archived by the owner on Oct 14, 2020. It is now read-only.

Commit

Permalink
Merge pull request #389 from RealEskalate/segni.admin
Browse files Browse the repository at this point in the history 
[web] ui changes
  • Loading branch information
@ZBeimnet
ZBeimnet authored Aug 26, 2020
2 parents 884e0bf + 918bd38 commit c225b0d
Show file tree
Hide file tree
Showing 4 changed files with 209 additions and 59 deletions.
117 changes: 73 additions & 44 deletions covid-19-app-web/src/views-admin/symptoms/DetailSidebar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,72 @@
<template>
<v-navigation-drawer
width="450"
width="350"
height="80%"
v-model="side_bar"
right
absolute
bottom
color="#F5F6F7"
class="shadow-sm pb-9"
style="z-index: 3"
>
<v-card>
<v-row>
<v-icon large class="ma-2 ml-6" @click="close">{{ mdiClose }}</v-icon>
<p class="mx-auto d-inline-flex display-1 text--primary">
<v-card color="primary" dark class="">
<v-row class="align-self-center align-center align-content-center">
<v-icon color="white" class="ml-5" @click="close">{{
mdiClose
}}</v-icon>
<p class="display-1 mx-auto my-2" style="color: white!important;">
Symptom Details
</p>
</v-row>
</v-card>
<v-container>
<v-card class="mx-auto mt-5">
<v-card class="mx-auto mt-5" outlined>
<v-card-text>
<h1 class="d-inline-flex text--primary">{{ detail.name }}</h1>
<v-chip class="float-right" color="red" text-color="white">
<h3 class="d-inline-flex text--primary">{{ detail.name }}</h3>
<v-chip
class="float-right"
small
:color="getColor(detail.risk)"
text-color="white"
>
{{ detail.risk }} RISK</v-chip
>
</v-card-text>
<v-list-item>
<v-list-item-content>Gender</v-list-item-content>
<v-list-item-content class="align-end">
{{ detail.gender }}
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>Last Update</v-list-item-content>
<v-list-item-content class="align-end">
{{ detail.lastUpdate }}
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>Status</v-list-item-content>
<v-list-item-content class="align-end">
{{ detail.status }}
</v-list-item-content>
</v-list-item>
</v-card>
<v-card class="mx-auto mt-10">
<v-card-text>
<h1 class="text--primary">Symptoms</h1>
</v-card-text>
<v-list-item>
<v-list-item-content>Location</v-list-item-content>
<v-list-item-content class="align-end">
{{ detail.location }}
</v-list-item-content>
</v-list-item>
<v-list-item v-for="(symptom, i) in detail.allSymptoms" :key="i">
<v-list-item-content>Symptom {{ i + 1 }}</v-list-item-content>
<v-list-item-content class="align-end">
{{ symptom }}
</v-list-item-content>
</v-list-item>
<v-list dense>
<v-list-item>
<v-list-item-content>Gender</v-list-item-content>
<v-list-item-content class="align-end">
{{ detail.gender }}
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>Last Update</v-list-item-content>
<v-list-item-content class="align-end">
{{ detail.lastUpdate }}
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>Status</v-list-item-content>
<v-list-item-content class="align-end">
{{ detail.status }}
</v-list-item-content>
</v-list-item>
<v-card-text>
<h3 class="text--primary">Symptoms</h3>
</v-card-text>
<v-list-item>
<v-list-item-content>Location</v-list-item-content>
<v-list-item-content class="align-end">
{{ detail.location }}
</v-list-item-content>
</v-list-item>
<v-list-item v-for="(symptom, i) in detail.allSymptoms" :key="i">
<v-list-item-content>Symptom {{ i + 1 }}</v-list-item-content>
<v-list-item-content class="align-end">
{{ symptom }}
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</v-container>
</v-navigation-drawer>
Expand Down Expand Up @@ -88,7 +95,29 @@ export default {
close() {
this.side_bar = false;
this.$emit("close-sidebar");
},
getColor(risk) {
if (risk.toLowerCase() === "low") {
return "#009c4d";
} else if (risk.toLowerCase() === "medium") {
return "#ffa64e";
} else if (risk.toLowerCase() === "high") {
return "#ff6767";
}
}
}
};
</script>

<style scoped>
.display-1 {
font-size: 1.2em !important;
color: #303030 !important;
}
.shadow {
background: transparent !important;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(166, 173, 201, 0.2) !important;
border-radius: 15px !important;
}
</style>
83 changes: 83 additions & 0 deletions covid-19-app-web/src/views-admin/symptoms/DetailSidebarSmall.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<template>
<div class="text-center">
<v-bottom-sheet
v-model="sheet"
:scrollable="true"
overlay-color="primary"
overlay-opacity="0.1"
>
<div class="text-center" style="background-color: white">
<v-btn class="my-2" text color="error" @click="sheet = !sheet"
>close</v-btn
>
<v-card class="mx-auto" outlined>
<v-card-text>
<h3 class="d-inline-flex text--primary">{{ detail.name }}</h3>
<v-chip
class="float-right"
small
:color="getColor(detail.risk)"
text-color="white"
>
{{ detail.risk }} RISK</v-chip
>
</v-card-text>
<v-list dense>
<v-list-item>
<v-list-item-content>Gender</v-list-item-content>
<v-list-item-action-text class="align-start">
{{ detail.gender }}
</v-list-item-action-text>
</v-list-item>
<v-list-item>
<v-list-item-content>Last Update</v-list-item-content>
<v-list-item-action-text class="align-start">
{{ detail.lastUpdate }}
</v-list-item-action-text>
</v-list-item>
<v-list-item>
<v-list-item-content>Status</v-list-item-content>
<v-list-item-action-text class="align-start">
{{ detail.status }}
</v-list-item-action-text>
</v-list-item>
</v-list>
<v-card-text>
<h3 class="text--primary">Symptoms</h3>
</v-card-text>
<v-list dense>
<v-list-item>
<v-list-item-content>Location</v-list-item-content>
<v-list-item-action-text class="align-start">
{{ detail.location }}
</v-list-item-action-text>
</v-list-item>
<v-list-item v-for="(symptom, i) in detail.allSymptoms" :key="i">
<v-list-item-content>Symptom {{ i + 1 }}</v-list-item-content>
<v-list-item-action-text class="text-left left">
{{ symptom }}
</v-list-item-action-text>
</v-list-item>
</v-list>
</v-card>
</div>
</v-bottom-sheet>
</div>
</template>

<script>
export default {
props: ["sheet", "detail", "sidebar"],
methods: {
getColor(risk) {
if (risk.toLowerCase() === "low") {
return "#009c4d";
} else if (risk.toLowerCase() === "medium") {
return "#ffa64e";
} else if (risk.toLowerCase() === "high") {
return "#ff6767";
}
}
}
};
</script>
19 changes: 13 additions & 6 deletions covid-19-app-web/src/views-admin/symptoms/HighLevelStatistics.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
>
<v-card class="mx-auto" :flat="true" max-width="344">
<v-card-text>
<p class="display-1 text--primary">{{ getTotalSymptoms }}</p>
<div class="text--primary">{{ title_one }}</div>
<p class="display-1 text-center">{{ getTotalSymptoms }}</p>
<h4 class="text-center">{{ title_one }}</h4>
</v-card-text>
</v-card>
</v-skeleton-loader>
Expand All @@ -24,15 +24,15 @@
>
<v-card class="mx-auto" :flat="true" max-width="344">
<v-card-text>
<p class="display-1 text--primary">
<p class="display-1 text-center">
{{ getMostCommonSymptom }} |
{{
Math.round(
((getMostCommonSymptomCount * 100) / getTotalSymptoms) * 100
) / 100
}}%
</p>
<div class="text--primary">{{ title_two }}</div>
<h4 class="text-center">{{ title_two }}</h4>
</v-card-text>
</v-card>
</v-skeleton-loader>
Expand All @@ -46,10 +46,10 @@
>
<v-card class="mx-auto" :flat="true" max-width="344">
<v-card-text>
<p class="display-1 text--primary">
<p class="display-1 text-center">
{{ getTotalPeoplesWithSymptoms }}
</p>
<div class="text--primary">{{ title_three }}</div>
<h4 class="text-center">{{ title_three }}</h4>
</v-card-text>
</v-card>
</v-skeleton-loader>
Expand Down Expand Up @@ -88,3 +88,10 @@ export default {
}
};
</script>

<style scoped>
.display-1 {
font-size: 2em !important;
color: #303030 !important;
}
</style>
49 changes: 40 additions & 9 deletions covid-19-app-web/src/views-admin/symptoms/Symptoms.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<template>
<v-container>
<v-container class="align-content-center">
<v-expansion-panels popout focusable>
<v-expansion-panel>
<v-expansion-panel class="shadow">
<v-expansion-panel-header>
<v-row>
<v-icon large class="ma-1 mr-3">{{ mdiFilterVariant }}</v-icon>
<p class="display-1 d-inline-flex text--primary left">Filter</p>
<v-icon md class="ma-1 mr-3">{{ mdiFilterVariant }}</v-icon>
<h3 class="align-center font-weight-thin d-inline-flex left">
Filter
</h3>
</v-row>
</v-expansion-panel-header>
<v-expansion-panel-content class="mt-5">
Expand All @@ -20,18 +22,28 @@
</v-expansion-panels>
<HighLevelStatistics class="my-8" />
<DetailSidebar
v-if="$vuetify.breakpoint.mdAndUp"
class="shadow-lg"
:detail="detail"
:sidebar="sidebar"
v-on:close-sidebar="sidebar = false"
/>
<DetailSidebarSmall
class="shadow-lg"
:detail="detail"
:sidebar="sidebar"
:sheet="bottomsheet"
v-else
/>
<v-data-table
:headers="headers"
:options.sync="options"
:items="getPeoplesWithSymptoms"
:server-items-length="getPeopleCount"
:loading="getSymptomStatLoaders.peopleList"
:footer-props="{ 'items-per-page-options': [5, 10, 25, 50] }"
class="elevation-1"
class="elevation-1 shadow"
item-class="table-row"
>
<template v-slot:[`item.actions`]="{ item }">
<v-btn @click="showDetail(item)" small color="primary">Detail</v-btn>
Expand All @@ -43,7 +55,6 @@
<script>
import HighLevelStatistics from "./HighLevelStatistics";
import SymptomFilter from "./SymptomFilter";
import DetailSidebar from "./DetailSidebar";
import { mdiFilterVariant } from "@mdi/js";
import moment from "moment";
Expand All @@ -54,12 +65,14 @@ export default {
components: {
HighLevelStatistics,
SymptomFilter,
DetailSidebar
DetailSidebar: () => import("./DetailSidebar"),
DetailSidebarSmall: () => import("./DetailSidebarSmall")
},
data() {
return {
mdiFilterVariant,
sidebar: false,
bottomsheet: false,
headers: [
{ text: "Date", align: "start", value: "date", sortable: false },
{ text: "Status", value: "status", sortable: false },
Expand Down Expand Up @@ -137,7 +150,11 @@ export default {
else return moment(new Date()).format("YYYY-MM-DD");
},
showDetail(item) {
this.sidebar = true;
if (this.$vuetify.breakpoint.mdAndUp) {
this.sidebar = true;
} else {
this.bottomsheet = true;
}
this.detail = {
id: item.id,
name: item.person,
Expand All @@ -163,4 +180,18 @@ export default {
};
</script>

<style scoped></style>
<style scoped>
.shadow {
background: transparent !important;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(166, 173, 201, 0.2) !important;
border-radius: 15px !important;
}
.shadow-lg {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12) !important;
border-radius: 5px !important;
}
</style>

0 comments on commit c225b0d

Please sign in to comment.