From fef9fcd43836ab12d4d2c178bc76ae79838abf11 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan-sebastian.tuomi@aalto.fi>
Date: Sun, 14 Aug 2016 14:14:24 +0300
Subject: Use angular for the front-end

---
 index.js              | 26 ++++++++++++++++++++++---
 package.json          |  3 ++-
 public/angular.js     |  1 +
 public/angular.min.js |  1 +
 public/client.js      | 16 ++++++++++++++++
 public/graph.js       | 53 ---------------------------------------------------
 views/index.html      | 29 +++++++++++++++++-----------
 7 files changed, 61 insertions(+), 68 deletions(-)
 create mode 120000 public/angular.js
 create mode 120000 public/angular.min.js
 create mode 100644 public/client.js
 delete mode 100644 public/graph.js

diff --git a/index.js b/index.js
index 18efac7..f2f9210 100644
--- a/index.js
+++ b/index.js
@@ -20,16 +20,36 @@ statuscake
   .username(username)
   .key(password);
  
+var currentStatus = {};
+
 app.get("/", function(req, res) {
     res.render("index.html");
 });
 
+app.get("/status", function(req, res) {
+    res.json(currentStatus);
+});
+
 app.listen(3000, function() {
     console.log("radiodiodi status display listening on port 3000.");
 });
 
-function allTests(err, data) {
-    console.log(data);
+
+function get_status(err, data) {
+    currentStatus = [];
+    for (var i = 0; i < data.length; i++) {
+        var is_up = data[i].Status == 'Up';
+
+        var system = {}
+        system.name = data[i].WebsiteName;
+        system.status = is_up;
+        system.uptime = data[i].Uptime;
+        currentStatus.push(system);
+    }
+
+    console.log(currentStatus);
 }
 
-statuscake.tests(allTests);
+setInterval(function() {
+    statuscake.tests(get_status);
+}, 5000);
diff --git a/package.json b/package.json
index b87e71d..de0a3e2 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "statuscake": "0.1.3",
     "d3": "4.2.1",
     "express": "4.14.0",
-    "ejs": "2.5.1"
+    "ejs": "2.5.1",
+    "angular": "1.5.8"
   }
 }
diff --git a/public/angular.js b/public/angular.js
new file mode 120000
index 0000000..c0f0720
--- /dev/null
+++ b/public/angular.js
@@ -0,0 +1 @@
+../node_modules/angular/angular.js
\ No newline at end of file
diff --git a/public/angular.min.js b/public/angular.min.js
new file mode 120000
index 0000000..fce2e99
--- /dev/null
+++ b/public/angular.min.js
@@ -0,0 +1 @@
+../node_modules/angular/angular.min.js
\ No newline at end of file
diff --git a/public/client.js b/public/client.js
new file mode 100644
index 0000000..193683d
--- /dev/null
+++ b/public/client.js
@@ -0,0 +1,16 @@
+var statusapp = angular.module('status-app', []);
+
+statusapp.controller('status-controller', ['$scope', '$http', function status_controller($scope, $http) {
+    $scope.systems = [];
+
+    setInterval(function() {
+        $http({
+            method: "GET",
+            url: "/status"
+        }).then(function successCallback(response) {
+            $scope.systems = response.data;
+        }, function errorCallback(response) {
+
+        });
+    }, 5000);
+}]);
diff --git a/public/graph.js b/public/graph.js
deleted file mode 100644
index 11ed599..0000000
--- a/public/graph.js
+++ /dev/null
@@ -1,53 +0,0 @@
-var n = 40,
-    random = d3.randomNormal(0, .2),
-    data = d3.range(n).map(random);
-var svg = d3.select("svg"),
-    margin = {top: 20, right: 20, bottom: 20, left: 40},
-    width = +svg.attr("width") - margin.left - margin.right,
-    height = +svg.attr("height") - margin.top - margin.bottom,
-    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-var x = d3.scaleLinear()
-    .domain([0, n - 1])
-    .range([0, width]);
-var y = d3.scaleLinear()
-    .domain([-1, 1])
-    .range([height, 0]);
-var line = d3.line()
-    .x(function(d, i) { return x(i); })
-    .y(function(d, i) { return y(d); });
-g.append("defs").append("clipPath")
-    .attr("id", "clip")
-  .append("rect")
-    .attr("width", width)
-    .attr("height", height);
-g.append("g")
-    .attr("class", "axis axis--x")
-    .attr("transform", "translate(0," + y(0) + ")")
-    .call(d3.axisBottom(x));
-g.append("g")
-    .attr("class", "axis axis--y")
-    .call(d3.axisLeft(y));
-g.append("g")
-    .attr("clip-path", "url(#clip)")
-  .append("path")
-    .datum(data)
-    .attr("class", "line")
-  .transition()
-    .duration(500)
-    .ease(d3.easeLinear)
-    .on("start", tick);
-function tick() {
-  // Push a new data point onto the back.
-  data.push(random());
-  // Redraw the line.
-  d3.select(this)
-      .attr("d", line)
-      .attr("transform", null);
-  // Slide it to the left.
-  d3.active(this)
-      .attr("transform", "translate(" + x(-1) + ",0)")
-    .transition()
-      .on("start", tick);
-  // Pop the old data point off the front.
-  data.shift();
-}
diff --git a/views/index.html b/views/index.html
index 3583d02..e0798b0 100644
--- a/views/index.html
+++ b/views/index.html
@@ -1,12 +1,19 @@
 <!DOCTYPE html>
-<meta charset="utf-8">
-<style>
-.line {
-  fill: none;
-  stroke: #000;
-  stroke-width: 1.5px;
-}
-</style>
-<svg width="960" height="500"></svg>
-<script src="//d3js.org/d3.v4.min.js"></script>
-<script src="graph.js"></script>
+<html ng-app="status-app">
+
+<head>
+    <meta charset="utf-8">
+    <title>Radiodiodi system status</title>
+    <script src="angular.min.js"></script>
+    <script src="client.js"></script>
+</head>
+<body ng-controller="status-controller">
+
+<ul>
+    <li ng-repeat="system in systems">
+        {{ system }}
+    </li>
+</ul>
+
+</body>
+</html>
-- 
cgit v1.3