From b6eb516242dbdf6cf9b8b92c7e593e1fda470ea8 Mon Sep 17 00:00:00 2001
From: Sven <sven.hoehn@posteo.de>
Date: Tue, 4 Apr 2017 21:45:43 +0200
Subject: [PATCH] add stats

---
 static/css/style.css             | 14 +++++++++++++
 static/js/circle-progress.min.js | 10 +++++++++
 static/js/site.js                |  2 +-
 static/scss/style.scss           | 17 +++++++++++++++
 templates/base.html              |  6 ++++--
 templates/index.html             | 36 ++++++++++++++++++++++++++------
 6 files changed, 76 insertions(+), 9 deletions(-)
 create mode 100644 static/js/circle-progress.min.js

diff --git a/static/css/style.css b/static/css/style.css
index d9ae7b0..c8e08b0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5323,3 +5323,17 @@ footer {
 @media (max-width: 991px) {
   p.lead {
     font-size: 1rem; } }
+
+.circle {
+  position: relative; }
+  .circle p.lead {
+    color: #546e7a;
+    position: absolute;
+    top: calc(50% - 1.25rem);
+    width: 100%; }
+
+.truncate {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; }
diff --git a/static/js/circle-progress.min.js b/static/js/circle-progress.min.js
new file mode 100644
index 0000000..0508e0e
--- /dev/null
+++ b/static/js/circle-progress.min.js
@@ -0,0 +1,10 @@
+/**
+ * jquery-circle-progress - jQuery Plugin to draw animated circular progress bars:
+ * {@link http://kottenator.github.io/jquery-circle-progress/}
+ *
+ * @author Rostyslav Bryzgunov <kottenator@gmail.com>
+ * @version 1.2.1
+ * @licence MIT
+ * @preserve
+ */
+!function(i){if("function"==typeof define&&define.amd)define(["jquery"],i);else if("object"==typeof module&&module.exports){var t=require("jquery");i(t),module.exports=t}else i(jQuery)}(function(i){function t(i){this.init(i)}t.prototype={value:0,size:100,startAngle:-Math.PI,thickness:"auto",fill:{gradient:["#3aeabb","#fdd250"]},emptyFill:"rgba(0, 0, 0, .1)",animation:{duration:1200,easing:"circleProgressEasing"},animationStartValue:0,reverse:!1,lineCap:"butt",insertMode:"prepend",constructor:t,el:null,canvas:null,ctx:null,radius:0,arcFill:null,lastFrameValue:0,init:function(t){i.extend(this,t),this.radius=this.size/2,this.initWidget(),this.initFill(),this.draw(),this.el.trigger("circle-inited")},initWidget:function(){this.canvas||(this.canvas=i("<canvas>")["prepend"==this.insertMode?"prependTo":"appendTo"](this.el)[0]);var t=this.canvas;if(t.width=this.size,t.height=this.size,this.ctx=t.getContext("2d"),window.devicePixelRatio>1){var e=window.devicePixelRatio;t.style.width=t.style.height=this.size+"px",t.width=t.height=this.size*e,this.ctx.scale(e,e)}},initFill:function(){function t(){var t=i("<canvas>")[0];t.width=e.size,t.height=e.size,t.getContext("2d").drawImage(g,0,0,r,r),e.arcFill=e.ctx.createPattern(t,"no-repeat"),e.drawFrame(e.lastFrameValue)}var e=this,a=this.fill,n=this.ctx,r=this.size;if(!a)throw Error("The fill is not specified!");if("string"==typeof a&&(a={color:a}),a.color&&(this.arcFill=a.color),a.gradient){var s=a.gradient;if(1==s.length)this.arcFill=s[0];else if(s.length>1){for(var l=a.gradientAngle||0,o=a.gradientDirection||[r/2*(1-Math.cos(l)),r/2*(1+Math.sin(l)),r/2*(1+Math.cos(l)),r/2*(1-Math.sin(l))],h=n.createLinearGradient.apply(n,o),c=0;c<s.length;c++){var d=s[c],u=c/(s.length-1);i.isArray(d)&&(u=d[1],d=d[0]),h.addColorStop(u,d)}this.arcFill=h}}if(a.image){var g;a.image instanceof Image?g=a.image:(g=new Image,g.src=a.image),g.complete?t():g.onload=t}},draw:function(){this.animation?this.drawAnimated(this.value):this.drawFrame(this.value)},drawFrame:function(i){this.lastFrameValue=i,this.ctx.clearRect(0,0,this.size,this.size),this.drawEmptyArc(i),this.drawArc(i)},drawArc:function(i){if(0!==i){var t=this.ctx,e=this.radius,a=this.getThickness(),n=this.startAngle;t.save(),t.beginPath(),this.reverse?t.arc(e,e,e-a/2,n-2*Math.PI*i,n):t.arc(e,e,e-a/2,n,n+2*Math.PI*i),t.lineWidth=a,t.lineCap=this.lineCap,t.strokeStyle=this.arcFill,t.stroke(),t.restore()}},drawEmptyArc:function(i){var t=this.ctx,e=this.radius,a=this.getThickness(),n=this.startAngle;i<1&&(t.save(),t.beginPath(),i<=0?t.arc(e,e,e-a/2,0,2*Math.PI):this.reverse?t.arc(e,e,e-a/2,n,n-2*Math.PI*i):t.arc(e,e,e-a/2,n+2*Math.PI*i,n),t.lineWidth=a,t.strokeStyle=this.emptyFill,t.stroke(),t.restore())},drawAnimated:function(t){var e=this,a=this.el,n=i(this.canvas);n.stop(!0,!1),a.trigger("circle-animation-start"),n.css({animationProgress:0}).animate({animationProgress:1},i.extend({},this.animation,{step:function(i){var n=e.animationStartValue*(1-i)+t*i;e.drawFrame(n),a.trigger("circle-animation-progress",[i,n])}})).promise().always(function(){a.trigger("circle-animation-end")})},getThickness:function(){return i.isNumeric(this.thickness)?this.thickness:this.size/14},getValue:function(){return this.value},setValue:function(i){this.animation&&(this.animationStartValue=this.lastFrameValue),this.value=i,this.draw()}},i.circleProgress={defaults:t.prototype},i.easing.circleProgressEasing=function(i,t,e,a,n){return(t/=n/2)<1?a/2*t*t*t+e:a/2*((t-=2)*t*t+2)+e},i.fn.circleProgress=function(e,a){var n="circle-progress",r=this.data(n);if("widget"==e){if(!r)throw Error('Calling "widget" method on not initialized instance is forbidden');return r.canvas}if("value"==e){if(!r)throw Error('Calling "value" method on not initialized instance is forbidden');if("undefined"==typeof a)return r.getValue();var s=arguments[1];return this.each(function(){i(this).data(n).setValue(s)})}return this.each(function(){var a=i(this),r=a.data(n),s=i.isPlainObject(e)?e:{};if(r)r.init(s);else{var l=i.extend({},a.data());"string"==typeof l.fill&&(l.fill=JSON.parse(l.fill)),"string"==typeof l.animation&&(l.animation=JSON.parse(l.animation)),s=i.extend(l,s),s.el=a,r=new t(s),a.data(n,r)}})}});
\ No newline at end of file
diff --git a/static/js/site.js b/static/js/site.js
index 84521fb..e4b3123 100644
--- a/static/js/site.js
+++ b/static/js/site.js
@@ -95,4 +95,4 @@ jQuery.postJSON = function(url, args, callback) {
 			callback(eval("(" + response + ")"));
 		}
 	});
-};
+};
\ No newline at end of file
diff --git a/static/scss/style.scss b/static/scss/style.scss
index 8c51d58..854cb54 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -354,4 +354,21 @@ p.lead {
 	@include media-breakpoint-down(md) {
 		font-size: 1rem;
 	}
+}
+
+.circle {
+	position: relative;
+	p.lead {
+		color: $blue-grey-600;
+		position: absolute;
+		top: calc(50% - 1.25rem);
+		width: 100%;
+	}
+}
+
+.truncate {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index c420810..462bad6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -19,6 +19,9 @@
 		{% if rss_url %}
 			<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ rss_url }}" />
 		{% end %}
+		
+		<script src="{{ static_url("js/jquery.js") }}"></script>
+		<script src="{{ static_url("js/circle-progress.min.js") }}"></script>
 	</head>
 
 	<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
@@ -32,7 +35,7 @@
 					</button>
 					
 					<a class="navbar-brand align-self-center" href="/">
-						<img src="http://static.ipfire:8891/img/ipfire-tux.png" alt="IPFire Tux" height="40px" />
+						<img src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Tux" height="40px" />
 						{% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
 							{{ _("IPFire") }}
 						{% elif hostname in ("planet.ipfire.org", "planet.dev.ipfire.org") %}
@@ -192,7 +195,6 @@
 			</footer>
 		{% end block %}
 
-		<script src="{{ static_url("js/jquery.js") }}"></script>
 		<script src="{{ static_url("js/jquery.easing.js") }}"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
diff --git a/templates/index.html b/templates/index.html
index b726441..c45dc16 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -251,24 +251,48 @@
 			<h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
 			
 			<div class="row pb-5 mb-6">
-				<div class="col-6 col-md-3 text-center">
+				<div class="col-6 col-md-3 mb-6 text-center">
 					<p class="mb-3"><small>Latest Release</small></p>
-					<h4>2.19 Core 109</h4>	
+					<h4 class="pb-5">2.19 Core 109</h4>
+					<div class="r_circle circle mt-5">
+						<p class="lead">48%</p>
+					</div>
+					<script>
+						$('.r_circle').circleProgress({ value: 0.48, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#1976d2"] } });
+					</script>
 				</div>
 				
-				<div class="col-6 col-md-3 text-center">
+				<div class="col-6 col-md-3 mb-6 text-center">
 					<p class="mb-3"><small>Favorite Kernel</small></p>
-					<h4>3.14.79-ipfire-pae</h4>	
+					<h4 class="pb-5 truncate">3.14.79-ipfire-pae</h4>
+					<div class="f_circle circle mt-5">
+						<p class="lead">36%</p>
+					</div>
+					<script>
+						$('.f_circle').circleProgress({ value: 0.36, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#00bcd4"] } });
+					</script>	
 				</div>
 				
 				<div class="col-6 col-md-3 text-center">
 					<p class="mb-3"><small>Favorite CPU</small></p>
-					<h4>Intel</h4>	
+					<h4 class="pb-5">Intel</h4>
+					<div class="c_circle circle mt-5">
+						<p class="lead">71%</p>
+					</div>
+					<script>
+						$('.c_circle').circleProgress({ value: 0.71, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#43a047"] } });
+					</script>	
 				</div>
 				
 				<div class="col-6 col-md-3 text-center">
 					<p class="mb-3"><small>Favorite Virtualisation</small></p>
-					<h4>VMWare</h4>	
+					<h4 class="pb-5">VMWare</h4>
+					<div class="v_circle circle mt-5">
+						<p class="lead">46%</p>
+					</div>
+					<script>
+						$('.v_circle').circleProgress({ value: 0.46, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#ff8f00"] } });
+					</script>	
 				</div>
 			</div>
 			
-- 
2.39.2