| var catalog = "/catalog/myUniqueName"; |
| var config = { |
| host: "atmos-csu.research-lan.colostate.edu", |
| port: 9696 |
| }; |
| |
| //Run when the document loads. |
| $(function () { |
| new Atmos(catalog, config); |
| }); |
| |
| var Atmos = (function(){ |
| "use strict"; |
| /** |
| * Atmos |
| * @version 2.0 |
| * |
| * Configures an Atmos object. This manages the atmos interface. |
| * |
| * @constructor |
| * @param {string} catalog - NDN path |
| * @param {Object} config - Object of configuration options for a Face. |
| */ |
| function Atmos(catalog, config){ |
| |
| //Internal variables. |
| this.results = []; |
| this.resultCount = 0; |
| this.page = 1; |
| this.itemsPerPage = 25; |
| |
| this.catalog = catalog; |
| |
| this.face = new Face(config); |
| this.categories = $('#side-menu'); |
| this.resultTable = $('#resultTable'); |
| this.filters = $('#filters'); |
| this.searchInput = $('#search'); |
| this.searchBar = $('#searchBar'); |
| |
| var scope = this; |
| |
| this.resultTable.on('click', '.interest-button', function(){ |
| var button = $(this); |
| |
| if (button.is(':disabled')){ |
| console.warn("Attempt to request again!"); |
| } |
| |
| var name = button.parent().prev().text(); |
| var interest = new Interest(new Name('/retrieve' + name)); |
| scope.face.expressInterest(interest, function(){}, function(){}); |
| |
| button.text("Requested!") |
| .removeClass('btn-primary') |
| .addClass('btn-default') |
| .addClass('disabled') |
| .prop('disabled', true); |
| }); |
| |
| //Filter setup |
| $.getJSON("search_catagories.json").done(function (data) { |
| $.each(data, function (pageSection, contents) { |
| if (pageSection == "SearchCatagories") { |
| $.each(contents, function (category, searchOptions) { |
| //Create the category |
| var e = $('<li><a href="#">' + category.replace(/\_/g, " ") + '</a><ul class="subnav nav nav-pills nav-stacked"></ul></li>'); |
| |
| var sub = e.find('ul.subnav'); |
| $.each(searchOptions, function(index, name){ |
| //Create the filter list inside the category |
| var item = $('<li><a href="#">' + name + '</a></li>'); |
| sub.append(item); |
| item.click(function(){ //Click on the side menu filters |
| if (item.hasClass('active')){ //Does the filter already exist? |
| item.removeClass('active'); |
| scope.filters.find(':contains(' + category + ':' + name + ')').remove(); |
| } else { //Add a filter |
| item.addClass('active'); |
| var filter = $('<span class="label label-default"></span>'); |
| filter.text(category + ':' + name); |
| |
| scope.filters.append(filter); |
| |
| filter.click(function(){ //Click on a filter |
| filter.remove(); |
| item.removeClass('active'); |
| }); |
| } |
| |
| }); |
| }); |
| |
| //Toggle the menus. (Only respond when the immediate tab is clicked.) |
| e.find('> a').click(function(){ |
| scope.categories.find('.subnav').slideUp(); |
| var t = $(this).siblings('.subnav'); |
| if ( !t.is(':visible') ){ //If the sub menu is not visible |
| t.slideDown(function(){ |
| t.triggerHandler('focus'); |
| }); //Make it visible and look at it. |
| } |
| }); |
| |
| scope.categories.append(e); |
| |
| }); |
| } |
| }); |
| }); |
| |
| this.searchBar.submit(function(e){ |
| e.preventDefault(); |
| scope.search(); |
| }); |
| |
| this.searchInput.autoComplete(function(field, callback){ |
| scope.autoComplete(field, callback); |
| }); |
| |
| } |
| |
| Atmos.prototype.search = function(){ |
| var filters = this.getFilters(); |
| |
| if (this.searchInput.val().length === 0 && !filters.hasOwnProperty()){ |
| if (!this.searchBar.hasClass('has-error')){ |
| this.searchBar.addClass('has-error').append('<span class="help-block">A filter or search value is required!</span>'); |
| } |
| return; |
| } else { |
| this.searchBar.removeClass('has-error').find('.help-block').fadeOut(function(){$(this).remove()}); |
| } |
| |
| console.log("Search started!", this.searchInput.val(), filters); |
| |
| console.log("Initiating query"); |
| |
| var scope = this; |
| |
| this.query(this.catalog, filters, |
| function(interest, data){ //Response function |
| console.log("Query Response:", interest, data); |
| |
| var parameters = JSON.stringify(filters); |
| |
| var ack = data.getName(); |
| |
| var name = new Name(scope.catalog).append("query-results").append(parameters) |
| .append(ack.get(ack.getComponentCount() - 3)).append(ack.getComponent(ack.getComponentCount() - 2)) |
| |
| var first = new Name(name).appendSegment(0); |
| |
| console.log("Next request:", first.toUri()); |
| |
| scope.face.expressInterest(new Interest(first).setInterestLifetimeMilliseconds(10000), |
| function(interest, data){ //Response |
| |
| var content = JSON.parse(data.getContent().toString().replace(/[\n\0]/g,"")); |
| |
| var results = scope.results[0] = content.results; |
| scope.resultCount = content.resultCount; |
| |
| console.log("Got results:", results); |
| |
| }, |
| function(interest){ //Timeout |
| console.error("Failed to retrieve results: timeout"); |
| } |
| ); |
| |
| |
| }, function(interest){ //Timeout function |
| console.error("Request failed! Timeout"); |
| }); |
| |
| } |
| |
| Atmos.prototype.autoComplete = function(field, callback){ |
| console.log("Autocomplete triggered"); |
| |
| var filters = this.getFilters(); |
| |
| filters["?"] = this.searchInput.val(); |
| |
| this.query(this.catalog, filters, |
| function(interest, data){ |
| console.log(interest, data); |
| }, function(interest){ |
| console.error("Request failed! Timeout"); |
| }); |
| |
| } |
| |
| // Atmos.prototype.onData = function(data) { |
| // console.log("Recieved data", data); |
| |
| // var payloadStr = data.content.toString().split("\n")[0]; |
| |
| // if (!payloadStr || payloadStr.length === 0){ |
| // this.populateResults(); |
| // return; //No results were returned. |
| // } |
| |
| // var queryResults = JSON.parse(payloadStr); |
| |
| // var scope = this; |
| |
| // $.each(queryResults, function (queryResult, field) { |
| |
| // if (queryResult == "next") { |
| // scope.populateAutocomplete(field); |
| // } |
| |
| // if (queryResult == "results" && field == null){ |
| // return; //Sometimes the results are null. (We should skip this.) |
| // } |
| |
| // $.each(field, function (entryCount, name) { |
| // scope.results.push(name); |
| // }); |
| // });http://stackoverflow.com/questions/26334964/json-parse-unexpected-token-error |
| |
| // // Calculating the current page and the view |
| // this.populateResults(); |
| |
| // } |
| |
| Atmos.prototype.query = function(prefix, parameters, callback, timeout) { |
| |
| var queryPrefix = new Name(prefix); |
| queryPrefix.append("query"); |
| |
| var jsonString = JSON.stringify(parameters); |
| queryPrefix.append(jsonString); |
| |
| var queryInterest = new Interest(queryPrefix); |
| queryInterest.setInterestLifetimeMilliseconds(4000); |
| |
| this.face.expressInterest(queryInterest, callback, timeout); |
| |
| } |
| |
| // Atmos.prototype.expressNextInterest = function() { |
| // // @todo pipelines |
| // var nextName = new Name(this.state["results"]); |
| // nextName.appendSegment(this.state["nextSegment"]); |
| |
| // var nextInterest = new Interest(nextName); |
| // nextInterest.setInterestLifetimeMilliseconds(10000); |
| |
| // var scope = this; |
| |
| // this.face.expressInterest(nextInterest, |
| // function(interest, data){ |
| // scope.onQueryResultsData(interest, data); |
| // }, |
| // function(interest){ |
| // scope.onQueryResultsTimeout(interest); |
| // }); |
| |
| // this.state["nextSegment"] ++; |
| // this.state["outstanding"][nextName.toUri()] = 0; |
| // } |
| |
| // Atmos.prototype.onQueryData = function(interest, data) { |
| // var name = data.getName(); |
| |
| // delete this.state["outstanding"][interest.getName().toUri()]; |
| |
| // this.state["version"] = name.get(this.state["prefix"].size() + 2).toVersion(); |
| |
| // this.state["results"] = new Name(this.state["prefix"]).append("query-results").append(this.state['parameters']) |
| // .appendVersion(this.state["version"]).append(name.getComponent(name.getComponentCount() - 2)); |
| |
| // console.log("Requested URI", this.state.results.toUri()); |
| |
| // this.expressNextInterest(); |
| // } |
| |
| // Atmos.prototype.onQueryResultsData = function(interest, data) { |
| // var name = data.getName(); |
| // delete this.state["outstanding"][interest.getName().toUri()]; |
| // if (!name.get(-1).equals(data.getMetaInfo().getFinalBlockId())) { |
| // this.expressNextInterest(); |
| // } //else { |
| // //alert("found final block"); |
| // //} |
| |
| // this.state["userOnData"](data); |
| // } |
| |
| // Atmos.prototype.onQueryTimeout = function(interest) { |
| // var uri = interest.getName().toUri(); |
| // if (this.state["outstanding"][uri] < 1) { |
| // this.state["outstanding"][uri] ++; |
| // var scope = this; |
| // this.face.expressInterest(interest, |
| // function(interest, data){ |
| // scope.onQueryData(interest, data); |
| // }, |
| // function(interest){ |
| // scope.onQueryTimeout(interest); |
| // }); |
| // } else { |
| // delete this.state["outstanding"][uri]; |
| |
| // // We modify the autocomplete box here because we need to know |
| // // we have all of the entries first. Fairly hacky. |
| // /* TODO FIXME |
| // var autocompleteFullName = this.autocompleteText.value; |
| // for (var i = 0; i < dropdown.length; ++i) { |
| // if (this.dropdown[i].substr(0, dropdown[i].length - 1).toUpperCase === this.autocompleteText.value.toUpperCase || dropdown.length == 1) { |
| // autocompleteText.value = dropdown[i]; |
| // } |
| // } |
| // */ |
| // } |
| // } |
| |
| // Atmos.prototype.onQueryResultsTimeout = function(interest) { |
| // var uri = interest.getName().toUri(); |
| // if (this.state["outstanding"][uri] < 1) { |
| // this.state["outstanding"][uri] ++; |
| // var scope = this; |
| // this.face.expressInterest(interest, |
| // function(){ |
| // scope.onQueryResultsData.apply(scope, arguments); |
| // }, |
| // function(){ |
| // scope.onQueryResultsTimeout.apply(scope, arguments); |
| // }); |
| // } else { |
| // delete this.state["outstanding"][uri]; |
| // // We modify the autocomplete box here because we need to know |
| // // we have all of the entries first. Fairly hacky. |
| // /* TODO FIXME |
| // var autocompleteFullName = autocompleteText.value; |
| // for (var i = 0; i < dropdown.length; ++i) { |
| // if (dropdown[i].substr(0, dropdown[i].length - 1).toUpperCase === autocompleteText.value.toUpperCase || dropdown.length == 1) { |
| // autocompleteText.value = dropdown[i]; |
| // } |
| // } |
| // */ |
| // } |
| // } |
| // **/ |
| |
| // Atmos.prototype.populateResults = function() { |
| |
| // //TODO Check only for page changes and result length |
| |
| // this.resultTable.empty(); |
| |
| // for (var i = startIndex; i < startIndex + 20 && i < this.results.length; ++i) { |
| // this.resultTable.append('<tr><td>' + this.results[i] |
| // + '</td><td><button class="interest-button btn btn-primary btn-xs">Retrieve</button></td></tr>'); |
| // } |
| |
| // if (this.results.length <= 20) { |
| // this.page = 1; |
| // } else { |
| // this.page = startIndex / 20 + 1; |
| // } |
| |
| // this.totalPages = Math.ceil(this.results.length / 20); |
| |
| // //TODO Fix the page to fit the theme. |
| // var currentPage = $(".page"); |
| // currentPage.empty(); |
| // if (this.page != 1) { |
| // currentPage.append('<a href="#" onclick="getPage(this.id);" id="<"><</a>'); |
| // } |
| // // This section of code creates the paging for the results. |
| // // To prevent it from having a 1000+ pages, it will only show the 5 pages before/after |
| // // the current page and the total pages (expect users not to really jump around a lot). |
| // for (var i = 1; i <= this.totalPages; ++i) { |
| // if (i == 1 || i == this.totalPages // Min or max |
| // || (i <= this.page && i + 5 >= this.page) // in our current page range |
| // || (i >= this.page && i - 5 <= this.page)) { // in our current page range |
| // if (i != this.page) { |
| // currentPage.append(' <a href="#" onclick="getPage(' + i + ');">' + i + '</a>'); |
| // if (i == 1 && this.page > i + 5) { |
| // currentPage.append(' ... '); |
| // } |
| // } else { |
| // currentPage.append(' ' + i); |
| // } |
| // } else { // Need to skip ahead |
| // if (i == this.page + 6) { |
| // currentPage.append(' ... '); |
| |
| // currentPage.append(' <a href="#" onclick="getPage(this.id);" id=">">></a>') |
| // i = this.totalPages - 1; |
| // } |
| // } |
| // } |
| // currentPage.append(' ' + this.results.length + ' results'); |
| // } |
| |
| // Atmos.prototype.getPage = function(clickedPage) { |
| // console.log(clickedPage); |
| |
| // var nextPage = clickedPage; |
| // if (clickedPage === "<") { |
| // nextPage = this.page - 5; |
| // } else if (clickedPage === ">") { |
| // console.log("> enabled"); |
| |
| // nextPage = this.page + 5; |
| // } |
| |
| // nextPage--; // Need to adjust for starting at 0 |
| |
| // if (nextPage < 0 ) { |
| // nextPage = 0; |
| // console.log("0 enabled"); |
| // } else if (nextPage > this.totalPages - 1) { |
| // nextPage = this.totalPages - 1; |
| // console.log("total enabled"); |
| // } |
| |
| // this.populateResults(nextPage * 20); |
| // return false; |
| // } |
| |
| /** |
| * This function returns a map of all the categories active filters. |
| * @return {Object<string, string>} |
| */ |
| Atmos.prototype.getFilters = function(){ |
| var filters = this.filters.children().toArray().reduce(function(prev, current){ |
| var data = $(current).text().split(/:/); |
| prev[data[0]] = data[1]; |
| return prev; |
| }, {}); //Collect a map<category, filter>. |
| //TODO Make the return value map<category, Array<filter>> |
| return filters; |
| } |
| |
| return Atmos; |
| |
| })(); |
| |
| |