Skip to content

Commit 0264480

Browse files
mkazinmkazin
authoredJun 17, 2017
Merge pull request #3 from HackingForGood/importing-codelab-base
Cloned projectView into teacher/project/parent
2 parents 0caf78d + faa2dbc commit 0264480

File tree

6 files changed

+536
-3
lines changed

6 files changed

+536
-3
lines changed
 

‎scripts/main.js

+5
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,11 @@ FriendlyChat.prototype.onAuthStateChanged = function(user) {
189189
// Hide sign-in button.
190190
this.signInButton.setAttribute('hidden', 'true');
191191

192+
// TODO: page redirection, use this field, compare to harcoded user list for presention
193+
if (this.auth.currentUser.email == 'mkazin@gmail.com') {
194+
window.location.href = '/views/teacherView.html';
195+
}
196+
192197
// We load currently existing chant messages.
193198
this.loadMessages();
194199

‎scripts/parentView.js

+198
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
2+
function ParentView() {
3+
4+
this.checkSetup();
5+
6+
// Shortcuts to DOM Elements.
7+
this.messageList = document.getElementById('messages');
8+
this.messageForm = document.getElementById('message-form');
9+
this.messageInput = document.getElementById('message');
10+
this.submitButton = document.getElementById('submit');
11+
this.submitImageButton = document.getElementById('submitImage');
12+
this.imageForm = document.getElementById('image-form');
13+
this.mediaCapture = document.getElementById('mediaCapture');
14+
this.userPic = document.getElementById('user-pic');
15+
this.userName = document.getElementById('user-name');
16+
this.signInButton = document.getElementById('sign-in');
17+
this.signOutButton = document.getElementById('sign-out');
18+
this.signInSnackbar = document.getElementById('must-signin-snackbar');
19+
20+
// Saves message on form submit.
21+
this.signOutButton.addEventListener('click', this.signOut.bind(this));
22+
this.signInButton.addEventListener('click', this.signIn.bind(this));
23+
24+
this.initFirebase();
25+
}
26+
27+
// Sets up shortcuts to Firebase features and initiate firebase auth.
28+
ParentView.prototype.initFirebase = function() {
29+
// Shortcuts to Firebase SDK features.
30+
this.auth = firebase.auth();
31+
this.database = firebase.database();
32+
// Initiates Firebase auth and listen to auth state changes.
33+
this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
34+
};
35+
36+
// Checks that the Firebase SDK has been correctly setup and configured.
37+
ParentView.prototype.checkSetup = function() {
38+
if (!window.firebase || !(firebase.app instanceof Function) || !firebase.app().options) {
39+
window.alert('You have not configured and imported the Firebase SDK. ' +
40+
'Make sure you go through the codelab setup instructions and make ' +
41+
'sure you are running the codelab using `firebase serve`');
42+
}
43+
};
44+
45+
// Signs-in Friendly Chat.
46+
ParentView.prototype.signIn = function() {
47+
// Sign in Firebase using popup auth and Google as the identity provider.
48+
var provider = new firebase.auth.GoogleAuthProvider();
49+
this.auth.signInWithPopup(provider);
50+
};
51+
52+
// Signs-out of Friendly Chat.
53+
ParentView.prototype.signOut = function() {
54+
// Sign out of Firebase.
55+
this.auth.signOut();
56+
};
57+
58+
// Saves the messaging device token to the datastore.
59+
ParentView.prototype.saveMessagingDeviceToken = function() {
60+
firebase.messaging().getToken().then(function(currentToken) {
61+
if (currentToken) {
62+
console.log('Got FCM device token:', currentToken);
63+
// Saving the Device Token to the datastore.
64+
firebase.database().ref('/fcmTokens').child(currentToken)
65+
.set(firebase.auth().currentUser.uid);
66+
} else {
67+
// Need to request permissions to show notifications.
68+
this.requestNotificationsPermissions();
69+
}
70+
}.bind(this)).catch(function(error){
71+
console.error('Unable to get messaging token.', error);
72+
});
73+
};
74+
75+
// Requests permissions to show notifications.
76+
ParentView.prototype.requestNotificationsPermissions = function() {
77+
console.log('Requesting notifications permission...');
78+
firebase.messaging().requestPermission().then(function() {
79+
// Notification permission granted.
80+
this.saveMessagingDeviceToken();
81+
}.bind(this)).catch(function(error) {
82+
console.error('Unable to get permission to notify.', error);
83+
});
84+
};
85+
86+
// Triggers when the auth state change for instance when the user signs-in or signs-out.
87+
ParentView.prototype.onAuthStateChanged = function(user) {
88+
if (user) { // User is signed in!
89+
// Get profile pic and user's name from the Firebase user object.
90+
var profilePicUrl = user.photoURL;
91+
var userName = user.displayName;
92+
93+
// Set the user's profile pic and name.
94+
this.userPic.style.backgroundImage = 'url(' + (profilePicUrl || '/images/profile_placeholder.png') + ')';
95+
this.userName.textContent = userName;
96+
97+
// Show user's profile and sign-out button.
98+
this.userName.removeAttribute('hidden');
99+
this.userPic.removeAttribute('hidden');
100+
this.signOutButton.removeAttribute('hidden');
101+
102+
// Hide sign-in button.
103+
this.signInButton.setAttribute('hidden', 'true');
104+
105+
// We load currently existing chant messages.
106+
this.loadData();
107+
108+
// We save the Firebase Messaging Device token and enable notifications.
109+
this.saveMessagingDeviceToken();
110+
} else { // User is signed out!
111+
// Hide user's profile and sign-out button.
112+
this.userName.setAttribute('hidden', 'true');
113+
this.userPic.setAttribute('hidden', 'true');
114+
this.signOutButton.setAttribute('hidden', 'true');
115+
116+
// Show sign-in button.
117+
this.signInButton.removeAttribute('hidden');
118+
}
119+
};
120+
121+
122+
window.onload = function() {
123+
window.parentView = new ParentView();
124+
console.log("onload");
125+
window.parentView.loadData();
126+
};
127+
128+
ParentView.prototype.loadData = function() {
129+
130+
console.log("loadData");
131+
132+
// Reference to the /messages/ database path.
133+
this.teacherRef = this.database.ref('Class');
134+
// Make sure we remove all previous listeners.
135+
this.teacherRef.off();
136+
137+
this.steps = []
138+
console.log(this.steps);
139+
var self = this;
140+
// Loads the last 12 messages and listen for new ones.
141+
var setData = function(data) {
142+
// var val = data.val();
143+
console.log("setData");
144+
console.log(data.val());
145+
// console.log(val);
146+
if (data.val()['Steps']) {
147+
self.steps = data.val()['Steps'];
148+
console.log('Steps found!')
149+
console.log(self.steps);
150+
this.rebuildTable();
151+
} else {
152+
console.log("No steps found in val():");
153+
console.log(data.val());
154+
}
155+
}.bind(this);
156+
this.teacherRef.limitToLast(12).on('child_added', setData);
157+
this.teacherRef.limitToLast(12).on('child_changed', setData);
158+
};
159+
160+
161+
ParentView.prototype.rebuildTable = function() {
162+
163+
console.log("rebuildTable");
164+
console.log(this.steps);
165+
166+
var html = '<table border="1">';
167+
html += "<tr>";
168+
html += "<th>Id</th>";
169+
html += "<th>Due Date</th>";
170+
html += "<th>Description</th>";
171+
html += "<th>StepType</th>";
172+
html += "</tr>";
173+
174+
if (this.steps) {
175+
176+
for (var key in this.steps) {
177+
var curr = this.steps[key];
178+
179+
html += "<tr>";
180+
html += "<td>" + curr.StepId + "</td>";
181+
html += "<td>" + curr.Date + "</td>";
182+
html += "<td>" + curr.Description + "</td>";
183+
html += "<td>" + curr.StepType + "</td>";
184+
html += "</tr>";
185+
}
186+
187+
}
188+
html += "</table>"
189+
190+
// Pass our data to the template
191+
// var theCompiledHtml = theTemplate(context);
192+
193+
console.log("Compiled HTML: " + html);
194+
// Add the compiled html to the page
195+
// $('.content-placeholder').html(theCompiledHtml);
196+
197+
$('.content-placeholder').html(html);
198+
};

‎scripts/teacherView.js

+236
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
2+
function TeacherView() {
3+
4+
this.checkSetup();
5+
6+
// Shortcuts to DOM Elements.
7+
this.messageList = document.getElementById('messages');
8+
this.messageForm = document.getElementById('message-form');
9+
this.messageInput = document.getElementById('message');
10+
this.submitButton = document.getElementById('submit');
11+
this.submitImageButton = document.getElementById('submitImage');
12+
this.imageForm = document.getElementById('image-form');
13+
this.mediaCapture = document.getElementById('mediaCapture');
14+
this.userPic = document.getElementById('user-pic');
15+
this.userName = document.getElementById('user-name');
16+
this.signInButton = document.getElementById('sign-in');
17+
this.signOutButton = document.getElementById('sign-out');
18+
this.signInSnackbar = document.getElementById('must-signin-snackbar');
19+
20+
// Saves message on form submit.
21+
this.signOutButton.addEventListener('click', this.signOut.bind(this));
22+
this.signInButton.addEventListener('click', this.signIn.bind(this));
23+
24+
this.initFirebase();
25+
}
26+
27+
// Sets up shortcuts to Firebase features and initiate firebase auth.
28+
TeacherView.prototype.initFirebase = function() {
29+
// Shortcuts to Firebase SDK features.
30+
this.auth = firebase.auth();
31+
this.database = firebase.database();
32+
// Initiates Firebase auth and listen to auth state changes.
33+
this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
34+
};
35+
36+
// Checks that the Firebase SDK has been correctly setup and configured.
37+
TeacherView.prototype.checkSetup = function() {
38+
if (!window.firebase || !(firebase.app instanceof Function) || !firebase.app().options) {
39+
window.alert('You have not configured and imported the Firebase SDK. ' +
40+
'Make sure you go through the codelab setup instructions and make ' +
41+
'sure you are running the codelab using `firebase serve`');
42+
}
43+
};
44+
45+
// Signs-in Friendly Chat.
46+
TeacherView.prototype.signIn = function() {
47+
// Sign in Firebase using popup auth and Google as the identity provider.
48+
var provider = new firebase.auth.GoogleAuthProvider();
49+
this.auth.signInWithPopup(provider);
50+
};
51+
52+
// Signs-out of Friendly Chat.
53+
TeacherView.prototype.signOut = function() {
54+
// Sign out of Firebase.
55+
this.auth.signOut();
56+
};
57+
58+
// Saves the messaging device token to the datastore.
59+
TeacherView.prototype.saveMessagingDeviceToken = function() {
60+
firebase.messaging().getToken().then(function(currentToken) {
61+
if (currentToken) {
62+
console.log('Got FCM device token:', currentToken);
63+
// Saving the Device Token to the datastore.
64+
firebase.database().ref('/fcmTokens').child(currentToken)
65+
.set(firebase.auth().currentUser.uid);
66+
} else {
67+
// Need to request permissions to show notifications.
68+
this.requestNotificationsPermissions();
69+
}
70+
}.bind(this)).catch(function(error){
71+
console.error('Unable to get messaging token.', error);
72+
});
73+
};
74+
75+
// Requests permissions to show notifications.
76+
TeacherView.prototype.requestNotificationsPermissions = function() {
77+
console.log('Requesting notifications permission...');
78+
firebase.messaging().requestPermission().then(function() {
79+
// Notification permission granted.
80+
this.saveMessagingDeviceToken();
81+
}.bind(this)).catch(function(error) {
82+
console.error('Unable to get permission to notify.', error);
83+
});
84+
};
85+
86+
// Triggers when the auth state change for instance when the user signs-in or signs-out.
87+
TeacherView.prototype.onAuthStateChanged = function(user) {
88+
if (user) { // User is signed in!
89+
// Get profile pic and user's name from the Firebase user object.
90+
var profilePicUrl = user.photoURL;
91+
var userName = user.displayName;
92+
93+
// Set the user's profile pic and name.
94+
this.userPic.style.backgroundImage = 'url(' + (profilePicUrl || '/images/profile_placeholder.png') + ')';
95+
this.userName.textContent = userName;
96+
97+
// Show user's profile and sign-out button.
98+
this.userName.removeAttribute('hidden');
99+
this.userPic.removeAttribute('hidden');
100+
this.signOutButton.removeAttribute('hidden');
101+
102+
// Hide sign-in button.
103+
this.signInButton.setAttribute('hidden', 'true');
104+
105+
// We load currently existing chant messages.
106+
this.loadData();
107+
108+
// We save the Firebase Messaging Device token and enable notifications.
109+
this.saveMessagingDeviceToken();
110+
} else { // User is signed out!
111+
// Hide user's profile and sign-out button.
112+
this.userName.setAttribute('hidden', 'true');
113+
this.userPic.setAttribute('hidden', 'true');
114+
this.signOutButton.setAttribute('hidden', 'true');
115+
116+
// Show sign-in button.
117+
this.signInButton.removeAttribute('hidden');
118+
}
119+
};
120+
121+
122+
window.onload = function() {
123+
window.teacherView = new TeacherView();
124+
console.log("onload");
125+
window.teacherView.loadData();
126+
};
127+
128+
TeacherView.prototype.loadData = function() {
129+
130+
console.log("loadData");
131+
132+
// Reference to the /messages/ database path.
133+
this.teacherRef = this.database.ref('Class');
134+
// Make sure we remove all previous listeners.
135+
this.teacherRef.off();
136+
137+
this.steps = []
138+
this.students = []
139+
console.log(this.steps);
140+
var self = this;
141+
// Loads the last 12 messages and listen for new ones.
142+
var setData = function(data) {
143+
console.log("setData");
144+
145+
var val = data.val();
146+
console.log(val);
147+
148+
if (val['Steps']) {
149+
self.steps = val['Steps'];
150+
console.log('Steps found!')
151+
console.log(self.steps);
152+
this.rebuildProjectTable();
153+
} else if (val['Student1']) {
154+
self.students = val;
155+
console.log('Students found!')
156+
console.log(self.students);
157+
this.rebuildStudentsTable();
158+
} else {
159+
console.log("Neither steps nor students found in val:");
160+
console.log(val);
161+
}
162+
}.bind(this);
163+
this.teacherRef.limitToLast(12).on('child_added', setData);
164+
this.teacherRef.limitToLast(12).on('child_changed', setData);
165+
};
166+
167+
168+
TeacherView.prototype.rebuildProjectTable = function() {
169+
170+
console.log("rebuildTable");
171+
console.log(this.steps);
172+
173+
var html = '<table border="1">';
174+
html += "<tr>";
175+
html += "<th>Id</th>";
176+
html += "<th>Due Date</th>";
177+
html += "<th>Description</th>";
178+
html += "<th>StepType</th>";
179+
html += "<th>Update</th>";
180+
html += "</tr>";
181+
182+
if (this.steps) {
183+
184+
for (var key in this.steps) {
185+
var curr = this.steps[key];
186+
187+
html += "<tr>";
188+
html += "<td>" + curr.StepId + "</td>";
189+
html += "<td>" + curr.Date + "</td>";
190+
html += "<td>" + curr.Description + "</td>";
191+
html += "<td>" + curr.StepType + "</td>";
192+
html += '<td><button id="update_"' + curr.StepId.toString() + '">Update</button></td>';
193+
html += "</tr>";
194+
195+
}
196+
197+
}
198+
html += "</table>"
199+
200+
$('.content-placeholder').html(html);
201+
};
202+
203+
TeacherView.prototype.rebuildStudentsTable = function() {
204+
205+
console.log("rebuildStudentsTable");
206+
console.log(this.students);
207+
208+
var html = '<table border="1">';
209+
html += "<tr>";
210+
html += "<th>Id</th>";
211+
html += "<th>Name</th>";
212+
html += "<th>Email</th>";
213+
html += "<th>Parent Email</th>";
214+
html += "<th>Current Step</th>";
215+
html += "</tr>";
216+
217+
if (this.students) {
218+
219+
for (var key in this.students) {
220+
var curr = this.students[key];
221+
222+
html += "<tr>";
223+
html += "<td>" + curr.StudentId + "</td>";
224+
html += "<td>" + curr.StudentName + "</td>";
225+
html += "<td>" + curr.StudentEmail + "</td>";
226+
html += "<td>" + curr.ParentEmail + "</td>";
227+
html += "<td>" + curr.Subject.StepId + "</td>";
228+
html += "</tr>";
229+
230+
}
231+
232+
}
233+
html += "</table>"
234+
235+
$('.student-table-placeholder').html(html);
236+
};

‎views/parentView.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
<html>
3+
<header>
4+
<div id="user-container">
5+
<div hidden id="user-pic"></div>
6+
<div hidden id="user-name"></div>
7+
<button hidden id="sign-out" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
8+
Sign-out
9+
</button>
10+
<button hidden id="sign-in" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
11+
<i class="material-icons">account_circle</i>Sign-in with Google
12+
</button>
13+
</div>
14+
</header>
15+
16+
<!-- Handlebars.registerHelper('list', function(items, options) {
17+
var out = "<ul>";
18+
19+
for(var i=0, l=items.length; i<l; i++) {
20+
out = out + "<li>" + options.fn(items[i]) + "</li>";
21+
}
22+
23+
return out + "</ul>";
24+
});
25+
-->
26+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
27+
28+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> -->
29+
30+
<!-- <script src="../libs/handlebars.min.js"></script> -->
31+
32+
<!-- <p>Before list</p> -->
33+
<!-- <script id="project-template" type="text/x-handlebars-template"> -->
34+
<!-- {{#list steps}} {{Date}} {{StepType}} {{Description}} {{/list}} -->
35+
<!-- </script> -->
36+
<!-- <p>After list</p> -->
37+
38+
39+
<div class="content-placeholder"></div>
40+
41+
42+
<script src="/__/firebase/3.8.0/firebase.js"></script>
43+
<script src="/__/firebase/init.js"></script>
44+
45+
<script src="../scripts/parentView.js"></script>
46+
47+
</html>

‎views/projectView.html

-3
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,12 @@
3636
<!-- <p>After list</p> -->
3737

3838

39-
Before placeholder<br>
4039
<div class="content-placeholder"></div>
41-
After placeholder<br>
4240

4341

4442
<script src="/__/firebase/3.8.0/firebase.js"></script>
4543
<script src="/__/firebase/init.js"></script>
4644

47-
<!-- <script src="../scripts/main.js"></script> -->
4845
<script src="../scripts/projectView.js"></script>
4946

5047
</html>

‎views/teacherView.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
2+
<html>
3+
<header>
4+
<div id="user-container">
5+
<div hidden id="user-pic"></div>
6+
<div hidden id="user-name"></div>
7+
<button hidden id="sign-out" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
8+
Sign-out
9+
</button>
10+
<button hidden id="sign-in" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
11+
<i class="material-icons">account_circle</i>Sign-in with Google
12+
</button>
13+
</div>
14+
</header>
15+
16+
<!-- Handlebars.registerHelper('list', function(items, options) {
17+
var out = "<ul>";
18+
19+
for(var i=0, l=items.length; i<l; i++) {
20+
out = out + "<li>" + options.fn(items[i]) + "</li>";
21+
}
22+
23+
return out + "</ul>";
24+
});
25+
-->
26+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
27+
28+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> -->
29+
30+
<!-- <script src="../libs/handlebars.min.js"></script> -->
31+
32+
<!-- <p>Before list</p> -->
33+
<!-- <script id="project-template" type="text/x-handlebars-template"> -->
34+
<!-- {{#list steps}} {{Date}} {{StepType}} {{Description}} {{/list}} -->
35+
<!-- </script> -->
36+
<!-- <p>After list</p> -->
37+
38+
<h2>Project plan:</h2>
39+
<div class="content-placeholder"></div>
40+
<hr>
41+
<h2>Students</h2>
42+
<div class="student-table-placeholder"></div>
43+
44+
45+
<script src="/__/firebase/3.8.0/firebase.js"></script>
46+
<script src="/__/firebase/init.js"></script>
47+
48+
<script src="../scripts/teacherView.js"></script>
49+
50+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.