Fixed chart heights, made donut a bit wider

Added dynamic labels for campaign statuses at /campaigns
pull/24/head
unknown 2015-07-27 21:31:08 -05:00
parent 674c71e271
commit e8d8f030d4
4 changed files with 17 additions and 4 deletions

3
static/css/main.css vendored
View File

@ -243,6 +243,9 @@
border-top-color:#34495e border-top-color:#34495e
} }
.chartist-chart {
height:175px;
}
.chartist-legend { .chartist-legend {
list-style: none; list-style: none;

View File

@ -1,3 +1,12 @@
// labels is a map of campaign statuses to
// CSS classes
var labels = {
"In progress" : "label-primary",
"Queued" : "label-info",
"Completed" : "label-success",
"Error" : "label-danger"
}
// Save attempts to POST to /campaigns/ // Save attempts to POST to /campaigns/
function save(){ function save(){
var campaign = { var campaign = {
@ -56,10 +65,11 @@ $(document).ready(function(){
$("#campaignTable").show() $("#campaignTable").show()
campaignTable = $("#campaignTable").DataTable(); campaignTable = $("#campaignTable").DataTable();
$.each(campaigns, function(i, campaign){ $.each(campaigns, function(i, campaign){
label = labels[campaign.status] || "label-default";
campaignTable.row.add([ campaignTable.row.add([
campaign.name, campaign.name,
moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a'), moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a'),
"<span class=\"label label-primary\">" + campaign.status + "</span>", "<span class=\"label " + label + "\">" + campaign.status + "</span>",
"<div class='pull-right'><button class='btn btn-primary' onclick='alert(\"test\")'>\ "<div class='pull-right'><button class='btn btn-primary' onclick='alert(\"test\")'>\
<i class='fa fa-bar-chart'></i>\ <i class='fa fa-bar-chart'></i>\
</button>\ </button>\

View File

@ -17,7 +17,7 @@ $(document).ready(function(){
} }
var average_opts = { var average_opts = {
donut : true, donut : true,
donutWidth: 30, donutWidth: 40,
chartPadding: 0, chartPadding: 0,
showLabel: false showLabel: false
} }

View File

@ -32,12 +32,12 @@
</div> </div>
<div> <div>
<div class="row"> <div class="row">
<div id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12 chartist-chart">
<p style="text-align:center;">Phishing Success Overview</p> <p style="text-align:center;">Phishing Success Overview</p>
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p style="text-align:center;">Average Phishing Results</p> <p style="text-align:center;">Average Phishing Results</p>
<div id="average_chart" class="col-lg-7 col-md-7"></div> <div id="average_chart"class="col-lg-7 col-md-7 chartist-chart"></div>
<div id="average_chart_legend" class="col-lg-5 col-md-5"> <div id="average_chart_legend" class="col-lg-5 col-md-5">
<ul class="chartist-legend"> <ul class="chartist-legend">
<li> <li>