#154 - closed data leak holes, added date-time picker for a neater interface

Former-commit-id: 401a743f555a5dd8021e6b8af790cd38808fd1ac

16 files changed, 748 insertions, 15 deletions

diff --git a/www/index.html b/www/index.html
index 857767f1..f3cb49fa 100644
--- a/www/index.html
+++ b/www/index.html
@@ -25,6 +25,7 @@
     
     <!--<link rel="stylesheet" href="external/ionic.content.banner.css">-->
     <link rel="stylesheet" href="external/radio.css">
+    <link rel="stylesheet" href="lib/ion-datetime-picker/release/ion-datetime-picker.min.css">
     
 
 
@@ -96,7 +97,7 @@
     <script src="js/EventServerSettingsCtrl.js"></script>
     <script src="js/FirstUseCtrl.js"></script>
     <script src="js/MontageHistoryCtrl.js"></script>
- 
+    <script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script>
  
     
     <script src="external/ng-websocket.js"></script>
diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js
index fbfd7bfd..3c2ea33c 100644
--- a/www/js/MontageHistoryCtrl.js
+++ b/www/js/MontageHistoryCtrl.js
@@ -21,7 +21,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         //---------------------------------------
 
         $scope.prettifyDate = function (str) {
-            return moment(str).format('MMM Do, YYYY');
+            return moment(str).format('MMM Do, YYYY h:mma');
         };
 
         function prettifyDate(str) {
@@ -45,9 +45,19 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     {
         
         window.stop();
+        footerCollapse();
+        
+            
+    };
+    
+    
+    function footerCollapse()
+    {
         
         
+        console.log ("******************COLLAPSE");
         $scope.sliderVal.realRate = $scope.sliderVal.rate *100;
+    
         ZMDataModel.zmDebug ("Playback rate is:"  + $scope.sliderVal.realRate);
         for (var i=0; i< $scope.MontageMonitors.length; i++)
         {
@@ -55,7 +65,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
 
         }
         
-        var TimeObjectFrom = $scope.sliderVal.year+"-"+$scope.sliderVal.month+"-"+$scope.sliderVal.day+" "+$scope.sliderVal.hour+":"+$scope.sliderVal.min;
+        var TimeObjectFrom = moment($scope.datetimeValue.value).format("YYYY-MM-DD HH:mm");
         
         
         
@@ -148,9 +158,29 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
             {
             });
         }
+    }
+    
+    
+    var tdatetimeValue = new Date();
+    tdatetimeValue.setDate(tdatetimeValue.getDate()-1);
+    
+    $scope.datetimeValue = {value:""};
+    $scope.datetimeValue.value = tdatetimeValue; 
+    
+    
+    //console.log ("******************WATCHING ****************");
+    $scope.$watch('datetimeValue.value', function(oldv,newv) {
+        if (newv !== oldv)
+        {
+            ZMDataModel.zmLog(">>>>>>>>>>>>>>>>>>Datetime value changed to " + $scope.datetimeValue.value);
+            window.stop();
+            footerCollapse();
+        }
         
-            
-    };
+        //window.stop();
+        ///footerCollapse();
+   },true);
+    
     
     $scope.displayDateTimeSliders = true;
     $scope.showtimers = true;
@@ -949,6 +979,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         
        
         $scope.modal.remove();
+        
           $timeout (function() {ZMDataModel.zmLog("Stopping network pull...");window.stop();},50);
 
         $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
@@ -1084,6 +1115,10 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     $scope.$on('$destroy', function () {
         console.log("*** CANCELLING INTERVAL ****");
         $interval.cancel(intervalHandle);
+        
+       
+        
+        
     });
 
 
@@ -1106,9 +1141,22 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         loadNotifications();
     });
 
-    $scope.$on('$ionicView.leave', function () {
-        console.log("**VIEW ** Montage Ctrl Left, force removing modal");
+    $scope.$on('$ionicView.beforeLeave', function () {
+        console.log("**VIEW ** Event History Ctrl Left, force removing modal");
         if ($scope.modal) $scope.modal.remove();
+        
+        ZMDataModel.zmLog ("Stopping network pull...");
+        // make sure this is applied in scope digest to stop network pull
+        // cant do window stop here as we are about to transition states
+        // and that causes problems
+        $timeout ( function()
+            {
+                for (var i=0; i< $scope.MontageMonitors.length; i++)
+                {
+                    $scope.MontageMonitors[i].eventUrl = "";
+
+                }
+            },0);
     });
 
     $scope.$on('$ionicView.unloaded', function () {
diff --git a/www/js/app.js b/www/js/app.js
index e3f928eb..066c4beb 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -9,6 +9,7 @@ var appVersion = "0.0.0";
 // core app start stuff
 angular.module('zmApp', [
                             'ionic',
+                            'ion-datetime-picker',
                             'ngIOS9UIWebViewPatch',
                             'tc.chartjs',
                             'zmApp.controllers',
@@ -17,7 +18,8 @@ angular.module('zmApp', [
                             'angularAwesomeSlider',
                             'com.2fdevs.videogular',
 			                 'com.2fdevs.videogular.plugins.controls',
-                            'com.2fdevs.videogular.plugins.overlayplay'
+                            'com.2fdevs.videogular.plugins.overlayplay',
+                            
 
 
                         ])
diff --git a/www/lib/ion-datetime-picker/.bower.json b/www/lib/ion-datetime-picker/.bower.json
new file mode 100644
index 00000000..f6bc2079
--- /dev/null
+++ b/www/lib/ion-datetime-picker/.bower.json
@@ -0,0 +1,40 @@
+{
+  "name": "ion-datetime-picker",
+  "version": "0.1.1",
+  "authors": [
+    "Kate Miháliková <kate@katemihalikova.cz>"
+  ],
+  "description": "Date and/or time picker for awesome ionic framework",
+  "main": [
+    "release/ion-datetime-picker.min.js",
+    "release/ion-datetime-picker.min.css"
+  ],
+  "keywords": [
+    "ion-datetime-picker",
+    "ionic",
+    "date",
+    "time",
+    "picker",
+    "cordova",
+    "phonegap"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/katemihalikova/ionic-datetime-picker",
+  "ignore": [
+    "**/.*",
+    "node_modules"
+  ],
+  "dependencies": {
+    "ionic": ">=1.0.0-beta.9"
+  },
+  "_release": "0.1.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "v0.1.1",
+    "commit": "2b0731676eee56ed16468d90a3c18f135ebcebf5"
+  },
+  "_source": "git://github.com/katemihalikova/ion-datetime-picker.git",
+  "_target": "~0.1.1",
+  "_originalSource": "ion-datetime-picker",
+  "_direct": true
+}
\ No newline at end of file
diff --git a/www/lib/ion-datetime-picker/LICENSE b/www/lib/ion-datetime-picker/LICENSE
new file mode 100644
index 00000000..c474d149
--- /dev/null
+++ b/www/lib/ion-datetime-picker/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Kate Miháliková
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/www/lib/ion-datetime-picker/README.md b/www/lib/ion-datetime-picker/README.md
new file mode 100644
index 00000000..92d58f43
--- /dev/null
+++ b/www/lib/ion-datetime-picker/README.md
@@ -0,0 +1,100 @@
+# ion-datetime-picker
+![GitHub version](https://img.shields.io/github/release/katemihalikova/ion-datetime-picker.svg?style=flat-square)
+![Bower version](https://img.shields.io/bower/v/ion-datetime-picker.svg?style=flat-square)
+![Ionic version](https://img.shields.io/badge/ionic-%3E%3D1.0.0--beta.9-yellow.svg?style=flat-square)
+![GitHub issues](https://img.shields.io/github/issues/katemihalikova/ion-datetime-picker.svg?style=flat-square)
+![License](https://img.shields.io/github/license/katemihalikova/ion-datetime-picker.svg?style=flat-square)
+
+> Date and/or time picker for awesome [Ionic framework](http://ionicframework.com/)
+
+# Demo
+
+Demo app is available - enter code `8d75a0ec` into [Ionic View](http://view.ionic.io/).
+Live demo is available on [Codepen](http://codepen.io/katemihalikova/full/dYvjzP/).
+
+# Introduction
+
+I made this component because of poor implementation of native datetime picker in Android webview. How funny it was when I discovered that I can only pick a time between 0:00 and 11:59 on my 24-hour clock phone :)
+
+# Features
+
+The ion-datetime-picker component has these features:
+- Make Date picker, Time picker, Datetime picker
+- Choose Sunday or Monday as the first day of the week
+- Use 12-hour or 24-hour clock
+- Pick time with or without seconds
+- Configure popup title and button labels
+- Configure i18n to get weekdays and months in your language
+
+# Installation
+
+1. Use bower to install the new module:
+```bash
+bower install ion-datetime-picker --save
+```
+2. Import the `ion-datetime-picker` javascript and css file into your HTML file (or use [wiredep](https://github.com/taptapship/wiredep)):
+```html
+<script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script>
+<link href="lib/ion-datetime-picker/release/ion-datetime-picker.min.css" rel="stylesheet">
+```
+3. Add `ion-datetime-picker` as a dependency on your Ionic app:
+```javascript
+angular.module("myApp", ["ionic", "ion-datetime-picker"]);
+```
+
+# Usage
+
+Put the `ion-datetime-picker` directive alongside the `ng-model` wherever you want to tap to show the picker:
+```html
+<ion-list>
+    <ion-item ion-datetime-picker ng-model="datetimeValue">
+        {{datetimeValue| date: "yyyy-mm-dd H:mm:ss"}}
+    </ion-item>
+</ion-list>
+```
+
+## Configuration attributes
+
+### `date` and `time` attributes
+
+Choose which picker type is used. When neither is set, I assume both and use the datetime picker.
+
+### `monday-first` attribute
+
+Set this if you want to have Monday as the first day of a week.
+
+### `seconds` attribute
+
+By default, in the time picker, I allow to change only hours and minutes. Set this attribute to use also seconds.
+
+### `am-pm` attribute
+
+By default, in the time picker, I use 24-hour clock. Set this attribute to change it to 12-hour clock.
+
+### `title` and `sub-title` attributes
+
+Configure the title and sub title of the popup with the picker.
+
+### `button-ok` and `button-cancel` attributes
+
+Configure the text of buttons at the bottom of the picker.
+
+## Internationalization factory
+
+Simple internationalization option. Inject the `$ionicPickerI18n` factory into your code and set the localized strings.
+
+### `weekdays` key
+
+Array of weekdays abbreviations. `0` is Sunday. If `moment` is installed, I try to get localized data from it, otherwise English ones are used.
+
+### `months` key
+
+Array of months names. `0` is January. If `moment` is installed, I try to get localized data from it, otherwise English ones are used.
+
+### `ok` and `cancel` keys
+
+Default, global labels of the buttons at the bottom of the picker.
+
+## Daylight saving time
+
+The datetime picker is using `Date` object with your browser's timezone, including any DST. When you change the date, hour, minute, or second, which sets the time to an invalid value because of moving from 2:00 to 3:00 at the beginning of DST, the time is automatically adjusted to a valid value. On the other hand, when the DST ends, I do NOT take the inserted hour into consideration, but this may be fixed in the future.
diff --git a/www/lib/ion-datetime-picker/bower.json b/www/lib/ion-datetime-picker/bower.json
new file mode 100644
index 00000000..59925f18
--- /dev/null
+++ b/www/lib/ion-datetime-picker/bower.json
@@ -0,0 +1,30 @@
+{
+    "name": "ion-datetime-picker",
+    "version": "0.1.1",
+    "authors": [
+        "Kate Miháliková <kate@katemihalikova.cz>"
+    ],
+    "description": "Date and/or time picker for awesome ionic framework",
+    "main": [
+        "release/ion-datetime-picker.min.js",
+        "release/ion-datetime-picker.min.css"
+    ],
+    "keywords": [
+        "ion-datetime-picker",
+        "ionic",
+        "date",
+        "time",
+        "picker",
+        "cordova",
+        "phonegap"
+    ],
+    "license": "MIT",
+    "homepage": "https://github.com/katemihalikova/ionic-datetime-picker",
+    "ignore": [
+        "**/.*",
+        "node_modules"
+    ],
+    "dependencies": {
+        "ionic": ">=1.0.0-beta.9"
+    }
+}
diff --git a/www/lib/ion-datetime-picker/gulpfile.js b/www/lib/ion-datetime-picker/gulpfile.js
new file mode 100644
index 00000000..483695e5
--- /dev/null
+++ b/www/lib/ion-datetime-picker/gulpfile.js
@@ -0,0 +1,43 @@
+var gulp = require("gulp");
+var sass = require("gulp-sass");
+var minifyHtml = require("gulp-minify-html");
+var ngHtml2js = require("gulp-ng-html2js");
+var ngAnnotate = require("gulp-ng-annotate");
+var iife = require("gulp-iife");
+var uglify = require("gulp-uglify");
+var concat = require("gulp-concat");
+
+gulp.task("sass", function() {
+    return gulp.src("src/picker.scss")
+        .pipe(concat("ion-datetime-picker.min.scss"))
+        .pipe(sass({outputStyle: "compressed"}))
+        .pipe(gulp.dest("release"));
+});
+
+gulp.task("html", function() {
+    return gulp.src("src/picker-*.html")
+        .pipe(minifyHtml({
+            empty: true,
+            spare: true,
+            quotes: true
+        }))
+        .pipe(ngHtml2js({
+            moduleName: "ion-datetime-picker",
+            declareModule: false
+        }))
+        .pipe(concat("ion-datetime-picker.min.js"))
+        .pipe(gulp.dest("release"));
+});
+
+gulp.task("js", ["html"], function() {
+    return gulp.src(["src/picker.js", "src/picker-*.js", "release/ion-datetime-picker.min.js"])
+        .pipe(ngAnnotate())
+        .pipe(concat("ion-datetime-picker.min.js"))
+        .pipe(iife())
+        .pipe(uglify())
+        .pipe(gulp.dest("release"));
+});
+
+gulp.task("build", ["sass", "js"]);
+
+gulp.task("default", ["build"]);
diff --git a/www/lib/ion-datetime-picker/package.json b/www/lib/ion-datetime-picker/package.json
new file mode 100644
index 00000000..403ce4f3
--- /dev/null
+++ b/www/lib/ion-datetime-picker/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "ion-datetime-picker",
+  "version": "0.1.1",
+  "description": "Date and/or time picker for awesome ionic framework",
+  "main": [
+    "release/ion-datetime-picker.js",
+    "release/ion-datetime-picker.css"
+  ],
+  "scripts": {},
+  "author": "https://github.com/katemihalikova, kate@katemihalikova.cz",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {
+    "gulp": "^3.9.0",
+    "gulp-concat": "^2.6.0",
+    "gulp-iife": "^0.1.0",
+    "gulp-minify-html": "^1.0.4",
+    "gulp-ng-annotate": "^1.1.0",
+    "gulp-ng-html2js": "^0.2.0",
+    "gulp-sass": "^2.0.4",
+    "gulp-uglify": "^1.4.1"
+  }
+}
diff --git a/www/lib/ion-datetime-picker/release/ion-datetime-picker.min.css b/www/lib/ion-datetime-picker/release/ion-datetime-picker.min.css
new file mode 100644
index 00000000..55dc915a
--- /dev/null
+++ b/www/lib/ion-datetime-picker/release/ion-datetime-picker.min.css
@@ -0,0 +1 @@
+.ion-datetime-picker .calendar{text-align:center;font-size:12px}.ion-datetime-picker .calendar .col{padding:0}.ion-datetime-picker .calendar .day,.ion-datetime-picker .calendar .weekday{padding:5px}.ion-datetime-picker .calendar .day:hover,.ion-datetime-picker .calendar .day.activated,.ion-datetime-picker .calendar .day.today:hover,.ion-datetime-picker .calendar .day.today.activated{background-color:#bdf;color:black;cursor:pointer}.ion-datetime-picker .calendar .day.today{background-color:#e4e4e4}.ion-datetime-picker .calendar .day.selected,.ion-datetime-picker .calendar .day.selected:hover,.ion-datetime-picker .calendar .day.selected.activated{background-color:#387ef5;color:white}.ion-datetime-picker .calendar .weekday{font-weight:bold}.ion-datetime-picker .month-year{padding:0;text-align:center}.ion-datetime-picker .month-year select{width:100%}.ion-datetime-picker .month-year .button{padding:0;width:100%;height:25px;min-width:0;min-height:0}.ion-datetime-picker .month-year .item-input{height:25px;padding:0;margin:0}.ion-datetime-picker .month-year .item-input.item-select:after{right:5px}.ion-datetime-picker .month-year .item-input input,.ion-datetime-picker .month-year .item-input select{font-size:12px;width:100%;height:100%;max-width:none;line-height:20px}.ion-datetime-picker .month-year .item-input select{left:0;padding:0 15px 0 1px;direction:ltr}.ion-datetime-picker .month-year .item-input input{text-align:center;padding:0 5px}.ion-datetime-picker .month-year .item-input input.ng-invalid{background-color:#ffe4ea}.ion-datetime-picker .month-year .item-input input::-webkit-outer-spin-button,.ion-datetime-picker .month-year .item-input input::-webkit-inner-spin-button{display:none}.ion-datetime-picker .time-buttons .col{padding:0}.ion-datetime-picker .time-buttons .button{padding:0;width:100%;height:36px;min-width:0;min-height:0}.ion-datetime-picker .time-buttons .button:before{line-height:35px}.ion-datetime-picker .time-buttons:first-child{padding-top:0}.ion-datetime-picker .time-buttons:last-child{padding-bottom:0}.ion-datetime-picker .time .col{padding:0}.ion-datetime-picker .time .colon{color:#999;font-size:16px;padding:0;text-align:center;line-height:32px}.ion-datetime-picker .time .item-input{height:35px;padding:0;margin:0}.ion-datetime-picker .time .item-input input{font-size:16px;width:100%;height:100%;max-width:none;text-align:center;padding:0 5px}.ion-datetime-picker .time .item-input input.ng-invalid{background-color:#ffe4ea}.ion-datetime-picker .time .item-input input::-webkit-outer-spin-button,.ion-datetime-picker .time .item-input input::-webkit-inner-spin-button{display:none}
diff --git a/www/lib/ion-datetime-picker/release/ion-datetime-picker.min.js b/www/lib/ion-datetime-picker/release/ion-datetime-picker.min.js
new file mode 100644
index 00000000..4f04a008
--- /dev/null
+++ b/www/lib/ion-datetime-picker/release/ion-datetime-picker.min.js
@@ -0,0 +1 @@
+!function(){"use strict";angular.module("ion-datetime-picker",["ionic"]).directive("ionDatetimePicker",function(){return{restrict:"AE",require:"ngModel",scope:{modelDate:"=ngModel",title:"=",subTitle:"=",buttonOk:"=",buttonCancel:"="},controller:["$scope","$ionicPopup","$ionicPickerI18n","$timeout",function(e,n,t,i){e.i18n=t,e.bind={},e.rows=[0,1,2,3,4,5],e.cols=[1,2,3,4,5,6,7],e.weekdays=[0,1,2,3,4,5,6],e.showPopup=function(){n.show({templateUrl:"picker-popup.html",title:e.title||"Pick "+(e.dateEnabled?"a date":"")+(e.dateEnabled&&e.timeEnabled?" and ":"")+(e.timeEnabled?"a time":""),subTitle:e.subTitle||"",scope:e,buttons:[{text:e.buttonOk||e.i18n.ok,type:"button-positive",onTap:function(){e.commit()}},{text:e.buttonCancel||e.i18n.cancel,type:"button-stable",onTap:function(){i(function(){e.processModel()},200)}}]})},e.prepare=function(){e.mondayFirst&&e.weekdays.push(e.weekdays.shift())},e.processModel=function(){var n=e.modelDate instanceof Date?e.modelDate:new Date;e.year=e.dateEnabled?n.getFullYear():0,e.month=e.dateEnabled?n.getMonth():0,e.day=e.dateEnabled?n.getDate():0,e.hour=e.timeEnabled?n.getHours():0,e.minute=e.timeEnabled?n.getMinutes():0,e.second=e.secondsEnabled?n.getSeconds():0,o()};var o=function(){var n=new Date(e.year,e.month,e.day,e.hour,e.minute,e.second);e.dateEnabled&&(e.year=n.getFullYear(),e.month=n.getMonth(),e.day=n.getDate(),e.bind.year=e.year,e.bind.month=e.month.toString(),e.firstDay=new Date(e.year,e.month,1).getDay(),e.mondayFirst&&(e.firstDay=(e.firstDay||7)-1),e.daysInMonth=new Date(e.year,e.month+1,0).getDate(),e.day>e.daysInMonth&&(e.day=e.daysInMonth)),e.timeEnabled&&(e.hour=n.getHours(),e.minute=n.getMinutes(),e.second=n.getSeconds(),e.meridiem=e.hour<12?"AM":"PM",e.bind.hour=e.meridiemEnabled?(e.hour%12||12).toString():e.hour.toString(),e.bind.minute=(e.minute<10?"0":"")+e.minute.toString(),e.bind.second=(e.second<10?"0":"")+e.second.toString(),e.bind.meridiem=e.meridiem)};e.changeBy=function(n,t){if(+n){if(("hour"===t||"minute"===t)&&-1===n){var i=new Date(e.year,e.month,e.day,e.hour-1,e.minute);0!==e.minute&&"hour"!==t||e.hour!==i.getHours()||e.hour--}e[t]+=+n,o()}},e.change=function(n){var t=e.bind[n];t&&"meridiem"===n?(t=t.toUpperCase(),"AM"===t&&"PM"===e.meridiem?e.hour-=12:"PM"===t&&"AM"===e.meridiem&&(e.hour+=12),o()):(+t||"0"===t)&&(e[n]=+t,o())},e.changeDay=function(n){e.day=n,o()},e.changed=function(){o()},e.dateEnabled&&e.$watch(function(){return(new Date).getDate()},function(){var n=new Date;e.today={day:n.getDate(),month:n.getMonth(),year:n.getFullYear()}})}],link:function(e,n,t,i){e.dateEnabled="date"in t&&"false"!==t.date,e.timeEnabled="time"in t&&"false"!==t.time,e.dateEnabled===!1&&e.timeEnabled===!1&&(e.dateEnabled=e.timeEnabled=!0),e.mondayFirst="mondayFirst"in t&&"false"!==t.mondayFirst,e.secondsEnabled=e.timeEnabled&&"seconds"in t&&"false"!==t.seconds,e.meridiemEnabled=e.timeEnabled&&"amPm"in t&&"false"!==t.amPm,e.prepare(),i.$render=function(){e.modelDate=i.$viewValue,e.processModel()},e.commit=function(){e.modelDate=new Date(e.year,e.month,e.day,e.hour,e.minute,e.second),i.$setViewValue(e.modelDate)},n.on("click",e.showPopup)}}}),angular.module("ion-datetime-picker").factory("$ionicPickerI18n",["$window",function(e){return{ok:"OK",cancel:"Cancel",weekdays:e.moment?e.moment.weekdaysMin():["Su","Mo","Tu","We","Th","Fr","Sa"],months:e.moment?e.moment.months():["January","February","March","April","May","June","July","August","September","October","November","December"]}}]),angular.module("ion-datetime-picker").run(["$templateCache",function(e){e.put("picker-popup.html",'<div class="ion-datetime-picker"><div ng-if-start="dateEnabled" class="row month-year"><div class="col col-10 left-arrow"><button class="button button-small button-positive button-clear icon ion-chevron-left" ng-click="changeBy(-1, \'month\')"></button></div><label class="col col-50 month-input"><div class="item item-input item-select"><select ng-model="bind.month" ng-options="index as month for (index, month) in i18n.months" ng-change="change(\'month\')"></select></div></label> <label class="col year-input"><div class="item item-input"><input type="number" ng-model="bind.year" min="1900" max="2999" ng-change="change(\'year\')" ng-blur="changed()" required=""></div></label><div class="col col-10 right-arrow"><button class="button button-small button-positive button-clear icon ion-chevron-right" ng-click="changeBy(+1, \'month\')"></button></div></div><div class="row calendar weekdays"><div class="col" ng-repeat="weekday in weekdays"><div class="weekday">{{i18n.weekdays[weekday]}}</div></div></div><div ng-if-end="" class="row calendar days" ng-repeat="y in rows"><div class="col" ng-repeat="x in cols"><div ng-show="(cellDay = y * 7 + x - firstDay) > 0 && cellDay <= daysInMonth" ng-click="changeDay(cellDay)" class="day" ng-class="{\'selected\': cellDay === day, \'today\': cellDay === today.day && month === today.month && year === today.year}">{{cellDay}}</div></div></div><div ng-if-start="timeEnabled" class="row time-buttons"><div class="col"></div><div class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+1, \'hour\')"></button></div><div class="col"></div><div class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+1, \'minute\')"></button></div><div ng-if-start="secondsEnabled" class="col"></div><div ng-if-end="" class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+1, \'second\')"></button></div><div ng-if-start="meridiemEnabled" class="col"></div><div ng-if-end="" class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+12, \'hour\')"></button></div><div class="col"></div></div><div class="row time"><div class="col"></div><label class="col col-20"><div class="item item-input"><input type="text" ng-model="bind.hour" pattern="0?([01]?[0-9]|2[0-3])" ng-change="change(\'hour\')" ng-blur="changed()" required=""></div></label><div class="col colon">:</div><label class="col col-20"><div class="item item-input"><input type="text" ng-model="bind.minute" pattern="0?[0-5]?[0-9]" ng-change="change(\'minute\')" ng-blur="changed()" required=""></div></label><div ng-if-start="secondsEnabled" class="col colon">:</div><label ng-if-end="" class="col col-20"><div class="item item-input"><input type="text" ng-model="bind.second" pattern="0?[0-5]?[0-9]" ng-change="change(\'second\')" ng-blur="changed()" required=""></div></label><div ng-if-start="meridiemEnabled" class="col"></div><label ng-if-end="" class="col col-20"><div class="item item-input"><input type="text" ng-model="bind.meridiem" pattern="[aApP][mM]" ng-change="change(\'meridiem\')" ng-blur="changed()" required=""></div></label><div class="col"></div></div><div ng-if-end="" class="row time-buttons"><div class="col"></div><div class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-1, \'hour\')"></button></div><div class="col"></div><div class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-1, \'minute\')"></button></div><div ng-if-start="secondsEnabled" class="col"></div><div ng-if-end="" class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-1, \'second\')"></button></div><div ng-if-start="meridiemEnabled" class="col"></div><div ng-if-end="" class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-12, \'hour\')"></button></div><div class="col"></div></div></div>')}])}();
\ No newline at end of file
diff --git a/www/lib/ion-datetime-picker/src/picker-i18n.js b/www/lib/ion-datetime-picker/src/picker-i18n.js
new file mode 100644
index 00000000..e3de39e3
--- /dev/null
+++ b/www/lib/ion-datetime-picker/src/picker-i18n.js
@@ -0,0 +1,9 @@
+angular.module("ion-datetime-picker")
+    .factory("$ionicPickerI18n", function($window) {
+        return  {
+            ok: "OK",
+            cancel: "Cancel",
+            weekdays: $window.moment ? $window.moment.weekdaysMin() : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+            months: $window.moment ? $window.moment.months() : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+        };
+    });
\ No newline at end of file
diff --git a/www/lib/ion-datetime-picker/src/picker-popup.html b/www/lib/ion-datetime-picker/src/picker-popup.html
new file mode 100644
index 00000000..df1e3646
--- /dev/null
+++ b/www/lib/ion-datetime-picker/src/picker-popup.html
@@ -0,0 +1,81 @@
+<div class="ion-datetime-picker">
+    <div ng-if-start="dateEnabled" class="row month-year">
+        <div class="col col-10 left-arrow">
+            <button class="button button-small button-positive button-clear icon ion-chevron-left" ng-click="changeBy(-1, 'month')"></button>
+        </div>
+        <label class="col col-50 month-input">
+            <div class="item item-input item-select">
+                <select ng-model="bind.month" ng-options="index as month for (index, month) in i18n.months" ng-change="change('month')"></select>
+            </div>
+        </label>
+        <label class="col year-input">
+            <div class="item item-input">
+                <input type="number" ng-model="bind.year" min="1900" max="2999" ng-change="change('year')" ng-blur="changed()" required>
+            </div>
+        </label>
+        <div class="col col-10 right-arrow">
+            <button class="button button-small button-positive button-clear icon ion-chevron-right" ng-click="changeBy(+1, 'month')"></button>
+        </div>
+    </div>
+
+    <div class="row calendar weekdays">
+        <div class="col" ng-repeat="weekday in weekdays">
+            <div class="weekday">{{i18n.weekdays[weekday]}}</div>
+        </div>
+    </div>
+    <div ng-if-end class="row calendar days" ng-repeat="y in rows">
+        <div class="col" ng-repeat="x in cols">
+            <div ng-show="(cellDay = y * 7 + x - firstDay) > 0 && cellDay <= daysInMonth" ng-click="changeDay(cellDay)" class="day" ng-class="{'selected': cellDay === day, 'today': cellDay === today.day && month === today.month && year === today.year}">{{cellDay}}</div>
+        </div>
+    </div>
+
+    <div ng-if-start="timeEnabled" class="row time-buttons">
+        <div class="col"></div>
+        <div class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+1, 'hour')"></button></div>
+        <div class="col"></div>
+        <div class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+1, 'minute')"></button></div>
+        <div ng-if-start="secondsEnabled" class="col"></div>
+        <div ng-if-end class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+1, 'second')"></button></div>
+        <div ng-if-start="meridiemEnabled" class="col"></div>
+        <div ng-if-end class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+12, 'hour')"></button></div>
+        <div class="col"></div>
+    </div>
+    <div class="row time">
+        <div class="col"></div>
+        <label class="col col-20">
+            <div class="item item-input">
+                <input type="text" ng-model="bind.hour" pattern="0?([01]?[0-9]|2[0-3])" ng-change="change('hour')" ng-blur="changed()" required>
+            </div>
+        </label>
+        <div class="col colon">:</div>
+        <label class="col col-20">
+            <div class="item item-input">
+                <input type="text" ng-model="bind.minute" pattern="0?[0-5]?[0-9]" ng-change="change('minute')" ng-blur="changed()" required>
+            </div>
+        </label>
+        <div ng-if-start="secondsEnabled" class="col colon">:</div>
+        <label ng-if-end class="col col-20">
+            <div class="item item-input">
+                <input type="text" ng-model="bind.second" pattern="0?[0-5]?[0-9]" ng-change="change('second')" ng-blur="changed()" required>
+            </div>
+        </label>
+        <div ng-if-start="meridiemEnabled" class="col"></div>
+        <label ng-if-end class="col col-20">
+            <div class="item item-input">
+                <input type="text" ng-model="bind.meridiem" pattern="[aApP][mM]" ng-change="change('meridiem')" ng-blur="changed()" required>
+            </div>
+        </label>
+        <div class="col"></div>
+    </div>
+    <div ng-if-end class="row time-buttons">
+        <div class="col"></div>
+        <div class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-1, 'hour')"></button></div>
+        <div class="col"></div>
+        <div class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-1, 'minute')"></button></div>
+        <div ng-if-start="secondsEnabled" class="col"></div>
+        <div ng-if-end class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-1, 'second')"></button></div>
+        <div ng-if-start="meridiemEnabled" class="col"></div>
+        <div ng-if-end class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-12, 'hour')"></button></div>
+        <div class="col"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/www/lib/ion-datetime-picker/src/picker.js b/www/lib/ion-datetime-picker/src/picker.js
new file mode 100644
index 00000000..62c941ce
--- /dev/null
+++ b/www/lib/ion-datetime-picker/src/picker.js
@@ -0,0 +1,184 @@
+angular.module("ion-datetime-picker", ["ionic"])
+    .directive("ionDatetimePicker", function() {
+        return {
+            restrict: "AE",
+            require: "ngModel",
+            scope: {
+                modelDate: "=ngModel",
+                title: "=",
+                subTitle: "=",
+                buttonOk: "=",
+                buttonCancel: "="
+            },
+            controller: function($scope, $ionicPopup, $ionicPickerI18n, $timeout) {
+                $scope.i18n = $ionicPickerI18n;
+                $scope.bind = {};
+
+                $scope.rows = [0, 1, 2, 3, 4, 5];
+                $scope.cols = [1, 2, 3, 4, 5, 6, 7];
+                $scope.weekdays = [0, 1, 2, 3, 4, 5, 6];
+
+                $scope.showPopup = function() {
+                    $ionicPopup.show({
+                        templateUrl: "picker-popup.html",
+                        title: $scope.title || ("Pick " + ($scope.dateEnabled ? "a date" : "") + ($scope.dateEnabled && $scope.timeEnabled ? " and " : "") + ($scope.timeEnabled ? "a time" : "")),
+                        subTitle: $scope.subTitle || "",
+                        scope: $scope,
+                        buttons: [
+                            {
+                                text: $scope.buttonOk || $scope.i18n.ok,
+                                type: "button-positive",
+                                onTap: function() {
+                                    $scope.commit();
+                                }
+                            }, {
+                                text: $scope.buttonCancel || $scope.i18n.cancel,
+                                type: "button-stable",
+                                onTap: function() {
+                                    $timeout(function() {
+                                        $scope.processModel();
+                                    }, 200);
+                                }
+                            }
+                        ]
+                    });
+                };
+
+                $scope.prepare = function() {
+                    if ($scope.mondayFirst) {
+                        $scope.weekdays.push($scope.weekdays.shift());
+                    }
+                };
+
+                $scope.processModel = function() {
+                    var date = $scope.modelDate instanceof Date ? $scope.modelDate : new Date();
+                    $scope.year = $scope.dateEnabled ? date.getFullYear() : 0;
+                    $scope.month = $scope.dateEnabled ? date.getMonth() : 0;
+                    $scope.day = $scope.dateEnabled ? date.getDate() : 0;
+                    $scope.hour = $scope.timeEnabled ? date.getHours() : 0;
+                    $scope.minute = $scope.timeEnabled ? date.getMinutes() : 0;
+                    $scope.second = $scope.secondsEnabled ? date.getSeconds() : 0;
+
+                    changeViewData();
+                };
+
+                var changeViewData = function() {
+                    var date = new Date($scope.year, $scope.month, $scope.day, $scope.hour, $scope.minute, $scope.second);
+
+                    if ($scope.dateEnabled) {
+                        $scope.year = date.getFullYear();
+                        $scope.month = date.getMonth();
+                        $scope.day = date.getDate();
+
+                        $scope.bind.year = $scope.year;
+                        $scope.bind.month = $scope.month.toString();
+
+                        $scope.firstDay = new Date($scope.year, $scope.month, 1).getDay();
+                        if ($scope.mondayFirst) {
+                            $scope.firstDay = ($scope.firstDay || 7) - 1;
+                        }
+                        $scope.daysInMonth = new Date($scope.year, $scope.month + 1, 0).getDate();
+                        if ($scope.day > $scope.daysInMonth) {
+                            $scope.day = $scope.daysInMonth;
+                        }
+                    }
+
+                    if ($scope.timeEnabled) {
+                        $scope.hour = date.getHours();
+                        $scope.minute = date.getMinutes();
+                        $scope.second = date.getSeconds();
+                        $scope.meridiem = $scope.hour < 12 ? "AM" : "PM";
+
+                        $scope.bind.hour = $scope.meridiemEnabled ? ($scope.hour % 12 || 12).toString() : $scope.hour.toString();
+                        $scope.bind.minute = ($scope.minute < 10 ? "0" : "") + $scope.minute.toString();
+                        $scope.bind.second = ($scope.second < 10 ? "0" : "") + $scope.second.toString();
+                        $scope.bind.meridiem = $scope.meridiem;
+                    }
+                };
+
+                $scope.changeBy = function(value, unit) {
+                    if (+value) {
+                        // DST workaround
+                        if ((unit === "hour" || unit === "minute") && value === -1) {
+                            var date = new Date($scope.year, $scope.month, $scope.day, $scope.hour - 1, $scope.minute);
+                            if (($scope.minute === 0 || unit === "hour") && $scope.hour === date.getHours()) {
+                                $scope.hour--;
+                            }
+                        }
+                        $scope[unit] += +value;
+                        changeViewData();
+                    }
+                };
+                $scope.change = function(unit) {
+                    var value = $scope.bind[unit];
+                    if (value && unit === "meridiem") {
+                        value = value.toUpperCase();
+                        if (value === "AM" && $scope.meridiem === "PM") {
+                            $scope.hour -= 12;
+                        } else if (value === "PM" && $scope.meridiem === "AM") {
+                            $scope.hour += 12;
+                        }
+                        changeViewData();
+                    } else if (+value || value === "0") {
+                        $scope[unit] = +value;
+                        changeViewData();
+                    }
+                };
+                $scope.changeDay = function(day) {
+                    $scope.day = day;
+                    changeViewData();
+                };
+                $scope.changed = function() {
+                    changeViewData();
+                };
+
+                if ($scope.dateEnabled) {
+                    $scope.$watch(function() {
+                        return new Date().getDate();
+                    }, function() {
+                        var today = new Date();
+                        $scope.today = {
+                            day: today.getDate(),
+                            month: today.getMonth(),
+                            year: today.getFullYear()
+                        };
+                    });
+//                    $scope.goToToday = function() {
+//                        $scope.year = $scope.today.year;
+//                        $scope.month = $scope.today.month;
+//                        $scope.day = $scope.today.day;
+//
+//                        changeViewData();
+//                    };
+                }
+            },
+            link: function($scope, $element, $attrs, ngModelCtrl) {
+                $scope.dateEnabled = "date" in $attrs && $attrs.date !== "false";
+                $scope.timeEnabled = "time" in $attrs && $attrs.time !== "false";
+                if ($scope.dateEnabled === false && $scope.timeEnabled === false) {
+                    $scope.dateEnabled = $scope.timeEnabled = true;
+                }
+
+                $scope.mondayFirst = "mondayFirst" in $attrs && $attrs.mondayFirst !== "false";
+                $scope.secondsEnabled = $scope.timeEnabled && "seconds" in $attrs && $attrs.seconds !== "false";
+                $scope.meridiemEnabled = $scope.timeEnabled && "amPm" in $attrs && $attrs.amPm !== "false";
+
+
+
+
+                $scope.prepare();
+
+                ngModelCtrl.$render = function() {
+                    $scope.modelDate = ngModelCtrl.$viewValue;
+                    $scope.processModel();
+                };
+
+                $scope.commit = function() {
+                    $scope.modelDate = new Date($scope.year, $scope.month, $scope.day, $scope.hour, $scope.minute, $scope.second);
+                    ngModelCtrl.$setViewValue($scope.modelDate);
+                };
+
+                $element.on("click", $scope.showPopup);
+            }
+        };
+    });
\ No newline at end of file
diff --git a/www/lib/ion-datetime-picker/src/picker.scss b/www/lib/ion-datetime-picker/src/picker.scss
new file mode 100644
index 00000000..da060e66
--- /dev/null
+++ b/www/lib/ion-datetime-picker/src/picker.scss
@@ -0,0 +1,133 @@
+.ion-datetime-picker {
+    .calendar {
+        text-align: center;
+        font-size: 12px;
+
+        .col {
+            padding: 0;
+        }
+        .day, .weekday {
+            padding: 5px;
+        }
+        .day {
+            &:hover, &.activated, &.today:hover, &.today.activated {
+                background-color: #bdf;
+                color: black;
+                cursor: pointer;
+            }
+            &.today {
+                background-color: #e4e4e4;
+            }
+            &.selected, &.selected:hover, &.selected.activated {
+                background-color: #387ef5;
+                color: white;
+            }
+        }
+        .weekday {
+            font-weight: bold;
+        }
+    }
+    .month-year {
+        padding: 0;
+        text-align: center;
+
+        select {
+            width: 100%;
+        }
+        .button {
+            padding: 0;
+            width: 100%;
+            height: 25px;
+            min-width: 0;
+            min-height: 0;
+        }
+        .item-input {
+            height: 25px;
+            padding: 0;
+            margin: 0;
+
+            &.item-select:after {
+                right: 5px;
+            }
+            input, select {
+                font-size: 12px;
+                width: 100%;
+                height: 100%;
+                max-width: none;
+                line-height: 20px;
+            }
+            select {
+                left: 0;
+                padding: 0 15px 0 1px;
+                direction: ltr;
+            }
+            input {
+                text-align: center;
+                padding: 0 5px;
+
+                &.ng-invalid {
+                    background-color: #ffe4ea;
+                }
+                &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .time-buttons {
+        .col {
+            padding: 0;
+        }
+        .button {
+            padding: 0;
+            width: 100%;
+            height: 36px;
+            min-width: 0;
+            min-height: 0;
+        }
+        .button:before {
+            line-height: 35px;
+        }
+        &:first-child {
+            padding-top: 0;
+        }
+        &:last-child {
+            padding-bottom: 0;
+        }
+    }
+
+    .time {
+        .col {
+            padding: 0;
+        }
+        .colon {
+            color: #999;
+            font-size: 16px;
+            padding: 0;
+            text-align: center;
+            line-height: 32px;
+        }
+        .item-input {
+            height: 35px;
+            padding: 0;
+            margin: 0;
+
+            input {
+                font-size: 16px;
+                width: 100%;
+                height: 100%;
+                max-width: none;
+                text-align: center;
+                padding: 0 5px;
+
+                &.ng-invalid {
+                    background-color: #ffe4ea;
+                }
+                &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+                    display: none;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index 971afd65..6a935c15 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -1,4 +1,4 @@
-<ion-view title="History" cache-view="false" hide-nav-bar="{{minimal}}">
+<ion-view title="Event Montage" cache-view="false" hide-nav-bar="{{minimal}}">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
         
@@ -42,7 +42,13 @@
 
         <span ng-show="!minimal">
             
-            <div class="timeline_text"><b>Timeline starting: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}} @ {{sliderVal.rate}}x</b></div>
+            
+            
+            <div  class="timeline_text" ion-datetime-picker ng-model="datetimeValue.value" >
+                    <b>Tap to change: {{datetimeValue.value | date: "yyyy-MMM-dd hh:mma"}}  @ {{sliderVal.rate}}x</b>
+                    
+                </div>
+            
         
                 <div class="range range-positive">
                     <i style="color:#bbbbbb" class="icon ion-image"></i>
@@ -180,18 +186,25 @@
                             toggle-class="toggle-dark">exact time match</ion-toggle>
             
                 
-                <div class="item item-divider">Start at: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}} </div>
                 
+                 <!--<div  class="item item-divider" ion-datetime-picker ng-model="datetimeValue.value">
+                    Tap to change: {{datetimeValue.value| date: "yyyy-MMM-dd hh:mma"}}
+                </div>-->
+               
+                
+            
+
                 
                 <div class="row">
-                    <div class="col col-90">
+                    <div class="col col-75">
                         <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.rate" type="text" id="mySlider6" slider options="slider_modal_options_rate"/></div><br/>
                     </div>
-                    <div class="col col-10" style="background-color:#AEA8D3">
-                     rate  
+                    <div class="col col-25" style="background-color:#AEA8D3;text-align:center">
+                     speed  
                     </div>
                 </div>
                 
+<!--
                 <div class="row">
                     <div class="col col-90">
                         <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.min" type="text" id="mySlider5" slider options="slider_modal_options_mm"/></div><br/>
@@ -235,7 +248,9 @@
                     <div class="col col-10" style="background-color:#7f8c8d">
                       yr 
                     </div>
-                </div>
+                </div>-->
+                
+                
   
             </div>
         </ion-pull-up-content>