Merge pull request #1343 from CTFd/improved-page-select

* Changes page selection to be a select of pages. The page will be redirected to after a new page is selected.

CTFd/themes/admin/assets/js/styles.js

@@ -74,6 +74,12 @@ export default () => {
       }
     });
 
+    $(".page-select").change(function() {
+      let url = new URL(window.location);
+      url.searchParams.set("page", this.value);
+      window.location.href = url.toString();
+    });
+
     makeSortableTables();
     $('[data-toggle="tooltip"]').tooltip();
   });

CTFd/themes/admin/static/js/core.dev.js

@@ -20,7 +20,7 @@ eval("\n\nvar _CTFd = _interopRequireDefault(__webpack_require__(/*! core/CTFd *
 /***/ (function(module, exports, __webpack_require__) {
 
 ;
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\n__webpack_require__(/*! bootstrap/dist/js/bootstrap.bundle */ \"./node_modules/bootstrap/dist/js/bootstrap.bundle.js\");\n\nvar _utils = __webpack_require__(/*! core/utils */ \"./CTFd/themes/core/assets/js/utils.js\");\n\nvar _jquery = _interopRequireDefault(__webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = function _default() {\n  // TODO: This is kind of a hack to mimic a React-like state construct.\n  // It should be removed once we have a real front-end framework in place.\n  (0, _jquery.default)(\":input\").each(function () {\n    (0, _jquery.default)(this).data(\"initial\", (0, _jquery.default)(this).val());\n  });\n  (0, _jquery.default)(\".form-control\").bind({\n    focus: function focus() {\n      (0, _jquery.default)(this).addClass(\"input-filled-valid\");\n    },\n    blur: function blur() {\n      if ((0, _jquery.default)(this).val() === \"\") {\n        (0, _jquery.default)(this).removeClass(\"input-filled-valid\");\n      }\n    }\n  });\n  (0, _jquery.default)(\".modal\").on(\"show.bs.modal\", function (e) {\n    (0, _jquery.default)(\".form-control\").each(function () {\n      if ((0, _jquery.default)(this).val()) {\n        (0, _jquery.default)(this).addClass(\"input-filled-valid\");\n      }\n    });\n  });\n  (0, _jquery.default)(function () {\n    (0, _jquery.default)(\".form-control\").each(function () {\n      if ((0, _jquery.default)(this).val()) {\n        (0, _jquery.default)(this).addClass(\"input-filled-valid\");\n      }\n    });\n    (0, _jquery.default)(\"tr[data-href]\").click(function () {\n      var sel = getSelection().toString();\n\n      if (!sel) {\n        var href = (0, _jquery.default)(this).attr(\"data-href\");\n\n        if (href) {\n          window.location = href;\n        }\n      }\n\n      return false;\n    });\n    (0, _jquery.default)(\"[data-checkbox]\").click(function (e) {\n      if ((0, _jquery.default)(e.target).is(\"input[type=checkbox]\")) {\n        e.stopImmediatePropagation();\n        return;\n      }\n\n      var checkbox = (0, _jquery.default)(this).find(\"input[type=checkbox]\"); // Doing it this way with an event allows data-checkbox-all to work\n\n      checkbox.click();\n      e.stopImmediatePropagation();\n    });\n    (0, _jquery.default)(\"[data-checkbox-all]\").on(\"click change\", function (e) {\n      var checked = (0, _jquery.default)(this).prop(\"checked\");\n      var idx = (0, _jquery.default)(this).index() + 1;\n      (0, _jquery.default)(this).closest(\"table\").find(\"tr td:nth-child(\".concat(idx, \") input[type=checkbox]\")).prop(\"checked\", checked);\n      e.stopImmediatePropagation();\n    });\n    (0, _jquery.default)(\"tr[data-href] a, tr[data-href] button\").click(function (e) {\n      // TODO: This is a hack to allow modal close buttons to work\n      if (!(0, _jquery.default)(this).attr(\"data-dismiss\")) {\n        e.stopPropagation();\n      }\n    });\n    (0, _utils.makeSortableTables)();\n    (0, _jquery.default)('[data-toggle=\"tooltip\"]').tooltip();\n  });\n};\n\nexports.default = _default;\n\n//# sourceURL=webpack:///./CTFd/themes/admin/assets/js/styles.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\n__webpack_require__(/*! bootstrap/dist/js/bootstrap.bundle */ \"./node_modules/bootstrap/dist/js/bootstrap.bundle.js\");\n\nvar _utils = __webpack_require__(/*! core/utils */ \"./CTFd/themes/core/assets/js/utils.js\");\n\nvar _jquery = _interopRequireDefault(__webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = function _default() {\n  // TODO: This is kind of a hack to mimic a React-like state construct.\n  // It should be removed once we have a real front-end framework in place.\n  (0, _jquery.default)(\":input\").each(function () {\n    (0, _jquery.default)(this).data(\"initial\", (0, _jquery.default)(this).val());\n  });\n  (0, _jquery.default)(\".form-control\").bind({\n    focus: function focus() {\n      (0, _jquery.default)(this).addClass(\"input-filled-valid\");\n    },\n    blur: function blur() {\n      if ((0, _jquery.default)(this).val() === \"\") {\n        (0, _jquery.default)(this).removeClass(\"input-filled-valid\");\n      }\n    }\n  });\n  (0, _jquery.default)(\".modal\").on(\"show.bs.modal\", function (e) {\n    (0, _jquery.default)(\".form-control\").each(function () {\n      if ((0, _jquery.default)(this).val()) {\n        (0, _jquery.default)(this).addClass(\"input-filled-valid\");\n      }\n    });\n  });\n  (0, _jquery.default)(function () {\n    (0, _jquery.default)(\".form-control\").each(function () {\n      if ((0, _jquery.default)(this).val()) {\n        (0, _jquery.default)(this).addClass(\"input-filled-valid\");\n      }\n    });\n    (0, _jquery.default)(\"tr[data-href]\").click(function () {\n      var sel = getSelection().toString();\n\n      if (!sel) {\n        var href = (0, _jquery.default)(this).attr(\"data-href\");\n\n        if (href) {\n          window.location = href;\n        }\n      }\n\n      return false;\n    });\n    (0, _jquery.default)(\"[data-checkbox]\").click(function (e) {\n      if ((0, _jquery.default)(e.target).is(\"input[type=checkbox]\")) {\n        e.stopImmediatePropagation();\n        return;\n      }\n\n      var checkbox = (0, _jquery.default)(this).find(\"input[type=checkbox]\"); // Doing it this way with an event allows data-checkbox-all to work\n\n      checkbox.click();\n      e.stopImmediatePropagation();\n    });\n    (0, _jquery.default)(\"[data-checkbox-all]\").on(\"click change\", function (e) {\n      var checked = (0, _jquery.default)(this).prop(\"checked\");\n      var idx = (0, _jquery.default)(this).index() + 1;\n      (0, _jquery.default)(this).closest(\"table\").find(\"tr td:nth-child(\".concat(idx, \") input[type=checkbox]\")).prop(\"checked\", checked);\n      e.stopImmediatePropagation();\n    });\n    (0, _jquery.default)(\"tr[data-href] a, tr[data-href] button\").click(function (e) {\n      // TODO: This is a hack to allow modal close buttons to work\n      if (!(0, _jquery.default)(this).attr(\"data-dismiss\")) {\n        e.stopPropagation();\n      }\n    });\n    (0, _jquery.default)(\".page-select\").change(function () {\n      var url = new URL(window.location);\n      url.searchParams.set(\"page\", this.value);\n      window.location.href = url.toString();\n    });\n    (0, _utils.makeSortableTables)();\n    (0, _jquery.default)('[data-toggle=\"tooltip\"]').tooltip();\n  });\n};\n\nexports.default = _default;\n\n//# sourceURL=webpack:///./CTFd/themes/admin/assets/js/styles.js?");
 
 /***/ }),
 

CTFd/themes/admin/templates/submissions.html

@@ -79,13 +79,11 @@
 				{% if curr_page != 1 %}
 					<a href="?page={{ curr_page - 1 }}">&lt;&lt;&lt;</a>
 				{% endif %}
-				{% for page in range(1, page_count + 1) %}
-					{% if curr_page != page %}
-						<a href="?page={{ page }}">{{ page }}</a>
-					{% else %}
-						<b>{{ page }}</b>
-					{% endif %}
-				{% endfor %}
+				<select class="page-select">
+					{% for page in range(1, page_count + 1) %}
+					<option {% if curr_page == page %}selected{% endif %}>{{ page }}</option>
+					{% endfor %}
+				</select>
 				{% if curr_page != page_count %}
 					<a href="?page={{ curr_page + 1 }}">&gt;&gt;&gt;</a>
 				{% endif %}

CTFd/themes/admin/templates/teams/teams.html

@@ -142,15 +142,17 @@
 			{% if pages > 1 %}
 			<div class="text-center">Page
 				<br>
-				{% if curr_page != 1 %}<a href="{{ url_for('admin.teams_listing', page=curr_page - 1) }}">&lt;&lt;&lt;</a>{% endif %}
-				{% for page in range(1, pages + 1) %}
-					{% if curr_page != page %}
-						<a href="{{ url_for('admin.teams_listing', page=page) }}">{{ page }}</a>
-					{% else %}
-						<b>{{ page }}</b>
-					{% endif %}
-				{% endfor %}
-				{% if curr_page != pages %}<a href="{{ url_for('admin.teams_listing', page=curr_page + 1) }}">&gt;&gt;&gt;</a>{% endif %}
+				{% if curr_page != 1 %}
+				<a href="{{ url_for('admin.teams_listing', page=curr_page - 1) }}">&lt;&lt;&lt;</a>
+				{% endif %}
+				<select class="page-select">
+					{% for page in range(1, pages + 1) %}
+					<option {% if curr_page == page %}selected{% endif %}>{{ page }}</option>
+					{% endfor %}
+				</select>
+				{% if curr_page != pages %}
+				<a href="{{ url_for('admin.teams_listing', page=curr_page + 1) }}">&gt;&gt;&gt;</a>
+				{% endif %}
 			</div>
 			{% endif %}
 		</div>

CTFd/themes/admin/templates/users/users.html

@@ -154,15 +154,17 @@
 			{% if pages > 1 %}
 			<div class="text-center">Page
 				<br>
-				{% if curr_page != 1 %}<a href="{{ url_for('admin.users_listing', page=curr_page - 1) }}">&lt;&lt;&lt;</a>{% endif %}
-				{% for page in range(1, pages + 1) %}
-					{% if curr_page != page %}
-						<a href="{{ url_for('admin.users_listing', page=page) }}">{{ page }}</a>
-					{% else %}
-						<b>{{ page }}</b>
-					{% endif %}
-				{% endfor %}
-				{% if curr_page != pages %}<a href="{{ url_for('admin.users_listing', page=curr_page + 1) }}">&gt;&gt;&gt;</a>{% endif %}
+				{% if curr_page != 1 %}
+				<a href="{{ url_for('admin.users_listing', page=curr_page - 1) }}">&lt;&lt;&lt;</a>
+				{% endif %}
+				<select class="page-select">
+					{% for page in range(1, pages + 1) %}
+					<option {% if curr_page == page %}selected{% endif %}>{{ page }}</option>
+					{% endfor %}
+				</select>
+				{% if curr_page != pages %}
+				<a href="{{ url_for('admin.users_listing', page=curr_page + 1) }}">&gt;&gt;&gt;</a>
+				{% endif %}
 			</div>
 			{% endif %}
 		</div>

CTFd/themes/core/assets/js/styles.js

@@ -27,5 +27,11 @@ export default () => {
     }
   });
 
+  $(".page-select").change(function() {
+    let url = new URL(window.location);
+    url.searchParams.set("page", this.value);
+    window.location.href = url.toString();
+  });
+
   $('[data-toggle="tooltip"]').tooltip();
 };

CTFd/themes/core/static/js/core.dev.js

@@ -104,7 +104,7 @@ eval("\n\nvar _q = _interopRequireDefault(__webpack_require__(/*! q */ \"./node_
 /***/ (function(module, exports, __webpack_require__) {
 
 ;
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\n__webpack_require__(/*! bootstrap/dist/js/bootstrap.bundle */ \"./node_modules/bootstrap/dist/js/bootstrap.bundle.js\");\n\nvar _jquery = _interopRequireDefault(__webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = function _default() {\n  // TODO: This is kind of a hack to mimic a React-like state construct.\n  // It should be removed once we have a real front-end framework in place.\n  (0, _jquery.default)(\":input\").each(function () {\n    (0, _jquery.default)(this).data(\"initial\", (0, _jquery.default)(this).val());\n  });\n  (0, _jquery.default)(\".form-control\").bind({\n    focus: function focus() {\n      (0, _jquery.default)(this).removeClass(\"input-filled-invalid\");\n      (0, _jquery.default)(this).addClass(\"input-filled-valid\");\n    },\n    blur: function blur() {\n      if ((0, _jquery.default)(this).val() === \"\") {\n        (0, _jquery.default)(this).removeClass(\"input-filled-invalid\");\n        (0, _jquery.default)(this).removeClass(\"input-filled-valid\");\n      }\n    }\n  });\n  (0, _jquery.default)(\".form-control\").each(function () {\n    if ((0, _jquery.default)(this).val()) {\n      (0, _jquery.default)(this).addClass(\"input-filled-valid\");\n    }\n  });\n  (0, _jquery.default)('[data-toggle=\"tooltip\"]').tooltip();\n};\n\nexports.default = _default;\n\n//# sourceURL=webpack:///./CTFd/themes/core/assets/js/styles.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\n__webpack_require__(/*! bootstrap/dist/js/bootstrap.bundle */ \"./node_modules/bootstrap/dist/js/bootstrap.bundle.js\");\n\nvar _jquery = _interopRequireDefault(__webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = function _default() {\n  // TODO: This is kind of a hack to mimic a React-like state construct.\n  // It should be removed once we have a real front-end framework in place.\n  (0, _jquery.default)(\":input\").each(function () {\n    (0, _jquery.default)(this).data(\"initial\", (0, _jquery.default)(this).val());\n  });\n  (0, _jquery.default)(\".form-control\").bind({\n    focus: function focus() {\n      (0, _jquery.default)(this).removeClass(\"input-filled-invalid\");\n      (0, _jquery.default)(this).addClass(\"input-filled-valid\");\n    },\n    blur: function blur() {\n      if ((0, _jquery.default)(this).val() === \"\") {\n        (0, _jquery.default)(this).removeClass(\"input-filled-invalid\");\n        (0, _jquery.default)(this).removeClass(\"input-filled-valid\");\n      }\n    }\n  });\n  (0, _jquery.default)(\".form-control\").each(function () {\n    if ((0, _jquery.default)(this).val()) {\n      (0, _jquery.default)(this).addClass(\"input-filled-valid\");\n    }\n  });\n  (0, _jquery.default)(\".page-select\").change(function () {\n    var url = new URL(window.location);\n    url.searchParams.set(\"page\", this.value);\n    window.location.href = url.toString();\n  });\n  (0, _jquery.default)('[data-toggle=\"tooltip\"]').tooltip();\n};\n\nexports.default = _default;\n\n//# sourceURL=webpack:///./CTFd/themes/core/assets/js/styles.js?");
 
 /***/ }),
 

CTFd/themes/core/templates/teams/teams.html

@@ -80,13 +80,11 @@
 						<<<
 					</a>
 				{% endif %}
-				{% for page in range(1, pages + 1) %}
-					{% if curr_page != page %}
-						<a href="{{ url_for('teams.listing', page=page) }}">{{ page }}</a>
-					{% else %}
-						<b>{{page}}</b>
-					{% endif %}
-				{% endfor %}
+				<select class="page-select">
+					{% for page in range(1, pages + 1) %}
+					<option {% if curr_page == page %}selected{% endif %}>{{ page }}</option>
+					{% endfor %}
+				</select>
 				{% if curr_page != pages %}
 					<a href="{{ url_for('teams.listing', page=curr_page + 1) }}">
 						&gt;&gt;&gt;

CTFd/themes/core/templates/users/users.html

@@ -83,13 +83,11 @@
 								<<<
 							</a>
 						{% endif %}
-						{% for page in range(1, pages + 1) %}
-							{% if curr_page != page %}
-								<a href="{{ url_for('users.listing', page=page) }}">{{ page }}</a>
-							{% else %}
-								<b>{{ page }}</b>
-							{% endif %}
-						{% endfor %}
+						<select class="page-select">
+							{% for page in range(1, pages + 1) %}
+							<option {% if curr_page == page %}selected{% endif %}>{{ page }}</option>
+							{% endfor %}
+						</select>
 						{% if curr_page != pages %}
 							<a href="{{ url_for('users.listing', page=curr_page + 1) }}">
 								&gt;&gt;&gt;