Merge branch 'Filtering' into 'main'

Adding filtering system

See merge request !14

.vs/ProjectSettings.json

+{
+  "CurrentProjectSetting": null
+}
\ No newline at end of file

.vs/VSWorkspaceState.json

+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "SelectedNode": "\\README.md",
+  "PreviewInSolutionExplorer": false
+}
\ No newline at end of file

main.py

@@ -15,6 +15,10 @@ def home():
 def about():
 	return render_template("about.html")
 
+@app.route("/Locations", methods = ["GET"])
+def Locations():
+	return render_template("Locations.html")
+
 @app.route("/contact-us", methods = ["GET"])
 def contact():
 	return render_template("contact-us.html")

static/Location.css

+.container {
+  overflow: hidden;
+}
+
+.filterDiv {
+  float: left;
+  background-color: #2196F3;
+  color: #ffffff;
+  width: 100px;
+  line-height: 100px;
+  text-align: center;
+  margin: 2px;
+  display: none; /* Hidden by default */
+}
+
+.show {
+  display: block;
+}
+
+.btn {
+  border: none;
+  outline: none;
+  padding: 12px 16px;
+  background-color: #f1f1f1;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background-color: #ddd;
+}
+
+.btn.active {
+  background-color: #666;
+  color: white;
+}

static/scripts/Location.js

+filterSelection("all")
+function filterSelection(c) {
+  var x, i;
+  x = document.getElementsByClassName("filterDiv");
+  if (c == "all") c = "";
+  // Add the Show class
+  for (i = 0; i < x.length; i++) {
+    RemoveClass(x[i], "show");
+    if (x[i].className.indexOf(c) > -1) AddClass(x[i], "show");
+  }
+}
+
+// Showing filtered elements
+function AddClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    if (arr1.indexOf(arr2[i]) == -1) {
+      element.className += " " + arr2[i];
+    }
+  }
+}
+
+// Removing elements that are not selected
+function RemoveClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    while (arr1.indexOf(arr2[i]) > -1) {
+      arr1.splice(arr1.indexOf(arr2[i]), 1);
+    }
+  }
+  element.className = arr1.join(" ");
+}
+
+// Add active class to current control button
+var btnContainer = document.getElementById("myBtnContainer");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+  btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+  });
+}

templates/Locations.html

+{% extends "main.html" %}
+{% block title %}Locations{% endblock %}
+{% block mainBlock %}
+<div id="myBtnContainer">
+  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
+  <button class="btn" onclick="filterSelection('Wales')"> Wales</button>
+  <button class="btn" onclick="filterSelection('North-England')"> North England</button>
+  <button class="btn" onclick="filterSelection('South-West-England')"> South West England</button>
+  <button class="btn" onclick="filterSelection('Midlands')"> Midlands</button>
+  <button class="btn" onclick="filterSelection('Scotland')"> Scotland<button>
+</div>
+
+<div class="container">
+  <div class="filterDiv Wales">Location 1</div>
+  <div class="filterDiv Wales">Location 2</div>
+  <div class="filterDiv North-England">Location 3</div>
+  <div class="filterDiv North-England">Location 4</div>
+  <div class="filterDiv South-West-England">Location 5</div>
+  <div class="filterDiv South-West-England">Location 6</div>
+  <div class="filterDiv South-West-England">Location 7</div>
+  <div class="filterDiv Midlands">Location 8</div>
+  <div class="filterDiv Midlands">Location 9</div>
+  <div class="filterDiv Scotland">Location 10</div>
+  <div class="filterDiv Scotland">Location 11</div>
+  <div class="filterDiv Scotland">Location 12</div>
+</div>

templates/main.html

@@ -24,6 +24,7 @@
   <li><a href="/">Home</a></li>
   <li><a href="/map">Map</a></li>
   <li><a href="/contact-us">Contact Us</a></li>
+	<li><a href="/Locations">Locations</a></li>
   <li style="float:right"><a class="active" href="/about">About</a></li>
 </ul>
 	</nav>