JSFiddle - React, Tailwind, and code Playground

by jimyu

HTML

<!DOCTYPE html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script type="text/javascript" src="AgTest.js"></script>

        <link rel="Stylesheet" href="../Styles/UserManagement.css" />
    <link rel="Stylesheet" href="../../CSS/bootstrap.css" />
</head>
<body>
<div class="outerDiv"  ng-app='MyTutorialApp' ng-controller='MainController'>
    <div class="leftdiv">
        <div class="mnuButton" >Add User</div>
        <div class="mnuButton" ng-click="searchUserPopup()" >Update User</div>
        <div class="mnuButton" ng-click="linkUser()" >Link User to IFA Number</div>
    </div>
    <div class="rightdiv">
        <div class="headerlead"></div>
        <div class="header" ></div>
        <div class="toprightcorner"></div>
        <div style="float:none;"></div>
   <div class="leftborder">
        <div class="rightborder">
        <div class=spacing></div>
            <div class="titlecol" >Role:</div>
            <div class="contentcol" >
            <select ng-model="user.RoleID" ng-options="role.RoleID as role.RoleName for role in roles"
                ng-change="change()" ></select>
            </div>
            <div class="clear"></div>
            <div class="titlecol">User Name:</div>
            <div class="contentcol">
               <div style="float: left"><input id="txtUserName" ng-model="user.UserName" 
               ng-blur="SearchUserByUserName()" /></div>
               <button class="actionButton" ng-click="searchUserPopup()" >Search</button>
            </div>

            <div class="clear"></div>
            <div class="titlecol" >New User Name:</div>
            <div class="contentcol" >
            <input id="txtNewUserName"  /></div>

            <div class="clear"></div>

            <div class="titlecol">First Name:</div>
            <div class="contentcol">
           ...

JavaScript

var app = angular.module('MyTutorialApp', ['ui.bootstrap']);
//app.controller("MainController", function ($scope, $http, $modal) {
var MainController=function ($scope, $http, $modal) {
    var q = Math.round(100 * Math.random());
    var url = "UserManagement.aspx/GetUser?q=" + q;
    $http.post(url, JSON.stringify({ user: null }))
        .success(function (data, status, headers, config) {
            $scope.roles = data.d.Roles;
            $scope.selectedRole = $scope.roles[0];
            $scope.RoleID = $scope.roles[0].RoleID;

        })
        .error(function (data, status, headers, config) {
            alert("failure");
        })

    $scope.SearchUserByUserName = function () {
        if ($scope.user.UserName) {
            url = "UserManagement.aspx/SearchUserByUserName?q=" + q;
            $http.post(url, JSON.stringify({ user: { UserName: $scope.user.UserName} }))
                .success(function (data, status, headers, config) {
                    populateUserData(data.d);
                })
        .error(function (data, status, headers, config) {
            alert("failure");
        })
        }
    };

    $scope.user = function () { };

    var populateUserData = function (user) {
        if (user) {
            $scope.user.UserName = user.UserName;
            $scope.user.FirstName = user.FirstName;
            $scope.user.LastName = user.LastName;
            $scope.user.EmailAddress = user.EmailAddress;
            $scope.user.FromDate = user.FromDate;
            $scope.user.ToDate = user.ToDate;
            $scope.user.SpecialVersionAccess = user.IsOkToSpecialVersion;
            $scope.user.IsDisabled = user.IsDisabled;
            $scope.user.RoleID = user.SelectedRoleID;
        }
    };

    $scope.open = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
    };

    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };

    $scope.updateUser...