generated from kiei451-winter2021/final
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
184 lines (160 loc) · 6.53 KB
/
index.js
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
183
184
firebase.auth().onAuthStateChanged(async function (user) {
if (user) {
// Signed in
console.log('signed in')
// I wonder if this is necessary
let db = firebase.firestore()
db.collection('users').doc(user.uid).set({
name: user.displayName,
email: user.email
})
const logout = document.querySelector('#sign-in-or-sign-out');
logout.addEventListener('click', (event) => {
event.preventDefault();
firebase.auth().signOut()
console.log("logging out!");
document.location.href = 'index.html'
})
// show user's name in hello message
let name = firebase.auth().currentUser.displayName
console.log(name);
document.querySelector(".welcome-text").insertAdjacentHTML("beforeend", `
<h1 class="welcome-text text-3xl md:text-5xl p-10 text-grey-darker">Welcome Back ${name}! How do you feel today?</h1>
`)
// Listen for the form submit and create/render the index card
document.querySelector("form").addEventListener("submit", async function (event) {
event.preventDefault()
// checkupDate
// height
// weight
// bloodPressure
// restingHeartRate
// notes
// myComments
// declare variables
let username = user.displayName
let currentUserId = firebase.auth().currentUser.uid
// checkupDate
let checkupDate = document.querySelector("#checkupDate").value
console.log(`checkup date is ${checkupDate}`);
// height
let height = document.querySelector("#height").value
console.log(`height is ${height}`);
// weight
let weight = document.querySelector("#weight").value
console.log(`weight is ${weight}`);
// bloodPressure
let bloodPressure = document.querySelector("#bloodPressure").value
console.log(`blood pressure is ${bloodPressure}`);
// restingHeartRate
let restingHeartRate = document.querySelector("#restingHeartRate").value
console.log(`resting heart rate is ${restingHeartRate}`);
// notes
let notes = document.querySelector("#notes").value
console.log(`notes are ${notes}`);
// myComments
let myComments = document.querySelector("#myComments").value
console.log(`My comments are ${myComments}`);
let response = await fetch("/.netlify/functions/create_healthRecord", {
method: "POST",
body: JSON.stringify({
username: username,
currentUserId: currentUserId,
checkupDate: checkupDate,
height: height,
weight: weight,
bloodPressure: bloodPressure,
restingHeartRate: restingHeartRate,
notes: notes,
myComments: myComments,
})
}) //end of response from creation
let indexCard = await response.json()
console.log(response); // repeating back what we just sent to the backend
console.log(indexCard);
// clearing form values on frontend
document.querySelector('#checkupDate').value = ''
document.querySelector('#height').value = ''
document.querySelector('#weight ').value = ''
document.querySelector('#bloodPressure').value = ''
document.querySelector('#restingHeartRate').value = ''
document.querySelector('#notes').value = ''
document.querySelector('#myComments').value = ''
printIndexCard(indexCard) //asks front-end to print the card we just sent
}) // end of form submit
let response = await fetch('/.netlify/functions/get_healthRecords')
let health = await response.json()
console.log(health)
for (let i = 0; i < health.length; i++) {
healthCard = health[i]
// check below line for consistency of name variable
if (healthCard.username == user.displayName) {
console.log('it works!')
let indexCard = healthCard
console.log(indexCard)
printIndexCard(indexCard)
}
}
} else {
// Signed out
console.log('signed out')
//hiding body elements when signed out
document.querySelector('.navigation').classList.add('hidden')
document.querySelector('.header').classList.add('hidden')
document.querySelector('.container-homeCards').classList.add('hidden')
document.querySelector('.healthRecordInputForm').classList.add('hidden')
// Initializes FirebaseUI Auth
let ui = new firebaseui.auth.AuthUI(firebase.auth())
// FirebaseUI configuration
let authUIConfig = {
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
signInSuccessUrl: 'index.html'
}
// Starts FirebaseUI Auth
ui.start('.sign-in-or-sign-out', authUIConfig)
}
})
async function printIndexCard(indexCard) {
console.log("Successfully called printIndexCard");
console.log(checkupDate);
console.log(height);
let indexCardId = indexCard.id
document.querySelector(".container-homeCards").insertAdjacentHTML("beforeend",
`
<div class="homeCard mx-10 my-2 px-4 py-2 max-w-screen-lg rounded-xl border shadow-lg my-4" id="homeCard-1">
<h3 class="font-bold text-grey-darker pb-2">Checkup on ${indexCard.checkupDate}</h3>
<div class="header border-t pt-4 border-gray-300">
<div class="md:flex">
<div class="home-card-left space-y-2 md:w-1/3 pb-2 md:pb-0">
<div class="card-feature-height flex">
<div class="w-1/2 text-grey-darker text-left">Height</div>
<div class="w-1/2 text-grey-darker text-right pr-4">${indexCard.height}</div>
</div>
<div class="card-feature-weight flex">
<div class="w-1/2 text-grey-darker text-left">Weight</div>
<div class="w-1/2 text-grey-darker text-right pr-4">${indexCard.weight}</div>
</div>
<div class="card-feature-blood-pressure flex">
<div class="w-1/2 text-grey-darker text-left">Blood Pressure</div>
<div class="w-1/2 text-grey-darker text-right pr-4">${indexCard.bloodPressure}</div>
</div>
<div class="card-feature-resting-heart-rate flex">
<div class="w-1/2 text-grey-darker text-left">Resting Heart Rate</div>
<div class="w-1/2 text-grey-darker text-right pr-4">${indexCard.restingHeartRate}</div>
</div>
</div>
<div
class="home-card-right space-y-2 pt-2 md:pt-0 md:w-2/3 border-t md:border-t-0 md:border-l border-gray-300 md:px-4">
<div class="text-grey-darker">Notes:</div>
<div class="text-grey-darker">${indexCard.notes}</div>
<div class="text-grey-darker">My Comments:</div>
<div class="text-grey-darker">${indexCard.myComments}</div>
</div>
</div>
</div>
</div>
`
)
}