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
  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         open *= 1;
  80         close * =1;
  81         Roo.log([open, close]);
  82         data.push(open);
  83
  84         // colours should be configurable...
  85
  86         colors.push('#003'); // off hour..
  87         //var clr = [ '#003' , '#FCC' , '#FEE', '#FCC'];
  88         var clr = [ '#FEE', '#FCC' ];
  89
  90         var times = [ '' ];
  91
  92         for (var i = open; i < close ;i++) {
  93             data.push(1);
  94             if (i < 10) {
  95                 times.push( '0'  + i);
  96             } else {
  97                 times.push( '' + i);
  98             }
  99             colors.push(clr[i % clr.length]);
 100         }
 101         data.push( 24-close );
 102         colors.push('#003');
 103
 104         //Roo.log(data.length);
 105         //Roo.log(JSON.stringify(data));
 106         //Roo.log(JSON.stringify(colors));
 107         //Roo.log(colors.length);
 108
 109         var outerpie = this.outerpie = paper.piechart(
 110             paper.width  / 2,
 111             paper.height  / 2 ,
 112             110,
 113             data ,
 114             {
 115                 cut: data.length   ,
 116                 colors :  colors,
 117                 no_sort : true,
 118                 start_angle :  270
 119             }
 120         );
 121
 122
 123         // fill in th emiddle...
 124
 125         paper.circle(outerpie.cx,outerpie.cy, 90).attr({fill: "#fff"})
 126         // fixme .. add the quater hour segments..
 127
 128         var innerpie = this.innerpie = paper.piechart(
 129             paper.width  / 2,
 130             paper.height  / 2 ,
 131             80,
 132             [ 1 , 1 ,1 , 1 ],
 133             {
 134                 cut: 4   ,
 135                 colors :   [ '#FEE', '#FCC' ,'#FEE', '#FCC' ] ,
 136                 no_sort : true,
 137                 start_angle :  90
 138             }
 139         );
 140
 141         paper.circle(outerpie.cx,outerpie.cy, 60).attr({fill: "#fff"})
 142
 143
 144
 145         var tdisplay  = this.tdisplay = paper.text(outerpie.cx,outerpie.cy, "Pick\nTime").attr({
 146                 font: "32px  'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
 147                 weight: 'bold', fill: '#000' });
 148
 149
 150
 151
 152
 153         for (var i = 0; i < (24/3); i++) {
 154             var angle = ( (360/24) * i * -3 )  -90;
 155             var p = outerpie.sector(outerpie.cx, outerpie.cy, 120, angle, angle, false);
 156             var innerp = outerpie.sector(outerpie.cx, outerpie.cy, 70, angle, angle, false);
 157
 158             Roo.log([p[4],p[5], (i*3)+':00']);
 159
 160             var hr = (i*3);
 161
 162             var txt = (hr < 12 ? hr : (hr-12)) +  (hr < 12 ? 'am' : 'pm');
 163             if (!hr) { txt  = ""; }
 164             if (hr == 12) {
 165                 txt= '12 noon'
 166             }
 167
 168             paper.text(p[4],p[5], txt);
 169             // inner...
 170             if (i%2 ==1) {
 171                 continue;
 172             }
 173             paper.text(innerp[4],innerp[5], ((Math.floor(i/2) * 15) + 30) % 60);
 174
 175
 176         }
 177         var asector = false;
 178
 179         var _t = this;
 180         outerpie.hover(
 181              // in?
 182             function() {
 183                 Roo.log(this.j);
 184                 if (!this.j || this.j == data.length -1) {
 185                     return;
 186                 }
 187                 var ov = _t.getValue();
 188
 189                 this.sector.stop();
 190
 191
 192                 if (this.sector != asector) {
 193                     this.sector.scale(1.1, 1.1, this.cx, this.cy);
 194                 }
 195
 196                 var min = ov ? _t.getValue().split(':').pop() : '00';
 197                 var ntime = times[this.j] + ':' + min;
 198                 tdisplay.attr( { text : _t.formatTime(ntime) });
 199
 200
 201             },
 202              // out..?
 203             function () {
 204                 if (!this.j || this.j == data.length) {
 205                     return;
 206                 }
 207                 if (this.sector != asector) {
 208                     this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
 209                 }
 210
 211                 tdisplay.attr( { text : _t.formatTime(_t.getValue()) } );
 212
 213         });
 214         outerpie.click(function() {
 215             if (!this.j || this.j == data.length -1) {
 216                 return;
 217             }
 218
 219             var ov = _t.getValue();
 220             var min = ov ? _t.getValue().split(':').pop() : '00';
 221             var ntime = times[this.j] + ':' + min;
 222             _t.setValue(ntime);
 223
 224             if (asector) {
 225                 // reset
 226                 asector.transform( 's1 1');
 227             }
 228
 229             //this.sector.scale(1.1, 1.1, this.cx, this.cy);
 230             asector = this.sector;
 231
 232
 233         });
 234
 235          var bsector = false;
 236
 237          innerpie.hover(
 238              // in?
 239             function() {
 240                 Roo.log(this.j);
 241                 /*
 242                 if (!this.j || this.j == data.length -1) {
 243                     return;
 244                 }
 245                 */
 246                 this.sector.stop();
 247                 if (this.sector != bsector) {
 248                     this.sector.scale(1.1, 1.1, this.cx, this.cy);
 249                 }
 250                 var min = this.j*15;
 251                  min = min ? min : '00';
 252
 253                 var ov = _t.getValue();
 254                 var hr = ov ? _t.getValue().split(':').shift() : '12';
 255                 var ntime = hr + ':' + min;
 256                 tdisplay.attr( { text : _t.formatTime(ntime) });
 257
 258
 259             },
 260              // out..?
 261             function () {
 262                 /*
 263                 if (!this.j || this.j == data.length) {
 264                     return;
 265                 }
 266                 */
 267                 if (this.sector != bsector) {
 268                     this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
 269                 }
 270
 271                 tdisplay.attr( { text : _t.formatTime(_t.getValue()) } );
 272
 273         });
 274         innerpie.click(function() {
 275
 276             Roo.log(this.j);
 277             var min = this.j*15;
 278             min = min ? min : '00';
 279
 280
 281             var ov = _t.getValue();
 282             var hr = ov ? _t.getValue().split(':').shift() : '12';
 283             var ntime = hr + ':' + min;
 284             _t.setValue(ntime);
 285             //tdisplay.attr( { text : _t.formatTime(ntime) });
 286
 287             //var ov = _t.getValue();
 288             //var min = ov ? _t.getValue().split(':').pop() : '00';
 289             //var ntime = times[this.j] + ':' + min;
 290             //_t.setValue(ntime);
 291
 292             if (bsector) {
 293                 bsector.transform( 's1 1');
 294             }
 295
 296             //this.sector.scale(1.1, 1.1, this.cx, this.cy);
 297             bsector = this.sector;
 298
 299
 300         });
 301
 302
 303
 304
 305
 306
 307         //pie.each(function() { Roo.log(this)});
 308         //this.setValue(this.value);
 309     },
 310     setValue : function(v){
 311         this.value = v;
 312         if (!this.viewEl) {
 313             return;
 314         }
 315         //this.viewEl.dom.innerHTML = html;
 316         Roo.form.DisplayField.superclass.setValue.call(this, v);
 317         if (this.tdisplay) {
 318             this.tdisplay.attr( { text : this.formatTime(v) } );
 319         }
 320
 321     },
 322     formatTime : function(ntime)
 323     {
 324         if (!ntime) {
 325             return "Pick\nTime";
 326         }
 327         if (ntime == '00:00') {
 328             return "Midnight";
 329         }
 330         if (ntime == '12:00') {
 331             return "12\nnoon";
 332         }
 333         Roo.log(ntime);
 334         var d = Date.parseDate(ntime, "H:i");
 335         return d.format('h:i') + "\n" + d.format('a')  ;
 336
 337
 338
 339     }
 340
 341 });