Wrapper for setInterval

- registerInterval sets the interval and stores it for the current locationhash. on navigate() the intervals for the current hash will be cleared.

glob/script.js

@@ -1,3 +1,5 @@
+// -- Variables --
+let intervals = {};
 // -- Functions --
 
 /**
@@ -58,6 +60,7 @@ function toggleActionMenu() {
  * @param title the title of the targtet that is displayed
  */
 function navigate(view, title) {
+    destroyIntervals(window.location.hash);
     if (view !== 'index.htm') window.location.hash = view; // set the hash if the url is not the index.htm
     else window.location.hash = ""; // reset the hash if the hash url is the index.htm
     $('.content').load(view); // load the view into the content class elements
@@ -203,6 +206,30 @@ function hideTooltip() {
     if (tooltip) tooltip.remove(); // delete the element if it does exist
 }
 
+/**
+ * Creates an interval and assigns it to an owner for keeping track
+ * @param func
+ * @param sec
+ * @param owner
+ * @returns {Object} the interval
+ */
+function registerInterval(func, sec, owner) {
+    if (!owner) owner = window.location.hash; // set the owner to the hash if it is not defined
+    if (!intervals[owner]) intervals[owner] = []; // if the entry doesn't exist init it as empty list
+    let interval = setInterval(func, sec); // set the interval
+    intervals[owner].push(interval); // assign the interval to the list
+    return interval; // return the interval
+}
+
+/**
+ * Destroys all intervals of an owner
+ * @param owner
+ */
+function destroyIntervals(owner) {
+    if (!intervals[owner]) return;
+    intervals[owner].forEach((intv) => clearInterval(intv));
+}
+
 // -- Events --
 // Define what happens onLoad
 $(document).ready(function(){

glob/style/elements.sass

@@ -79,6 +79,7 @@
   background: $cPrimary
   color: $cOnPrimary
   width: 20%
+  height: 100%
   ul
     list-style: none
     padding-left: 0
@@ -113,6 +114,8 @@
     text-align: justify
   .panel.max-width
     width: calc(100% - 75px)
+  .panel.half-width
+    width: calc(50% - 77.5px)
   .panel:hover
     background: darken($cPrimary, 4%)
   .panel:active

glob/style/layout.sass

@@ -2,7 +2,7 @@ $sPadding: 12.5px
 
 .app
   width: 100%
-  min-height: 100%
+  height: 100%
   position: absolute
   top: 0
   left: 0
@@ -16,6 +16,8 @@ $sPadding: 12.5px
 
 .content
   flex: 100%
+  overflow: auto
+  height: calc(100vh - 2em - 75px)
   padding: 25px
 
 .row

res/data/sys.json

@@ -1 +1 @@
-{"100perc":[[0,7.592260658628322],[1,10.5375],[2,10.708504544888557],[3,6.638329791223903],[4,7.6230942264433885],[5,7.015130674002751],[6,8.763849122370223],[7,8.952807869505666],[8,13.56121814791796],[9,10.153423974055134],[10,10.926780591243606],[11,6.225826575171553],[12,11.89020586400499],[13,11.692038931869229],[14,8.594237245852563],[15,10.90455396132252],[16,27.02868350085805],[17,12.44228129289904],[18,13.291770573566083],[19,9.575],[20,11.679560768654854],[21,11.670195541163283],[22,19.142821441959263],[23,15.54559043348281],[24,12.289457267623206],[25,12.060613588374116]]}
+{"100perc":[[0,11.679560768654854],[1,13.460578842315368],[2,15.246188452886777],[3,12.640379336161716],[4,13.812429941462199],[5,16.54219566840926],[6,12.078861991514849],[7,11.912186603467632],[8,7.1883189816548105],[9,8.998875140607424],[10,11.888460102078923],[11,12.426845971859047],[12,22.391033623910335],[13,14.020207059997505],[14,19.357660584853786],[15,11.685917915949865],[16,12.731134432783609],[17,12.10302575643911],[18,11.10277569392348],[19,12.86105577689243],[20,12.230663843567068],[21,15.060617422822148],[22,14.219782961207434],[23,7.586723234339905],[24,11.123581493951864],[25,7.223955084217093],[26,9.706686552324136],[27,10.684931506849315],[28,10.15],[29,11.129132875857767],[30,10.925],[31,14.40667413771635],[32,8.388548568571071],[33,22.928828716929576],[34,15.932036444225561],[35,21.684789401324835],[36,20.67631644621912],[37,19.880269393863806],[38,11.3125],[39,22.19178082191781],[40,20.004970178926442],[41,22.27914532050481],[42,24.20907840440165],[43,26.30396805590217],[44,27.641568139390166],[45,10.927731932983246],[46,25.33998752339364],[47,24.579124579124578],[48,17.480687764764514],[49,11.745595401724353],[50,14.023705552089833],[51,27.266028002947678],[52,4.311961004874391],[53,4.8533998752339365],[54,1.762720340042505],[55,5.22835038682306],[56,3.3191914150237083],[57,3.7041656273384884],[58,3.7655860349127184],[59,4.0564153769345985],[60,2.9125],[61,6.238303181534623],[62,8.366533864541832],[63,13.248502994011977],[64,7.412028949338658],[65,7.225],[66,2.5618595351162208],[67,4.2880360045005625],[68,6.660834791302174],[69,5.651902682470368],[70,3.0534351145038165],[71,2.5125],[72,2.5618595351162208],[73,3.925],[74,4.451669376016007],[75,9.367593863041037],[76,20.694826293426644],[77,7.634730538922156],[78,8.5875],[79,10.519091589717993],[80,8.549675486769845],[81,7.646176911544228],[82,2.5250000000000004],[83,5.289421157684631],[84,3.488372093023256],[85,3.312914114264283],[86,0.775],[87,4.93503248375812],[88,4.6563745019920315],[89,5.276319079769943],[90,4.2875000000000005],[91,7.62595324415552],[92,6.424650698602795],[93,10.389291415940072],[94,1.9520851818988465],[95,9.974204643164231],[96,8.184653774173425],[97,8.570359281437126],[98,20.433320881583864],[99,9.357454772301933]]}

res/html/about.htm

@@ -17,7 +17,31 @@
 			seconds (depending on the type of data).
 		</p>
 	</div>
-	<div class="panel max-width">
+	<div class="panel half-width">
+		<span class="title">
+			CPU Temperature
+		</span>
+		<div class="graph" onmouseout="hideTooltip()">
+
+		</div>
+	</div>
+	<div class="panel half-width">
+		<span class="title">
+			CPU Temperature
+		</span>
+		<div class="graph" onmouseout="hideTooltip()">
+
+		</div>
+	</div>
+	<div class="panel half-width">
+		<span class="title">
+			CPU Temperature
+		</span>
+		<div class="graph" onmouseout="hideTooltip()">
+
+		</div>
+	</div>
+	<div class="panel half-width">
 		<span class="title">
 			CPU Temperature
 		</span>

res/scripts/about.js

@@ -1,9 +1,9 @@
 function draw() {
     $.getJSON('sys.json', data =>{
-        let c = document.querySelector('.graph');
-        drawGraph(c, data['100perc'], {yMax: 100, yMin: "0", xUnit: "s", yUnit: "%"});
+        let graphs = document.querySelectorAll('.graph');
+        graphs.forEach(c => drawGraph(c, data['100perc'], {yMax: 100, yMin: "0", xUnit: "s", yUnit: "%"}));
     });
 }
 
 draw();
-let refreshInterval = setInterval(draw, 1000);
+registerInterval(draw, 1000);

res/scripts/data.js

@@ -6,4 +6,4 @@ function draw() {
 }
 
 draw();
-let refreshInterval = setInterval(draw, 1000);
+registerInterval(draw, 1000);