Fixed some bugs. Started auto complete

This commit is contained in:
simon
2018-04-11 13:46:05 -04:00
parent 410261da41
commit 8b55c3b681
16 changed files with 318 additions and 201 deletions

View File

@@ -8,9 +8,13 @@
<!-- Demo Dependencies -->
<script src="/static/js/popper.min.js" type="text/javascript"></script>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/css/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/js/Chart.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/auto-complete.css">
<script src="/static/js/auto-complete.min.js" type="text/javascript"></script>
<link href="/static/css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
@@ -22,6 +26,7 @@
.info-table pre {
padding: 6px;
margin: 4px;
white-space: unset;
}
.info-table td {

View File

@@ -29,6 +29,11 @@
background-color: #AA99C9;
}
.badge-audio {
color: #FFFFFF;
background-color: #00ADEF;
}
.badge-resolution {
color: #212529;
background-color: #FFC107;
@@ -92,6 +97,16 @@
.hl {
color: red;
}
.content-div {
font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
font-size: 13px;
padding: 1em;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
margin: 3px;
}
</style>
<div class="container">
@@ -99,17 +114,32 @@
<div class="card">
{# <div class="card-header">An excellent form</div>#}
<div class="card-body">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"></div>
</div>
<input id="searchBar" type="search" class="form-control" placeholder="Search">
</div>
<input id="pathBar" type="search" class="form-control" placeholder="Path">
<input id="searchBar" type="search" class="form-control" placeholder="Search">
</div>
</div>
<script>
new autoComplete({
selector: '#pathBar',
minChars: 1,
source: function(term, suggest) {
term = term.toLowerCase();
var choices = pathAutoComplete;
var matches = [];
for (var i=0; i<choices.length; i++) {
if (~choices[i].toLowerCase().indexOf(term)) {
matches.push(choices[i]);
}
}
suggest(matches);
}
});
</script>
<div id="searchResults">
</div>
@@ -130,7 +160,12 @@
var stat = document.createElement("p");
stat.appendChild(document.createTextNode(searchResult["hits"]["total"] + " results in " + searchResult["took"] + "ms"));
var sizeStat = document.createElement("span");
sizeStat.appendChild(document.createTextNode(humanFileSize(searchResult["aggregations"]["total_size"]["value"])));
statsCardBody.appendChild(stat);
statsCardBody.appendChild(sizeStat);
statsCard.appendChild(statsCardBody);
return statsCard;
@@ -284,9 +319,15 @@
//Title
var title = document.createElement("p");
title.setAttribute("class", "file-title");
var extention = hit["_source"].hasOwnProperty("extension") && hit["_source"]["extension"] !== null ? "." + hit["_source"]["extension"] : "";
title.insertAdjacentHTML('afterbegin', hit["highlight"]["name"] + extention);
title.setAttribute("title", hit["_source"]["path"]);
var extension = hit["_source"].hasOwnProperty("extension") && hit["_source"]["extension"] !== "" ? "." + hit["_source"]["extension"] : "";
if (hit.hasOwnProperty("highlight") && hit["highlight"].hasOwnProperty("name")) {
title.insertAdjacentHTML('afterbegin', hit["highlight"]["name"] + extension);
} else {
title.appendChild(document.createTextNode(hit["_source"]["name"]));
}
title.setAttribute("title", hit["_source"]["path"] + hit["_source"]["name"] + extension);
docCard.appendChild(title);
var tagContainer = document.createElement("div");
@@ -323,7 +364,9 @@
//Resolution
var resolutionBadge = document.createElement("span");
resolutionBadge.setAttribute("class", "badge badge-resolution");
resolutionBadge.appendChild(document.createTextNode(hit["_source"]["width"] + "x" + hit["_source"]["height"]));
if (hit["_source"].hasOwnProperty("width")) {
resolutionBadge.appendChild(document.createTextNode(hit["_source"]["width"] + "x" + hit["_source"]["height"]));
}
thumbnailOverlay.appendChild(resolutionBadge);
var format = hit["_source"]["format"];
@@ -365,6 +408,13 @@
formatTag.appendChild(document.createTextNode(format));
tags.push(formatTag);
break;
case "audio":
formatTag = document.createElement("span");
formatTag.setAttribute("class", "badge badge-pill badge-audio");
formatTag.appendChild(document.createTextNode(hit["_source"]["format_name"]));
tags.push(formatTag);
break;
}
@@ -372,31 +422,38 @@
if (hit.hasOwnProperty("highlight") && hit["highlight"].hasOwnProperty("content")) {
var contentDiv = document.createElement("div");
contentDiv.innerHTML = hit["highlight"]["content"][0];
contentDiv.setAttribute("class", "content-div bg-light");
contentDiv.insertAdjacentHTML('afterbegin', hit["highlight"]["content"][0]);
docCard.appendChild(contentDiv);
}
//Size tag
var sizeTag = document.createElement("small");
sizeTag.appendChild(document.createTextNode(humanFileSize(hit["_source"]["size"])));
sizeTag.setAttribute("class", "text-muted");
//Audio
if (mimeCategory === "audio") {
}
if (thumbnail !== null) {
imgWrapper.appendChild(thumbnail);
docCard.appendChild(imgWrapper);
}
if (thumbnailOverlay !== null) {
imgWrapper.appendChild(thumbnailOverlay);
}
for (var i = 0; i < tags.length; i++) {
tagContainer.appendChild(tags[i]);
}
tagContainer.appendChild(sizeTag);
if (thumbnail !== null) {
imgWrapper.appendChild(thumbnail);
docCard.appendChild(imgWrapper);
}
if (thumbnailOverlay !== null) {
imgWrapper.appendChild(thumbnailOverlay);
}
}
//Size tag
var sizeTag = document.createElement("small");
sizeTag.appendChild(document.createTextNode(humanFileSize(hit["_source"]["size"])));
sizeTag.setAttribute("class", "text-muted");
tagContainer.appendChild(sizeTag);
//Download button
downloadPopover(docCard, hit["_id"]);
@@ -463,6 +520,8 @@
}
});
var pathAutoComplete;
searchBar.addEventListener("keyup", function () {
//Clear old search results
@@ -487,11 +546,21 @@
//Search stats
searchResults.appendChild(makeStatsCard(searchResult));
//Autocomplete
if (searchResult.hasOwnProperty("suggest") && searchResult["suggest"].hasOwnProperty("path")) {
pathAutoComplete = [];
for (var i = 0; i < searchResult["suggest"]["path"][0]["options"].length; i++) {
pathAutoComplete.push(searchResult["suggest"]["path"][0]["options"][i].text)
}
}
//Setup page
var resultContainer = makeResultContainer();
searchResults.appendChild(resultContainer);
//Insert search results (hits)
docCount = 0;
insertHits(resultContainer, searchResult["hits"]["hits"]);
//Initialise download/view button popover
@@ -505,5 +574,4 @@
</script>
</div>
{% endblock body %}

View File

@@ -79,14 +79,22 @@
try {
var bar = document.getElementById("task-bar-" + currentTask.id);
bar.setAttribute("style", "width: " + percent + "%;");
document.getElementById("task-label-" + currentTask.id).innerHTML = currentTask.parsed + " / " + currentTask.total + " (" + percent.toFixed(2) + "%)";
if (currentTask.total === 0) {
if (percent === 100) {
bar.classList.add("bg-success")
document.getElementById("task-label-" + currentTask.id).innerHTML = "Calculating file count...";
} else {
var bar = document.getElementById("task-bar-" + currentTask.id);
bar.setAttribute("style", "width: " + percent + "%;");
document.getElementById("task-label-" + currentTask.id).innerHTML = currentTask.parsed + " / " + currentTask.total + " (" + percent.toFixed(2) + "%)";
if (percent === 100) {
bar.classList.add("bg-success")
}
}
} catch (e) {
window.reload();
}