git.roojs.org Git - roojs1/blob - ux/TimePicker.js

   1
   2
   3
   4
   5 Roo.ux.TimePicker = function(config){
   6
   7
   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         alert("Error - required components not found  - Raphael and piechart");
  18         return;
  19     }
  20
  21     Roo.ux.TimePicker.superclass.constructor.call(this, config);
  22 };
  23
  24 Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField ,  {
  25
  26
  27     onRender : function(ct, position){
  28
  29         Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
  30         //if(this.inputValue !== undefined){
  31         this.wrap = this.el.wrap();
  32
  33         this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
  34
  35
  36         //?? needed??
  37         if (this.bodyStyle) {
  38             this.viewEl.applyStyles(this.bodyStyle);
  39         }
  40         //this.viewEl.setStyle('padding', '2px');
  41
  42         this.setValue(this.value);
  43
  44
  45     // let's create a pie chart...
  46         var ge = Roo.select('.pb-book-time',true).first();
  47         var paper = Raphael(ge.dom);
  48         var sz = ge.getSize();
  49         paper.setSize(sz.width,sz.height);
  50
  51         var data = [];
  52         var colors = [];
  53
  54         // say we open for 7 - 19
  55         var open = 7;
  56         var close = 19;
  57
  58         data.push(open * 4);
  59
  60         colors.push('#003');
  61
  62         var clr = [ '#003' , '#FCC' , '#Fee', '#FCC'];
  63
  64         var times = [ '' ];
  65
  66         for (var i = (open*4); i < (close*4);i++) {
  67             data.push(1);
  68
  69             if (!i) {
  70                 times.push( 'midnight' )
  71             } else if (i == 48) {
  72                 times.push( 'noon' );
  73             } else {
  74                 var min = ( i % 4) * 15;
  75                 min = !min ? ':00' : (':' + min);
  76                 var hr = Math.floor(i/4);
  77                 var tail = hr < 12 ? 'am' : 'pm';
  78                 hr = hr % 12;
  79                 times.push(hr  + min + tail);
  80             }
  81
  82
  83
  84             colors.push(clr[i % clr.length]);
  85         }
  86         data.push((24-close) * 4);
  87         colors.push('#003');
  88         Roo.log(data.length);
  89         Roo.log(JSON.stringify(data));
  90         Roo.log(JSON.stringify(colors));
  91         Roo.log(colors.length);
  92
  93         var pie = paper.piechart(
  94             paper.height  / 2,
  95             paper.height  / 2 ,
  96             (paper.height / 2) - 70,
  97             data ,
  98             {
  99                 cut: data.length   ,
 100                 colors :  colors,
 101                 no_sort : true,
 102                 start_angle :  270
 103             }
 104         );
 105         paper.circle(pie.cx,pie.cy, (paper.height / 2) - 100).attr({fill: "#fff"})
 106
 107         var atime = "Pick\nTime";
 108         var asector = false;
 109
 110         var tdisplay  = paper.text(pie.cx,pie.cy,atime).attr({ font: "32px  'Lucida Sans Unicode', 'Lucida Grande', sans-serif", weight: 'bold', fill: '#000' });
 111         pie.hover(
 112              // in?
 113             function() {
 114                 Roo.log(this.j);
 115                 if (!this.j || this.j == data.length -1) {
 116                     return;
 117                 }
 118                  this.sector.stop();
 119                  if (this.sector != asector) {
 120                     this.sector.scale(1.1, 1.1, this.cx, this.cy);
 121                  }
 122                  tdisplay.attr( { text : times[this.j]} );
 123                  if (this.label) {
 124                      this.label[0].stop();
 125                      this.label[0].attr({ r: 7.5 });
 126                      this.label[1].attr({ "font-weight": 800 });
 127                  }
 128              },
 129              // out..?
 130              function () {
 131                 if (!this.j || this.j == data.length) {
 132                     return;
 133                 }
 134                 if (this.sector != asector) {
 135                     this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
 136                 }
 137
 138                 if (this.label) {
 139                      this.label[0].animate({ r: 5 }, 500, "bounce");
 140                      this.label[1].attr({ "font-weight": 400 });
 141                 }
 142                 tdisplay.attr( { text : atime } );
 143
 144         });
 145         pie.click(function() {
 146             if (!this.j || this.j == data.length -1) {
 147                 return;
 148             }
 149             atime = times[this.j];
 150             tdisplay.attr( { text : atime } );
 151             if (asector) {
 152                 asector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
 153             }
 154
 155             this.sector.scale(1.1, 1.1, this.cx, this.cy);
 156             asector = this.sector;
 157
 158
 159
 160         })
 161
 162
 163
 164         for (var i = 0; i < (24/3); i++) {
 165             var angle = ( (360/24) * i * -3 )  -90;
 166             var p = pie.sector(pie.cx, pie.cy, 120, angle, angle, false);
 167             Roo.log([p[4],p[5], (i*3)+':00']);
 168
 169             var hr = (i*3);
 170
 171             var txt = (hr < 12 ? hr : (hr-12)) +  (hr < 12 ? 'am' : 'pm');
 172             if (!hr) { txt  = ""; }
 173             if (hr == 12) { txt= '12 noon'}
 174             paper.text(p[4],p[5], txt);
 175         }
 176
 177         //pie.each(function() { Roo.log(this)});
 178
 179
 180     });
 181
 182
 183 });