Browse Source

Changed look of donut chart legend

Fixed deleteCampaign tooltip
Moved Result Status styles to an object
Dashboard, Users,  now has fancy loading gif
Now only loading ckeditor from templates and landing pages templates
Starting to add maps (coming soon!)
pull/24/head
unknown 6 years ago
parent
commit
a78e92a436
13 changed files with 133 additions and 123 deletions
  1. +25
    -11
      static/css/main.css
  2. +39
    -19
      static/js/app/campaign_results.js
  3. +11
    -3
      static/js/app/dashboard.js
  4. +7
    -0
      static/js/app/users.js
  5. +5
    -0
      static/js/d3.min.js
  6. +2
    -0
      static/js/datamaps.min.js
  7. +1
    -0
      static/js/topojson.min.js
  8. +0
    -2
      templates/base.html
  9. +13
    -5
      templates/campaign_results.html
  10. +7
    -28
      templates/dashboard.html
  11. +21
    -27
      templates/landing_pages.html
  12. +2
    -0
      templates/templates.html
  13. +0
    -28
      templates/users.html

+ 25
- 11
static/css/main.css View File

@ -255,11 +255,10 @@
}
.chartist-legend li {
display: block;
padding-left: 30px;
position: relative;
margin-bottom: 4px;
border-radius: 5px;
padding: 2px 8px 2px 28px;
padding: 2px 8px 2px 8px;
font-size: 14px;
cursor: default;
-webkit-transition: background-color 200ms ease-in-out;
@ -268,13 +267,12 @@
transition: background-color 200ms ease-in-out;
}
.chartist-legend li span {
display: block;
position: absolute;
left: 0;
top: 0;
display: inline-block;
vertical-align:middle;
width: 20px;
height: 100%;
border-radius: 5px;
height: 20px;
margin-right:10px;
border-radius: 50%;
}
.ct-series-a .ct-slice-donut {
@ -285,22 +283,38 @@
stroke:#6c7a89 !important;
}
.ct-slice-donut.ct-slice-donut-sent{
stroke:#1abc9c !important
}
.ct-slice-donut.ct-slice-donut-opened{
stroke:#eb9532 !important;
}
.ct-slice-donut.ct-slice-donut-success{
stroke:#f05b4f !important;
}
.ct-legend-sent {
background-color: #1abc9c !important;
.ct-slice-donut.ct-slice-donut-clicked{
stroke:#f05b4f !important;
}
.ct-legend-error {
background-color: #6c7a89 !important;
}
.ct-legend-sent {
background-color: #1abc9c !important;
}
.ct-legend-opened {
background-color: #eb9532 !important;
}
.ct-legend-success {
background-color: #f05b4f !important;
}
.ct-legend-clicked {
background-color: #eb9532 !important;
background-color: #f05b4f !important;
}

+ 39
- 19
static/js/app/campaign_results.js View File

@ -1,29 +1,31 @@
// labels is a map of campaign statuses to
// CSS classes
var labels = {
"Email Sent" : "label-primary",
"Email Opened" : "label-info",
"Clicked Link" : "label-success",
"Error" : "label-danger"
}
var map = null
//
var classes = {
// statuses is a helper map to point result statuses to ui classes
var statuses = {
"Email Sent" : {
slice: "ct-slice-donut-sent",
legend: "ct-legend-sent"
legend: "ct-legend-sent",
label: "label-success"
},
"Email Opened" : {
slice: "ct-slice-donut-opened",
legend: "ct-legend-opened"
legend: "ct-legend-opened",
label: "label-warning"
},
"Clicked Link" : {
slice: "ct-slice-donut-clicked",
legend: "ct-legend-clicked"
legend: "ct-legend-clicked",
label: "label-danger"
},
"Success" : {
slice: "ct-slice-donut-clicked",
legend: "ct-legend-clicked",
label: "label-danger"
},
"Error" : {
slice: "ct-slice-donut-error",
legend: "ct-legend-error"
legend: "ct-legend-error",
label: "label-default"
}
}
@ -57,6 +59,8 @@ $(document).ready(function(){
if (campaign){
// Set the title
$("#page-title").text("Results for " + c.name)
// Setup tooltips
$('[data-toggle="tooltip"]').tooltip()
// Setup our graphs
var timeline_data = {series:[{
name: "Events",
@ -92,7 +96,7 @@ $(document).ready(function(){
// Setup the results table
resultsTable = $("#resultsTable").DataTable();
$.each(campaign.results, function(i, result){
label = labels[result.status] || "label-default";
label = statuses[result.status].label || "label-default";
resultsTable.row.add([
result.first_name || "",
result.last_name || "",
@ -108,10 +112,8 @@ $(document).ready(function(){
})
// Setup the graphs
$.each(campaign.timeline, function(i, event){
console.log(moment(event.time).format('MMMM Do YYYY h:mm'))
timeline_data.series[0].data.push({meta : i, x: new Date(event.time), y:1})
})
console.log(timeline_data)
$.each(email_series_data, function(status, count){
email_data.series.push({meta: status, value: count})
})
@ -146,10 +148,10 @@ $(document).ready(function(){
// We don't want to create the legend twice
if (!email_legend[data.meta]) {
console.log(data.meta)
$("#email_chart_legend").append('<li><span class="' + classes[data.meta].legend + '"></span>' + data.meta + '</li>')
$("#email_chart_legend").append('<li><span class="' + statuses[data.meta].legend + '"></span>' + data.meta + '</li>')
email_legend[data.meta] = true
}
data.element.addClass(classes[data.meta].slice)
data.element.addClass(statuses[data.meta].slice)
})
// Setup the average chart listeners
$piechart = $("#email_chart")
@ -177,6 +179,24 @@ $(document).ready(function(){
$("#loading").hide()
$("#campaignResults").show()
}
// Load up the map data (only once!)
// Slated for 0.2 release - coming soon! :)
// $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// if ($(e.target).attr('href') == "#plugins"){
// if (!map){
// map = new Datamap({
// element: document.getElementById("resultsMap"),
// responsive: true,
// fills: {
// defaultFill: "#34495e"
// },
// geographyConfig: {
// highlightFillColor : "#1abc9c"
// }
// });
// }
// }
// })
})
.error(function(){
errorFlash(" Campaign not found!")

+ 11
- 3
static/js/app/dashboard.js View File

@ -3,8 +3,10 @@ var campaigns = []
$(document).ready(function(){
api.campaigns.get()
.success(function(cs){
$("#loading").hide()
campaigns = cs
if (campaigns.length > 0){
$("#dashboard").show()
// Create the overview chart data
var overview_data = {labels:[],series:[[]]}
var average_data = {series:[]}
@ -22,8 +24,6 @@ $(document).ready(function(){
showLabel: false
}
var average = 0
$("#emptyMessage").hide()
$("#campaignTable").show()
campaignTable = $("#campaignTable").DataTable();
$.each(campaigns, function(i, campaign){
var campaign_date = moment(campaign.created_date).format('MMMM Do YYYY h:mm')
@ -31,7 +31,13 @@ $(document).ready(function(){
campaignTable.row.add([
campaign.name,
campaign_date,
campaign.status
campaign.status,
"<div class='pull-right'><a class='btn btn-primary' href='/campaigns/" + campaign.id + "'>\
<i class='fa fa-bar-chart'></i>\
</a>\
<button class='btn btn-danger' onclick='deleteCampaign(" + i + ")'>\
<i class='fa fa-trash-o'></i>\
</button></div>"
]).draw()
// Add it to the chart data
campaign.y = 0
@ -103,6 +109,8 @@ $(document).ready(function(){
var $cidx = $(this).attr('ct:meta');
window.location.href = "/campaigns/" + campaigns[cidx].id
});
} else {
$("#emptyMessage").show()
}
})
.error(function(){

+ 7
- 0
static/js/app/users.js View File

@ -109,10 +109,14 @@ function deleteGroup(idx){
}
function load(){
$("#groupTable").hide()
$("#emptyMessage").hide()
$("#loading").show()
api.groups.get()
.success(function(gs){
if (gs.length > 0){
groups = gs
$("#emptyMessage").hide()
$("#loading").hide()
$("#groupTable").show()
groupTable = $("#groupTable").DataTable();
@ -138,6 +142,9 @@ function load(){
</button></div>"
]).draw()
})
} else {
$("#loading").hide()
$("#emptyMessage").show()
}
})
.error(function(){

+ 5
- 0
static/js/d3.min.js
File diff suppressed because it is too large
View File


+ 2
- 0
static/js/datamaps.min.js
File diff suppressed because it is too large
View File


+ 1
- 0
static/js/topojson.min.js
File diff suppressed because it is too large
View File


+ 0
- 2
templates/base.html View File

@ -91,8 +91,6 @@
<script src="/js/dataTables.bootstrap.js"></script>
<script src="/js/chartist.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/ckeditor/ckeditor.js"></script>
<script src="/js/ckeditor/adapters/jquery.js"></script>
<script src="/js/gophish.js"></script>
{{template "scripts" .}}
</body>

+ 13
- 5
templates/campaign_results.html View File

@ -50,8 +50,8 @@
<div class="row">
<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>
<!-- <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">
@ -72,12 +72,16 @@
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="plugins">
Plugins here
<!-- <div role="tabpanel" class="tab-pane" id="plugins">
<div class="row">
<div class="col-md-8">
<div id="resultsMap"></div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="demographics">
Demographics here
</div>
</div> -->
</div>
</div>
<div class="row">
@ -102,5 +106,9 @@
{{end}}
{{define "scripts"}}
<script src="/js/jquery.ui.widget.js"></script>
<!-- d3, topojson, and datamaps for mapping -->
<script src="/js/d3.min.js"></script>
<script src="/js/topojson.min.js"></script>
<script src="/js/datamaps.min.js"></script>
<script src="/js/app/campaign_results.js"></script>
{{end}}

+ 7
- 28
templates/dashboard.html View File

@ -25,12 +25,15 @@
<h1 class="page-header">
Dashboard
</h1>
<div id="emptyMessage" class="row">
<div id="loading">
<i class="fa fa-spinner fa-spin fa-4x"></i>
</div>
<div id="emptyMessage" class="row" style="display:none;">
<div class="alert alert-info">
No campaigns created yet. Let's create one!
</div>
</div>
<div>
<div id="dashboard" style="display:none;">
<div class="row">
<div id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p style="text-align:center;">Phishing Success Overview</p>
@ -58,37 +61,13 @@
</div>
&nbsp;&nbsp;
<div class="row">
<!-- <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
<tbody>
<tr ng-repeat="campaign in $data" class="editable-row">
<td data-title="'Created Date'" class="col-sm-1">campaign.created_date | date:'medium'</td>
<td data-title="'Name'" class="col-sm-2">campaign.name
<div class="btn-group" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle edit-button" data-toggle="dropdown">
<span class="caret" style="border-top-color:#FFFFFF"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" style="left:auto; right:0;" role="menu">
<li><a ng-href="#/campaigns/campaign.id">View</a>
</li>
<li><a href="/campaigns/campaign.id/relaunch">Relaunch</a>
</li>
<li class="divider"></li>
<li><a ng-click="deleteCampaign(campaign)" ng-href="#">Delete</a>
</li>
</ul>
</div>
</td>
<td data-title="'Status'" class="col-sm-1">campaign.status</td>
</tr>
</tbody>
</table> -->
<table id="campaignTable" class="table" style="display:none;">
<table id="campaignTable" class="table">
<thead>
<tr>
<th>Name</th>
<th>Created Date</th>
<th>Status</th>
<th class="col-md-2 col-sm-2"></th>
</tr>
</thead>
<tbody>

+ 21
- 27
templates/landing_pages.html View File

@ -1,3 +1,4 @@
{{define "body"}}
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
@ -20,48 +21,41 @@
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-controller="LandingPageCtrl">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">
Landing Pages
</h1>
<div class="row">
<div ng-repeat="flash in flashes" style="text-align:center" class="alert alert-{{flash.type}}">
<i class="fa {{flash.icon}}"></i> {{flash.message}}
</div>
</div>
<div id="flashes" class="row"></div>
<div class="row">
<button type="button" class="btn btn-primary" ng-click="editPage('new')" data-toggle="modal" data-target="#newLandingPageModal"><i class="fa fa-plus"></i> New Page</button>
</div>
&nbsp;
<div ng-show="!pages.length">
<div id="loading">
<i class="fa fa-spinner fa-spin fa-4x"></i>
</div>
<div style="display:none;">
<div class="row">
<div class="alert alert-info">
No pages created yet. Let's create one!
</div>
</div>
</div>
<div ng-show="pages.length" class="row">
<table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
<tbody>
<tr ng-repeat="page in $data | orderBy: '-modified_date'" class="editable-row">
<td data-title="'Name'" sortable="'name'" class="col-sm-2">{{page.name}}
<div class="btn-group" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle edit-button" data-toggle="dropdown">
<span class="caret" style="border-top-color:#FFFFFF"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" style="left:auto; right:0;" role="menu">
<li><a ng-click="editPage(page)">Edit</a>
</li>
<li class="divider"></li>
<li><a ng-click="deletePage(page)" ng-href="#">Delete</a>
</li>
</ul>
</div>
</td>
<td data-title="'Modified Date'" class="col-sm-1">{{page.modified_date | date:'medium'}}</td>
<div class="row">
<table id="pagesTable" class="table" style="display:none;">
<thead>
<tr>
<th>Name</th>
<th>Last Modified Date</th>
<th class="col-md-2"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
{{end}}
{{define "scripts"}}
<script src="/js/ckeditor/ckeditor.js"></script>
<script src="/js/ckeditor/adapters/jquery.js"></script>
{{end}}

+ 2
- 0
templates/templates.html View File

@ -139,5 +139,7 @@
</div>
{{end}}
{{define "scripts"}}
<script src="/js/ckeditor/ckeditor.js"></script>
<script src="/js/ckeditor/adapters/jquery.js"></script>
<script src="/js/app/templates.js"></script>
{{end}}

+ 0
- 28
templates/users.html View File

@ -54,34 +54,6 @@
</tbody>
</table>
</div>
<!-- <div ng-show="groups.length" class="row">
<table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
<tbody>
<tr ng-repeat="group in $data | orderBy: '-modified_date'" class="editable-row">
<td data-title="'Name'" sortable="'name'" class="col-sm-1">group.name</td>
<td data-title="'Members'" class="col-sm-2">
<span ng-repeat="target in group.targets | cut:5 track by $index ">
target$last ? '' : ', '
</span>
<div class="btn-group" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle edit-button" data-toggle="dropdown">
<span class="caret" style="border-top-color:#FFFFFF"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" style="left:auto; right:0;" role="menu">
<li><a ng-click="editGroup(group)">Edit</a>
</li>
<li class="divider"></li>
<li><a ng-click="deleteGroup(group)">Delete</a>
</li>
</ul>
</div>
</td>
<td data-title="'Modified Date'" class="col-sm-1">group.modified_date | date:'medium'</td>
</tr>
</tbody>
</table>
</div> -->
</div>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">

Loading…
Cancel
Save