fair-web/views/user.ejs

<% 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>
                </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>
                                    <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">
                                                <% 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: 50%; " 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>
        </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'), {
    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 %>