diff options
| author | Jan Tuomi <jan-sebastian.tuomi@aalto.fi> | 2016-08-14 14:40:53 +0300 |
|---|---|---|
| committer | Jan Tuomi <jan-sebastian.tuomi@aalto.fi> | 2016-08-14 14:40:53 +0300 |
| commit | d84a59f489b7994630a1c4c94befcc7d63f08f6c (patch) | |
| tree | 7aa861fb815fa6e493329035277243c62753e5a8 | |
| parent | fef9fcd43836ab12d4d2c178bc76ae79838abf11 (diff) | |
Add styles
| -rw-r--r-- | public/client.js | 7 | ||||
| -rw-r--r-- | public/style.css | 30 | ||||
| -rw-r--r-- | views/index.html | 14 |
3 files changed, 44 insertions, 7 deletions
diff --git a/public/client.js b/public/client.js index 193683d..4b946f5 100644 --- a/public/client.js +++ b/public/client.js @@ -3,7 +3,7 @@ var statusapp = angular.module('status-app', []); statusapp.controller('status-controller', ['$scope', '$http', function status_controller($scope, $http) { $scope.systems = []; - setInterval(function() { + var update = function() { $http({ method: "GET", url: "/status" @@ -12,5 +12,8 @@ statusapp.controller('status-controller', ['$scope', '$http', function status_co }, function errorCallback(response) { }); - }, 5000); + }; + + setInterval(update, 5000); + update(); }]); diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..9983bea --- /dev/null +++ b/public/style.css @@ -0,0 +1,30 @@ +body { + text-align: center; + font-family: 'Lato', sans-serif; + font-weight: 400; + font-style: italic; +} + +div { + margin: 10px; + border-radius: 10px; + padding: 3px; +} + +h1, h2, h3 { + margin: 5px; + font-weight: 300; + font-style: normal; +} + +h1 { + font-size: 40px; +} + +.good-system { + background-color: rgba(10, 200, 10, 0.9); +} + +.bad-system { + background-color: rgba(200, 10, 10, 0.9); +} diff --git a/views/index.html b/views/index.html index e0798b0..fe2e79d 100644 --- a/views/index.html +++ b/views/index.html @@ -3,17 +3,21 @@ <head> <meta charset="utf-8"> + <link href='https://fonts.googleapis.com/css?family=Lato:300,400italic' rel='stylesheet' type='text/css'> <title>Radiodiodi system status</title> <script src="angular.min.js"></script> <script src="client.js"></script> + <link rel="stylesheet" href="style.css" /> </head> <body ng-controller="status-controller"> -<ul> - <li ng-repeat="system in systems"> - {{ system }} - </li> -</ul> + <div ng-repeat="system in systems" ng-class="system.status ? 'good-system' : 'bad-system'"> + <h1> + {{ system.name }} + </h1> + <h3>{{ system.status ? "UP" : "DOWN" }}</h3> + <h3>Uptime: {{ system.uptime }}%</h3> + </div> </body> </html> |