2017-03-12 03:45:42 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Moto< / title >
< link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" >
< link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel = "stylesheet" >
< style >
body {
padding-top: 70px;
padding-bottom: 30px;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
.theme-showcase .navbar .container {
width: auto;
}
< / style >
< / head >
< body >
< nav class = "navbar navbar-inverse navbar-fixed-top" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#navbar" aria-expanded = "false" aria-controls = "navbar" >
< 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 = "#" > Moto< / a >
< / div >
< div id = "navbar" class = "navbar-collapse collapse" >
< ul class = "nav navbar-nav" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
2017-03-12 23:58:40 +00:00
< li > < a href = "#about" data-toggle = "modal" data-target = "#aboutModal" > About< / a > < / li >
2017-03-12 16:34:54 +00:00
< / ul >
2017-03-12 03:45:42 +00:00
< / div >
< / div >
< / nav >
< div class = "container theme-showcase" role = "main" id = "main" >
< / div >
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > < / script >
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js" > < / script >
{% raw %}
< script id = "template" type = "text/x-handlebars-template" >
2017-03-12 16:59:30 +00:00
< ul id = "myTab" class = "nav nav-pills" >
2017-03-12 03:45:42 +00:00
{{#each data}}
2017-03-12 16:34:54 +00:00
< li { { # if @ first } } class = "active" { { / if } } > < a href = "#{{this.name}}" data-toggle = "tab" > {{this.name}}< / a > < / li >
2017-03-12 03:45:42 +00:00
{{/each}}
< / ul >
< div id = "myTabContent" class = "tab-content" >
{{#each data}}
2017-03-12 16:34:54 +00:00
< div class = "tab-pane fade {{#if @first}}in active{{/if}}" id = "{{this.name}}" >
2017-03-12 03:45:42 +00:00
{{#each this}}
2017-03-12 16:59:30 +00:00
{{#unless @last}} <!-- Skip name key -->
2017-03-12 03:45:42 +00:00
< div class = "page-header" >
2017-03-12 16:59:30 +00:00
< h3 > {{@key}}< / h3 >
2017-03-12 03:45:42 +00:00
< / div >
< div class = "row" >
< div class = "col-md-12" >
< table class = "table table-striped table-bordered table-condensed" >
{{#each this}}
< tr >
{{#each this}}
< td > {{@key}}: {{this}}< / td >
{{/each}}
< / tr >
2017-03-12 16:59:30 +00:00
{{else}}
< tr > < td > []< / td > < / tr >
2017-03-12 03:45:42 +00:00
{{/each}}
< / table >
< / div >
< / div >
2017-03-12 16:59:30 +00:00
{{/unless}}
2017-03-12 03:45:42 +00:00
{{/each}}
< / div >
{{/each}}
< / div >
< / script >
< script >
2017-03-12 16:34:54 +00:00
sortObject = function(obj) {
if ($.isArray(obj)) {
var result = [];
$.each(obj, function(index, array_item) {
result.push(sortObject(array_item));
})
return result;
2017-03-12 03:45:42 +00:00
}
2017-03-12 16:34:54 +00:00
if (!$.isPlainObject(obj)) {
return obj;
}
2017-03-12 03:45:42 +00:00
2017-03-12 16:34:54 +00:00
var keys = $.map(obj, function(element,index) {return index});
keys.sort();
var len = keys.length;
2017-03-12 03:45:42 +00:00
2017-03-12 16:34:54 +00:00
var result = {};
$.each(keys, function(index, key) {
var val = obj[key];
result[key] = sortObject(val);
})
return result;
}
flattenAndSortObject = function(obj) {
if (!$.isPlainObject(obj)) {
return obj;
}
var keys = $.map(obj, function(element,index) {return index});
keys.sort();
var len = keys.length;
var result = [];
$.each(keys, function(index, key) {
var val = obj[key];
val.name = key;
result.push(sortObject(val));
})
return result;
}
$(document).ready(function (){
2017-03-12 03:45:42 +00:00
2017-03-12 16:34:54 +00:00
$.getJSON("/moto-api/data.json", function(data) {
2017-03-12 03:45:42 +00:00
var source = $('#template').html();
var template = Handlebars.compile(source);
2017-03-12 16:34:54 +00:00
data = flattenAndSortObject(data);
$('#main').append(template({"data": data}));
2017-03-12 03:45:42 +00:00
});
})
< / script >
{% endraw %}
2017-03-12 23:58:40 +00:00
<!-- Modal -->
< div class = "modal fade" id = "aboutModal" 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" > × < / span > < / button >
< h4 class = "modal-title" id = "myModalLabel" > About Moto< / h4 >
< / div >
< div class = "modal-body" >
< p > Moto was created by < a href = "https://twitter.com/spulec" > Steve Pulec< / a > and < a href = "https://github.com/spulec/moto/blob/master/AUTHORS.md" > many other contributors< / a > .< / p >
< p > Please open any issues < a href = "https://github.com/spulec/moto/issues" > here< / a > .< / p >
< / div >
< / div >
< / div >
< / div >
2017-03-12 03:45:42 +00:00
< / body >
< / html >
