From 2b6cbc18b171466901bfdaa12293f3540070d9c9 Mon Sep 17 00:00:00 2001 From: Oliver Giles Date: Sun, 1 Nov 2015 11:24:28 +0100 Subject: [PATCH] spinner+progress --- CMakeLists.txt | 2 +- src/resources.cpp | 1 + src/resources/index.html | 21 ++++++++++++++++ src/resources/js/app.js | 46 ++++++++++++++++++++++-------------- src/resources/progress.png | Bin 0 -> 816 bytes src/resources/tpl/home.html | 2 +- src/resources/tpl/job.html | 5 +++- src/resources/tpl/run.html | 5 +++- 8 files changed, 60 insertions(+), 22 deletions(-) create mode 100644 src/resources/progress.png diff --git a/CMakeLists.txt b/CMakeLists.txt index 782c84c..e119732 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -58,7 +58,7 @@ add_custom_command(OUTPUT laminar.capnp.c++ laminar.capnp.h # Zip and compile statically served resources generate_compressed_bins(${CMAKE_SOURCE_DIR}/src/resources index.html js/app.js tpl/home.html tpl/job.html tpl/run.html tpl/browse.html - favicon.ico favicon-152.png icon.png) + favicon.ico favicon-152.png icon.png progress.png) # Download 3rd-party frontend JS libs... file(DOWNLOAD https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js js/angular.min.js EXPECTED_MD5 b1137641dbb512a60e83d673f7e2d98f) diff --git a/src/resources.cpp b/src/resources.cpp index 692b8e5..ef53463 100644 --- a/src/resources.cpp +++ b/src/resources.cpp @@ -30,6 +30,7 @@ Resources::Resources() INIT_RESOURCE("/", index_html); INIT_RESOURCE("/favicon.ico", favicon_ico); INIT_RESOURCE("/favicon-152.png", favicon_152_png); + INIT_RESOURCE("/progress.png", progress_png); INIT_RESOURCE("/icon.png", icon_png); INIT_RESOURCE("/js/app.js", js_app_js); INIT_RESOURCE("/js/Chart.HorizontalBar.js", js_Chart_HorizontalBar_js); diff --git a/src/resources/index.html b/src/resources/index.html index 4a43146..b761ea0 100644 --- a/src/resources/index.html +++ b/src/resources/index.html @@ -32,8 +32,29 @@ } .progress { height: 10px; + margin-top: 5px; margin-bottom: 0; } + .spin { + -webkit-animation: rotation 2s infinite linear; + } + @-webkit-keyframes rotation { + from {-webkit-transform: rotate(0deg);} + to {-webkit-transform: rotate(359deg);} + } + img.spin.small { + width: 11px; + height: 11px; + } + img.spin { + -webkit-animation:spin 4s linear infinite; + -moz-animation:spin 4s linear infinite; + animation:spin 4s linear infinite; +} +@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } +@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } +@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } + diff --git a/src/resources/js/app.js b/src/resources/js/app.js index 4212b36..94f7c02 100644 --- a/src/resources/js/app.js +++ b/src/resources/js/app.js @@ -59,9 +59,9 @@ angular.module('laminar',['ngRoute','ngSanitize']) $rootScope.title = data.title; // populate jobs $scope.jobsQueued = data.queued; + data.running.forEach($rootScope.updateProgress); $scope.jobsRunning = data.running; $scope.jobsRecent = data.recent; - $scope.$apply(); // setup charts @@ -145,20 +145,8 @@ angular.module('laminar',['ngRoute','ngSanitize']) } } }); - timeUpdater = $interval(function() { - $scope.jobsRunning.forEach(function(o){ - if(o.etc) { - var d = new Date(); - var p = (d.getTime()/1000 - o.started) / (o.etc - o.started); - if(p > 1.2) { - o.overtime = true; - } else if(p >= 1) { - o.progress = 99; - } else { - o.progress = 100 * p; - } - } - }); + var timeUpdater = $interval(function() { + $scope.jobsRunning.forEach($rootScope.updateProgress); }, 1000); $scope.$on('$destroy', function() { $interval.cancel(timeUpdater); @@ -259,7 +247,7 @@ angular.module('laminar',['ngRoute','ngSanitize']) } }); }) -.controller('RunController', function($rootScope, $scope, $routeParams, $ws) { +.controller('RunController', function($rootScope, $scope, $routeParams, $ws, $interval) { $rootScope.bc = { nodes: [{ href: '/', label: 'Home' }, { href: '/jobs', label: 'Jobs' }, @@ -273,6 +261,7 @@ angular.module('laminar',['ngRoute','ngSanitize']) $ws.statusListener({ status: function(data) { $rootScope.title = data.title; + $rootScope.updateProgress(data); $scope.job = data; $scope.$apply(); }, @@ -298,7 +287,13 @@ angular.module('laminar',['ngRoute','ngSanitize']) window.scrollTo(0, document.body.scrollHeight); } }); - + + var timeUpdater = $interval(function() { + $rootScope.updateProgress($scope.job); + }, 1000); + $scope.$on('$destroy', function() { + $interval.cancel(timeUpdater); + }); }) .run(function($rootScope) { angular.extend($rootScope, { @@ -309,11 +304,26 @@ angular.module('laminar',['ngRoute','ngSanitize']) // TODO reimplement when toLocaleDateString() accepts formatting // options on most browsers var d = new Date(1000 * unix); - return d.getHours() + ':' + d.getMinutes() + ' on ' + + var m = d.getMinutes(); + if(m < 10) m = '0' + m; + return d.getHours() + ':' + m + ' on ' + ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()] + ' ' + d.getDate() + '. ' + ['Jan','Feb','Mar','Apr','May','Jun', 'Jul','Aug','Sep', 'Oct','Nov','Dec'][d.getMonth()] + ' ' + d.getFullYear(); + }, + updateProgress: function(o){ + if(o.etc) { + var d = new Date(); + var p = (d.getTime()/1000 - o.started) / (o.etc - o.started); + if(p > 1.2) { + o.overtime = true; + } else if(p >= 1) { + o.progress = 99; + } else { + o.progress = 100 * p; + } + } } }); }); diff --git a/src/resources/progress.png b/src/resources/progress.png new file mode 100644 index 0000000000000000000000000000000000000000..5f548c3bbec0675822783d4bd3bfaa0f4a139b26 GIT binary patch literal 816 zcmV-01JC@4P)uefA`MNgnHCFRwNb@L~29CLbP5B60r~qD4Vl3JxDP)hnDEia7aVN3Ic+hcw2jUn9zv;y^j9|X>eBJs2qloD@bL4Olz*@;W%TZvB?{h}rSr`f`6tr?^Eku# zkF1re8#kPNSsLHP_M@Bn`)zw~pINGuLu)WbuvS>Qq^6^zz4LHEz6)3k%#5oJxZ2pz zc8`B>?D(M@uixlBQ8X&H7V7E}!QDGoCVSajY7VfeNIVO8)7a3~NrmifKJd1?+bpzJ za1KOZMSaaFAD9Y!0s4!oi*Yb}R^pg*zr-RiFyMChaqi!MuW^&7jSX$x| zUh-os7J$$FcCHWT_=F6^OUR86P>ns6JF97vXW7LZNC4a<51} z85pd>zp~`{M>3A3AWi_aRL9nmaq`aZ`(O+Z#ed}|;A=LQ^2cLcx4vaLu(@PjJx<=d zHE2$>&NPh;Z9?_5mKlN%JpPk)>sxjM*Wy?UoB1rCN!KU;L%IYw0_-UB`aJQx9{{job.name}} queued - {{job.name}} #{{job.number}}
+ {{job.name}} #{{job.number}}
diff --git a/src/resources/tpl/job.html b/src/resources/tpl/job.html index 99470e6..87f85e7 100644 --- a/src/resources/tpl/job.html +++ b/src/resources/tpl/job.html @@ -32,7 +32,10 @@ {{nQueued}} run(s) queued - #{{job.number}} progressbar? + #{{job.number}} + {{formatDate(job.started)}} + -- + {{job.reason}} #{{job.number}} diff --git a/src/resources/tpl/run.html b/src/resources/tpl/run.html index c700811..21df207 100644 --- a/src/resources/tpl/run.html +++ b/src/resources/tpl/run.html @@ -1,7 +1,7 @@
-

{{name}} #{{num}}

+

{{name}} #{{num}}

+
+
+
Artifacts