Add select for how many spots to display. Closes #23

views/webpage_spots.tpl

@@ -57,4 +57,13 @@
     </div>
 
     <div id="table-container"></div>
+
+    <p>Spots to view:
+        <select id="spots-to-fetch" class="storeable-select form-select ms-2" style="width: 5em;display: inline-block;">
+            <option value="10">10</option>
+            <option value="25">25</option>
+            <option value="50" selected>50</option>
+            <option value="100">100</option>
+        </select>
+    </p>
 </div>

webassets/js/code.js

@@ -29,7 +29,7 @@ function buildQueryString() {
             str = str + getQueryStringFor(fn) + "&";
         }
     });
-    str = str + "limit=50";
+    str = str + "limit=" + $("#spots-to-fetch option:selected").val();
     return str;
 }
 
@@ -345,9 +345,12 @@ function escapeHtml(str) {
 function saveSettings() {
     // Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
     // property. For a checkbox, that's the "checked" property.
-    return $(".storeable-checkbox").each(function() {
+    $(".storeable-checkbox").each(function() {
         localStorage.setItem($(this)[0].id + ":checked", $(this)[0].checked);
     });
+    $(".storeable-select").each(function() {
+        localStorage.setItem($(this)[0].id + ":value", $(this)[0].value);
+    });
 }
 
 // Load settings from local storage and set up the filter selectors
@@ -389,6 +392,9 @@ function setUpEventListeners() {
         $("#filters-button").button("toggle");
         $("#filters-area").hide();
     });
+    $("#spots-to-fetch").click(function() {
+        filtersUpdated();
+    });
 }
 
 // Startup