From 576dac3aff48dad5cbef509c887d5430af439ed8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sun, 3 Jan 2021 19:06:55 +0000 Subject: [PATCH] Adding favicon animation and color codes --- front/src/img/favicon-fail.png | Bin 0 -> 764 bytes front/src/img/favicon-success.png | Bin 0 -> 719 bytes front/src/js/controllers/queueCtrl.js | 52 +++++++++++++++++++++++++- front/src/views/queue.html | 3 +- 4 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 front/src/img/favicon-fail.png create mode 100644 front/src/img/favicon-success.png diff --git a/front/src/img/favicon-fail.png b/front/src/img/favicon-fail.png new file mode 100644 index 0000000000000000000000000000000000000000..faeba8fabca5647c48d4982d97f99e10852b4f8c GIT binary patch literal 764 zcmVA$t%sF#r&Wu_n6&aC1C?V9sA~h0-!_Oa~i8QKkL|fGjnj9?wGEc_0t6NCb_R zsgJ(^m~dE<4S4_L)gO(G#ipE~0dyPucBuv!m^1Xa%xkCwSa3BWSEJ(6zK%wwEE zf<9T2h5I<~#qQE%r({Y-q8MO6t7K0QA13%j!xNSA_`Av-qLUa`nTVDm6u0Y@OrInX zQEyP}aSg1fl;*%YHD8OpSCc&wyFqQyOG(p)-Lne|x+Qg;AGVgw3LhoKIK%3~_8h=MPfMaj-NjkYYpbRXNoszBngg^+_BiostOGWBig>f+ ziUAH>Bvz-DL+USq^_o3K!Y%@INP4TLs+Qj#~g| zDBrCXA#2{Sn*qEb_zwYbj4yvmcm{Br=#*3(e+$wy@==113FntHoN+a}WX%PMb>KFT uvldlrt^~#~pAzoHnbMiYRM0AxLcakt!t_J!(XvVa0000#srKQk<6s+{& z1G*~}TiY(IlX+-noJ{WNqBE4}B%wO)`jJiU$^Cx!o|~K#8p`Hzm5POj`5HMn^0a`- zb(lL$M|^QWV_Y2GqaXufT)(e+UW5T;I(;)Ne2n-HG&AI-ky>MGlY6#V-$VTt>3ire zD07Rc7PiEQ9ndefUb1tWPKPM5uC(tAz`a4Gd8z&6o>wY-Isg&*#3l6~&<%hjHtEc( zN(?p$lDYtBj!=CJ=2yfjt&vy-=056UXpUSS5U1j@V2R`tMb*|WsLH7|#RA1;fp`QX z0^rODXB3HD81H;J(%*C9Bb-q+J4V6i_Oy%HW>2T(Of*^ZQ!0Mc+&HyJboMH6tvau0S&f+^NxxvmboP1}i4x?&->^YLB zNIq0>!)iSMc<6iV#j0e_ks9c*iF5rxqI_4Lj8XCpjJJw4;&{Y`21E?i2@(bwTMYk_ z&h`U$R8*!2fISU+T1G72ugVlz>q7hF%c?&`Iu%z%PzR2br=hqip!*W#130t7$zIUC z<&cFl>+}43qXy_`KDu~C>S*3~+HC-#yd;~6%lo65KzT``jc5V9L2;bxg8LsG=im(r zAD}itO{;5wriI!a@&Ua5uDQ1iQ}6-epAq=~_U|Hw)-J#;fbl^Y2VDc0`!F}#?QbZX zZw*^ios;z(PSa2q`qqRCy$F39z0W-=od;ZvegkE&@gu?E0p|b!002ovPDHLkV1lW! BP^bU^ literal 0 HcmV?d00001 diff --git a/front/src/js/controllers/queueCtrl.js b/front/src/js/controllers/queueCtrl.js index f62775d..4c61d2d 100644 --- a/front/src/js/controllers/queueCtrl.js +++ b/front/src/js/controllers/queueCtrl.js @@ -5,6 +5,16 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs' var numberOfTries = 0; + var favicon = document.querySelector('link[rel=icon]'); + var faviconUrl = 'img/favicon.png'; + var faviconSuccessUrl = 'img/favicon-success.png'; + var faviconFailUrl = 'img/favicon-fail.png'; + var faviconInterval = null; + var faviconCounter = 0; + var faviconCanvas = null; + var faviconCanvasContext = null; + var faviconImage = null; + function getRunStatus () { Runs.get({runId: $scope.runId}, function(data) { $scope.url = data.params.url; @@ -15,23 +25,30 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs' if (data.status.statusCode === 'awaiting') { numberOfTries ++; + rotateFavicon(); // Retrying every 2 seconds (and increasing the delay a bit more each time) setTimeout(getRunStatus, 2000 + (numberOfTries * 100)); } else if (data.status.statusCode === 'running') { numberOfTries ++; + rotateFavicon(); // Retrying every second or so setTimeout(getRunStatus, 1000 + (numberOfTries * 10)); } else if (data.status.statusCode === 'complete') { + stopFavicon(true); + $location.path('/result/' + $scope.runId).replace(); } else { - // Handled by the view + stopFavicon(false); + + // The rest is handled by the view } }, function(response) { if (response.status === 404) { + stopFavicon(false); $scope.notFound = true; $scope.connectionLost = false; } else if (response.status === 0) { @@ -42,6 +59,39 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs' } }); } + + function rotateFavicon() { + if (!faviconInterval) { + faviconImage = new Image(); + faviconImage.onload = function() { + faviconCanvas = document.getElementById('faviconRotator'); + faviconCanvasContext = faviconCanvas.getContext('2d'); + faviconCanvasContext.fillStyle = '#212240'; + + if (!!faviconCanvasContext) { + faviconInterval = window.setInterval(faviconTick, 1000); + } + }; + faviconImage.src = faviconUrl; + } + } + + function faviconTick() { + faviconCounter ++; + faviconCanvasContext.save(); + faviconCanvasContext.fillRect(0, 0, 32, 32); + faviconCanvasContext.translate(16, 16); + faviconCanvasContext.rotate(45 * faviconCounter * Math.PI / 180); + faviconCanvasContext.translate(-16, -16); + faviconCanvasContext.drawImage(faviconImage, 0, 0, 32, 32); + faviconCanvasContext.restore(); + favicon.href = faviconCanvas.toDataURL('image/png'); + } + + function stopFavicon(isSuccess) { + window.clearInterval(faviconInterval); + favicon.href = isSuccess ? faviconSuccessUrl : faviconFailUrl; + } getRunStatus(); }]); diff --git a/front/src/views/queue.html b/front/src/views/queue.html index e86b249..d628768 100644 --- a/front/src/views/queue.html +++ b/front/src/views/queue.html @@ -42,4 +42,5 @@
Connection lost with server

Check your wifi cable, or maybe YellowLab.tools is rebooting.

-
\ No newline at end of file + + \ No newline at end of file