|
|
@@ -23,11 +23,88 @@ from django.utils.translation import ugettext as _
|
|
|
${commonheader(_('Query Results'), "beeswax", user, "100px")}
|
|
|
${layout.menubar(section='query')}
|
|
|
|
|
|
+<style>
|
|
|
+ #collapse {
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ #expand {
|
|
|
+ display: none;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ background-color: #01639C;
|
|
|
+ padding: 3px;
|
|
|
+ -webkit-border-top-right-radius: 5px;
|
|
|
+ -webkit-border-bottom-right-radius: 5px;
|
|
|
+ -moz-border-radius-topright: 5px;
|
|
|
+ -moz-border-radius-bottomright: 5px;
|
|
|
+ border-top-right-radius: 5px;
|
|
|
+ border-bottom-right-radius: 5px;
|
|
|
+ opacity: 0.5;
|
|
|
+ left: -4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #expand:hover {
|
|
|
+ opacity: 1;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noLeftMargin {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rowSelected {
|
|
|
+ background-color: #EEEEEE !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .columnSelected {
|
|
|
+ background-color: #EEEEEE !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cellSelected {
|
|
|
+ background-color: #DDDDDD !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ #suggestColumns {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ display: none;
|
|
|
+ min-width: 160px;
|
|
|
+ padding: 10px 20px 2px 10px;
|
|
|
+ margin: 2px 0 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
+ *border-right-width: 2px;
|
|
|
+ *border-bottom-width: 2px;
|
|
|
+ -webkit-border-radius: 6px;
|
|
|
+ -moz-border-radius: 6px;
|
|
|
+ border-radius: 6px;
|
|
|
+ -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
|
|
+ -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
|
|
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
|
|
+ -webkit-background-clip: padding-box;
|
|
|
+ -moz-background-clip: padding;
|
|
|
+ background-clip: padding-box;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ #suggestColumns a {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: -14px;
|
|
|
+ margin-top: -12px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
<div class="container-fluid">
|
|
|
<h1>${_('Query Results:')} ${util.render_query_context(query_context)}</h1>
|
|
|
+ <div id="expand"><i class="icon-chevron-right icon-white"></i></div>
|
|
|
<div class="row-fluid">
|
|
|
<div class="span3">
|
|
|
<div class="well sidebar-nav">
|
|
|
+ <a id="collapse" class="btn btn-small"><i class="icon-chevron-left" rel="tooltip" title="${_('Collapse this panel')}"></i></a>
|
|
|
<ul class="nav nav-list">
|
|
|
% if download_urls:
|
|
|
<li class="nav-header">${_('Downloads')}</li>
|
|
|
@@ -55,68 +132,72 @@ ${layout.menubar(section='query')}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="span9">
|
|
|
- <ul class="nav nav-tabs">
|
|
|
- <li class="active"><a href="#results" data-toggle="tab">
|
|
|
- %if error:
|
|
|
+ <ul class="nav nav-tabs">
|
|
|
+ <li class="active"><a href="#results" data-toggle="tab">
|
|
|
+ %if error:
|
|
|
${_('Error')}
|
|
|
- %else:
|
|
|
+ %else:
|
|
|
${_('Results')}
|
|
|
- %endif
|
|
|
- </a></li>
|
|
|
- <li><a href="#query" data-toggle="tab">${_('Query')}</a></li>
|
|
|
- <li><a href="#log" data-toggle="tab">${_('Log')}</a></li>
|
|
|
- </ul>
|
|
|
+ %endif
|
|
|
+ </a></li>
|
|
|
+ <li><a href="#query" data-toggle="tab">${_('Query')}</a></li>
|
|
|
+ <li><a href="#log" data-toggle="tab">${_('Log')}</a></li>
|
|
|
+ </ul>
|
|
|
|
|
|
- <div class="tab-content">
|
|
|
- <div class="active tab-pane" id="results">
|
|
|
- % if error:
|
|
|
- <div class="alert alert-error">
|
|
|
- <h3>${_('Error!')}</h3>
|
|
|
- <pre>${error_message | h}</pre>
|
|
|
- </div>
|
|
|
- % else:
|
|
|
- % if expected_first_row != start_row:
|
|
|
- <div class="alert"><strong>${_('Warning:')}</strong> ${_('Page offset may have incremented since last view.')}</div>
|
|
|
- % endif
|
|
|
- <table class="table table-striped table-condensed resultTable" cellpadding="0" cellspacing="0">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th> </th>
|
|
|
- % for col in columns:
|
|
|
- <th>${col}</th>
|
|
|
- % endfor
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- % for i, row in enumerate(results):
|
|
|
- <tr>
|
|
|
- <td style="white-space: nowrap">${start_row + i}</td>
|
|
|
- % for item in row:
|
|
|
- <td style="white-space: nowrap">${ item }</td>
|
|
|
- % endfor
|
|
|
- </tr>
|
|
|
- % endfor
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- <div class="pagination pull-right">
|
|
|
- <ul>
|
|
|
- % if start_row != 0:
|
|
|
- <li class="prev"><a title="${_('Beginning of List')}" href="${ url('beeswax.views.view_results', query.id, 0) }${'?context=' + context_param or '' | n}">← ${_('Beginning of List')}</a></li>
|
|
|
- % endif
|
|
|
- % if has_more and len(results) == 100:
|
|
|
- <li><a title="${_('Next page')}" href="${ url('beeswax.views.view_results', query.id, next_row) }${'?context=' + context_param or '' | n}">${_('Next Page')} →</a></li>
|
|
|
- % endif
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- % endif
|
|
|
- </div>
|
|
|
- <div class="tab-pane" id="query">
|
|
|
- <pre>${query.query | h}</pre>
|
|
|
- </div>
|
|
|
- <div class="tab-pane" id="log">
|
|
|
- <pre>${log | h}</pre>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="active tab-pane" id="results">
|
|
|
+ % if error:
|
|
|
+ <div class="alert alert-error">
|
|
|
+ <h3>${_('Error!')}</h3>
|
|
|
+ <pre>${error_message | h}</pre>
|
|
|
+ </div>
|
|
|
+ % else:
|
|
|
+ % if expected_first_row != start_row:
|
|
|
+ <div class="alert"><strong>${_('Warning:')}</strong> ${_('Page offset may have incremented since last view.')}</div>
|
|
|
+ % endif
|
|
|
+ <table class="table table-striped table-condensed resultTable" cellpadding="0" cellspacing="0">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th> </th>
|
|
|
+ % for col in columns:
|
|
|
+ <th>${col}</th>
|
|
|
+ % endfor
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ % for i, row in enumerate(results):
|
|
|
+ <tr>
|
|
|
+ <td style="white-space: nowrap">${start_row + i}</td>
|
|
|
+ % for item in row:
|
|
|
+ <td style="white-space: nowrap">${ item }</td>
|
|
|
+ % endfor
|
|
|
+ </tr>
|
|
|
+ % endfor
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <div class="pagination pull-right">
|
|
|
+ <ul>
|
|
|
+ % if start_row != 0:
|
|
|
+ <li class="prev"><a title="${_('Beginning of List')}" href="${ url('beeswax.views.view_results', query.id, 0) }${'?context=' + context_param or '' | n}">← ${_('Beginning of List')}</a></li>
|
|
|
+ % endif
|
|
|
+ % if has_more and len(results) == 100:
|
|
|
+ <li><a title="${_('Next page')}" href="${ url('beeswax.views.view_results', query.id, next_row) }${'?context=' + context_param or '' | n}">${_('Next Page')} →</a></li>
|
|
|
+ % endif
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div id="jumpToColumnAlert" class="alert hide" style="float:left;margin: 20px 0;">
|
|
|
+ <button type="button" class="close" data-dismiss="alert">×</button>
|
|
|
+ <strong>${_('Did you know?')}</strong> ${_('You can click on a row to select a column you want to jump to.')}
|
|
|
+ </div>
|
|
|
+ % endif
|
|
|
+ </div>
|
|
|
+ <div class="tab-pane" id="query">
|
|
|
+ <pre>${query.query | h}</pre>
|
|
|
+ </div>
|
|
|
+ <div class="tab-pane" id="log">
|
|
|
+ <pre>${log | h}</pre>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -160,6 +241,11 @@ ${layout.menubar(section='query')}
|
|
|
</div>
|
|
|
%endif
|
|
|
|
|
|
+<div id="suggestColumns">
|
|
|
+ <a href="#" class="pull-right">×</a>
|
|
|
+ <label>${_('Go to column:')} <input type="text" placeholder="${_('column name...')}" /></label>
|
|
|
+</div>
|
|
|
+
|
|
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
$(document).ready(function () {
|
|
|
@@ -226,6 +312,78 @@ ${layout.menubar(section='query')}
|
|
|
$("#fileChooserModal").slideDown();
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+ $("#collapse").click(function () {
|
|
|
+ $(".sidebar-nav").parent().css("margin-left", "-31%");
|
|
|
+ $("#expand").show().css("top", $(".sidebar-nav i").position().top + "px");
|
|
|
+ $(".sidebar-nav").parent().next().removeClass("span9").addClass("span12").addClass("noLeftMargin");
|
|
|
+ });
|
|
|
+ $("#expand").click(function () {
|
|
|
+ $(this).hide();
|
|
|
+ $(".sidebar-nav").parent().next().removeClass("span12").addClass("span9").removeClass("noLeftMargin");
|
|
|
+ $(".sidebar-nav").parent().css("margin-left", "0");
|
|
|
+ });
|
|
|
+
|
|
|
+ $("[rel='tooltip']").tooltip();
|
|
|
+
|
|
|
+ $(".resultTable tbody").click(function (event) {
|
|
|
+ $(".rowSelected").removeClass("rowSelected");
|
|
|
+ $(".columnSelected").removeClass("columnSelected");
|
|
|
+ $(".cellSelected").removeClass("cellSelected");
|
|
|
+ $(event.target.parentNode).addClass("rowSelected");
|
|
|
+ $(event.target.parentNode).find("td").each(function () {
|
|
|
+ $(this).addClass("rowSelected");
|
|
|
+ $(this).attr("rel", "tooltip").attr("title", $(this).parents("table").find("th").eq($(this).prevAll().length).text()).tooltip();
|
|
|
+ });
|
|
|
+ $("#suggestColumns")
|
|
|
+ .css("left", (event.clientX + $("#suggestColumns").width() > $(window).width() - 10 ? event.clientX - $("#suggestColumns").width() - 10 : event.clientX))
|
|
|
+ .css("top", event.clientY + 10).show();
|
|
|
+ $("#suggestColumns input").focus();
|
|
|
+ });
|
|
|
+
|
|
|
+ $.expr[":"].econtains = function (obj, index, meta, stack) {
|
|
|
+ return (obj.textContent || obj.innerText || $(obj).text() || "").toLowerCase() == meta[3].toLowerCase();
|
|
|
+ }
|
|
|
+
|
|
|
+ var source = [];
|
|
|
+ $(".resultTable th").each(function () {
|
|
|
+ source.push($(this).text());
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#suggestColumns input").typeahead({
|
|
|
+ source:source,
|
|
|
+ updater:function (item) {
|
|
|
+ $("#suggestColumns").hide();
|
|
|
+ $(".resultTable tr td:nth-child(" + ($(".resultTable th:econtains(" + item + ")").index() + 1) + ")").addClass("columnSelected");
|
|
|
+ $(".dataTables_wrapper").animate({
|
|
|
+ scrollLeft:$(".resultTable th:econtains(" + item + ")").position().left + $(".dataTables_wrapper").scrollLeft() - $(".dataTables_wrapper").offset().left - 30
|
|
|
+ }, 300);
|
|
|
+ $(".resultTable tr.rowSelected td:nth-child(" + ($(".resultTable th:econtains(" + item + ")").index() + 1) + ")").addClass("cellSelected");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#suggestColumns a").click(function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ $("#suggestColumns").hide();
|
|
|
+ });
|
|
|
+
|
|
|
+ $(window).resize(function () {
|
|
|
+ $("#suggestColumns").hide();
|
|
|
+ });
|
|
|
+
|
|
|
+ var showAlertTimeout = -1;
|
|
|
+ $(".resultTable tbody").mousemove(function () {
|
|
|
+ window.clearTimeout(showAlertTimeout);
|
|
|
+ if ($("#jumpToColumnAlert").data("show") == null || $("#jumpToColumnAlert").data("show")) {
|
|
|
+ showAlertTimeout = window.setTimeout(function () {
|
|
|
+ $("#jumpToColumnAlert").fadeIn();
|
|
|
+ }, 1300);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#jumpToColumnAlert .close").click(function () {
|
|
|
+ $("#jumpToColumnAlert").data("show", false);
|
|
|
+ });
|
|
|
});
|
|
|
</script>
|
|
|
|