Unverified Commit 6d812372 authored by David Haynes's avatar David Haynes
Browse files

Adapt existing JS to finish searching (Closes #119)

- search function does the filtering
- triggered on keyup of each search field
parent 3773dd74
Pipeline #1071 passed with stage
in 59 seconds
...@@ -2,9 +2,7 @@ ...@@ -2,9 +2,7 @@
{% extends 'layouts/base.html' %} {% extends 'layouts/base.html' %}
<!-- define the page title block --> <!-- define the page title block -->
{% block title %} {% block title %} SRCT Go &bull; Administration Panel {% endblock %}
SRCT Go &bull; Administration Panel
{% endblock %}
<!-- define the content block for the page --> <!-- define the content block for the page -->
{% block content %} {% block content %}
...@@ -29,7 +27,8 @@ SRCT Go &bull; Administration Panel ...@@ -29,7 +27,8 @@ SRCT Go &bull; Administration Panel
<!-- define the div where we can select users from a table to judge them --> <!-- define the div where we can select users from a table to judge them -->
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<input class="inputfilter" type="text" id="appliedInput" onkeyup="filterApplied()" placeholder="Search Usernames or Full Names"> <input class="inputfilter" type="text" id="appliedInput"
placeholder="Search Usernames or Full Names">
<h3>Users awaiting moderation</h3> <h3>Users awaiting moderation</h3>
<form method="post" action="useradmin"> <form method="post" action="useradmin">
<!-- csrf protection --> <!-- csrf protection -->
...@@ -75,7 +74,8 @@ SRCT Go &bull; Administration Panel ...@@ -75,7 +74,8 @@ SRCT Go &bull; Administration Panel
<a class="btn btn-primary btn-sm" data-target="#approveModal" data-toggle="modal"> Approve </a> <a class="btn btn-primary btn-sm" data-target="#approveModal" data-toggle="modal"> Approve </a>
<!-- input type="submit" name="_approve" value="Approve" class="btn btn-primary btn-sm"--> <!-- input type="submit" name="_approve" value="Approve" class="btn btn-primary btn-sm"-->
<a class="btn btn-danger btn-sm" data-target="#denyModal" data-toggle="modal"> Deny </a> <a class="btn btn-danger btn-sm" data-target="#denyModal" data-toggle="modal"> Deny </a>
<a class="btn btn-default btn-sm btn-blockUsr" data-target="#blockModal" data-toggle="modal" style="background-color: black; color: white;"> Block </a> <a class="btn btn-default btn-sm btn-blockUsr" data-target="#blockModal" data-toggle="modal"
style="background-color: black; color: white;"> Block </a>
<!--Define Approve Modal--> <!--Define Approve Modal-->
<div id="approveModal" class="modal fade" role="dialog" tabindex="-1"> <div id="approveModal" class="modal fade" role="dialog" tabindex="-1">
...@@ -83,13 +83,14 @@ SRCT Go &bull; Administration Panel ...@@ -83,13 +83,14 @@ SRCT Go &bull; Administration Panel
<!-- Modal content--> <!-- Modal content-->
<div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px"> <div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px">
<div class="modal-header" style="text-align:center;"> <div class="modal-header" style="text-align:center;">
<h4 class="modal-title text-center" <h4 class="modal-title text-center" style="font-weight:bold; font-size: 21px !important;">
style="font-weight:bold; font-size: 21px !important;">
Are you sure you would like to approve a user?</h4> Are you sure you would like to approve a user?</h4>
</div> </div>
<div class="modal-body" style="padding-bottom: 80px"> <div class="modal-body" style="padding-bottom: 80px">
<a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;" data-dismiss="modal">Cancel</a> <a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;"
<input type="submit" name="_approve" value="Approve" class="btn btn-primary btn-lg" style="border-width: 0px;float:right; width:49%; background-color: #00331a; color: #ffffff; border-radius: 4px;"> data-dismiss="modal">Cancel</a>
<input type="submit" name="_approve" value="Approve" class="btn btn-primary btn-lg"
style="border-width: 0px;float:right; width:49%; background-color: #00331a; color: #ffffff; border-radius: 4px;">
</div> </div>
</div> </div>
</div> </div>
...@@ -101,14 +102,14 @@ SRCT Go &bull; Administration Panel ...@@ -101,14 +102,14 @@ SRCT Go &bull; Administration Panel
<!-- Modal content--> <!-- Modal content-->
<div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px"> <div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px">
<div class="modal-header" style="text-align:center;"> <div class="modal-header" style="text-align:center;">
<h4 class="modal-title text-center" <h4 class="modal-title text-center" style="font-weight:bold; font-size: 21px !important;">
style="font-weight:bold; font-size: 21px !important;">
Are you sure you would like to deny a user?</h4> Are you sure you would like to deny a user?</h4>
<h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;"> <h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;">
Please remember the user's feelings</h6> Please remember the user's feelings</h6>
</div> </div>
<div class="modal-body" style="padding-bottom: 80px"> <div class="modal-body" style="padding-bottom: 80px">
<a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;" data-dismiss="modal">Cancel</a> <a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;"
data-dismiss="modal">Cancel</a>
<input type="submit" name="_deny" value="Deny" class="btn btn-danger btn-lg" style="border-width: 0px;float:right; width:49%; background-color: #ac1d37; color: #ffffff; border-radius: 4px;"> <input type="submit" name="_deny" value="Deny" class="btn btn-danger btn-lg" style="border-width: 0px;float:right; width:49%; background-color: #ac1d37; color: #ffffff; border-radius: 4px;">
</div> </div>
</div> </div>
...@@ -122,20 +123,19 @@ SRCT Go &bull; Administration Panel ...@@ -122,20 +123,19 @@ SRCT Go &bull; Administration Panel
<!-- Modal content--> <!-- Modal content-->
<div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px"> <div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px">
<div class="modal-header" style="text-align:center;"> <div class="modal-header" style="text-align:center;">
<h4 class="modal-title text-center" <h4 class="modal-title text-center" style="font-weight:bold; font-size: 21px !important;">
style="font-weight:bold; font-size: 21px !important;">
Are you sure you would like to block a user?</h4> Are you sure you would like to block a user?</h4>
<h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;"> <h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;">
Please remember the user's feelings</h6> Please remember the user's feelings</h6>
</div> </div>
<div class="modal-body" style="padding-bottom: 80px"> <div class="modal-body" style="padding-bottom: 80px">
<a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;" data-dismiss="modal">Cancel</a> <a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;"
data-dismiss="modal">Cancel</a>
<input type="submit" name="_block" value="Block" class="btn btn-danger btn-lg" style="border-width: 0px; float:right; width:49%;background-color: #000000; color: #ffffff; border-radius: 4px;"> <input type="submit" name="_block" value="Block" class="btn btn-danger btn-lg" style="border-width: 0px; float:right; width:49%;background-color: #000000; color: #ffffff; border-radius: 4px;">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
...@@ -145,7 +145,8 @@ SRCT Go &bull; Administration Panel ...@@ -145,7 +145,8 @@ SRCT Go &bull; Administration Panel
<!-- define the table that displays blocked users and allows us to unblock them --> <!-- define the table that displays blocked users and allows us to unblock them -->
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<input class="inputfilter" type="text" id="blockedInput" onkeyup="filterBlocked()" placeholder="Search Usernames or Full Names"> <input class="inputfilter" type="text" id="blockedInput"
placeholder="Search Usernames or Full Names">
<h3>Blocked Users</h3> <h3>Blocked Users</h3>
<form method="post" action="useradmin"> <form method="post" action="useradmin">
<!-- csrf protection --> <!-- csrf protection -->
...@@ -197,13 +198,14 @@ SRCT Go &bull; Administration Panel ...@@ -197,13 +198,14 @@ SRCT Go &bull; Administration Panel
<!-- Modal content--> <!-- Modal content-->
<div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px"> <div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px">
<div class="modal-header" style="text-align:center;"> <div class="modal-header" style="text-align:center;">
<h4 class="modal-title text-center" <h4 class="modal-title text-center" style="font-weight:bold; font-size: 21px !important;">
style="font-weight:bold; font-size: 21px !important;">
Are you sure you would like to unblock a user?</h4> Are you sure you would like to unblock a user?</h4>
</div> </div>
<div class="modal-body" style="padding-bottom: 80px"> <div class="modal-body" style="padding-bottom: 80px">
<a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;" data-dismiss="modal">Cancel</a> <a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;"
<input type="submit" name="_unblock" value="Un-Block" class="btn btn-default btn-lg" style="border-width: 0px;float:right; width:49%; background-color: #e7e7e7; color: #000000; border-radius: 4px;"> data-dismiss="modal">Cancel</a>
<input type="submit" name="_unblock" value="Un-Block" class="btn btn-default btn-lg"
style="border-width: 0px;float:right; width:49%; background-color: #e7e7e7; color: #000000; border-radius: 4px;">
</div> </div>
</div> </div>
</div> </div>
...@@ -218,12 +220,13 @@ SRCT Go &bull; Administration Panel ...@@ -218,12 +220,13 @@ SRCT Go &bull; Administration Panel
<!-- define the table of current users --> <!-- define the table of current users -->
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<input class="inputfilter" type="text" id="currentInput" onkeyup="filterCurrent()" placeholder="Search Usernames or Full Names"> <input class="inputfilter" type="text" id="currentInput"
placeholder="Search Usernames or Full Names">
<h3>Current Users</h3> <h3>Current Users</h3>
<form method="post" action="useradmin"> <form method="post" action="useradmin">
<!-- csrf protection --> <!-- csrf protection -->
{% csrf_token %} {% csrf_token %}
<table class="table table-striped table-hover " id = "currentTable"> <table class="table table-striped table-hover " id="currentTable">
<!-- define the header row --> <!-- define the header row -->
<thead> <thead>
<tr> <tr>
...@@ -259,7 +262,8 @@ SRCT Go &bull; Administration Panel ...@@ -259,7 +262,8 @@ SRCT Go &bull; Administration Panel
<!-- display our removal and blocking buttons --> <!-- display our removal and blocking buttons -->
<div class="form-group"> <div class="form-group">
<a class="btn btn-danger btn-sm" data-target="#removeModal" data-toggle="modal"> Remove </a> <a class="btn btn-danger btn-sm" data-target="#removeModal" data-toggle="modal"> Remove </a>
<a class="btn btn-default btn-sm btn-blockUsr" data-target="#blockModal2" data-toggle="modal" style="background-color: black; color: white;"> Block </a> <a class="btn btn-default btn-sm btn-blockUsr" data-target="#blockModal2" data-toggle="modal"
style="background-color: black; color: white;"> Block </a>
<!--Define Remove Modal--> <!--Define Remove Modal-->
<div id="removeModal" class="modal fade" role="dialog" tabindex="-1"> <div id="removeModal" class="modal fade" role="dialog" tabindex="-1">
...@@ -267,15 +271,16 @@ SRCT Go &bull; Administration Panel ...@@ -267,15 +271,16 @@ SRCT Go &bull; Administration Panel
<!-- Modal content--> <!-- Modal content-->
<div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px"> <div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px">
<div class="modal-header" style="text-align:center;"> <div class="modal-header" style="text-align:center;">
<h4 class="modal-title text-center" <h4 class="modal-title text-center" style="font-weight:bold; font-size: 21px !important;">
style="font-weight:bold; font-size: 21px !important;">
Are you sure you would like to remove a user?</h4> Are you sure you would like to remove a user?</h4>
<h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;"> <h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;">
Please remember the user's feelings</h6> Please remember the user's feelings</h6>
</div> </div>
<div class="modal-body" style="padding-bottom: 80px"> <div class="modal-body" style="padding-bottom: 80px">
<a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;" data-dismiss="modal">Cancel</a> <a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;"
<input type="submit" name="_remove" value="Remove" class="btn btn-danger btn-lg" style="border-width: 0px; float:right; width:49%;background-color: #ac1d37; color: #ffffff; border-radius: 4px;"> data-dismiss="modal">Cancel</a>
<input type="submit" name="_remove" value="Remove" class="btn btn-danger btn-lg"
style="border-width: 0px; float:right; width:49%;background-color: #ac1d37; color: #ffffff; border-radius: 4px;">
</div> </div>
</div> </div>
</div> </div>
...@@ -287,14 +292,14 @@ SRCT Go &bull; Administration Panel ...@@ -287,14 +292,14 @@ SRCT Go &bull; Administration Panel
<!-- Modal content--> <!-- Modal content-->
<div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px"> <div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px">
<div class="modal-header" style="text-align:center;"> <div class="modal-header" style="text-align:center;">
<h4 class="modal-title text-center" <h4 class="modal-title text-center" style="font-weight:bold; font-size: 21px !important;">
style="font-weight:bold; font-size: 21px !important;">
Are you sure you would like to block a user?</h4> Are you sure you would like to block a user?</h4>
<h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;"> <h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;">
Please remember the user's feelings</h6> Please remember the user's feelings</h6>
</div> </div>
<div class="modal-body" style="padding-bottom: 80px"> <div class="modal-body" style="padding-bottom: 80px">
<a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;" data-dismiss="modal">Cancel</a> <a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;"
data-dismiss="modal">Cancel</a>
<input type="submit" name="_block" value="Block" class="btn btn-danger btn-lg" style="border-width: 0px; float:right; width:49%;background-color: #000000; color: #ffffff; border-radius: 4px;"> <input type="submit" name="_block" value="Block" class="btn btn-danger btn-lg" style="border-width: 0px; float:right; width:49%;background-color: #000000; color: #ffffff; border-radius: 4px;">
</div> </div>
</div> </div>
...@@ -304,6 +309,8 @@ SRCT Go &bull; Administration Panel ...@@ -304,6 +309,8 @@ SRCT Go &bull; Administration Panel
</form> </form>
</div> </div>
</div> </div>
<script src = "../../static/js/useradmin.js"> </script> <script src="../../static/js/useradmin.js">
</script>
{% endblock %} {% endblock %}
\ No newline at end of file
//Zosman- This file was created in an effort to make /useradmin more usable. As a responce to issue #119 ; branch 119-search-bar ; /**
//At the time this was created we had no searching feature of the users and it became somewhat hard to actually manage users * Filters a html table by hiding rows that do not contain the input string.
//This file has three js functions, one for each table in /useradmin , the functions allow a user to search through the table * @param {html table} table - The table that we are searching through
* @param {String} input - The string we are searching through
*/
function searchAndFilter(table, input) {
// Cleanup the input search filter param
let val = $.trim($(input).val()).replace(/ +/g, ' ').toLowerCase();
function filterApplied() { // Filter the table rows based on the input string
var input, filter, table, tr, td, i; table.show().filter(function () {
input = document.getElementById("appliedInput"); let text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
// the var that holdes input from text box return !~text.indexOf(val);
filter = input.value.toUpperCase(); }).hide();
//makes the input all uppercase so we dont have problems with case insensitivity
table = document.getElementById("appliedTable");
// the table at the moment this is called
tr = table.getElementsByTagName("tr");
//the table rows
for (i = 1; i < tr.length; i++) {
// loops through the table rows
td = (tr[i].getElementsByTagName("td")[1] || tr[i].getElementsByTagName("td")[2]);
//sets td to the element, gets changed evrey loop itteration
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
// tr[1].style.display = "No results match your search! ¯\\_(ツ)_/¯"
}
}
}
} }
function filterBlocked() { // Grab the applied table
var input, filter, table, tr, td, i; const $applied = $('#appliedTable tr:not(:first)');
input = document.getElementById("blockedInput");
// the var that holdes input from text box $('#appliedInput').keyup(function () {
filter = input.value.toUpperCase(); searchAndFilter($applied, this);
//makes the input all uppercase so we dont have problems with case insensitivity });
table = document.getElementById("blockedTable");
// the table at the moment this is called // Grab the blocked table
tr = table.getElementsByTagName("tr"); const $blocked = $('#blockedTable tr:not(:first)');
//the table rows
for (i = 1; i < tr.length; i++) { $('#blockedInput').keyup(function () {
// loops through the table rows searchAndFilter($blocked, this);
td = (tr[i].getElementsByTagName("td")[1] || tr[i].getElementsByTagName("td")[2]); });
//sets td to the element, gets changed evrey loop itteration
if (td) { // Grab the current table
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { const $current = $('#currentTable tr:not(:first)');
tr[i].style.display = "";
} else { $('#currentInput').keyup(function () {
tr[i].style.display = "none"; searchAndFilter($current, this);
// tr[1].style.display = "No results match your search! ¯\\_(ツ)_/¯" });
}
}
}
}
function filterCurrent() {
var input, filter, table, tr, td, i;
input = document.getElementById("currentInput");
// the var that holdes input from text box
filter = input.value.toUpperCase();
//makes the input all uppercase so we dont have problems with case insensitivity
table = document.getElementById("currentTable");
// the table at the moment this is called
tr = table.getElementsByTagName("tr");
//the table rows
for (i = 1; i < tr.length; i++) {
// loops through the table rows
td = (tr[i].getElementsByTagName("td")[1] || tr[i].getElementsByTagName("td")[2]);
//sets td to the element, gets changed evrey loop itteration
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
// tr[1].style.display = "No results match your search! ¯\\_(ツ)_/¯"
}
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment