JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!doctype html>
<html ng-app="rm">

<head>
</head>

<body>
    <div ng-controller="OppCtrl">

        <span class="toolbar">
            <button ng-click="toggleEdit()">Toggle Edit</button>
        </span>

        <div class="errors" ng-show="errors.length != 0">
            <div ng-repeat="e in errors">{{e}}</div>
        </div>

        <h1>Edit Opportunity: {{ opp.description | lowercase }}</h1>
        <table>
            <tr>
                <td class="label">ID:</td>
                <td>{{ opp.id | uppercase}}</td>
            </tr>
            <tr>
                <td class="label">Status:</td>
                <td><span ng-show='!edit'>{{ opp.status |
                        rvm:'OpportunityStatus' }}</span><span> <select ng-show="edit"
                        ng-model="opp.status"
                        ng-options="s.code as s.description for s in statusItems">
                    </select>
                </span></td>
            </tr>
            <tr>
                <td class="label">Description:</td>
                <td><input ng-show="edit" type="text"
                    ng-model="opp.description" size="100" /> <span ng-show="!edit">{{opp.description}}</span>
                </td>
            </tr>
            <tr>
                <td class="label">User:</td>
                <td contact="opp.user" edit="{{edit}}"></td>
            </tr>
            <tr>
                <td class="label">Owner:</td>
                <td contact="opp.owner" edit="{{edit}}"></td>
            </tr>
        </table>

        <div class="json-panel">
            <h3>JSon Data:</h3>
            <code>{{opp | json}}</code>
        </div>
    </div>
    </body>

CSS

.done-true {
    text-decoration: line-through;
    color: grey;
}

.contact .name {
    min-width: 100px;
    display: inline-block;
}

.contact .branch {
    min-width: 50px;
    display: inline-block;
}

.contact a {
    color: blue;
}

tr.contact:hover {
    background-color: yellow;
    text-decoration: underline;
    cursor: pointer;
}

td.label {
    text-align: right;
    font-weight: bold;
    padding-right: 10px;
}

.json-panel {
    background-color: lightgray;
    float: right;
    width: 400px;
    border: solid black 1px;
}

.errors {
    border: dashed red 5px;
    background-color: #ff9999;
    font-weight: bold;
    font-size: 2em;
    padding: 10px;
}

JavaScript

angular.module('rm', [ 'rvm', 'contact' ])
    .controller('OppCtrl', function OppCtrl($scope, $http, rvmData) {
        
        var mockData = 'json=' + angular.toJson({
                "id": "OPP1",
                "status": "ACTIVE",
                "description": "JSon test data!",
                "user": {"id": "3", "name":"Phil", "branch":"SEA"},
                "owner": {"id": "7", "name":"Mary", "branch":"ORD"}
            });
        
        $http.post('/echo/json/', mockData).success(function(data){
            $scope.opp = data;
        }).error(function(data, status, headers){
            $scope.errors.push("Could not load opportunity data: " + status);
        });
        
        $scope.errors = [];
        
        $scope.edit = false;
        $scope.statusItems = rvmData("OpportunityStatus");
        
        $scope.toggleEdit = function() {
            $scope.edit = !$scope.edit;
        }
    });

angular.module('contact', [])
    .directive('contact', function($http){
        return {
            template: '<span class="contact"><span class="name">{{contact.name}}</span><span class="branch">({{contact.branch}})</span> <a ng-show="edit">Change</a></span>'
                + '<table ng-show="show"><tr ng-repeat="user in users" class="contact" ng-click="select(user)">'
                + '<td>{{ user.name }}</td>'
                + '<td>{{ user.branch }}</td></tr></table>',
            scope: {
                contact: '=contact',
                edit: '@'
            },
            link: function(scope, element, attrs) {
                element.find('a').bind('click', function() {
                    scope.show = true;
                    scope.dialog.dialog("open");
                    
                    
                    var mockData = 'json=' + angular.toJson([    {"id": "1", "name":"Joe", "branch":"SEA"},
    {"id": "2", "name":"Jack", "branch":"SEA"},
    {"id": "3", "name":"Phil", "branch":"SEA"},
    {"id": "4", "name":"Bob",...