working on the dashboard, added some pie charts

app/assets/javascripts/application.js

@@ -23,6 +23,7 @@
 //= require tiny-scrollbar.js
 //= require jquery.validate.js
 //= require jquery.snippet.js
+//= require jquery.easy-pie-chart.js
 
 
 function rubyCodeFormat() {
@@ -36,6 +37,150 @@ $("pre.ruby").snippet("ruby",{style:"rand01",transparent:true,showNum:true});
 
 };
 
+function pieChartHome() {
+    $(function () {
+      //create instance
+      $('.chart1').easyPieChart({
+        animate: 2000,
+        barColor: '#e26666',
+        trackColor: '#dddddd',
+        scaleColor: '#e26666',
+        size: 160,
+        lineWidth: 7,
+      });
+      //update instance after 5 sec
+      setTimeout(function () {
+        $('.chart1').data('easyPieChart').update(50);
+      }, 5000);
+      setTimeout(function () {
+        $('.chart1').data('easyPieChart').update(70);
+      }, 10000);
+      setTimeout(function () {
+        $('.chart1').data('easyPieChart').update(30);
+      }, 15000);
+      setTimeout(function () {
+        $('.chart1').data('easyPieChart').update(90);
+      }, 19000);
+      setTimeout(function () {
+        $('.chart1').data('easyPieChart').update(40);
+      }, 32000);
+    });
+
+    $(function () {
+      //create instance
+      $('.chart2').easyPieChart({
+        animate: 2000,
+        barColor: '#b5799e',
+        trackColor: '#dddddd',
+        scaleColor: '#b5799e',
+        size: 160,
+        lineWidth: 7,
+      });
+      //update instance after 5 sec
+      setTimeout(function () {
+        $('.chart2').data('easyPieChart').update(90);
+      }, 10000);
+      setTimeout(function () {
+        $('.chart2').data('easyPieChart').update(40);
+      }, 18000);
+      setTimeout(function () {
+        $('.chart2').data('easyPieChart').update(70);
+      }, 28000);
+      setTimeout(function () {
+        $('.chart2').data('easyPieChart').update(50);
+      }, 32000);
+      setTimeout(function () {
+        $('.chart2').data('easyPieChart').update(80);
+      }, 40000);
+    });
+
+    $(function () {
+      //create instance
+      $('.chart3').easyPieChart({
+        animate: 2000,
+        barColor: '#579da9',
+        trackColor: '#dddddd',
+        scaleColor: '#579da9',
+        size: 160,
+        lineWidth: 7,
+      });
+      //update instance after 5 sec
+      setTimeout(function () {
+        $('.chart3').data('easyPieChart').update(20);
+      }, 9000);
+      setTimeout(function () {
+        $('.chart3').data('easyPieChart').update(59);
+      }, 20000);
+      setTimeout(function () {
+        $('.chart3').data('easyPieChart').update(38);
+      }, 35000);
+      setTimeout(function () {
+        $('.chart3').data('easyPieChart').update(79);
+      }, 49000);
+      setTimeout(function () {
+        $('.chart3').data('easyPieChart').update(96);
+      }, 52000);
+    });
+
+    $(function () {
+      //create instance
+      $('.chart4').easyPieChart({
+        animate: 2000,
+        barColor: '#dba26b',
+        trackColor: '#dddddd',
+        scaleColor: '#dba26b',
+        size: 160,
+        lineWidth: 7,
+      });
+      //update instance after 5 sec
+      setTimeout(function () {
+        $('.chart4').data('easyPieChart').update(40);
+      }, 6000);
+      setTimeout(function () {
+        $('.chart4').data('easyPieChart').update(67);
+      }, 14000);
+      setTimeout(function () {
+        $('.chart4').data('easyPieChart').update(43);
+      }, 23000);
+      setTimeout(function () {
+        $('.chart4').data('easyPieChart').update(80);
+      }, 36000);
+      setTimeout(function () {
+        $('.chart4').data('easyPieChart').update(66);
+      }, 41000);
+    });
+
+
+    $(function () {
+      //create instance
+      $('.chart5').easyPieChart({
+        animate: 3000,
+        barColor: '#1e825e',
+        trackColor: '#dddddd',
+        scaleColor: '#1e825e',
+        size: 160,
+        lineWidth: 7,
+      });
+      //update instance after 5 sec
+      setTimeout(function () {
+        $('.chart5').data('easyPieChart').update(30);
+      }, 9000);
+      setTimeout(function () {
+        $('.chart5').data('easyPieChart').update(87);
+      }, 19000);
+      setTimeout(function () {
+        $('.chart5').data('easyPieChart').update(28);
+      }, 27000);
+      setTimeout(function () {
+        $('.chart5').data('easyPieChart').update(69);
+      }, 39000);
+      setTimeout(function () {
+        $('.chart5').data('easyPieChart').update(99);
+      }, 47000);
+    });
+
+  }
+
 $(document).ready(function(){
 	rubyCodeFormat()
 });

app/views/dashboard/home.html.erb

@@ -3,54 +3,9 @@
     <div class="main-container">
 
 <div class="row-fluid">
-    <div class="span8">
-      <div class="widget no-margin">
-        <div class="widget-header">
-          <div class="title">
-            <span class="fs1" aria-hidden="true" data-icon="&#xe170;"></span> Blog posts with picture
-          </div>
-        </div>
-        <div class="widget-body">
-          <div class="row-fluid">
-            <div class="span12">
-              <div class="row-fluid">
-                <div class="span12">
-                  <h4><strong><a href="#">Post of the Day</a></strong></h4>
-                </div>
-              </div>
-              <div class="row-fluid">
-                <div class="span4">
-                  <a href="#" class="thumbnail">
-                    <img src="<%= image_path("user-display.png") %>" alt="" />
-                  </a>
-                </div>
-                <div class="span8">      
-                  <p>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                  </p>
-                  <p><a class="btn btn-info" href="#">Read more</a></p>
-                </div>
-              </div>
-              <div class="row-fluid">
-                <div class="span12">
-                  <p></p>
-                  <p class="icomoon-small">
-                    <span class="fs1" aria-hidden="true" data-icon="&#xe070;"></span> by <a href="#">Srinu</a> 
-                    | <span class="fs1" aria-hidden="true" data-icon="&#xe052;"></span>  Mar 16th, 2013
-                    | <span class="fs1" aria-hidden="true" data-icon="&#xe1c3;"></span> <a href="#">7 Comments</a>
-                    | <span class="fs1" aria-hidden="true" data-icon="&#xe15e;"></span> <a href="#">48 Shares</a>
-                    | <span class="fs1" aria-hidden="true" data-icon="&#xe031;"></span> Tags : <a href="#"><span class="label label-info">Sandy</span></a> 
-                    <a href="#"><span class="label label-important">Baswa</span></a> 
-                    <a href="#"><span class="label label-success">Lorem</span></a> 
-                    <a href="#"><span class="label label-warning">Sinu</span></a>
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>  
-        </div>
-      </div>
-    </div>
+    <div class="span12"> <!--begin span12 -->
+      <%= render :partial => "layouts/dashboard/dashboard_stats"%>
+    </div> <!-- end span12 -->
 </div>
 </div>
 
@@ -61,6 +16,9 @@ function makeActive(){
 };
 
 $(document).ready(
-	makeActive
+	makeActive,
+	 pieChartHome()
 );
-</script>
+
+</script>
+

app/views/layouts/dashboard/_dashboard_stats.html.erb

@@ -0,0 +1,54 @@
+<div class="widget">
+    <div class="widget-header">
+      <div class="title">
+        <span class="fs1" aria-hidden="true" data-icon="&#xe0a0;"></span> Current Statistics <span class="mini-title">Animated Pie Charts</span>
+      </div>
+    </div>
+    <div class="widget-body">
+      <div class="easy-pie-charts-container">
+        <div class="pie-chart">
+          <div class="chart1" data-percent="65">
+            10
+          </div>
+          <h5 class="name">
+            Available PTO
+          </h5>
+        </div>
+        <div class="pie-chart">
+          <div class="chart2" data-percent="47">
+            1
+          </div>
+          <h5 class="name">
+            Sick Days Taken
+          </h5>
+        </div>
+        <div class="pie-chart">
+          <div class="chart3" data-percent="87">
+            $5920
+          </div>
+          <h5 class="name">
+            Income
+          </h5>
+        </div>
+        <div class="pie-chart">
+          <div class="chart4" data-percent="22">
+            5.0
+          </div>
+          <h5 class="name">
+            Performance Score
+          </h5>
+        </div>
+        <div class="pie-chart">
+          <div class="chart5" data-percent="91">
+            71
+          </div>
+          <h5 class="name">
+            401k
+          </h5>
+        </div>
+        <div class="clearfix">
+        </div>
+      </div>
+    </div>
+  </div>
+

app/views/layouts/tutorial/xss/_xss_first.html.erb

@@ -31,13 +31,23 @@
           <div class="accordion-body collapse" id="collapseTwo" style="height: 0px;">
             <div class="accordion-inner">
               <p><b>Stored Cross-Site Scripting - The following code was taken from app/views/layouts/shared/_header.html.erb</b></p>
-			  <font face="Courier New" style="color: rgb(69, 126, 136)"> 
+			 
 				 <p>
   					<pre class="ruby">
 					  <%= @code %>
 	 				</pre>
                   </p>
-		      </font>
+ 				  <p class="desc">
+					Coincidentally, HTML safe is not safe from HTML Injection or "XSS" attacks. The name is deceiving. Some folks believe the raw() helper to be different than the html_safe String method. raw() is actually a wrapper for html_safe and essentially ensures exceptions are handled when the expected value is nil. 
+					<pre class="ruby">
+						# Psuedo-code to help conceptualize
+						def raw(dirty_string)
+						  dirty_string.to_s.html_safe
+						end
+					</pre>
+					
+				  </p>
+		    
             </div>
           </div>
         </div>