From fb4dafd606f271a2bce53d15c0a2de29d1ff22ea Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Fri, 24 Jan 2014 17:19:07 -0600
Subject: [PATCH] update for nav-view testing

---
 js/ext/angular/test/sideMenu2.html | 209 +++++++++++++++++++++++++++++
 js/ext/angular/test/viewState.html |  18 ++-
 2 files changed, 217 insertions(+), 10 deletions(-)
 create mode 100644 js/ext/angular/test/sideMenu2.html
diff --git a/js/ext/angular/test/sideMenu2.html b/js/ext/angular/test/sideMenu2.html
new file mode 100644
index 0000000000..c499198d6b
--- /dev/null
+++ b/js/ext/angular/test/sideMenu2.html
@@ -0,0 +1,209 @@
+<html ng-app="ionicApp">
+  <head>
+    <meta charset="utf-8">
+    <title>Side Menus</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/angular/angular.js"></script>
+    <script src="../../../../dist/js/angular/angular-animate.js"></script>
+    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
+    <script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+  </head>
+  <body>
+
+    <div ng-controller="MainCtrl">       
+      <nav-view></nav-view>
+    </div>
+    
+    <script id="event-menu.html" type="text/ng-template">
+      <side-menus>
+        
+        <pane side-menu-content>
+          <nav-bar type="bar-positive"
+                   back-button-type="button-icon"
+                   back-button-icon="ion-ios7-arrow-back"></nav-bar>
+          <nav-view name="menuContent"></nav-view>
+        </pane> 
+        
+        <side-menu side="left">
+          <header class="bar bar-header bar-assertive">
+            <div class="title">Left Menu</div>
+          </header>
+          <content has-header="true">
+            <ul class="list">
+              <a href="#/event/check-in" class="item">Check-in</a>
+              <a href="#/event/attendees" class="item">Attendees</a>
+            </ul>
+          </content>
+        </side-menu>
+        
+      </side-menus>
+    </script>
+    
+    <script id="home.html" type="text/ng-template">
+      <view title="'Welcome'">
+        <content has-header="true" padding="true">
+          <p>Swipe to the right to reveal the left menu.</p>
+          <p>(On desktop click and drag from left to right)</p>
+        </content>
+      </view>
+    </script>
+    
+    <script id="check-in.html" type="text/ng-template">
+      <view title="'Event Check-in'">
+        <content has-header="true">
+          <form class="list" ng-show="showForm">
+            <div class="item item-divider">
+              Attendee Info
+            </div>
+            <label class="item item-input">
+              <input type="text" placeholder="First Name" ng-model="attendee.firstname">
+            </label>
+            <label class="item item-input">
+              <input type="text" placeholder="Last Name" ng-model="attendee.lastname">
+            </label>
+            <div class="item item-divider">
+              Shirt Size
+            </div>
+            <radio ng-repeat="shirtSize in shirtSizes"
+                   ng-value="shirtSize.value"
+                   ng-model="attendee.shirtSize">
+              {{ shirtSize.text }}
+            </radio>
+            <div class="item item-divider">
+              Lunch
+            </div>
+            <toggle ng-model="attendee.vegetarian">
+              Vegetarian
+            </toggle>
+            <div class="padding">
+              <button class="button button-block" ng-click="submit()">Checkin</button>
+            </div>
+          </form>
+
+          <div ng-hide="showForm">
+            <pre ng-bind="attendee | json"></pre> 
+            <a href="#/event/attendees">View attendees</a>
+          </div>
+        </content>
+      </view>
+    </script>
+    
+    <script id="attendees.html" type="text/ng-template">
+      <view title="'Event Attendees'">
+        <content has-header="true">
+          <div class="list">
+            <toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
+                    ng-model="attendee.arrived"
+                    ng-change="arrivedChange(attendee)">
+              {{ attendee.firstname }}
+              {{ attendee.lastname }}
+            </toggle>
+            <div class="item item-divider">
+              Activity
+            </div>
+            <div class="item" ng-repeat="msg in activity">
+              {{ msg }}
+            </div>
+          </div>
+        </content>
+      </view>
+    </script>
+
+    <script>
+      angular.module('ionicApp', ['ionic'])
+
+      .config(function($stateProvider, $urlRouterProvider) {
+
+        $stateProvider
+          .state('eventmenu', {
+            url: "/event",
+            abstract: true,
+            templateUrl: "event-menu.html"
+          })
+          .state('eventmenu.home', {
+            url: "/home",
+            views: {
+              'menuContent' :{
+                templateUrl: "home.html"
+              }
+            }
+          })
+          .state('eventmenu.checkin', {
+            url: "/check-in",
+            views: {
+              'menuContent' :{
+                templateUrl: "check-in.html",
+                controller: "CheckinCtrl"
+              }
+            }
+          })
+          .state('eventmenu.attendees', {
+            url: "/attendees",
+            views: {
+              'menuContent' :{
+                templateUrl: "attendees.html",
+                controller: "AttendeesCtrl"
+              }
+            }
+          })
+        
+        $urlRouterProvider.otherwise("/event/home");
+      })
+
+      .controller('MainCtrl', function($scope) {
+        console.log('MainCtrl');
+        
+        $scope.attendees = [
+          { firstname: 'Nicolas', lastname: 'Cage' },
+          { firstname: 'Jean-Claude', lastname: 'Van Damme' },
+          { firstname: 'Keanu', lastname: 'Reeves' },
+          { firstname: 'Steven', lastname: 'Seagal' },
+          { firstname: 'Jeff', lastname: 'Goldblum' },
+          { firstname: 'Brendan', lastname: 'Fraser' }
+        ];
+      })
+
+      .controller('CheckinCtrl', function($scope) {
+        $scope.showForm = true;
+        
+        $scope.shirtSizes = [
+          { text: 'Large', value: 'L' },
+          { text: 'Medium', value: 'M' },
+          { text: 'Small', value: 'S' }
+        ];
+        
+        $scope.attendee = {};
+        $scope.submit = function() {
+          if(!$scope.attendee.firstname) {
+            alert('Info required');
+            return;
+          }
+          $scope.showForm = false;
+          $scope.attendees.push($scope.attendee);
+        };
+        
+      })
+
+      .controller('AttendeesCtrl', function($scope) {
+        
+        $scope.activity = [];
+        $scope.arrivedChange = function(attendee) {
+          var msg = attendee.firstname + ' ' + attendee.lastname;
+          msg += (!attendee.arrived ? ' has arrived, ' : ' just left, '); 
+          msg += new Date().getMilliseconds();
+          $scope.activity.push(msg);
+          if($scope.activity.length > 3) {
+            $scope.activity.splice(0, 1);
+          }
+        };
+        
+      });
+    </script>
+  </body>
+</html>
+
diff --git a/js/ext/angular/test/viewState.html b/js/ext/angular/test/viewState.html
index 97185f307c..de428568b2 100644
--- a/js/ext/angular/test/viewState.html
+++ b/js/ext/angular/test/viewState.html
@@ -9,8 +9,6 @@
     <script src="../../../../dist/js/ionic.js"></script>
     <script src="../../../../dist/js/angular/angular.js"></script>
     <script src="../../../../dist/js/angular/angular-animate.js"></script>
-    <script src="../../../../dist/js/angular/angular-route.js"></script>
-    <script src="../../../../dist/js/angular/angular-touch.js"></script>
     <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
     <script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
     <script src="../../../../dist/js/ionic-angular.js"></script>
@@ -27,7 +25,7 @@
     </div>
 
     <script id="sign-in.html" type="text/ng-template">
-<view title="'<u>Sign-In</u>'" left-buttons="leftButtons" right-buttons="rightButtons">
+      <view title="'Sign-In'" left-buttons="leftButtons" right-buttons="rightButtons">
         <content has-header="true">
           <div class="list">
             <label class="item item-input">
@@ -108,15 +106,15 @@
       <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
 
         <tab title="Automobiles" icon="ion-model-s" href="#/tabs/autos">
-          <nav-view name="auto-ui-view"></nav-view>
+          <nav-view name="auto-nav-view"></nav-view>
         </tab>
 
         <tab title="Add" icon="ion-plus-circled" href="#/tabs/add-auto">
-          <nav-view name="add-autos-ui-view"></nav-view>
+          <nav-view name="add-autos-nav-view"></nav-view>
         </tab>
 
         <tab title="About" icon="ion-ios7-world" ui-sref="tabs.about">
-          <nav-view name="about-ui-view"></nav-view>
+          <nav-view name="about-nav-view"></nav-view>
         </tab>
 
         <tab title="Info" icon="ion-information-circled">
@@ -271,7 +269,7 @@
           .state('tabs.autolist', {
             url: "/autos",
             views: {
-              'auto-ui-view': {
+              'auto-nav-view': {
                 templateUrl: "auto-list.html",
                 controller: 'AutoListCtrl'
               }
@@ -280,7 +278,7 @@
           .state('tabs.addauto', {
             url: "/add-auto",
             views: {
-              'add-autos-ui-view': {
+              'add-autos-nav-view': {
                 templateUrl: "add-auto.html",
                 controller: 'AutoAddCtrl'
               }
@@ -289,7 +287,7 @@
           .state('tabs.autodetail', {
             url: "/autos/:id",
             views: {
-              'auto-ui-view': {
+              'auto-nav-view': {
                 templateUrl: "auto-detail.html",
                 controller: 'AutoDetailCtrl'
               }
@@ -298,7 +296,7 @@
           .state('tabs.about', {
             url: "/about",
             views: {
-              'about-ui-view': {
+              'about-nav-view': {
                 templateUrl: "about.html"
               }
             }
