Changeset 3483


Ignore:
Timestamp:
08/28/13 14:05:48 (11 years ago)
Author:
andmor
Message:

Initial setup with AngularJS

Location:
cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed

  • cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site/index.html

    r3421 r3483  
    11<?xml version="1.0" encoding="UTF-8"?>
    22<!DOCTYPE html>
    3 <html lang="en">
     3<html lang="en" xmlns="http://www.w3.org/1999/xhtml" data-ng-app="SCHEMAcat" >
    44    <head>
    55        <meta charset="utf-8" />
    … …  
    6363    </head>
    6464    <body>
    65         <div id="wrap">
     65        <div id="wrap" data-ng-controller="WorkspaceCtrl">
    6666            <div id="pushh"></div>
    6767            <div class="navbar navbar-inverse navbar-fixed-top">
    … …  
    105105                            <div class="pull-right">
    106106                                <ul class="nav pull-right">
    107                                     <li><a href="#loginModal" data-toggle="modal"><i class="icon-user icon-white"><!--i--></i> Login</a></li>
     107                                    <li><a data-ng-click="loginClick()" href="#"><i class="icon-user icon-white"><!--i--></i> <span data-ng-bind="UserService.displayName"/>
     108                                    </a></li>
    108109                                </ul>
    109110                            </div>
    … …  
    114115            </div>
    115116            <!-- dummy login dialog DISABLE in production! -->
    116             <div id="loginModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
     117            <div data-modal="loginModal" data-close="loginClose()" data-options="opts" class="modal hide fade">
    117118                <div class="modal-header">
    118                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     119                    <button type="button" class="close" data-ng-click="loginClose()">×</button>
    119120                    <h3 id="loginModalLabel">Login to SCHEMAcat</h3>
    120121                </div>
    121122                <div class="modal-body">
    122123                    <p>
    123                         <label form="loginUser">User</label>
     124                        <label>User</label>
    124125                        <input id="loginUser"/>
    125126                    </p>
    126127                </div>
    127128                <div class="modal-footer">
    128                     <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    129                     <button id="login" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Login</button>
    130                 </div>
    131             </div>
    132             <div class="container-fluid">
     129                    <button class="btn" data-ng-click="loginClose()">Cancel</button>
     130                    <button id="login" class="btn btn-primary" data-ng-click="loginSubmit()">Login</button>
     131                </div>
     132            </div>
     133            <div class="container-fluid" data-ng-controller="SchemasCtrl">
    133134                <div class="row-fluid">
    134135                    <div class="span3">
    … …  
    145146                                        <th>Schema</th>
    146147                                        <th>Version</th>
     148                                        <th>Status</th>
    147149                                    </tr>
    148150                                </thead>
    149151                                <tbody>
    150                                     <tr>
    151                                         <td>CGN EBNF</td>
    152                                         <td>0.0.1</td>
    153                                     </tr>
    154                                     <tr>
    155                                         <td>Adelheid XSD</td>
    156                                         <td>0.0.1</td>
     152                                    <tr data-ng-repeat="schema in schemasResult['sc:schemas']['sc:schema']" data-ng-click="selectSchema(schema)">
     153                                        <td data-ng-bind="schema['sc:name']"/>
     154                                        <td data-ng-show="schema['sc:version'] != '[object Object]'" data-ng-bind="schema['sc:version']"/>
     155                                        <td data-ng-hide="schema['sc:version'] != '[object Object]'"/>
     156                                        <td data-ng-bind="schema['sc:status']"/>
    157157                                    </tr>
    158158                                </tbody>
    … …  
    211211        <!-- Placed at the end of the document so the pages load faster -->
    212212        <script src="/org/netkernel/html5/framework/jquery/latest/jquery.min.js"></script>
    213         <script src="/org/netkernel/html5/framework/bootstrap/latest/js/bootstrap.min.js"></script>
     213        <script src="/org/netkernel/html5/framework/angularjs/latest/angular.min.js"></script>
     214        <script src="/org/netkernel/html5/framework/angularjs/latest/angular-resource.min.js"></script>
     215        <script src="./scripts/ui-bootstrap-0.5.0.min.js"></script>
    214216        <script src="./scripts/main.js"></script>
     217        <script>
     218            <xrl:eval xmlns:xrl="http://netkernel.org/xrl">
     219                <xrl:xpath>..</xrl:xpath>
     220                <xrl:identifier>active:sloot.xpath2</xrl:identifier>
     221                <xrl:argument name="operand">scratch:user</xrl:argument>
     222                <!-- get the user id -->
     223                <xrl:argument name="operator">
     224                    <xrl:literal type="string">concat(
     225                        'SCHEMAcat.factory("UserService", function() { return { displayName : "',
     226                        string(/sc:user/sc:displayName),
     227                        '", id : "' ,
     228                        string(/sc:user/@xml:id),
     229                        '"};});'
     230                        )</xrl:literal>
     231                </xrl:argument>
     232            </xrl:eval>
     233            </script>
    215234    </body>
    216235</html>

  • cats/SCHEMAcat/trunk/urn.org.isocat.schemacat.site/site/scripts/main.js

    r3422 r3483  
    1 $("#login").click(function() {
     1//BottstrapJS way
     2/*$("#login").click(function() {
    23    var login = $("#loginUser").val();
    3     alert("Now set the user cookie to ["+login+"], reload (some of) the page content and close the modal.");
     4    alert("Now set the user cookie to ["+login+"]");
    45    document.cookie="USER="+login+";domain=;path=/";
    5     document.location.reload(true)
    6 });
     6    document.location.reload(true);
     7});*/
     8
     9
     10//Cookie way. Client side
     11/*var login = getCookie("USER");
     12if (login != "" && login != null)
     13    $("#user-label").html(" " + login);
     14else
     15    $("#user-label").html(" guest");
     16
     17function getCookie(name) {
     18  var parts = document.cookie.split(name + "=");
     19  if (parts.length == 2)
     20    return parts.pop().split(";").shift();
     21}*/
     22
     23//AngularJS stuff
     24var SCHEMAcat = angular.module('SCHEMAcat', ['ui.bootstrap', 'ngResource']);
     25
     26var SchemasCtrl = function($scope, $resource) {   
     27   
     28    $scope.schemas = $resource('/schemacat/users/:user/schemas',
     29        {user:'guest', callback:'JSON_CALLBACK'}
     30    );
     31    $scope.schemasResult = $scope.schemas.get({user:$scope.UserService.id},
     32        function(result){
     33            //alert('this is better');
     34            });
     35   
     36
     37    $scope.selectSchema = function (schema) {
     38        alert("You've clicked the " + schema['sc:name'] + " schema");
     39    }
     40   
     41};
     42 
     43var WorkspaceCtrl = function($scope, UserService) {
     44    //bind UserService to the scope so we can use its values in the html template
     45    $scope.UserService = UserService;
     46   
     47    //Modal window handlers and options
     48    $scope.loginClick = function () {
     49        $scope.loginModal = true;
     50    };
     51 
     52    $scope.loginClose = function () {
     53        $scope.loginModal = false;
     54    };
     55   
     56    //set cookie code. REMOVE in production
     57    $scope.loginSubmit = function () {
     58        var login = $("#loginUser").val();
     59        alert("Now set the user cookie to ["+login+"]");
     60        document.cookie="USER="+login+";domain=;path=/";
     61        document.location.reload(true);
     62    }
     63     
     64    $scope.opts = {
     65        backdropFade: true,
     66        dialogFade:true
     67    };
     68};
Note: See TracChangeset for help on using the changeset viewer.