Skip to content

Commit

Permalink
loading spinner working
Browse files Browse the repository at this point in the history
  • Loading branch information
@howardvickers
howardvickers committed Jul 26, 2018
1 parent 7b1585d commit c0a249a
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 46 deletions.
49 changes: 46 additions & 3 deletions src/static/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,42 @@ transition: all 0.3s;
transform: scale(.8);
}

#divLoading
{
display : none;
}
#ldg
{
display : block;
position : fixed;
z-index: 100;
background-image : url('http://loadinggif.com/images/image-selection/3.gif');
background-color:#666;
opacity : 0.4;
background-repeat : no-repeat;
background-position : center;
left : 0;
bottom : 0;
right : 0;
top : 0;
}
#loadinggif.show
{
left : 50%;
top : 50%;
position : absolute;
z-index : 101;
width : 32px;
height : 32px;
margin-left : -16px;
margin-top : -16px;
}
div.content {
width : 1000px;
height : 1000px;
}


.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
Expand Down Expand Up @@ -61,11 +97,18 @@ transform: scale(.8);
font-size: medium;
}

.jumbotron .container
{

.jumbotron .container {
}

.page-header-text {
color: white;
/* position: relative; */
/* vertical-align: bottom; */
position: absolute;
bottom: 300px;
/* padding-bottom: 10px; */

}
.card {
padding-left: 0px;
padding-right: 0px;
Expand Down
66 changes: 23 additions & 43 deletions src/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,15 @@
x.innerHTML = " ";
}
}


function startLoading(){
$('#ldg').show()
}
function stopLoading(){
$('#ldg').hide()
}

function clearResumePred() {
var x = document.getElementById("resume_prediction");
if (x.innerHTML === " ") {
Expand All @@ -44,6 +53,7 @@
data: data,
url : '/demo_resumes',
success: function(d){
stopLoading();
$("#resume_text").html(d.resume_text);
$("#resume_prediction").html(d.resume_prediction);
console.log('d.resume_text: ', d.resume_text);
Expand All @@ -64,55 +74,21 @@
processData: false,
contentType: false,
success: function(d){
ajaxStop();
$("#resume_text").html(d.resume_text);
$("#resume_prediction").html(d.resume_prediction);
}
});
});
});
// $(document).ready(function(){
// $("#sel_res_btn").click(function(e){
// e.preventDefault();
// var chosen_resume = $( "#sel_res_id" ).serializeArray();
// console.log('str:', chosen_resume );
// $.ajax({
// type : 'POST',
// data: chosen_resume,
// url : '/demo_resumes',
// success: function(d){
// $("#resume_text").html(d.resume_text);
// console.log('d.resume_text: ', d.resume_text);
// console.log('demo started');
// }
// })
// });
// });
// $(document).ready(function(){
//
// $("#res_pred_btn").click(function(e){
// console.log("res_pred_btn clicked!");
// e.preventDefault();
// $.ajax({
// type : 'GET',
// url : '/predict',
// success: function(data){
// console.log('the data:', data)
// $("#resume_prediction").html(data.resume_prediction);
// }
// })
// });
// });
// $(function () {
// $('[data-toggle="popover"]').popover()
// })
</script>
</head>
{% endblock %}
{% block content %}
<body>
<body onload="stopLoading()">
<div class="jumbotron backgroundIm">
<div>
</div>
<div class=" ">
</div>
</div>
<div class="container">
<h1 class="display-3 text-center">Get matched with the perfect job!</h1>
Expand Down Expand Up @@ -149,31 +125,31 @@ <h5 class="card-text">The upload function has been disabled. Please use the pre
<div class="row">
<div class="col-md-3">
<div class="card">
<img onclick="clearResumeText(); clearResumePred(); chooseDemoResume({'chosen_demo_resume': 'web'})" id="web_dev_img" class="card-img-top" src="../static/img/web_developer.jpg" alt="Card image cap">
<img onclick="clearResumeText(); clearResumePred(); startLoading(); chooseDemoResume({'chosen_demo_resume': 'web'})" id="web_dev_img" class="card-img-top" src="../static/img/web_developer.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Web Developer</h5>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img onclick="clearResumeText(); clearResumePred(); chooseDemoResume({'chosen_demo_resume': 'dta'})" id="data_scientist_img" class="card-img-top" src="../static/img/data_scientist.jpg" alt="Card image cap">
<img onclick="clearResumeText(); clearResumePred(); startLoading(); chooseDemoResume({'chosen_demo_resume': 'dta'})" id="data_scientist_img" class="card-img-top" src="../static/img/data_scientist.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Data Scientist</h5>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img onclick="clearResumeText(); clearResumePred(); chooseDemoResume({'chosen_demo_resume': 'sls'})" id="sales_manager_img" class="card-img-top" src="../static/img/sales_manager.jpg" alt="Card image cap">
<img onclick="clearResumeText(); clearResumePred(); startLoading(); chooseDemoResume({'chosen_demo_resume': 'sls'})" id="sales_manager_img" class="card-img-top" src="../static/img/sales_manager.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Sales Manager</h5>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" >
<img onclick="clearResumeText(); clearResumePred(); chooseDemoResume({'chosen_demo_resume': 'act'})" id="accountant_img" class="card-img-top" src="../static/img/accountant.jpg" alt="Card image cap">
<img onclick="clearResumeText(); clearResumePred(); startLoading(); chooseDemoResume({'chosen_demo_resume': 'act'})" id="accountant_img" class="card-img-top" src="../static/img/accountant.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Accountant</h5>
</div>
Expand All @@ -187,7 +163,10 @@ <h5 class="card-title text-center">Accountant</h5>
<div class="col-12">
<h3 class="card-title">How it Works</h3>
<h5 class="card-text">Clicking on one of the above photos uploads a sample resume as a PDF, then passes it through optical character recognition and displays the text below. </h5>
<h5 class="card-text">The text is then passed into the machine learning algorithm, which classifies the resume according to its content and shows the classification in the below box.</h5>
</br>
<h5 class="card-text">The text is then passed into the machine learning algorithm, which classifies the resume according to its content and shows the classification in the below box.</h5>
</div>
<div id="ldg">
</div>
</div>
</br>
Expand All @@ -197,6 +176,7 @@ <h5 class="card-text">The text is then passed into the machine learning algorith
<div class="card">
<h5 class="card-header">Resume Text: </h5>
<div id="resume_text" class="card-body">

</div>
</div>
</br>
Expand Down

0 comments on commit c0a249a

Please sign in to comment.