Last active
August 29, 2015 14:06
-
-
Save dalegaspi/85d39b11eada737855a2 to your computer and use it in GitHub Desktop.
jsView sample with Tables and asynchronous JSON
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>K2 Scheduler/Ingester Status</title> | |
<!-- Latest compiled and minified CSS --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
<!-- Optional theme --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> | |
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> | |
<!-- Latest compiled and minified JavaScript --> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
<script type="text/javascript" src="http://www.jsviews.com/download/jsviews.min.js"></script> | |
</head> | |
<body> | |
<div class="container"> | |
<div id="content"> | |
<nav class="navbar navbar-inverse" role="navigation"> | |
<div class="container-fluid"> | |
<div class="navbar-header"> | |
<a class="navbar-brand" href="http://www.siriusxm.com/"><img style="width: 101px" src="http://player-k2prod.mountain.siriusxm.com/assets/images/SXM_Logo.svg" /> | |
</a> | |
</div> | |
<!-- Collect the nav links, forms, and other content for toggling --> | |
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
<ul class="nav navbar-nav"> | |
<li><a href="#">K2 Scheduler Admin Tool</a> | |
</li> | |
</ul> | |
<ul class="nav navbar-nav navbar-right"> | |
<li><a href="#"><span class="glyphicon glyphicon-question-sign"></a> | |
</li> | |
</ul> | |
</div> | |
<!-- /.navbar-collapse --> | |
</div> | |
<!-- /.container-fluid --> | |
</nav> | |
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> | |
<li class="active"><a href="#ingesterstatus" data-toggle="tab">Scheduler</a> | |
</li> | |
<li><a href="#searchtest" data-toggle="tab">Search</a> | |
</li> | |
</ul> | |
<div id="my-tab-content" class="tab-content"> | |
<div class="tab-pane active" id="ingesterstatus"> | |
<div id="result"></div> | |
</div> | |
<div class="tab-pane" id="searchtest"> | |
<br /> | |
<br/> | |
<form class="" role="search"> | |
<div class="form-group"> | |
<div class="row"> | |
<div class="col-xs-6"> | |
<div class="input-group"> | |
<input type="text" class="form-control" placeholder="Query" /> <span class="input-group-btn"> | |
<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span> | |
</button> | |
</div> | |
<!-- /input-group --> | |
</div> | |
<!-- /.col-lg-6 --> | |
</div> | |
</div> | |
</form> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
jQuery(document).ready(function($) { | |
$('#tabs').tab(); | |
}); | |
</script> | |
<script id="theTmpl" type="text/x-jsrender"> | |
<div> | |
<h4>Current ingester status: {{:strStatus}}</h4> | |
<table class="table table-bordered"> | |
<tbody> | |
<tr> | |
<th>Job</th> | |
<th>Next Scheduled Run</th> | |
</tr> | |
{{for activeJobs}} | |
<tr> | |
<td>{^{:name}}</td> | |
<td>{^{:nextRun}}</td> | |
</tr> | |
{{/for}}</tbody> | |
</table> | |
</div> | |
</script> | |
<script> | |
// sample data | |
var data = { | |
"blnStatus": false, | |
"strStatus": "no active jobs", | |
"statusCode": -1, | |
"strCollection": null, | |
"numDocs": -1, | |
"metaData": {}, | |
"activeJobs": [{ | |
"name": "liveaodfutureJob", | |
"nextRun": "Wed Sep 10 13:15:00 EDT 2014" | |
}, { | |
"name": "personsUpdateJob", | |
"nextRun": "Wed Sep 10 13:20:00 EDT 2014" | |
}, { | |
"name": "scheduleepgUpdateJob", | |
"nextRun": "Wed Sep 10 13:15:00 EDT 2014" | |
}, { | |
"name": "channelUpdateJob", | |
"nextRun": "Wed Sep 10 13:20:00 EDT 2014" | |
}], | |
"indexUpdateTime": null | |
} | |
var template = $.templates("#theTmpl"); | |
// uncomment this line to test without $.getJSON below | |
//template.link("#result", data); | |
$.getJSON('/K2Search/getStatus.do', function(data) { | |
template.link("#result", data); | |
}); | |
</script> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment