Skip to content

Commit fabbbc6

Browse files
ReqweyReqwey
committed
Update UI
* improve season UI * improve search statistics
1 parent 88cfdfe commit fabbbc6

File tree

5 files changed

+119
-36
lines changed

5 files changed

+119
-36
lines changed

‎views/contest_edit.ejs

+1-3
Original file line numberDiff line numberDiff line change
@@ -135,9 +135,7 @@
135135
</div>
136136
</div>
137137
<div style="text-align: center; ">
138-
<button id="submit_contest" class="ui labeled submit icon button">
139-
<i class="icon edit"></i> 发布比赛
140-
</button>
138+
<button id="submit_contest" class="ui pink submit button">发布比赛</button>
141139

142140
</div>
143141
</div>

‎views/foot.ejs

+84-20
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@
2424
</div>
2525
</div>
2626
<script type="text/javascript">
27+
Map.prototype.forEachAsync = async function (fn) {
28+
return Promise.all(this.forEach(fn));
29+
};
30+
Array.prototype.forEachAsync = async function (fn) {
31+
return Promise.all(this.map(fn));
32+
};
2733
function getSeasonId() {
2834
let str = window.location.pathname.split('/').filter(x => x);
2935
if (str.length > 2)
@@ -55,7 +61,11 @@ function getDetailCla(id) {
5561
default: break;
5662
}
5763
}
58-
$('#infoContent').html(`<div class="ui four statistics">
64+
$('#infoContent').html(`
65+
<div class="ui inverted disabled dimmer" id="infoLoader">
66+
<div class="ui text pink loader">正在加载...</div>
67+
</div>
68+
<div class="ui four statistics">
5969
<div class="statistic">
6070
<div class="value req">
6171
${rankTotal}
@@ -91,15 +101,35 @@ function getDetailCla(id) {
91101
</div>
92102
<h2>详细信息</h2><blockquote id="statistic_info"></blockquote>`)
93103
94-
for (let a of str) {
95-
let cid = a.split('#')[0], rank = a.split('#')[1];
96-
fetch(`/sport/queryContest/${cid}`)
97-
.then(response => response.json())
98-
.then(data => {
99-
$("#statistic_info").append(`<p>${getGradeName(data.grade) + getTypeName(data.type) + data.title}第 ${rank} 名。</p>`);
104+
let map = new Map();
105+
$('#infoLoader').addClass('active');
106+
$('#infoLoader').removeClass('disabled');
107+
(async function() {
108+
await str.forEachAsync(async a => {
109+
110+
let cid = a.split('#')[0], rank = a.split('#')[1];
111+
112+
let res = await fetch(`/sport/queryContest/${cid}`);
113+
let data = await res.json();
114+
let formalTitle = getGradeName(data.grade) + getTypeName(data.type) + data.title;
115+
let tmp = map.get(formalTitle);
116+
if (tmp) {
117+
map.set(formalTitle, tmp + '、' + rank);
118+
} else {
119+
map.set(formalTitle, rank);
120+
}
121+
122+
})
123+
try {
124+
await map.forEachAsync((value, key) => {
125+
console.log(value, key)
126+
$("#statistic_info").append(`<p>${key}第 ${value} 名。</p>`);
100127
})
101-
}
102128
129+
} catch (e) {}
130+
$('#infoLoader').removeClass('active');
131+
$('#infoLoader').addClass('disabled');
132+
}) ();
103133
}
104134
function getDetailStu(id) {
105135
$('#infoModal').modal('show');
@@ -117,7 +147,10 @@ function getDetailStu(id) {
117147
default: break;
118148
}
119149
}
120-
$('#infoContent').html(`<div class="ui four statistics">
150+
$('#infoContent').html(`
151+
<div class="ui inverted disabled dimmer" id="infoLoader">
152+
<div class="ui text pink loader">正在加载...</div>
153+
</div><div class="ui four statistics">
121154
<div class="statistic">
122155
<div class="value req">
123156
${rankTotal}
@@ -153,14 +186,36 @@ function getDetailStu(id) {
153186
</div>
154187
<h2>详细信息</h2><blockquote id="statistic_info"></blockquote>`)
155188
156-
for (let a of str) {
157-
let cid = a.split('#')[0], rank = a.split('#')[1];
158-
fetch(`/sport/queryContest/${cid}`)
159-
.then(response => response.json())
160-
.then(data => {
161-
$("#statistic_info").append(`<p>${getGradeName(data.grade) + getTypeName(data.type) + data.title}第 ${rank} 名。</p>`);
189+
let map = new Map();
190+
$('#infoLoader').addClass('active');
191+
$('#infoLoader').removeClass('disabled');
192+
(async function() {
193+
await str.forEachAsync(async a => {
194+
195+
let cid = a.split('#')[0], rank = a.split('#')[1];
196+
197+
let res = await fetch(`/sport/queryContest/${cid}`);
198+
let data = await res.json();
199+
let formalTitle = getGradeName(data.grade) + getTypeName(data.type) + data.title;
200+
let tmp = map.get(formalTitle);
201+
if (tmp) {
202+
map.set(formalTitle, tmp + '、' + rank);
203+
} else {
204+
map.set(formalTitle, rank);
205+
}
206+
207+
})
208+
try {
209+
await map.forEachAsync((value, key) => {
210+
console.log(value, key)
211+
$("#statistic_info").append(`<p>${key}第 ${value} 名。</p>`);
162212
})
163-
}
213+
214+
} catch (e) {}
215+
$('#infoLoader').removeClass('active');
216+
$('#infoLoader').addClass('disabled');
217+
}) ();
218+
164219
165220
}
166221
function copyText(text) {
@@ -215,6 +270,8 @@ function fetchContest() {
215270
.then(response => response.json())
216271
.then(data => {
217272
$('#season_content').html(marked.parse(data.content));
273+
hljs.highlightAll();
274+
$('#contest_num').html(data.contests.length);
218275
localStorage.setItem(`season${getSeasonId()}_content`, data.content);
219276
localStorage.setItem(`season${getSeasonId()}_contests`, JSON.stringify(data.contests));
220277
let contests = data.contests;
@@ -284,13 +341,17 @@ function fetchSearch() {
284341
})
285342
}
286343
$(document).ready(function () {
344+
hljs.highlightAll();
287345
let str = $('#titleVal').val();
288346
console.log(str);
289347
$('title').text(`${str} - 成绩表 2.0`);
290348
if (getSeasonId()) {
291349
fetchContest(); fetchSearch();
292350
293-
setInterval(function () {
351+
let readyInterval = setInterval(function () {
352+
if (!getSeasonId()) {
353+
clearInterval(readyInterval);
354+
}
294355
if (localStorage.getItem("last_fetch_time") != null) {
295356
let ls = new Date(localStorage.getItem("last_fetch_time"));
296357
if ((new Date()) - ls <= 10000) return;
@@ -311,7 +372,8 @@ $('#mainUiContainer').bind('pjax:end', function () {
311372
NProgress.done();
312373
$('.ui.mobile.sidebar').sidebar('hide');
313374
let str = $('#titleVal').val();
314-
console.log(str);
375+
// console.log(str);
376+
hljs.highlightAll();
315377
$('title').text(`${str} - 成绩表 2.0`);
316378
let sid = getSeasonId();
317379
if (sid) {
@@ -323,8 +385,10 @@ $('#mainUiContainer').bind('pjax:end', function () {
323385
}
324386
if (getSeasonId()) {
325387
fetchContest(); fetchSearch();
326-
327-
setInterval(function () {
388+
let pjaxInterval = setInterval(function () {
389+
if (!getSeasonId()) {
390+
clearInterval(pjaxInterval);
391+
}
328392
if (localStorage.getItem("last_fetch_time") != null) {
329393
let ls = new Date(localStorage.getItem("last_fetch_time"));
330394
if ((new Date()) - ls <= 10000) return;

‎views/head.ejs

+3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@
2323
<link href="https://cdn.fzsz.net/fontawesome/css/all.min.css" rel="stylesheet">
2424
<link href="/sport/css/main.css?v=202210011621", rel="stylesheet">
2525
<link rel="shortcut icon" type="image/jpg" href="/favicon.ico"/>
26+
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/styles/atom-one-light.min.css">
27+
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/highlight.min.js"></script>
28+
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/languages/javascript.min.js"></script>
2629
<script src="https://cdn.fzsz.net/js/jquery.min.js"></script>
2730
<script src="https://cdn.fzsz.net/js/sweetalert.min.js"></script>
2831
<script src="https://cdn.fzsz.net/js/marked.min.js"></script>

‎views/search.ejs

+5-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,11 @@
4242
</div>
4343
<div class="ui modal" id="infoModal">
4444
<div class="ui header" id="infoTitle"></div>
45-
<div class="content" id="infoContent"></div>
45+
<div class="ui segment content" id="infoContent">
46+
</div>
47+
<div class="actions">
48+
<div class="ui approve pink button">确认</div>
49+
</div>
4650
</div>
4751

4852

‎views/season.ejs

+26-12
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,34 @@
44
<% } %>
55

66
<textarea id="titleVal" style="display:none;"><%= season.title %></textarea>
7-
<div style="display: inline;">
8-
<h1><%= season.title %></h1>
7+
8+
<div style="text-align: center;" id="season_info">
9+
<h1 style="font-size: 2.4rem !important"><span class="req">「</span><%= season.title %><span class="req">」</span></h1>
910
<% if (user) { %>
10-
<div style="text-align: right !important">
11-
<a class="ui purple labeled icon button" href="<%= web_util.makeUrl(['season', season.id, 'edit']) %>">
12-
<i class="icon fas fa-edit"></i>修改资料
13-
</a>
14-
<a class="ui pink labeled icon button" href="<%= web_util.makeUrl(['season', season.id, 'contest', 0, 'edit']) %>">
15-
<i class="icon fas fa-plus"></i>新建比赛
16-
</a>
11+
<a class="ui purple labeled icon button" href="<%= web_util.makeUrl(['season', season.id, 'edit']) %>">
12+
<i class="icon fas fa-edit"></i>修改资料
13+
</a>
14+
<a class="ui pink labeled icon button"
15+
href="<%= web_util.makeUrl(['season', season.id, 'contest', 0, 'edit']) %>">
16+
<i class="icon fas fa-plus"></i>新建比赛
17+
</a>
18+
<% } %>
19+
<div class="ui two small statistics">
20+
<div class="ui <%= seasonStatus(season.start_time, season.end_time) == 0 ? 'green' : (seasonStatus(season.start_time, season.end_time) == -1 ? 'grey' : 'red') %> statistic">
21+
<div class="value">
22+
<%= seasonStatus(season.start_time, season.end_time) == 0 ? '进行中' : (seasonStatus(season.start_time, season.end_time)==-1 ? '已结束' : '未开始' ) %>
23+
</div>
24+
<div class="label">
25+
状态
26+
</div>
1727
</div>
18-
<% } %>
28+
<div class="ui statistic">
29+
<div class="value req" id="contest_num">N/A</div>
30+
<div class="label">
31+
比赛数
32+
</div>
33+
</div>
34+
</div>
1935
</div>
2036
<h4 class="ui top attached block header"><i class="fad fa-info-circle status pending"></i>公告</h4>
2137
<div class="ui bottom attached segment" id="season_content">
@@ -49,8 +65,6 @@
4965
<div class="ui inverted disabled dimmer" id="rankingLoader">
5066
<div class="ui text pink loader">正在拉取排名...</div>
5167
</div>
52-
<p></p>
53-
<p></p>
5468
<table class="ui very basic center aligned unstackable table">
5569
<thead>
5670
<tr>

0 commit comments

Comments
 (0)