public front: add new carousel displaying themes

admin/static/js/app.js

@@ -535,6 +535,7 @@ angular.module("FICApp")
 	    "countdown": "Compte à rebours",
 	    "message": "Message",
 	    "panel": "Boîte",
+	    "themes": "Carousel de thèmes",
 	    "exercice": "Exercice",
 	    "table": "Tableau",
 	    "rank": "Classement",
@@ -585,6 +586,10 @@ angular.module("FICApp")
 			type: "welcome",
 			params: { kind: "public" },
 		    },
+		    {
+			type: "themes",
+			params: { color: "light", title: "Présentation des entreprises ciblées"},
+		    },
 		];
 	    else if (scene == "start")
 		$scope.scenes = [

frontend/static/js/common.js

@@ -23,6 +23,14 @@ angular.module("FICApp")
 		});
 	    }
 	}
+    }])
+    .directive('autocarousel', [function() {
+	return {
+	    restrict: 'A',
+	    link : function() {
+		$('#carouselThemes').carousel();
+	    }
+	}
     }]);
 
 angular.module("FICApp")

frontend/static/public.html

@@ -173,6 +173,28 @@
 	    </table>
 	    </div>
 
+	    <div class="card" ng-if="s.type == 'themes' && !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">
+		  <ol class="carousel-indicators">
+		    <li data-target="#carouselThemes" 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}">
+		      <div class="carousel-caption">
+			<h3 class="text-left" style="margin: 10px" ng-bind="theme.name"></h3>
+			<p class="text-justify text-bold" style="padding: 5px 16px; font-size: 111%" ng-bind="theme.intro"></p>
+		      </div>
+		    </div>
+		  </div>
+		</div>
+	      </div>
+	    </div>
+
 	</div>
       </div>
 
@@ -215,7 +237,7 @@
 		    <img src="/img/rcc.png" alt="Réserve Citoyenne Cyberdéfense" style="height:14vh">
 		  </div>
 		</div>
-		<div class="carousel-item">
+		<div class="carousel-item active">
 		  <div class="carousel-caption">
 		    <h2 style="margin: 17px">Bienvenue au challenge forensic&nbsp;!</h2>
 		  </div>
@@ -257,7 +279,7 @@
 		    </p>
 		  </div>
 		</div>
-		<div class="carousel-item active">
+		<div class="carousel-item">
 		  <div class="carousel-caption">
 		    <table class="table table-sm table-striped">
 		      <tbody>