Skip to content

Commit c7e379c

Browse files
m---m---
committed
update viewer ui
1 parent 4813f54 commit c7e379c

File tree

4 files changed

+128
-8
lines changed

4 files changed

+128
-8
lines changed

‎app/assets/stylesheets/viewer.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,98 @@
33
100% {transform: rotate(360deg);}
44
}
55

6+
#bullseye-loading {
7+
display: block;
8+
position: fixed;
9+
top: 0;
10+
left: 0;
11+
width: 100%;
12+
height: 100%;
13+
text-align: center;
14+
z-index: 2;
15+
background: rgba(0,64,128,0.3);
16+
}
17+
#bullseye-loading .loader {
18+
color: rgba(255,255,255,0.6);
19+
font-size: 128px;
20+
text-indent: -9999em;
21+
overflow: hidden;
22+
width: 1em;
23+
height: 1em;
24+
border-radius: 50%;
25+
margin: 180px auto;
26+
position: relative;
27+
-webkit-transform: translateZ(0);
28+
-ms-transform: translateZ(0);
29+
transform: translateZ(0);
30+
-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
31+
animation: load6 1.7s infinite ease, round 1.7s infinite ease;
32+
}
33+
@-webkit-keyframes load6 {
34+
0% {
35+
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
36+
}
37+
5%,
38+
95% {
39+
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
40+
}
41+
10%,
42+
59% {
43+
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
44+
}
45+
20% {
46+
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
47+
}
48+
38% {
49+
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
50+
}
51+
100% {
52+
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
53+
}
54+
}
55+
@keyframes load6 {
56+
0% {
57+
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
58+
}
59+
5%,
60+
95% {
61+
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
62+
}
63+
10%,
64+
59% {
65+
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
66+
}
67+
20% {
68+
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
69+
}
70+
38% {
71+
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
72+
}
73+
100% {
74+
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
75+
}
76+
}
77+
@-webkit-keyframes round {
78+
0% {
79+
-webkit-transform: rotate(0deg);
80+
transform: rotate(0deg);
81+
}
82+
100% {
83+
-webkit-transform: rotate(360deg);
84+
transform: rotate(360deg);
85+
}
86+
}
87+
@keyframes round {
88+
0% {
89+
-webkit-transform: rotate(0deg);
90+
transform: rotate(0deg);
91+
}
92+
100% {
93+
-webkit-transform: rotate(360deg);
94+
transform: rotate(360deg);
95+
}
96+
}
97+
698
html, body {
799
height: 100%;
8100
}

‎app/controllers/external_api/v1/viewer_controller.rb‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ def problems
9191
rounds.each do |round|
9292
result[problem.id][:round][round.id] = {}
9393
result[problem.id][:round][round.id][:start_at] = round.start_at
94+
result[problem.id][:round][round.id][:label] = round.label
9495
result[problem.id][:round][round.id][:team_result] = {}
9596
teams.each do |team|
9697
# get score from team login name, exploit container name which is before than round started
@@ -124,6 +125,7 @@ def score
124125
name: problem.title,
125126
round_id: round&.id,
126127
round_start_at: round&.start_at,
128+
round_label: round&.label,
127129
ntrials: problem.ntrials,
128130
succeeded: score.succeeded,
129131
x11_required: problem.x11_required,

‎app/views/viewer/index.html.erb‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,11 @@
2020
<div id="bullseye-teams"></div>
2121
<div id="bullseye-nowexploiting">
2222
<div class="message">
23-
<input type="text" value="Now evaluation" class="text">
23+
<input type="text" value="Evaluating..." class="text" id="bullseye-notice-input">
2424
<!--<input type="time">-->
2525
</div>
2626
</div>
27+
<div id="bullseye-loading"><div class="loader"></div></div>
2728

2829
<script type="text/x-jsrender" id="bullseye-template-problems-list">
2930
<div id="bullseye-problems-selected" class="bullseye-btn" data-problem-id="0">Select problem</div>
@@ -34,7 +35,7 @@
3435
</div>
3536
{{/for}}
3637
<div class="problems bullseye-panel-items" data-problem-id="-1" id="bullseye-nowexploiting-trigger">
37-
<div class="name">Now exploting...</div>
38+
<div class="name">notice</div>
3839
</div>
3940
</div>
4041
</script>
@@ -110,15 +111,16 @@ $(() => {
110111

111112
let formatRound = (problem_id, round_id) => {
112113
if (PROBLEMS[problem_id]['round'][round_id] === undefined) {
113-
return `R-`
114+
return `-`
114115
}
115116

117+
let label = PROBLEMS[problem_id]['round'][round_id]['label']
116118
let start_date = new Date(Date.parse(PROBLEMS[problem_id]['round'][1]['start_at']))
117119
let date = new Date(Date.parse(PROBLEMS[problem_id]['round'][round_id]['start_at']))
118120
let day = (date.getDate() - start_date.getDate() + 1)
119121
let hour = ('0' + date.getHours()).slice(-2)
120122
let min = ('0' + date.getMinutes()).slice(-2)
121-
return `R${round_id} (${day}day ${hour}:${min})`
123+
return `${label} (${day}day ${hour}:${min})`
122124
}
123125

124126
let selectProblem = (problem_id, current_round) => {
@@ -297,19 +299,43 @@ $(() => {
297299
})
298300
}
299301

302+
$('#bullseye-notice-input').change((e) => {
303+
let self = $(e.currentTarget)
304+
localStorage.notice = self.val()
305+
self.blur()
306+
})
307+
if (localStorage.notice) {
308+
$('#bullseye-notice-input').val(localStorage.notice)
309+
}
310+
311+
/**
312+
* loading
313+
*/
314+
let _loading = 2
315+
316+
let endLoading = () => {
317+
_loading--
318+
if (_loading <= 0) {
319+
$('#bullseye-loading').hide()
320+
}
321+
}
322+
323+
$('#bullseye-loading').show()
300324
$.getJSON(CONFIG.API_BASE + '/teams.json', (r) => {
325+
localStorage.teams = JSON.stringify(r)
301326
loadTeams(r)
327+
endLoading()
302328
})
303-
304329
$.getJSON(CONFIG.API_BASE + '/problems.json', (r) => {
330+
localStorage.problems = JSON.stringify(r)
305331
PROBLEMS = r
306332
for (let problem_id in r) {
307333
let round = Object.keys(r[problem_id]['round'])
308334
PROBLEMS[problem_id]['min_round'] = Math.min(...round)
309335
PROBLEMS[problem_id]['max_round'] = Math.max(...round)
310336
}
311337
loadProblems()
338+
endLoading()
312339
})
313-
314340
})
315341
</script>

‎app/views/viewer/play.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</script>
2020

2121
<script type="text/x-jsrender" id="bullseye-template-problem-round">
22-
<div class="round">Round {{>round}}</div>
22+
<div class="round">{{>round}}</div>
2323
<div class="separate"></div>
2424
<div class="time">{{>time}}</div>
2525
</script>
@@ -275,7 +275,7 @@ $(() => {
275275
$('#bullseye-team').append($('#bullseye-template-team').render(r.team))
276276
$('#bullseye-problem').append($('#bullseye-template-problem').render(r.problem))
277277

278-
let round = {'round': parseInt(r.problem.round_id), 'time': formatTime(r.problem.round_start_at)}
278+
let round = {'round': r.problem.round_label, 'time': formatTime(r.problem.round_start_at)}
279279
$('#bullseye-problem-round').append($('#bullseye-template-problem-round').render(round))
280280

281281
action(r)

0 commit comments

Comments
 (0)