<!DOCTYPE html>
<html lang="en">
<head>
<script src="../assets/js/darkmode.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-control" content="public">
<title><%= pageTitle %></title>
<% if (useCDN) { %>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<% } else { %>
<!-- Bootstrap -->
<link rel="stylesheet" href="../assets/css/bootstrap.min.css" >
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.min.js"></script>
<script src="../assets/js/respond.min.js"></script>
<![endif]-->
<link href="../assets/css/font-awesome.min.css" rel="stylesheet">
<% } %>
<!-- Custom Theme Style -->
<style type="text/css">
<%= styles %>
<%= customStyle %>
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
if(window.localStorage['darkmode'] === 'on') {
applyFontStyle();
}
}
</script>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" onclick="history.back(-1)">
<i class="fa fa-arrow-left"><span>Back</span></i>
</a>
</div>
<p class="navbar-text" style="float: left">Features Overview
</p>
<p class="navbar-text"><%= reportName %></p>
</div>
</nav>
<div class="main_container">
<div class="page-title">
<div class="tags">
<% if (feature.tags) { %>
<% var amount = feature.tags.length; %>
<% if (amount > 0 ){ %>
<i class="fa fa-tag<% if(amount > 1 ) {%>s<% } %> fa-lg"></i>
<% _.each(feature.tags, (tag) => {%>
<span class="tag"><%= tag.name %></span>
<%});%>
<% } %>
<% } %>
</div>
<h1>Feature:
<small><%= feature.name %></small>
</h1>
<% if (!plainDescription) { %>
<p><% if (feature.description && feature.description.length > 0) { %>
<strong>Description: </strong> <%= feature.description.replace(/(?:\r\n|\r|\n)/g, '<br>') %> </p>
<% } %>
<p><strong>File name:</strong>
<%= Array.from(feature.uri.replace(/\\/g,'/').split('/')).pop() %>
</p>
<p><strong>Relative path:</strong>
<%= Array.from(feature.uri.replace(/\\/g,'/').split('/')).slice(-2).join('/') %></p>
<% } else { %>
<%= feature.description %>
<% } %>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="<% if(suite.hideMetadata) {%>col-lg-12<% } else { %>col-md-8 col-xs-12<% } %>">
<div class="x_panel fixed_height_320">
<%= featureScenariosOverviewChart %>
</div>
</div>
<% if (!suite.hideMetadata) { %>
<div class="col-md-4 col-xs-12">
<div class="x_panel fixed_height_320">
<%= featureMetadataOverview %>
</div>
</div>
<% } %>
</div>
<div class="dropdown pull-right dropup" >
<button class="btn btn-info dropdown-toggle btn-sm" type="button" data-toggle="dropdown" style="margin-bottom: 15px;">
Filter By<span class="caret" style="margin-left: 5px"></span></button>
<ul class="dropdown-menu">
<li> <a id="passed" href="javascript:void(0)" onclick="hideResult(this.id)">Passed
<i class="fa fa-check-circle passed-color filter-i"></i></a>
</li>
<li> <a id="failed" href="javascript:void(0)" onclick="hideResult(this.id)">Failed
<i class="fa fa-exclamation-circle failed-color filter-i"></i></a>
</li>
<li> <a id="pending" href="javascript:void(0)" onclick="hideResult(this.id)">Pending
<i class="fa fa-minus-circle pending-color filter-i"></i></a>
</li>
<li> <a id="skipped" href="javascript:void(0)" onclick="hideResult(this.id)">Skipped
<i class="fa fa-arrow-circle-right fa skipped-color filter-i"></i></a>
</li>
<li> <a id="not-defined" href="javascript:void(0)" onclick="hideResult(this.id)">Not Defined
<i class="fa fa-question-circle not-defined-color filter-i"></i></a>
</li>
<li> <a id="ambiguous" href="javascript:void(0)" onclick="hideResult(this.id)">Ambiguous
<i class="fa fa-flash ambiguous-color filter-i"></i></a>
</li>
<li class="divider"></li>
<li> <a id="clear" href="javascript:void(0)"onclick="showAll()">Clear
<i class="fa fa-times-circle"></i></a>
</li>
</ul>
</div>
<div class="row">
<%= scenarioTemplate %>
</div>
</div>
<% if (!pageFooter) { %>
<div class="created-by">
<p>Created by wswebcreation. Find me on:</p>
<a href="http://www.wswebcreation.nl/" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
<a href="https://github.com/wswebcreation/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
<a href="http://nl.linkedin.com/in/wimselles" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
<a href="http://stackoverflow.com/users/5911978/wswebcreation" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
</div>
<% } else { %>
<%= pageFooter %>
<% } %>
<% if (useCDN) { %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<% } else { %>
<script src="../assets/js/jquery-3.2.1.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/Chart.min.js"></script>
<% } %>
<!-- Custom -->
<script>
var hideResult;
var showAll;
$(document).ready(function () {
var scenarioOptions = {
legend: false,
responsive: false
};
var getColor = function(selector, defaultColor) {
if (document.querySelector(selector)) {
return getComputedStyle(document.querySelector(selector)).color
}
return defaultColor
}
new Chart(document.getElementById("scenario-chart"), {
type: 'doughnut',
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: {
labels: [
"Passed",
"Failed",
"Pending",
"Skipped",
"Ambiguous",
"Not defined"
],
datasets: [{
data: [
<%= feature.scenarios.passed %>,
<%= feature.scenarios.failed %>,
<%= feature.scenarios.pending %>,
<%= feature.scenarios.skipped %>,
<%= feature.scenarios.ambiguous %>,
<%= feature.scenarios.notDefined %>
],
backgroundColor: [
getColor(".passed-color", "#26B99A"),
getColor(".failed-color", "#E74C3C"),
getColor(".pending-color", "#FFD119"),
getColor(".skipped-color", "#3498DB"),
getColor(".ambiguous-color", "#b73122"),
getColor(".not-defined-color", "#F39C12")
]
}]
},
options: scenarioOptions
});
<%= genericScript %>
});
</script>
</body>
</html>