Commit 49d4d7a0 authored by Piers Williams's avatar Piers Williams

Merge branch 'master' of git.fossgalaxy.com:hanabi/hanabi.fosslab.uk

parents a7ae5557 1e0920c1
#! /bin/bash
staticjinja watch --outpath=site/ --static=assets
mkdir -p site
staticjinja watch --outpath=site/ --static=assets &
cd site
python -m SimpleHTTPServer 8000
body { padding-top: 70px; }
.list-group {
border-style:solid;
border-width:2px;
border-color: #CCC;
border-radius:9px;
.agentSide h2{
float:left;
}
.agentSide ul.pull-right{
margin-top:20px;
}
.agentSide h2{
float:left;
}
ul li.list-group-item{
padding-left:30px;
text-align: left;
}
ul li.list-group-item button.btn-info{
margin-top:-8px;
}
i.fa-li{
position:inherit;
/**
* Rules for the builder's connected rules lists
*/
.connectedRules {
border-style: solid;
border-width: 1px;
border-color: #cccccd;
overflow-y: scroll;
}
.connectedRules i {
margin-right: 0.8em;
}
#agent{
min-height: 200px;
max-height: 250px;
}
#ruleset{
min-height: 700px;
max-height: 700px;
}
/**
* Code to deal with UX for dragging
*/
.ui-sortable li {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.ui-sortable:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.agentSide ul.empty{
background-color: #eee;
border-style: dashed;
}
.agentSide li.message {
border: 0px;
background-color: transparent;
}
/*
......@@ -39,10 +75,10 @@ i.fa-li{
background-color: #EEEEEC;
}
.discard{
.discard {
background-color: #EEEEEC;
}
.tell{
.tell {
background-color: #EEEEEC;
}
......@@ -34,11 +34,11 @@ function makeRuleItem(list, index, value){
random, info, lightbulb-o, recycle, times, trash, arrow-right
*/
var html = '<li class="list-group-item ' + type + '">';
html = html + '<i class="fa-li fa fa-' + icon + '"></i>';
html = html + value.name;
var html = '<li class="list-group-item clearfix ' + type + '">';
html = html + '<i class="fa-fw fa fa-' + icon + '"></i>';
html = html + '<span class="name">' + value.name + "</span>";
html = html + '<span style="display: none" class="ruleid">' + value.id + '</span>';
html = html + '<button type="button" class="btn btn-info pull-right doc" data-toggle="modal" data-target="#docModal" data-src="http://iggi.fosslab.uk/hanabi/apidocs/' + value.doc + '">Info</button>'
html = html + '<button type="button" class="btn btn-info btn-sm pull-right doc" data-toggle="modal" data-target="#docModal" data-src="http://iggi.fosslab.uk/hanabi/apidocs/' + value.doc + '">Info</button>'
html = html + '</li>';
list.append(html);
}
......@@ -56,6 +56,32 @@ function loadAndDisplay(){
});
}
/**
* initialise the filtering box
*/
function filterInit() {
$('#rulesetFilter').on( 'input', function() {
filterRules($(this).val());
});
}
/**
* Find rules in the set which match some user provided substring, hide all other rules.
*/
function filterRules(query){
query = query.toLowerCase();
$('#ruleset li').each( function( _, item) {
item_jq = $(item);
if (item_jq.children('.name').text().toLowerCase().includes(query)) {
item_jq.show();
} else {
item_jq.hide();
}
});
}
function updateGraph(json){
var data = ["Your Agent"];
......@@ -69,6 +95,7 @@ function updateGraph(json){
allData.push();
$('#graph').effect('highlight');
chart.load({
columns: allData
});
......@@ -99,10 +126,10 @@ function doStuffGraph(){
});
}
$.getJSON("assets/js/blankGraphData.json", updateGraph);
//$.getJSON("assets/js/blankGraphData.json", updateGraph);
}
var chart = null;
var allData = [];
$(document).ready(function(){loadAndDisplay();doStuffGraph();});
$(document).ready(function(){loadAndDisplay();doStuffGraph();filterInit();});
......@@ -14,63 +14,127 @@
{% block content %}
<div class="page-header">
<h1>Hanabi Agent Builder</h1>
</div>
<div class="row">
<div class="col-md-6">
<h2>My Agent</h2>
<ul class="list-inline pull-right">
<li><a href="#" onclick="buildAgent()" class="btn btn-default">Test</a></li>
<li><a href="#" id="testBtn" onclick="buildAgent()" class="btn btn-default"><i class="fa fa-spinner fa-spin fa-fw" style="display: none" aria-hidden="true"></i> Test</a></li>
<li><a href="#" class="btn btn-primary">Submit</a></li>
</ul>
</div>
<div class="col-md-6">
<h2>Available Rules</h2>
<div class="form-group">
<label class="sr-only" for="resetFilter">Filter ruleset</label>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-filter fa-fw" aria-hidden="true"></i></div>
<input class="form-control" id="rulesetFilter" placeholder="type here to filter rules...">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 agentSide">
<ul class="list-group connectedRules fa-ul" style="min-height: 200px" id="agent">
<ul class="list-group connectedRules empty" id="agent">
<li class="list-group-item message"><div class="text-muted">Drag rules here to build your agent</div></li>
</ul>
<div id="graph"></div>
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>p2</th>
<th>p3</th>
<th>p4</th>
<th>p5</th>
</tr>
</thead>
<tbody>
<tr>
<th>Score</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th>Moves</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th>Lives</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<ul class="list-group connectedRules fa-ul" style="min-height: 200px" id="ruleset">
<ul class="list-group connectedRules" id="ruleset">
</ul>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="docModal">
<div class="modal-dialog" role="document">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Help Documentation</h4>
</div>
<div class="modal-body">
<p id="docText"> Loading Help Text ... </p>
<iframe style="zoom:0.60" width="99.6%" frameborder="0" src="http://iggi.fosslab.uk/hanabi/apidocs/" id="docFrame"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<p id="docText" style="display: none"> Loading Help Text ... </p>
<div class="embed-responsive embed-responsive-16by9">
<iframe style="zoom:0.60" class="embed-responsive-item" frameborder="0" src="http://iggi.fosslab.uk/hanabi/apidocs/" id="docFrame"></iframe>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="assets/js/loadAndDisplayRules.js"></script>
<script type="text/javascript">
var testPending = false;
$( function() {
$( "#agent, #ruleset" ).sortable({
connectWith: ".connectedRules"
connectWith: ".connectedRules",
items: "li:not(.message)",
receive: function(event, ui) {
$('li.message', this).hide();
if($('li:not(.message)', ui.sender).length == 0){
$('li.message', ui.sender).show();
$(ui.sender).addClass('empty');
console.log($(ui.sender));
} else {
$('li.message', ui.sender).hide();
$(this).removeClass('empty');
}
}
}).disableSelection();
} );
function buildAgent() {
if (testPending) {
return;
}
testPending = true;
$("#testBtn .fa-spinner").css("display", "inline");
var ruleList = [];
$("#agent .list-group-item .ruleid").each(function(x, i) {
ruleList.push(i.innerHTML);
......@@ -81,6 +145,8 @@
$.post("http://hammer.vps.livebytes.co.uk:8000/rule-evaluator-1.0-SNAPSHOT/", model, function(data, textStatus, jqXHR){
console.log("Results", textStatus, data);
updateGraph(data);
testPending = false;
$("#testBtn .fa-spinner").css("display", "none");
});
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment