5 Roo.form.TimePicker = function(config){
7 Roo.log("CTOR CALLED");
8 // these are required... error out if not avail..
10 if (typeof(Raphael) == 'undefined') {
13 if (deps && typeof(Raphael.prototype) == 'undefined') {
17 Roo.log("Error - required components not found - Raphael and piechart");
21 Roo.form.TimePicker.superclass.constructor.call(this, config);
26 * Fires when a date is selected
27 * @param {DatePicker} this
28 * @param {Date} date The selected date
36 Roo.extend(Roo.form.TimePicker , Roo.form.DisplayField , {
47 onRender : function(ct, position){
49 Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
50 //if(this.inputValue !== undefined){
51 this.wrap = this.el.wrap();
53 this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
58 this.viewEl.applyStyles(this.bodyStyle);
60 //this.viewEl.setStyle('padding', '2px');
62 this.viewEl.setHeight(this.height);
63 this.viewEl.setWidth(this.width);
66 var paper = this.paper = Raphael(this.viewEl.dom);
68 paper.setSize(this.width,this.height);
72 this.renderPaper(this.startHour,this.endHour);
77 renderPaper : function( startHour , endHour )
79 // let's create a pie chart...
80 var open = startHour.split(':').shift() * 1;
81 var close = endHour.split(':').shift() * 1;
83 var late_night_close = false;
84 if (close < open || close >= 24) {
87 late_night_close = close;
91 var paper = this.paper;
97 // say we open for 7 - 19
100 Roo.log([open, close]);
103 // colours should be configurable...
105 colors.push('#003'); // off hour..
106 //var clr = [ '#003' , '#FCC' , '#FEE', '#FCC'];
107 var clr = [ '#FEE', '#FCC' ];
111 for (var i = open; i < close ;i++) {
114 times.push( '0' + i);
118 colors.push(clr[i % clr.length]);
120 data.push( 24-close );
123 //Roo.log(data.length);
124 //Roo.log(JSON.stringify(data));
125 //Roo.log(JSON.stringify(colors));
126 //Roo.log(colors.length);
128 var outerpie = this.outerpie = paper.piechart(
142 // fill in th emiddle...
144 paper.circle(outerpie.cx,outerpie.cy, 90).attr({fill: "#fff"})
145 // fixme .. add the quater hour segments..
147 var innerpie = this.innerpie = paper.piechart(
154 colors : [ '#FEE', '#FCC' ,'#FEE', '#FCC' ] ,
160 paper.circle(outerpie.cx,outerpie.cy, 60).attr({fill: "#fff"})
164 var tdisplay = this.tdisplay = paper.text(outerpie.cx,outerpie.cy, "Pick\nTime").attr({
165 font: "32px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
166 weight: 'bold', fill: '#000' });
172 for (var i = 0; i < (24/3); i++) {
173 var angle = ( (360/24) * i * -3 ) -90;
174 var p = outerpie.sector(outerpie.cx, outerpie.cy, 105, angle, angle, false);
175 var innerp = outerpie.sector(outerpie.cx, outerpie.cy, 70, angle, angle, false);
177 Roo.log([p[4],p[5], (i*3)+':00']);
181 var txt = (hr < 12 ? hr : (hr-12)) + (hr < 12 ? 'am' : 'pm');
182 if (!hr) { txt = ""; }
187 paper.text(p[4],p[5], txt);
192 paper.text(innerp[4],innerp[5], ((Math.floor(i/2) * 15) + 30) % 60);
203 if (!this.j || this.j == data.length -1) {
206 var ov = _t.getValue();
211 if (this.sector != asector) {
212 this.sector.scale(1.1, 1.1, this.cx, this.cy);
215 var min = ov ? _t.getValue().split(':').pop() : '00';
216 var ntime = times[this.j] + ':' + min;
217 tdisplay.attr( { text : _t.formatTime(ntime) });
223 if (!this.j || this.j == data.length) {
226 if (this.sector != asector) {
227 this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
230 tdisplay.attr( { text : _t.formatTime(_t.getValue()) } );
233 outerpie.click(function() {
234 if (!this.j || this.j == data.length -1) {
238 var ov = _t.getValue();
239 var min = ov ? _t.getValue().split(':').pop() : '00';
240 var ntime = times[this.j] + ':' + min;
242 _t.fireEvent('select', ntime);
246 asector.transform( 's1 1');
249 //this.sector.scale(1.1, 1.1, this.cx, this.cy);
250 asector = this.sector;
262 if (!this.j || this.j == data.length -1) {
267 if (this.sector != bsector) {
268 this.sector.scale(1.1, 1.1, this.cx, this.cy);
271 min = min ? min : '00';
273 var ov = _t.getValue();
274 var hr = ov ? _t.getValue().split(':').shift() : '12';
275 var ntime = hr + ':' + min;
276 tdisplay.attr( { text : _t.formatTime(ntime) });
283 if (!this.j || this.j == data.length) {
287 if (this.sector != bsector) {
288 this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
291 tdisplay.attr( { text : _t.formatTime(_t.getValue()) } );
294 innerpie.click(function() {
298 min = min ? min : '00';
301 var ov = _t.getValue();
302 var hr = ov ? _t.getValue().split(':').shift() : '12';
303 var ntime = hr + ':' + min;
305 _t.fireEvent('select', ntime);
307 //tdisplay.attr( { text : _t.formatTime(ntime) });
309 //var ov = _t.getValue();
310 //var min = ov ? _t.getValue().split(':').pop() : '00';
311 //var ntime = times[this.j] + ':' + min;
312 //_t.setValue(ntime);
315 bsector.transform( 's1 1');
318 //this.sector.scale(1.1, 1.1, this.cx, this.cy);
319 bsector = this.sector;
323 this.setValue(this.value);
329 //pie.each(function() { Roo.log(this)});
330 //this.setValue(this.value);
332 setValue : function(v){
337 //this.viewEl.dom.innerHTML = html;
338 Roo.form.DisplayField.superclass.setValue.call(this, v);
340 this.tdisplay.attr( { text : this.formatTime(v) } );
344 formatTime : function(ntime)
349 if (ntime == '00:00') {
352 if (ntime == '12:00') {
356 var d = Date.parseDate(ntime, "H:i");
357 return d.format('h:i') + "\n" + d.format('a') ;