From aef7fd913692c70ab06b522f985c095622fb54e3 Mon Sep 17 00:00:00 2001
From: Cristina Cochior <clcochior@gmail.com>
Date: Mon, 21 Sep 2020 15:49:00 +0200
Subject: [PATCH] merged layout.html

---
 templates/layout.html | 283 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 231 insertions(+), 52 deletions(-)

diff --git a/templates/layout.html b/templates/layout.html
index af330eb..35f7b2e 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -9,53 +9,147 @@
 
     <!--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();
+    $(document).ready(function() {
 
-         $.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>");
-             };
-           };
-         };
-       });
-     });
+///////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) {
@@ -64,12 +158,26 @@
                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+"'></li>");
+                 $(".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+"'/></li>");
+                 $(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/>"+checkboite+"</li>");
                }
                else if (extension=="epub") {
                  $(".name-elements").append("<li>"+ledocument+"</li>");
@@ -91,33 +199,104 @@
          });
        });
 
+///////////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>
+        <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><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>
+          <span class="librarian-names" id={{librarian}}>{{librarian}}</span>
         {% endfor %}
       </div>
-        <br>
 
+<!-- submit data -->
+
+      <button id="listoffiles" style="margin-top: 11em" >Print!</button>
+
+
+        <br>
         <div class="file-names-container">
-        {% for file in files_without_folders %}
-          <span class="file-names">{{file}}</span><br>
-        {% endfor %}
+          <!--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>
 
@@ -133,9 +312,9 @@
     </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>
+        <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>