From ac521c0b5cd3420a0c45f3e0946b00565992a98b Mon Sep 17 00:00:00 2001 From: pliablepixels Date: Tue, 26 Jan 2016 17:29:16 -0500 Subject: #154 - closed data leak holes, added date-time picker for a neater interface Former-commit-id: 401a743f555a5dd8021e6b8af790cd38808fd1ac --- www/index.html | 3 +- www/js/MontageHistoryCtrl.js | 60 ++++++- www/js/app.js | 4 +- www/lib/ion-datetime-picker/.bower.json | 40 +++++ www/lib/ion-datetime-picker/LICENSE | 22 +++ www/lib/ion-datetime-picker/README.md | 100 +++++++++++ www/lib/ion-datetime-picker/bower.json | 30 ++++ www/lib/ion-datetime-picker/gulpfile.js | 43 +++++ www/lib/ion-datetime-picker/package.json | 23 +++ .../release/ion-datetime-picker.min.css | 1 + .../release/ion-datetime-picker.min.js | 1 + www/lib/ion-datetime-picker/src/picker-i18n.js | 9 + www/lib/ion-datetime-picker/src/picker-popup.html | 81 +++++++++ www/lib/ion-datetime-picker/src/picker.js | 184 +++++++++++++++++++++ www/lib/ion-datetime-picker/src/picker.scss | 133 +++++++++++++++ www/templates/montage-history.html | 29 +++- 16 files changed, 748 insertions(+), 15 deletions(-) create mode 100644 www/lib/ion-datetime-picker/.bower.json create mode 100644 www/lib/ion-datetime-picker/LICENSE create mode 100644 www/lib/ion-datetime-picker/README.md create mode 100644 www/lib/ion-datetime-picker/bower.json create mode 100644 www/lib/ion-datetime-picker/gulpfile.js create mode 100644 www/lib/ion-datetime-picker/package.json create mode 100644 www/lib/ion-datetime-picker/release/ion-datetime-picker.min.css create mode 100644 www/lib/ion-datetime-picker/release/ion-datetime-picker.min.js create mode 100644 www/lib/ion-datetime-picker/src/picker-i18n.js create mode 100644 www/lib/ion-datetime-picker/src/picker-popup.html create mode 100644 www/lib/ion-datetime-picker/src/picker.js create mode 100644 www/lib/ion-datetime-picker/src/picker.scss (limited to 'www') 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 @@ + @@ -96,7 +97,7 @@ - + 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á " + ], + "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 + + +``` +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 + + + {{datetimeValue| date: "yyyy-mm-dd H:mm:ss"}} + + +``` + +## 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á " + ], + "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",'
{{i18n.weekdays[weekday]}}
{{cellDay}}
:
:
')}])}(); \ 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 @@ +
+
+
+ +
+ + +
+ +
+
+ +
+
+
{{i18n.weekdays[weekday]}}
+
+
+
+
+
{{cellDay}}
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
:
+ +
:
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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 @@ - + @@ -42,7 +42,13 @@ -
Timeline starting: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}} @ {{sliderVal.rate}}x
+ + +
+ Tap to change: {{datetimeValue.value | date: "yyyy-MMM-dd hh:mma"}} @ {{sliderVal.rate}}x + +
+
@@ -180,18 +186,25 @@ toggle-class="toggle-dark">exact time match -
Start at: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}}
+ + + + +
-
+


-
- rate +
+ speed
+ + +
-- cgit v1.2.3