Skip to content

Commit 24d580f

Browse files
codingbanditcodingbandit
authored
Merge pull request #104 from HTBox/103_hazard-info-ui
Hazard Information UI
2 parents a79868f + 774b505 commit 24d580f

17 files changed

Lines changed: 363 additions & 117 deletions

File tree

‎2wr-app/public/images/hazards/earthquake-description.png‎

76.3 KB
Loading

‎2wr-app/public/images/hazards/earthquake.png‎

14.2 KB
Loading

‎2wr-app/src/api/hazard-info-api.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import baseApiInstance from './base-api-instance';
22

33
export default {
4-
async createPhoto(photo) {
5-
return (await baseApiInstance.getInstance()).post('photos', photo);
4+
async getAll() {
5+
return (await baseApiInstance.getInstance()).get('hazardinfo-list');
6+
},
7+
8+
async get(id) {
9+
return (await baseApiInstance.getInstance()).get(`hazardinfo-by-id/${id}`);
610
},
711
};

‎2wr-app/src/components/prepare/hazards/hazard-info-list.vue‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,25 @@
1010
indeterminate
1111
color="green"
1212
></v-progress-linear>
13-
<v-data-iterator v-if="!loading" :items="items" disable-pagination disable-sort hide-default-footer
14-
:search="search">
15-
<template v-slot:header>
16-
<v-text-field
17-
v-model="search"
18-
clearable
19-
label="Search"
20-
append-icon="mdi-magnify">
21-
</v-text-field>
22-
</template>
23-
<template v-slot:default="props">
24-
<div class="info-table">
25-
<v-card v-for="item in props.items" :key="item.id" class="my-4" ripple dark>
26-
<v-card-title class="white--text">
27-
<v-col class="col-9">
28-
<!-- <v-icon class="mr-2 white--text">{{item.icon}}</v-icon> -->{{ item.name }}
29-
</v-col>
30-
</v-card-title>
31-
<v-card-text>{{ item.description }}</v-card-text>
32-
</v-card>
33-
</div>
34-
</template>
35-
</v-data-iterator>
13+
<v-row dense>
14+
<v-col
15+
v-for="item in items"
16+
:key="item.id"
17+
cols="6"
18+
>
19+
<v-card
20+
@click="viewItem(item.id)">
21+
<v-img
22+
:src="item.iconUrl"
23+
class="white--text align-end"
24+
gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
25+
height="200px"
26+
>
27+
<v-card-title v-text="item.name"></v-card-title>
28+
</v-img>
29+
</v-card>
30+
</v-col>
31+
</v-row>
3632
</v-container>
3733
</template>
3834

@@ -56,6 +52,9 @@ export default {
5652
methods: {
5753
goBack() {
5854
window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
55+
},
56+
viewItem(id){
57+
this.$router.push(`/prepare/hazardinfo/${id}`);
5958
}
6059
}
6160
}

‎2wr-app/src/components/prepare/hazards/hazard-info.vue‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<template>
2+
<v-container class="py-0">
3+
<v-app-bar app flat dense fixed color="background">
4+
<v-icon class="mr-2" v-on:click="goBack()">mdi-arrow-left</v-icon>
5+
<v-img :src="item.iconUrl" max-height="48" max-width="48" class="mr-2"></v-img>
6+
<v-toolbar-title>{{item ? item.name : 'Hazard Information'}}</v-toolbar-title>
7+
</v-app-bar>
8+
<v-row dense>
9+
<v-col cols="12">
10+
<p class="pa-2 headline">{{item.description}}</p>
11+
</v-col>
12+
<v-col cols="12">
13+
<v-img v-if="mediaUrlIsImage" :src="item.mediaUrl"></v-img>
14+
<!--TODO: Add option for videos once we have some sample videos -->
15+
</v-col>
16+
<v-col cols="12" class="text-center">
17+
<h2>{{item.name}} Safety</h2>
18+
</v-col>
19+
<v-col cols="12" class="text-center">
20+
<v-btn x-large color="primary" width="80%" @click="beforeDialog = true">Before</v-btn>
21+
</v-col>
22+
<v-col cols="12" class="text-center">
23+
<v-btn x-large color="primary" width="80%" @click="duringDialog = true">During</v-btn>
24+
</v-col>
25+
<v-col cols="12" class="text-center">
26+
<v-btn x-large color="primary" width="80%" @click="afterDialog = true">After</v-btn>
27+
</v-col>
28+
<v-col cols="12" class="text-center">
29+
<h2>{{item.name}} Resources</h2>
30+
</v-col>
31+
<v-col cols="12">
32+
<ul class="mb-6">
33+
<li v-for="link in item.externalLinks" :key={link} class="pa-1">
34+
<a :href="link" target="_blank">{{link}}</a><v-icon small class="ml-2">mdi-open-in-new</v-icon></li>
35+
</ul>
36+
</v-col>
37+
</v-row>
38+
<v-dialog
39+
v-model="beforeDialog"
40+
fullscreen
41+
hide-overlay
42+
transition="dialog-bottom-transition"
43+
scrollable
44+
>
45+
<v-card tile color="background">
46+
<v-toolbar class="flex-grow-0 mb-3"
47+
flat
48+
dark
49+
color="primary"
50+
>
51+
<v-btn
52+
icon
53+
dark
54+
@click="beforeDialog = false"
55+
>
56+
<v-icon>mdi-close</v-icon>
57+
</v-btn>
58+
<v-toolbar-title>{{item.name}} Safety: Before</v-toolbar-title>
59+
</v-toolbar>
60+
<v-card-text v-html="item.beforeSafetyDetails">
61+
</v-card-text>
62+
</v-card>
63+
</v-dialog>
64+
<v-dialog
65+
v-model="duringDialog"
66+
fullscreen
67+
hide-overlay
68+
transition="dialog-bottom-transition"
69+
scrollable
70+
>
71+
<v-card tile color="background">
72+
<v-toolbar class="flex-grow-0 mb-3"
73+
flat
74+
dark
75+
color="primary"
76+
>
77+
<v-btn
78+
icon
79+
dark
80+
@click="duringDialog = false"
81+
>
82+
<v-icon>mdi-close</v-icon>
83+
</v-btn>
84+
<v-toolbar-title>{{item.name}} Safety: During</v-toolbar-title>
85+
</v-toolbar>
86+
<v-card-text v-html="item.duringSafetyDetails">
87+
</v-card-text>
88+
</v-card>
89+
</v-dialog>
90+
<v-dialog
91+
v-model="afterDialog"
92+
fullscreen
93+
hide-overlay
94+
transition="dialog-bottom-transition"
95+
scrollable
96+
>
97+
<v-card tile color="background">
98+
<v-toolbar class="flex-grow-0 mb-3"
99+
flat
100+
dark
101+
color="primary"
102+
>
103+
<v-btn
104+
icon
105+
dark
106+
@click="afterDialog = false"
107+
>
108+
<v-icon>mdi-close</v-icon>
109+
</v-btn>
110+
<v-toolbar-title>{{item.name}} Safety: After</v-toolbar-title>
111+
</v-toolbar>
112+
<v-card-text v-html="item.afterSafetyDetails">
113+
</v-card-text>
114+
</v-card>
115+
</v-dialog>
116+
</v-container>
117+
</template>
118+
119+
<script>
120+
import { mapState } from 'vuex';
121+
122+
export default {
123+
data: () => {
124+
return {
125+
beforeDialog: false,
126+
duringDialog: false,
127+
afterDialog: false
128+
};
129+
},
130+
computed: {
131+
...mapState({
132+
item: (state) => state.hazardInfoStore.item,
133+
}),
134+
mediaUrlIsImage: function() {
135+
const mediaUrl = this.item?.mediaUrl?.toLowerCase();
136+
if (!mediaUrl) return false;
137+
138+
return mediaUrl.endsWith(".png") ||
139+
mediaUrl.endsWith(".jpg") ||
140+
mediaUrl.endsWith(".jpeg") ||
141+
mediaUrl.endsWith(".webp") ||
142+
mediaUrl.endsWith(".pjpeg") ||
143+
mediaUrl.endsWith(".svg") ||
144+
mediaUrl.endsWith(".pjp");
145+
}
146+
},
147+
mounted: function () {
148+
// Load the thing
149+
this.$store.dispatch(
150+
`hazardInfoStore/getHazardInfoAsync`,
151+
this.$route.params.id
152+
);
153+
},
154+
methods: {
155+
goBack() {
156+
window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
157+
}
158+
}
159+
}
160+
</script>
161+
162+
<style>
163+
164+
</style>

‎2wr-app/src/components/prepare/prepare-landing.vue‎

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,20 @@
1111

1212
<v-row>
1313
<v-col cols="12">
14+
<v-card
15+
to="prepare/hazardinfo"
16+
color="primary"
17+
class="my-4"
18+
ripple
19+
>
20+
<v-card-title>
21+
<v-icon class="mr-2">mdi-shield-alert-outline</v-icon>
22+
Learn Your Hazards
23+
</v-card-title>
24+
<v-card-text>
25+
<div class="text-subtitle-1">Learn all about common hazards.</div>
26+
</v-card-text>
27+
</v-card>
1428
<v-card
1529
to="/prepare/familyplan"
1630
color="primary"
@@ -19,7 +33,7 @@
1933
>
2034
<v-card-title>
2135
<v-icon class="mr-2">mdi-notebook-multiple</v-icon>
22-
My Family Plan
36+
Make a Plan
2337
</v-card-title>
2438
<v-card-text>
2539
<div class="text-subtitle-1">Make an actionable plan to share with friends and family. Know what to do in the event of a disaster.</div>
@@ -35,15 +49,16 @@
3549
>
3650
<v-card-title>
3751
<v-icon class="mr-2">mdi-medical-bag</v-icon>
38-
Emergency Kits
52+
Build a Kit
3953
</v-card-title>
4054
<v-card-text>
4155
<div class="text-subtitle-1">Create a grab-and-go kit so you have all that you need in the event
4256
of an emergency.</div>
4357
</v-card-text>
4458
</v-card>
4559

46-
<v-card
60+
<!-- Hiding for now. Requirements in progress
61+
<v-card
4762
to="prepare/hazardhunt"
4863
color="primary"
4964
class="my-4"
@@ -57,37 +72,8 @@
5772
<div class="text-subtitle-1">Observe your surroundings and identify common hazards that could
5873
mean danger in certain situations.</div>
5974
</v-card-text>
60-
</v-card>
75+
</v-card> -->
6176

62-
<v-card
63-
to="prepare/hazardinfo"
64-
color="primary"
65-
class="my-4"
66-
ripple
67-
>
68-
<v-card-title>
69-
<v-icon class="mr-2">mdi-shield-alert-outline</v-icon>
70-
Hazard Information
71-
</v-card-title>
72-
<v-card-text>
73-
<div class="text-subtitle-1">Learn all about common hazards.</div>
74-
</v-card-text>
75-
<v-card-text align="left">
76-
77-
</v-card-text>
78-
</v-card>
79-
80-
<v-card color="primary" class="my-4" ripple>
81-
<v-card-title>
82-
<v-icon class="mr-2"
83-
>mdi-human-greeting-proximity</v-icon
84-
>
85-
Connect with the Community
86-
</v-card-title>
87-
<v-card-text>
88-
<div class="text-subtitle-1">ShakeOut information</div>
89-
</v-card-text>
90-
</v-card>
9177
</v-col>
9278
</v-row>
9379
</v-container>

‎2wr-app/src/router/index.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import EmergencyKitCreatePage from '../views/prepare/emergency-kits/emergency-ki
88
import EmergencyKitEditPage from '../views/prepare/emergency-kits/emergency-kit-edit.vue';
99
import HazardHuntListing from '../views/prepare/hazards/hazard-hunt-list-view.vue';
1010
import HazardInfoListing from '../views/prepare/hazards/hazard-info-list-view.vue';
11+
import HazardInfo from '../views/prepare/hazards/hazard-info-view.vue';
1112
import Recent from '../views/recent/recent.vue';
1213
import Settings from '../views/settings/settings.vue';
1314

@@ -66,13 +67,19 @@ const routes = [{
6667
}
6768
}, {
6869
path: '/prepare/hazardinfo',
69-
name: 'hazardinfo',
70+
name: 'hazardinfolist',
7071
component: HazardInfoListing,
7172
meta: {
7273
requiresAuth: true
7374
}
74-
},
75-
{
75+
}, {
76+
path: '/prepare/hazardinfo/:id',
77+
name: 'hazardinfodetails',
78+
component: HazardInfo,
79+
meta: {
80+
requiresAuth: true
81+
}
82+
}, {
7683
path: '/recent',
7784
name: 'recent',
7885
component: Recent

0 commit comments

Comments
 (0)