From aa2c9d06eab7a992a7aba8b331a0c36ecc161e97 Mon Sep 17 00:00:00 2001 From: Gavin Drabik Date: Wed, 28 Mar 2018 16:20:42 -0400 Subject: [PATCH 1/2] Updated results page. Added button --- app/static/search.js | 7 ++++++- app/static/style.css | 6 +----- app/templates/results.html | 13 +++++++++---- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/app/static/search.js b/app/static/search.js index 1ba6fb6..a92c797 100644 --- a/app/static/search.js +++ b/app/static/search.js @@ -26,11 +26,16 @@ function searchForDocs() { xhttp.send(); } +function openModal(eleID){ + //ajax request to get information for that ele ID + console.log(eleID); +} function addComment() { // When the user adds comment, make a POST request } + function goBackToTop() { // A "Back to Top" button will be displayed on the homepage. // When the user scrolls far down and clicks on the button, they should go to the top of the page. -} \ No newline at end of file +} diff --git a/app/static/style.css b/app/static/style.css index 62e4c6f..682c8c1 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -3,20 +3,16 @@ margin-right: 3%; font-size: 2em; } - #fieldOptions, #filterOptions{ margin: 20px 0; } - - .mdl-textfield__label.darker{ color: rgba(0, 0, 0, 0.5) !important; } .mdl-textfield__input.darker{ border-bottom: 1px solid rgba(0, 0, 0, 0.5) !important; } - .fillerText { text-align: center; font-size: 1.5em; -} \ No newline at end of file +} diff --git a/app/templates/results.html b/app/templates/results.html index 7b894d5..8476c7e 100644 --- a/app/templates/results.html +++ b/app/templates/results.html @@ -9,9 +9,15 @@

{{document.name}}

-
+
+ +
+ +
{% endfor %} From f36c1d23e86f58371bd0ca355ed6cf7df5c97690 Mon Sep 17 00:00:00 2001 From: Gavin Drabik Date: Sat, 31 Mar 2018 12:11:14 -0400 Subject: [PATCH 2/2] more radio button conversion. Ajax-> Jquery --- app/static/search.js | 69 +++++++++++++++++++++++++++++++++------- app/static/style.css | 6 ++++ app/templates/index.html | 38 ++++++++++++++++++---- 3 files changed, 95 insertions(+), 18 deletions(-) diff --git a/app/static/search.js b/app/static/search.js index a92c797..9783a76 100644 --- a/app/static/search.js +++ b/app/static/search.js @@ -7,35 +7,80 @@ function searchForDocs() { var searchText = document.getElementById("searchBar").value.split(/\s+/); // Form URL query - var url = 'http://127.0.0.1:5000/search?text='; + var qurl = 'http://127.0.0.1:5000/search?text='; for(var i in searchText) { - url += "+" + searchText[i]; + qurl += "+" + searchText[i]; } // Future URL example to take in filter and sort parameters // http://127.0.0.1:5000/search?text=test+something&filter=description&sort=duration + $.ajax( + { + url: qurl, + type:"GET", + async:true, + success:function(result){ + console.log("jquery is here"); + $('#results')[0].innerHTML = result; + } + } + ); // Make AJAX call to server - var xhttp = new XMLHttpRequest(); - xhttp.onreadystatechange = function () { - if(this.readyState == 4 && this.status == 200) { - document.getElementById('results').innerHTML = - this.response; - } - }; - xhttp.open("GET", url, true); - xhttp.send(); + // var xhttp = new XMLHttpRequest(); + // xhttp.onreadystatechange = function () { + // if(this.readyState == 4 && this.status == 200) { + // console.log("hereeeee"); + // $('#results')[0].innerHTML = + // this.response; + // } + // }; + // xhttp.open("GET", url, true); + // xhttp.send(); } function openModal(eleID){ - //ajax request to get information for that ele ID + //ajax GET request information for that ele ID + //modal inner html = this.response + //modal.show + var qurl = 'http://127.0.0.1:5000/search?id='+eleID; + $.ajax( + { + url: qurl, + type:"GET", + async:true, + success:function(result){ + //the result will be a fully made modal (dialog tag) + //get the results div and append the dialog tag + $('#results')[0].append(result); + //store dialog tag in a variable + dialogEle = $('dialog')[0]; + //dialogEle.show() + //THERE NEEDS TO BE A BUTTON IN THE DIALOAG that will call closeModal() function + console.log("jquery is here"); + } + } + ); + console.log(eleID); } + +function closeModal(){ + //get the dialog tag from the DOM + //this could be done inline....but thats kinda gross + dialogEle = $('dialog')[0]; + //dialog.close() + +} function addComment() { // When the user adds comment, make a POST request + var url = 'http://127.0.0.1:5000/comment'; + } function goBackToTop() { // A "Back to Top" button will be displayed on the homepage. // When the user scrolls far down and clicks on the button, they should go to the top of the page. + $(window).scrollTop(0); + console.log("back to top"); } diff --git a/app/static/style.css b/app/static/style.css index 682c8c1..34ea606 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -16,3 +16,9 @@ text-align: center; font-size: 1.5em; } +.back-to-top{ + position: fixed; /* Fixed/sticky position */ + bottom: 20px; /* Place the button at the bottom of the page */ + right: 30px; /* Place the button 30px from the right */ + z-index: 99; /* Make sure it does not overlap */ +} diff --git a/app/templates/index.html b/app/templates/index.html index 626c34e..66a557e 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -58,7 +58,7 @@ @@ -67,7 +67,7 @@ @@ -76,15 +76,41 @@

Begin your search above to see results.

+