JSFiddle - React, Tailwind, and code Playground

by jimyu

HTML

//_Layout.cshtml
<body ng-app="Insight">
    <div id="userSettings">
        @Html.Partial("_UserSettings")
    </div>
    <div id="body" ng-controller="pageController">
        @RenderBody()
    </div>

    <footer>
        <nav>
            <ul id="menu">
                <li>@Html.ActionLink("Todo List", "Index", "Home", new { area = "" }, null)</li>
                <li>@Html.ActionLink("API", "Index", "Help", new { area = "HelpPage" }, null)</li>
            </ul>
        </nav>
        @*<p>Learn more about <a href="http://go.microsoft.com/fwlink/?LinkId=273732">Single Page Applications</a></p>
        <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>*@
    </footer>
    @*@Scripts.Render("~/bundles/ajaxlogin")*@
    @RenderSection("scripts", required: false)
</body>

//adminPage.html
<div ng-controller="adminController">
    <span class="actionButton" ng-click="addPage()">Add</span>
    <table>
        <tr>
            <th>PageId</th>
            <th>Title</th>
            <th>Parent</th>
            <th>Order</th>
            <th>Edit</th>
            <th>Preview</th>
            <th>Delete</th>
        </tr>
        <tr ng-repeat="p in pages" ng-class="{topLevelPage: p.parentPageId==null}">
            <td>{{p.pageId}}</td>
            <td>{{p.title}}</td>
            <td>
                <select ng-model="p.parentPageId"
                        ng-options="num.pageId as num.title for num in p.parentPageIds"></select>
            </td>
            <td ng-click="getPage(p.pageId)">Edit</td>
            <td><a target="_blank" href="../#/{{p.pageId}}">Preview</a></td>
            <td ng-click="deletePage(p.pageId)">Delete</td>
        </tr>
    </table>
    <!--<span class="actionButton" ng-click="updatePages()">Save</span>-->
    <div ng-if="inUpdating">
        <input ng-model="pageId" type="hidden" /><br />
        <input ng-model="title" /><br />
        <textarea ng-model="pageContent" ck-editor></textarea>
        <select...

JavaScript

//var app = angular.module("Insight", ['ngRoute', 'ngAnimate']);
var app = angular.module("Insight", ['ngRoute']).
    config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        //$httpProvider.responseInterceptors.push('httpInterceptor');

        $routeProvider
            .when('/login', { templateUrl: "/Template/Login.html" })
            .when('/admin', { templateUrl: "/Template/adminPage.html" })
            .when("/", { templateUrl: "/Template/pageContent.html" })
            .when("/about", { template: "<H3>This is a template</H3>" })
            .when("/:pageId", {
                templateUrl: "/Template/pageContent.html",
                controller: "pageController"
            })
            .otherwise({ redirectTo: '/' });

        $locationProvider.html5Mode(true);
    }]);
//.run();

//app.run(function (api) {
//    api.init();
//});

app.service("adviserHubService", function ($http, $q) {
    return ({
        getOrders: getOrders,
        getPages: getPages,
        getPage: getPage,
        addPage: addPage,
        updatePage: updatePage,
        deletePage: deletePage,
        login: login
    });

    function getPages(isAdmin) {
        var request = $http({
            method: "GET",
            url: "/api/Page/?isAdmin=" + isAdmin,
        });
        return (request.then(handleSuccess, handleError));
    }

    function getPage(id) {
        var url = "/api/Page/";
        if (id) {
            url = url + id;
        } else {
            url = url + "0";
        }
        var options = makeRequest("GET", url, null);
        var request = $http(options);
        return (request.then(handleSuccess, handleError));
    }

    function addPage(page) {
        var options = makeRequest("POST", "/api/Page/", angular.toJson(page), "text")
        var request = $http(options);
        return (request.then(handleSuccess, handleError));
    }

    function updatePage(id, page) {
        var options =...