frontend: rework refresh loop

This commit is contained in:
nemunaire 2018-12-01 16:14:34 +01:00
parent 0414c392bf
commit 8702db568c
2 changed files with 160 additions and 104 deletions

View File

@ -16,7 +16,7 @@
</head> </head>
<body class="bg-light"> <body class="bg-light">
<div class="navbar navbar-expand-lg navbar-dark bg-dark text-light"> <div class="navbar navbar-expand-lg navbar-dark bg-dark text-light" ng-controller="CountdownController">
<div class="container"> <div class="container">
<div class="col-md-auto"> <div class="col-md-auto">
<a href="https://www.forum-fic.com/" ng-if="!(time.remaining === undefined || my.team_id)"> <a href="https://www.forum-fic.com/" ng-if="!(time.remaining === undefined || my.team_id)">

View File

@ -42,65 +42,70 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
}); });
$locationProvider.html5Mode(true); $locationProvider.html5Mode(true);
}) })
.run(function($rootScope, $interval) { .run(function($rootScope) {
$rootScope.current_theme = 0; $rootScope.current_theme = 0;
$rootScope.current_exercice = 0; $rootScope.current_exercice = 0;
$rootScope.current_tag = undefined; $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) { $rootScope.recvTime = function(response) {
sessionStorage.userService = angular.toJson({ time = {
"cu": Math.floor(response.headers("x-fic-time") * 1000), "cu": Math.floor(response.headers("x-fic-time") * 1000),
"he": (new Date()).getTime(), "he": (new Date()).getTime(),
}); };
sessionStorage.userService = angular.toJson(time);
} }
function updTime() { function updTime() {
if (sessionStorage.userService && $rootScope.settings) { if (time && $rootScope.settings) {
var time = angular.fromJson(sessionStorage.userService);
var settings = $rootScope.settings;
var srv_cur = new Date(Date.now() + (time.cu - time.he)); 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); $rootScope.refresh(true);
}
var remain = 0; var remain = 0;
if (settings.start == 0) { if ($rootScope.settings.start == 0) {
$rootScope.time = {}; $scope.time = {};
return return
} else if (settings.start > srv_cur) { } else if ($rootScope.settings.start > srv_cur) {
$rootScope.startIn = Math.floor((settings.start - srv_cur) / 1000); $rootScope.startIn = Math.floor(($rootScope.settings.start - srv_cur) / 1000);
remain = settings.end - settings.start; remain = $rootScope.settings.end - $rootScope.settings.start;
} else if (settings.end > srv_cur) { } else if ($rootScope.settings.end > srv_cur) {
$rootScope.startIn = 0; $rootScope.startIn = 0;
remain = settings.end - srv_cur; remain = $rootScope.settings.end - srv_cur;
} }
remain = remain / 1000; remain = remain / 1000;
if (remain < 0) { if (remain < 0) {
remain = 0; remain = 0;
$rootScope.time.end = true; $scope.time.end = true;
$rootScope.time.expired = true; $scope.time.expired = true;
} else if (remain < 60) { } else if (remain < 60) {
$rootScope.time.end = false; $scope.time.end = false;
$rootScope.time.expired = true; $scope.time.expired = true;
} else { } else {
$rootScope.time.end = false; $scope.time.end = false;
$rootScope.time.expired = false; $scope.time.expired = false;
} }
$rootScope.time.remaining = remain; $scope.time.remaining = remain;
$rootScope.time.hours = Math.floor(remain / 3600); $scope.time.hours = Math.floor(remain / 3600);
$rootScope.time.minutes = Math.floor((remain % 3600) / 60); $scope.time.minutes = Math.floor((remain % 3600) / 60);
$rootScope.time.seconds = Math.floor(remain % 60); $scope.time.seconds = Math.floor(remain % 60);
} }
} }
updTime(); updTime();
$interval(updTime, 1000); $interval(updTime, 1000);
}) })
.controller("DataController", function($sce, $scope, $http, $rootScope, $timeout, $location) { .controller("DataController", function($sce, $scope, $http, $rootScope, $interval, $location) {
var actMenu = function() { var actMenu = function() {
if ($scope.my && $scope.themes) { if ($scope.my && $scope.themes) {
var tags = {}; var tags = {};
@ -128,10 +133,13 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
$scope.tags = tags; $scope.tags = tags;
} }
} }
$rootScope.refresh = function(justMy) {
if (!justMy) { var refreshSettingsInterval
$timeout.cancel($scope.cbr); var refreshSettings = function() {
$scope.cbr = $timeout($rootScope.refresh, 42000); if (refreshSettingsInterval)
$interval.cancel(refreshSettingsInterval);
refreshSettingsInterval = $interval(refreshSettings, Math.floor(Math.random() * 24000) + 32000);
$http.get("/settings.json").then(function(response) { $http.get("/settings.json").then(function(response) {
$rootScope.recvTime(response); $rootScope.recvTime(response);
response.data.start = new Date(response.data.start); response.data.start = new Date(response.data.start);
@ -139,6 +147,14 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
response.data.generation = new Date(response.data.generation); response.data.generation = new Date(response.data.generation);
$rootScope.settings = response.data; $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) { $http.get("/themes.json").then(function(response) {
$scope.themes = response.data; $scope.themes = response.data;
$scope.max_gain = 0; $scope.max_gain = 0;
@ -162,6 +178,14 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
}, response.data); }, response.data);
actMenu(); 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) { $http.get("/teams.json").then(function(response) {
var teams = response.data; var teams = response.data;
$scope.teams_count = Object.keys(teams).length $scope.teams_count = Object.keys(teams).length
@ -174,8 +198,33 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
}, $scope.rank); }, $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) { $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) { angular.forEach($scope.my.exercices, function(exercice, eid) {
exercice.solved = exercice.solved_rank > 0; exercice.solved = exercice.solved_rank > 0;
if (exercice.video_uri) { if (exercice.video_uri) {
@ -183,19 +232,15 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
} }
}); });
actMenu(); 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) { $rootScope.refresh = function(justMy) {
$location.url("/register"); if (!justMy) {
refreshSettings();
refreshThemes();
$rootScope.refreshTeams();
} }
}); refreshMy();
console.log("refresh!");
} }
$rootScope.refresh(); $rootScope.refresh();
}) })
@ -219,27 +264,29 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
$rootScope.current_exercice = 0; $rootScope.current_exercice = 0;
} }
var cbh;
$scope.hsubmit = function(hint) { $scope.hsubmit = function(hint) {
hint.submitted = true; hint.submitted = true;
$scope.hinterror = null; $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() { var checkDiffHint = function() {
$http.get("/my.json").then(function(response) { $http.get("/my.json").then(function(response) {
var my = response.data; var my = response.data;
angular.forEach(my.exercices[$rootScope.current_exercice].hints, function(h,hid){ angular.forEach(my.exercices[$rootScope.current_exercice].hints, function(h,hid){
if (hint.id == h.id) { if (hint.id == h.id) {
if (hint.content != h.content) { if (hint.content != h.content) {
$rootScope.refresh(); $rootScope.recvMy(my);
} else { } else {
$timeout.cancel($scope.cbh); if (cbh)
$scope.cbh = $timeout(checkDiffHint, 750); $timeout.cancel(cbh);
cbh = $timeout(checkDiffHint, 750);
} }
} }
}); });
}); });
}; };
checkDiffHint(); checkDiffHint();
}, function(response, status, header, config) { }, function(response) {
$scope.hinterror = response.data.errmsg; $scope.hinterror = response.data.errmsg;
hint.submitted = false; hint.submitted = false;
}); });
@ -248,10 +295,14 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
.controller("SubmissionController", function($scope, $http, $rootScope, $timeout) { .controller("SubmissionController", function($scope, $http, $rootScope, $timeout) {
$rootScope.sberr = ""; $rootScope.sberr = "";
var cbs;
var cbd;
$scope.$watch("my", function(my) { $scope.$watch("my", function(my) {
if (!my || !my.exercices || !my.exercices[$rootScope.current_exercice]) { if (!my || !my.exercices || !my.exercices[$rootScope.current_exercice]) {
$timeout.cancel($scope.cbs); if (cbs)
$scope.cbs = $timeout(waitMy, 420); $timeout.cancel(cbs);
cbs = $timeout(waitMy, 420);
} else { } else {
angular.forEach(my.exercices[$rootScope.current_exercice].mcqs, function(mcq,qid) { angular.forEach(my.exercices[$rootScope.current_exercice].mcqs, function(mcq,qid) {
angular.forEach(mcq["choices"], function(choice,cid) { angular.forEach(mcq["choices"], function(choice,cid) {
@ -346,11 +397,12 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
$http.get("/my.json").then(function(response) { $http.get("/my.json").then(function(response) {
var my = response.data; 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) { 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(); $rootScope.recvMy(my);
$scope.my = my; $rootScope.refreshTeams();
} else { } else {
$timeout.cancel($scope.cbd); if (cbd)
$scope.cbd = $timeout(checkDiff, 750); $timeout.cancel(cbd);
cbd = $timeout(checkDiff, 750);
} }
}); });
}; };
@ -382,6 +434,8 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
$rootScope.message = ""; $rootScope.message = "";
$rootScope.sberr = ""; $rootScope.sberr = "";
var cbt;
$scope.tsubmit = function() { $scope.tsubmit = function() {
$rootScope.sberr = ""; $rootScope.sberr = "";
if ($scope.newName.length < 1) { if ($scope.newName.length < 1) {
@ -404,7 +458,7 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
url: "/submit/name", url: "/submit/name",
method: "POST", method: "POST",
data: {newName: $scope.newName} data: {newName: $scope.newName}
}).then(function(response, status, header, config) { }).then(function(response) {
$rootScope.messageClass = {"text-success": true}; $rootScope.messageClass = {"text-success": true};
$rootScope.message = response.data.errmsg; $rootScope.message = response.data.errmsg;
@ -413,18 +467,20 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
if ($scope.my.name != response.data.name) { if ($scope.my.name != response.data.name) {
$scope.newName = ""; $scope.newName = "";
$rootScope.message = ""; $rootScope.message = "";
$rootScope.refresh(); $rootScope.recvMy(response.data);
$rootScope.refreshTeams();
} else { } else {
$timeout.cancel($scope.cbt); if (cbt)
$scope.cbt = $timeout(checkDiff, 750); $timeout.cancel(cbt);
cbt = $timeout(checkDiff, 750);
} }
}); });
}; };
checkDiff(); checkDiff();
}, function(response, status, header, config) { }, function(response) {
$rootScope.messageClass = {"text-danger": true}; $rootScope.messageClass = {"text-danger": true};
$rootScope.message = response.data.errmsg; $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."; $rootScope.sberr = "Une erreur est survenue lors de l'envoi. Veuillez réessayer dans quelques instants.";
} }
}); });