From 5a4409d137566f1ae89af752af7a4608b4f2639e Mon Sep 17 00:00:00 2001
From: c21128207 <demetriadesz@cardiff.ac.uk>
Date: Fri, 3 Dec 2021 11:04:30 +0000
Subject: [PATCH] commit

---
 static/Location.css        | 35 ++++++++++++++++++++++++++++
 static/scripts/Location.js | 47 ++++++++++++++++++++++++++++++++++++++
 templates/Locations.html   | 26 +++++++++++++++++++++
 templates/about.html       |  4 ++--
 templates/contact-us.html  |  4 ++--
 5 files changed, 112 insertions(+), 4 deletions(-)
 create mode 100644 static/Location.css
 create mode 100644 static/scripts/Location.js
 create mode 100644 templates/Locations.html

diff --git a/static/Location.css b/static/Location.css
new file mode 100644
index 0000000..18b4e40
--- /dev/null
+++ b/static/Location.css
@@ -0,0 +1,35 @@
+.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;
+}
diff --git a/static/scripts/Location.js b/static/scripts/Location.js
new file mode 100644
index 0000000..d940a35
--- /dev/null
+++ b/static/scripts/Location.js
@@ -0,0 +1,47 @@
+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";
+  });
+}
diff --git a/templates/Locations.html b/templates/Locations.html
new file mode 100644
index 0000000..7b8c2f9
--- /dev/null
+++ b/templates/Locations.html
@@ -0,0 +1,26 @@
+{% 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>
diff --git a/templates/about.html b/templates/about.html
index 5dfe09e..dda99e9 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -1,6 +1,6 @@
 {% extends "main.html" %}
-{% block title %}Map{% endblock %}
+{% block title %}About{% endblock %}
 {% block mainBlock %}
-<header> About Us </header>
+<header> About 1</header>
 <p>text about us.</p>
 {% endblock %}
diff --git a/templates/contact-us.html b/templates/contact-us.html
index 76c03cb..cbc51ea 100644
--- a/templates/contact-us.html
+++ b/templates/contact-us.html
@@ -1,6 +1,6 @@
 {% extends "main.html" %}
 {% block title %}Map{% endblock %}
 {% block mainBlock %}
-<header> Contact Us </header>
-<p>text about contact info.</p>
+<header> Contact <header> 
+  <p> tact info.</p>
 {% endblock %}
-- 
GitLab