JSFiddle - React, Tailwind, and code Playground

by askbjoernhansen

HTML

<script src="http://st.pimg.net/cdn/libs/underscore/1/underscore-min.js"></script>
<script src="http://st.pimg.net/cdn/libs/jquery/1.8/jquery.min.js"></script>
        <div ng-view></div>

  <script type="text/ng-template" id="edit.html">
      <form id="edit_day" class="form-horizontal">

    <input type="hidden" name="day" value="{{ date }}">

    <div class="control-group" ng-repeat="field in fields" >
        <label class="control-label" for="{{ field.name }} ">{{ field.label }}</label>
        {{ field.name }}
        <div class="controls">
            1 - {{field.name}}
            <span ng-repeat="s in field.scale">
                [{{s}}]
                <input type="radio" ng-model="{{field.name}}" value="{{s}}">
            </span>
            - 5
        </div>

    </div>

    <button ng-click="save()" ng-disabled="isClean() || myForm.$invalid"
        class="btn btn-primary">Save</button>
</form>
</script>

JavaScript

"use strict";

function EntryDetailCtrl($scope, $routeParams, Entry) {
    var self = this;

    $scope.entry = Entry.get({
        day: $routeParams.date
    }, function(entry) {
        self.original = entry;
        console.log("day", entry.day);
        $scope.entry = new Entry(entry);
        console.log("ENtry", entry);
    });

    // add fields that the server sent
    $scope.fields = [
        {
        label: "pain",
        name: "entry.assessments.pain"}/*,
        {   label: "fatigue",
            name: "entry.assessments.fatigue"
        },
        {   label: "muscle fatigue",
            name: "entry.assessments.muscle_fatigue"
        },
        {   label: "brain fog",
            name: "entry.assessments.brain_fog"
        },
        {   label: "sleep quality",
            name: "entry.sleep.quality"
        },
        {   label: "hours slept",
            name: "entry.sleep.hours_slept"
        },
        {   label: "diet",
            name: "entry.diet"
        }*/


        ];
    _.map($scope.fields, function(f) {
        f.scale = [1, 2, 3, 4, 5];
    });

    console.log("scope", $scope);

    $scope.isClean = function() {
        var clean = angular.equals(self.original, $scope.entry);
        console.log("Clean:", clean, self.original, $scope.entry);
        return clean;
    }

    $scope.save = function() {
        console.log("Save fn:", $scope.entry, $scope.entry.save);
        $scope.entry.$save(function() {
            $location.path('/');
        });
    };
}


var App = angular.module('helarctos', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/entry/:date', {
        templateUrl: 'views/edit.html',
        controller: EntryDetailCtrl
    }).
    otherwise({
        redirectTo: '/entry/2012-11-14'
    })}]);