Angular Log

Display a log of items with Sugar to display the dates

by Bretto

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<script src="https://raw.github.com/andrewplummer/Sugar/master/release/1.2.5/development/sugar-1.2.5.development.js"></script>
<!-- Notes:
    1. If we are in JsFiddle make sure that we are no wrap(body) and No-Library (pure JS) in Choose Framework
    2. We use Twitter Bootstrap for styling and SugarJs for some jsDate goodness (don't be scared!)
    3. The comments in the code say what the code is saying as per Lt.Tawny Madison
    4. Don't use uneccessary coments. Don't be terse! Be expressive! Embrace the Misko! 
    5. Avoid global state and get to the Angularjs Aha! moment
    6. Lt.Tawny Madison signing out
 -->

<!-- Define an ng-app and an ng-controller and let Angular do its Superheroic thang! -->
<div ng-app="app" ng-controller="Ctrl">
    
<div class="container" >
    <div class="row">
      <div class="span2 well">
          <!-- available is an array of objects in the controller which has a length of length -->
        <h4>Available ({{available.length}})</h4>
        <ul class="nav nav-list">
          <!-- Show a list of the available persons ordered by name and click to move to the assigned list-->
          <li  ng-repeat="person in available | orderBy: 'name'"            
               ng-click="move(person, available, assigned)">
                <a>{{person.name}}</a></li>
        </ul>
      </div>
      <div class="span2 well">
        <h4>Assigned ({{assigned.length}})</h4>
        <ul class="nav nav-list">
          <li ng-repeat="person in assigned | orderBy: 'name'" 
              ng-click="move(person, assigned, available)">
                <a>{{person.name}}</a></li>
        </ul>
      </div>
      <div class="span3 well">
          <h4>Log</h4>
        <ul class="unstyled">
            <!-- Show log entries in reverse order (true) relative to when the action occurred -->
   ...

CSS

.container{margin:1em;}

JavaScript

// Define an Angularjs app called app and make sure to attach any private functions to app
// Note: We could have injected some named resources into the square brackets [] but we didn't  
var app = angular.module("app", []);

// Define a controller and give it $scope in the client for everything under where it is declared
function Ctrl($scope) {

    // Initialise an array of available people
    $scope.available = [
        {
        "name": "Peter",
        "id": 1},
    {
        "name": "Alasdair",
        "id": 2},
    {
        "name": "Andy",
        "id": 3},
    {
        "name": "Matt",
        "id": 4},
    {
        "name": "John",
        "id": 5}
    ];  

    // Initialise an empty array of assigned people          
    $scope.assigned = [];
    
    // Add a state property (available or assigned) to the above arrays and initialise an empty log
    $scope.available.state = "available";
    $scope.assigned.state = "assigned";           
    $scope.log = [];

    // Move a person from one state to the other (eg move(person, assigned, available)
    $scope.move = function(person, fm, to) {
        // Find the person in the fm list
        var idx = fm.indexOf(person);
        // If we find him/her then do stuff
        if (idx != -1) {
            // Push the person onto the to list
            to.push(person);
            // Splice the person out off the fm list
            fm.splice(idx, 1);
            // Create a log entry
            var action= person.name + ' ' + to.state;
            var when = Date.create(Date.now());
            // Log the log entry
            app.logIt(action, when);             
        }
    };
    
    // Note: This method is private to the controller as is part of app
    // Log the action                 
    app.logIt = function(a, w){
       var logItem = {
                action: a,
                when: w
            };
            // The log is within the $scope of the client so we can see it there               ...