JohnHammond
/
CTFd
mirror of https://github.com/JohnHammond/CTFd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adding spinners to the scoregraph load and chalboard (#384) 

* Adding spinners to the scoregraph load and chalboard
* Fixing challenges with zero solves in challenge board UI
* Add spinners for team page
* Adding spinners for admin interface
* Closes #66
selenium-screenshot-testing
Kevin Chung 2017-09-09 01:55:00 -04:00 committed by GitHub
parent d49f37eac4
commit f98d675be9
11 changed files with 81 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CTFd/themes/admin/static/css/style.css
View File

@ -106,6 +106,12 @@ table{
line-height: 66px;
}
.spinner {
margin-top: 225px;
text-align: center;
opacity: 0.5;
}
#score-graph{
height: 450px;
display: block;

5
CTFd/themes/admin/static/js/team.js
View File

@ -41,7 +41,7 @@ function scoregraph () {
var layout = {
title: 'Score over Time'
};
$('#score-graph').empty();
Plotly.newPlot('score-graph', data, layout);
});
}
@ -69,7 +69,7 @@ function keys_percentage_graph(){
var layout = {
title: 'Key Percentages'
};
$('#keys-pie-graph').empty();
Plotly.newPlot('keys-pie-graph', data, layout);
});
}
@ -113,6 +113,7 @@ function category_breakdown_graph(){
title:'Category Breakdown'
};
$('#categories-pie-graph').empty();
Plotly.newPlot('categories-pie-graph', data, layout);
});
}

21
CTFd/themes/admin/templates/graphs.html
View File

@ -2,14 +2,26 @@
{% block content %}
<div class="row">
<div id="solves-graph"></div>
<div id="solves-graph">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
</div>
<div class="row">
<div>
<div id="keys-pie-graph"></div>
<div id="keys-pie-graph">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
</div>
<div>
<div id="categories-pie-graph"></div>
<div id="categories-pie-graph">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
</div>
</div>
{% endblock %}
@ -97,6 +109,7 @@
annotations: annotations
};
$('#solves-graph').empty()
Plotly.newPlot('solves-graph', data, layout);
});
}
@ -125,6 +138,7 @@
title: 'Key Percentages'
};
$('#keys-pie-graph').empty();
Plotly.newPlot('keys-pie-graph', data, layout);
});
}
@ -152,6 +166,7 @@
title: 'Category Breakdown'
};
$('#categories-pie-graph').empty();
Plotly.newPlot('categories-pie-graph', data, layout);
});
}

18
CTFd/themes/admin/templates/team.html
View File

@ -89,9 +89,21 @@
</h2>
<div id="keys-pie-graph"></div>
<div id="categories-pie-graph"></div>
<div id="score-graph"></div>
<div id="keys-pie-graph">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
<div id="categories-pie-graph">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
<div id="score-graph">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
<table class="table table-striped">
<h3>IP Addresses</h3>

6
CTFd/themes/original/static/css/style.css
View File

@ -116,6 +116,12 @@ table{
clear: both;
}
.spinner {
margin-top: 225px;
text-align: center;
opacity: 0.5;
}
#keys-pie-graph{
width: 50%;
float: left;

7
CTFd/themes/original/static/js/chalboard.js
View File

@ -170,7 +170,12 @@ function updatesolves(cb){
for (var i = 0; i < chalids.length; i++) {
for (var i = 0; i < challenges['game'].length; i++) {
var obj = challenges['game'][i];
obj.solves = solves[chalids[i]];
var solve_cnt = solves[chalids[i]];
if (solve_cnt) {
obj.solves = solve_cnt;
} else {
obj.solves = 0;
}
}
};
if (cb) {

4
CTFd/themes/original/static/js/scoreboard.js
View File

@ -65,10 +65,8 @@ function scoregraph () {
};
console.log(traces);
$('#score-graph').empty() // Remove spinners
Plotly.newPlot('score-graph', traces, layout);
$('#score-graph').show()
});
}

4
CTFd/themes/original/static/js/team.js
View File

@ -53,6 +53,7 @@ function scoregraph() {
plot_bgcolor: 'rgba(0,0,0,0)'
};
$('#score-graph').empty();
Plotly.newPlot('score-graph', data, layout);
});
}
@ -83,7 +84,7 @@ function keys_percentage_graph() {
plot_bgcolor: 'rgba(0,0,0,0)'
};
$('#keys-pie-graph').empty();
Plotly.newPlot('keys-pie-graph', data, layout);
});
}
@ -129,6 +130,7 @@ function category_breakdown_graph() {
plot_bgcolor: 'rgba(0,0,0,0)'
};
$('#categories-pie-graph').empty();
Plotly.newPlot('categories-pie-graph', data, layout);
});
}

3
CTFd/themes/original/templates/chals.html
View File

@ -87,6 +87,9 @@
{% if admin or not errors %}
<div class="container main-container">
<div id='challenges-board' class="row">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
</div>

6
CTFd/themes/original/templates/scoreboard.html
View File

@ -25,7 +25,11 @@
</div>
{% endif %}
<div id="score-graph"></div>
<div id="score-graph">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
<br>
<table id="scoreboard" class="table table-striped">

18
CTFd/themes/original/templates/team.html
View File

@ -41,10 +41,22 @@
<br>
<div id="keys-pie-graph"></div>
<div id="categories-pie-graph"></div>
<div id="keys-pie-graph">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
<div id="categories-pie-graph">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
<br>
<div id="score-graph"></div>
<div id="score-graph">
<div class="text-center">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
</div>
</div>
<div class="clearfix"></div>