<!DOCTYPE html> <html> <head> <title>Restaurant Search with Predictive Multispace Queries</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> <style type="text/css"> th { white-space: nowrap; } </style> </head> <body> <div class="container"> <!-- busy spinner --> <div class="page-header"> <img id="spinner" alt="loading" class="pull-right" src="images/spinner.gif" style="display: none;" width="32" height="32"> <h1>Restaurant Search with Predictive Multispace Queries</h1> </div> <!-- profile dialog --> <div id="profileDlg" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="model-header"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3 class="modal-title">Profile Editor</h3> </div> <div class="modal-body"> <iframe src="/profile.html" width="100%" height="250" frameborder="0"></iframe> </div> <div class="modal-footer"> <button class="btn btn-warning" id="resetStorage">Reset</button> <button class="btn btn-default" data-dismiss="modal">Accept</button> </div> </div> </div> </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="resolution">Resolution</label> <input class="form-control" type="number" value="20" min="1" id="resolution"> </div> <div class="form-group"> <label for="maxResults">Max results</label> <input class="form-control" type="number" value="100" id="maxResults"> </div> <div class="form-group"> <label for="displayType">Display type</label> <select id="displayType" class="form-control"> <option value="density">Density</option> <option value="compatibility">Compatibility</option> </select> </div> <div class="checkbox"> <label><input type="checkbox" id="useLocalScale">Use local scale</label> </div> <button type="button" data-toggle="modal" data-target="#profileDlg" class="btn btn-default">Launch profile editor</button> </div> </div> </div> <!-- visualizer --> <div class="col-md-9"> <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> <!-- 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 records}} <table class="table table-striped table-condensed"> <thead> <tr> <th> <a href="javascript:sortReviewsBy('name');">Name</a> <span class="sort-icon glyphicon text-muted" data-sort="name"></span> </th> <th> <a href="javascript:sortReviewsBy('distanceToUser');">Distance to user</a> <span class="sort-icon glyphicon text-muted" data-sort="distanceToUser"></span> </th> <th> <a href="javascript:sortReviewsBy('closestStn');">Closest station</a> <span class="sort-icon glyphicon text-muted" data-sort="closestStn"></span> </th> <th> <a href="javascript:sortReviewsBy('distanceToStn');">Distance to station</a> <span class="sort-icon glyphicon text-muted" data-sort="distanceToStn"></span> </th> <th> <a href="javascript:sortReviewsBy('compatibility');">Compatibility</a> <span class="sort-icon glyphicon text-muted" data-sort="compatibility"></span> </th> <th> <a href="javascript:sortReviewsBy('score');">Score</a> <span class="sort-icon glyphicon text-muted" data-sort="score"></span> </th> <th> <a href="javascript:sortReviewsBy('accessCount');">Access count</a> <span class="sort-icon glyphicon text-muted" data-sort="accessCount"></span> </th> </tr> </thead> {{#each records}} <tr> <td><a href="{{url}}" target="_blank" onclick="javascript:accessReview({{id}});">{{name}}</a></td> <td>{{#prettyFloat 2}}{{distanceToUser}}{{/prettyFloat}} km</td> <td>{{closestStn}}</td> <td>{{distanceToStn}} m</td> <td>{{#prettyFloat 4}}{{compatibility}}{{/prettyFloat}}</td> <td>{{#prettyFloat 4}}{{score}}{{/prettyFloat}}</td> <td>{{accessCount}}</td> </tr> {{/each}} </table> {{/if}} </script> <div id="records"></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>