Added survey

assets/css/components/posts/ui.css

@@ -34,3 +34,11 @@
 	text-align: center;
 	padding: 10px;
 }
+
+.post .post-survey-question {
+	text-align: center;
+}
+
+.post .post-survey-chart-contener {
+	margin-bottom: 10px;
+}

assets/js/components/posts/ui.js

@@ -240,6 +240,154 @@ ComunicWeb.components.posts.ui = {
 			ComunicWeb.components.countdown.init(infos.time_end, target);
 		}
 
+		//In case of survey
+		else if(infos.kind == "survey"){
+			
+			//Add survey question
+			var surveyQuestion = createElem2({
+				appendTo: postRoot,
+				type: "h4",
+				innerHTML: infos.data_survey.infos.question,
+				class: "post-survey-question"
+			});
+
+			//Create row
+			var row = createElem2({
+				appendTo: postRoot,
+				type: "div",
+				class: "row post-survey-chart-contener"
+			});
+
+			//Create canvas column
+			var leftColumn = createElem2({
+				appendTo: row,
+				type: "div",
+				class: "col-md-8"
+			});
+
+			//Chart contener
+			var chartContener = createElem2({
+				appendTo: leftColumn,
+				type: "div",
+				class: "chart-responsive"
+			});
+
+			//Create canvas
+			var canvas = createElem2({
+				appendTo: chartContener,
+				type: "canvas",
+			});
+			canvas.style.height = "150px";
+
+			//Create data column
+			var rightColumn = createElem2({
+				appendTo: row,
+				type: "div",
+				class: "col-md-4"
+			});
+
+			//Initialize legend
+			var charLegend = createElem2({
+				appendTo: rightColumn,
+				type: "ul",
+				class: "chart-legend clearfix"
+			});
+
+			//Define chart options
+			var pieOptions = {
+				//Boolean - Whether we should show a stroke on each segment
+				segmentShowStroke: true,
+				//String - The colour of each segment stroke
+				segmentStrokeColor: "#fff",
+				//Number - The width of each segment stroke
+				segmentStrokeWidth: 1,
+				//Number - The percentage of the chart that we cut out of the middle
+				percentageInnerCutout: 50, // This is 0 for Pie charts
+				//Number - Amount of animation steps
+				animationSteps: 100,
+				//String - Animation easing effect
+				animationEasing: "easeOutBounce",
+				//Boolean - Whether we animate the rotation of the Doughnut
+				animateRotate: true,
+				//Boolean - Whether we animate scaling the Doughnut from the centre
+				animateScale: false,
+				//Boolean - whether to make the chart responsive to window resizing
+				responsive: true,
+				// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
+				maintainAspectRatio: false,
+				//String - A legend template
+				legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
+				//String - A tooltip template
+				tooltipTemplate: "<%=value %> <%=label%>"
+			  };
+
+			//Generate survey data
+			var colors = [
+				{fg: "#f56954", bg: "#f56954"},
+				{fg: "#00a65a", bg: "#00a65a"},
+				{fg: "#f39c12", bg: "#f39c12"},
+				{fg: "#00c0ef", bg: "#00c0ef"},
+				{fg: "#3c8dbc", bg: "#3c8dbc"},
+				{fg: "#d2d6de", bg: "#d2d6de"}
+			];
+
+			var surveyData = [];
+			var survey_choices = infos.data_survey.choices;
+			var color_id = 0;
+			var i;
+			for (i in survey_choices){
+				
+				//Get the color
+				if(!colors[color_id])
+					color_id = 0;
+				var curr_color = colors[color_id];
+
+				//Generate choice informations
+				var choiceInfos = {
+					value: survey_choices[i].responses,
+					label: survey_choices[i].name,
+					color: curr_color.fg,
+					highlight: curr_color.bg,
+				}
+
+				//Add the choice to the list
+				surveyData.push(choiceInfos);
+
+				//Increment color
+				color_id++;
+
+			}
+
+			//Initialie chart
+			var pieChart = new Chart(canvas.getContext("2d"));
+			pieChart.Doughnut(surveyData, pieOptions);
+
+			//Fill legend
+			var i;
+			for(i in surveyData){
+				
+				//Legend list elem
+				var lengendLi = createElem2({
+					appendTo: charLegend,
+					type: "li"
+				});
+
+				createElem2({
+					appendTo: lengendLi,
+					type: "i",
+					class: "fa fa-circle-o"
+				}).style.color = surveyData[i].color;
+
+				createElem2({
+					appendTo: lengendLi,
+					type: "span",
+					innerHTML: " "+surveyData[i].label
+				});
+
+			}
+
+		}
+
 		//If the kind of post was not implemented
 		else {
 			//Log error

system/config/dev.config.php

@@ -80,6 +80,9 @@ class Dev {
 		//Light box
 		"3rdparty/lightbox/ekko-lightbox.min.js",
 
+		//ChartJS
+		"3rdparty/adminLTE/plugins/chartjs/Chart.min.js",
+
 		//VideoJS
 		//"3rdparty/videojs/6.4.0/video.min.js"
 	);