fic/server
2
0
Fork 0
Code Issues Pull Requests 10 Releases Wiki Activity

frontend: new page theme

Browse Source
This commit is contained in:
nemunaire 2018-11-25 03:08:07 +01:00
parent ea56219fa1
commit 26295dd978
3 changed files with 157 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/static/js/challenge.js
View File

@ -31,7 +31,7 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
})
.when("/:theme/:exercice", {
controller: "ExerciceController",
templateUrl: "views/theme.html"
templateUrl: "views/defi.html"
})
.when("/", {
controller: "HomeController",
@ -197,23 +197,9 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
if (exercicesUrl != undefined)
$rootScope.current_exercice = exercicesUrl[$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; i++) {
if (!$scope.my.exercices || !$scope.my.exercices[exos[i]] || !$scope.my.exercices[exos[i]].solved)
break;
}
if (i < exos.length) {
$rootScope.current_exercice = exos[i];
} else {
$rootScope.current_exercice = exos[0];
}
} else {
$rootScope.current_exercice = 0;
}
}
$scope.hsubmit = function(hint) {
hint.submitted = true;

135
frontend/static/views/defi.html Normal file
View File

@ -0,0 +1,135 @@
<nav role="navigation">
<ol class="breadcrumb">
<li ng-repeat="(k,exercice) in themes[current_theme].exercices" class="breadcrumb-item" ng-class="{active: k == current_exercice, disabled: !my.exercices[k]}">
<a ng-if="(k != current_exercice && !my.exercices[k])">{{ exercice.title }}</a>
<a ng-href="/{{ themes[current_theme].urlid }}/{{ themes[current_theme].exercices[k].urlid }}" ng-if="(k != current_exercice && my.exercices[k])">
{{ exercice.title }}
<span class="glyphicon glyphicon-gift" aria-hidden="true" ng-if="themes[current_theme].exercices[k].curcoeff > 1.0"></span>
<span class="glyphicon glyphicon-ok" aria-hidden="true" ng-if="(my.team_id && my.exercices[k].solved)"></span>
</a>
<strong ng-if="k == current_exercice" class="text-info">{{ exercice.title }}</strong>
</li>
</ol>
</nav>
<div class="alert alert-warning" style="margin-top:15px;" ng-if="!(my.exercices[current_exercice])">
Vous n'avez pas encore accès à cet exercice.
</div>
<div class="jumbotron text-indent" style="margin-top: 15px" ng-if="!(my.exercices[current_exercice])">
<p class="lead text-justify" ng-bind-html="themes[current_theme].intro"></p>
</div>
<div class="jumbotron text-indent" style="margin-top: 15px" ng-if="(my.exercices[current_exercice])">
<h3 class="display-4">{{ themes[current_theme].exercices[current_exercice].title }}</h3>
<a ng-href="/tags/{{tag}}" class="badge badge-pill badge-secondary mr-2 mb-2" ng-repeat="tag in themes[current_theme].exercices[current_exercice].tags">#{{ tag }}</a>
<p class="lead text-justify" ng-bind-html="my.exercices[current_exercice].statement"></p>
<div class="alert alert-{{my.exercices[current_exercice].issuekind}}" ng-if="my.exercices[current_exercice].issue" ng-bind-html="my.exercices[current_exercice].issue"></div>
<hr class="my-3">
<ul>
<li><strong>Gain&nbsp;:</strong> <ng-pluralize count="themes[current_theme].exercices[current_exercice].gain" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> <em ng-if="settings.firstBlood && themes[current_theme].exercices[current_exercice].solved < 1">{{ 1 + settings.firstBlood | coeff }} prem's</em> <em ng-if="themes[current_theme].exercices[current_exercice].curcoeff != 1.0">{{ themes[current_theme].exercices[current_exercice].curcoeff | coeff }} bonus</em></li>
<li><strong>Résolu par&nbsp;:</strong> <ng-pluralize count="themes[current_theme].exercices[current_exercice].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize>.</li>
</ul>
</div>
<div class="row">
<div class="col-xl" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].files.length)" style="margin-bottom: 15px">
<div class="card" style="margin-bottom: 15px">
<div class="card-header text-white">
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Téléchargements
</div>
<div class="list-group">
<a ng-href="{{ file.path }}" target="_self" class="list-group-item" ng-repeat="file in my.exercices[current_exercice].files">
<h1 class="float-left" style="margin: 7px 7px 5px -5px"><span class="glyphicon glyphicon-download" aria-hidden="true"></span></h1>
<h4 class="list-group-item-heading"><strong><samp>{{ file.name }}</samp></strong></h4>
<p class="list-group-item-text"><nobr>Taille&nbsp;: <span title="{{ file.size }} octets">{{ file.size | size }}</span></nobr> &ndash; <nobr><span title="blake2.net">b2sum</span>&nbsp;: <samp class="cksum" title="{{ file.checksum }}">{{ file.checksum }}</samp></nobr></p>
</a>
</div>
</div>
</div>
<div class="col-xl" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].hints.length)" style="margin-bottom: 15px">
<div class="card border-info" style="margin-bottom: 15px">
<div class="card-header bg-info text-white">
<span class="glyphicon glyphicon-lamp" aria-hidden="true"></span> Indices
</div>
<div class="list-group">
<a target="_self" class="list-group-item text-light" ng-repeat="hint in my.exercices[current_exercice].hints" ng-href="{{ hint.file }}">
<button type="button" ng-click="hsubmit(hint)" class="float-right btn btn-info" ng-if="!(hint.content || hint.file)" ng-class="{disabled: hint.submitted}"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Débloquer</button>
<button type="button" ng-click="hint.hidden = false;" class="float-right btn btn-info" ng-if="!hint.file && hint.hidden"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Afficher</button>
<h1 class="float-left" style="margin: 5px 7px 5px -5px" ng-if="hint.file"><span class="glyphicon glyphicon-download" aria-hidden="true"></span></h1>
<h4 class="list-group-item-heading">{{ hint.title }}</h4>
<p class="list-group-item-text" ng-if="!hint.file && hint.content && !hint.hidden" ng-bind-html="hint.content"></p>
<p class="list-group-item-text" ng-if="hint.file">Cliquez ici pour télécharger l'indice. <samp class="cksum" title="Somme de contrôle BLAKE2b : {{ hint.content }}">{{ hint.content }}</samp></p>
<p class="list-group-item-text" ng-if="!hint.file && !hint.content && (hint.hidden === true || hint.hidden === undefined)">Débloquer cet indice vous fera perdre <ng-pluralize count="hint.cost" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize>.</p>
</a>
</div>
</div>
</div>
<div class="col-xl" style="margin-bottom: 25px">
<div class="card border-danger" ng-if="my.team_id && my.exercices[current_exercice] && !(my.exercices[current_exercice].solved)" style="margin-bottom: 15px">
<div class="card-header bg-danger text-white">
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Faire son rapport
</div>
<ul class="list-group" ng-if="(my.exercices[current_exercice].tries || my.exercices[current_exercice].submitted || sberr)">
<li class="list-group-item text-warning" ng-if="my.exercices[current_exercice].tries"><ng-pluralize count="my.exercices[current_exercice].tries" when="{'one': '{} tentative effectuée', 'other': '{} tentatives effectuées'}"></ng-pluralize>. Dernière solution envoyée à {{ my.exercices[current_exercice].solved_time | date:"mediumTime" }}. <span ng-if="my.exercices[current_exercice].solve_dist"><ng-pluralize count="my.exercices[current_exercice].solve_dist" when="{'one': '{} réponse erronée', 'other': '{} réponses erronées'}"></ng-pluralize>.</span></li>
<li class="list-group-item" ng-class="messageClass" ng-if="my.exercices[current_exercice].submitted || sberr"><strong ng-if="!sberr">Votre solution a bien été envoyée !</strong><strong ng-if="sberr">{{ sberr }}</strong> {{ message }}</li>
</ul>
<div class="card-body" ng-if="!my.exercices[current_exercice].submitted || sberr">
<form ng-controller="SubmissionController" ng-submit="ssubmit()">
<div class="form-group" ng-repeat="key in flags">
<label for="sol_{{ key.id }}">{{ key.name }}&nbsp;:</label>
<input type="text" class="form-control" id="sol_{{ key.id }}" autocomplete="off" name="sol_{{ key.id }}" ng-model="key.value" ng-if="!key.found">
<small class="form-text text-muted" ng-if="key.help.length > 0" ng-bind="key.help"></small>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" ng-if="key.found"></span>
</div>
<div class="form-check" ng-repeat="(k,mcq) in mcqs">
<p ng-if="mcq.title" ng-bind="mcq.title"></p>
<div class="custom-control custom-checkbox" ng-repeat="(cid,choice) in mcq.choices" style="display: block">
<input class="custom-control-input" type="checkbox" id="mcq_{{k}}_{{cid}}" name="mcq_{{k}}_{{cid}}" ng-model="choice.value">
<label class="custom-control-label" for="mcq_{{k}}_{{cid}}" ng-bind="choice.label"></label>
</div>
<hr>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-danger" id="sbmt">Soumettre</button>
</div>
</form>
</div>
</div>
<div class="card border-success" ng-if="(my.team_id && my.exercices[current_exercice].solved)">
<div class="card-header bg-success text-white">
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Challenge réussi !
</div>
<div class="card-body">
<p class="card-text">
Vous êtes la {{ my.exercices[current_exercice].solved_rank }}<sup><ng-pluralize count="my.exercices[current_exercice].solved_rank" when="{'one': 're', 'other': 'e'}"></ng-pluralize></sup> équipe à avoir résolu ce challenge à {{ my.exercices[current_exercice].solved_time | date:"mediumTime" }}. Vous avez marqué <ng-pluralize count="my.exercices[current_exercice].gain" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> !
</p>
<a href="/{{ themes[current_theme].urlid }}" class="btn btn-success">Passer au challenge suivant</a>
</div>
</div>
<div class="card border-success" ng-if="(!my.team_id && my.exercices[current_exercice].keys)">
<div class="card-header bg-success text-white">
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Solution du challenge
</div>
<div class="card-body">
<p>
Vérifiez les clefs que vous trouvez en comparant leur <a href="https://blake2.net/">BLAKE2b</a>&nbsp;:
</p>
<dl class="dl-horizontal" ng-repeat="key in my.exercices[current_exercice].keys">
<dt title="{{ key.slice(128) }}">{{ key.slice(128) }}</dt>
<dd><samp class="cksum">{{ key.slice(0, 128) }}</samp></dd>
</dl>
<div class="embed-responsive embed-responsive-16by9">
<iframe type="text/html" ng-if="my.exercices[current_exercice].video_uri" ng-src="{{ my.exercices[current_exercice].video_uri }}" class="embed-responsive-item">
Regardez la vidéo de résolution de cet exercice&nbsp;: <a ng-href="{{ my.exercices[current_exercice].video_uri }}">{{ my.exercices[current_exercice].video_uri }}</a>.
</iframe>
</div>
</div>
</div>
</div>
</div>

148
frontend/static/views/theme.html
View File

@ -1,135 +1,21 @@
<nav role="navigation">
<ol class="breadcrumb">
<li ng-repeat="(k,exercice) in themes[current_theme].exercices" class="breadcrumb-item" ng-class="{active: k == current_exercice, disabled: !my.exercices[k]}">
<a ng-if="(k != current_exercice && !my.exercices[k])">{{ exercice.title }}</a>
<a ng-href="/{{ themes[current_theme].urlid }}/{{ themes[current_theme].exercices[k].urlid }}" ng-if="(k != current_exercice && my.exercices[k])">
<div class="card text-indent mt-2 mb-4">
<div class="card-body">
<p class="card-text text-justify" ng-bind-html="themes[current_theme].intro"></p>
</div>
</div>
<div class="card-group mb-5">
<div class="card" ng-repeat="(k,exercice) in themes[current_theme].exercices">
<div class="card-body">
<h6 class="card-title">
<a ng-href="/{{ themes[current_theme].urlid }}/{{ themes[current_theme].exercices[k].urlid }}" ng-if="my.exercices[k]">
{{ exercice.title }}
<span class="glyphicon glyphicon-gift" aria-hidden="true" ng-if="themes[current_theme].exercices[k].curcoeff > 1.0"></span>
<span class="glyphicon glyphicon-ok" aria-hidden="true" ng-if="(my.team_id && my.exercices[k].solved)"></span>
</a>
<strong ng-if="k == current_exercice" class="text-info">{{ exercice.title }}</strong>
</li>
</ol>
</nav>
<div class="alert alert-warning" style="margin-top:15px;" ng-if="!(my.exercices[current_exercice])">
Vous n'avez pas encore accès à cet exercice.
</div>
<div class="jumbotron text-indent" style="margin-top: 15px" class="well well-lg" ng-if="!(my.exercices[current_exercice])">
<p class="lead text-justify" ng-bind-html="themes[current_theme].intro"></p>
</div>
<div class="jumbotron text-indent" style="margin-top: 15px" class="well well-lg" ng-if="(my.exercices[current_exercice])">
<h3 class="display-4">{{ themes[current_theme].exercices[current_exercice].title }}</h3>
<a ng-href="/tags/{{tag}}" class="badge badge-pill badge-secondary mr-2 mb-2" ng-repeat="tag in themes[current_theme].exercices[current_exercice].tags" ng-bind="tag"></a>
<p class="lead text-justify" ng-bind-html="my.exercices[current_exercice].statement"></p>
<div class="alert alert-{{my.exercices[current_exercice].issuekind}}" ng-if="my.exercices[current_exercice].issue" ng-bind-html="my.exercices[current_exercice].issue"></div>
<hr class="my-3">
<ul>
<li><strong>Gain&nbsp;:</strong> <ng-pluralize count="themes[current_theme].exercices[current_exercice].gain" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> <em ng-if="settings.firstBlood && themes[current_theme].exercices[current_exercice].solved < 1">{{ 1 + settings.firstBlood | coeff }} prem's</em> <em ng-if="themes[current_theme].exercices[current_exercice].curcoeff != 1.0">{{ themes[current_theme].exercices[current_exercice].curcoeff | coeff }} bonus</em></li>
<li><strong>Résolu par&nbsp;:</strong> <ng-pluralize count="themes[current_theme].exercices[current_exercice].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize>.</li>
</ul>
</div>
<div class="row">
<div class="col-xl" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].files.length)" style="margin-bottom: 15px">
<div class="card" style="margin-bottom: 15px">
<div class="card-header text-white">
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Téléchargements
</div>
<div class="list-group">
<a ng-href="{{ file.path }}" target="_self" class="list-group-item" ng-repeat="file in my.exercices[current_exercice].files">
<h1 class="float-left" style="margin: 7px 7px 5px -5px"><span class="glyphicon glyphicon-download" aria-hidden="true"></span></h1>
<h4 class="list-group-item-heading"><strong><samp>{{ file.name }}</samp></strong></h4>
<p class="list-group-item-text"><nobr>Taille&nbsp;: <span title="{{ file.size }} octets">{{ file.size | size }}</span></nobr> &ndash; <nobr><span title="blake2.net">b2sum</span>&nbsp;: <samp class="cksum" title="{{ file.checksum }}">{{ file.checksum }}</samp></nobr></p>
<a ng-href="#" ng-if="!my.exercices[k]">
{{ exercice.title }}
</a>
<a ng-href="/tags/{{tag}}" class="badge badge-pill badge-secondary ml-1 float-right" ng-repeat="tag in themes[current_theme].exercices[k].tags">#{{tag}}</a>
</h6>
<p style="clear: both" class="card-text text-justify">Sunt omnis est quibusdam aperiam quos minima numquam.</p>
</div>
</div>
</div>
<div class="col-xl" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].hints.length)" style="margin-bottom: 15px">
<div class="card border-info" style="margin-bottom: 15px">
<div class="card-header bg-info text-white">
<span class="glyphicon glyphicon-lamp" aria-hidden="true"></span> Indices
</div>
<div class="list-group">
<a target="_self" class="list-group-item text-light" ng-repeat="hint in my.exercices[current_exercice].hints" ng-href="{{ hint.file }}">
<button type="button" ng-click="hsubmit(hint)" class="float-right btn btn-info" ng-if="!(hint.content || hint.file)" ng-class="{disabled: hint.submitted}"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Débloquer</button>
<button type="button" ng-click="hint.hidden = false;" class="float-right btn btn-info" ng-if="!hint.file && hint.hidden"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Afficher</button>
<h1 class="float-left" style="margin: 5px 7px 5px -5px" ng-if="hint.file"><span class="glyphicon glyphicon-download" aria-hidden="true"></span></h1>
<h4 class="list-group-item-heading">{{ hint.title }}</h4>
<p class="list-group-item-text" ng-if="!hint.file && hint.content && !hint.hidden" ng-bind-html="hint.content"></p>
<p class="list-group-item-text" ng-if="hint.file">Cliquez ici pour télécharger l'indice. <samp class="cksum" title="Somme de contrôle BLAKE2b : {{ hint.content }}">{{ hint.content }}</samp></p>
<p class="list-group-item-text" ng-if="!hint.file && !hint.content && (hint.hidden === true || hint.hidden === undefined)">Débloquer cet indice vous fera perdre <ng-pluralize count="hint.cost" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize>.</p>
</a>
</div>
</div>
</div>
<div class="col-xl" style="margin-bottom: 25px">
<div class="card border-danger" ng-if="my.team_id && my.exercices[current_exercice] && !(my.exercices[current_exercice].solved)" style="margin-bottom: 15px">
<div class="card-header bg-danger text-white">
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Faire son rapport
</div>
<ul class="list-group" ng-if="(my.exercices[current_exercice].tries || my.exercices[current_exercice].submitted || sberr)">
<li class="list-group-item text-warning" ng-if="my.exercices[current_exercice].tries"><ng-pluralize count="my.exercices[current_exercice].tries" when="{'one': '{} tentative effectuée', 'other': '{} tentatives effectuées'}"></ng-pluralize>. Dernière solution envoyée à {{ my.exercices[current_exercice].solved_time | date:"mediumTime" }}. <span ng-if="my.exercices[current_exercice].solve_dist"><ng-pluralize count="my.exercices[current_exercice].solve_dist" when="{'one': '{} réponse erronée', 'other': '{} réponses erronées'}"></ng-pluralize>.</span></li>
<li class="list-group-item" ng-class="messageClass" ng-if="my.exercices[current_exercice].submitted || sberr"><strong ng-if="!sberr">Votre solution a bien été envoyée !</strong><strong ng-if="sberr">{{ sberr }}</strong> {{ message }}</li>
</ul>
<div class="card-body" ng-if="!my.exercices[current_exercice].submitted || sberr">
<form ng-controller="SubmissionController" ng-submit="ssubmit()">
<div class="form-group" ng-repeat="key in flags">
<label for="sol_{{ key.id }}">{{ key.name }}&nbsp;:</label>
<input type="text" class="form-control" id="sol_{{ key.id }}" autocomplete="off" name="sol_{{ key.id }}" ng-model="key.value" ng-if="!key.found">
<small class="form-text text-muted" ng-if="key.help.length > 0" ng-bind="key.help"></small>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" ng-if="key.found"></span>
</div>
<div class="form-check" ng-repeat="(k,mcq) in mcqs">
<p ng-if="mcq.title" ng-bind="mcq.title"></p>
<div class="custom-control custom-checkbox" ng-repeat="(cid,choice) in mcq.choices" style="display: block">
<input class="custom-control-input" type="checkbox" id="mcq_{{k}}_{{cid}}" name="mcq_{{k}}_{{cid}}" ng-model="choice.value">
<label class="custom-control-label" for="mcq_{{k}}_{{cid}}" ng-bind="choice.label"></label>
</div>
<hr>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-danger" id="sbmt">Soumettre</button>
</div>
</form>
</div>
</div>
<div class="card border-success" ng-if="(my.team_id && my.exercices[current_exercice].solved)">
<div class="card-header bg-success text-white">
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Challenge réussi !
</div>
<div class="card-body">
<p class="card-text">
Vous êtes la {{ my.exercices[current_exercice].solved_rank }}<sup><ng-pluralize count="my.exercices[current_exercice].solved_rank" when="{'one': 're', 'other': 'e'}"></ng-pluralize></sup> équipe à avoir résolu ce challenge à {{ my.exercices[current_exercice].solved_time | date:"mediumTime" }}. Vous avez marqué <ng-pluralize count="my.exercices[current_exercice].gain" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> !
</p>
<a href="/{{ themes[current_theme].urlid }}" class="btn btn-success">Passer au challenge suivant</a>
</div>
</div>
<div class="card border-success" ng-if="(!my.team_id && my.exercices[current_exercice].keys)">
<div class="card-header bg-success text-white">
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Solution du challenge
</div>
<div class="card-body">
<p>
Vérifiez les clefs que vous trouvez en comparant leur <a href="https://blake2.net/">BLAKE2b</a>&nbsp;:
</p>
<dl class="dl-horizontal" ng-repeat="key in my.exercices[current_exercice].keys">
<dt title="{{ key.slice(128) }}">{{ key.slice(128) }}</dt>
<dd><samp class="cksum">{{ key.slice(0, 128) }}</samp></dd>
</dl>
<div class="embed-responsive embed-responsive-16by9">
<iframe type="text/html" ng-if="my.exercices[current_exercice].video_uri" ng-src="{{ my.exercices[current_exercice].video_uri }}" class="embed-responsive-item">
Regardez la vidéo de résolution de cet exercice&nbsp;: <a ng-href="{{ my.exercices[current_exercice].video_uri }}">{{ my.exercices[current_exercice].video_uri }}</a>.
</iframe>
</div>
</div>
</div>
</div>
</div>
</div>