Skip to content

Commit

Permalink
Merge pull request #62 from adipai/ui-branch
Browse files Browse the repository at this point in the history 
upgrades to UI, fixes to issues
  • Loading branch information
@samarthshetty09
samarthshetty09 authored Oct 19, 2023
2 parents accb21e + 551073a commit eb492e8
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 58 deletions.
46 changes: 25 additions & 21 deletions src/recommenderapp/static/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ $(document).ready(function () {
q: request.term,
},
success: function (data) {
//alert(data);
// console.log(data);
response(data);
},
error: function (jqXHR, textStatus, errorThrown) {
Expand Down Expand Up @@ -71,34 +69,45 @@ $(document).ready(function () {
success: function (response) {
var ulList = $("#predictedMovies");
var i = 0;
response["recommendations"].forEach((element) => {
var recommendations = response["recommendations"];
var imdbIds = response["imdb_id"]
for (var i = 0; i < recommendations.length; i++) {
var element = recommendations[i];
var imdbID = imdbIds[i]
var diventry = $("<div/>");
var fieldset = $("<fieldset/>", { id: i }).css("border", "0");
var link = $("<a/>").text("IMDb🔗").css({"text-decoration": "none"}).attr("href", "https://www.imdb.com/title/" + imdbID);
var li = $("<li/>").text(element);
var radios = $(`
<table class='table'>
<tr>
<table class='table predictTable'>
<tr>
<td class='radio-inline'>
<label><input type='radio' name="${i}" value='1'>Dislike</label>
<section id="pattern1">
<label style="--icon:'😍"><input type="radio" name="${i}" value='1' data-toggle="tooltip" data-placement="top" title="LIKE"></label><br />
</section>
</td>
<td class='radio-inline'>
<label><input type='radio' name="${i}" value='2'>Yet to watch</label>
<section id="pattern1">
<label style="--icon:'😐'"><input type="radio" name="${i}" value='2' data-toggle="tooltip" data-placement="top" title="YET TO WATCH"></label><br />
</section>
</td>
<td class='radio-inline'>
<label><input type='radio' name="${i}" value='3'>Like</label>
<section id="pattern1">
<label style="--icon:'😤'"><input type="radio" name="${i}" value='3' data-toggle="tooltip" data-placement="top" title="DISLIKE"></label><br />
</section>
</td>
</tr>
</tr>
</table>
`);
`);

diventry.append(li);
diventry.append(link);
diventry.append(radios);
fieldset.append(diventry);
ulList.append(fieldset);
i += 1;
});
}

$("#loader").attr("class", "d-none");
console.log("->", response["recommendations"]);
},
error: function (error) {
console.log("ERROR ->" + error);
Expand Down Expand Up @@ -175,10 +184,8 @@ $(document).ready(function () {
return; // Exit the function without making the AJAX call
}

console.log(data);
FeedbackData = data;
localStorage.setItem("fbData", JSON.stringify(data));
console.log(localStorage.getItem("fbData"));
$.ajax({
type: "POST",
url: "/feedback",
Expand All @@ -189,7 +196,6 @@ $(document).ready(function () {
data: JSON.stringify(data),
success: function (response) {
window.location.href = "/success";
console.log("Success");
},
error: function (error) {
console.log("ERROR ->" + error);
Expand All @@ -199,7 +205,7 @@ $(document).ready(function () {

$("#notifyButton").click(function () {
var data = JSON.parse(localStorage.getItem("fbData"));

$("#loaderSuccess").attr("class", "d-flex justify-content-center");
if (!data) {
alert("No feedback data found. Please provide feedback.");
return;
Expand All @@ -220,16 +226,14 @@ $(document).ready(function () {
cache: false,
data: JSON.stringify(data),
success: function (response) {
// localStorage.removeItem("fbData");
$("#loaderSuccess").attr("class", "d-none");
$("#emailSentSuccess").show();
// Hide the success message after 5 seconds (5000 milliseconds)
setTimeout(function () {
$("#emailSentSuccess").fadeOut("slow");
}, 2000);
console.log("Email sent successfully!")
console.log(response);
},
error: function (error) {
$("#loaderSuccess").attr("class", "d-none");
console.log("ERROR ->" + error);
localStorage.removeItem("fbData");
},
Expand Down
131 changes: 124 additions & 7 deletions src/recommenderapp/static/stylesheet.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

.landing-page {
background-image: url("image.jpg");
background-size: cover;
Expand All @@ -16,16 +15,106 @@
height: 4.5rem;
margin: auto;
display: flex;
align-items: center;
align-items: center;
flex-direction: column;
}

body {
background-image: url("image.jpg");
background-image: url("image.jpg") !important;
background-size: cover;
color: azure !important;
}


:root {
--borderSize: 0.5vw;
--baseSize: 5rem;
--icon: "🙂";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
margin: 25px 0;
}
section {
position: relative;
display: inline-block;
text-align: left;
vertical-align: top;
}
input,
input::before,
#pattern1 label {
position: relative;
display: inline-block;
margin-bottom: 2vw;
font-size: 1.5vw;
line-height: var(--baseSize);
cursor: pointer;
}
#pattern1 input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: var(--baseSize);
height: var(--baseSize);
font-size: var(--baseSize);
line-height: var(--baseSize);
vertical-align: top;
margin-right: 2vw;
background-color: #fff;
color: coral;
border: var(--borderSize) solid gray;
border-radius: 50%;
transition: border-color 0.3s;
}

.predictTable > tbody,
td,
tfoot,
th,
thead,
tr {
border-style: none !important;
}

#predictedMovies {
font-size: 18px;
}

#pattern1 input::before {
font-family: "Noto Emoji", sans-serif;
display: inline-block;
text-align: center;
position: absolute;
top: calc(-0.7 * var(--borderSize));
left: calc(-0.9 * var(--baseSize) * 0.2 - var(--borderSize));
width: var(--baseSize);
height: var(--baseSize);
font-size: var(--baseSize);
line-height: var(--baseSize);
content: var(--icon);
opacity: 0;
transition: opacity 0.3s;
}

#pattern1 input:checked {
border-color: transparent;
}

#pattern1 input:checked::before {
opacity: 1;
}

#pattern1 label:has(input:checked)::before {
opacity: 1;
font-size: min(80vh, 80vw);
}

.topNavBar {
width: 100%;
position: fixed;
Expand Down Expand Up @@ -106,13 +195,13 @@ body {
.c-formContainer,
.c-form,
.c-form__toggle {
width: 10rem;
height: 3rem;
width: 30rem;
height: 4rem;
}

.c-formContainer {
position: relative;
font-weight: 700;
font-weight: 900;
}

.c-form,
Expand Down Expand Up @@ -144,7 +233,7 @@ body {
justify-content: center;

&::before {
font-size: 1rem;
font-size: 1.5rem;
content: attr(data-title);
}
}
Expand All @@ -168,6 +257,7 @@ body {
}

.c-form__input {
cursor: auto;
color: your-pink;
height: 100%;
width: 100%;
Expand Down Expand Up @@ -211,3 +301,30 @@ body {
width: 5em;
background-color: #d00c18;
}

.feedbackDiv {
margin-bottom: 3rem;
}

#dataCollected {
.hLast {
font-size: 4rem;
text-align-last: center
}
.attemptBtn {
display: block;
margin: auto;
font-size: large;
padding: 13px;
background-color: white;
color: #d00c18;
font-weight: 600;
border: none;
border-radius: 25px;
}
}

.notifyDivs {
display: flex;
justify-content: center;
}
2 changes: 1 addition & 1 deletion src/recommenderapp/templates/search_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ <h2>Recommended Movies:</h2>
</form>
</div>
</div>
<div class="row">
<div class="row feedbackDiv">
<div class="col-md-12">
<!-- Feedback button (modal) -->
<input type="button" class="btn btn-primary" name="feedback" data-toggle="modal" id="feedback" value="Give Feedback" data-target="#exampleModalCenter">
Expand Down
70 changes: 41 additions & 29 deletions src/recommenderapp/templates/success.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,41 +29,53 @@
</head>

<body>
<div id="dataCollected">
<div class="d-none" id="loaderSuccess">
<div class="spinner-border" role="status">
<span class="sr-only"></span>
</div>
</div>
<h1 class="hLast">Have your watchlist sent to your email!</h1>
<br/>
<div class="notifyDivs">
<input class="c-checkbox" type="checkbox" id="checkbox" />
<div class="c-formContainer" id="formContainer">
<form class="c-form" action="">
<input
class="c-form__input"
placeholder="E-mail"
type="text"
id="emailField"
required
/>
<label class="c-form__buttonLabel" for="checkbox">
<button class="c-form__button" type="button" id="notifyButton">
Send
</button>
</label>
<label
class="c-form__toggle"
for="checkbox"
data-title="Notify me"
></label>
</form>
</div>
</div>
<br /><br />
<div class="d-flex justify-content-center">
<h1>
Or
</h1>
</div>
<br /><br />
<div id="dataCollected" style="width: 600px; margin: auto">
<h1>Thanks!! Your response was stored.</h1>
<input
<input
type="button"
id="refreshPage"
class="btn btn-danger"
class="btn btn-danger attemptBtn"
name="refreshPage"
value="Take another attempt"
/>
</div>
<br /><br />
<div>
<input class="c-checkbox" type="checkbox" id="checkbox" />
<div class="c-formContainer" id="formContainer">
<form class="c-form" action="">
<input
class="c-form__input"
placeholder="E-mail"
type="text"
id="emailField"
required
/>
<label class="c-form__buttonLabel" for="checkbox">
<button class="c-form__button" type="button" id="notifyButton">
Send
</button>
</label>
<label
class="c-form__toggle"
for="checkbox"
data-title="Notify me"
></label>
</form>
</div>

</div>

<!-- Add the "Email sent successfully!" message here -->
Expand Down

0 comments on commit eb492e8

Please sign in to comment.