-
Notifications
You must be signed in to change notification settings - Fork 0
/
me.html
182 lines (169 loc) · 10.6 KB
/
me.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid APP</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="plugins/tailwind/tailwind.min.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body class="min-h-screen min-w-full">
<div id="app">
<div class="px-2 py-3">
<div class="block my-1 text-center">
😷
</div>
<ul class="flex border-b w-100 overflow-x-scroll overflow-y-hidden">
<li class="mr-1">
<a class="bg-white inline-block py-2 px-4 text-indigo-500 hover:text-indigo-800 font-semibold"
href="index.html">Home</a>
</li>
<li class="mr-1">
<a class="bg-white inline-block py-2 px-4 text-indigo-500 hover:text-indigo-800 font-semibold"
href="view-cases.html">Cases</a>
</li>
<li class="mr-1">
<a class="bg-white inline-block py-2 px-4 text-indigo-500 hover:text-indigo-800 font-semibold"
href="view-places.html">Places</a>
</li>
<li class="-mb-px mr-1">
<a class="bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 text-indigo-700 font-semibold"
href="me.html">Me</a>
</li>
<li class="mr-1">
<span class="bg-white inline-block py-2 px-4 text-indigo-500 hover:text-indigo-800 font-semibold"
@click="logout()">Logout</span>
</li>
</ul>
</div>
<section class="text-gray-700 body-font">
<div class="container px-5 pt-5 pb-2 mx-auto h-40 bg-gray-100 text-center">
<div v-if="me">
<h1 class="text-2xl font-bold">{{me.name}}</h1>
<p class="text-gray-600 mt-2">@{{me.username}}</p>
<p class="text-gray-600 mb-3">{{moment(me.createdAt).calendar()}}</p>
<span v-if="me.status == 'Crítico'">🥵</span>
<span v-if="me.status == 'Contagiado'">🤢</span>
<span v-if="me.status == 'Sano'">😜</span>
<span v-if="me.status == ''">Tell us your status.</span>
</div>
</div>
</section>
<div class="flex pt-1 pb-4 px-2 bg-gray-100" v-if="me">
<button class="ml-3 mr-2 w-1/3 py-2 px-4 border border-gray-300 rounded-md"
:class="{ 'bg-indigo-500': me.status == 'Sano' }" @click="updateStatus('Sano')">😜</button>
<button class="mr-2 py-2 w-1/3 px-4 border border-gray-300 rounded-md"
:class="{ 'bg-indigo-500': me.status == 'Contagiado' }" @click="updateStatus('Contagiado')">🤢</button>
<button class="mr-2 py-2 w-1/3 px-4 border border-gray-300 rounded-md"
:class="{ 'bg-indigo-500': me.status == 'Crítico' }" @click="updateStatus('Crítico')">🥵</button>
</div>
<section class="text-gray-700 body-font">
<div class="container px-5 py-5 mx-auto">
<div class="col-sm-2 sp sp-volume w-full" v-if="loading"></div>
<div class="flex flex-wrap -m-2">
<div class="w-full my-3 py-5 px-2">
<h2 class="text-xl font-semibold">Places
<span class="text-base ml-1 px-3 rounded-full bg-gray-200 shadow-lg hover:bg-indigo-200"
@click="addPlaceModal = true"
>Add</span>
</h2>
</div>
<p v-if="ownPlaces.length == 0 && !loading" class="mt-2 w-full">You have visited no places</p>
<p v-if="notOwnedPlaces.length == 0 && !loading" class="mt-2 w-full">There are no other places to show</p>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full" v-for="oplace in ownPlaces">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<div class="inline-block relative w-full">
<label class="text-gray-700">{{oplace.name}}</label>
<input class="absolute right-0 mt-1" type="checkbox" :value="oplace.id"
v-model="checkedPlaces">
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full" v-for="noplace in notOwnedPlaces">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<div class="inline-block relative w-full">
<label class="text-gray-700">{{noplace.name}}</label>
<input class="absolute right-0 mt-1" type="checkbox" :value="noplace.id"
v-model="checkedPlaces">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Update Own places button -->
<button class="fixed right-0 bottom-0 m-10 z-10 px-5 py-1 font-bold bg-indigo-500 text-white text-xl rounded-md"
@click="replacePlaces()" v-if="!addPlaceModal"
>✓</button>
<!-- Add Place Modal -->
<div class="fixed bottom-0 inset-x-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center"
v-if="addPlaceModal">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full"
role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg mb-2 leading-6 font-medium text-gray-900" id="modal-headline">
Add a place
</h3>
<input class="w-full bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
type="text" placeholder="San Sebastian (CR)" v-model="placeFormData.name">
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button type="button"
class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-indigo-500 text-base leading-6 font-medium text-white shadow-sm hover:bg-indigo-600 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition ease-in-out duration-150 sm:text-sm sm:leading-5"
@click="addPlace()">
Submit
</button>
</span>
<span class="flex mt-2 w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button type="button"
class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-gray-200 text-base leading-6 font-medium text-gray-900 shadow-sm hover:bg-gray-400 focus:outline-none transition ease-in-out duration-150 sm:text-sm sm:leading-5"
@click="addPlaceModal = false">
Close
</button>
</span>
</div>
</div>
</div>
<footer class="text-gray-700 body-font">
<div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<span class="ml-3 text-xl">Nicolas Guillen</span>
</a>
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
©
2020 Nicolas Guillen —
<a href="https://www.instagram.com/nicolascalev/" class="text-gray-600 ml-1"
rel="noopener noreferrer" target="_blank">@nicolascalev</a>
</p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
<a class="ml-3 text-gray-500" href="https://github.com/nicolascalev">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5"
viewBox="0 0 24 24">
<path
d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z">
</path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</footer>
</div>
<script src="plugins/moment/moment.min.js"></script>
<script src="plugins/axios/axios.min.js"></script>
<script src="plugins/lodash/lodash.js"></script>
<script src="plugins/vue/vuedev.js"></script>
<script src="assets/js/api.service.js"></script>
<script src="assets/js/me.page.js"></script>
</body>
</html>