teach/adlin
Archived
0
0
Fork 0
Code Issues 1 Pull Requests 4 Releases Activity

dashboard: improve overall design

Browse Source
This commit is contained in:
nemunaire 2019-03-26 02:23:04 +01:00
parent e9a08dde9e
commit 25183e2248
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
token-validator/htdocs/dashboard.html
View File

@ -8,7 +8,7 @@
.login { .login {
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 52%; max-width: 84%;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
@ -22,12 +22,15 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
height: 8rem; height: 8.5rem;
margin-bottom: -70px margin-bottom: -60px;
}
.card-title {
margin-bottom: 0;
} }
.student { .student {
margin-left: 3px; margin-left: 0.3%;
width: 250px; width: 16.3%;
} }
</style> </style>
<base href="/"> <base href="/">
@ -35,21 +38,17 @@
<body> <body>
<div ng-controller="StudentsController" ng-cloak> <div ng-controller="StudentsController" ng-cloak>
<div class="card float-left mt-1 student" ng-repeat="student in students"> <div class="card float-left mt-1 student" ng-repeat="student in students">
<div class="card-img-top" style="background-image: url('https://photos.cri.epita.fr/thumb/{{ student.login | lowercase }}')"></div> <div class="card-img-top" style="background-image: url('https://photos.cri.epita.fr/thumb/{{ student.login | lowercase }}')" ng-if="student.login != 'nemunaire'"></div>
<div class="card-img-top" style="background-image: url('https://photos.cri.epita.fr/thumb/mercie_d')" ng-if="student.login == 'nemunaire'"></div>
<div class="card-body"> <div class="card-body">
<h5 class="card-title" ng-controller="PingController"> <h5 class="card-title" ng-controller="PingController">
<span class="login" title="{{ student.login }}">{{ student.login }}</span> <span class="login" title="{{ student.login }}">{{ student.login }}</span>
<span class="badge badge-success float-right" ng-if="PING"> <span class="badge float-right" ng-class="{'badge-success': PING, 'badge-danger': !PING}">
Reachable &#x1f4bb;
</span>
<span class="badge badge-danger float-right" ng-if="!PING">
Unreachable
</span> </span>
</h5> </h5>
<div ng-controller="ProgressionController"> <div ng-controller="ProgressionController">
<span class="badge ml-1" ng-repeat="(ch,t) in tuto_progress[1]" ng-class="{'badge-success': mychallenges[ch], 'badge-danger': !mychallenges[ch]}"> <span class="badge ml-1" ng-repeat="(ch,t) in tuto_progress[tutoid]" ng-class="{'badge-success': mychallenges[ch] && mychallenges[ch].recent, 'badge-warning': mychallenges[ch] && !mychallenges[ch].recent, 'badge-danger': !mychallenges[ch]}" title="{{ t.title }} @ {{ mychallenges[ch].time | date: 'medium' }}" ng-bind="t.label"></span>
<span title="{{ t.title }}" ng-bind="t.label"></span>
</span>
</div> </div>
</div> </div>
</div> </div>

10
token-validator/htdocs/js/adlin-dashboard.js
View File

@ -31,6 +31,9 @@ angular.module("AdLinApp", ["ngResource", "ngSanitize"])
}); });
angular.module("AdLinApp") angular.module("AdLinApp")
.run(function($rootScope, $location) {
$rootScope.tutoid = 1;
})
.controller("StudentsController", function($scope, $interval, Student) { .controller("StudentsController", function($scope, $interval, Student) {
$scope.students = Student.query(); $scope.students = Student.query();
var refreshStd = function() { var refreshStd = function() {
@ -62,7 +65,14 @@ angular.module("AdLinApp")
$scope.tuto_progress = tuto_progress; $scope.tuto_progress = tuto_progress;
$scope.mychallenges = {}; $scope.mychallenges = {};
var refreshChal = function() { var refreshChal = function() {
var recent = new Date(Date.now() - 120000);
$http.get("/api/students/" + $scope.student.id + "/progress").then(function(response) { $http.get("/api/students/" + $scope.student.id + "/progress").then(function(response) {
angular.forEach(response.data, function(ch, chid) {
if (ch.time) {
response.data[chid].time = new Date(ch.time);
response.data[chid].recent = recent < response.data[chid].time;
}
});
$scope.mychallenges = response.data $scope.mychallenges = response.data
}); });
} }