add time stuff

diff --git a/ux/DateDisplay.js b/ux/DateDisplay.js
new file mode 100644 (file)
index 0000000..7e023aa
--- /dev/null
+++ b/ux/DateDisplay.js
@@ -0,0 +1,38 @@
+
+
+ 
+           
+Roo.form.DateDisplay = function(config){
+    
+    
+    Roo.form.DateDisplay.superclass.constructor.call(this, config);
+    this.picker = new Roo.DatePicker({
+        
+        
+    });
+    
+};
+
+Roo.extend(Roo.form.DateDisplay , Roo.form.DateField ,  {
+    
+    inputType  : 'hidden',
+    
+    onRender : function(ct, position)
+    {
+        Roo.form.TextField.superclass.onRender.call(this, ct, position);
+        
+        
+        this.el.dom.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
+        // prevent input submission
+        
+        // now render the field..  
+        this.wrap = this.el.wrap();
+        
+        this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
+        
+        this.picker.onRender(this.viewEl, position);
+        
+    }
+     
+    
+});
\ No newline at end of file

diff --git a/ux/TimePicker.js b/ux/TimePicker.js
index 56b48b1..b0361b3 100644 (file)
--- a/ux/TimePicker.js
+++ b/ux/TimePicker.js
@@ -2,7 +2,7 @@
 
  
            
-Roo.ux.TimePicker = function(config){
+Roo.form.TimePicker = function(config){
     
     Roo.log("CTOR CALLED");
     // these are required... error out if not avail..
@@ -18,18 +18,20 @@ Roo.ux.TimePicker = function(config){
         return;
     }
     
-    Roo.ux.TimePicker.superclass.constructor.call(this, config);
+    Roo.form.TimePicker.superclass.constructor.call(this, config);
 };
 
-Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField ,  {
+Roo.extend(Roo.form.TimePicker , Roo.form.DisplayField ,  {
     
     paper : false,
-    width: 350,
-    height: 350,
+    width: 280,
+    height: 250,
     
     startHour : '7:30',
     endHour : '19:15',
     
+    tdisplay  : false,
+    
     onRender : function(ct, position){
         
         Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
@@ -47,20 +49,33 @@ Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField ,  {
         
         this.viewEl.setHeight(this.height);
         this.viewEl.setWidth(this.width);
-    
-    // let's create a pie chart...
+        
+        var open = this.startHour.split(':').shift() * 1;
+        var close = this.endHour.split(':').shift() * 1;
         
         var paper = this.paper = Raphael(this.viewEl.dom);
         
         paper.setSize(this.width,this.height);
         
+        this.renderPaper(open,close);
+    },
+    
+    
+    
+    renderPaper : function( open , close )
+    { 
+        // let's create a pie chart...
+        
+        var paper = this.paper;
+        this.paper.clear();
+        
         var data = [];
         var colors = [];
         
         // say we open for 7 - 19
-        var open = this.startHour.split(':').shift();
-        var close = this.endHour.split(':').shift();
         
+        
+        Roo.log([open, close]);
         data.push(open);
         
         // colours should be configurable...
@@ -73,16 +88,11 @@ Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField ,  {
         
         for (var i = open; i < close ;i++) {
             data.push(1);
-            
-            if (!i) {
-                times.push( 'midnight')
-            } else if (i == 12) {
-                times.push( 'noon' );
-            } else {
-              
-                times.push(hr );
+            if (i < 10) {
+                times.push( '0'  + i);
+            } else { 
+                times.push( '' + i);
             }
-             
             colors.push(clr[i % clr.length]);
         }
         data.push( 24-close );
@@ -94,9 +104,9 @@ Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField ,  {
         //Roo.log(colors.length);
 
         var outerpie = this.outerpie = paper.piechart(
-            paper.height  / 2,
+            paper.width  / 2,
             paper.height  / 2 ,
-            (paper.height / 2) - 70,
+            110,
             data ,
             { 
                 cut: data.length   ,
@@ -105,104 +115,224 @@ Roo.extend(Roo.ux.TimePicker , Roo.form.DisplayField ,  {
                 start_angle :  270
             }
         );
-        // fill in th emiddle...
         
-        paper.circle(pie.cx,pie.cy, (paper.height / 2) - 100).attr({fill: "#fff"})
         
+        // fill in th emiddle...
+        
+        paper.circle(outerpie.cx,outerpie.cy, 90).attr({fill: "#fff"})
         // fixme .. add the quater hour segments..
         
         var innerpie = this.innerpie = paper.piechart(
-            paper.height  / 2,
+            paper.width  / 2,
             paper.height  / 2 ,
-            (paper.height / 2) - 130,
+            80,
             [ 1 , 1 ,1 , 1 ],
             { 
                 cut: 4   ,
                 colors :   [ '#FEE', '#FCC' ,'#FEE', '#FCC' ] ,
                 no_sort : true,
-                start_angle :  270
+                start_angle :  90
             }
         );
+
+        paper.circle(outerpie.cx,outerpie.cy, 60).attr({fill: "#fff"})
+ 
+        
+      
+        var tdisplay  = this.tdisplay = paper.text(outerpie.cx,outerpie.cy, "Pick\nTime").attr({
+                font: "32px  'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
+                weight: 'bold', fill: '#000' });
         
-        paper.circle(pie.cx,pie.cy, (paper.height / 2) - 140).attr({fill: "#fff"})
         
         
-        var atime = "Pick\nTime";
-        var asector = false;
         
-        var tdisplay  = paper.text(pie.cx,pie.cy,atime).attr({
-                font: "32px  'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
-                weight: 'bold', fill: '#000' });
         
-        pie.hover(
+        for (var i = 0; i < (24/3); i++) {
+            var angle = ( (360/24) * i * -3 )  -90;
+            var p = outerpie.sector(outerpie.cx, outerpie.cy, 120, angle, angle, false);
+            var innerp = outerpie.sector(outerpie.cx, outerpie.cy, 70, angle, angle, false);
+
+            Roo.log([p[4],p[5], (i*3)+':00']);
+            
+            var hr = (i*3);
+            
+            var txt = (hr < 12 ? hr : (hr-12)) +  (hr < 12 ? 'am' : 'pm');
+            if (!hr) { txt  = ""; }
+            if (hr == 12) {
+                txt= '12 noon'
+            }
+            
+            paper.text(p[4],p[5], txt);
+            // inner...
+            if (i%2 ==1) {
+                continue;
+            }
+            paper.text(innerp[4],innerp[5], ((Math.floor(i/2) * 15) + 30) % 60);
+            
+            
+        }
+        var asector = false;
+
+        var _t = this;
+        outerpie.hover(
              // in?
             function() {
                 Roo.log(this.j);
                 if (!this.j || this.j == data.length -1) {
                     return;
                 }
-                 this.sector.stop();
-                 if (this.sector != asector) {
+                var ov = _t.getValue();
+               
+                this.sector.stop();
+                
+                 
+                if (this.sector != asector) {
                     this.sector.scale(1.1, 1.1, this.cx, this.cy);
-                 }
-                 tdisplay.attr( { text : times[this.j]} );
-                 if (this.label) {
-                     this.label[0].stop();
-                     this.label[0].attr({ r: 7.5 });
-                     this.label[1].attr({ "font-weight": 800 });
-                 }
-             },
+                }
+            
+                var min = ov ? _t.getValue().split(':').pop() : '00';
+                var ntime = times[this.j] + ':' + min;
+                tdisplay.attr( { text : _t.formatTime(ntime) });
+                 
+                
+            },
              // out..?
-             function () {
+            function () {
                 if (!this.j || this.j == data.length) {
                     return;
                 }
                 if (this.sector != asector) {
                     this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
                 }
- 
-                if (this.label) {
-                     this.label[0].animate({ r: 5 }, 500, "bounce");
-                     this.label[1].attr({ "font-weight": 400 });
-                }
-                tdisplay.attr( { text : atime } );
+                    
+                tdisplay.attr( { text : _t.formatTime(_t.getValue()) } );
              
         });
-        pie.click(function() {
+        outerpie.click(function() {
             if (!this.j || this.j == data.length -1) {
                 return;
             }
-            atime = times[this.j];
-            tdisplay.attr( { text : atime } );
+           
+            var ov = _t.getValue();
+            var min = ov ? _t.getValue().split(':').pop() : '00';
+            var ntime = times[this.j] + ':' + min;
+            _t.setValue(ntime);
+            
             if (asector) {
-                asector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
+                // reset 
+                asector.transform( 's1 1');
             }
             
-            this.sector.scale(1.1, 1.1, this.cx, this.cy);
+            //this.sector.scale(1.1, 1.1, this.cx, this.cy);
             asector = this.sector;
+ 
+            
+        });
+        
+         var bsector = false;
 
+         innerpie.hover(
+             // in?
+            function() {
+                Roo.log(this.j);
+                /*
+                if (!this.j || this.j == data.length -1) {
+                    return;
+                }
+                */
+                this.sector.stop();
+                if (this.sector != bsector) {
+                    this.sector.scale(1.1, 1.1, this.cx, this.cy);
+                }
+                var min = this.j*15;
+                 min = min ? min : '00';
+                
+                var ov = _t.getValue();
+                var hr = ov ? _t.getValue().split(':').shift() : '12';
+                var ntime = hr + ':' + min;
+                tdisplay.attr( { text : _t.formatTime(ntime) });
+                 
+                
+            },
+             // out..?
+            function () {
+                /*
+                if (!this.j || this.j == data.length) {
+                    return;
+                }
+                */
+                if (this.sector != bsector) {
+                    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
+                }
+ 
+                tdisplay.attr( { text : _t.formatTime(_t.getValue()) } );
+             
+        });
+        innerpie.click(function() {
+             
+            Roo.log(this.j);
+            var min = this.j*15;
+            min = min ? min : '00';
+                
+             
+            var ov = _t.getValue();
+            var hr = ov ? _t.getValue().split(':').shift() : '12';
+            var ntime = hr + ':' + min;
+            _t.setValue(ntime);
+            //tdisplay.attr( { text : _t.formatTime(ntime) });
+            
+            //var ov = _t.getValue();
+            //var min = ov ? _t.getValue().split(':').pop() : '00';
+            //var ntime = times[this.j] + ':' + min;
+            //_t.setValue(ntime);
             
+            if (bsector) {
+                bsector.transform( 's1 1');
+            }
+            
+            //this.sector.scale(1.1, 1.1, this.cx, this.cy);
+            bsector = this.sector;
+ 
             
-        })
+        });
+        
+        
+        
         
         
         
-        for (var i = 0; i < (24/3); i++) {
-            var angle = ( (360/24) * i * -3 )  -90;
-            var p = pie.sector(pie.cx, pie.cy, 120, angle, angle, false);
-            Roo.log([p[4],p[5], (i*3)+':00']);
-            
-            var hr = (i*3);
-            
-            var txt = (hr < 12 ? hr : (hr-12)) +  (hr < 12 ? 'am' : 'pm');
-            if (!hr) { txt  = ""; }
-            if (hr == 12) { txt= '12 noon'}
-            paper.text(p[4],p[5], txt);
-        }
-            
         //pie.each(function() { Roo.log(this)});
-        this.setValue(this.value);
+        //this.setValue(this.value);
+    },
+    setValue : function(v){
+        this.value = v;
+        if (!this.viewEl) {
+            return;
+        }
+        //this.viewEl.dom.innerHTML = html;
+        Roo.form.DisplayField.superclass.setValue.call(this, v);
+        if (this.tdisplay) {
+            this.tdisplay.attr( { text : this.formatTime(v) } );
+        }
+
+    },
+    formatTime : function(ntime)
+    {
+        if (!ntime) {
+            return "Pick\nTime";
+        }
+        if (ntime == '00:00') {
+            return "Midnight";
+        }
+        if (ntime == '12:00') {
+            return "12\nnoon";
+        }
+        Roo.log(ntime);
+        var d = Date.parseDate(ntime, "H:i");
+        return d.format('h:i') + "\n" + d.format('a')  ; 
+        
+        
+        
     }
     
-    
 });
\ No newline at end of file