169 lines
5.5 KiB
HTML
169 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
{% block title %}<title>Local Library</title>{% endblock %}
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
|
|
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|
<!-- Add additional CSS in static file -->
|
|
{% load static %}
|
|
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
|
|
</head>
|
|
|
|
<body>
|
|
{% block topnav%}
|
|
<ul class="topnav">
|
|
|
|
{% if user.is_authenticated %}
|
|
<li class="active"><a href="{{user.get_absolute_url}}"> {{ user.get_username }}</a></li>
|
|
<li><a href="{% url 'logout'%}?next={{request.path}}">Logout</a></li>
|
|
{% else %}
|
|
<li><a href="{% url 'sign-up'%}?next={{request.path}}">Sign up</a></li>
|
|
<li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
{% endblock %}
|
|
|
|
{% if user.is_authenticated %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
{% block sidebar %}
|
|
<div class="sidenav">
|
|
<a href="{% url 'search' %}">Search</a>
|
|
<a href="{% url 'books' %}">Books</a>
|
|
<button class="dropdown-btn">Authors
|
|
<i class="fa fa-caret-down"></i>
|
|
</button>
|
|
<div class="dropdown-container">
|
|
{% for author in unique_authors %}
|
|
<a href="{{author.get_absolute_url}}">{{author}}</a>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<button class="dropdown-btn">Publishers
|
|
<i class="fa fa-caret-down"></i>
|
|
</button>
|
|
<div class="dropdown-container">
|
|
{% for publisher in unique_publishers %}
|
|
<a href="{{publisher.get_absolute_url}}">{{publisher}}</a>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<button class="dropdown-btn">Ratings
|
|
<i class="fa fa-caret-down"></i>
|
|
</button>
|
|
<div class="dropdown-container">
|
|
{% for rating in unique_ratings %}
|
|
<a href="{{rating.get_absolute_url}}">{{rating}}</a>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
<button class="dropdown-btn">Tags
|
|
<i class="fa fa-caret-down"></i>
|
|
</button>
|
|
<div class="dropdown-container">
|
|
{% for tag in unique_tags %}
|
|
<a href="{{tag.get_absolute_url}}">{{tag}}</a>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %}
|
|
</div>
|
|
<div class="col-sm-10 ">{% block content %}{% endblock %}</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var dropdown = document.getElementsByClassName("dropdown-btn");
|
|
var i;
|
|
|
|
for (i = 0; i < dropdown.length; i++) {
|
|
dropdown[i].addEventListener("click", function () {
|
|
this.classList.toggle("active");
|
|
var dropdownContent = this.nextElementSibling;
|
|
if (dropdownContent.style.display === "block") {
|
|
dropdownContent.style.display = "none";
|
|
} else {
|
|
dropdownContent.style.display = "block";
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
function sortTable(n) {
|
|
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
|
|
table = document.getElementById("books");
|
|
switching = true;
|
|
// Set the sorting direction to ascending:
|
|
dir = "asc";
|
|
/* Make a loop that will continue until
|
|
no switching has been done: */
|
|
while (switching) {
|
|
// Start by saying: no switching is done:
|
|
switching = false;
|
|
rows = table.rows;
|
|
/* Loop through all table rows (except the
|
|
first, which contains table headers): */
|
|
for (i = 1; i < (rows.length - 1); i++) {
|
|
// Start by saying there should be no switching:
|
|
shouldSwitch = false;
|
|
/* Get the two elements you want to compare,
|
|
one from current row and one from the next: */
|
|
x = rows[i].getElementsByTagName("TD")[n];
|
|
y = rows[i + 1].getElementsByTagName("TD")[n];
|
|
/* Check if the two rows should switch place,
|
|
based on the direction, asc or desc: */
|
|
if (dir == "asc") {
|
|
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
|
|
// If so, mark as a switch and break the loop:
|
|
shouldSwitch = true;
|
|
break;
|
|
}
|
|
} else if (dir == "desc") {
|
|
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
|
|
// If so, mark as a switch and break the loop:
|
|
shouldSwitch = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (shouldSwitch) {
|
|
/* If a switch has been marked, make the switch
|
|
and mark that a switch has been done: */
|
|
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
|
switching = true;
|
|
// Each time a switch is done, increase this count by 1:
|
|
switchcount++;
|
|
} else {
|
|
/* If no switching has been done AND the direction is "asc",
|
|
set the direction to "desc" and run the while loop again. */
|
|
if (switchcount == 0 && dir == "asc") {
|
|
dir = "desc";
|
|
switching = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{% else %}
|
|
<h1>You don't have permission to view this.</h1>
|
|
<li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
|
|
or
|
|
<li><a href="{% url 'sign-up'%}?next={{request.path}}">Sign up</a></li>
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html> |