aljaz/CTFd
1
0
Fork 0
mirror of https://github.com/aljazceru/CTFd.git synced 2025-12-17 22:14:25 +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;
}
.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>