HCE Project DC service web UI  0.2
Hierarchical Cluster Engine DC service web UI
 All Classes Namespaces Files Functions Variables Pages
index.php
Go to the documentation of this file.
1 <?php
2 /* @var $this SiteController */
3 
4 $this->pageTitle=Yii::app()->name;
5 $baseUrl = Yii::app()->theme->baseUrl;
6 ?>
7 <?php
8 $gridDataProvider = new CArrayDataProvider(array(
9  array('id'=>1, 'firstName'=>'Mark', 'lastName'=>'Otto', 'language'=>'CSS','usage'=>'<span class="inlinebar">1,3,4,5,3,5</span>'),
10  array('id'=>2, 'firstName'=>'Jacob', 'lastName'=>'Thornton', 'language'=>'JavaScript','usage'=>'<span class="inlinebar">1,3,16,5,12,5</span>'),
11  array('id'=>3, 'firstName'=>'Stu', 'lastName'=>'Dent', 'language'=>'HTML','usage'=>'<span class="inlinebar">1,4,4,7,5,9,10</span>'),
12  array('id'=>4, 'firstName'=>'Jacob', 'lastName'=>'Thornton', 'language'=>'JavaScript','usage'=>'<span class="inlinebar">1,3,16,5,12,5</span>'),
13  array('id'=>5, 'firstName'=>'Stu', 'lastName'=>'Dent', 'language'=>'HTML','usage'=>'<span class="inlinebar">1,3,4,5,3,5</span>'),
14 ));
15 ?>
16 
17 <div class="row-fluid">
18  <div class="span3 ">
19  <div class="stat-block">
20  <ul>
21  <li class="stat-graph inlinebar" id="weekly-visit">8,4,6,5,9,10</li>
22  <li class="stat-count"><span>$23,000</span><span>Weekly Sales</span></li>
23  <li class="stat-percent"><span class="text-success stat-percent">20%</span></li>
24  </ul>
25  </div>
26  </div>
27  <div class="span3 ">
28  <div class="stat-block">
29  <ul>
30  <li class="stat-graph inlinebar" id="new-visits">2,4,9,1,5,7,6</li>
31  <li class="stat-count"><span>$123,780</span><span>Monthly Sales</span></li>
32  <li class="stat-percent"><span class="text-error stat-percent">-15%</span></li>
33  </ul>
34  </div>
35  </div>
36  <div class="span3 ">
37  <div class="stat-block">
38  <ul>
39  <li class="stat-graph inlinebar" id="unique-visits">200,300,500,200,300,500,1000</li>
40  <li class="stat-count"><span>$12,456</span><span>Open Invoices</span></li>
41  <li class="stat-percent"><span class="text-success stat-percent">10%</span></li>
42  </ul>
43  </div>
44  </div>
45  <div class="span3 ">
46  <div class="stat-block">
47  <ul>
48  <li class="stat-graph inlinebar" id="">1000,3000,6000,8000,3000,8000,10000</li>
49  <li class="stat-count"><span>$25,000</span><span>Overdue</span></li>
50  <li class="stat-percent"><span><span class="text-success stat-percent">20%</span></li>
51  </ul>
52  </div>
53  </div>
54 </div>
55 
56 <div class="row-fluid">
57 
58 
59  <div class="span9">
60  <?php
61  $this->beginWidget('zii.widgets.CPortlet', array(
62  'title'=>'<span class="icon-picture"></span>Operations Chart',
63  'titleCssClass'=>''
64  ));
65  ?>
66 
67  <div class="auto-update-chart" style="height: 250px;width:100%;margin-top:15px; margin-bottom:15px;"></div>
68 
69  <?php $this->endWidget(); ?>
70 
71  </div>
72  <div class="span3">
73  <div class="summary">
74  <ul>
75  <li>
76  <span class="summary-icon">
77  <img src="<?php echo $baseUrl ;?>/img/credit.png" width="36" height="36" alt="Monthly Income">
78  </span>
79  <span class="summary-number">$78,245</span>
80  <span class="summary-title"> Monthly Income</span>
81  </li>
82  <li>
83  <span class="summary-icon">
84  <img src="<?php echo $baseUrl ;?>/img/page_white_edit.png" width="36" height="36" alt="Open Invoices">
85  </span>
86  <span class="summary-number">125</span>
87  <span class="summary-title"> Open Invoices</span>
88  </li>
89  <li>
90  <span class="summary-icon">
91  <img src="<?php echo $baseUrl ;?>/img/page_white_excel.png" width="36" height="36" alt="Open Quotes<">
92  </span>
93  <span class="summary-number">53</span>
94  <span class="summary-title"> Open Quotes</span>
95  </li>
96  <li>
97  <span class="summary-icon">
98  <img src="<?php echo $baseUrl ;?>/img/group.png" width="36" height="36" alt="Active Members">
99  </span>
100  <span class="summary-number">654,321</span>
101  <span class="summary-title"> Active Members</span>
102  </li>
103  <li>
104  <span class="summary-icon">
105  <img src="<?php echo $baseUrl ;?>/img/folder_page.png" width="36" height="36" alt="Recent Conversions">
106  </span>
107  <span class="summary-number">630</span>
108  <span class="summary-title"> Recent Conversions</span></li>
109 
110  </ul>
111  </div>
112 
113  </div>
114 </div>
115 
116 
117 <div class="row-fluid">
118  <div class="span6">
119  <?php $this->widget('zii.widgets.grid.CGridView', array(
120  /*'type'=>'striped bordered condensed',*/
121  'htmlOptions'=>array('class'=>'table table-striped table-bordered table-condensed'),
122  'dataProvider'=>$gridDataProvider,
123  'template'=>"{items}",
124  'columns'=>array(
125  array('name'=>'id', 'header'=>'#'),
126  array('name'=>'firstName', 'header'=>'First name'),
127  array('name'=>'lastName', 'header'=>'Last name'),
128  array('name'=>'language', 'header'=>'Language'),
129  array('name'=>'usage', 'header'=>'Usage', 'type'=>'raw'),
130 
131  ),
132  )); ?>
133  </div><!--/span-->
134  <div class="span6">
135  <?php $this->widget('zii.widgets.grid.CGridView', array(
136  /*'type'=>'striped bordered condensed',*/
137  'htmlOptions'=>array('class'=>'table table-striped table-bordered table-condensed'),
138  'dataProvider'=>$gridDataProvider,
139  'template'=>"{items}",
140  'columns'=>array(
141  array('name'=>'id', 'header'=>'#'),
142  array('name'=>'firstName', 'header'=>'First name'),
143  array('name'=>'lastName', 'header'=>'Last name'),
144  array('name'=>'language', 'header'=>'Language'),
145  array('name'=>'usage', 'header'=>'Usage', 'type'=>'raw'),
146 
147  ),
148  )); ?>
149 
150  </div><!--/span-->
151 </div><!--/row-->
152 
153 <div class="row-fluid">
154  <div class="span6">
155  <?php
156  $this->beginWidget('zii.widgets.CPortlet', array(
157  'title'=>'<span class="icon-th-large"></span>Income Chart',
158  'titleCssClass'=>''
159  ));
160  ?>
161 
162  <div class="visitors-chart" style="height: 230px;width:100%;margin-top:15px; margin-bottom:15px;"></div>
163 
164  <?php $this->endWidget(); ?>
165  </div><!--/span-->
166  <div class="span6">
167  <?php
168  $this->beginWidget('zii.widgets.CPortlet', array(
169  'title'=>'<span class="icon-th-list"></span> Visitors Chart',
170  'titleCssClass'=>''
171  ));
172  ?>
173 
174  <div class="pieStats" style="height: 230px;width:100%;margin-top:15px; margin-bottom:15px;"></div>
175 
176  <?php $this->endWidget(); ?>
177  </div>
178  <!--<div class="span2">
179  <input class="knob" data-width="100" data-displayInput=false data-fgColor="#5EB95E" value="35">
180  </div>
181  <div class="span2">
182  <input class="knob" data-width="100" data-cursor=true data-fgColor="#B94A48" data-thickness=.3 value="29">
183  </div>
184  <div class="span2">
185  <input class="knob" data-width="100" data-min="-100" data-fgColor="#F89406" data-displayPrevious=true value="44">
186  </div><!--/span-->
187 </div><!--/row-->
188 
189 
190 
191 
192 <script>
193  $(function() {
194 
195  $(".knob").knob({
196  /*change : function (value) {
197  //console.log("change : " + value);
198  },
199  release : function (value) {
200  console.log("release : " + value);
201  },
202  cancel : function () {
203  console.log("cancel : " + this.value);
204  },*/
205  draw : function () {
206 
207  // "tron" case
208  if(this.$.data('skin') == 'tron') {
209 
210  var a = this.angle(this.cv) // Angle
211  , sa = this.startAngle // Previous start angle
212  , sat = this.startAngle // Start angle
213  , ea // Previous end angle
214  , eat = sat + a // End angle
215  , r = 1;
216 
217  this.g.lineWidth = this.lineWidth;
218 
219  this.o.cursor
220  && (sat = eat - 0.3)
221  && (eat = eat + 0.3);
222 
223  if (this.o.displayPrevious) {
224  ea = this.startAngle + this.angle(this.v);
225  this.o.cursor
226  && (sa = ea - 0.3)
227  && (ea = ea + 0.3);
228  this.g.beginPath();
229  this.g.strokeStyle = this.pColor;
230  this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
231  this.g.stroke();
232  }
233 
234  this.g.beginPath();
235  this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
236  this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
237  this.g.stroke();
238 
239  this.g.lineWidth = 2;
240  this.g.beginPath();
241  this.g.strokeStyle = this.o.fgColor;
242  this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
243  this.g.stroke();
244 
245  return false;
246  }
247  }
248  });
249 
250  // Example of infinite knob, iPod click wheel
251  var v, up=0,down=0,i=0
252  ,$idir = $("div.idir")
253  ,$ival = $("div.ival")
254  ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
255  ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
256  $("input.infinite").knob(
257  {
258  min : 0
259  , max : 20
260  , stopper : false
261  , change : function () {
262  if(v > this.cv){
263  if(up){
264  decr();
265  up=0;
266  }else{up=1;down=0;}
267  } else {
268  if(v < this.cv){
269  if(down){
270  incr();
271  down=0;
272  }else{down=1;up=0;}
273  }
274  }
275  v = this.cv;
276  }
277  });
278  });
279  </script>