Merge pull request 'Separate profile page for events' (#69) from Danhia/website:event/fix-chall-slug into main

Reviewed-on: #69
Reviewed-by: Starthur <contact+42ctf@arthur-trt.fr>

src/events/templates/events/profile.html

@@ -0,0 +1,166 @@
+{% extends 'base.html' %}
+{% block content %}
+{% load i18n %}
+{% load key_value %}
+{% load is_member %}
+{% ismember user.userprofileinfo as is_member %}
+<div class="row">
+  <div class="col-sm-12 col-md-9">
+    <a href="{% url 'events:event_info' event_slug=event.slug %}">< Back to event</a>
+    <div>
+		<h4>{% trans "Challenges Solved by" %} <span class="{{ is_member }}">{{ user.username }} - {{ event.name }}</span></h4>
+		{% if solves%}
+
+	<div class="table table-dark">
+            <div class="card-body">
+				<div id="time-chart"></div>
+            </div>
+  	</div>
+	<table class="table table-dark">
+  		<thead>
+          <tr>
+			  <th scope="col">{% trans "Challenge Name" %}</th>
+			  <th scope="col">{% trans "Category" %}</th>
+			  <th scope="col">{% trans "Points" %}</th>
+			  <th scope="col">{% trans "Date" %}</th>
+          </tr>
+        </thead>
+        <tbody>
+					{% for s in solves %}
+					<tr>
+						<th scope="row"><a href="{% url 'events:event_chall_info' event_slug=event.slug chall_slug=s.ctf.slug %}">{{ s.ctf.name }}</a></th>
+							<td>{{ s.ctf.category.name}}</td>
+							<td>{{ s.ctf.points }}</td>
+							<td>{{ s.flag_date|date:"Y-m-d H:i:s" }}</td>
+          </tr>
+					{% endfor %}
+        </tbody>
+      </table>
+			{% else %}
+			<p>{% trans "It seems that this user has not solved any challenge yet..." %}</p>
+			{% endif %}
+    </div>
+  </div>
+  <div class="d-none d-md-block col-10 col-md-3 right-sidebar">
+    <ul class="list-group">
+		<li class="list-group-item {{ is_member }}">{{ user.username }}</li>
+		<li class="list-group-item">{% trans "Score" %} : {{ score }}</li>
+		<li class="list-group-item">{% trans "Rank" %} : {{ rank }}</li>
+		{% if user.userprofileinfo.portfolio_site %}
+			<li class="list-group-item">
+				<a href="{{ user.userprofileinfo.portfolio_site }}" target="_blank">
+					{{ user.userprofileinfo.portfolio_site }}
+				</a>
+			</li>
+		{% endif %}
+		{% if member %}
+			<li class="list-group-item is-member">{% trans "Status: Member" %}</li>
+		{% else %}
+			<li class="list-group-item">{% trans "Status: Visitor" %}</li>
+		{% endif %}
+		<li class="list-group-item">{% trans "Registered since" %} {{ user.date_joined|date:"d-m-Y" }}</li>
+	</ul>
+
+    <ul class="list-group">
+		<li class="list-group-item">{% trans "Categories stats" %}</li>
+        {% for cat in catsDatas %}
+        <li class="list-group-item" style="padding-bottom: 3;padding-top: 0;">
+            <span>{{ cat.0 }}</span>
+            <div class="progress">
+				{% if cat.3 == '0' %}
+					<div class="progress-bar bg-success" role="progressbar" style="width: 0%;color:#d9d9d9;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0 %</div>
+				{% else %}
+					<div class="progress-bar bg-success" role="progressbar" style="width: {{ cat.3 }}%" aria-valuenow="{{ cat.3 }}" aria-valuemin="0" aria-valuemax="100">{{ cat.3 }} %</div>
+				{% endif %}
+			</div>
+        </li>
+        {% endfor %}
+	</ul>
+
+	<ul class="list-group">
+		<ul class="list-group">
+			<li class="list-group-item">{% trans "Challenges created" %}</li>
+			{% if created %}
+			{% for creat in created %}
+				<li class="list-group-item"><a href="{% url 'ctf' cat_slug=creat.category.slug ctf_slug=creat.slug %}">{{ creat.name }}</a></li>
+			{% endfor %}
+			{% else %}
+				<li class="list-group-item">{% trans "It seems that this user has not created any challenge yet..." %}</li>
+			{% endif %}
+		</ul>
+	</ul>
+  </div>
+</div>
+
+<script src="https://code.highcharts.com/highcharts.src.js"></script>
+<script>
+    Highcharts.theme={colors:["#2b908f","#90ee7e","#f45b5b","#7798BF","#aaeeee","#ff0066","#eeaaee","#55BF3B","#DF5353","#7798BF","#aaeeee"],chart:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:1,y2:1},stops:[[0,"#1D1D1D"],[1,"#1D1D1D"]]},style:{fontFamily:"'Unica One', sans-serif"},plotBorderColor:"#606063"},title:{style:{color:"#E0E0E3",textTransform:"uppercase",fontSize:"20px"}},subtitle:{style:{color:"#E0E0E3",textTransform:"uppercase"}},xAxis:{gridLineColor:"#707073",labels:{style:{color:"#E0E0E3"}},lineColor:"#707073",minorGridLineColor:"#505053",tickColor:"#707073",title:{style:{color:"#A0A0A3"}}},yAxis:{gridLineColor:"#707073",labels:{style:{color:"#E0E0E3"}},lineColor:"#707073",minorGridLineColor:"#505053",tickColor:"#707073",tickWidth:1,title:{style:{color:"#A0A0A3"}}},tooltip:{backgroundColor:"rgba(0, 0, 0, 0.85)",style:{color:"#F0F0F0"}},plotOptions:{series:{dataLabels:{color:"#F0F0F3",style:{fontSize:"13px"}},marker:{lineColor:"#333"}},boxplot:{fillColor:"#505053"},candlestick:{lineColor:"white"},errorbar:{color:"white"}},legend:{backgroundColor:"#1D1D1D",itemStyle:{color:"#E0E0E3"},itemHoverStyle:{color:"#FFF"},itemHiddenStyle:{color:"#606063"},title:{style:{color:"#C0C0C0"}}},credits:{style:{color:"#666"}},labels:{style:{color:"#707073"}},drilldown:{activeAxisLabelStyle:{color:"#F0F0F3"},activeDataLabelStyle:{color:"#F0F0F3"}},navigation:{buttonOptions:{symbolStroke:"#DDDDDD",theme:{fill:"#505053"}}},rangeSelector:{buttonTheme:{fill:"#505053",stroke:"#000000",style:{color:"#CCC"},states:{hover:{fill:"#707073",stroke:"#000000",style:{color:"white"}},select:{fill:"#000003",stroke:"#000000",style:{color:"white"}}}},inputBoxBorderColor:"#505053",inputStyle:{backgroundColor:"#333",color:"silver"},labelStyle:{color:"silver"}},navigator:{handles:{backgroundColor:"#666",borderColor:"#AAA"},outlineColor:"#CCC",maskFill:"rgba(255,255,255,0.1)",series:{color:"#7798BF",lineColor:"#A6C7ED"},xAxis:{gridLineColor:"#505053"}},scrollbar:{barBackgroundColor:"#808083",barBorderColor:"#808083",buttonArrowColor:"#CCC",buttonBackgroundColor:"#606063",buttonBorderColor:"#606063",rifleColor:"#FFF",trackBackgroundColor:"#404043",trackBorderColor:"#404043"}};
+
+	Highcharts.setOptions(Highcharts.theme);
+
+	Highcharts.chart('time-chart', {
+    	title: {
+    	    text: 'Points earned for each category'
+    	},
+    	yAxis: {
+    	    title: {
+    	    	text: 'Points earned'
+    	    }
+    	},
+    	xAxis: {
+			type: 'datetime',
+			labels: {
+				formatter: function() {
+					return Highcharts.dateFormat('%d.%b %Y',
+												this.value);
+				}
+			}
+		},
+    	legend: {
+    	    layout: 'vertical',
+    	    align: 'right',
+    	    verticalAlign: 'middle'
+    	},
+    	plotOptions: {
+			pointStart: {{ user.date_joined|timestamp_fromdate }},
+			series: {
+    	    	label: {
+    	    	    connectorAllowed: false
+    	    	},
+				allowPointSelect: true,
+				marker: {
+				enabled: true
+				}
+    	    }
+    	},
+    	series: [
+			{
+				name: 'Total',
+				data: {{ solved|safe }}
+			},
+			{% for cat in cats %}
+			{
+				name: '{{ cat.name }}',
+				data: {{ pointDatas|keyvalue:cat.name|safe }},
+				visible: false,
+			},
+			{% endfor %}
+		],
+    	responsive: {
+    	    rules: [{
+    	    	condition: {
+    	    	    maxWidth: 500
+    	    	},
+    	    	chartOptions: {
+    	    	    legend: {
+    	    	        layout: 'horizontal',
+    	    	        align: 'center',
+    	    	        verticalAlign: 'bottom'
+    	    	    }
+    	    	}
+    	    }]
+    	}
+	});
+</script>
+{% endblock %}
+

src/events/views/events.py

@@ -289,7 +289,7 @@ def profile(request, user_name, event_slug):
 		somme += s.ctf.points
 		solved.append([s.flag_date.timestamp() * 1000,somme])
 
-	return render(request,'accounts/profile.html', {'user':user_obj, 'solves':solves,'solved':solved,'catsDatas': catsDatas, 'pointDatas': pointDatas,
+	return render(request,'events/profile.html', {'user':user_obj, 'solves':solves,'solved':solved,'catsDatas': catsDatas, 'pointDatas': pointDatas,
-		'rank': rank, 'score' : somme, 'cats':cats})
+		'rank': rank, 'score' : somme, 'cats':cats, 'event': event_info})