From 8702db568cabde1cb28c18ab4c34fc7d0d12ccc4 Mon Sep 17 00:00:00 2001 From: Pierre-Olivier Mercier Date: Sat, 1 Dec 2018 16:14:34 +0100 Subject: [PATCH] frontend: rework refresh loop --- frontend/static/index.html | 2 +- frontend/static/js/challenge.js | 262 +++++++++++++++++++------------- 2 files changed, 160 insertions(+), 104 deletions(-) diff --git a/frontend/static/index.html b/frontend/static/index.html index dc2fbfec..a664f1de 100644 --- a/frontend/static/index.html +++ b/frontend/static/index.html @@ -16,7 +16,7 @@ -
+
diff --git a/frontend/static/js/challenge.js b/frontend/static/js/challenge.js index 42a2a31b..02e5c0e6 100644 --- a/frontend/static/js/challenge.js +++ b/frontend/static/js/challenge.js @@ -42,65 +42,70 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"]) }); $locationProvider.html5Mode(true); }) - .run(function($rootScope, $interval) { + .run(function($rootScope) { $rootScope.current_theme = 0; $rootScope.current_exercice = 0; $rootScope.current_tag = undefined; - $rootScope.time = {}; + }) + .controller("CountdownController", function($scope, $rootScope, $interval) { + var time; + if (sessionStorage.userService) + time = angular.fromJson(sessionStorage.userService); + + $scope.time = {}; $rootScope.recvTime = function(response) { - sessionStorage.userService = angular.toJson({ + time = { "cu": Math.floor(response.headers("x-fic-time") * 1000), "he": (new Date()).getTime(), - }); + }; + sessionStorage.userService = angular.toJson(time); } function updTime() { - if (sessionStorage.userService && $rootScope.settings) { - var time = angular.fromJson(sessionStorage.userService); - var settings = $rootScope.settings; + if (time && $rootScope.settings) { var srv_cur = new Date(Date.now() + (time.cu - time.he)); - if (Math.floor(settings.start / 1000) == Math.floor(srv_cur / 1000)) { + // Refresh on start time reached + if (Math.floor($rootScope.settings.start / 1000) == Math.floor(srv_cur / 1000)) $rootScope.refresh(true); - } var remain = 0; - if (settings.start == 0) { - $rootScope.time = {}; + if ($rootScope.settings.start == 0) { + $scope.time = {}; return - } else if (settings.start > srv_cur) { - $rootScope.startIn = Math.floor((settings.start - srv_cur) / 1000); - remain = settings.end - settings.start; - } else if (settings.end > srv_cur) { + } else if ($rootScope.settings.start > srv_cur) { + $rootScope.startIn = Math.floor(($rootScope.settings.start - srv_cur) / 1000); + remain = $rootScope.settings.end - $rootScope.settings.start; + } else if ($rootScope.settings.end > srv_cur) { $rootScope.startIn = 0; - remain = settings.end - srv_cur; + remain = $rootScope.settings.end - srv_cur; } remain = remain / 1000; if (remain < 0) { remain = 0; - $rootScope.time.end = true; - $rootScope.time.expired = true; + $scope.time.end = true; + $scope.time.expired = true; } else if (remain < 60) { - $rootScope.time.end = false; - $rootScope.time.expired = true; + $scope.time.end = false; + $scope.time.expired = true; } else { - $rootScope.time.end = false; - $rootScope.time.expired = false; + $scope.time.end = false; + $scope.time.expired = false; } - $rootScope.time.remaining = remain; - $rootScope.time.hours = Math.floor(remain / 3600); - $rootScope.time.minutes = Math.floor((remain % 3600) / 60); - $rootScope.time.seconds = Math.floor(remain % 60); + $scope.time.remaining = remain; + $scope.time.hours = Math.floor(remain / 3600); + $scope.time.minutes = Math.floor((remain % 3600) / 60); + $scope.time.seconds = Math.floor(remain % 60); } } updTime(); $interval(updTime, 1000); }) - .controller("DataController", function($sce, $scope, $http, $rootScope, $timeout, $location) { + .controller("DataController", function($sce, $scope, $http, $rootScope, $interval, $location) { var actMenu = function() { if ($scope.my && $scope.themes) { var tags = {}; @@ -128,54 +133,98 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"]) $scope.tags = tags; } } - $rootScope.refresh = function(justMy) { - if (!justMy) { - $timeout.cancel($scope.cbr); - $scope.cbr = $timeout($rootScope.refresh, 42000); - $http.get("/settings.json").then(function(response) { - $rootScope.recvTime(response); - response.data.start = new Date(response.data.start); - response.data.end = new Date(response.data.end); - response.data.generation = new Date(response.data.generation); - $rootScope.settings = response.data; - }); - $http.get("/themes.json").then(function(response) { - $scope.themes = response.data; - $scope.max_gain = 0; - $scope.max_solved = 0; - $scope.themesUrl = {}; - $scope.exercicesUrl = {}; - angular.forEach(response.data, function(theme, key) { - $scope.themesUrl[theme.urlid] = key; - this[key].exercice_count = Object.keys(theme.exercices).length; - this[key].exercice_coeff_max = 0; - this[key].gain = 0; - this[key].solved = 0; - angular.forEach(theme.exercices, function(ex, k) { - $scope.exercicesUrl[ex.urlid] = k; - this.gain += ex.gain; - this.solved += ex.solved; - this.exercice_coeff_max = Math.max(this.exercice_coeff_max, ex.curcoeff); - }, theme); - $scope.max_gain += theme.gain; - $scope.max_solved = Math.max($scope.max_solved, theme.solved); - }, response.data); - actMenu(); - }); - $http.get("/teams.json").then(function(response) { - var teams = response.data; - $scope.teams_count = Object.keys(teams).length - $scope.teams = teams; - $scope.rank = []; - angular.forEach($scope.teams, function(team, tid) { - team.id = tid; - this.push(team); - }, $scope.rank); - }); - } + var refreshSettingsInterval + var refreshSettings = function() { + if (refreshSettingsInterval) + $interval.cancel(refreshSettingsInterval); + refreshSettingsInterval = $interval(refreshSettings, Math.floor(Math.random() * 24000) + 32000); + + $http.get("/settings.json").then(function(response) { + $rootScope.recvTime(response); + response.data.start = new Date(response.data.start); + response.data.end = new Date(response.data.end); + response.data.generation = new Date(response.data.generation); + $rootScope.settings = response.data; + }); + } + + var refreshThemesInterval + var refreshThemes = function() { + if (refreshThemesInterval) + $interval.cancel(refreshThemesInterval); + refreshThemesInterval = $interval(refreshThemes, Math.floor(Math.random() * 24000) + 32000); + + $http.get("/themes.json").then(function(response) { + $scope.themes = response.data; + $scope.max_gain = 0; + $scope.max_solved = 0; + $scope.themesUrl = {}; + $scope.exercicesUrl = {}; + angular.forEach(response.data, function(theme, key) { + $scope.themesUrl[theme.urlid] = key; + this[key].exercice_count = Object.keys(theme.exercices).length; + this[key].exercice_coeff_max = 0; + this[key].gain = 0; + this[key].solved = 0; + angular.forEach(theme.exercices, function(ex, k) { + $scope.exercicesUrl[ex.urlid] = k; + this.gain += ex.gain; + this.solved += ex.solved; + this.exercice_coeff_max = Math.max(this.exercice_coeff_max, ex.curcoeff); + }, theme); + $scope.max_gain += theme.gain; + $scope.max_solved = Math.max($scope.max_solved, theme.solved); + }, response.data); + actMenu(); + }); + } + + var refreshTeamsInterval; + $rootScope.refreshTeams = function() { + if (refreshTeamsInterval) + $interval.cancel(refreshTeamsInterval); + refreshTeamsInterval = $interval($rootScope.refreshTeams, Math.floor(Math.random() * 24000) + 32000); + + $http.get("/teams.json").then(function(response) { + var teams = response.data; + $scope.teams_count = Object.keys(teams).length + $scope.teams = teams; + + $scope.rank = []; + angular.forEach($scope.teams, function(team, tid) { + team.id = tid; + this.push(team); + }, $scope.rank); + }); + } + + var refreshMyInterval; + var refreshMy = function() { + if (refreshMyInterval) + $interval.cancel(refreshMyInterval); + refreshMyInterval = $interval(refreshMy, Math.floor(Math.random() * 24000) + 24000); + $http.get("/my.json").then(function(response) { - $scope.my = response.data; + if (response.data.team_id == 0) { + angular.forEach(response.data.exercices, function(exercice, eid) { + angular.forEach(exercice.hints, function(hint, hid) { + if ($scope.my && $scope.my.exercices[eid] && $scope.my.exercices[eid].hints[hid] && $scope.my.exercices[eid].hints[hid].hidden !== undefined) + response.data.exercices[eid].hints[hid].hidden = $scope.my.exercices[eid].hints[hid].hidden; + else + response.data.exercices[eid].hints[hid].hidden = true; + }); + }); + } + $rootScope.recvMy(response.data); + }, function(response) { + if (!$scope.my && response.status == 404) { + $location.url("/register"); + } + }); + } + $rootScope.recvMy = function(data) { + $scope.my = data; angular.forEach($scope.my.exercices, function(exercice, eid) { exercice.solved = exercice.solved_rank > 0; if (exercice.video_uri) { @@ -183,19 +232,15 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"]) } }); actMenu(); - if ($scope.my.team_id == 0) { - angular.forEach($scope.my.exercices, function(exercice, eid) { - angular.forEach(exercice.hints, function(hint, hid) { - $scope.my.exercices[eid].hints[hid].hidden = true; - }); - }); - } - }, function(response) { - if (!$scope.my && response.status == 404) { - $location.url("/register"); - } - }); - console.log("refresh!"); + } + + $rootScope.refresh = function(justMy) { + if (!justMy) { + refreshSettings(); + refreshThemes(); + $rootScope.refreshTeams(); + } + refreshMy(); } $rootScope.refresh(); }) @@ -219,27 +264,29 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"]) $rootScope.current_exercice = 0; } + var cbh; $scope.hsubmit = function(hint) { hint.submitted = true; $scope.hinterror = null; - $http({ url: "/openhint/" + $rootScope.current_exercice, method: "POST", data: { id: hint.id } }).then(function(response, status, header, config) { + $http({ url: "/openhint/" + $rootScope.current_exercice, method: "POST", data: { id: hint.id } }).then(function(response) { var checkDiffHint = function() { $http.get("/my.json").then(function(response) { var my = response.data; angular.forEach(my.exercices[$rootScope.current_exercice].hints, function(h,hid){ if (hint.id == h.id) { if (hint.content != h.content) { - $rootScope.refresh(); + $rootScope.recvMy(my); } else { - $timeout.cancel($scope.cbh); - $scope.cbh = $timeout(checkDiffHint, 750); + if (cbh) + $timeout.cancel(cbh); + cbh = $timeout(checkDiffHint, 750); } } }); }); }; checkDiffHint(); - }, function(response, status, header, config) { + }, function(response) { $scope.hinterror = response.data.errmsg; hint.submitted = false; }); @@ -248,10 +295,14 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"]) .controller("SubmissionController", function($scope, $http, $rootScope, $timeout) { $rootScope.sberr = ""; + var cbs; + var cbd; + $scope.$watch("my", function(my) { if (!my || !my.exercices || !my.exercices[$rootScope.current_exercice]) { - $timeout.cancel($scope.cbs); - $scope.cbs = $timeout(waitMy, 420); + if (cbs) + $timeout.cancel(cbs); + cbs = $timeout(waitMy, 420); } else { angular.forEach(my.exercices[$rootScope.current_exercice].mcqs, function(mcq,qid) { angular.forEach(mcq["choices"], function(choice,cid) { @@ -346,11 +397,12 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"]) $http.get("/my.json").then(function(response) { var my = response.data; if ($scope.my.exercices[$rootScope.current_exercice].tries != my.exercices[$rootScope.current_exercice].tries || $scope.my.exercices[$rootScope.current_exercice].solved_time != my.exercices[$rootScope.current_exercice].solved_time) { - $rootScope.refresh(); - $scope.my = my; + $rootScope.recvMy(my); + $rootScope.refreshTeams(); } else { - $timeout.cancel($scope.cbd); - $scope.cbd = $timeout(checkDiff, 750); + if (cbd) + $timeout.cancel(cbd); + cbd = $timeout(checkDiff, 750); } }); }; @@ -382,6 +434,8 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"]) $rootScope.message = ""; $rootScope.sberr = ""; + var cbt; + $scope.tsubmit = function() { $rootScope.sberr = ""; if ($scope.newName.length < 1) { @@ -404,7 +458,7 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"]) url: "/submit/name", method: "POST", data: {newName: $scope.newName} - }).then(function(response, status, header, config) { + }).then(function(response) { $rootScope.messageClass = {"text-success": true}; $rootScope.message = response.data.errmsg; @@ -413,18 +467,20 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"]) if ($scope.my.name != response.data.name) { $scope.newName = ""; $rootScope.message = ""; - $rootScope.refresh(); + $rootScope.recvMy(response.data); + $rootScope.refreshTeams(); } else { - $timeout.cancel($scope.cbt); - $scope.cbt = $timeout(checkDiff, 750); + if (cbt) + $timeout.cancel(cbt); + cbt = $timeout(checkDiff, 750); } }); }; checkDiff(); - }, function(response, status, header, config) { + }, function(response) { $rootScope.messageClass = {"text-danger": true}; $rootScope.message = response.data.errmsg; - if (status != 402) { + if (response.status != 402) { $rootScope.sberr = "Une erreur est survenue lors de l'envoi. Veuillez réessayer dans quelques instants."; } });