mirror of https://github.com/gophish/gophish
Fixed tabs on campaign_results
Added email status chart on campaign_resultspull/24/head
parent
4f03224d98
commit
530a60cd08
|
@ -32,7 +32,6 @@ body {
|
|||
top: 51px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
|
|
|
@ -36,9 +36,12 @@ $(document).ready(function(){
|
|||
.success(function(c){
|
||||
campaign = c
|
||||
if (campaign){
|
||||
// Set the title
|
||||
$("#page-title").text("Results for " + c.name)
|
||||
// Setup our graphs
|
||||
var timeline_data = {labels:[],series:[]}
|
||||
var email_data = {series:[]}
|
||||
var email_series_data = {}
|
||||
var timeline_opts = {
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
|
@ -69,12 +72,20 @@ $(document).ready(function(){
|
|||
result.position || "",
|
||||
"<span class=\"label " + label + "\">" + result.status + "</span>"
|
||||
]).draw()
|
||||
if (!email_series_data[result.status]){
|
||||
email_series_data[result.status] = 1
|
||||
} else {
|
||||
email_series_data[result.status]++;
|
||||
}
|
||||
})
|
||||
// Setup the graphs
|
||||
$.each(campaign.timeline, function(i, event){
|
||||
timeline_data.labels.push(moment(event.time).format('MMMM Do YYYY h:mm'))
|
||||
timeline_data.series.push([{meta : i, value: 1}])
|
||||
})
|
||||
$.each(email_series_data, function(status, count){
|
||||
email_data.series.push({meta: status, value: count})
|
||||
})
|
||||
var timeline_chart = new Chartist.Line('#timeline_chart', timeline_data, timeline_opts)
|
||||
|
||||
// Setup the overview chart listeners
|
||||
|
@ -83,7 +94,6 @@ $(document).ready(function(){
|
|||
.append('<div class="chartist-tooltip"></div>')
|
||||
.find('.chartist-tooltip')
|
||||
.hide();
|
||||
|
||||
$chart.on('mouseenter', '.ct-point', function() {
|
||||
var $point = $(this)
|
||||
value = $point.attr('ct:value')
|
||||
|
@ -101,11 +111,35 @@ $(document).ready(function(){
|
|||
$chart.on('mousemove', function(event) {
|
||||
$toolTip.css({
|
||||
left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
|
||||
top: (event.offsetY + 0 || event.originalEvent.layerY) - $toolTip.height() - 40
|
||||
top: (event.offsetY + 70 || event.originalEvent.layerY) - $toolTip.height() - 40
|
||||
});
|
||||
});
|
||||
$("#loading").hide()
|
||||
$("#campaignResults").show()
|
||||
var email_chart = new Chartist.Pie("#email_chart", email_data, email_opts)
|
||||
// Setup the average chart listeners
|
||||
$piechart = $("#email_chart")
|
||||
var $pietoolTip = $piechart
|
||||
.append('<div class="chartist-tooltip"></div>')
|
||||
.find('.chartist-tooltip')
|
||||
.hide();
|
||||
|
||||
$piechart.on('mouseenter', '.ct-slice-donut', function() {
|
||||
var $point = $(this)
|
||||
value = $point.attr('ct:value')
|
||||
label = $point.attr('ct:meta')
|
||||
$pietoolTip.html(label + ': ' + value.toString()).show();
|
||||
});
|
||||
|
||||
$piechart.on('mouseleave', '.ct-slice-donut', function() {
|
||||
$pietoolTip.hide();
|
||||
});
|
||||
$piechart.on('mousemove', function(event) {
|
||||
$pietoolTip.css({
|
||||
left: (event.offsetX || event.originalEvent.layerX) - $pietoolTip.width() / 2 - 10,
|
||||
top: (event.offsetY + 80 || event.originalEvent.layerY) - $pietoolTip.height() - 80
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
.error(function(){
|
||||
|
|
|
@ -48,21 +48,33 @@
|
|||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<tabset>
|
||||
<tab heading="Overview">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="active"><a href="#overview" aria-controls="home" role="tab" data-toggle="tab">Overview</a></li>
|
||||
<li><a href="#plugins" aria-controls="profile" role="tab" data-toggle="tab">Plugins</a></li>
|
||||
<li><a href="#demographics" aria-controls="settings" role="tab" data-toggle="tab">Demographics</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="overview">
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<p style="text-align:center;">Campaign Timeline</p>
|
||||
<br/>
|
||||
<div id="timeline_chart"></div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<p style="text-align:center;">Email Status</p>
|
||||
<div id="email_chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Plugins">Plugins here</tab>
|
||||
<tab heading="Demographics">Demographics here</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="plugins">
|
||||
Plugins here
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="demographics">
|
||||
Demographics here
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h2>Details</h2>
|
||||
|
|
Loading…
Reference in New Issue