dashboard: extract progress and visual changes

token-validator/htdocs/dashboard.html

@@ -24,7 +24,7 @@
 	  height: calc(100vh / 5 - 0.3vh);
 	  margin-left: 0.2%;
 	  margin-bottom: 0.2vh;
-	  width: calc(100vw / 13 - 0.22vw);
+	  width: calc(100vw / 13 - 0.26vw);
       }
       .student-title {
 	  width: calc(2 * (100vw / 13 - 0.22vw) + 0.2vw);
@@ -47,7 +47,7 @@
       .login {
 	  max-width: 122px;
       }
-      .badge {
+      .badge.badge-sm {
           font-size: 59%;
 	  padding: .15em .35em;
       }
@@ -108,7 +108,7 @@
 	  </div>
         </div>
 
-        <div class="card student d-flex flex-column justify-content-between" ng-repeat="(login, mychallenges) in students" style="background-image: url('https://photos.cri.epita.fr/square/{{ mychallenges.img | lowercase }}')">
+        <div class="card student d-flex flex-column justify-content-between" ng-repeat="(login, mychallenges) in students" ng-if="login != 'nemunaire'" style="background-image: url('https://photos.cri.epita.fr/square/{{ mychallenges.img | lowercase }}')">
 	  <h5 class="login text-truncate" title="{{ login }}">
 	    <span class="badge" ng-class="{'badge-success': mychallenges['ping'] && mychallenges['ping'].recent < 120, 'badge-info': mychallenges['ping'] && mychallenges['ping'].recent >= 120 && mychallenges['ping'].recent < 300, 'badge-warning': mychallenges['ping'] && mychallenges['ping'].recent >= 300 && mychallenges['ping'].recent < 900, 'badge-danger': mychallenges['ping'] && mychallenges['ping'].recent >= 900, 'badge-dark': !mychallenges['ping']}" title="{{ mychallenges['ping'].time }}">
 	      &#x1f4bb;
@@ -116,7 +116,7 @@
 	    <a class="text-dark" href="/dashboard/{{login}}">{{ login }}</a>
 	  </h5>
 	  <div class="d-flex flex-wrap justify-content-around" style="padding: 0">
-	    <span class="badge" style="margin-left: .07rem" ng-repeat="(ch,t) in tuto_progress[tutoid]" ng-class="{'badge-warning': mychallenges[ch] && mychallenges[ch].recent && (tutoid != 0 && mychallenges[ch].recent > 300), 'badge-info': mychallenges[ch] && mychallenges[ch].recent && mychallenges[ch].recent <= 300 && mychallenges[ch].recent >= 120, 'badge-success': mychallenges[ch] && mychallenges[ch].recent && (tutoid == 0 || mychallenges[ch].recent < 120), 'badge-danger': !mychallenges[ch]}" title="{{ t.title }} @ {{ mychallenges[ch].time | date: 'medium' }} {{ mychallenges[ch].recent }}" ng-bind="t.label"></span>
+	    <span class="badge badge-sm" style="margin-left: .07rem" ng-repeat="(ch,t) in tuto_progress[tutoid]" ng-class="{'badge-warning': mychallenges[ch] && mychallenges[ch].recent && (tutoid != 0 && mychallenges[ch].recent > 300), 'badge-info': mychallenges[ch] && mychallenges[ch].recent && mychallenges[ch].recent <= 300 && mychallenges[ch].recent >= 120, 'badge-success': mychallenges[ch] && mychallenges[ch].recent && (tutoid == 0 || mychallenges[ch].recent < 120), 'badge-danger': !mychallenges[ch]}" title="{{ t.title }} @ {{ mychallenges[ch].time | date: 'medium' }} {{ mychallenges[ch].recent }}" ng-bind="t.icon"></span>
 	  </div>
         </div>
       </div>
@@ -126,6 +126,7 @@
     <script src="js/angular-resource.min.js"></script>
     <script src="js/angular-route.min.js"></script>
     <script src="js/angular-sanitize.min.js"></script>
+    <script src="js/adlin-common.js"></script>
     <script src="js/adlin-dashboard.js"></script>
   </body>
 </html>

token-validator/htdocs/js/adlin-common.js

@@ -0,0 +1,28 @@
+var tuto_progress = [
+    {
+        1: { title: "Is alive?", icon: "👋", label: "Token 1"},
+        2: { title: "DMZ reached", icon: "📚", label: "Token 2"},
+        3: { title: "HTTPS on + time", icon: "⏲", label: "Token 3"},
+        4: { title: "DNS ok", icon: "🍰", label: "Token 4"},
+        5: { title: "On Internet", icon: "🌎", label: "Token 5"},
+        6: { title: "Bonus caché", icon: "b", label: "Bonus 0"},
+        7: { title: "Bonus ICMP", icon: "🏓", label: "Bonus 1"},
+        8: { title: "Bonus disk", icon: "💽", label: "Bonus 2"},
+        9: { title: "Bonus email", icon: "📧", label: "Bonus 3"},
+        10: { title: "Wg tunnel", icon: "🚇", label: "Tunnel up"},
+        11: { title: "Uploaded SSH key", icon: "💊", label: "SSH"},
+    },
+    {
+        100: { title: "HTTP on IP", icon: "0", label: "HTTP IP"},
+        101: { title: "HTTP on associated domain", icon: "1", label: "HTTP domain"},
+        102: { title: "HTTPS on associated domain", icon: "2", label: "HTTPS domain"},
+        103: { title: "DNS Delegation", icon: "3", label: "DNS"},
+        104: { title: "HTTP on delegated domain", icon: "4", label: "HTTP on NS"},
+        105: { title: "HTTPS on delegated domain", icon: "5", label: "HTTPS on NS"},
+        106: { title: "Matrix", icon: "6", label: "Matrix"},
+        107: { title: "DNSSEC (bonus)", icon: "7", label: "DNSSEC"},
+    },
+    {
+	200: { title: "HTTP", label: "HTTP"},
+    },
+];

token-validator/htdocs/js/adlin-dashboard.js

@@ -1,32 +1,3 @@
-var tuto_progress = [
-    {
-	1: { title: "Is alive?", label: "👋"},
-	2: { title: "DMZ reached", label: "📚"},
-	3: { title: "HTTPS on + time", label: "⏲"},
-	4: { title: "DNS ok", label: "🍰"},
-	5: { title: "On Internet", label: "🌎"},
-	6: { title: "Bonus caché", label: "b"},
-	7: { title: "Bonus ICMP", label: "🏓"},
-	8: { title: "Bonus disk", label: "💽"},
-	9: { title: "Bonus email", label: "📧"},
-	10: { title: "Wg tunnel", label: "🚇"},
-	11: { title: "Uploaded SSH key", label: "💊"},
-    },
-    {
-	100: { title: "HTTP", label: "HTTP"},
-	101: { title: "HTTPS", label: "HTTPS"},
-	102: { title: "DNS", label: "DNS"},
-	103: { title: "Matrix", label: "Matrix"},
-    },
-    {
-	200: { title: "HTTP", label: "HTTP"},
-	201: { title: "HTTPS", label: "HTTPS"},
-	202: { title: "DNS", label: "DNS"},
-	203: { title: "Matrix", label: "Matrix"},
-    },
-];
-
-
 angular.module("AdLinApp", ["ngResource", "ngSanitize"])
     .factory("Student", function($resource) {
 	return $resource("/api/students/:studentId", { studentId: '@id' }, {
@@ -65,7 +36,8 @@ angular.module("AdLinApp")
 	var refreshStd = function() {
 	    $scope.students = Student.query();
 	}
-	$interval(refreshStd, 1600000);
+        var myinterval = $interval(refreshStd, 1600000);
+        $scope.$on('$destroy', function () { $interval.cancel(myinterval); });
     })
     .controller("StudentsProgressionController", function($scope, $interval, Progression) {
 	$scope.tuto_progress = tuto_progress;
@@ -109,7 +81,8 @@ angular.module("AdLinApp")
 	  })
 	}
         refreshStd();
-        $interval(refreshStd, 9750);
+        var myinterval = $interval(refreshStd, 9750);
+        $scope.$on('$destroy', function () { $interval.cancel(myinterval); });
     })
     .controller("StudentProgressionController", function($scope, $interval, $http, Student, StudentProgression) {
       $scope.tuto_progress = tuto_progress;
@@ -133,7 +106,8 @@ angular.module("AdLinApp")
       }
       $scope.$watch("onestudent", function(onestudent) {
 	refreshStd();
-	$interval(refreshStd, 15000);
+	var myinterval = $interval(refreshStd, 15000);
+        $scope.$on('$destroy', function () { $interval.cancel(myinterval); });
       })
     })
     .controller("PingController", function($scope, $interval, $http) {
@@ -150,7 +124,8 @@ angular.module("AdLinApp")
         $scope.$watch("student", function(student) {
           student.$promise.then(function(std) {
 	    refreshPing();
-	    $interval(refreshPing, 15000);
+	    var myinterval = $interval(refreshPing, 15000);
+            $scope.$on('$destroy', function () { $interval.cancel(myinterval); });
           })
         })
     })
@@ -162,7 +137,8 @@ angular.module("AdLinApp")
 	    });
 	}
 	refreshSSH();
-	$interval(refreshSSH, 15500);
+	var myinterval = $interval(refreshSSH, 15500);
+        $scope.$on('$destroy', function () { $interval.cancel(myinterval); });
     })
     .controller("ProgressionController", function($scope, $interval, $http) {
 	$scope.tuto_progress = tuto_progress;
@@ -179,5 +155,6 @@ angular.module("AdLinApp")
 	    });
 	}
 	refreshChal();
-	$interval(refreshChal, 15750);
+        var myinterval = $interval(refreshChal, 15750);
+        $scope.$on('$destroy', function () { $interval.cancel(myinterval); });
     })