-

app/app.config.js

@@ -119,6 +119,9 @@ config(['$locationProvider', '$routeProvider',
         when('/groundplanes', {
             template: '<groundplanes></groundplanes>'
         }).
+        when('/cachedhist/:elemId', {
+            template: '<cachedhist></cachedhist>'
+        }).
         otherwise('/');
     }
 ]);
\ No newline at end of file

app/app.module.js

@@ -39,5 +39,6 @@ angular.module('ng04SlowControlApp', [
     'pipes',
     'beamplug',
     'gaugehist',
-    'groundplanes'
+    'groundplanes',
+    'cachedhist'
 ]);
\ No newline at end of file

app/cachedhist/cachedhist.component.js

+'use strict';
+angular.module('cachedhist', []).component('cachedhist', {
+    templateUrl: 'cachedhist/cachedhist.template.html',
+    controller: ['$routeParams', '$scope', '$window', '$http', '$interval',
+        function cachedhistController($routeParams, $scope, $window, $http, $interval) {
+            this.elemId = $routeParams.elemId;
+            if ($routeParams.days != null) {
+                console.log(this.days);
+                this.days = $routeParams.days;
+            } else {
+                this.days = 0.33;
+            }
+            this.pageTitle = this.elemId;
+            this.natalie = 1;
+            this.width = 90;
+            this.respdata = [];
+            let self = this;
+            let fundays = this.days;
+
+            this.dayChanger = function (funcdays) {
+                $window.location.href = "#!/cachedhist/" + this.elemId + "/" + funcdays;
+            };
+
+            console.log(fundays);
+            this.reload = function () {
+                $interval.cancel;
+                //$window.location.reload();
+                //};
+
+                $http.get("php-db-conn/cachehist.conn.php?elemId=" + self.elemId).then(function onSuccess(response) {
+                    //if (response != undefined && typeof response == "object") {
+                    let title = self.elemId;
+                    console.log("interval occured");
+
+                    console.log(response.data.records);
+
+                    //self.PlotData.push(self.values);
+                    //self.PlotCat.push(self.labels);
+
+                    if (self.elemId === "NP04_DCS_01_Heinz_I" || self.elemId === "NP04_DCS_01_Heinz_V_Cathode." || self.elemId === "NP04_DCS_01_Heinz_V_Raw") {
+                        Highcharts.chart('container', {
+
+                            chart: {
+                                zoomType: 'xy'
+                            },
+
+                            time: {
+                                useUTC: false
+                            },
+
+                            title: {
+                                text: self.elemId
+                            },
+
+                            tooltip: {
+                                valueDecimals: 5
+                            },
+
+                            xAxis: {
+                                type: 'datetime'
+                            },
+
+                            series: [{
+                                data: response.data.records,
+                                type: 'line',
+                                lineWidth: 1.0,
+                                tooltip: {
+                                    valueDecimals: 5
+                                },
+                                name: 'Values',
+                                color: '#ff0000'
+                            }]
+
+                        });
+                    } else {
+                        Highcharts.stockChart('container', {
+
+                            chart: {
+                                zoomType: 'xy'
+                            },
+
+                            rangeSelector: {
+                                allButtonsEnabled: true,
+                                buttons: [{
+                                    count: 1,
+                                    type: 'hour',
+                                    text: '1 hour'
+                                }, {
+                                    count: 6,
+                                    type: 'hour',
+                                    text: '6 hours'
+                                }, {
+                                    count: 12,
+                                    type: 'hour',
+                                    text: '12 hours'
+                                }, {
+                                    count: 1,
+                                    type: 'day',
+                                    text: '1 day'
+                                }, {
+                                    count: 3,
+                                    type: 'day',
+                                    text: '3 days'
+                                }, {
+                                    count: 7,
+                                    type: 'day',
+                                    text: '7 days'
+                                }],
+                                buttonTheme: {
+                                    width: 60
+                                },
+                                selected: 3
+                            },
+
+                            time: {
+                                useUTC: false
+                            },
+
+                            title: {
+                                text: self.elemId
+                            },
+
+                            scrollbar: {
+                                enabled: false
+                            },
+
+                            navigator: {
+                                enabled: false
+                            },
+
+                            tooltip: {
+                                valueDecimals: 5
+                            },
+
+                            xAxis: {
+                                type: 'datetime'
+                            },
+
+                            series: [{
+                                data: response.data.records,
+                                lineWidth: 1.0,
+                                name: 'Values',
+                                color: '#ff0000'
+                            }]
+
+                        });
+                    }
+
+                    //self.respdata = response.data.records;
+                    //for (let i = 0; i < self.respdata.length; i++) {
+                    //self.respdata[i][0] = moment.unix(self.respdata[i][0]/1000).format('DD/MM/YYYY HH:mm:ss');
+                    //}
+
+
+                    //} else {
+                    //self.dayChanger(3);
+                    //}
+                }).catch(function onError(data) {
+                    console.log(data);
+                });
+            };
+
+            this.promise;
+
+            this.reload();
+
+            $scope.start = function() {
+                $scope.stop();
+                if (self.days < 2) {
+                    self.promise = $interval(self.reload, 60000);
+                } else {
+                    self.promise = $interval(self.reload, 300000);
+                }
+            };
+
+            $scope.stop = function() {
+                $interval.cancel(self.promise);
+            };
+            $scope.start();
+
+            $scope.$on('$destroy', function() {
+                $scope.stop();
+            });
+        }
+    ]
+});
\ No newline at end of file

app/cachedhist/cachedhist.component.spec.js

+describe('cachedhist', function() {
+    var $scope;
+    var controller;
+    // Load the module that contains the `phoneList` component before each test
+    beforeEach(function() {
+        module('cachedhist')
+        // Test the controller
+        inject(function(_$rootScope_, $controller) {
+
+            $scope = _$rootScope_.$new();
+            controller = $controller("cachedhist", {$scope: $scope});
+
+        });
+        describe('cachedhistController', function() {
+
+            it('should create a `cachedhist` model with 1 natalie', inject(function($componentController) {
+                let ctrl = $componentController('cachedhist');
+
+                expect(ctrl.natalie).toBe(1);
+            }));
+
+        })
+    });
+    ;
+
+});
\ No newline at end of file

app/cachedhist/cachedhist.module.js

+'use strict';
+angular.module('cachedhist', [
+    'ngRoute',
+    'ngSanitize'
+]);
\ No newline at end of file

app/cachedhist/cachedhist.template.html

+<style type="text/css">
+    #container {
+        width: 90vw;
+        height: 90vh;
+    }
+</style>
+
+<div id="timespan" style="position: absolute; left: 10%; top: 1%;">
+    <span id="historyLabel" style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 18px; color: white">History for:</span>
+    <br/>
+    <button id="1hour" type="button" ng-click="$ctrl.dayChanger(0.125)">1 hour</button>
+    <button id="6hours" type="button" ng-click="$ctrl.dayChanger(0.33)">6 hours</button>
+    <button id="12hours" type="button" ng-click="$ctrl.dayChanger(0.58)">12 hours</button>
+    <button id="1day" type="button" ng-click="$ctrl.dayChanger(1.08)">1 day</button>
+    <button id="3days" type="button" ng-click="$ctrl.dayChanger(3.08)">3 days</button>
+    <button id="7days" type="button" ng-click="$ctrl.dayChanger(7.08)">7 days</button>
+    <button id="10days" type="button" ng-click="$ctrl.dayChanger(10.08)">10 days</button>
+    <!--button id="reset-zoom" type="button" ng-click="$ctrl.chart.resetZoom()">Reset zoom</button-->
+
+</div>
+
+<div id="container">Placeholder for chart</div>
+
+
+<button class="btn" title="Click to show/hide data" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide data</button>
+<span id="spoiler" style="display: none;"><table style="font-family: 'Arial Black', Gadget, sans-serif">
+    <th>Timestamp</th>
+    <th>Exact value</th>
+    <tr ng-repeat="i in $ctrl.respdata">
+        <td>{{i[0]}}</td>
+        <td align="right" style="color: lime; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;">{{i[1] | number: 2}}</td>
+    </tr>
+</table></span>
+

app/groundplanes/groundplanes.template.html

@@ -24,7 +24,7 @@
             <tr>
                 <td>Channel 7 - DN-DS-BR: <a target="_blank" ng-href="#!/histogram/NP04_DCS_01_GroundPlanes_Ch07"><span class="value">{{ $ctrl.NP04_DCS_01_GroundPlanes_Ch07 | number: 5 }} V</span></a></td>
                 <td>Channel 8 - DN-DS-DL: <a target="_blank" ng-href="#!/histogram/NP04_DCS_01_GroundPlanes_Ch08"><span class="value">{{ $ctrl.NP04_DCS_01_GroundPlanes_Ch08 | number: 5 }} V</span></a></td>
-                <td>Voltage Raw: <a target="_blank" ng-href="#!/histogram/NP04_DCS_01_Heinz_V_Raw/1"><span class="value">{{ $ctrl.NP04_DCS_01_Heinz_V_Raw | number: 5}} V</span></a></td>
+                <td>Voltage Raw: <a target="_blank" ng-href="#!/cachedhist/48001913454874"><span class="value">{{ $ctrl.NP04_DCS_01_Heinz_V_Raw | number: 5}} V</span></a></td>
             </tr>
             <tr>
                 <td>Channel 9 - DN-MS-BR: <a target="_blank" ng-href="#!/histogram/NP04_DCS_01_GroundPlanes_Ch09"><span class="value">{{ $ctrl.NP04_DCS_01_GroundPlanes_Ch09 | number: 5 }} V</span></a></td>

app/index.html

@@ -94,6 +94,8 @@
     <script src="gaugehist/gaugehist.component.js"></script>
     <script src="groundplanes/groundplanes.module.js"></script>
     <script src="groundplanes/groundplanes.component.js"></script>
+    <script src="cachedhist/cachedhist.module.js"></script>
+    <script src="cachedhist/cachedhist.component.js"></script>
     <!-- Piwik -->
     <script type="text/javascript">
         var pkBaseURL = (("https:" == document.location.protocol) ? "https://piwik.web.cern.ch/" : "http://piwik.web.cern.ch/");

app/php-db-conn/cachehist.conn.php

@@ -5,13 +5,15 @@
     ini_set('error_reporting', E_ALL);
     ini_set('display_errors', true);
 
+    $elemId = $_GET["elemId"];
+
     $week = date( strtotime('-7 days') );
     //echo $week;
     $data = array();
 
     for ($i = $week; $i < date(strtotime('-3 days')); $i+=86400) {
         echo $i . "\n";
-        $json = file_get_contents('http://epdtdi-vm-01.cern.ch:5000/day/'. date('Y-m-d', $i) .'/48001913454874');
+        $json = file_get_contents('http://epdtdi-vm-01.cern.ch:5000/day/'. date('Y-m-d', $i) .'/'.$elemId);
         array_push($data, json_decode($json));
     }