Improve interface
This commit is contained in:
parent
5a8d2c36b7
commit
0247c89b02
|
|
@ -1,3 +1,7 @@
|
|||
body {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -46,3 +50,13 @@
|
|||
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="robots" content="all">
|
||||
<base href="/">
|
||||
<script src="/js/angular.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -46,7 +47,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container" ng-controller="DataController">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-9 col-sm-offset-3">
|
||||
|
|
@ -63,14 +64,17 @@
|
|||
<div class="col-sm-3">
|
||||
<div class="panel panel-default">
|
||||
<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>
|
||||
{{ teams[my.team_id].score }} points<br>
|
||||
{{ teams[my.team_id].rank }}<sup>e</sup> sur {{ teams_count }}
|
||||
<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>
|
||||
<a style="float: right;" class="btn btn-default btn-xs" href="/edit">edit</a><br><br>
|
||||
|
||||
<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 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>
|
||||
|
||||
<a href="https://srs.epita.fr/">
|
||||
|
|
@ -86,7 +90,6 @@
|
|||
|
||||
<script src="/js/jquery.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-route.min.js"></script>
|
||||
<script src="/js/app.js"></script>
|
||||
|
|
|
|||
|
|
@ -10,58 +10,151 @@ angular.module("FICApp", ["ngRoute"])
|
|||
templateUrl: "views/team-list.html"
|
||||
})
|
||||
.when("/:theme", {
|
||||
controller: "ThemeController",
|
||||
controller: "ExerciceController",
|
||||
templateUrl: "views/theme.html"
|
||||
})
|
||||
.when("/:theme/:exercice", {
|
||||
controller: "ExerciceController",
|
||||
templateUrl: "views/theme.html"
|
||||
})
|
||||
.otherwise({
|
||||
.when("/", {
|
||||
controller: "HomeController",
|
||||
templateUrl: "views/home.html"
|
||||
})
|
||||
.otherwise({
|
||||
redirectTo: "/"
|
||||
});
|
||||
$locationProvider.html5Mode(true);
|
||||
})
|
||||
.run(function($rootScope, $http) {
|
||||
$http.get("/themes.json").success(function(themes) {
|
||||
$rootScope.themes = themes;
|
||||
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;
|
||||
});
|
||||
.run(function($rootScope) {
|
||||
$rootScope.current_theme = 0;
|
||||
$rootScope.current_exercice = 0;
|
||||
});
|
||||
|
||||
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_exercice = $routeParams.exercice;
|
||||
|
||||
if ($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) {
|
||||
$rootScope.current_theme = 0;
|
||||
$rootScope.current_exercice = 0;
|
||||
$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) {
|
||||
$rootScope.current_theme = 0;
|
||||
$rootScope.current_exercice = 0;
|
||||
$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>
|
||||
</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])">
|
||||
<p>{{ my.exercices[current_exercice].statement }}</p>
|
||||
<p ng-show="(my.exercices[current_exercice].hint)">{{ my.exercices[current_exercice].hint }}</p>
|
||||
|
|
@ -35,16 +38,21 @@
|
|||
</table>
|
||||
</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-title">Soumettre une solution</div>
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
<button type="submit" class="btn btn-success">Soumettre</button>
|
||||
<button type="submit" class="btn btn-success disabled" id="sbmt">Soumettre</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user