Please enable JavaScript.
Coggle requires JavaScript to display documents.
Letterkenny Chat App Structure & Data Pathways (AngularJS/Firebase)…
Letterkenny Chat
App Structure & Data Pathways (AngularJS/Firebase)
Templates
home.html
<nav>
<btn-group>
chat-dropdown [utilizes Bootstrap uib-dropdown]
'CHAT' <button> [uib-dropdown toggle]
<ul> [rooms-list dropdown menu]
'New Room' <button> [
ng-click="home.addRoom()"
]
menu item <li> [
ng-repeat="room in home.rooms"
]
'{{
room.name
}}' <button> [
ng-click="home.setCurrentRoom(room)"
]
messages [utilizes
ng-show
*dependent on status of uib dd toggle]
'{{
home.currentRoom.name
}}' <div> [messages-header]
<table> [messages-body]
<tr> [messages-row
ng-repeat="message in home.messages"
]
'{{
message.username
}}' <td>
'{{
message.content
}}' <td>
'{{
message.sent_at
}}' <td>
<table> [send-new-message]
<form> [send-new-message]
<tr> [single-message-row]
3 more items...
login-dropdown [utilizes
ng-show
*dependent on status of !home.userIsLoggedIn]
'LOGIN' <button> [uib-dropdown toggle]
<ul>
<login>
[load login directive template]
<table> [current-username-display
ng-show
*dependent on status of home.userIsLoggedIn]
<tr>
'{{
home.userName
}}' <td>
'LOGOUT' <td><button> [
ng-click="home.logout()"
]
createRoomModal.html
<section> [modal-box]
'Create New Room' <div> [modal-header]
'Enter a Room Name' <div> [modal-body]
<input> [
ng-model="modal.newRoom.$value"
]
<div> [modal-footer]
'Cancel' <button> [
ng-click="modal.cancel()"
]
'Create Room' <button> [
ng-click="modal.createRoom()"
]
directives
login.html
<form> [login-form
ng-submit="vm.login()"
]
form validation enforced with
*ng-class
<div> [form-group username]
'Username' <label>
<input> [
ng-model="vm.username.$value"
]
<span> [
ng-show
error msg 'Username is required']
<div> [form-group email]
'Email' <label>
<input> [
ng-model="vm.email.$value"
]
<span> [
ng-show
error msg 'Email address is required']
<div> [form-group password]
<input> [
ng-model="vm.password.$value"
]
'Password' <label>
<span> [
ng-show
error msg 'Password is required']
<div> [form-actions]
'Submit' <button>
JS
controllers
HomeControl.js
declared vars: var home = this,
$scope.authObj = $firebaseAuth()
& var firebaseUser =
$scope.authObj.$getAuth();
local vars:
home.rooms = Room.all
,
home.currentRoom = null, home.messages = null
, home.firebaseUser = firebaseUser,
home.currentUser, home.userIsLoggedIn
Authentication methods
home.clearUserAuth()
{
AuthService.isUserLoggedIn(firebaseUser, home)
;
if (firebaseUser) { //sign user out of Firebase//
$scope.authObj.$signOut()
;
home.userIsLoggedIn = false; }}
home.logout()
{
home.clearUserAuth()
;
//clear cookies//
AuthService.clearCredentials();
//get user object from cookies to set currentUser to undefined ?? is this 2nd step actually happening??//
AuthService.getUserObject()
; }
//listens for sign in & sign out//
$scope.authObj.$onAuthStateChanged(function(firebaseUser)
{ if (firebaseUser != undefined) { currentUser.$cookies.getObject('currentUser'); home.firebaseUser = firebaseUser; home.userName = currentUser.username; home.userIsLoggedIn = true; } else { home.userIsLoggedIn = false; } // ?? is this working properly??// }); }
methods called on page load
//if there's a current firebaseUser, log them out and set home.userIsLoggedIn to false//
home.clearUserAuth()
//clear cookies//
AuthService.clearCredentials()
Room/Message methods
home.setCurrentRoom(room)
{ home.currentRoom = room; home.messages =
Message.getByRoomID(home.currentRoom.$id)
; }
home.addRoom()
{
$uib.Modal.open
({ templateUrl: '/templates/createRoomModal.html', size: 'sm', controller: 'ModalCtrl as modal'}); }
home.send()
{ if (home.text && home.currentRoom) { Message.send(home.userName, home.text, home.currentRoom); home.text = ' '; } else { alert("You must choose a room to chat!); } }
DD Menu methods
home.status = { isopen1: false, isopen2: false }
home.toggled(open)
{ $log.log('Dropdown is now: ', open); }
home.toggleDropdown = function($event)
{ $event.preventDefault(); $event.stopPropagation(); home.status.isopen = !home.status.isopen; }
home.appendtoEl
= angular.element(document.querySelector('$dropdown-long-content'));
dependencies [Room, Message, AuthService, $log, $uibModal, $scope, $firebaseAuth, $cookies]
UserCtrl.js
declared vars: var vm = this; var userEmail = null; var userPassword = null; var userName = null;
$scope.authObj = $firebaseAuth()
; & var firebaseUser =
$scope.authObj.$getAuth()
;
local vars:
vm.userIsLoggedIn = false; vm.currentUser;
methods
vm.login()
{ //grab & store user info from login form// userEmail = vm.email.$value; userName = vm.username.$value; userPassword = vm.password.$value; //authenticate user with AngularFire// var credential =
firebase.auth.EmailAuthProvider.credential( userEmail, userPassword); $scope.authObj.$signInWithCredental(credential)
.then(function(firebaseUser) { var userUID = firebaseUser.uid; //store user info locally//
AuthService.storeUserLocally(userEmail, userName, userPassword, userUID)
; //double check that user is logged in and set userIsLoggedIn to true//
AuthService.isUserLoggedIn(firebaseUser, vm)
; //get user object from cookies to set currentUser to object value//
AuthService.getUserObject()
; vm.currentUser =
AuthService.currentUser;
}).catch(function(error) { //?? nothing is happening here ??// } except {
register()
; }); }
var register()
{ //create & login new user with AngularFire//
$scope.authObj.$createUserWithEmailandPassword(userEmail, userPassword)
.then( function(firebaseUser) { var userUID = firebaseUser.uid; //store user info locally//
AuthService.storeUserLocally(userEmail, userName, userPassword, userUID)
; //double check that user is logged in and set userIsLoggedIn to true//
AuthService.isUserLoggedIn(firebaseUser, vm)
; //add user to firebase db//
AuthService.addUser()
; //get user object from cookies and set currentUser to object value//
AuthService.getUserObject()
; vm.currentUser = AuthService.currentUser; }).catch( function(error) { //console msg & alert only, no explicit redirect??// });
dependencies [AuthService, $scope, $uibModal, $firebaseAuth, $cookies]
looks like $uibModal & $cookies is never used??
ModalCtrl.js
dependencies [Room, AuthService, $uibModal, $cookies]
looks like AuthService & $cookies is never used??
methods
this.cancel()
{
$uibModalInstance.dismiss();
};
this.createRoom()
{
Room.add(this.newRoom.$value);
$uibModalInstance.close();
}
services
AuthenticationService.js
dependencies [$firebaseArray, $cookies]
declared vars: var AuthService = {}; var ref =
firebase.database().ref().child("users")
; var users =
$firebaseArray(ref)
local vars: AuthService.all = users;
methods
AuthService.getUserObject()
{ AuthService.currentUser =
$cookies.getObject('currentUser')
; return AuthService.currentUser; }
AuthService.clearCredentials()
{
$cookies.remove('currentUser')
; }
AuthService.storeUserLocally(userEmail, userName, userPassword, userUID)
{ var currentUser = { email: userEmail, username: userName, password: userPassword, uid: userUID };
$cookies.putObject('currentUser', currentUser)
; }
AuthService.isUserLoggedIn(firebaseUser, root)
{ if (firebaseUser)
root
.userIsLoggedIn = true; return; //need this return??// } else {
root
.userIsLoggedIn = false; } }
AuthService.addUser()
{ var currentUser =
$cookies.getObject('currentUser')
;
user.$add({ email: currentUser.email, username: currentUser.username, password: currentUser.password, uid: currentUser.uid, account_created:
firebase.database.ServerValue.TIMESTAMP
})
.then( function() { //only thing here is console msg??// }) }
RoomService.js
dependencies [$firebaseArray]
declared vars: var Room = {}; var ref =
firebase.database().ref().child("rooms")
; var rooms =
$firebaseArray(ref)
;
local vars = Room.all = rooms;
methods
Room.add(room)
{
rooms.$add({ name: room, created_at:
firebase.database.ServerValue.TIMESTAMP
})
; }
MessageService.js
dependencies: [$firebaseArray]
declared vars: var Message = {}; var ref =
firebase.database().ref().child("messages")
; var messages =
$firebaseArray(ref)
;
local vars: Message.all = messages;
methods
Message.getByRoomID(roomID)
{ return
$firebaseArray(ref.orderByChild('roomID').equalTo(roomID)
; }
Message.send(userName, content, room)
{
messages.$add({ username: userName, content: content, sent_at:
firebase.database.ServerValue.TIMESTAMP
, roomID: room.$id })
; }
directives
loginDirective.js
login()
{ return { restrict: 'E', scope: {}, templateUrl: 'templates/directives/login.html', controller: 'UserCtrl', controllerAs: 'vm' }; }
app.js
function config [$locationProvider(html5mode) & $stateProvider(set home url, controller & templateUrl)]
dependencies [ui.router, firebase, ui.bootstrap, ngCookies]
Assets
styles
home.css
main.css
normalize.css
images
letterkenny-chat_landing_background_2.png
letterkenny-chat_navbar_background.png
Build
index.html
application entry point [ui-view]
load styles & scripts
configure firebase connection
firebaserules.txt
README.md
LICENSE
package.json
create app object with name, author info, repo info and dependencies
server.js
sets up routing, local port and route error messaging
node_modules
contains dependency packages not accessed via CDN, stored in local machine or server
Firebase