scoreboard v 0.1 we'll say

This commit is contained in:
Jason White 2017-05-05 13:12:01 -04:00
parent aeaa3cd1a2
commit 480dfe6a0a
4 changed files with 69 additions and 9 deletions

View File

@ -1094,3 +1094,47 @@ span.show-next-page, span.show-prev-page {
.col-md-8 {
width: 95% !important
}
/* scoreboard */
div.scoreboard-title {
font-size:xx-large;
}
.scoreboard-table tr {
}
div.scoreboard-username {
background-color: #222;
color: aliceblue;
padding: 4px;
padding-left:8px;
font-size: x-large;
border-radius:6px;
}
th.username {
padding-bottom: 6px;
}
td.user-flags {
padding-left: 8px;
padding-bottom: 6px;
}
div.captured-flag {
border-radius: 6px;
background-color: #444;
color: white;
padding: 4px;
font-size: x-large;
display: inline-block;
}
.scoreboard-page {
background-color: #e0dfdc;
padding: 20px;
}
.fa-flag {
color:red
}

View File

@ -1,4 +1,15 @@
<table>
<! -- iterate for header rows -->
<!--
<div class="scoreboard-title">WebGoat Challenge</div>
<table class="scoreboard-table">
<% _.each(rankings, function(userRanking) { %>
<tr>
<th class="username"> <div class="scoreboard-username"><%= userRanking.username %> </div></th>
<td class="user-flags"> <% _.each(userRanking.flagsCaptured, function(flag) { %>
<div class="captured-flag">
<i class="fa fa-flag" aria-hidden="true"></i>
<%=flag%> </div>
<% }); %>
</td>
</tr>
<% }); %>
</table>

View File

@ -12,7 +12,7 @@ function($,
el:'#scoreboard',
initialize: function() {
template:ScoreboardTemplate,
this.template = ScoreboardTemplate,
this.collection = new FlagsCollection();
this.listenTo(this.collection,'reset',this.render)
this.collection.fetch({reset:true});
@ -21,7 +21,7 @@ function($,
render: function() {
//this.$el.html('test');
var t = _.template(this.template);
this.$el.html(t({'flags':this.collection.toJSON()}));
this.$el.html(t({'rankings':this.collection.toJSON()}));
//TODO: add template (table) to iterate over ...
//this.collection.toJSON(); << put that in the template data
//TODO: set up next poll here with listenToOnce

View File

@ -20,10 +20,15 @@
<!-- Require.js used to load js asynchronously -->
<script src="js/libs/require.min.js" data-main="js/scoreboard.js"/>
<!-- main css -->
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}"/>
<meta http-equiv="Content-Type" content="text/id; charset=ISO-8859-1"/>
<title>WebGoat</title>
</head>
<body>
<body class="scoreboard-page">
<div id="scoreboard-wrapper">
<div id="scoreboard">