From 6565e1d07cfe0c04344e021ff6437e98c48e900c Mon Sep 17 00:00:00 2001 From: nikolaiwarner Date: Mon, 18 Apr 2011 23:52:17 -0400 Subject: [PATCH] random updates --- app/controllers/poms_controller.rb | 11 +- app/views/layouts/application.html.haml | 4 +- app/views/poms/_form.html.erb | 12 +- app/views/poms/new.html.erb | 4 +- app/views/poms/show.html.erb | 55 +- public/javascripts/application.js | 16 +- .../javascripts/jquery-ui-timepicker-addon.js | 911 ++++++++++++++++++ public/stylesheets/application.css | 15 + public/stylesheets/sass/application.sass | 16 + 9 files changed, 976 insertions(+), 68 deletions(-) create mode 100644 public/javascripts/jquery-ui-timepicker-addon.js diff --git a/app/controllers/poms_controller.rb b/app/controllers/poms_controller.rb index 95e2e79..878be91 100644 --- a/app/controllers/poms_controller.rb +++ b/app/controllers/poms_controller.rb @@ -15,6 +15,7 @@ def index # GET /poms/1.xml def show @pom = Pom.find(params[:id]) + @groups = current_user.groups respond_to do |format| format.html # show.html.erb @@ -26,6 +27,9 @@ def show # GET /poms/new.xml def new @pom = Pom.new + + @groups = current_user.groups + respond_to do |format| format.html # new.html.erb @@ -36,14 +40,19 @@ def new # GET /poms/1/edit def edit @pom = Pom.find(params[:id]) + @groups = current_user.groups end # POST /poms # POST /poms.xml def create + if params[:pom]['datetime'] == 'Now' + params[:pom]['datetime'] = Time.now + end + @pom = Pom.new(params[:pom]) @pom.user_id = current_user.id - + respond_to do |format| if @pom.save format.html { redirect_to(@pom, :notice => 'pom was successfully created.') } diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index ade9e8b..0ce020e 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -10,7 +10,7 @@ %script{ :type => "text/javascript", :src => "https://www.google.com/jsapi?key=ABQIAAAALFcVECtS_cckPZPP6gEvtBQNqA7PXSQWBnZcv0WRsLc5vt2EwhRNL4XDqi3F3gVWu6gud-eJy35NIA" } :javascript - google.load("jquery", "1.5.0"); + google.load("jquery", "1.5.2"); google.load("jqueryui", "1.8.9"); google.load("webfont", "1.0.18"); google.setOnLoadCallback(function() { @@ -19,7 +19,7 @@ families: [ 'Philosopher' ] }}); }); - = javascript_include_tag 'jquery.simple-color.min', 'fullcalendar/fullcalendar.min', 'application' + = javascript_include_tag 'jquery-ui-timepicker-addon', 'jquery.simple-color.min', 'fullcalendar/fullcalendar.min', 'application' = csrf_meta_tag diff --git a/app/views/poms/_form.html.erb b/app/views/poms/_form.html.erb index fc32220..e82db46 100644 --- a/app/views/poms/_form.html.erb +++ b/app/views/poms/_form.html.erb @@ -12,15 +12,15 @@ <% end %>
- <%= f.label :datetime %>
- <%= f.datetime_select :datetime %> + <%= f.label :datetime, "When" %>
+ <%= f.text_field :datetime, :class => 'datetimepicker', :value => @pom.datetime || "Now" %>
- <%= f.label :project_id %>
- <%= select :pom, :project_id, current_user.projects.all.collect {|p| [ p.name, p.id ] }, {:include_blank => true} %> + <%= f.label :project_id, 'Project' %>
+ <%= grouped_collection_select :pom, :project_id, @groups, :projects, :name, :id, :name, {:include_blank => true} %>
- <%= f.label :description %>
+ <%= f.label :description, 'Notes' %>
<%= f.text_area :description %>
@@ -28,6 +28,6 @@ <%= f.text_field :value %>
- <%= f.submit %> + <%= f.submit 'Start Pomodoro' %>
<% end %> diff --git a/app/views/poms/new.html.erb b/app/views/poms/new.html.erb index 9599ce9..9b8e394 100644 --- a/app/views/poms/new.html.erb +++ b/app/views/poms/new.html.erb @@ -1,5 +1,3 @@ -

New pom

+

Start A Pomodoro

<%= render 'form' %> - -<%= link_to 'Back', poms_path %> diff --git a/app/views/poms/show.html.erb b/app/views/poms/show.html.erb index 7eb2f70..05352ed 100644 --- a/app/views/poms/show.html.erb +++ b/app/views/poms/show.html.erb @@ -1,7 +1,3 @@ -

<%= notice %>

- - - <% if @pom.seconds_remaining > 0 %>
- -<% end %> - - - - -
- - - -

- Start time: - <%= @pom.datetime %> -

- -

- Success: - <%= @pom.success %> -

- -

- User: - <%= @pom.user_id %> -

- -

- Project: - <%= @pom.project.name if @pom.project %> -

- -

- Description: - <%= @pom.description %> -

- -

- Value: - <%= @pom.value %> -

- - - - -
-
+<% end %> + +
-<%= link_to 'Edit', edit_pom_path(@pom) %> | -<%= link_to 'Back', poms_path %> +<%= render 'form' %> \ No newline at end of file diff --git a/public/javascripts/application.js b/public/javascripts/application.js index 18fbb33..47f7d90 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -6,6 +6,7 @@ var Aumodoro = { pom_length_in_minutes: 25, display_element: '.timer', interval: undefined, + to_string: "", minutes: 0, seconds: 0, @@ -46,7 +47,14 @@ var Aumodoro = { if (this.seconds < 10) { this.seconds = "0"+this.seconds; } - $(this.display_element).html(this.minutes+":"+this.seconds); + this.to_string = this.minutes+":"+this.seconds; + $(this.display_element).html(this.to_string); + + this.update_title(); + }, + + update_title: function() { + document.title = this.to_string; }, init: function(options) { @@ -66,10 +74,8 @@ $(document).ready(function(){ // Notifications $('.notice, .alert').hide().fadeIn(3000); - // Datepicker - if ($('.datepicker').length > 0) { - $('.datepicker').timepicker(); - } + // Datepicker + $('.datetimepicker').datetimepicker(); // Color picker $('.color_picker').simpleColor({ diff --git a/public/javascripts/jquery-ui-timepicker-addon.js b/public/javascripts/jquery-ui-timepicker-addon.js new file mode 100644 index 0000000..85c795c --- /dev/null +++ b/public/javascripts/jquery-ui-timepicker-addon.js @@ -0,0 +1,911 @@ +/* +* jQuery timepicker addon +* By: Trent Richardson [http://trentrichardson.com] +* Version 0.9.3 +* Last Modified: 02/05/2011 +* +* Copyright 2010 Trent Richardson +* Dual licensed under the MIT and GPL licenses. +* http://trentrichardson.com/Impromptu/GPL-LICENSE.txt +* http://trentrichardson.com/Impromptu/MIT-LICENSE.txt +* +* HERES THE CSS: +* .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } +* .ui-timepicker-div dl{ text-align: left; } +* .ui-timepicker-div dl dt{ height: 25px; } +* .ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; } +* .ui-timepicker-div td { font-size: 90%; } +*/ + +(function($) { + +$.extend($.ui, { timepicker: { version: "0.9.3" } }); + +/* Time picker manager. + Use the singleton instance of this class, $.timepicker, to interact with the time picker. + Settings for (groups of) time pickers are maintained in an instance object, + allowing multiple different settings on the same page. */ + +function Timepicker() { + this.regional = []; // Available regional settings, indexed by language code + this.regional[''] = { // Default regional settings + currentText: 'Now', + closeText: 'Done', + ampm: false, + timeFormat: 'hh:mm tt', + timeOnlyTitle: 'Choose Time', + timeText: 'Time', + hourText: 'Hour', + minuteText: 'Minute', + secondText: 'Second' + }; + this._defaults = { // Global defaults for all the datetime picker instances + showButtonPanel: true, + timeOnly: false, + showHour: true, + showMinute: true, + showSecond: false, + showTime: true, + stepHour: 0.05, + stepMinute: 0.05, + stepSecond: 0.05, + hour: 0, + minute: 0, + second: 0, + hourMin: 0, + minuteMin: 0, + secondMin: 0, + hourMax: 23, + minuteMax: 59, + secondMax: 59, + minDateTime: null, + maxDateTime: null, + hourGrid: 0, + minuteGrid: 0, + secondGrid: 0, + alwaysSetTime: true, + separator: ' ', + altFieldTimeOnly: true, + showTimepicker: true + }; + $.extend(this._defaults, this.regional['']); +} + +$.extend(Timepicker.prototype, { + $input: null, + $altInput: null, + $timeObj: null, + inst: null, + hour_slider: null, + minute_slider: null, + second_slider: null, + hour: 0, + minute: 0, + second: 0, + hourMinOriginal: null, + minuteMinOriginal: null, + secondMinOriginal: null, + hourMaxOriginal: null, + minuteMaxOriginal: null, + secondMaxOriginal: null, + ampm: '', + formattedDate: '', + formattedTime: '', + formattedDateTime: '', + + /* Override the default settings for all instances of the time picker. + @param settings object - the new settings to use as defaults (anonymous object) + @return the manager object */ + setDefaults: function(settings) { + extendRemove(this._defaults, settings || {}); + return this; + }, + + //######################################################################## + // Create a new Timepicker instance + //######################################################################## + _newInst: function($input, o) { + var tp_inst = new Timepicker(), + inlineSettings = {}; + + tp_inst.hour = tp_inst._defaults.hour; + tp_inst.minute = tp_inst._defaults.minute; + tp_inst.second = tp_inst._defaults.second; + tp_inst.ampm = ''; + tp_inst.$input = $input; + + + for (var attrName in this._defaults) { + var attrValue = $input.attr('time:' + attrName); + if (attrValue) { + try { + inlineSettings[attrName] = eval(attrValue); + } catch (err) { + inlineSettings[attrName] = attrValue; + } + } + } + tp_inst._defaults = $.extend({}, this._defaults, inlineSettings, o, { + beforeShow: function(input, dp_inst) { + if ($.isFunction(o.beforeShow)) + o.beforeShow(input, dp_inst, tp_inst); + }, + onChangeMonthYear: function(year, month, dp_inst) { + // Update the time as well : this prevents the time from disappearing from the $input field. + tp_inst._updateDateTime(dp_inst); + if ($.isFunction(o.onChangeMonthYear)) + o.onChangeMonthYear(year, month, dp_inst, tp_inst); + }, + onClose: function(dateText, dp_inst) { + if (tp_inst.timeDefined === true && $input.val() != '') + tp_inst._updateDateTime(dp_inst); + if ($.isFunction(o.onClose)) + o.onClose(dateText, dp_inst, tp_inst); + }, + timepicker: tp_inst // add timepicker as a property of datepicker: $.datepicker._get(dp_inst, 'timepicker'); + }); + + if (o.altField) + tp_inst.$altInput = $(o.altField) + .css({ cursor: 'pointer' }) + .focus(function(){ $input.trigger("focus"); }); + + // datepicker needs minDate/maxDate, timepicker needs minDateTime/maxDateTime.. + if(tp_inst._defaults.minDate !== undefined && tp_inst._defaults.minDate instanceof Date) + tp_inst._defaults.minDateTime = new Date(tp_inst._defaults.minDate.getTime()); + if(tp_inst._defaults.minDateTime !== undefined && tp_inst._defaults.minDateTime instanceof Date) + tp_inst._defaults.minDate = new Date(tp_inst._defaults.minDateTime.getTime()); + if(tp_inst._defaults.maxDate !== undefined && tp_inst._defaults.maxDate instanceof Date) + tp_inst._defaults.maxDateTime = new Date(tp_inst._defaults.maxDate.getTime()); + if(tp_inst._defaults.maxDateTime !== undefined && tp_inst._defaults.maxDateTime instanceof Date) + tp_inst._defaults.maxDate = new Date(tp_inst._defaults.maxDateTime.getTime()); + + return tp_inst; + }, + + //######################################################################## + // add our sliders to the calendar + //######################################################################## + _addTimePicker: function(dp_inst) { + var currDT = (this.$altInput && this._defaults.altFieldTimeOnly) ? + this.$input.val() + ' ' + this.$altInput.val() : + this.$input.val(); + + this.timeDefined = this._parseTime(currDT); + this._limitMinMaxDateTime(dp_inst, false); + this._injectTimePicker(); + }, + + //######################################################################## + // parse the time string from input value or _setTime + //######################################################################## + _parseTime: function(timeString, withDate) { + var regstr = this._defaults.timeFormat.toString() + .replace(/h{1,2}/ig, '(\\d?\\d)') + .replace(/m{1,2}/ig, '(\\d?\\d)') + .replace(/s{1,2}/ig, '(\\d?\\d)') + .replace(/t{1,2}/ig, '(am|pm|a|p)?') + .replace(/\s/g, '\\s?') + '$', + order = this._getFormatPositions(), + treg; + + if (!this.inst) this.inst = $.datepicker._getInst(this.$input[0]); + + if (withDate || !this._defaults.timeOnly) { + // the time should come after x number of characters and a space. + // x = at least the length of text specified by the date format + var dp_dateFormat = $.datepicker._get(this.inst, 'dateFormat'); + regstr = '.{' + dp_dateFormat.length + ',}' + this._defaults.separator + regstr; + } + + treg = timeString.match(new RegExp(regstr, 'i')); + + if (treg) { + if (order.t !== -1) + this.ampm = ((treg[order.t] === undefined || treg[order.t].length === 0) ? + '' : + (treg[order.t].charAt(0).toUpperCase() == 'A') ? 'AM' : 'PM').toUpperCase(); + + if (order.h !== -1) { + if (this.ampm == 'AM' && treg[order.h] == '12') + this.hour = 0; // 12am = 0 hour + else if (this.ampm == 'PM' && treg[order.h] != '12') + this.hour = (parseFloat(treg[order.h]) + 12).toFixed(0); // 12pm = 12 hour, any other pm = hour + 12 + else this.hour = Number(treg[order.h]); + } + + if (order.m !== -1) this.minute = Number(treg[order.m]); + if (order.s !== -1) this.second = Number(treg[order.s]); + + return true; + + } + return false; + }, + + //######################################################################## + // figure out position of time elements.. cause js cant do named captures + //######################################################################## + _getFormatPositions: function() { + var finds = this._defaults.timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|t{1,2})/g), + orders = { h: -1, m: -1, s: -1, t: -1 }; + + if (finds) + for (var i = 0; i < finds.length; i++) + if (orders[finds[i].toString().charAt(0)] == -1) + orders[finds[i].toString().charAt(0)] = i + 1; + + return orders; + }, + + //######################################################################## + // generate and inject html for timepicker into ui datepicker + //######################################################################## + _injectTimePicker: function() { + var $dp = this.inst.dpDiv, + o = this._defaults, + tp_inst = this, + // Added by Peter Medeiros: + // - Figure out what the hour/minute/second max should be based on the step values. + // - Example: if stepMinute is 15, then minMax is 45. + hourMax = (o.hourMax - (o.hourMax % o.stepHour)).toFixed(0), + minMax = (o.minuteMax - (o.minuteMax % o.stepMinute)).toFixed(0), + secMax = (o.secondMax - (o.secondMax % o.stepSecond)).toFixed(0), + dp_id = this.inst.id.toString().replace(/([^A-Za-z0-9_])/g, ''); + + // Prevent displaying twice + //if ($dp.find("div#ui-timepicker-div-"+ dp_id).length === 0) { + if ($dp.find("div#ui-timepicker-div-"+ dp_id).length === 0 && o.showTimepicker) { + var noDisplay = ' style="display:none;"', + html = '
' + + '
' + o.timeText + '
' + + '
' + + '
' + o.hourText + '
', + hourGridSize = 0, + minuteGridSize = 0, + secondGridSize = 0, + size; + + if (o.showHour && o.hourGrid > 0) { + html += '
' + + '
' + + '
'; + + for (var h = o.hourMin; h < hourMax; h += o.hourGrid) { + hourGridSize++; + var tmph = (o.ampm && h > 12) ? h-12 : h; + if (tmph < 10) tmph = '0' + tmph; + if (o.ampm) { + if (h == 0) tmph = 12 +'a'; + else if (h < 12) tmph += 'a'; + else tmph += 'p'; + } + html += ''; + } + + html += '
' + tmph + '
' + + '
'; + } else html += '
'; + + html += '
' + o.minuteText + '
'; + + if (o.showMinute && o.minuteGrid > 0) { + html += '
' + + '
' + + '
'; + + for (var m = o.minuteMin; m < minMax; m += o.minuteGrid) { + minuteGridSize++; + html += ''; + } + + html += '
' + ((m < 10) ? '0' : '') + m + '
' + + '
'; + } else html += '
'; + + html += '
' + o.secondText + '
'; + + if (o.showSecond && o.secondGrid > 0) { + html += '
' + + '
' + + '
'; + + for (var s = o.secondMin; s < secMax; s += o.secondGrid) { + secondGridSize++; + html += ''; + } + + html += '
' + ((s < 10) ? '0' : '') + s + '
' + + '
'; + } else html += '
'; + + html += '
'; + $tp = $(html); + + // if we only want time picker... + if (o.timeOnly === true) { + $tp.prepend( + '
' + + '
' + o.timeOnlyTitle + '
' + + '
'); + $dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide(); + } + + this.hour_slider = $tp.find('#ui_tpicker_hour_'+ dp_id).slider({ + orientation: "horizontal", + value: this.hour, + min: o.hourMin, + max: hourMax, + step: o.stepHour, + slide: function(event, ui) { + tp_inst.hour_slider.slider( "option", "value", ui.value); + tp_inst._onTimeChange(); + } + }); + + // Updated by Peter Medeiros: + // - Pass in Event and UI instance into slide function + this.minute_slider = $tp.find('#ui_tpicker_minute_'+ dp_id).slider({ + orientation: "horizontal", + value: this.minute, + min: o.minuteMin, + max: minMax, + step: o.stepMinute, + slide: function(event, ui) { + // update the global minute slider instance value with the current slider value + tp_inst.minute_slider.slider( "option", "value", ui.value); + tp_inst._onTimeChange(); + } + }); + + this.second_slider = $tp.find('#ui_tpicker_second_'+ dp_id).slider({ + orientation: "horizontal", + value: this.second, + min: o.secondMin, + max: secMax, + step: o.stepSecond, + slide: function(event, ui) { + tp_inst.second_slider.slider( "option", "value", ui.value); + tp_inst._onTimeChange(); + } + }); + + // Add grid functionality + if (o.showHour && o.hourGrid > 0) { + size = 100 * hourGridSize * o.hourGrid / (hourMax - o.hourMin); + + $tp.find(".ui_tpicker_hour table").css({ + width: size + "%", + marginLeft: (size / (-2 * hourGridSize)) + "%", + borderCollapse: 'collapse' + }).find("td").each( function(index) { + $(this).click(function() { + var h = $(this).html(); + if(o.ampm) { + var ap = h.substring(2).toLowerCase(), + aph = parseInt(h.substring(0,2)); + if (ap == 'a') { + if (aph == 12) h = 0; + else h = aph; + } else if (aph == 12) h = 12; + else h = aph + 12; + } + tp_inst.hour_slider.slider("option", "value", h); + tp_inst._onTimeChange(); + }).css({ + cursor: 'pointer', + width: (100 / hourGridSize) + '%', + textAlign: 'center', + overflow: 'hidden' + }); + }); + } + + if (o.showMinute && o.minuteGrid > 0) { + size = 100 * minuteGridSize * o.minuteGrid / (minMax - o.minuteMin); + $tp.find(".ui_tpicker_minute table").css({ + width: size + "%", + marginLeft: (size / (-2 * minuteGridSize)) + "%", + borderCollapse: 'collapse' + }).find("td").each(function(index) { + $(this).click(function() { + tp_inst.minute_slider.slider("option", "value", $(this).html()); + tp_inst._onTimeChange(); + }).css({ + cursor: 'pointer', + width: (100 / minuteGridSize) + '%', + textAlign: 'center', + overflow: 'hidden' + }); + }); + } + + if (o.showSecond && o.secondGrid > 0) { + $tp.find(".ui_tpicker_second table").css({ + width: size + "%", + marginLeft: (size / (-2 * secondGridSize)) + "%", + borderCollapse: 'collapse' + }).find("td").each(function(index) { + $(this).click(function() { + tp_inst.second_slider.slider("option", "value", $(this).html()); + tp_inst._onTimeChange(); + }).css({ + cursor: 'pointer', + width: (100 / secondGridSize) + '%', + textAlign: 'center', + overflow: 'hidden' + }); + }); + } + + var $buttonPanel = $dp.find('.ui-datepicker-buttonpane'); + if ($buttonPanel.length) $buttonPanel.before($tp); + else $dp.append($tp); + + this.$timeObj = $('#ui_tpicker_time_'+ dp_id); + + if (this.inst !== null) { + var timeDefined = this.timeDefined; + this._onTimeChange(); + this.timeDefined = timeDefined; + } + + //Emulate datepicker onSelect behavior. Call on slidestop. + var onSelect = tp_inst._defaults['onSelect']; + if (onSelect) { + var inputEl = tp_inst.$input ? tp_inst.$input[0] : null; + var onSelectHandler = function() { + onSelect.apply(inputEl, [tp_inst.formattedDateTime, tp_inst]); // trigger custom callback*/ + } + this.hour_slider.bind('slidestop',onSelectHandler); + this.minute_slider.bind('slidestop',onSelectHandler); + this.second_slider.bind('slidestop',onSelectHandler); + } + } + }, + + //######################################################################## + // This function tries to limit the ability to go outside the + // min/max date range + //######################################################################## + _limitMinMaxDateTime: function(dp_inst, adjustSliders){ + var o = this._defaults, + dp_date = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay), + tp_date = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay, this.hour, this.minute, this.second, 0); + + if(this._defaults.minDateTime !== null && dp_date){ + var minDateTime = this._defaults.minDateTime, + minDateTimeDate = new Date(minDateTime.getFullYear(), minDateTime.getMonth(), minDateTime.getDate(), 0, 0, 0, 0); + + if(this.hourMinOriginal === null || this.minuteMinOriginal === null || this.secondMinOriginal === null){ + this.hourMinOriginal = o.hourMin; + this.minuteMinOriginal = o.minuteMin; + this.secondMinOriginal = o.secondMin; + } + + if(minDateTimeDate.getTime() == dp_date.getTime()){ + this._defaults.hourMin = minDateTime.getHours(); + this._defaults.minuteMin = minDateTime.getMinutes(); + this._defaults.secondMin = minDateTime.getSeconds(); + + if(this.hour < this._defaults.hourMin) this.hour = this._defaults.hourMin; + if(this.minute < this._defaults.minuteMin) this.minute = this._defaults.minuteMin; + if(this.second < this._defaults.secondMin) this.second = this._defaults.secondMin; + }else{ + this._defaults.hourMin = this.hourMinOriginal; + this._defaults.minuteMin = this.minuteMinOriginal; + this._defaults.secondMin = this.secondMinOriginal; + } + } + + if(this._defaults.maxDateTime !== null && dp_date){ + var maxDateTime = this._defaults.maxDateTime, + maxDateTimeDate = new Date(maxDateTime.getFullYear(), maxDateTime.getMonth(), maxDateTime.getDate(), 0, 0, 0, 0); + + if(this.hourMaxOriginal === null || this.minuteMaxOriginal === null || this.secondMaxOriginal === null){ + this.hourMaxOriginal = o.hourMax; + this.minuteMaxOriginal = o.minuteMax; + this.secondMaxOriginal = o.secondMax; + } + + if(maxDateTimeDate.getTime() == dp_date.getTime()){ + this._defaults.hourMax = maxDateTime.getHours(); + this._defaults.minuteMax = maxDateTime.getMinutes(); + this._defaults.secondMax = maxDateTime.getSeconds(); + + if(this.hour > this._defaults.hourMax){ this.hour = this._defaults.hourMax; } + if(this.minute > this._defaults.minuteMax) this.minute = this._defaults.minuteMax; + if(this.second > this._defaults.secondMax) this.second = this._defaults.secondMax; + }else{ + this._defaults.hourMax = this.hourMaxOriginal; + this._defaults.minuteMax = this.minuteMaxOriginal; + this._defaults.secondMax = this.secondMaxOriginal; + } + } + + if(adjustSliders !== undefined && adjustSliders === true){ + this.hour_slider.slider("option", { min: this._defaults.hourMin, max: this._defaults.hourMax }).slider('value', this.hour); + this.minute_slider.slider("option", { min: this._defaults.minuteMin, max: this._defaults.minuteMax }).slider('value', this.minute); + this.second_slider.slider("option", { min: this._defaults.secondMin, max: this._defaults.secondMax }).slider('value', this.second); + } + + }, + + //######################################################################## + // when a slider moves, set the internal time... + // on time change is also called when the time is updated in the text field + //######################################################################## + _onTimeChange: function() { + var hour = (this.hour_slider) ? this.hour_slider.slider('value') : false, + minute = (this.minute_slider) ? this.minute_slider.slider('value') : false, + second = (this.second_slider) ? this.second_slider.slider('value') : false; + + if (hour !== false) hour = parseInt(hour,10); + if (minute !== false) minute = parseInt(minute,10); + if (second !== false) second = parseInt(second,10); + + var ampm = (hour < 12) ? 'AM' : 'PM'; + + // If the update was done in the input field, the input field should not be updated. + // If the update was done using the sliders, update the input field. + var hasChanged = (hour != this.hour || minute != this.minute || second != this.second || (this.ampm.length > 0 && this.ampm != ampm)); + + if (hasChanged) { + + if (hour !== false)this.hour = hour; + if (minute !== false) this.minute = minute; + if (second !== false) this.second = second; + } + if (this._defaults.ampm) this.ampm = ampm; + + this._formatTime(); + if (this.$timeObj) this.$timeObj.text(this.formattedTime); + this.timeDefined = true; + if (hasChanged) this._updateDateTime(); + }, + + //######################################################################## + // format the time all pretty... + //######################################################################## + _formatTime: function(time, format, ampm) { + if (ampm == undefined) ampm = this._defaults.ampm; + time = time || { hour: this.hour, minute: this.minute, second: this.second, ampm: this.ampm }; + var tmptime = format || this._defaults.timeFormat.toString(); + + if (ampm) { + var hour12 = ((time.ampm == 'AM') ? (time.hour) : (time.hour % 12)); + hour12 = (Number(hour12) === 0) ? 12 : hour12; + tmptime = tmptime.toString() + .replace(/hh/g, ((hour12 < 10) ? '0' : '') + hour12) + .replace(/h/g, hour12) + .replace(/mm/g, ((time.minute < 10) ? '0' : '') + time.minute) + .replace(/m/g, time.minute) + .replace(/ss/g, ((time.second < 10) ? '0' : '') + time.second) + .replace(/s/g, time.second) + .replace(/TT/g, time.ampm.toUpperCase()) + .replace(/tt/g, time.ampm.toLowerCase()) + .replace(/T/g, time.ampm.charAt(0).toUpperCase()) + .replace(/t/g, time.ampm.charAt(0).toLowerCase()); + } else { + tmptime = tmptime.toString() + .replace(/hh/g, ((time.hour < 10) ? '0' : '') + time.hour) + .replace(/h/g, time.hour) + .replace(/mm/g, ((time.minute < 10) ? '0' : '') + time.minute) + .replace(/m/g, time.minute) + .replace(/ss/g, ((time.second < 10) ? '0' : '') + time.second) + .replace(/s/g, time.second); + tmptime = $.trim(tmptime.replace(/t/gi, '')); + } + + if (arguments.length) return tmptime; + else this.formattedTime = tmptime; + }, + + //######################################################################## + // update our input with the new date time.. + //######################################################################## + _updateDateTime: function(dp_inst) { + dp_inst = this.inst || dp_inst, + dt = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay), + dateFmt = $.datepicker._get(dp_inst, 'dateFormat'), + formatCfg = $.datepicker._getFormatConfig(dp_inst), + timeAvailable = dt !== null && this.timeDefined; + this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg); + var formattedDateTime = this.formattedDate; + if (dp_inst.lastVal !== undefined && (dp_inst.lastVal.length > 0 && this.$input.val().length === 0)) + return; + + if (this._defaults.timeOnly === true) { + formattedDateTime = this.formattedTime; + } else if (this._defaults.timeOnly !== true && (this._defaults.alwaysSetTime || timeAvailable)) { + formattedDateTime += this._defaults.separator + this.formattedTime; + } + + this.formattedDateTime = formattedDateTime; + + if(!this._defaults.showTimepicker) { + this.$input.val(this.formattedDate); + } else if (this.$altInput && this._defaults.altFieldTimeOnly === true) { + this.$altInput.val(this.formattedTime); + this.$input.val(this.formattedDate); + } else if(this.$altInput) { + this.$altInput.val(formattedDateTime); + this.$input.val(formattedDateTime); + } else { + this.$input.val(formattedDateTime); + } + + this.$input.trigger("change"); + } + +}); + +$.fn.extend({ + //######################################################################## + // shorthand just to use timepicker.. + //######################################################################## + timepicker: function(o) { + o = o || {}; + var tmp_args = arguments; + + if (typeof o == 'object') tmp_args[0] = $.extend(o, { timeOnly: true }); + + return $(this).each(function() { + $.fn.datetimepicker.apply($(this), tmp_args); + }); + }, + + //######################################################################## + // extend timepicker to datepicker + //######################################################################## + datetimepicker: function(o) { + o = o || {}; + var $input = this, + tmp_args = arguments; + + if (typeof(o) == 'string'){ + if(o == 'getDate') + return $.fn.datepicker.apply($(this[0]), tmp_args); + else + return this.each(function() { + var $t = $(this); + $t.datepicker.apply($t, tmp_args); + }); + } + else + return this.each(function() { + var $t = $(this); + $t.datepicker($.timepicker._newInst($t, o)._defaults); + }); + } +}); + +//######################################################################## +// the bad hack :/ override datepicker so it doesnt close on select +// inspired: http://stackoverflow.com/questions/1252512/jquery-datepicker-prevent-closing-picker-when-clicking-a-date/1762378#1762378 +//######################################################################## +$.datepicker._base_selectDate = $.datepicker._selectDate; +$.datepicker._selectDate = function (id, dateStr) { + var inst = this._getInst($(id)[0]), + tp_inst = this._get(inst, 'timepicker'); + + if (tp_inst) { + tp_inst._limitMinMaxDateTime(inst, true); + inst.inline = inst.stay_open = true; + //This way the onSelect handler called from calendarpicker get the full dateTime + this._base_selectDate(id, dateStr + tp_inst._defaults.separator + tp_inst.formattedTime); + inst.inline = inst.stay_open = false; + this._notifyChange(inst); + this._updateDatepicker(inst); + } + else this._base_selectDate(id, dateStr); +}; + +//############################################################################################# +// second bad hack :/ override datepicker so it triggers an event when changing the input field +// and does not redraw the datepicker on every selectDate event +//############################################################################################# +$.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker; +$.datepicker._updateDatepicker = function(inst) { + if (typeof(inst.stay_open) !== 'boolean' || inst.stay_open === false) { + + this._base_updateDatepicker(inst); + + // Reload the time control when changing something in the input text field. + var tp_inst = this._get(inst, 'timepicker'); + if(tp_inst) tp_inst._addTimePicker(inst); + } +}; + +//####################################################################################### +// third bad hack :/ override datepicker so it allows spaces and colan in the input field +//####################################################################################### +$.datepicker._base_doKeyPress = $.datepicker._doKeyPress; +$.datepicker._doKeyPress = function(event) { + var inst = $.datepicker._getInst(event.target), + tp_inst = $.datepicker._get(inst, 'timepicker'); + + if (tp_inst) { + if ($.datepicker._get(inst, 'constrainInput')) { + var ampm = tp_inst._defaults.ampm, + datetimeChars = tp_inst._defaults.timeFormat.toString() + .replace(/[hms]/g, '') + .replace(/TT/g, ampm ? 'APM' : '') + .replace(/T/g, ampm ? 'AP' : '') + .replace(/tt/g, ampm ? 'apm' : '') + .replace(/t/g, ampm ? 'ap' : '') + + " " + + tp_inst._defaults.separator + + $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat')), + chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode); + return event.ctrlKey || (chr < ' ' || !datetimeChars || datetimeChars.indexOf(chr) > -1); + } + } + + return $.datepicker._base_doKeyPress(event); +}; + +//####################################################################################### +// Override key up event to sync manual input changes. +//####################################################################################### +$.datepicker._base_doKeyUp = $.datepicker._doKeyUp; +$.datepicker._doKeyUp = function (event) { + var inst = $.datepicker._getInst(event.target), + tp_inst = $.datepicker._get(inst, 'timepicker'); + + if (tp_inst) { + if (tp_inst._defaults.timeOnly && (inst.input.val() != inst.lastVal)) { + try { + $.datepicker._updateDatepicker(inst); + } + catch (err) { + $.datepicker.log(err); + } + } + } + + return $.datepicker._base_doKeyUp(event); +}; + +//####################################################################################### +// override "Today" button to also grab the time. +//####################################################################################### +$.datepicker._base_gotoToday = $.datepicker._gotoToday; +$.datepicker._gotoToday = function(id) { + this._base_gotoToday(id); + this._setTime(this._getInst($(id)[0]), new Date()); +}; + +//####################################################################################### +// Disable & enable the Time in the datetimepicker +//####################################################################################### +$.datepicker._disableTimepickerDatepicker = function(target, date, withDate) { + var inst = this._getInst(target), + tp_inst = this._get(inst, 'timepicker'); + if (tp_inst) { + tp_inst._defaults.showTimepicker = false; + tp_inst._onTimeChange(); + tp_inst._updateDateTime(inst); + } +}; + +$.datepicker._enableTimepickerDatepicker = function(target, date, withDate) { + var inst = this._getInst(target), + tp_inst = this._get(inst, 'timepicker'); + if (tp_inst) { + tp_inst._defaults.showTimepicker = true; + tp_inst._onTimeChange(); + tp_inst._updateDateTime(inst); + } +}; + +//####################################################################################### +// Create our own set time function +//####################################################################################### +$.datepicker._setTime = function(inst, date) { + var tp_inst = this._get(inst, 'timepicker'); + if (tp_inst) { + var defaults = tp_inst._defaults, + // calling _setTime with no date sets time to defaults + hour = date ? date.getHours() : defaults.hour, + minute = date ? date.getMinutes() : defaults.minute, + second = date ? date.getSeconds() : defaults.second; + + //check if within min/max times.. + if ((hour < defaults.hourMin || hour > defaults.hourMax) || (minute < defaults.minuteMin || minute > defaults.minuteMax) || (second < defaults.secondMin || second > defaults.secondMax)) { + hour = defaults.hourMin; + minute = defaults.minuteMin; + second = defaults.secondMin; + } + + if (tp_inst.hour_slider) tp_inst.hour_slider.slider('value', hour); + else tp_inst.hour = hour; + if (tp_inst.minute_slider) tp_inst.minute_slider.slider('value', minute); + else tp_inst.minute = minute; + if (tp_inst.second_slider) tp_inst.second_slider.slider('value', second); + else tp_inst.second = second; + + tp_inst._onTimeChange(); + tp_inst._updateDateTime(inst); + } +}; + +//####################################################################################### +// Create new public method to set only time, callable as $().datepicker('setTime', date) +//####################################################################################### +$.datepicker._setTimeDatepicker = function(target, date, withDate) { + var inst = this._getInst(target), + tp_inst = this._get(inst, 'timepicker'); + + if (tp_inst) { + this._setDateFromField(inst); + var tp_date; + if (date) { + if (typeof date == "string") { + tp_inst._parseTime(date, withDate); + tp_date = new Date(); + tp_date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second); + } + else tp_date = new Date(date.getTime()); + if (tp_date.toString() == 'Invalid Date') tp_date = undefined; + } + this._setTime(inst, tp_date); + } + +}; + +//####################################################################################### +// override setDate() to allow setting time too within Date object +//####################################################################################### +$.datepicker._base_setDateDatepicker = $.datepicker._setDateDatepicker; +$.datepicker._setDateDatepicker = function(target, date) { + var inst = this._getInst(target), + tp_date = (date instanceof Date) ? new Date(date.getTime()) : date; + + this._updateDatepicker(inst); + this._base_setDateDatepicker.apply(this, arguments); + this._setTimeDatepicker(target, tp_date, true); +}; + +//####################################################################################### +// override getDate() to allow getting time too within Date object +//####################################################################################### +$.datepicker._base_getDateDatepicker = $.datepicker._getDateDatepicker; +$.datepicker._getDateDatepicker = function(target, noDefault) { + var inst = this._getInst(target), + tp_inst = this._get(inst, 'timepicker'); + + if (tp_inst) { + this._setDateFromField(inst, noDefault); + var date = this._getDate(inst); + if (date && tp_inst._parseTime($(target).val(), true)) date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second); + return date; + } + return this._base_getDateDatepicker(target, noDefault); +}; + +//####################################################################################### +// jQuery extend now ignores nulls! +//####################################################################################### +function extendRemove(target, props) { + $.extend(target, props); + for (var name in props) + if (props[name] === null || props[name] === undefined) + target[name] = props[name]; + return target; +} + +$.timepicker = new Timepicker(); // singleton instance +$.timepicker.version = "0.9.3"; + +})(jQuery); diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 028fab7..d09a445 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -241,3 +241,18 @@ form { .pagination { text-align: center; } + +.ui-timepicker-div .ui-widget-header { + margin-bottom: 8px; } + +.ui-timepicker-div dl { + text-align: left; } + +.ui-timepicker-div dl dt { + height: 25px; } + +.ui-timepicker-div dl dd { + margin: -25px 0 10px 65px; } + +.ui-timepicker-div td { + font-size: 90%; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 531c9b7..d5178c7 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -309,3 +309,19 @@ form .pagination text-align: center + + + +.ui-timepicker-div .ui-widget-header + margin-bottom: 8px +.ui-timepicker-div dl + text-align: left +.ui-timepicker-div dl dt + height: 25px +.ui-timepicker-div dl dd + margin: -25px 0 10px 65px +.ui-timepicker-div td + font-size: 90% + + +