JSFiddle - React, Tailwind, and code Playground

by jeffutter

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]>
<!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width" />
</head>

<body ng-app="posUiApp">
  <!-- Add your site or application content here -->
  <div class="container-fluid" ng-view></div>

  <script type="text/ng-template" id="/views/job.html">
    <div class = "box" note-form > </div>

    <div class = "row-fluid span12 box" note-list = "job.notes" ></div>
  </script>

  <script type="text/ng-template" id="/views/note_form.html">

    <h2>Notes</h2>

    <form class="form-horizontal" ng-submit="submitNote()" novalidate>

      <div class="control-group">
        <label class="control-label" for="note_note">Note</label>
        <div class="controls">
          <textarea cols="40" id="note_note" rows="6" ng-model="note" required></textarea>
        </div>
      </div>

      <div class="form-actions">
        <input class="btn btn-primary" name="commit" type="submit" value="Save Note" ng-click="submit()">
      </div>
    </form>

  </script>

  <script type="text/ng-template" id="/views/note_list.html">
    <table id="notes" class="table table-striped table-condensed">
      <thead>
        <tr>
          <th>User</th>
          <th>Note</th>
          <th>Time</th>
          <th></th>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <tr ng-repeat="note in notes">
          <td>{{note.user.username}}</td>
          <td>{{note.note}}</td>
          <td>{{note.created_at}}</td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </script>
</body>

</html>

JavaScript

'use strict';

var posUiApp = angular.module('posUiApp', [])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/jobs/:id', {
        templateUrl: '/views/job.html',
        controller: 'JobCtrl'
    })
        .otherwise({
        templateUrl: '/views/job.html',
        controller: 'JobCtrl'
    });
}]);

posUiApp.controller('JobCtrl', function ($scope, $routeParams, $http, job) {
    $scope.job = job.get(1);
});

posUiApp.filter('collectionGet', function () {
    return function (collection, id) {
        var record = {};
        angular.forEach(collection, function (i) {
            if (i.id == id) record = i;
        });
        return record;
    }
});

posUiApp.filter('collectionGetById', function () {
    return function (collection, id, id_property) {
        var records = [];
        angular.forEach(collection, function (r) {
            if (r[id_property] == id) records.push(r);
        }.bind(this));
        return records;
    }
});

posUiApp.factory('job', function ($filter, note) {
    var data = [{
        id: 1,
        store_num: 1,
        user_id: 1,
        original_store_id: 1,
        customer_id: 1,
        status_id: 1,
        priority_id: 1,
        found_id: 1,
        password: 'password',
        power_cord: true,
        software: true,
        visible_damage: true,
        picked_up: true,
        open: true,
        case :true,
        closed_at:
            Date.now(),
            scheduled_time: Date.now(),
            duration: 60,
            created_at: Date.now(),
            updated_at: Date.now(),
            computer_id: 1,
            current_store_id: 1
    }];

    return {
        jobs: function () {
            return data;
        },
        get: function (id) {
            var job = $filter('collectionGet')(data, id);
            job.notes = note.getByJobId(job.id);
            return job;
        }
    }
});

posUiApp.factory('note', function ($filter) {
    var data = [{
       ...