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