Skip to content

Commit

Permalink
feat(web): update general layout to replace left nav with a top nav
Browse files Browse the repository at this point in the history
  • Loading branch information
gbossert committed Apr 30, 2017
1 parent f700988 commit 86c595f
Show file tree
Hide file tree
Showing 4 changed files with 179 additions and 139 deletions.
36 changes: 18 additions & 18 deletions netzob_web/netzob_web/static/js/netzob-frontend.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
function initialize_left_nav(current_sid) {
refresh_left_nav(current_sid);
function initialize_nav(current_sid) {
refresh_nav(current_sid);

initialize_new_symbol_form();

Expand All @@ -11,28 +11,26 @@ function initialize_new_symbol_form() {
var symbol_name = $("#new_symbol_name").val();

create_symbol(symbol_name, function(result) {
refresh_left_nav_symbols();
refresh_nav_symbols();

$("#new_symbol_modal").modal('toggle');
});

});
}

function refresh_left_nav(current_sid) {
function refresh_nav(current_sid) {

refresh_left_nav_symbols(current_sid);
refresh_nav_symbols(current_sid);

refresh_left_nav_captures();
refresh_nav_captures();

}

function refresh_left_nav_symbols(current_sid) {
$("#list-symbols").empty()
console.log(current_sid);
function refresh_nav_symbols(current_sid) {
$("li.list-symbols-entry").remove()

get_symbols(function(symbols) {
$("#list-symbols").empty()

for (i=0; i< symbols.length; i++) {

Expand All @@ -42,27 +40,29 @@ function refresh_left_nav_symbols(current_sid) {
active_class = " active";
}

$("#list-symbols").append('<a href="/symbols/'+symbols[i].id+'" class="list-group-item'+active_class+'">'+symbols[i].name+'</a>');
$("#list-symbols").prepend('<li class="list-symbols-entry"><a href="/symbols/'+symbols[i].id+'" class="'+active_class+'">'+symbols[i].name+'</a></li>');
}
if (symbols.length === 0) {
$("#list-symbols").append('<a href="#" class="list-group-item">No symbol found</a>');
$("#list-symbols").prepend('<li class="list-symbols-entry"><a href="#" >No symbol found</a></li>');
}

});
}

function refresh_left_nav_captures() {
$("#list-captures").empty()
function refresh_nav_captures() {
$("li.list-captures-entry").remove()

get_captures(function(captures) {
$("#list-captures").empty()
for (i=0; i< captures.length; i++) {
$("#list-captures").append('<li class="list-group-item"><a href="/captures/'+captures[i].id+'">'+captures[i].name+'</a></li>');
$("#list-captures").append('<li class="list-captures-entry"><a href="/captures/'+captures[i].id+'">'+captures[i].name+'</a></li>');
}
if (captures.length === 0) {
$("#list-captures").append('<li class="list-group-item">No capture found</li>');
}
$("#list-captures").append('<li class="list-captures-entry"><a href="#">No capture found</a></li>');
}


});

}


8 changes: 2 additions & 6 deletions netzob_web/netzob_web/templates/layout.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,7 @@

<div class="container-fluid" >
<div class="row" >
<div class="col-md-2" style="padding:0px;" >
{% include "left-nav.html" %}
</div>

<div class="col-md-10" >
<div class="col-md-12" >
{% block content %}
content
{% endblock %}
Expand All @@ -81,7 +77,7 @@
<script type="text/javascript">

// load left nav
initialize_left_nav("{{ sid }}");
initialize_nav("{{ sid }}");

</script>

Expand Down
126 changes: 80 additions & 46 deletions netzob_web/netzob_web/templates/nav.html
Original file line number Diff line number Diff line change
@@ -1,47 +1,81 @@
<div class="navbar navbar-inverse" role="navigation" style="height:42px">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/" style="color:white">Home</a>
</li>
<li>
<a href="/captures/file">
Import data
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" >
Captures
<b class="caret"></b>
</a>
<ul class="dropdown-menu" id="list-captures">
</ul>
</li>

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" >
Symbols
<b class="caret"></b>
</a>
<ul class="dropdown-menu" id="list-symbols">
<li role="separator" class="divider"></li>
<li>
<a data-toggle="modal" data-target="#new_symbol_modal" href="#">New Symbol</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" >
<li>
<a href="/api" style="color:lightblue">
API <span class="glyphicon glyphicon-dashboard"></span>
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</div>
<!-- Modal: New Symbol -->
<div class="modal fade" id="new_symbol_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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" id="myModalLabel">New symbol</h4>
</div>
<div class="modal-body">

<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ url_for('public.home') }}">

Netzob Web Interface

</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
</ul>
{% if current_user and current_user.is_authenticated %}
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text"><a class="navbar-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a></p>
</li>
<li><a class="navbar-link" href="{{ url_for('public.logout') }}"><i class="fa fa-sign-out"></i></a></li>

</ul>
{% elif form %}
<ul class="nav navbar-nav navbar-right">
<li><a href="{{ url_for('public.register') }}">Create account</a></li>
</ul>
<form id="loginForm" method="POST" class="navbar-form form-inline navbar-right" action="/" role="login">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<div class="form-group">
{{ form.username(placeholder="Username", class_="form-control") }}
{{ form.password(placeholder="Password", class_="form-control") }}
</div>
<button type="submit" class="btn btn-default">Log in</button>
</form>
{% endif %}
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>

<form>
<div class="form-group">
<label for="new_symbol_name">Name</label>
<input type="text" class="form-control" id="new_symbol_name" placeholder="Name">
</div>
</form>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="new_symbol_button" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Loading

0 comments on commit 86c595f

Please sign in to comment.