hp-library/templates/layout.html

321 lines
12 KiB
HTML
Raw Normal View History

2019-11-22 18:57:35 +01:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Library</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
2019-11-27 13:40:15 +01:00
<!--TEST-->
2019-11-27 19:02:41 +01:00
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
2020-09-21 15:49:00 +02:00
2019-11-27 19:02:41 +01:00
<script type="text/javascript">
2020-09-21 15:49:00 +02:00
$(document).ready(function() {
2019-12-20 11:08:19 +01:00
2020-09-21 15:49:00 +02:00
///////URLS/////////////
// setting up variables that we will use for the url later
var existing_path = window.location.href;
existing_start = existing_path.indexOf('/?');
var address = existing_path.slice(existing_start);
// function to extract the parameters from the url. once we have them we can give them the class 'clicked'
function getAllUrlParams(url) {
// get query string from url (optional) or window
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
// we'll store the parameters here
var obj = {};
// if query string exists
if (queryString) {
// stuff after # is not part of query string, so get rid of it
queryString = queryString.split('#')[0];
// split our query string into its component parts
var arr = queryString.split('&');
for (var i = 0; i < arr.length; i++) {
// separate the keys and the values
var a = arr[i].split('=');
// set parameter name and value (use 'true' if empty)
var paramName = a[0];
var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
// (optional) keep case consistent
paramName = paramName.toLowerCase();
if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
// if the paramName ends with square brackets, e.g. colors[] or colors[2]
if (paramName.match(/\[(\d+)?\]$/)) {
// create key if it doesn't exist
var key = paramName.replace(/\[(\d+)?\]/, '');
if (!obj[key]) obj[key] = [];
// if it's an indexed array e.g. colors[2]
if (paramName.match(/\[\d+\]$/)) {
// get the index value and add the entry at the appropriate position
var index = /\[(\d+)\]/.exec(paramName)[1];
obj[key][index] = paramValue;
} else {
// otherwise add the value to the end of the array
obj[key].push(paramValue);
}
} else {
// we're dealing with a string
if (!obj[paramName]) {
// if it doesn't exist, create property
obj[paramName] = paramValue;
} else if (obj[paramName] && typeof obj[paramName] === 'string'){
// if property does exist and it's a string, convert it to an array
obj[paramName] = [obj[paramName]];
obj[paramName].push(paramValue);
} else {
// otherwise add the property
obj[paramName].push(paramValue);
}
}
}
}
return obj;
};
// var libList = getAllUrlParams().librarian;
// var methodList = getAllUrlParams().method;
// for (i=0; i < libList.length; i++) {
// var search_id = libList[i].toString(2);
// var element = document.getElementById(search_id);
// }
// for (i=0; i<methodList.length; i++) {
// var search_id = '#' + methodList[i];
// $( search_id ).addClass('clicked');
// }
2020-09-21 15:49:00 +02:00
// generating the url with librarian names
$(".librarian-names").click(function(event){
var theid = $(this).attr('id');
var test = "librarian=" + theid;
if(address.includes(test)!=true){
if(address.slice(address.length - 1)!='/'){
address = address + "&librarian=" + theid;
} else {
address = address + "?librarian=" + theid;
}
location.href = address;
} else {
var start = "?librarian=" + theid;
var addition = "&librarian=" + theid;
if(address.includes(start)==true && address.charAt(start.length+1)=='&'){
var begin = address.indexOf(start)+1;
address = address.replace(address.substr(begin,start.length),'');
} else if(address.includes(start)==true) {
address = address.replace(start,'');
} else {
address = address.replace(addition,'');
};
location.href = address;
};
});
// generating the url with method names
$(".nav-button").click(function(event){
var theid = $(this).attr('id');
var test = "method=" + theid;
if(address.includes(test)!=true){
if(address.slice(address.length - 1)!='/'){
address = address + "&method=" + theid;
} else {
address = address + "?method=" + theid;
}
location.href = address;
} else {
var start = "?method=" + theid;
var addition = "&method=" + theid;
if(address.includes(start)==true && address.charAt(start.length+1)=='&'){
var begin = address.indexOf(start)+1;
address = address.replace(address.substr(begin,start.length),'');
} else if(address.includes(start)==true) {
address = address.replace(start,'');
} else {
address = address.replace(addition,'');
};
location.href = address;
};
});
/////DISPLAY FILES/////////////
$(".file-names").click(function(event){
2020-09-21 15:49:00 +02:00
// alert(listofselecteddocs);
// if classname in listselecteddocs, checkbox is checked;
var thefile = $(this).text();
2019-12-20 11:08:19 +01:00
$.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
$(".name-elements").empty();
// iterate in test[i].librarian to find where the name is present
//to get the test[i].debris that goes with it
2020-09-21 15:49:00 +02:00
var allpeeps = [];
var category = null;
for (var i = 0; i < test.length; ++i) {
var item = test[i];
2019-12-20 11:08:19 +01:00
if(item.debrisname.includes(thefile)){
ledocument = item.debrispath;
2019-12-22 20:36:29 +01:00
// allpeeps.push(ledocument);
var extension = ledocument.replace(/^.*\./, '');
2020-09-21 15:49:00 +02:00
// var classname = ledocument.substring(ledocument.lastIndexOf('/')+1);
// classname = classname.substr(0, classname.lastIndexOf('.')) || classname;
var classname = ledocument;
2019-12-22 20:36:29 +01:00
console.log(ledocument);
2020-09-21 15:49:00 +02:00
// check or unchecked checkbox if classname in array
var checkboite;
if(jQuery.inArray(classname, listofselecteddocs) != -1) {
console.log("is in array");
checkboite = "<br /><input type='checkbox' class='addtoprint' id='"+classname+"' name='"+classname+"' value='print' checked><label for='"+classname+"'> Add to print</label>";
} else {
checkboite = "<br /><input type='checkbox' class='addtoprint' id='"+classname+"' name='"+classname+"' value='print'><label for='"+classname+"'> Add to print</label>";
}
2019-12-22 20:36:29 +01:00
if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
2020-09-21 15:49:00 +02:00
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'>"+checkboite+"</li>");
2019-12-22 20:36:29 +01:00
}
else if (extension=="pdf") {
2020-09-21 15:49:00 +02:00
$(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/>"+checkboite+"</li>");
2019-12-22 20:36:29 +01:00
}
else if (extension=="epub") {
$(".name-elements").append("<li>"+ledocument+"</li>");
}
else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio></li>");
}
else if ((extension=="mov") || (extension=="mp4")) {
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video></li>");
}
else if ((extension=="odt") || (extension=="docx")) {
// something for odt and docx
$(".name-elements").append("<li>"+ledocument+"</li>");
};
};
category = item.method;
};
2019-12-20 11:08:19 +01:00
});
});
2020-09-21 15:49:00 +02:00
///////////CHECKBOXES////////////////
var listofselecteddocs = [];
$(document.body).on("click", "input[type='checkbox']", function() {
var self=$(this);
if(self.is(":checked")){
theid = self.attr("id");
alert("checkbox id ="+theid +"is checked ");
listofselecteddocs.push(theid);
alert(listofselecteddocs.length);
}else {
theid = self.attr("id");
alert("id = "+theid +"is Unchecked ");
listofselecteddocs = $.grep(listofselecteddocs, function(value) {
return value != theid;
});
alert(listofselecteddocs.length);
}
});
//THE SENDING OF THE LIST TO PYTHON ///////////////////
$("#listoffiles").click(function(){
console.log(listofselecteddocs)
$.ajax({
type : 'POST',
url : "{{url_for('test')}}",
data : JSON.stringify(listofselecteddocs),
success: function(response){
alert("yesss")
},
contentType: "application/json",
dataType: 'json'
});
});
2019-11-27 19:02:41 +01:00
});
2020-09-21 15:49:00 +02:00
2019-11-27 19:02:41 +01:00
</script>
2019-11-27 13:40:15 +01:00
2019-11-22 18:57:35 +01:00
</head>
<body>
<div class="nav-top">
<ul>
2020-09-21 15:49:00 +02:00
<li><span class="nav-button" style="text-align: left;" id="bought">BOUGHT</span></li>
<li><span class="nav-button" style="text-align: center;" id="stolen">STOLEN</span>
<li><span class="nav-button" style="text-align: right;" id="repurposed">REPURPOSED</span>
2019-11-22 18:57:35 +01:00
</ul>
</div>
<div class="main">
<div class="main-column-left">
2019-11-27 13:40:15 +01:00
<div id="listofpeople">
2019-11-22 18:57:35 +01:00
{% for librarian in librarians %}
2020-09-21 15:49:00 +02:00
<span class="librarian-names" id={{librarian}}>{{librarian}}</span>
2019-11-22 18:57:35 +01:00
{% endfor %}
2019-11-27 13:40:15 +01:00
</div>
2019-11-22 18:57:35 +01:00
2020-09-21 15:49:00 +02:00
<!-- submit data -->
2020-09-21 17:51:16 +02:00
<button id="about">About</button>
<button id="listoffiles">Print</button>
2020-09-21 15:49:00 +02:00
<br>
2019-11-26 13:22:14 +01:00
<div class="file-names-container">
2020-09-21 15:49:00 +02:00
<!--librarians-focused-->
{% for querylibrarian in urllibrarian %}
{% for file in filetoname_dict %}
{% for item in file['librarian'] %}
{% if item == querylibrarian and urlmethod == []%}
{% set show_file = file['debrisname'] %}
2020-09-21 17:51:16 +02:00
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
2020-09-21 15:49:00 +02:00
{% elif item == querylibrarian %}
{% for urlmeth in urlmethod %}
{% if urlmeth.lower() == file['method'].lower() %}
{% set show_file = file['debrisname'] %}
2020-09-21 17:51:16 +02:00
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
2020-09-21 15:49:00 +02:00
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
<!--method-focused-->
{% for querymethod in urlmethod %}
{% for file in filetoname_dict %}
{% if querymethod.lower() == file['method'].lower()%}
{% set show_file = file['debrisname'] %}
2020-09-21 17:51:16 +02:00
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
2020-09-21 15:49:00 +02:00
{% endif %}
{% endfor %}
{% endfor %}
2019-11-26 13:22:14 +01:00
</div>
2019-11-22 18:57:35 +01:00
</div>
2019-11-26 13:22:14 +01:00
2019-11-22 18:57:35 +01:00
<div class="main-column-right">
2020-09-21 17:51:16 +02:00
<!--<a href="{{ url_for('static', filename='realjson.json') }}">test link</a>-->
2019-12-20 11:08:19 +01:00
<ul class="name-elements">
</ul>
2019-11-27 13:40:15 +01:00
2019-11-22 18:57:35 +01:00
{% block content %}
{% endblock content %}
</div>
</div>
<div class="nav-bottom">
<ul>
2020-09-21 15:49:00 +02:00
<li><span class="nav-button" style="text-align: left;" id="copied">COPIED</span></li>
<li><span class="nav-button" style="text-align: center;" id="found">FOUND</span></li>
<li><span class="nav-button" style="text-align: right;" id="gift">GIFT</span></li>
2019-11-22 18:57:35 +01:00
</ul>
</div>
</body>
</html>