boxes for other items and zip works on server but corrupted at download

library.py

@@ -1,10 +1,11 @@
-from flask import Flask, render_template, Markup, jsonify, session, request
+from flask import Flask, render_template, Markup, jsonify, session, request, send_file
 import json
 import os
 from json import dumps
 import collections
 import random
 import string
+from zipfile import ZipFile
 
 app = Flask(__name__, static_url_path='', static_folder="static", template_folder="templates")
 app.jinja_env.add_extension('jinja2.ext.loopcontrols')
@@ -97,10 +98,33 @@ def exchange():
 def test():
     print("test")
     clicked=None
+    bundle = "bundle.zip"
+    zipObj = ZipFile(bundle, 'w')
+
     if request.method == "POST":
         # clicked=request.form['data']
         listofselecteddocs = request.get_json()
         print("hallo")
         print(listofselecteddocs)
         print("hola")
-    return render_template('test.html')
+
+        
+
+        # create a ZipFile object
+        
+        # Add multiple files to the zip
+        zipObj.write('static/files/'+listofselecteddocs[0])
+        zipObj.write('static/files/'+listofselecteddocs[1])
+        zipObj.write('static/default-files/hello.txt')
+        # close the Zip File
+        
+    # return render_template('test.html')
+        # return send_file(bundle, mimetype='application/zip', as_attachment=True, attachment_filename=bundle)
+    # TEST 
+        # print("sending file...")
+        # result = send_file(bundle, as_attachment=True)
+        # print("file sent, deleting...")
+        # os.remove(bundle)
+        # return result
+    zipObj.close()
+    return send_file(bundle, mimetype='application/zip', attachment_filename="hello.zip", as_attachment=True)

library_cristina.py → oldlibs/20201007-library.py

@@ -59,7 +59,7 @@ def home():
         # We have our query string nicely serialized as a Python dictionary
         args = request.args
         # We'll create a string to display the parameters & values
-        serialized = ", ".join(f"{k}: {v}" for k, v in request.args.items())
+        # serialized = ", ".join(f"{k}: {v}" for k, v in request.args.items())
         # Display the query string to the client in a different format
         # return f"(Query) {serialized}", 200
     urllibrarian=request.args.getlist('librarian') # new

oldlibs/libraryjuju.py

@@ -0,0 +1,106 @@
+from flask import Flask, render_template, Markup, jsonify, session, request
+import json
+import os
+from json import dumps
+import collections
+import random
+import string
+
+app = Flask(__name__, static_url_path='', static_folder="static", template_folder="templates")
+app.jinja_env.add_extension('jinja2.ext.loopcontrols')
+
+
+# SETTING THE VARIABLES
+path = "/static/files/"
+max_selected_items = 30
+
+#move this list to Jinja so it can be placed in layout
+#give back clicked value
+# librarians = ["Alana", "Gentian", "Laurie", "Matias", "Scott", "Stacy", "Max", "Clara_B", "Michelle", "Clara_J_B", "Karen", "Lumsden_Primary_School", "Aaron", "Leo", "Maria", "Laura", "Honey", "Tender_Center", "wdka", "Naomi", "Cristina", "Julie", "ssw", "cyberspace", "Hannah", "Katarina", "Anastasia", "Kimmy", "Marie","Katherine", "Allison", "Mariana", "Viki", "Alice", "Eric", "hks", "cbk", "Sophie", "Antonio", "Jeremiah", "Angela", "Renee", "Marta", "Katherine", "Anna", "Auryn", "Ashley", "Anne", "Denise", "Eva", "Jonnah", "Kitty", "Masha", "Mia", "Cian", "Senke", "Maud", "Jinnie", "Rubin", "Julia", "Alana", "Gentian", "Laurie", "Matias","Scott", "Stacy"]
+
+librarians = []
+files_without_folders = []
+
+with open('static/js/mergedjson.json', 'r', encoding='utf8') as filesandnames:
+    filetoname_dict = json.load(filesandnames)
+
+#get full list librarians from json (printed later through global variable)
+    for file in filetoname_dict:
+        for name in file["librarian"]:
+            librarians.append(str(name))
+            librarians = list(dict.fromkeys(librarians))
+
+#this value we should get from template
+    librarianselected = "Ruben"
+
+#go from librarian name to file
+    for file in filetoname_dict:
+        # if librarianselected in file["librarian"]:
+        thedebris = file["debrisname"]
+            #apply regex to the debris
+        thedebris = os.path.basename(thedebris)
+        files_without_folders.append(str(thedebris))
+            # print(str(librarianselected)+" contributed with the following debris : "+str(thedebris))
+
+
+
+#this value we should get from template
+    fileselected = filetoname_dict[1]["debrisname"]
+
+#go from file name to librarian name
+    for file in filetoname_dict:
+        if fileselected in file["debrisname"]:
+            thelibrarian = file["librarian"]
+            print("librarians for "+ str(fileselected)+" are: " + str(thelibrarian))
+            print("---------------------------------------------------")
+
+
+# preparing a index.json file of files
+index_dict = {}
+
+
+
+@app.route("/", methods=['POST', 'GET'])
+def home():
+    if request.args:
+        # We have our query string nicely serialized as a Python dictionary
+        args = request.args
+        # We'll create a string to display the parameters & values
+        #serialized = ", ".join(f"{k}: {v}" for k, v in request.args.items())
+        # Display the query string to the client in a different format
+        # return f"(Query) {serialized}", 200
+    urllibrarian=request.args.getlist('librarian') # new
+    urlmethod=request.args.getlist('method') # new
+    for a in urllibrarian:
+        print('urllibrarian is: '+ a)
+    for b in urlmethod:
+        print('urlmethod is: ' + b)
+#unsure if Im really using that for now I think not
+    # selected = "textbysomeone"
+    # selections = collections.deque(session['selection'], maxlen=max_selected_items) #?
+    # selections.append(selected)
+    # session['selection'] = list(selections)
+    return render_template('layout.html', urllibrarian=urllibrarian, urlmethod=urlmethod, filetoname_dict=filetoname_dict, librarians=librarians, files_without_folders = files_without_folders) # new
+
+
+@app.route('/about/')
+def about():
+    selectedstuff = session['selection']
+    return render_template('about.html', selectedstuff=selectedstuff)
+
+@app.route('/exchange')
+def exchange():
+    return render_template('exchange.html')
+
+
+@app.route('/test/', methods=['GET','POST'])
+def test():
+    print("test")
+    clicked=None
+    if request.method == "POST":
+        # clicked=request.form['data']
+        listofselecteddocs = request.get_json()
+        print("hallo")
+        print(listofselecteddocs)
+        print("hola")
+    return render_template('test.html')

oldlibs/llllllibrary.py

@@ -0,0 +1,65 @@
+from flask import Flask, render_template, Markup, jsonify
+import json
+import os
+from json import dumps
+
+app = Flask(__name__, static_url_path='', static_folder="static", template_folder="templates")
+app.jinja_env.add_extension('jinja2.ext.loopcontrols')
+
+
+# SETTING THE VARIABLES
+path = "/static/files/"
+
+#move this list to Jinja so it can be placed in layout
+#give back clicked value
+# librarians = ["Alana", "Gentian", "Laurie", "Matias", "Scott", "Stacy", "Max", "Clara_B", "Michelle", "Clara_J_B", "Karen", "Lumsden_Primary_School", "Aaron", "Leo", "Maria", "Laura", "Honey", "Tender_Center", "wdka", "Naomi", "Cristina", "Julie", "ssw", "cyberspace", "Hannah", "Katarina", "Anastasia", "Kimmy", "Marie","Katherine", "Allison", "Mariana", "Viki", "Alice", "Eric", "hks", "cbk", "Sophie", "Antonio", "Jeremiah", "Angela", "Renee", "Marta", "Katherine", "Anna", "Auryn", "Ashley", "Anne", "Denise", "Eva", "Jonnah", "Kitty", "Masha", "Mia", "Cian", "Senke", "Maud", "Jinnie", "Rubin", "Julia", "Alana", "Gentian", "Laurie", "Matias","Scott", "Stacy"]
+
+librarians = []
+files_without_folders = []
+
+with open('static/js/mergedjson.json', 'r', encoding='utf8') as filesandnames:
+    filetoname_dict = json.load(filesandnames)
+
+#get full list librarians from json (printed later through global variable)
+    for file in filetoname_dict:
+        for name in file["librarian"]:
+            librarians.append(str(name))
+            librarians = list(dict.fromkeys(librarians))
+
+#this value we should get from template
+    librarianselected = "Ruben"
+
+#go from librarian name to file
+    for file in filetoname_dict:
+        # if librarianselected in file["librarian"]:
+        thedebris = file["debrisname"]
+            #apply regex to the debris
+        thedebris = os.path.basename(thedebris)
+        files_without_folders.append(str(thedebris))
+            # print(str(librarianselected)+" contributed with the following debris : "+str(thedebris))
+
+
+
+#this value we should get from template
+    fileselected = filetoname_dict[1]["debrisname"]
+
+#go from file name to librarian name
+    for file in filetoname_dict:
+        if fileselected in file["debrisname"]:
+            thelibrarian = file["librarian"]
+            print("librarians for "+ str(fileselected)+" are: " + str(thelibrarian))
+            print("---------------------------------------------------")
+
+print(librarians)
+
+@app.route("/")
+def home():
+    return render_template('layout.html', filetoname_dict=filetoname_dict, librarians=librarians, files_without_folders = files_without_folders)
+
+@app.route('/about/')
+def about():
+    return render_template('about.html')
+
+@app.route('/exchange')
+def exchange():
+    return render_template('exchange.html')

static/default-files/hello.txt

@@ -0,0 +1 @@
+Hello this is your bundle

templates/20201007-layout.html

@@ -0,0 +1,255 @@
+<!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') }}">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
+
+  </head>
+  <body>
+    <div class="nav-top">
+      <ul>
+        <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>
+    </ul>
+    </div>
+    <div class="main">
+      <div class="main-column-left">
+
+        <div id="listofpeople">
+        {% for librarian in librarians %}
+          <!-- <span class="librarian-names" id={{libid}}>{{librarian}}</span> -->
+          <span class="librarian-names" id={{librarian}}>{{librarian}}</span>
+        {% endfor %}
+      </div>
+        <br>
+
+        <div class="file-names-container">
+          <!--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'] %}
+                  <span class="file-names" id="{{show_file}}">{{show_file}}</span>
+                  {% elif item == querylibrarian %}
+                      {% for urlmeth in urlmethod %}
+                        {% if urlmeth.lower() == file['method'].lower() %}
+                          {% set show_file = file['debrisname'] %}
+                          <span class="file-names" id="{{show_file}}">{{show_file}}</span>
+                        {% 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'] %}
+                <span class="file-names" id="{{show_file}}">{{show_file}}</span>
+              {% endif %}
+            {% endfor %}
+          {% endfor %}
+        </div>
+      </div>
+
+      <div class="main-column-right">
+        <a href="{{ url_for('static', filename='realjson.json') }}">test link</a>
+        <ul class="name-elements">
+          <p>hello world</p>
+        </ul>
+
+        {% block content %}
+        {% endblock content %}
+      </div>
+    </div>
+    <div class="nav-bottom">
+      <ul>
+        <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>
+      </ul>
+    </div>
+
+    <script type="text/javascript">
+      $(document).ready(function() {
+        // 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');
+        // }
+
+
+        // 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;
+          };
+        });
+
+
+        //displaying the files when clicked on, based on the kind of files they are
+        $(".file-names").click(function(event){
+          var thefile = $(this).text();
+          $.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
+            var allpeeps = [];
+            var category = null;
+            for (var i = 0; i < test.length; ++i) {
+              var item = test[i];
+              if(item.debrisname.includes(thefile)){
+                ledocument = item.debrispath;
+                // allpeeps.push(ledocument);
+                var extension = ledocument.replace(/^.*\./, '');
+                console.log(ledocument);
+                if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
+                  $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'></li>");
+                }
+                else if (extension=="pdf") {
+                  $(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/></li>");
+                }
+                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;
+            };
+
+          });
+        });
+
+    });
+
+
+    </script>
+
+  </body>
+</html>

templates/layout.html

@@ -118,10 +118,10 @@
                  $(".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>");
+                 $(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio>"+checkboite+"</li>");
                }
                else if ((extension=="mov") || (extension=="mp4")) {
-                 $(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video></li>");
+                 $(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video>"+checkboite+"</li>");
                }
                else if ((extension=="odt") || (extension=="docx")) {
                // something for odt and docx
@@ -198,7 +198,7 @@ $.ajax({
 
 <!-- submit data -->
       <button id="about">About</button>
-      <button id="listoffiles">Print</button>
+      <a href="/test/" target="_blank"><button id="listoffiles">Print</button></a>
       <a href="/"><button id="reset">Reset</button></a>
       <button id="showall">Show All</button>
 

templates/layoutjuju.html

@@ -0,0 +1,342 @@
+<!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-new.css') }}">
+
+    <!--TEST-->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
+    
+     <script type="text/javascript">
+    $(document).ready(function() {
+
+///////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');
+        // }
+
+
+        // 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){
+          
+          // alert(listofselecteddocs);
+          // if classname in listselecteddocs, checkbox is checked;
+
+         var thefile = $(this).text();
+         $.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
+
+
+           var allpeeps = [];
+           var category = null;
+           for (var i = 0; i < test.length; ++i) {
+             var item = test[i];
+             if(item.debrisname.includes(thefile)){
+               ledocument = item.debrispath;
+               // allpeeps.push(ledocument);
+               var extension = ledocument.replace(/^.*\./, '');
+               // var classname = ledocument.substring(ledocument.lastIndexOf('/')+1);
+               // classname = classname.substr(0, classname.lastIndexOf('.')) || classname;
+               var classname = ledocument;
+               console.log(ledocument);
+
+// 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>";
+              } 
+
+             
+               if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
+                 $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'>"+checkboite+"</li>");
+               }
+               else if (extension=="pdf") {
+                 $(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/>"+checkboite+"</li>");
+               }
+               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;
+           };
+
+         });
+       });
+
+///////////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'
+});
+ });
+
+
+     });
+
+     </script>
+
+  </head>
+  <body>
+    <div class="nav-top">
+      <ul>
+        <li><a class="nav-button" style="text-align: left;" href="bought">BOUGHT</a></li>
+        <li><a class="nav-button" style="text-align: center;" href="stolen">STOLEN</a>
+        <li><a class="nav-button" style="text-align: right;" href="repurposed">REPURPOSED</a>
+    </ul>
+    </div>
+    <div class="main">
+      <div><a href="{{about}}">ABOUT</a></div>
+      <div class="main-column-left">
+
+        <div id="listofpeople">
+        {% for librarian in librarians %}
+        <!-- <a href="#" class="librarian-names">{{ librarian }}</a> -->
+        <span class="librarian-names">{{ librarian }}</span>
+        {% endfor %}
+      </div>
+
+<!-- submit data -->
+
+      <button id="listoffiles" style="margin-top: 11em" >Print!</button>
+
+
+        <br>
+        <div class="file-names-container">
+          <!--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'] %}
+                  <span class="file-names" id="{{show_file}}">{{show_file}}</span>
+                  {% elif item == querylibrarian %}
+                      {% for urlmeth in urlmethod %}
+                        {% if urlmeth.lower() == file['method'].lower() %}
+                          {% set show_file = file['debrisname'] %}
+                          <span class="file-names" id="{{show_file}}">{{show_file}}</span>
+                        {% 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'] %}
+                <span class="file-names" id="{{show_file}}">{{show_file}}</span>
+              {% endif %}
+            {% endfor %}
+          {% endfor %}
+        </div>
+      </div>
+
+      <div class="main-column-right">
+        <a href="{{ url_for('static', filename='realjson.json') }}">test link</a>
+        <ul class="name-elements">
+          <p>hello world</p>
+        </ul>
+
+        {% block content %}
+        {% endblock content %}
+      </div>
+    </div>
+    <div class="nav-bottom">
+      <ul>
+        <li><a class="nav-button" style="text-align: left;" href="copied">COPIED</a></li>
+        <li><a class="nav-button" style="text-align: center;" href="found">FOUND</a></li>
+        <li><a class="nav-button" style="text-align: right;" href="gift">GIFT</a></li>
+      </ul>
+    </div>
+
+  </body>
+</html>
+
+
+
+
+<!-- 
+https://stackoverflow.com/questions/42661249/making-a-checkbox-persistent-on-page-reload
+
+
+https://stackoverflow.com/questions/1154258/persistence-of-checkbox-values
+
+
+https://stackoverflow.com/questions/31671918/how-to-persist-checkbox-checked-state-after-page-reload
+
+
+https://stackoverflow.com/questions/42525002/localstorage-for-checkboxes
+https://developer.tizen.org/community/code-snippet/web-code-snippet/how-save-checkbox-status-localstorage
+https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/
+https://stackoverflow.com/questions/40935362/how-to-persist-checkbox-selection-with-page-refresh
+ -->

templates/llllllllayout.html

@@ -0,0 +1,143 @@
+<!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') }}">
+
+    <!--TEST-->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
+     <script type="text/javascript">
+     $(document).ready(function() {
+       $(".librarian-names").click(function(event){
+         var thename = $(this).text();
+         $(".name-elements").empty();
+
+         $.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
+           // iterate in test[i].librarian to find where the name is present to get the test[i].debris that goes with it
+           var alldocs = [];
+           for (var i = 0; i < test.length; ++i) {
+             var item = test[i];
+             if(item.librarian.includes(thename)){
+               ledocument = item.debrispath;
+               lelibrarian = item.librarian;
+               //put ledocument into li and nest inside ul
+               var extension = ledocument.replace(/^.*\./, '');
+               console.log(ledocument);
+               if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
+                 $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'>Librarians: "+lelibrarian+"</li>");
+               }
+               else if (extension=="pdf") {
+                 $(".name-elements").append("<li><embed class='listed-pdf' src='files/"+ledocument+"'/>Librarians: "+lelibrarian+"</li>");
+               }
+               else if (extension=="epub") {
+                 $(".name-elements").append("<li>"+ledocument+lelibrarian+"</li>");
+               }
+               else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
+                 $(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio>Librarians: "+lelibrarian+"</li>");
+               }
+               else if ((extension=="mov") || (extension=="mp4")) {
+                 $(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video>Librarians: "+lelibrarian+"</li>");
+               }
+               else if ((extension=="odt") || (extension=="docx")) {
+               // something for odt and docx
+                 $(".name-elements").append("<li>"+ledocument+lelibrarian+"</li>");
+             };
+           };
+         };
+       });
+     });
+
+       $(".file-names").click(function(event){
+         var thefile = $(this).text();
+         $.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
+           var allpeeps = [];
+           var category = null;
+           for (var i = 0; i < test.length; ++i) {
+             var item = test[i];
+             if(item.debrisname.includes(thefile)){
+               ledocument = item.debrispath;
+               // allpeeps.push(ledocument);
+               var extension = ledocument.replace(/^.*\./, '');
+               console.log(ledocument);
+               if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
+                 $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'></li>");
+               }
+               else if (extension=="pdf") {
+                 $(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/></li>");
+               }
+               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;
+           };
+
+         });
+       });
+
+     });
+     </script>
+
+  </head>
+  <body>
+    <div class="nav-top">
+      <ul>
+        <li><a class="nav-button" style="text-align: left;" href="bought">BOUGHT</a></li>
+        <li><a class="nav-button" style="text-align: center;" href="stolen">STOLEN</a>
+        <li><a class="nav-button" style="text-align: right;" href="repurposed">REPURPOSED</a>
+    </ul>
+    </div>
+    <div class="main">
+      <div class="main-column-left">
+
+        <div id="listofpeople">
+        {% for librarian in librarians %}
+        <!-- <a href="#" class="librarian-names">{{ librarian }}</a> -->
+        <span class="librarian-names">{{ librarian }}</span>
+        {% endfor %}
+      </div>
+        <br>
+
+        <div class="file-names-container">
+        {% for file in files_without_folders %}
+          <span class="file-names">{{file}}</span><br>
+        {% endfor %}
+        </div>
+      </div>
+
+      <div class="main-column-right">
+        <a href="{{ url_for('static', filename='realjson.json') }}">test link</a>
+        <ul class="name-elements">
+          <p>hello world</p>
+        </ul>
+
+        {% block content %}
+        {% endblock content %}
+      </div>
+    </div>
+    <div class="nav-bottom">
+      <ul>
+        <li><a class="nav-button" style="text-align: left;" href="copied">COPIED</a></li>
+        <li><a class="nav-button" style="text-align: center;" href="found">FOUND</a></li>
+        <li><a class="nav-button" style="text-align: right;" href="gift">GIFT</a></li>
+      </ul>
+    </div>
+
+  </body>
+</html>