Chat example with Firebase

Created for SO question 'How to combine private and public messages?'

by awolf2904

HTML

<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/1.1.3/angularfire.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- created for this SO 
http://stackoverflow.com/questions/34491935/how-to-combine-two-firebasearrays-into-one

How to setup this fiddle?
1. Change FBURL constant to your app
2. Create a user for password provider in firebase dashboard
3. Enter credentials in $authWithPassword

-->
<div ng-app="myApp" ng-controller="ChatCtrl as chatCtrl">
  <form>
    visiblity (checked = private):
    <input ng-model="private" type="checkbox" />
    <input placeholder="Message..." ng-model="newMessage">
    <button type="submit" ng-click="chatCtrl.addMessage({uid: user.uid,
            text: newMessage,
            visibility: private? 'private': 'public'});newMessage = null;">
      send</button>
  </form>


  <!-- create directive for ng-if="user.uid == message.uid" => is-owner -->

  <div class="list-group" id="messages" ng-show="chatCtrl.messages.length">
    <div class="list-group-item" ng-if="message" ng-repeat="message in (chatCtrl.messages | reverse | replacePrivate: chatCtrl.privateMessages) track by $index">
      <!-- <div class="list-group-item">-->
      <!-- ng-if="checkPrivateUser(message)">-->
      <!-- ng-if = false if user != private user -->
      <!-- ng-init="message = isPrivate(message) ? getPrivate(message.privateId): message"> -->
      <h4 class="list-group-item-heading"><strong>{{chatCtrl.getDisplayName(message.uid) || 'anonymous'}}: </strong>
                    <div class="form-group">
                        <form class="form-inline" ng-if="chatCtrl.editMode[message.$id]">
                            <input class="form-control"  ng-model="message.text"...

JavaScript

(function(angular) {
    "use strict";

    var app = angular.module('myApp', [
      //'ngRoute', 
      'firebase.utils', 'firebase'
    ]);

    app.constant('FBURL', 'https://<your-app>.firebaseio.com');

    app.controller('ChatCtrl', ChatController);

    function ChatController(Auth, $scope, messageList, privateMessageList, $q) {

      var vm = this,
        backupMessage = ''; // save message for undo on cancel click


      Auth.$authWithPassword({
          email: '<your-login-email-here>',
          password: '<your-password>'
        }, {
          rememberMe: true
        })
        .then(function(user) {
       		 	$scope.user = user;
            angular.extend(vm, {
              messages: messageList,
              privateMessages: privateMessageList.createList(user),

              user: user,
              editMode: {},

              getDisplayName: function(user) {
                return user.uid;
              }, //userSvc.getDisplayName,

              addMessage: addMessage,
              removeMessage: removeMessage,
              toggleVisibility: toggleVisibility,

              activateEdit: activateEdit,
              cancelEdit: cancelEdit,

            })

            activate();

            function activate() {
              $q.all([vm.messages.$loaded(), vm.privateMessages.$loaded()])
                .then(function() {
                  //console.log(lists, 'messageList', messageList, 'private list', privateMessageList);

                  // update method, needed to update msg after toggleVisibility
                  function updateMsg(message, id) {
                    if (message.visibility === 'private') console.log('updating message.msg', vm.privateMessages.$getRecord(id), message, id);
                    return isPrivate(message) ?
                      vm.privateMessages.$getRecord(id) :
                      message;
                  }

                  // create a mapping around messages to handle private messages
  ...