fic/server
1
0
Fork 0
Code Issues Pull Requests 8 Releases Wiki Activity

public: new carousels in pubic interface: teams and exercices

Browse Source 
+ fix autocarousel directive
This commit is contained in:
nemunaire 2018-02-02 21:10:31 +01:00
parent 68e5c4cd2b
commit 1dcebc4eca
5 changed files with 66 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
admin/static/js/app.js
View File

@ -535,7 +535,7 @@ angular.module("FICApp")
"countdown": "Compte à rebours",
"message": "Message",
"panel": "Boîte",
"themes": "Carousel de thèmes",
"carousel": "Carousel",
"exercice": "Exercice",
"table": "Tableau",
"rank": "Classement",
@ -544,6 +544,11 @@ angular.module("FICApp")
"teams": "Accueil des équipes",
"public": "Accueil du public",
};
$scope.carousel_types = {
"exercices": "Exercices",
"teams": "Équipes",
"themes": "Thèmes",
};
$scope.colors = {
"primary": "Primaire",
"secondary": "Secondaire",

9
admin/static/views/public.html
View File

@ -51,21 +51,22 @@
</div>
</div>
<div class="form-group row" ng-if="scene.type == 'welcome'">
<div class="form-group row" ng-if="scene.type == 'welcome' || scene.type == 'carousel'">
<label for="wtype" class="col-sm-2 col-form-label col-form-label-sm">Sorte</label>
<div class="col-sm-10">
<select class="custom-select custom-select-sm" id="wtype" ng-model="scene.params.kind" ng-options="k as v for (k, v) in welcome_types"></select>
<select class="custom-select custom-select-sm" id="wtype" ng-if="scene.type == 'welcome'" ng-model="scene.params.kind" ng-options="k as v for (k, v) in welcome_types"></select>
<select class="custom-select custom-select-sm" id="wtype" ng-if="scene.type == 'carousel'" ng-model="scene.params.kind" ng-options="k as v for (k, v) in carousel_types"></select>
</div>
</div>
<div class="form-group row" ng-if="scene.type == 'panel' || scene.type == 'themes' || scene.type == 'countdown'">
<div class="form-group row" ng-if="scene.type == 'panel' || scene.type == 'carousel' || scene.type == 'countdown'">
<label for="ptype" class="col-sm-2 col-form-label col-form-label-sm">Couleur du cadre</label>
<div class="col-sm-10">
<select class="custom-select custom-select-sm" id="ptype" ng-model="scene.params.color" ng-options="k as v for (k, v) in colors"></select>
</div>
</div>
<div class="form-group row" ng-if="scene.type == 'message' || scene.type == 'panel' || scene.type == 'themes' || scene.type == 'countdown'">
<div class="form-group row" ng-if="scene.type == 'message' || scene.type == 'panel' || scene.type == 'carousel' || scene.type == 'countdown'">
<label for="mtitle" class="col-sm-2 col-form-label col-form-label-sm">Titre</label>
<div class="col-sm-10">
<input type="text" id="mtitle" ng-model="scene.params.title" class="form-control form-control-sm">

8
frontend/static/js/common.js
View File

@ -24,11 +24,13 @@ angular.module("FICApp")
}
}
}])
.directive('autocarousel', [function() {
.directive('autocarousel', ['$timeout', function($timeout) {
return {
restrict: 'A',
link : function() {
$('#carouselThemes').carousel();
link : function($scope, $element) {
$timeout(function() {
$($element[0]).carousel();
});
}
}
}]);

2
frontend/static/js/public.js
View File

@ -125,7 +125,7 @@ angular.module("FICApp")
.controller("DataController", function($scope, $http, $rootScope, $interval) {
var refreshScene = function() {
$http.get(window.location.pathname.replace(".html", ".json")).then(function(response) {
if ($scope.lastpublicsetag != undefined && $scope.lastpublicsetag == response.headers().etag)
if ($scope.lastpublicetag != undefined && $scope.lastpublicetag == response.headers().etag)
return;
$scope.lastpublicetag = response.headers().etag;

53
frontend/static/public.html
View File

@ -173,15 +173,16 @@
</table>
</div>
<div class="card" ng-if="s.type == 'themes' && !s.params.hide">
<div class="card" ng-if="s.type == 'carousel' && !s.params.hide">
<div class="card-header bg-{{ s.params.color }} text-white" ng-if="s.params.title">
<h3 style="margin:0" ng-bind="s.params.title" class="text-dark" ng-if="s.params.color == 'light'"></h3>
<h3 style="margin:0" ng-bind="s.params.title" ng-if="s.params.color != 'light'"></h3>
</div>
<div class="card-body bg-primary" autocarousel>
<div class="carousel slide" id="carouselThemes" data-interval="30000" style="height: 270px">
<div class="card-body bg-primary">
<div class="carousel slide" data-interval="30000" style="height: 270px" autocarousel ng-if="s.params.kind == 'themes'">
<ol class="carousel-indicators">
<li data-target="#carouselThemes" data-slide-to="{{k}}" ng-repeat="(k, theme) in themes" ng-class="{active: $first}"></li>
<li data-slide-to="{{k}}" ng-repeat="(k, theme) in themes" ng-class="{active: $first}"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item" ng-repeat="theme in themes" ng-class="{active: $first}">
@ -192,6 +193,50 @@
</div>
</div>
</div>
<div class="carousel slide" data-interval="7000" style="height: 100px" autocarousel ng-if="s.params.kind == 'teams'">
<ol class="carousel-indicators">
<li data-slide-to="{{k}}" ng-repeat="(k, team) in teams" ng-class="{active: $first}"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item" ng-repeat="team in teams" ng-class="{active: $first}" ng-if="team.rank">
<div class="carousel-caption">
<p class="lead" style="margin: 10px" ng-bind="team.name"></p>
<ul class="list-inline">
<li>Classement&nbsp;: {{ team.rank }}<sup><ng-pluralize count="team.rank" when="{'one': 're', 'other': 'e'}"></ng-pluralize></sup></li>
<li><ng-pluralize count="team.score" when="{'0': 'aucun point', 'one': '{} point', 'other': '{} points'}"></ng-pluralize></li>
</ul>
</div>
</div>
</div>
</div>
<div class="carousel slide" data-interval="30000" style="height: 270px" autocarousel ng-if="s.params.kind == 'exercices'">
<ol class="carousel-indicators">
<li data-slide-to="{{k}}" ng-repeat="(k, exercice) in my.exercices" ng-class="{active: $first}"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item" ng-repeat="(eid, exercice) in my.exercices" ng-class="{active: $first}">
<div class="carousel-caption">
<p class="lead">
<strong>Challenge <em>{{ themes[exercice.theme_id].exercices[eid].title }}</em> du thème {{ themes[exercice.theme_id].name }}</strong>
<br>
<small class="authors" ng-if="themes[exercice.theme_id].authors">par {{ themes[exercice.theme_id].authors }}</small>
</p>
<p ng-bind-html="exercice.statement"></p>
<ul class="list-inline text-secondary">
<li>Rapporte <ng-pluralize count="themes[exercice.theme_id].exercices[eid].gain" when="{'0': 'aucun point', 'one': '{} point', 'other': '{} points'}"></ng-pluralize></li>
<li ng-if="exercice.files"><ng-pluralize count="exercice.files.length" when="{'0': 'Aucun fichier disponible', 'one': '{} fichier disponible', 'other': '{} fichiers disponibles'}"></ng-pluralize></li>
<li ng-if="exercice.hints.length"><ng-pluralize count="exercice.hints.length" when="{'0': 'Aucun indice disponible', 'one': '{} indice disponible', 'other': '{} indices disponibles'}"></ng-pluralize></li>
<li>Tenté par <ng-pluralize count="themes[exercice.theme_id].exercices[eid].tried" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
<li ng-if="exercice.tries"><ng-pluralize count="exercice.tries" when="{'0': 'Aucune tentative', 'one': '{} tentative', 'other': '{} tentatives'}"></ng-pluralize></li>
<li>Résolu par <ng-pluralize count="themes[exercice.theme_id].exercices[eid].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>