JSFiddle - React, Tailwind, and code Playground

by dloewen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.2/lumen/bootstrap.min.css">
<div ng-app="scheduleApp">
<div ng-controller="mainController">
    
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Scheduler</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li ng-repeat="worker in workers" class="active">
                <a 
                    href="#{{ worker }}"
                    ng-click="changeUser(worker)"
                    >{{ worker }}
                </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>			

    <div class="container main-container">

        <!-- this is where content will be injected -->
        <div ng-view></div>

    </div>

</div><!-- app wrapper -->
</div>

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	/*font: 16px/1.5 "Avenir Next", sans-serif;
	font-weight: 300;*/
	font-size: 18px;
	padding: 50px;
}

.main-container {
	padding: 50px 0;
}

input {
	/*font: 16px/1.5 "Avenir Next", sans-serif;*/
	padding: 5px 10px;
	border: none;
}

tbody tr {
	transition: background .25s ease-out;
}

tbody tr:hover {
	background: #f0f0f0;
}

.nav a {
	cursor: pointer;
}

JavaScript

'use strict';

// create angular app and put firebase in there
angular.module('scheduleApp', ['firebase', 'ngRoute'])

.config(['$routeProvider', function($routeProvider, $locationProvider) {
	$routeProvider
		// route for the home page
		.when('/:worker', {
			templateUrl : 'schedule.html',
			controller  : 'mainController'
		})
		.when('/', {
			templateUrl : 'schedule.html',
			controller  : 'mainController'
		})
}])

// create main controller and give it firebase
.controller('mainController', ["$scope", "$route", "$routeParams", "$location", "$firebaseObject",
	function($scope, $route, $routeParams, $location, $firebaseObject) {

	// set route variables
	$scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;

	// connect to firebase
	var url = 'https://amber-fire-9432.firebaseio.com/';
	var ref = new Firebase(url);
	var usersRef = new Firebase(url + 'users');
	var tasksRef = new Firebase(url + 'tasks');

	// sync
	var tasksSyncObject = $firebaseObject(tasksRef);
	var usersSyncObject = $firebaseObject(usersRef);

	// three-way data binding
	tasksSyncObject.$bindTo($scope, 'tasksRef');
	usersSyncObject.$bindTo($scope, 'usersRef');

	// Set up users
	$scope.workers = ['user1', 'user2', 'user3'];
	$scope.currentUser = $scope.workers[0];
	$scope.currentSchedule = $firebaseObject(tasksRef);

	console.log($scope.currentSchedule);

	$scope.addRow = function(user) {
    
		// Note: this function passes in the user from the view
		// Somehow both the blank data and users object reference 
		// have to be inserted. Right now it seems either or.

		// either blank
		var rowRef = ref.push({
			user: '',
			client: '',
			task: '',
			time: '',
			notes: '',
			output: '',
			done: false
		});

		// or reference... need to do both
		var root = new Firebase(url);
		var id = root.child("/tasks").push();
		id.set(user, function(err) {
			if (!err) {
				var name = id.key();
				root.child("/users/" + user + "/tasks/" +...