1
restaurant-search/client/index.html

126 lines
5.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<title>Reactive Search</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<!-- busy spinner -->
<div class="page-header">
<h1><img id="spinner" alt="loading" class="pull-right" src="images/spinner.gif" style="display: none;" width="32" height="32">Reactive Search</h1>
</div>
<!-- profile dialog -->
<div id="profileDlg" class="modal hide fade" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Profile</h3>
</div>
<div class="modal-body">
<iframe src="/profile.html" style="zoom:0.60" width="99.6%" height="250" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">OK</button>
</div>
</div>
<div class="row">
<!-- query -->
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<big>Query</big>
</div>
<div class="panel-body">
<div class="form-group">
<label for="walkingDist">Walking distance (km)</label>
<input class="form-control" type="number" step="0.1" min="0.1" value="1.0" id="walkingDist">
</div>
<div class="form-group">
<label for="minScore">Minimum score</label>
<input class="form-control" type="number" step="0.01" value="0.25" id="minScore">
</div>
<div class="form-group">
<label for="hintSteps">Hint steps</label>
<input class="form-control" type="number" value="20" min="1" id="hintSteps">
</div>
<div class="form-group">
<label for="maxResults">Max results</label>
<input class="form-control" type="number" value="100" id="maxResults">
</div>
<div class="checkbox">
<label><input type="checkbox" id="useLocalScale" checked="checked">Use local scale</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label>
</div>
<button type="button" id="editProfile" class="btn btn-primary">Edit profile</button>
</div>
</div>
</div>
<!-- visualizer -->
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
<big>Visualizer</big>
</div>
<div class="panel-body">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"></svg>
</div>
</div>
</div>
</div>
<!-- result listing -->
<div class="panel panel-default" style="display: none;" id="resultPanel">
<div class="panel-heading">
<big>Results (<span id="resultCount"></span>)</big>
</div>
<div class="panel-body">
<script id="template" type="text/x-handlers-template">
{{#if results}}
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Distance to user</th>
<th>Closest station</th>
<th>Distance to station</th>
<th>Score</th>
</tr>
</thead>
{{#each results}}
<tr>
<td>{{id}}</td>
<td><a href="javascript:accessReview({{id}});">{{name}}</a></td>
<th>{{distanceToUser}} km</th>
<th>{{closestStn}}</th>
<th>{{distanceToStn}} km</th>
<td>{{score}}</td>
</tr>
{{/each}}
</table>
{{/if}}
</script>
<div id="results"></div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/tinycolor/tinycolor.js"></script>
<script src="bower_components/snap.svg/dist/snap.svg-min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="scripts/search.js"></script>
<script src="scripts/grapher.js"></script>
</body>
</html>