Please enable JavaScript.

Coggle requires JavaScript to display documents.

Letterkenny Chat App Structure & Data Pathways (AngularJS/Firebase)…

- - - - <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()"]
  - - - '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()"]
  - - - <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>
- - - - 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]
    - - 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??
    - - 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(); }
  - - - 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??// }) }
    - - 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 }); }
    - - 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 }); }
  - - - login() { return { restrict: 'E', scope: {}, templateUrl: 'templates/directives/login.html', controller: 'UserCtrl', controllerAs: 'vm' }; }