Skip to content

C
course-discovery
Commit 9904a3ae by Clinton Blackburn
Options

Created query preview page 

ECOM-3261
parent 40945eb9
Showing with 259 additions and 0 deletions
course_discovery/apps/courses/views.py 0 → 100644
from django.views.generic import TemplateView
class QueryPreviewView(TemplateView):
template_name = 'catalogs/preview.html'
course_discovery/static/css/catalog-preview.css 0 → 100644
#queryForm {
margin: 25px 0;
}
.intro,
.examples,
.fields,
.preview {
margin-bottom: 30px;
}
course_discovery/static/js/catalog-preview.js 0 → 100644
var $alertNoResults, $alertQueryInvalid, $query, $table;
function processApiResponse(response) {
$table.rows.add(response.results).draw();
if (response.next) {
getApiResponse(response.next);
}
else if (response.previous == null && response.results.length == 0) {
$alertNoResults.removeClass('hidden');
}
}
function getApiResponse(url) {
$.get(url)
.done(processApiResponse)
.fail(function () {
$alertQueryInvalid.removeClass('hidden');
});
}
/**
* Form submission handler. Sends the query to the server and displays the list of courses.\
*/
function onSubmit(e) {
var query = {
"query": {
"query_string": {
"query": $query.val(),
"analyze_wildcard": true
}
}
},
url = '/api/v1/courses/?q=' + encodeURIComponent(JSON.stringify(query));
e.preventDefault();
$table.clear();
$alertNoResults.addClass('hidden');
$alertQueryInvalid.addClass('hidden');
getApiResponse(url);
}
/**
* Click handler. Populates the query input with the content of the
* clicked example query.
*/
function populateQueryWithExample(e) {
$query.val($(e.target).text());
$query.focus();
}
/**
* Populate the list of Elasticsearch fields
*/
function populateFieldsTable() {
var data = [
['end', 'Course end date'],
['enrollment_start', 'Enrollment start date'],
['enrollment_end', 'Enrollment end date'],
['id', 'Course ID'],
['name', 'Course name'],
['number', 'Course number (e.g. 6.002x)'],
['org', 'Organization (e.g. MITx)'],
['start', 'Course start date'],
['type', 'Type of course (audit, credit, professional, verified)'],
['verification_deadline', 'Final date to submit identity verification'],
];
$("#fields").DataTable({
info: false,
paging: false,
columns: [
{title: 'Name'},
{title: 'Description'}
],
oLanguage: {
sSearch: "Filter: "
},
data: data
});
}
$(document).ready(function () {
$alertNoResults = $('#alertNoResults');
$alertQueryInvalid = $('#alertQueryInvalid');
$query = $('#query');
$table = $('#courses').DataTable({
info: true,
paging: true,
columns: [
{
title: 'Course ID',
data: 'id'
},
{
title: 'Name',
data: 'name'
}
],
oLanguage: {
sSearch: "Filter: "
}
});
$('#queryForm').submit(onSubmit);
$('.example').click(populateQueryWithExample);
populateFieldsTable();
});
course_discovery/templates/catalogs/preview.html 0 → 100644
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Query Preview | Course Discovery</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"
integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'css/catalog-preview.css' %}">
</head>
<body>
<div class="container">
<h1 class="page-header">Query Preview</h1>
<div class="intro">
<div class="alert alert-warning" role="alert">
Please take a moment to review the <a
href="https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-query-string-query.html#query-string-syntax"
target="_blank" class="alert-link">Elasticsearch query string syntax</a>.
</div>
<p>This page is a demonstration of the query language that will power dynamic course catalogs use for affiliates
and coupons.</p>
</div>
<div class="fields">
<h3>Fields</h3>
<p>A number of fields can be used to search for courses. A complete list is below.</p>
<p></p>
<table class="table table-striped table-bordered" id="fields">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
</table>
</div>
<div class="examples">
<h3>Example Queries</h3>
<div class="alert alert-info" role="alert">
Click an example to populate the query field with the example query.
</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Query</th>
</tr>
</thead>
<tbody>
<tr>
<td>Courses belonging to a specific organization</td>
<td><a class="example">org:(MITx OR HarvardX)</a></td>
</tr>
<tr>
<td>Courses NOT belonging to a specific organization</td>
<td><a class="example">org:(-MITx OR -HarvardX)</a></td>
</tr>
<tr>
<td>Courses of a particular type. Options include audit, credit, honor, professional, verified.</td>
<td><a class="example">type:credit</a></td>
</tr>
<tr>
<td>Courses starting in a specific time period</td>
<td><a class="example">start:[2016-01-01 TO 2016-12-31]</a></td>
</tr>
<tr>
<td>All runs of a particular course</td>
<td><a class="example">number:6.002x*</a></td>
</tr>
</tbody>
</table>
</div>
<div class="preview">
<h3>Preview</h3>
<form id="queryForm" class="form-horizontal">
<div class="input-group">
<input id="query" type="text" class="form-control" placeholder="Query">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Search</button>
</span>
</div>
</form>
<div class="alert alert-warning alert-dismissible hidden" role="alert" id="alertNoResults">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
The query returned no results.
</div>
<div class="alert alert-danger alert-dismissible hidden" role="alert" id="alertQueryInvalid">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
The query is invalid.
</div>
<hr>
<div class="results">
<table id="courses" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<th>Course ID</th>
<th>Name</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A=="
crossorigin="anonymous"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script src="{% static 'js/catalog-preview.js' %}"></script>
</body>
</html>
course_discovery/urls.py
......@@ -23,6 +23,7 @@ from django.core.urlresolvers import reverse_lazy
from django.views.generic import RedirectView
from course_discovery.apps.core import views as core_views
from course_discovery.apps.courses.views import QueryPreviewView
admin.autodiscover()
......@@ -40,6 +41,7 @@ urlpatterns = [
url(r'^login/$', login, name='login'),
url(r'^logout/$', logout, name='logout'),
url('', include('social.apps.django_app.urls', namespace='social')),
url('^$', QueryPreviewView.as_view()),
]
if settings.DEBUG and os.environ.get('ENABLE_DJANGO_TOOLBAR', False): # pragma: no cover
......
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