ux/TimePicker.js
[roojs1] / ux / TimePicker.js
1
2
3  
4            
5 Roo.form.TimePicker = function(config){
6     
7     Roo.log("CTOR CALLED");
8     // these are required... error out if not avail..
9     var deps = true;
10     if (typeof(Raphael) == 'undefined') {
11         deps = false;
12     }
13     if (deps && typeof(Raphael.prototype) == 'undefined') {
14         deps = false;
15     }
16     if (!deps) {
17         Roo.log("Error - required components not found  - Raphael and piechart"); 
18         return;
19     }
20     
21     Roo.form.TimePicker.superclass.constructor.call(this, config);
22 };
23
24 Roo.extend(Roo.form.TimePicker , Roo.form.DisplayField ,  {
25     
26     paper : false,
27     width: 280,
28     height: 250,
29     
30     startHour : '7:30',
31     endHour : '19:15',
32     
33     tdisplay  : false,
34     
35     onRender : function(ct, position){
36         
37         Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
38         //if(this.inputValue !== undefined){
39         this.wrap = this.el.wrap();
40         
41         this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
42         
43         
44         //?? needed??
45         if (this.bodyStyle) {
46             this.viewEl.applyStyles(this.bodyStyle);
47         }
48         //this.viewEl.setStyle('padding', '2px');
49         
50         this.viewEl.setHeight(this.height);
51         this.viewEl.setWidth(this.width);
52         
53         var open = this.startHour.split(':').shift() * 1;
54         var close = this.endHour.split(':').shift() * 1;
55         
56         var paper = this.paper = Raphael(this.viewEl.dom);
57         
58         paper.setSize(this.width,this.height);
59         
60         this.renderPaper(open,close);
61     },
62     
63     
64     
65     renderPaper : function( startHour , endHour )
66     { 
67         // let's create a pie chart...
68         var open =  startHour.split(':').shift() * 1;
69         var close =  endHour.split(':').shift() * 1;
70         
71         var paper = this.paper;
72         this.paper.clear();
73         
74         var data = [];
75         var colors = [];
76         
77         // say we open for 7 - 19
78         
79         
80         Roo.log([open, close]);
81         data.push(open);
82         
83         // colours should be configurable...
84         
85         colors.push('#003'); // off hour..
86         //var clr = [ '#003' , '#FCC' , '#FEE', '#FCC'];
87         var clr = [ '#FEE', '#FCC' ];
88                    
89         var times = [ '' ];
90         
91         for (var i = open; i < close ;i++) {
92             data.push(1);
93             if (i < 10) {
94                 times.push( '0'  + i);
95             } else { 
96                 times.push( '' + i);
97             }
98             colors.push(clr[i % clr.length]);
99         }
100         data.push( 24-close );
101         colors.push('#003');
102         
103         //Roo.log(data.length);
104         //Roo.log(JSON.stringify(data));
105         //Roo.log(JSON.stringify(colors));
106         //Roo.log(colors.length);
107
108         var outerpie = this.outerpie = paper.piechart(
109             paper.width  / 2,
110             paper.height  / 2 ,
111             110,
112             data ,
113             { 
114                 cut: data.length   ,
115                 colors :  colors,
116                 no_sort : true,
117                 start_angle :  270
118             }
119         );
120         
121         
122         // fill in th emiddle...
123         
124         paper.circle(outerpie.cx,outerpie.cy, 90).attr({fill: "#fff"})
125         // fixme .. add the quater hour segments..
126         
127         var innerpie = this.innerpie = paper.piechart(
128             paper.width  / 2,
129             paper.height  / 2 ,
130             80,
131             [ 1 , 1 ,1 , 1 ],
132             { 
133                 cut: 4   ,
134                 colors :   [ '#FEE', '#FCC' ,'#FEE', '#FCC' ] ,
135                 no_sort : true,
136                 start_angle :  90
137             }
138         );
139
140         paper.circle(outerpie.cx,outerpie.cy, 60).attr({fill: "#fff"})
141  
142         
143       
144         var tdisplay  = this.tdisplay = paper.text(outerpie.cx,outerpie.cy, "Pick\nTime").attr({
145                 font: "32px  'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
146                 weight: 'bold', fill: '#000' });
147         
148         
149         
150         
151         
152         for (var i = 0; i < (24/3); i++) {
153             var angle = ( (360/24) * i * -3 )  -90;
154             var p = outerpie.sector(outerpie.cx, outerpie.cy, 120, angle, angle, false);
155             var innerp = outerpie.sector(outerpie.cx, outerpie.cy, 70, angle, angle, false);
156
157             Roo.log([p[4],p[5], (i*3)+':00']);
158             
159             var hr = (i*3);
160             
161             var txt = (hr < 12 ? hr : (hr-12)) +  (hr < 12 ? 'am' : 'pm');
162             if (!hr) { txt  = ""; }
163             if (hr == 12) {
164                 txt= '12 noon'
165             }
166             
167             paper.text(p[4],p[5], txt);
168             // inner...
169             if (i%2 ==1) {
170                 continue;
171             }
172             paper.text(innerp[4],innerp[5], ((Math.floor(i/2) * 15) + 30) % 60);
173             
174             
175         }
176         var asector = false;
177
178         var _t = this;
179         outerpie.hover(
180              // in?
181             function() {
182                 Roo.log(this.j);
183                 if (!this.j || this.j == data.length -1) {
184                     return;
185                 }
186                 var ov = _t.getValue();
187                
188                 this.sector.stop();
189                 
190                  
191                 if (this.sector != asector) {
192                     this.sector.scale(1.1, 1.1, this.cx, this.cy);
193                 }
194             
195                 var min = ov ? _t.getValue().split(':').pop() : '00';
196                 var ntime = times[this.j] + ':' + min;
197                 tdisplay.attr( { text : _t.formatTime(ntime) });
198                  
199                 
200             },
201              // out..?
202             function () {
203                 if (!this.j || this.j == data.length) {
204                     return;
205                 }
206                 if (this.sector != asector) {
207                     this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
208                 }
209                     
210                 tdisplay.attr( { text : _t.formatTime(_t.getValue()) } );
211              
212         });
213         outerpie.click(function() {
214             if (!this.j || this.j == data.length -1) {
215                 return;
216             }
217            
218             var ov = _t.getValue();
219             var min = ov ? _t.getValue().split(':').pop() : '00';
220             var ntime = times[this.j] + ':' + min;
221             _t.setValue(ntime);
222             
223             if (asector) {
224                 // reset 
225                 asector.transform( 's1 1');
226             }
227             
228             //this.sector.scale(1.1, 1.1, this.cx, this.cy);
229             asector = this.sector;
230  
231             
232         });
233         
234          var bsector = false;
235
236          innerpie.hover(
237              // in?
238             function() {
239                 Roo.log(this.j);
240                 /*
241                 if (!this.j || this.j == data.length -1) {
242                     return;
243                 }
244                 */
245                 this.sector.stop();
246                 if (this.sector != bsector) {
247                     this.sector.scale(1.1, 1.1, this.cx, this.cy);
248                 }
249                 var min = this.j*15;
250                  min = min ? min : '00';
251                 
252                 var ov = _t.getValue();
253                 var hr = ov ? _t.getValue().split(':').shift() : '12';
254                 var ntime = hr + ':' + min;
255                 tdisplay.attr( { text : _t.formatTime(ntime) });
256                  
257                 
258             },
259              // out..?
260             function () {
261                 /*
262                 if (!this.j || this.j == data.length) {
263                     return;
264                 }
265                 */
266                 if (this.sector != bsector) {
267                     this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
268                 }
269  
270                 tdisplay.attr( { text : _t.formatTime(_t.getValue()) } );
271              
272         });
273         innerpie.click(function() {
274              
275             Roo.log(this.j);
276             var min = this.j*15;
277             min = min ? min : '00';
278                 
279              
280             var ov = _t.getValue();
281             var hr = ov ? _t.getValue().split(':').shift() : '12';
282             var ntime = hr + ':' + min;
283             _t.setValue(ntime);
284             //tdisplay.attr( { text : _t.formatTime(ntime) });
285             
286             //var ov = _t.getValue();
287             //var min = ov ? _t.getValue().split(':').pop() : '00';
288             //var ntime = times[this.j] + ':' + min;
289             //_t.setValue(ntime);
290             
291             if (bsector) {
292                 bsector.transform( 's1 1');
293             }
294             
295             //this.sector.scale(1.1, 1.1, this.cx, this.cy);
296             bsector = this.sector;
297  
298             
299         });
300         
301         
302         
303         
304         
305         
306         //pie.each(function() { Roo.log(this)});
307         //this.setValue(this.value);
308     },
309     setValue : function(v){
310         this.value = v;
311         if (!this.viewEl) {
312             return;
313         }
314         //this.viewEl.dom.innerHTML = html;
315         Roo.form.DisplayField.superclass.setValue.call(this, v);
316         if (this.tdisplay) {
317             this.tdisplay.attr( { text : this.formatTime(v) } );
318         }
319
320     },
321     formatTime : function(ntime)
322     {
323         if (!ntime) {
324             return "Pick\nTime";
325         }
326         if (ntime == '00:00') {
327             return "Midnight";
328         }
329         if (ntime == '12:00') {
330             return "12\nnoon";
331         }
332         Roo.log(ntime);
333         var d = Date.parseDate(ntime, "H:i");
334         return d.format('h:i') + "\n" + d.format('a')  ; 
335         
336         
337         
338     }
339     
340 });