| Alison Craig | ef12da8 | 2015-03-06 09:41:43 -0700 | [diff] [blame^] | 1 | <!DOCTYPE html> |
| 2 | <html lang="en-US"> |
| 3 | |
| 4 | <head> |
| 5 | <title>Atmospheric Query and Retrieval Tool</title> |
| 6 | <meta charset="UTF-8" /> |
| 7 | |
| 8 | |
| 9 | <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> |
| 10 | <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> |
| 11 | |
| 12 | |
| 13 | |
| 14 | <link rel="stylesheet" href="query.css"> |
| 15 | |
| 16 | <script> |
| 17 | var searchMenuOptions = {}; |
| 18 | var results = {}; |
| 19 | var resultCount = 0; |
| 20 | var page = 1; |
| 21 | var totalPages = 1; |
| 22 | |
| 23 | $(document).ready(function () { |
| 24 | var searchMenu = $(".cssmenu"); |
| 25 | var currentPage = $(".page"); |
| 26 | var resultTable = $(".resultTable"); |
| 27 | var data = $.getJSON("sample.json", function () { |
| 28 | }) |
| 29 | .done(function( data ) { |
| 30 | $.each(data, function (pageSection, contents) { |
| 31 | if (pageSection == "SearchCatagories") { |
| 32 | |
| 33 | $.each(contents, function (search, searchOptions) { |
| 34 | search = search.replace(/\_/g, " "); |
| 35 | |
| 36 | searchMenu.append('<li id="' + search + '" onclick="getDropDown(this.id)"><a href="#">' + search + '</a></li>'); |
| 37 | searchMenuOptions[search] = searchOptions; |
| 38 | }); |
| 39 | } else if (pageSection == "QueryResults") { |
| 40 | results = {}; |
| 41 | resultCount = 0; |
| 42 | var view = [0, 0]; |
| 43 | $.each(contents, function (queryResult, field) { |
| 44 | if (queryResult == "Length") { |
| 45 | resultCount = field; |
| 46 | } else if (queryResult == "View") { |
| 47 | view = field; |
| 48 | } else if (queryResult == "Results") { |
| 49 | resultTable.empty(); |
| 50 | resultTable.append('<tr><td>Results</td></tr>'); |
| 51 | |
| 52 | $.each(field, function (entryCount, fullResult) { |
| 53 | |
| 54 | $.each(fullResult, function (name, metadata) { |
| 55 | resultTable.append('<tr><td onclick="getDetails(this.id)" id="' + name + '">' + name + '</td></tr>'); |
| 56 | results[name] = metadata; |
| 57 | }); |
| 58 | |
| 59 | }); |
| 60 | } else { |
| 61 | console.error("Unknown field " + queryResult); |
| 62 | } |
| 63 | }); |
| 64 | |
| 65 | // Calculating the current page and the view |
| 66 | var diff = view[1] - view[0] + 1; |
| 67 | if (diff > 0) { |
| 68 | totalPages = Math.ceil(resultCount / diff); |
| 69 | page = Math.ceil(view[0] / diff) + 1; |
| 70 | } else { |
| 71 | totalPages = 1; |
| 72 | page = 1; |
| 73 | } |
| 74 | |
| 75 | if (page != 1) { |
| 76 | console.log(view[0]); |
| 77 | currentPage.append('<span id="' + (view[0] - 1) + '" onclick="getPage(this.id)"><a href="#"><</a>'); |
| 78 | } |
| 79 | |
| 80 | // This section of code creates the paging for the results. |
| 81 | // To prevent it from having a 1000+ pages, it will only show the 5 pages before/after |
| 82 | // the current page and the total pages (expect users not to really jump around a lot). |
| 83 | for (var i = 0; i < totalPages; ++i) { |
| 84 | if (i + 1 == 1 || i + 1 == page || i + 1 == totalPages || (i + 1 < page && i + 4 > page) || (i + 1 > page && i - 4 < page)) { // in our current page range |
| 85 | currentPage.append(' '); |
| 86 | currentPage.append('<span id="' + (i + 1) + '" onclick="getPage(this.id)">'); |
| 87 | if (i + 1 != page) { |
| 88 | currentPage.append('<a href="#">' + (i + 1) + '</a>') |
| 89 | } else { |
| 90 | currentPage.append(i + 1); |
| 91 | } |
| 92 | currentPage.append('</span>'); |
| 93 | } else { // Need to skip ahead |
| 94 | currentPage.append(' ...'); |
| 95 | if (i == page + 5) { |
| 96 | i = totalPages - 2; |
| 97 | } else if (i < page - 7) { |
| 98 | i = page - 6; |
| 99 | } |
| 100 | } |
| 101 | } |
| 102 | if (page != totalPages) { |
| 103 | currentPage.append(' <span id="' + (page + diff) + '" onclick="getPage(this.id)"><a href="#">></a>'); |
| 104 | } |
| 105 | } |
| 106 | }); |
| 107 | })(); |
| 108 | }); |
| 109 | |
| 110 | var state = ""; |
| 111 | |
| 112 | function getDropDown(str) { |
| 113 | var searchMenu = $(".cssmenu"); |
| 114 | if (str == state) { |
| 115 | state = ""; |
| 116 | searchMenu.find("#" + str).find("#options_" + str).empty(); |
| 117 | } else { |
| 118 | state = str; |
| 119 | |
| 120 | $.each(searchMenuOptions, function (search, fields) { |
| 121 | if (search === str) { |
| 122 | searchMenu.find("#" + search).append('<ul id="options_' + search + '" class="sub-menu">'); |
| 123 | for (var i = 0; i < fields.length; ++i) { |
| 124 | searchMenu.find("#options_" + search).append('<li><a href="#">' + fields[i] + '</a></li>'); |
| 125 | } |
| 126 | searchMenu.append('</ul>'); |
| 127 | } else { |
| 128 | var ul = $("options_" + search); |
| 129 | ul.empty(); |
| 130 | searchMenu.find("#" + search).find("#options_" + search).empty(); |
| 131 | } |
| 132 | }); |
| 133 | } |
| 134 | } |
| 135 | |
| 136 | function getPage(str) { |
| 137 | // @todo |
| 138 | } |
| 139 | |
| 140 | function getDetails(str) { |
| 141 | // @todo: Identify the correct way to integrate the download backend so that we know who |
| 142 | // we should be pointing at. |
| 143 | |
| 144 | var details = "<h2>" + str + "<h2>"; |
| 145 | |
| 146 | details += '<form action="getDownload()"><input type="submit" value="Download"></form>'; |
| 147 | details += "<table>"; |
| 148 | $.each(results[str], function (fieldName, field) { |
| 149 | console.log(fieldName); |
| 150 | |
| 151 | details += "<tr>" |
| 152 | details += "<td>" + fieldName + "</td>"; |
| 153 | if (typeof field === 'object') { |
| 154 | details += "<td><table>"; |
| 155 | $.each(field, function (name, fields) { |
| 156 | details += '<tr><td>' + name + '</td><td>' + fields + '<td></tr>'; |
| 157 | }); |
| 158 | details += "</table></td>"; |
| 159 | } else { |
| 160 | details += "<td>" + field + "</td>" |
| 161 | } |
| 162 | details += "</tr>" |
| 163 | |
| 164 | }); |
| 165 | details += "</table>"; |
| 166 | details += '<form action="getDownload()"><input type="submit" value="Download"></form>'; |
| 167 | |
| 168 | var detailsWindow = window.open("", str, "width=400, height=600, toolbar=no, menubar=no"); |
| 169 | detailsWindow.document.write(details); |
| 170 | detailsWindow.onload = function () { // of course you can use other onload-techniques |
| 171 | jQuery(detailsWindow.document.head).append('<script>function getDownload() {alert("Yay";)}</' + "script>"); // or any other dom manipulation |
| 172 | } |
| 173 | |
| 174 | //window.open("details.html", "_blank", "toolbar=no, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");*/ |
| 175 | } |
| 176 | </script> |
| 177 | </head> |
| 178 | |
| 179 | <body id="body"> |
| 180 | <header> |
| 181 | <h1>Atmospheric Query and Retrieval Tool</h1> |
| 182 | </header> |
| 183 | |
| 184 | <ul class='cssmenu'> |
| 185 | |
| 186 | </ul> |
| 187 | |
| 188 | <div class="autocomplete"> |
| 189 | <form action="submit()"> |
| 190 | <input type="text" name="autocomplete" class="textbox" id="autocomplete" placeholder="cmap" width="800px"> |
| 191 | <input type="submit" value="Search"> |
| 192 | </form> |
| 193 | </div> |
| 194 | <table class="resultTable"> |
| 195 | |
| 196 | |
| 197 | </table> |
| 198 | <div class="page"></div> |
| 199 | |
| 200 | </body> |
| 201 | |
| 202 | </html> |