aljaz/CTFd
1
0
Fork 0
mirror of https://github.com/aljazceru/CTFd.git synced 2025-12-18 06:24:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
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
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; line-height: 66px;
} }
.spinner {
margin-top: 225px;
text-align: center;
opacity: 0.5;
}
#score-graph{ #score-graph{
height: 450px; height: 450px;
display: block; display: block;

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

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

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

@@ -2,14 +2,26 @@
{% block content %} {% block content %}
<div class="row"> <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>
<div class="row"> <div class="row">
<div> <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> <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>
</div> </div>
{% endblock %} {% endblock %}
@@ -97,6 +109,7 @@
annotations: annotations annotations: annotations
}; };
$('#solves-graph').empty()
Plotly.newPlot('solves-graph', data, layout); Plotly.newPlot('solves-graph', data, layout);
}); });
} }
@@ -125,6 +138,7 @@
title: 'Key Percentages' title: 'Key Percentages'
}; };
$('#keys-pie-graph').empty();
Plotly.newPlot('keys-pie-graph', data, layout); Plotly.newPlot('keys-pie-graph', data, layout);
}); });
} }
@@ -152,6 +166,7 @@
title: 'Category Breakdown' title: 'Category Breakdown'
}; };
$('#categories-pie-graph').empty();
Plotly.newPlot('categories-pie-graph', data, layout); Plotly.newPlot('categories-pie-graph', data, layout);
}); });
} }

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

@@ -89,9 +89,21 @@
</h2> </h2>
<div id="keys-pie-graph"></div> <div id="keys-pie-graph">
<div id="categories-pie-graph"></div> <div class="text-center">
<div id="score-graph"></div> <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"> <table class="table table-striped">
<h3>IP Addresses</h3> <h3>IP Addresses</h3>

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

@@ -116,6 +116,12 @@ table{
clear: both; clear: both;
} }
.spinner {
margin-top: 225px;
text-align: center;
opacity: 0.5;
}
#keys-pie-graph{ #keys-pie-graph{
width: 50%; width: 50%;
float: left; 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 < chalids.length; i++) {
for (var i = 0; i < challenges['game'].length; i++) { for (var i = 0; i < challenges['game'].length; i++) {
var obj = challenges['game'][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) { if (cb) {

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

@@ -65,10 +65,8 @@ function scoregraph () {
}; };
console.log(traces); console.log(traces);
$('#score-graph').empty() // Remove spinners
Plotly.newPlot('score-graph', traces, layout); 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)' plot_bgcolor: 'rgba(0,0,0,0)'
}; };
$('#score-graph').empty();
Plotly.newPlot('score-graph', data, layout); Plotly.newPlot('score-graph', data, layout);
}); });
} }
@@ -83,7 +84,7 @@ function keys_percentage_graph() {
plot_bgcolor: 'rgba(0,0,0,0)' plot_bgcolor: 'rgba(0,0,0,0)'
}; };
$('#keys-pie-graph').empty();
Plotly.newPlot('keys-pie-graph', data, layout); Plotly.newPlot('keys-pie-graph', data, layout);
}); });
} }
@@ -129,6 +130,7 @@ function category_breakdown_graph() {
plot_bgcolor: 'rgba(0,0,0,0)' plot_bgcolor: 'rgba(0,0,0,0)'
}; };
$('#categories-pie-graph').empty();
Plotly.newPlot('categories-pie-graph', data, layout); 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 %} {% if admin or not errors %}
<div class="container main-container"> <div class="container main-container">
<div id='challenges-board' class="row"> <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>
</div> </div>

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

@@ -25,7 +25,11 @@
</div> </div>
{% endif %} {% 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> <br>
<table id="scoreboard" class="table table-striped"> <table id="scoreboard" class="table table-striped">

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

@@ -41,10 +41,22 @@
<br> <br>
<div id="keys-pie-graph"></div> <div id="keys-pie-graph">
<div id="categories-pie-graph"></div> <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> <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> <div class="clearfix"></div>