frontend: use ng-cloak and ng-if

This commit is contained in:
nemunaire 2017-02-22 04:39:14 +01:00
parent 2a90a67c74
commit 5ff12410fb
5 changed files with 73 additions and 76 deletions

View File

@ -22,52 +22,45 @@
</head>
<body>
<noscript>
<div class="alert alert-danger">
<strong>Veuillez activer le JavaScript.</strong> Ce site requiert un navigateur interprêtant le JavaScript pour fonctionner. Veuillez l'activer ou en télécharger un supportant cette technologie.
</div>
</noscript>
<div class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-left col-sm-3" ng-show="!(time.start || my.team_id)">
<a href="https://www.forum-fic.com/">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
</a>
</div>
<div class="navbar-left col-sm-3" ng-show="(time.start || my.team_id)">
<a href="/">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
</a>
</div>
<div class="navbar-right col-sm-2">
<a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita" class="center-block">
</a>
</div>
<div id="clock" class="col-sm-7 text-center" ng-class="{expired: time.expired, end: time.end}" ng-show="time.start || my.team_id">
<span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span>
<span id="min">{{ time.minutes | time }}</span>
<span class="point">:</span>
<span id="sec">{{ time.seconds | time }}</span>
</div>
<div id="clock" class="col-sm-7" ng-show="!(time.start || my.team_id)" style="padding: 25px">
<div class="btn-group btn-group-justified btn-group-lg">
<a class="btn btn-default" href="/">
<span class="glyphicon glyphicon-home"></span> Accueil
<div class="navbar-left col-md-3">
<a href="https://www.forum-fic.com/" ng-if="!(time.start || my.team_id)">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
</a>
<a class="btn btn-default" href="/rank">
<span class="glyphicon glyphicon-list"></span> Classement
<a href="/" ng-if="(time.start || my.team_id)" ng-cloak>
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
</a>
<a class="btn btn-default" href="https://www.youtube.com/playlist?list=PLSJ8QLhKMtQv7jRhdAn9wXSMYTsvqfieX">
<span class="glyphicon glyphicon-blackboard"></span> Vidéos
</div>
<div id="clock" class="col-md-6 text-center" ng-hide="1">Chargement...</div>
<div id="clock" class="col-md-6 text-center" ng-class="{expired: time.expired, end: time.end}" ng-if="time.start || my.team_id" ng-cloak>
<span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span>
<span id="min">{{ time.minutes | time }}</span>
<span class="point">:</span>
<span id="sec">{{ time.seconds | time }}</span>
</div>
<div id="clock" class="col-md-6" ng-if="!(time.start || my.team_id)" style="padding: 25px" ng-cloak>
<div class="btn-group btn-group-justified btn-group-lg">
<a class="btn btn-default" href="/">
<span class="glyphicon glyphicon-home"></span> Accueil
</a>
<a class="btn btn-default" href="/rank">
<span class="glyphicon glyphicon-list"></span> Classement
</a>
<a class="btn btn-default disabled" href="https://www.youtube.com/playlist?list=PLSJ8QLhKMtQv7jRhdAn9wXSMYTsvqfieX">
<span class="glyphicon glyphicon-blackboard"></span> Vidéos
</a>
</div>
</div>
<div class="col-md-3 text-right">
<a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita" class="center-block">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container" ng-controller="DataController">
@ -75,7 +68,7 @@
<div class="row">
<div class="col-sm-3">
<div class="panel panel-default" ng-show="(my.team_id)" style="margin-top: 10px; margin-bottom: 0px;">
<div class="panel panel-default" ng-if="(my.team_id)" style="margin-top: 10px; margin-bottom: 0px;" ng-cloak>
<div class="panel-heading" style="background-color: {{ teams[my.team_id].color }}; color: {{ teams[my.team_id].color }};">
<a style="margin: -8px -13px; color: {{ teams[my.team_id].color }};" class="pull-right btn btn-default" href="/edit"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
<div class="panel-title">
@ -83,7 +76,7 @@
</div>
</div>
<div class="panel-body">
<span ng-show="teams[my.team_id].rank">{{ teams[my.team_id].rank }}<sup><sup><ng-pluralize count="teams[my.team_id].rank" when="{'one': 're', 'other': 'e'}"></ng-pluralize></sup></sup> sur {{ teams_count }} &ndash;</span>
<span ng-if="teams[my.team_id].rank">{{ teams[my.team_id].rank }}<sup><sup><ng-pluralize count="teams[my.team_id].rank" when="{'one': 're', 'other': 'e'}"></ng-pluralize></sup></sup> sur {{ teams_count }} &ndash;</span>
<ng-pluralize count="my.score" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize>
<div style="margin: -8px -10px;" class="pull-right btn-group">
<a class="btn btn-default" href="/rules"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a>
@ -95,9 +88,9 @@
<div class="col-sm-9">
<div class="page-header">
<h1 ng-show="(current_theme)">{{ themes[current_theme].name }} <small class="authors" ng-show="themes[current_theme].authors">{{ themes[current_theme].authors }}</small></h1>
<h1 ng-show="(!current_theme && title)">{{ title }} <small class="authors" ng-show="authors">{{ authors }}</small></h1>
<h1 ng-show="(!current_theme && !title)">Challenge forensic 2017 <small class="authors">Laboratoire SRS, Epita</small></h1>
<h1 ng-if="(current_theme)" ng-cloak>{{ themes[current_theme].name }} <small class="authors" ng-if="themes[current_theme].authors">{{ themes[current_theme].authors }}</small></h1>
<h1 ng-if="(!current_theme && title)" ng-cloak>{{ title }} <small class="authors" ng-if="authors">{{ authors }}</small></h1>
<h1 ng-if="(!current_theme && !title)">Challenge forensic 2017 <small class="authors">Laboratoire SRS, Epita</small></h1>
</div>
</div>
@ -106,16 +99,20 @@
<div class="row">
<div class="col-sm-3">
<div class="list-group">
<a ng-repeat="(k,theme) in themes" ng-class="{active: k == current_theme}" class="list-group-item" ng-href="/{{ k }}"><span class="badge"><span class="glyphicon glyphicon-fire" aria-hidden="true" ng-show="max_solved > 1 && theme.solved == max_solved" alt="Déjà {{ theme.solved }} challenges résolus dans ce thème"></span> <span class="glyphicon glyphicon-gift" aria-hidden="true" ng-show="theme.exercice_coeff_max > 1" alt="Des bonus existent pour au moins un challenge de ce thème"></span> <span ng-show="(my.team_id)">{{ theme.exercice_solved }}/</span>{{ theme.exercice_count }}</span>{{ theme.name }}</a>
<div class="list-group" ng-cloak>
<a ng-repeat="(k,theme) in themes" ng-class="{active: k == current_theme}" class="list-group-item" ng-href="/{{ k }}"><span class="badge"><span class="glyphicon glyphicon-fire" aria-hidden="true" ng-if="max_solved > 1 && theme.solved == max_solved" alt="Déjà {{ theme.solved }} challenges résolus dans ce thème"></span> <span class="glyphicon glyphicon-gift" aria-hidden="true" ng-if="theme.exercice_coeff_max > 1" alt="Des bonus existent pour au moins un challenge de ce thème"></span> <span ng-if="(my.team_id)">{{ theme.exercice_solved }}/</span>{{ theme.exercice_count }}</span>{{ theme.name }}</a>
</div>
<a href="https://srs.epita.fr/">
<img src="/img/srs.png" class="center-block" alt="Epita">
</a>
<a href="https://srs.epita.fr/"><img src="/img/srs.png" alt="Laboratoire SRS Épita" style="width: 48%; max-width: 200px;"></a>
<img src="/img/rcc.png" alt="Réserve Citoyenne Cyberdéfense" style="width: 48%; max-width: 200px;">
</div>
<div class="col-sm-9" ng-view>
<noscript>
<div class="alert alert-danger">
<strong>Veuillez activer le JavaScript.</strong> Ce site requiert un navigateur interprêtant le JavaScript pour fonctionner. Veuillez l'activer ou en télécharger un supportant cette technologie.
</div>
</noscript>
</div>
</div>

View File

@ -6,7 +6,7 @@
dès maintenant en vous rendant sur la page de <a href="/edit">votre
équipe</a>.
</p>
<p class="text-warning" ng-show="(my.team_id && !my.members.length)">
<p class="text-warning" ng-if="(my.team_id && !my.members.length)">
Les membres de votre équipes ne sont pas encore enregistrés.
Passez voir l'équipe serveur pour corriger cela.
</p>
@ -75,7 +75,7 @@
</div>
</div>
<div ng-controller="RankController" ng-show="!(my.team_id)">
<div ng-controller="RankController" ng-if="!(my.team_id)">
<ng-include src="'views/rank.html'">
</div>

View File

@ -7,12 +7,12 @@
<tr>
<th ng-repeat="field in fields" ng-click="order(field)" width="33%">
{{ field | rankTitle }}
<span class="glyphicon" ng-show="rankOrder === field" ng-class="{'glyphicon-chevron-up': reverse, 'glyphicon-chevron-down': !reverse}"></span>
<span class="glyphicon" ng-if="rankOrder === field" ng-class="{'glyphicon-chevron-up': reverse, 'glyphicon-chevron-down': !reverse}"></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="team in rank | filter: query | orderBy:rankOrder:reverse" ng-click="show(team.id)" ng-show="team.rank">
<tr ng-repeat="team in rank | filter: query | orderBy:rankOrder:reverse" ng-click="show(team.id)" ng-if="team.rank">
<td ng-repeat="field in fields" ng-class="{info: my.team_id == team.id}">
{{ team[field] }}
</td>

View File

@ -1,14 +1,14 @@
<div class="panel panel-default">
<div class="panel-heading">Votre équipe est composée de :</div>
<div class="panel-body" ng-show="!my.members.length">
<div class="panel-body" ng-if="!my.members.length">
Passez voir l'équipe serveur pour compléter ces informations.
</div>
<ul class="list-group" ng-show="my.members.length">
<ul class="list-group" ng-if="my.members.length">
<li class="list-group-item" ng-repeat="member in my.members">
{{ member.firstname | capitalize }}
<span style="font-style: italic" ng-show="{{ member.nickname }}">{{ member.nickname }}</span>
<span style="font-style: italic" ng-if="{{ member.nickname }}">{{ member.nickname }}</span>
<span style="font-variant: small-caps;">{{ member.lastname | capitalize }}</span>
<span ng-show="member.company">- {{ member.company}}</span>
<span ng-if="member.company">- {{ member.company}}</span>
</li>
</ul>
</div>
@ -16,7 +16,7 @@
<div class="panel panel-info">
<div class="panel-heading">Changer de nom d'équipe</div>
<div class="panel-body">
<p ng-class="messageClass" ng-show="message || sberr"><strong ng-show="!sberr">Votre demande a bien été envoyée !</strong><strong ng-show="sberr">{{ sberr }}</strong> {{ message }}</p>
<p ng-class="messageClass" ng-if="message || sberr"><strong ng-if="!sberr">Votre demande a bien été envoyée !</strong><strong ng-if="sberr">{{ sberr }}</strong> {{ message }}</p>
<form class="form-horizontal" ng-submit="tsubmit()">
<div class="form-group">

View File

@ -1,19 +1,19 @@
<ul class="nav nav-tabs nav-justified">
<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 ng-href="/{{ current_theme }}/{{ k }}" ng-show="(my.exercices[k])">{{ exercice.title }} <span class="glyphicon glyphicon-gift" aria-hidden="true" ng-show="themes[current_theme].exercices[k].curcoeff > 1.0"></span> <span class="glyphicon glyphicon-ok" aria-hidden="true" ng-show="(my.team_id && my.exercices[k].solved)"></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-if="(!my.exercices[k])">{{ exercice.title }}</a><a ng-href="/{{ current_theme }}/{{ k }}" 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></li>
</ul>
<div class="alert alert-warning" style="margin-top:15px;" ng-show="!(my.exercices[current_exercice])">
<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 style="margin-top: 15px" class="well well-lg" ng-show="(my.exercices[current_exercice])">
<div style="margin-top: 15px" class="well well-lg" ng-if="(my.exercices[current_exercice])">
<p ng-bind-html="my.exercices[current_exercice].statement"></p>
<ul>
<li><strong>Gain :</strong> <ng-pluralize count="themes[current_theme].exercices[current_exercice].gain" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> <em ng-show="themes[current_theme].exercices[current_exercice].curcoeff != 1.0">{{ themes[current_theme].exercices[current_exercice].curcoeff | coeff }} happy hour</em> <em ng-show="themes[current_theme].exercices[current_exercice].solved < 1">{{ 1 + settings.firstBlood | coeff }} first blood</em></li>
<li><strong>Gain :</strong> <ng-pluralize count="themes[current_theme].exercices[current_exercice].gain" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> <em ng-if="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 :</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="panel panel-default" ng-show="(my.exercices[current_exercice] && my.exercices[current_exercice].files.length)">
<div class="panel panel-default" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].files.length)">
<div class="panel-heading">
<div class="panel-title"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Téléchargements</div>
</div>
@ -26,36 +26,36 @@
</div>
</div>
<div class="panel panel-info" ng-show="(my.exercices[current_exercice] && my.exercices[current_exercice].hints.length)">
<div class="panel panel-info" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].hints.length)">
<div class="panel-heading">
<div class="panel-title"><span class="glyphicon glyphicon-lamp" aria-hidden="true"></span> Indices</div>
</div>
<div class="list-group">
<a target="_self" class="list-group-item" ng-repeat="hint in my.exercices[current_exercice].hints" ng-href="{{ hint.file }}">
<button ng-click="hsubmit(hint)" class="pull-right btn btn-info" ng-show="!(hint.content || hint.file)" ng-class="{disabled: hint.submitted}"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Débloquer</button>
<h1 class="pull-left" style="margin: 5px 7px 5px -5px" ng-show="hint.file"><span class="glyphicon glyphicon-download" aria-hidden="true"></span></h1>
<button ng-click="hsubmit(hint)" class="pull-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>
<h1 class="pull-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-show="hint.content" ng-bind-html="hint.content"></p>
<p class="list-group-item-text" ng-show="hint.file">Cliquez ici pour télécharger l'indice.</p>
<p class="list-group-item-text" ng-show="!(hint.content || hint.file)">Débloquer cet indice vous coûtera <ng-pluralize count="hint.cost" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize>.</p>
<p class="list-group-item-text" ng-if="hint.content" ng-bind-html="hint.content"></p>
<p class="list-group-item-text" ng-if="hint.file">Cliquez ici pour télécharger l'indice.</p>
<p class="list-group-item-text" ng-if="!(hint.content || hint.file)">Débloquer cet indice vous coûtera <ng-pluralize count="hint.cost" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize>.</p>
</a>
</div>
</div>
<div class="panel panel-danger" ng-show="my.team_id && my.exercices[current_exercice] && !(my.exercices[current_exercice].solved)">
<div class="panel panel-danger" ng-if="my.team_id && my.exercices[current_exercice] && !(my.exercices[current_exercice].solved)">
<div class="panel-heading">
<div class="panel-title"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Soumettre une solution</div>
</div>
<ul class="list-group" ng-show="(my.exercices[current_exercice].tries || my.exercices[current_exercice].submitted || sberr)">
<li class="list-group-item text-warning" ng-show="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" }}.</li>
<li class="list-group-item" ng-class="messageClass" ng-show="my.exercices[current_exercice].submitted || sberr"><strong ng-show="!sberr">Votre solution a bien été envoyée !</strong><strong ng-show="sberr">{{ sberr }}</strong> {{ message }}</li>
<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" }}.</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="panel-body" ng-show="!my.exercices[current_exercice].submitted || sberr">
<div class="panel-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" ng-class="{'has-success': key.found, 'has-feedback': key.found}">
<label for="sol_{{ key.id }}">{{ key.name }} :</label>
<input type="text" class="form-control" id="sol_{{ key.id }}" name="sol_{{ key.id }}" ng-model="key.value" ng-disabled="key.found">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" ng-show="key.found"></span>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" ng-if="key.found"></span>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-danger" id="sbmt">Soumettre</button>
@ -64,7 +64,7 @@
</div>
</div>
<div class="panel panel-success" ng-show="(my.team_id && my.exercices[current_exercice].solved)">
<div class="panel panel-success" ng-if="(my.team_id && my.exercices[current_exercice].solved)">
<div class="panel-heading">
<div class="panel-title"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Challenge réussi !</div>
</div>
@ -73,7 +73,7 @@
</div>
</div>
<div class="panel panel-success" ng-show="(!my.team_id && my.exercices[current_exercice].keys)">
<div class="panel panel-success" ng-if="(!my.team_id && my.exercices[current_exercice].keys)">
<div class="panel-heading">
<div class="panel-title"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Solution du challenge</div>
</div>
@ -86,7 +86,7 @@
<dd class="samp"><samp>{{ key.slice(0, 128) }}</samp></dd>
</dl>
<div class="embed-responsive">
<iframe type="text/html" ng-show="my.exercices[current_exercice].video_uri" ng-src="{{ my.exercices[current_exercice].video_uri }}" class="embed-responsive-item">
<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 : <a ng-href="{{ my.exercices[current_exercice].video_uri }}">{{ my.exercices[current_exercice].video_uri }}</a>.
</iframe>
</div>