troopclient
Version:
Client component for troop style backend svc
103 lines (97 loc) • 4.5 kB
HTML
<html>
<head>
<title>TROOP Client</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bower_components/jsoneditor/jsoneditor.css" />
<link rel="stylesheet" type="text/css" href="bower_components/ladda-bootstrap/dist/ladda-themeless.css" />
<style type="text/css">
.json-editor {
height: 500px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand" style="color:#fff;">
TROOP SERVICES CLIENT - [ <span class="context"></span> ]
</div>
</div
</div>
</div>
</nav>
<div class="container" >
<ul id="menu" class="nav nav-tabs">
<li class="active"><a href="#QueryArea">QUERY</a></li>
<li><a href="#CommandArea">COMMAND</a></li>
</ul>
<div class="tab-content" style="padding-top:5px;">
<div class="tab-pane active" id="QueryArea">
<form role="form" class="form-inline query-form" method="post" action="/query" enctype="application/x-www-form-urlencoded">
<div class="form-group">
<input type="text" name="Service" style="width:235px;" class="form-control"
value="/services/school/query"
placeholder="Service" />
</div>
<div class="form-group">
<input type="text" name="ContextParameters" style="width:550px;" class="form-control"
value="c=countrycode=fr|culturecode=zh-CN|partnercode=None|siteversion=development"
placeholder="Context Parameters" />
</div>
<div class="form-group">
<input type="text" style="width:267px;" name="ResourceId" class="form-control"
placeholder="Resource" />
</div>
<div class="form-group">
<button id="QueryButton" type="submit" class="btn btn-primary ladda-button"
data-style="zoom-out"><span class="ladda-label">QUERY</span></button>
</div>
</form>
<div style="margin-top:3px;">
<div class="json-editor form-group" style="float:left;width:50%;" id="QueryMetadataJsonEditor"></div>
<div class="json-editor form-group" style="float:right;width:49%;" id="QueryResultJsonEditor"></div>
</div>
</div>
<div class="tab-pane" id="CommandArea">
<form role="form" class="form-inline command-form" method="post" action="/command" enctype="application/x-www-form-urlencoded">
<div class="form-group">
<input type="text" style="width:237px;" name="App" class="form-control"
value="/services/school"
placeholder="App" />
</div>
<div class="form-group">
<input type="text" name="Service" style="width:228px;" class="form-control"
value="/logger/log"
placeholder="Service" />
</div>
<div class="form-group">
<input type="text" name="ContextParameters" style="width:550px;" class="form-control"
value="c=countrycode=fr|culturecode=zh-CN|partnercode=None|siteversion=development"
placeholder="Context Parameters" />
</div>
<div class="form-group">
<button id="CommandButton" type="submit" class="btn btn-primary ladda-button"
data-style="zoom-out"><span class="ladda-label">COMMANDO</span></button>
</div>
<textarea name="InputJson" style="display:none;"></textarea>
</form>
<div style="margin-top:3px;">
<div class="json-editor form-group" style="float:left;width:33%;" id="CommandMetadataJsonEditor"></div>
<div class="json-editor form-group" style="float:left;width:33%;margin-left:6px;" id="CommandInputJsonEditor"></div>
<div class="json-editor form-group" style="float:right;width:33%;" id="CommandResultJsonEditor"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
<script type="text/javascript" src="bower_components/jquery-form/jquery.form.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/ladda-bootstrap/dist/spin.js"></script>
<script type="text/javascript" src="bower_components/ladda-bootstrap/dist/ladda.js"></script>
<script type="text/javascript" src="bower_components/jsoneditor/jsoneditor.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>