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