X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=ux%2FTimePicker.js;h=231254e2681226101a46a946527513572b0408d1;hb=0b69a11b1055a6d3a3fd0719bdd58b5a235de0e4;hp=e69de29bb2d1d6434b8b29ae775ad8c2e48c5391;hpb=fa3f947910d8c1c43f7d2b7946dee059e23fdb4e;p=roojs1 diff --git a/ux/TimePicker.js b/ux/TimePicker.js index e69de29bb2..231254e268 100644 --- a/ux/TimePicker.js +++ b/ux/TimePicker.js @@ -0,0 +1,363 @@ + + + + +Roo.form.TimePicker = function(config){ + + Roo.log("CTOR CALLED"); + // these are required... error out if not avail.. + var deps = true; + if (typeof(Raphael) == 'undefined') { + deps = false; + } + if (deps && typeof(Raphael.prototype) == 'undefined') { + deps = false; + } + if (!deps) { + Roo.log("Error - required components not found - Raphael and piechart"); + return; + } + + Roo.form.TimePicker.superclass.constructor.call(this, config); + + this.addEvents({ + /** + * @event select + * Fires when a date is selected + * @param {DatePicker} this + * @param {Date} date The selected date + */ + 'select': true, + + }); + +}; + +Roo.extend(Roo.form.TimePicker , Roo.form.DisplayField , { + + paper : false, + width: 280, + height: 250, + + startHour : '7:30', + endHour : '19:15', + + tdisplay : false, + + onRender : function(ct, position){ + + Roo.form.DisplayField.superclass.onRender.call(this, ct, position); + //if(this.inputValue !== undefined){ + this.wrap = this.el.wrap(); + + this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'}); + + + //?? needed?? + if (this.bodyStyle) { + this.viewEl.applyStyles(this.bodyStyle); + } + //this.viewEl.setStyle('padding', '2px'); + + this.viewEl.setHeight(this.height); + this.viewEl.setWidth(this.width); + + + var paper = this.paper = Raphael(this.viewEl.dom); + + paper.setSize(this.width,this.height); + + + + this.renderPaper(this.startHour,this.endHour); + }, + + + + renderPaper : function( startHour , endHour ) + { + // let's create a pie chart... + var open = startHour.split(':').shift() * 1; + var close = endHour.split(':').shift() * 1; + + var late_night_close = false; + if (close < open || close >= 24) { + //endHour = '24:00'; + close = 24; + late_night_close = close; + } + + + var paper = this.paper; + this.paper.clear(); + + var data = []; + var colors = []; + + // say we open for 7 - 19 + + + Roo.log([open, close]); + data.push(open); + + // colours should be configurable... + + colors.push('#003'); // off hour.. + //var clr = [ '#003' , '#FCC' , '#FEE', '#FCC']; + var clr = [ '#FEE', '#FCC' ]; + + var times = [ '' ]; + + for (var i = open; i < close ;i++) { + data.push(1); + if (i < 10) { + times.push( '0' + i); + } else { + times.push( '' + i); + } + colors.push(clr[i % clr.length]); + } + data.push( 24-close ); + colors.push('#003'); + + //Roo.log(data.length); + //Roo.log(JSON.stringify(data)); + //Roo.log(JSON.stringify(colors)); + //Roo.log(colors.length); + + var outerpie = this.outerpie = paper.piechart( + paper.width / 2, + paper.height / 2 , + 110, + data , + { + cut: data.length , + colors : colors, + no_sort : true, + start_angle : 270 + } + ); + + + // fill in th emiddle... + + paper.circle(outerpie.cx,outerpie.cy, 90).attr({fill: "#fff"}) + // fixme .. add the quater hour segments.. + + var innerpie = this.innerpie = paper.piechart( + paper.width / 2, + paper.height / 2 , + 80, + [ 1 , 1 ,1 , 1 ], + { + cut: 4 , + colors : [ '#FEE', '#FCC' ,'#FEE', '#FCC' ] , + no_sort : true, + start_angle : 135 + } + ); + + paper.circle(outerpie.cx,outerpie.cy, 60).attr({fill: "#fff"}) + + + + var tdisplay = this.tdisplay = paper.text(outerpie.cx,outerpie.cy, "Pick\nTime").attr({ + font: "32px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif", + weight: 'bold', fill: '#000' }); + + + + + + for (var i = 0; i < (24/3); i++) { + var angle = ( (360/24) * i * -3 ) -90; + var p = outerpie.sector(outerpie.cx, outerpie.cy, 105, angle, angle, false); + var innerp = outerpie.sector(outerpie.cx, outerpie.cy, 70, angle, angle, false); + + Roo.log([p[4],p[5], (i*3)+':00']); + + var hr = (i*3); + + var txt = (hr < 12 ? hr : (hr-12)) + (hr < 12 ? 'am' : 'pm'); + if (!hr) { txt = ""; } + if (hr == 12) { + txt= '12 noon' + } + + paper.text(p[4],p[5], txt); + // inner... + if (i%2 ==1) { + continue; + } + paper.text(innerp[4],innerp[5], ((Math.floor(i/2) * 15) + 30) % 60); + + + } + var asector = false; + + var _t = this; + outerpie.hover( + // in? + function() { + Roo.log(this.j); + if (!this.j || this.j == data.length -1) { + return; + } + var ov = _t.getValue(); + + this.sector.stop(); + + + if (this.sector != asector) { + this.sector.scale(1.1, 1.1, this.cx, this.cy); + } + + var min = ov ? _t.getValue().split(':').pop() : '00'; + var ntime = times[this.j] + ':' + min; + tdisplay.attr( { text : _t.formatTime(ntime) }); + + + }, + // out..? + function () { + if (!this.j || this.j == data.length) { + return; + } + if (this.sector != asector) { + this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); + } + + tdisplay.attr( { text : _t.formatTime(_t.getValue()) } ); + + }); + outerpie.click(function() { + if (!this.j || this.j == data.length -1) { + return; + } + + var ov = _t.getValue(); + var min = ov ? _t.getValue().split(':').pop() : '00'; + var ntime = times[this.j] + ':' + min; + _t.setValue(ntime); + _t.fireEvent('select', ntime); + + if (asector) { + // reset + asector.transform( 's1 1'); + } + + //this.sector.scale(1.1, 1.1, this.cx, this.cy); + asector = this.sector; + + + }); + + var bsector = false; + + innerpie.hover( + // in? + function() { + Roo.log(this.j); + /* + if (!this.j || this.j == data.length -1) { + return; + } + */ + this.sector.stop(); + if (this.sector != bsector) { + this.sector.scale(1.1, 1.1, this.cx, this.cy); + } + var min = this.j*15; + min = min ? min : '00'; + + var ov = _t.getValue(); + var hr = ov ? _t.getValue().split(':').shift() : '12'; + var ntime = hr + ':' + min; + tdisplay.attr( { text : _t.formatTime(ntime) }); + + + }, + // out..? + function () { + /* + if (!this.j || this.j == data.length) { + return; + } + */ + if (this.sector != bsector) { + this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); + } + + tdisplay.attr( { text : _t.formatTime(_t.getValue()) } ); + + }); + innerpie.click(function() { + + Roo.log(this.j); + var min = this.j*15; + min = min ? min : '00'; + + + var ov = _t.getValue(); + var hr = ov ? _t.getValue().split(':').shift() : '12'; + var ntime = hr + ':' + min; + _t.setValue(ntime); + _t.fireEvent('select', ntime); + + //tdisplay.attr( { text : _t.formatTime(ntime) }); + + //var ov = _t.getValue(); + //var min = ov ? _t.getValue().split(':').pop() : '00'; + //var ntime = times[this.j] + ':' + min; + //_t.setValue(ntime); + + if (bsector) { + bsector.transform( 's1 1'); + } + + //this.sector.scale(1.1, 1.1, this.cx, this.cy); + bsector = this.sector; + + + }); + this.setValue(this.value); + + + + + + //pie.each(function() { Roo.log(this)}); + //this.setValue(this.value); + }, + setValue : function(v){ + this.value = v; + if (!this.viewEl) { + return; + } + //this.viewEl.dom.innerHTML = html; + Roo.form.DisplayField.superclass.setValue.call(this, v); + if (this.tdisplay) { + this.tdisplay.attr( { text : this.formatTime(v) } ); + } + + }, + formatTime : function(ntime) + { + if (!ntime) { + return "Pick\nTime"; + } + if (ntime == '00:00') { + return "Midnight"; + } + if (ntime == '12:00') { + return "12\nnoon"; + } + Roo.log(ntime); + var d = Date.parseDate(ntime, "H:i"); + return d.format('h:i') + "\n" + d.format('a') ; + + + + } + +}); \ No newline at end of file