Security Camera Computer Menu

by kyle2143

HTML

<body>
     <button type='button' autofocus id='movementButton' style='width:100%;display:block;color:green;background-color:black;'> Keyboard Movement Mode</button>
 <div id='main_list'>

    <input type='text' id='searchbar' onkeyup='filterTable()' placeholder='Search for cameras..'>
    <table id='cameraList'>
      <tr>
        <td><a href='byond://?src=\ref[src];camera=\ref[C]' style='display:block;'>Aft Primary Hallway 1</a></td>
        <td class='fav'>&#128190;</td>
      </tr>
      <tr>
        <td><a href='byond://?src=\ref[src];camera=\ref[C]' style='display:block;'>Aft Primary Hallway 2</a></td>
        <td class='fav'>&#128190;</td>
      </tr>
      <tr>
        <td><a href='byond://?src=\ref[src];camera=\ref[C]' style='display:block;'>Aft Primary Hallway 3</a></td>
        <td class='fav'>&#128190;</td>
      </tr>
      <tr>
        <td><a href='byond://?src=\ref[src];camera=\ref[C]' style='display:block;'>Aft Primary Hallway 4</a></td>
        <td class='fav'>&#128190;</td>
      </tr>
      <tr>
        <td><a href='byond://?src=\ref[src];camera=\ref[C]' style='display:block;'>Aft Primary Hallway 5</a></td>
        <td class='fav'>&#128190;</td>
      </tr>
    </table>
  </div>
  <div id='fav_list'>
    <p>Favorite Cameras: </p>
    <table id='savedCameras'>
      <tr>
        <td><a href='byond://?src=\ref[src];camera=\ref[C]' style='display:block;'>arcade 1</a></td>
        <td class='fav'>&#128165;</td>
      </tr>
      <tr>
        <td><a href='byond://?src=\ref[src];camera=\ref[C]' style='display:block;'>arcade 2</a></td>
        <td class='fav'>&#128165;</td>
      </tr>
      <tr>
        <td><a href='byond://?src=\ref[src];camera=\ref[C]' style='display:block;'>arcade 3</a></td>
        <td class='fav'>&#128165;</td>
      </tr>
    </table>
  </div>
</body>

CSS

ul {
		  list-style-type: none;
		  margin: 0;
		  padding: 0;
		}

		table {
		  width: 80;
		}
    a {
      color:green;
    }

		#main_list {
		  width: 275px;
		  border: 1px solid red;
		  margin: 5px;
      padding:3px;
		  float: left;
		  display: inline-block;
		}

		#fav_list {
		  width: 275px;
		  height: 300px;
		  border: 1px solid red;
		  margin: 5px;
      padding:3px;
		  float: right;
		  display: inline-block;
		  overflow: hidden;
		}

JavaScript

function filterTable() {
	  var input, filter, table, tr, td, i, txtValue;
	  input = document.getElementById('searchbar');
	  filter = input.value.toUpperCase();
	  table = document.getElementById("cameraList");
	  tr = table.getElementsByTagName("tr");

	  // Loop through all table rows, and hide those who don't match the search query
	  for (i = 0; i < tr.length; i++) {
	    td = tr[i].getElementsByTagName("td")[0];
	    if (td) {
	      txtValue = td.textContent || td.innerText;
	      if (txtValue.toUpperCase().indexOf(filter) > -1) {
	        tr[i].style.display = "";
	      } else {
	        tr[i].style.display = "none";
	      }
	    }
	  }
	}


	//stole this debounce function from Kfir Zuberi at https://medium.com/walkme-engineering/debounce-and-throttle-in-real-life-scenarios-1cc7e2e38c68
	function debounce(func, interval) {
	  var timeout;
	  return function() {
	    var context = this,
	      args = arguments;
	    var later = function() {
	      timeout = null;
	      func.apply(context, args);
	    };
	    clearTimeout(timeout);
	    timeout = setTimeout(later, interval || 200);
	  }
	}

	$(document).delegate('button', 'keydown', debounce(function(e) {
	  var keyId = e.which;
    //takes arrows, wasd, and ijkl.
    //If any other key is pressed, just default to return
    switch(keyId) {
    	case 37:
      case 65:
      case 74:
      	keyId = 37;
      	break;
      case 38:
      case 87:
      case 73:
      	keyId = 38;
      	break;
      case 39:
      case 68:
      case 76:
      	keyId = 39;
      	break;
      case 40:
      case 83:
      case 75:
      	keyId = 40;
      	break;
 			default: 
      	return;
    }
	  window.location = 'byond://?src=\ref[src];move=' + keyId;
	  e.preventDefault();

	}, 100));

	//for these just add a save link to those list items

	$(document).delegate('.fav', 'click', debounce(function(e) {
	  var table = $(this).parent().parent().parent()
	  //check which list it's in. adding/removing. 
	  if...