Skip to content

Radio buttons #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dervent wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Radio buttons #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa2c9d0
Updated results page. Added button
gavdra Mar 28, 2018
f36c1d2
more radio button conversion. Ajax-> Jquery
gavdra Mar 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 62 additions & 12 deletions app/static/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +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 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");
}
12 changes: 7 additions & 5 deletions app/static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,22 @@
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;
}
}
.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 */
}
38 changes: 32 additions & 6 deletions app/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
<span class="mdl-list__item-secondary-action">
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" for = "tag_Radio">
<input type = "radio" id = "tag_Radio" name = "filters"
class = "mdl-radio__button" checked>
class = "mdl-radio__button">
</label>
</span>
</li>
Expand All @@ -67,7 +67,7 @@
<span class="mdl-list__item-secondary-action">
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" for = "desc_Radio">
<input type = "radio" id = "desc_Radio" name = "filters"
class = "mdl-radio__button" checked>
class = "mdl-radio__button">
</label>
</span>
</li>
Expand All @@ -76,15 +76,41 @@

<!-- Dropdown for the filter button-->
<ul class="mdl-menu mdl-js-menu" for="sortOptions">
<!-- <li class="mdl-list__item" disabled>Sort By:</li>-->
<li class="mdl-menu__item">Most Viewed</li>
<li class="mdl-menu__item">Most Recent</li>
<li class="mdl-menu__item">Most Commented</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">Most Viewed</span>
<span class="mdl-list__item-secondary-action">
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" for = "mostViewed_Radio">
<input type = "radio" id = "mostViewed_Radio" name = "sorts"
class = "mdl-radio__button" checked>
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">Most Recent</span>
<span class="mdl-list__item-secondary-action">
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" for = "mostRecent_Radio">
<input type = "radio" id = "mostRecent_Radio" name = "sorts"
class = "mdl-radio__button">
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">Most Commented</span>
<span class="mdl-list__item-secondary-action">
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" for = "mostCommented_Radio">
<input type = "radio" id = "mostCommented_Radio" name = "sorts"
class = "mdl-radio__button">
</label>
</span>
</li>
</ul>

<div id="results">
<!-- AJAX call returns all matching documents to this div. See Jinja2 template for format -->
<p class="fillerText">Begin your search above to see results.</p>
<button onclick="goBackToTop()" class="mdl-button mdl-js-button mdl-button--raised back-to-top">
Back To Top
</button>
</div>
</main>
</div>
Expand Down
13 changes: 9 additions & 4 deletions app/templates/results.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,15 @@
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">{{document.name}}</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-card__menu">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" onclick="openModal("{{document._id}}")">
<i class="material-icons" style="font-size: 1.5em;">add_circle</i>
</button>
</div>
<!-- <div class="mdl-card__supporting-text">
<p>{{document.description}}</p>
<strong>Tags</strong>
</div> -->
<!-- <strong>Tags</strong>
{% for tag in document.tags%}
<span class="mdl-chip">
<span class="mdl-chip__text">{{ tag }}</span>
Expand All @@ -23,8 +29,7 @@ <h2 class="mdl-card__title-text">{{document.name}}</h2>
{% for comment in document.comments %}
<p>{{ comment }}</p>
{% endfor %}
{% endif %}
</div>
{% endif %} -->
</div>
</div>
{% endfor %}
Expand Down