You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
11 KiB
237 lines
11 KiB
<% this.title = show_user.username + ' - 用户'; %> |
|
<% include header %> |
|
<style> |
|
#avatar_container:before { |
|
content: ""; |
|
display: block; |
|
padding-top: 100%; |
|
} |
|
</style> |
|
<div class="padding"> |
|
<div class="ui grid"> |
|
<div class="row"> |
|
<div class="five wide column"> |
|
<div class="ui card" style="width: 100%; " id="user_card"> |
|
<div class="blurring dimmable image" id="avatar_container"> |
|
<% if (show_user.allowedEdit) { %> |
|
<div class="ui dimmer transition hidden"> |
|
<div class="content"> |
|
<div class="center"> |
|
<a class="ui inverted button" href="<%= syzoj.utils.makeUrl(['user', show_user.id, 'edit']) %>"><i class="edit icon"></i>修改资料</a> |
|
</div> |
|
</div> |
|
</div> |
|
<% } %> |
|
<img style="margin-top: -100%; " src="<%= syzoj.utils.gravatar(show_user.email, 1000) %>"> |
|
</div> |
|
<div class="content"> |
|
<div class="header"><%= show_user.username %><% if (show_user.nameplate) { %><%- show_user.nameplate %><% } %> <% if (show_user.sex == 1) { %><i class="man icon"></i><% } else if (show_user.sex == -1) { %><i class="woman icon"></i><% } %></div> |
|
<div class="meta"> |
|
<a class="group"><%= show_user.is_admin ? '管理员' : '普通用户' %></a> |
|
</div> |
|
</div> |
|
<div class="extra content"> |
|
<a><i class="check icon"></i>通过 <%= show_user.ac_problems.length %> 题</a> |
|
<a><i class="star icon"></i>Rating <%= show_user.rating %></a> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
<div class="eleven wide column"> |
|
<div class="ui grid"> |
|
<div class="row"> |
|
<div class="sixteen wide column"> |
|
<div class="ui grid"> |
|
<div class="eight wide column"> |
|
<div class="ui grid"> |
|
<div class="row"> |
|
<div class="column"> |
|
<h4 class="ui top attached block header">用户名</h4> |
|
<div class="ui bottom attached segment"><%= show_user.username %><% if (show_user.nameplate) { %><%- show_user.nameplate %><% } %></div> |
|
</div> |
|
</div> |
|
<% if (show_user.emailVisible) { %> |
|
<div class="row"> |
|
<div class="column"> |
|
<h4 class="ui top attached block header">Email</h4> |
|
<div class="ui bottom attached segment" class="font-content"><%= show_user.email %></div> |
|
</div> |
|
</div> |
|
<% } %> |
|
<div class="row"> |
|
<div class="column"> |
|
<h4 class="ui top attached block header">个性签名</h4> |
|
<div class="ui bottom attached segment" class="font-content"><%- show_user.information %></div> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div class="column"> |
|
<h4 class="ui top attached block header">注册于</h4> |
|
<div class="ui bottom attached segment" class="font-content"> |
|
<%= syzoj.utils.formatDate(show_user.register_time) %> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div class="column"> |
|
<h4 class="ui top attached block header">通过的题目</h4> |
|
<div class="ui bottom attached segment"> |
|
<% for (let problem of show_user.ac_problems) { %> |
|
<a href="<%= syzoj.utils.makeUrl(['problem', problem]) %>"><%= problem %></a> |
|
<% } %> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="eight wide column"> |
|
<div class="ui grid"> |
|
<div class="row"> |
|
<div class="column"> |
|
<h4 class="ui top attached block header">统计</h4> |
|
<div class="ui bottom attached segment"> |
|
<div id="pie_chart_legend"></div> |
|
<div style="width: 260px; height: 260px; margin-left: 33.5px; "><canvas style="width: 260px; height: 260px; " id="pie_chart"></canvas></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
<div class="row"> |
|
<div class="column"> |
|
<h4 class="ui top attached block header">帖子</h4> |
|
<div class="ui bottom attached <% if (!show_user.articles.length) { %>center aligned <% } %>segment"> |
|
<% if (!show_user.articles.length) { %>该用户从未发表帖子<% } else { %> |
|
<table class="ui very basic table"> |
|
<thead> |
|
<tr> |
|
<th>标题</th> |
|
<th>时间</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<% for (let article of show_user.articles) { %> |
|
<tr> |
|
<td><a href="<%= syzoj.utils.makeUrl(['article', article.id]) %>"><%= article.title %></a></td> |
|
<td><%= syzoj.utils.formatDate(article.public_time) %></td> |
|
</tr> |
|
<% } %> |
|
</tbody> |
|
</table> |
|
<% } %> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div class="column"> |
|
<h4 class="ui top attached block header">比赛</h4> |
|
<div class="ui bottom attached segment"> |
|
<table class="ui very basic table"> |
|
<thead> |
|
<tr> |
|
<th>比赛</th> |
|
<th>名次</th> |
|
<th>Rating</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<% for (const history of ratingHistories) { %> |
|
<tr> |
|
<td><%= history.contestName %></td> |
|
<td><%= history.rank != null ? history.rank + " / " + history.participants : '' %></td> |
|
<td><%= history.value %> |
|
<% if(history.delta != null) { %> |
|
<span class="<%= history.delta >= 0 ? 'rating_up' : 'rating_down' %>"> |
|
(<%= (history.delta < 0 ? '' : '+') + history.delta %>) |
|
<% } %> |
|
</td> |
|
</tr> |
|
<% } %> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<script> |
|
$(function () { |
|
<% if (show_user.allowedEdit) { %> |
|
$('#user_card .image').dimmer({ |
|
on: 'hover' |
|
}); |
|
<% } %> |
|
|
|
var pie = new Chart(document.getElementById('pie_chart').getContext('2d'), { |
|
aspectRatio: 1, |
|
type: 'pie', |
|
data: { |
|
datasets: [ |
|
{ |
|
data: [ |
|
<%= statistics["Accepted"] %>, |
|
<%= statistics["Wrong Answer"] %>, |
|
<%= statistics["Runtime Error"] %>, |
|
<%= statistics["Time Limit Exceeded"] %>, |
|
<%= statistics["Memory Limit Exceeded"] %>, |
|
<%= statistics["Compile Error"] %>, |
|
], |
|
backgroundColor: [ |
|
"#66dd66", |
|
"#ff6384", |
|
"darkorchid", |
|
"#ffce56", |
|
"#00b5ad", |
|
"#35a0e8" |
|
] |
|
} |
|
], |
|
labels: [ |
|
"Accepted", |
|
"Wrong Answer", |
|
"Runtime Error", |
|
"Time Limit Exceeded", |
|
"Memory Limit Exceeded", |
|
"Compile Error" |
|
] |
|
}, |
|
options: { |
|
responsive: true, |
|
legend: { |
|
display: false |
|
}, |
|
legendCallback: function (chart) { |
|
var text = []; |
|
text.push('<ul style="list-style: none; padding-left: 20px; margin-top: 0; " class="' + chart.id + '-legend">'); |
|
|
|
var data = chart.data; |
|
var datasets = data.datasets; |
|
var labels = data.labels; |
|
|
|
if (datasets.length) { |
|
for (var i = 0; i < datasets[0].data.length; ++i) { |
|
text.push('<li style="font-size: 12px; width: 50%; display: inline-block; color: #666; "><span style="width: 10px; height: 10px; display: inline-block; border-radius: 50%; margin-right: 5px; background-color: ' + datasets[0].backgroundColor[i] + '; "></span>'); |
|
if (labels[i]) { |
|
text.push(labels[i]); |
|
} |
|
text.push('</li>'); |
|
} |
|
} |
|
|
|
text.push('</ul>'); |
|
return text.join(''); |
|
} |
|
}, |
|
}); |
|
|
|
document.getElementById('pie_chart_legend').innerHTML = pie.generateLegend(); |
|
}); |
|
</script> |
|
<% include footer %>
|
|
|