fly/fgdata
1
0
Fork 0
Code Activity

Phi: implement setting of date and time

Browse source 
Use MIT licensed clockpicker from
http://weareoutman.github.io/clockpicker/ for Android like clock picker

Know bug: next/prev month click only works with ctrl-click (jquery bug?)
This commit is contained in:
Torsten Dreyer 2015-09-15 18:05:51 +02:00
parent d5d5508530
commit f4830030bf
6 changed files with 91 additions and 63 deletions

9
Phi/3rdparty/clockpicker/jquery-clockpicker.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

6
Phi/3rdparty/clockpicker/jquery-clockpicker.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
Phi/index.html
View file

@ -31,6 +31,7 @@
<link rel="stylesheet" type="text/css" href="/Fonts/LiberationFonts/LiberationFonts.css">
<link rel="stylesheet" href="3rdparty/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="3rdparty/clockpicker/jquery-clockpicker.min.css" />
<link id="ui-theme" rel="stylesheet" href="3rdparty/jquery-ui-themes-1.11.2/themes/smoothness/jquery-ui.min.css" />
<style>

5
Phi/main.js
View file

@ -16,7 +16,8 @@ require.config({
props : 'lib/props2',
sammy: '3rdparty/sammy-latest.min',
aircraft: '../aircraft-dir',
pagedown: '3rdparty/pagedown'
pagedown: '3rdparty/pagedown',
clockpicker: '3rdparty/clockpicker/jquery-clockpicker.min',
}
});
@ -265,7 +266,7 @@ require([
[
"gmt", "/sim/time/gmt"
], [
"local-offset", "/sim/time/local-offset"
"timeWarp", "/sim/time/warp"
],
// flight

14
Phi/topics/Environment/DateTime.html
View file

@ -11,13 +11,15 @@
</fieldset>
<fieldset>
<legend>Date and Time</legend>
<div>Current System Time is: <span data-bind="text: simTimeUTC().toUTCString()"></span></div>
<div data-bind="datepicker: { value: simTimeUTC }"></div>
<div>
<input class="phi-datetime-2digits" data-bind="spinner: { value: hour, spin: wrapHour, page: 6 }" />
<input class="phi-datetime-2digits" data-bind="spinner: { value: minute, spin: wrapMinute }" />
Current System Time is: <span data-bind="text: timeAsString"></span>
</div>
<div data-bind="datepicker: { value: simTimeAsLocalTime, onSelect: onDateSelect }"></div>
<div class="input-group clockpicker">
<input type="text" class="form-control" value="18:00">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</fieldset>

117
Phi/topics/Environment/DateTime.js
View file

@ -1,6 +1,6 @@
define([
'jquery', 'knockout', 'text!./DateTime.html', 'fgcommand', 'kojqui/datepicker', 'kojqui/spinner'
], function(jquery, ko, htmlString, fgcommand ) {
'jquery', 'knockout', 'text!./DateTime.html', 'fgcommand', 'kojqui/datepicker', 'kojqui/spinner', 'clockpicker'
], function(jquery, ko, htmlString, fgcommand) {
function ViewModel(params) {
var self = this;
@ -10,71 +10,80 @@ define([
self.setTimeOfToday = function(type) {
var offsetTypes = {
"Clock Time": "real",
"Dawn": "dawn",
"Morning": "morning",
"Noon": "noon",
"Afternoon": "afternoon",
"Dusk": "dusk",
"Evening": "evening",
"Night": "night",
"Clock Time" : "real",
"Dawn" : "dawn",
"Morning" : "morning",
"Noon" : "noon",
"Afternoon" : "afternoon",
"Dusk" : "dusk",
"Evening" : "evening",
"Night" : "night",
}
offsetType = offsetTypes[type] || null;
if( ! offsetType ) {
console.log("unknown time offset type ", type );
if (!offsetType) {
console.log("unknown time offset type ", type);
return;
}
fgcommand.timeofday(offsetType);
}
self.wrapHour = function(evt, ui) {
return self._wrap(evt,ui,0,24);
}
self.gmtProp = ko.observable().extend({
fgprop : 'gmt'
});
//TODO: bind this to gmtProp?
// self.clockpickerInput.val(d.getUTCHours() + ':' + d.getUTCMinutes());
self.wrapMinute = function(evt, ui) {
return self._wrap(evt,ui,0,60);
}
self._wrap = function(evt,ui,min,max) {
if (ui.value >= max) {
$(evt.target).spinner("value", ui.value - max);
return false;
} else if (ui.value < min) {
$(evt.target).spinner("value", ui.value + max);
return false;
}
$(evt.target).spinner("value",ui.value);
return true;
}
self.gmtProp = ko.observable().extend({ fgprop: 'gmt' });
self.simTimeUTC = ko.pureComputed({
read: function() {
return new Date(self.gmtProp() + "Z");
},
write: function(newValue) {
console.log("new time: ", newValue );
}
self.warp = ko.observable().extend({
fgprop : 'timeWarp'
});
self.simTimeUTC = ko.pureComputed(function() {
// make a Date object holding the UTC time
var d = new Date(self.gmtProp() + "Z");
return d.getTime();
});
self.hour = ko.pureComputed({
read: function() {
return self.simTimeUTC().getUTCHours();
},
write: function(newValue) {
console.log("new hour", newValue );
}
self.timeAsString = ko.pureComputed(function() {
var d = new Date();
d.setTime( self.simTimeUTC() );
return d.toUTCString()
});
self.minute = ko.pureComputed({
read: function() {
return self.simTimeUTC().getUTCMinutes();
},
write: function(newValue) {
console.log("new minute", newValue );
}
self.simTimeAsLocalTime = ko.pureComputed(function() {
// jqui datepicker displays local (browser) time, so fake it by adding timezoneOffset
var d = new Date();
d.setTime( self.simTimeUTC() + 60000 * d.getTimezoneOffset() );
return d;
});
self.onDateSelect = function(dateText, inst) {
var utc = new Date(self.simTimeUTC());
utc.setFullYear(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
self.setWarpFor( utc.getTime() );
}
self.setWarpFor = function( newDateTime ) {
var warp = (newDateTime - self.simTimeUTC())/1000;
console.log("warp=", warp, self.warp());
ko.utils.knockprops.write( "timeWarp", self.warp() + warp );
}
// clockpicker: see http://weareoutman.github.io/clockpicker/
self.clockpicker = jquery('.clockpicker').clockpicker({
placement : 'top',
align : 'left',
autoclose : true,
afterDone : function() {
var utc = new Date();
utc.setTime( self.simTimeUTC() );
var hm = self.clockpickerInput.val().toString().split(":");
utc.setUTCHours(hm[0]);
utc.setUTCMinutes(hm[1]);
self.setWarpFor( utc.getTime() );
},
});
self.clockpickerInput = jquery('.clockpicker input');
}
ViewModel.prototype.dispose = function() {