Improve interface
This commit is contained in:
parent
5a8d2c36b7
commit
0247c89b02
@ -1,3 +1,7 @@
|
|||||||
|
body {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
@ -46,3 +50,13 @@
|
|||||||
text-shadow: 0 0 20px #0055ff;
|
text-shadow: 0 0 20px #0055ff;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.teamname {
|
||||||
|
padding: 2px 7px;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: #444 0 0 3px;
|
||||||
|
}
|
||||||
|
.teamname span {
|
||||||
|
-webkit-filter: invert(100%);
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
<meta name="author" content="EPITA Laboratoire SRS">
|
<meta name="author" content="EPITA Laboratoire SRS">
|
||||||
<meta name="robots" content="all">
|
<meta name="robots" content="all">
|
||||||
<base href="/">
|
<base href="/">
|
||||||
|
<script src="/js/angular.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@ -46,7 +47,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container" ng-controller="DataController">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-9 col-sm-offset-3">
|
<div class="col-sm-9 col-sm-offset-3">
|
||||||
@ -63,14 +64,17 @@
|
|||||||
<div class="col-sm-3">
|
<div class="col-sm-3">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<strong>{{ teams[my.team_id].name }}</strong><a style="float: right;" class="btn btn-default btn-xs" href="/edit">edit</a><br><br>
|
<strong class="teamname" style="background-color: {{ teams[my.team_id].color }}; color: {{ teams[my.team_id].color }};"><span>{{ teams[my.team_id].name }}</span></strong>
|
||||||
{{ teams[my.team_id].score }} points<br>
|
<a style="float: right;" class="btn btn-default btn-xs" href="/edit">edit</a><br><br>
|
||||||
{{ teams[my.team_id].rank }}<sup>e</sup> sur {{ teams_count }}
|
|
||||||
|
<span ng-show="teams[my.team_id].rank">{{ teams[my.team_id].rank }}<sup>e</sup> sur {{ teams_count }} –</span>
|
||||||
|
{{ teams[my.team_id].score }} points
|
||||||
|
<a style="float: right;" class="btn btn-default btn-xs btn-primary" href="/rank">classement</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="list-group">
|
<div class="list-group">
|
||||||
<a ng-repeat="(k,theme) in themes" ng-class="{active: k == current_theme}" class="list-group-item" href="/{{ k }}"><span class="badge">0/{{ theme.exercice_count }}</span>{{ theme.name }}</a>
|
<a ng-repeat="(k,theme) in themes" ng-class="{active: k == current_theme}" class="list-group-item" href="/{{ k }}"><span class="badge">{{ theme.exercice_solved }}/{{ theme.exercice_count }}</span>{{ theme.name }}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="https://srs.epita.fr/">
|
<a href="https://srs.epita.fr/">
|
||||||
@ -86,7 +90,6 @@
|
|||||||
|
|
||||||
<script src="/js/jquery.min.js"></script>
|
<script src="/js/jquery.min.js"></script>
|
||||||
<script src="/js/bootstrap.min.js"></script>
|
<script src="/js/bootstrap.min.js"></script>
|
||||||
<script src="/js/angular.min.js"></script>
|
|
||||||
<script src="/js/angular-resource.min.js"></script>
|
<script src="/js/angular-resource.min.js"></script>
|
||||||
<script src="/js/angular-route.min.js"></script>
|
<script src="/js/angular-route.min.js"></script>
|
||||||
<script src="/js/app.js"></script>
|
<script src="/js/app.js"></script>
|
||||||
|
@ -10,58 +10,151 @@ angular.module("FICApp", ["ngRoute"])
|
|||||||
templateUrl: "views/team-list.html"
|
templateUrl: "views/team-list.html"
|
||||||
})
|
})
|
||||||
.when("/:theme", {
|
.when("/:theme", {
|
||||||
controller: "ThemeController",
|
controller: "ExerciceController",
|
||||||
templateUrl: "views/theme.html"
|
templateUrl: "views/theme.html"
|
||||||
})
|
})
|
||||||
.when("/:theme/:exercice", {
|
.when("/:theme/:exercice", {
|
||||||
controller: "ExerciceController",
|
controller: "ExerciceController",
|
||||||
templateUrl: "views/theme.html"
|
templateUrl: "views/theme.html"
|
||||||
})
|
})
|
||||||
.otherwise({
|
.when("/", {
|
||||||
controller: "HomeController",
|
controller: "HomeController",
|
||||||
templateUrl: "views/home.html"
|
templateUrl: "views/home.html"
|
||||||
|
})
|
||||||
|
.otherwise({
|
||||||
|
redirectTo: "/"
|
||||||
});
|
});
|
||||||
$locationProvider.html5Mode(true);
|
$locationProvider.html5Mode(true);
|
||||||
})
|
})
|
||||||
.run(function($rootScope, $http) {
|
.run(function($rootScope) {
|
||||||
$http.get("/themes.json").success(function(themes) {
|
$rootScope.current_theme = 0;
|
||||||
$rootScope.themes = themes;
|
$rootScope.current_exercice = 0;
|
||||||
angular.forEach(themes, function(value, key) {
|
|
||||||
this[key].exercice_count = Object.keys(value.exercices).length;
|
|
||||||
}, themes);
|
|
||||||
});
|
|
||||||
$http.get("/teams.json").success(function(teams) {
|
|
||||||
$rootScope.teams_count = Object.keys(teams).length
|
|
||||||
$rootScope.teams = teams;
|
|
||||||
});
|
|
||||||
$http.get("/my.json").success(function(my) {
|
|
||||||
$rootScope.my = my;
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
angular.module("FICApp")
|
angular.module("FICApp")
|
||||||
.controller("ExerciceController", function($scope, $routeParams, $rootScope) {
|
.controller("DataController", function($scope, $http, $rootScope) {
|
||||||
|
var actMenu = function() {
|
||||||
|
if ($scope.my && $scope.themes) {
|
||||||
|
angular.forEach($scope.themes, function(theme, key) {
|
||||||
|
$scope.themes[key].exercice_solved = 0;
|
||||||
|
angular.forEach(theme.exercices, function(exercice, k) {
|
||||||
|
if ($scope.my.exercices[k] && $scope.my.exercices[k].solved) {
|
||||||
|
$scope.themes[key].exercice_solved++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var repeat = function() {
|
||||||
|
$http.get("/themes.json").success(function(themes) {
|
||||||
|
$scope.themes = themes;
|
||||||
|
angular.forEach(themes, function(theme, key) {
|
||||||
|
this[key].exercice_count = Object.keys(theme.exercices).length;
|
||||||
|
}, themes);
|
||||||
|
actMenu();
|
||||||
|
});
|
||||||
|
$http.get("/teams.json").success(function(teams) {
|
||||||
|
$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);
|
||||||
|
});
|
||||||
|
$http.get("/my.json").success(function(my) {
|
||||||
|
$scope.my = my;
|
||||||
|
actMenu();
|
||||||
|
});
|
||||||
|
console.log("refresh!");
|
||||||
|
}
|
||||||
|
repeat();
|
||||||
|
setInterval(repeat, 60000);
|
||||||
|
})
|
||||||
|
.controller("ExerciceController", function($scope, $routeParams, $http, $rootScope) {
|
||||||
$rootScope.current_theme = $routeParams.theme;
|
$rootScope.current_theme = $routeParams.theme;
|
||||||
|
|
||||||
|
if ($routeParams.exercice) {
|
||||||
$rootScope.current_exercice = $routeParams.exercice;
|
$rootScope.current_exercice = $routeParams.exercice;
|
||||||
|
} else {
|
||||||
|
if ($scope.themes && $scope.my && $scope.themes[$scope.current_theme]) {
|
||||||
|
var exos = Object.keys($scope.themes[$scope.current_theme].exercices);
|
||||||
|
var i = 0;
|
||||||
|
for (; i < exos.length - 1; i++) {
|
||||||
|
if (!$scope.my.exercices[exos[i]] || !$scope.my.exercices[exos[i]].solved)
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
$rootScope.current_exercice = exos[i];
|
||||||
|
} else {
|
||||||
|
$rootScope.current_exercice = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.ssubmit = function() {
|
||||||
|
if (!$("#solution").val().length) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
$http({
|
||||||
|
url: "/submit/" + $rootScope.current_exercice,
|
||||||
|
method: "POST",
|
||||||
|
data: $("#solution").val()
|
||||||
|
}).success(function(data, status, header, config) {
|
||||||
|
$scope.messageClass = {"alert-success": true};
|
||||||
|
$scope.message = data.errmsg;
|
||||||
|
|
||||||
|
$scope.refresh = function() {
|
||||||
|
$http.get("/my.json").success(function(my) {
|
||||||
|
if ($scope.my.exercices[$rootScope.current_exercice].solved_time != my.exercices[$rootScope.current_exercice].solved_time) {
|
||||||
|
$scope.my = my;
|
||||||
|
} else {
|
||||||
|
setTimeout($scope.refresh, 750);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
$scope.refresh()
|
||||||
|
}).error(function(data, status, header, config) {
|
||||||
|
if (status >= 500) {
|
||||||
|
$scope.my.exercices[$rootScope.current_exercice].submitted = false;
|
||||||
|
}
|
||||||
|
$scope.messageClass = {"alert-danger": true};
|
||||||
|
$scope.message = data.errmsg;
|
||||||
|
});
|
||||||
|
$scope.my.exercices[$rootScope.current_exercice].submitted = true;
|
||||||
|
};
|
||||||
})
|
})
|
||||||
.controller("MyTeamController", function($scope, $rootScope) {
|
.controller("MyTeamController", function($scope, $rootScope) {
|
||||||
$rootScope.current_theme = 0;
|
$rootScope.current_theme = 0;
|
||||||
$rootScope.current_exercice = 0;
|
$rootScope.current_exercice = 0;
|
||||||
$rootScope.title = "Edit team";
|
$rootScope.title = "Edit team";
|
||||||
})
|
})
|
||||||
|
.controller("RankController", function($scope, $rootScope) {
|
||||||
|
$rootScope.current_theme = 0;
|
||||||
|
$rootScope.current_exercice = 0;
|
||||||
|
$rootScope.title = "Classement général";
|
||||||
|
|
||||||
|
$scope.fields = ["rank", "name", "score"];
|
||||||
|
$scope.rankOrder = "rank";
|
||||||
|
$scope.reverse = false;
|
||||||
|
$scope.order = function(fld) {
|
||||||
|
if ($scope.rankOrder == fld) {
|
||||||
|
$scope.reverse = !$scope.reverse;
|
||||||
|
} else {
|
||||||
|
$scope.rankOrder = fld;
|
||||||
|
$scope.reverse = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
.controller("HomeController", function($scope, $rootScope) {
|
.controller("HomeController", function($scope, $rootScope) {
|
||||||
$rootScope.current_theme = 0;
|
$rootScope.current_theme = 0;
|
||||||
$rootScope.current_exercice = 0;
|
$rootScope.current_exercice = 0;
|
||||||
$rootScope.title = "";
|
$rootScope.title = "";
|
||||||
})
|
|
||||||
.controller("ThemeController", function($scope, $routeParams, $rootScope) {
|
|
||||||
$rootScope.current_theme = $routeParams.theme;
|
|
||||||
|
|
||||||
var exos = Object.keys($rootScope.themes[$rootScope.current_theme].exercices);
|
|
||||||
var i = 0;
|
|
||||||
for (; i < exos.length - 1; i++) {
|
|
||||||
if (!$rootScope.my.exercices[exos[i]] || !$rootScope.my.exercices[exos[i]].solved)
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
$rootScope.current_exercice = exos[i];
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function sready() {
|
||||||
|
if ($("#solution").val().length) {
|
||||||
|
$("#sbmt").removeClass("disabled");
|
||||||
|
} else {
|
||||||
|
$("#sbmt").addClass("disabled");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
56
frontend/static/views/home.html
Normal file
56
frontend/static/views/home.html
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<div class="well">
|
||||||
|
<h3>Bienvenue !</h3>
|
||||||
|
<p>
|
||||||
|
Compromissions, défauts de configuration, utilisations malveillantes,
|
||||||
|
contournements des règles de sécurité, … tous les jours nous mettons
|
||||||
|
en danger nos données.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Saurez-vous identifier les différents vecteurs de fuites de données avec
|
||||||
|
lesquels nos systèmes d'informations et nos utilisateurs font faces ?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Bon courage !
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h3 class="panel-title">Progressions</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
|
||||||
|
<strong>Vous</strong>
|
||||||
|
<div class="progress progress-striped">
|
||||||
|
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"
|
||||||
|
aria-valuemin="0" aria-valuemax="100" style="width: 18%;">
|
||||||
|
<span class="sr-only">18% Complete</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
|
||||||
|
aria-valuemin="0" aria-valuemax="100" style="width: 18%;">
|
||||||
|
<span class="sr-only">18% Complete</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>Le temps</strong>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
|
||||||
|
aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
|
||||||
|
<span class="sr-only">90 minutes restantes</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>La meilleure équipe</strong>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"
|
||||||
|
aria-valuemin="0" aria-valuemax="100" style="width: 28%;">
|
||||||
|
<span class="sr-only">18% Complete</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
|
||||||
|
aria-valuemin="0" aria-valuemax="100" style="width: 18%;">
|
||||||
|
<span class="sr-only">18% Complete</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
@ -2,6 +2,9 @@
|
|||||||
<li ng-repeat="(k,exercice) in themes[current_theme].exercices" ng-class="{active: k == current_exercice, disabled: !my.exercices[k]}"><a ng-show="(!my.exercices[k])">{{ exercice.title }}</a><a href="/{{ current_theme }}/{{ k }}" ng-show="(my.exercices[k])">{{ exercice.title }} <span ng-show="(my.exercices[k].solved)" class="badge">{{ exercice.gain }}</span></a></li>
|
<li ng-repeat="(k,exercice) in themes[current_theme].exercices" ng-class="{active: k == current_exercice, disabled: !my.exercices[k]}"><a ng-show="(!my.exercices[k])">{{ exercice.title }}</a><a href="/{{ current_theme }}/{{ k }}" ng-show="(my.exercices[k])">{{ exercice.title }} <span ng-show="(my.exercices[k].solved)" class="badge">{{ exercice.gain }}</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<div class="alert alert-warning" style="margin-top:15px;" ng-show="!(my.exercices[current_exercice])">
|
||||||
|
Vous n'avez pas encore accès à cet exercice.
|
||||||
|
</div>
|
||||||
<div style="margin-top: 15px" class="well" ng-show="(my.exercices[current_exercice])">
|
<div style="margin-top: 15px" class="well" ng-show="(my.exercices[current_exercice])">
|
||||||
<p>{{ my.exercices[current_exercice].statement }}</p>
|
<p>{{ my.exercices[current_exercice].statement }}</p>
|
||||||
<p ng-show="(my.exercices[current_exercice].hint)">{{ my.exercices[current_exercice].hint }}</p>
|
<p ng-show="(my.exercices[current_exercice].hint)">{{ my.exercices[current_exercice].hint }}</p>
|
||||||
@ -35,16 +38,21 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel panel-danger" ng-show="!(my.exercices[current_exercice].solved)">
|
<div class="alert alert-info" ng-class="messageClass" ng-show="my.exercices[current_exercice] && !(my.exercices[current_exercice].solved) && (my.exercices[current_exercice].submitted)">
|
||||||
|
<strong>Your solution has been submitted.</strong> {{ message }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel panel-danger" ng-show="my.exercices[current_exercice] && !(my.exercices[current_exercice].solved) && !(my.exercices[current_exercice].submitted)">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<div class="panel-title">Soumettre une solution</div>
|
<div class="panel-title">Soumettre une solution</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<form class="form-inline">
|
<p ng-show="(my.exercices[current_exercice].solved_number)">Dernière solution envoyée à {{ my.exercices[current_exercice].solved_time }}.</p>
|
||||||
|
<form class="form-inline" ng-submit="ssubmit()">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input type="text" class="form-control" placeholder="Votre solution" id="solution" name="solution">
|
<input type="text" class="form-control" placeholder="Votre solution" id="solution" name="solution" onchange="sready()">
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-success">Soumettre</button>
|
<button type="submit" class="btn btn-success disabled" id="sbmt">Soumettre</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user