Commit 99c54a15 authored by Jed Simson's avatar Jed Simson

Frontend template for searching

parent 627e2689
<!DOCTYPE HTML>
<head>
<script
src="https://code.jquery.com/jquery-3.0.0.min.js"
integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
</head>
<body>
<div class="container">
<div class="content">
<br>
<h1>Reddit Slider</h1>
<hr>
<p>Please enter your query using the options below...</p>
<div id="error" class="alert alert-danger" style="display:none;"></div>
<form class="form-inline">
<fieldset class="form-group">
<label for="subreddit"><strong>Subreddit</strong></label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">/r/</span>
<input type="text" id="subreddit" class="form-control" placeholder="programming">
</div>
</fieldset>
<title>Reddit Slider | Search</title>
<fieldset class="form-group">
<label for="range"><strong>Range</strong></label>
<input type="text" id="range" class="form-control" placeholder="Today">
</fieldset>
<script src="{{ url_for('static', filename='bower_components/react/react.min.js') }}"></script>
<script src="{{ url_for('static', filename='bower_components/react/react-dom.min.js') }}"></script>
<fieldset class="form-group">
<label for="sort"><strong>Sort</strong></label>
<select class="form-control" id="sort">
<option value="hot" selected>Hot</option>
<option value="top">Top</option>
<option value="top">New</option>
<option value="top">Controversial</option>
</select>
</fieldset>
<script src="{{ url_for('static', filename='bower_components/jquery/dist/jquery.min.js') }}"></script>
<fieldset class="form-group">
<label for="limit"><strong>Limit</strong></label>
<input type="number" class="form-control" id="limit" placeholder="100">
</fieldset>
<button id="search-btn" class="btn btn-primary-outline" type="submit">Search</button>
</form>
<link rel="stylesheet" href="../static/bootstrap.min.css">
</head>
<br>
<div id="info" class="alert alert-info" style="display:none;"></div>
<hr>
<div class="list-group" id="results">
<div id="loading" style="display:none;">Loading...</div>
</div>
</div>
</div>
<body>
<div id="react-mount-point"></div>
</body>
<script type="text/javascript">
$('#search-btn').click(function(event) {
event.preventDefault();
var subreddit = $('#subreddit').val() || 'programming';
var range = $('#range').val() || 'today';
var sort = $('#sort').val() || 'hot';
var limit = $('#limit').val() || '100';
var range = range.split(' ').join('+');
if (subreddit == null) {
$('#error').text('Please provide a subreddit');
$('#error').show();
return;
}
var url = '/search/' + subreddit + '/?range=' + range + '&sort=' + sort + '&limit=' + limit;
$('#loading').show();
$('#info').hide();
$('.list-group-item').remove();
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
contentType: 'application/json',
success: function(data) {
$('#loading').hide();
var count = data['count'];
var time = data['time'];
$('#info').text(count + ' results fetched in ' + time + ' seconds...')
$('#info').show();
var submissions = data['submissions'];
for (i=0; i<submissions.length; i++) {
var submission = submissions[i];
$('#results').append('<li class="list-group-item"><a href="' + submission['href'] + '">' + submission['info'] + '</a></li>');
}
$('html,body').animate({scrollTop: $('#info').offset().top}, 'slow');
},
error: function(data) {
var error = data.responseJSON['error'];
$('#loading').hide();
$('#results').append('<p class="result">No results...</p>');
$('#error').text(error);
$('#error').show();
}
});
});
</script>
<script src="{{ url_for('static', filename='scripts/js/components.js') }}"></script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment