initial commit

cburgdorf · May 28, 2011 · 26dde2b · 26dde2b
commit 26dde2b
Show file tree

Hide file tree

Showing 22 changed files with 7,214 additions and 0 deletions.
diff --git a/app/App.MockedStatisticsService.js b/app/App.MockedStatisticsService.js
@@ -0,0 +1,24 @@
+(function(App){
+    App.MockedStatisticService = function(){
+        var self = {},
+        defaultStatistic = {
+            ToursTotal: 505,
+            ToursRunning: 110,
+            ToursCompleted: 115 
+        },
+		currentStatistic = $.extend({}, defaultStatistic);;
+
+        self.mockStatistic = function(statistics){
+            currentStatistic = $.extend({}, defaultStatistic, statistics);
+        };
+
+        self.getStatistics = function(){        
+			var asyncSubject = new Rx.AsyncSubject();
+			asyncSubject.OnNext(currentStatistic);
+			asyncSubject.OnCompleted();
+			return asyncSubject.AsObservable();
+        };
+
+        return self;
+    };
+})(App)
diff --git a/app/App.ViewModels.HomeScreenViewModel.js b/app/App.ViewModels.HomeScreenViewModel.js
@@ -0,0 +1,25 @@
+(function(App){
+  App.ViewModels.HomeScreenViewModel = function(service){
+    var self = {}, disposableServicePoller = Rx.Disposable.Empty;
+
+    self.toursTotal = ko.observable(0);
+    self.toursRunning = ko.observable(0);
+    self.toursCompleted = ko.observable(0);
+    self.toursAvailable = ko.dependentObservable(function(){ return this.toursTotal() > 0; }, self);
+    self.showTourList = function(){ $.mobile.changePage('#tourlist', 'pop', false, true); };        
+    self.startServicePolling = function(){  
+        disposableServicePoller = Rx.Observable
+            .Interval(10000)
+            .Select(service.getStatistics)
+            .Switch()
+            .Subscribe(function(statistics){
+                self.toursTotal(statistics.ToursTotal);
+                self.toursRunning(statistics.ToursRunning); 
+                self.toursCompleted(statistics.ToursCompleted); 
+            });
+    };
+    self.stopServicePolling = disposableServicePoller.Dispose;      
+
+    return self; 
+  };
+})(App)
diff --git a/app/App.js b/app/App.js
@@ -0,0 +1,13 @@
+var App = window.App = {};
+App.ViewModels = {};
+
+$(document).bind('mobileinit', function(){
+    // while app is running use App.Service.mockStatistic({ToursCompleted: 45}); to fake backend data from the console
+    var service = App.Service = new App.MockedStatisticService();    
+
+  $('#home').live('pagecreate', function(event, ui){
+        var viewModel = new App.ViewModels.HomeScreenViewModel(service);
+        ko.applyBindings(viewModel, this);
+        viewModel.startServicePolling();
+  });
+});
diff --git a/app/base/css/base.css b/app/base/css/base.css
@@ -0,0 +1,33 @@
+.image {
+	float: left;
+    width: 32px;
+	height: 32px;
+    overflow: hidden;
+    background-repeat: no-repeat;
+}
+
+.image.check { background-image: url(../images/check.png); }
+.image.cross { background-image: url(../images/cross.png); }
+
+.line-a{
+	position:relative;
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.line-b{
+	position:relative;
+	padding-left: 20px;
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.absolute-right {
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+
+.significant{
+	font-weight: bold;
+}
diff --git a/app/base/images/check.png b/app/base/images/check.png
diff --git a/app/base/images/cross.png b/app/base/images/cross.png
diff --git a/index.html b/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html> 
+<html> 
+  <head> 
+  <title>Page Title</title> 
+  <link rel="stylesheet" href="libs/jquery-mobile/jquery.mobile-1.0a4.1.css" />
+  <link rel="stylesheet" href="app/base/css/base.css" />
+  <script src="libs/jquery/jquery-1.5.0.min.js"></script>
+  <script src="libs/knockout/knockout-1.2.0.js"></script>
+  <script src="libs/knockout/knockout-bindings-jqm.js" type="text/javascript"></script>
+  <script src="libs/rx/rx.js" type="text/javascript"></script>
+  <script src="app/App.js"></script>
+  <script src="app/App.ViewModels.HomeScreenViewModel.js"></script>
+  <script src="app/App.MockedStatisticsService.js"></script>
+  <script src="libs/jquery-mobile/jquery.mobile-1.0a4.1.js"></script>  
+</head> 
+<body> 
+
+<!-- Start of first page -->
+<div data-role="page" id="home">
+
+    <div data-role="header">
+        <h1>Demo App</h1>
+    </div><!-- /header -->
+
+    <div data-role="content">   
+
+    <div class="ui-grid-a">
+        <div class="ui-block-a">
+            <div class="ui-bar" style="height:120px">
+                <h1>Tours today (please wait 10 seconds to see the effect)</h1>
+                <p><span data-bind="text: toursTotal"></span> total</p>
+                <p><span data-bind="text: toursRunning"></span> running</p>
+                <p><span data-bind="text: toursCompleted"></span> completed</p>     
+            </div>
+        </div>
+    </div>
+
+    <fieldset class="ui-grid-a">
+        <div class="ui-block-a"><button data-bind="click: showTourList, jqmButtonEnabled: toursAvailable" data-theme="a">Tour List</button></div>  
+    </fieldset>
+
+    </div><!-- /content -->
+
+    <div data-role="footer" data-position="fixed">
+        <h4>by Christoph Burgdorf</h4>
+    </div><!-- /header -->
+</div><!-- /page -->
+
+<!-- tourlist page -->
+<div data-role="page" id="tourlist">
+
+    <div data-role="header">
+        <h1>Bar</h1>
+    </div><!-- /header -->
+
+    <div data-role="content">   
+        <p><a href="#home">Back to home</a></p> 
+    </div><!-- /content -->
+
+    <div data-role="footer" data-position="fixed">
+        <h4>by Christoph Burgdorf</h4>
+    </div><!-- /header -->
+</div><!-- /page -->
+
+</body>
+</html>
diff --git a/libs/jquery-mobile/images/ajax-loader.png b/libs/jquery-mobile/images/ajax-loader.png
diff --git a/libs/jquery-mobile/images/icon-search-black.png b/libs/jquery-mobile/images/icon-search-black.png
diff --git a/libs/jquery-mobile/images/icons-18-black.png b/libs/jquery-mobile/images/icons-18-black.png
diff --git a/libs/jquery-mobile/images/icons-18-white.png b/libs/jquery-mobile/images/icons-18-white.png
diff --git a/libs/jquery-mobile/images/icons-36-black.png b/libs/jquery-mobile/images/icons-36-black.png
diff --git a/libs/jquery-mobile/images/icons-36-white.png b/libs/jquery-mobile/images/icons-36-white.png