From e81f71ccf97d8344c5a462e98c72161b6dcba5e8 Mon Sep 17 00:00:00 2001
From: huygensCortex <51647351+huygensCortex@users.noreply.github.com>
Date: Sat, 14 Oct 2023 21:31:32 -0400
Subject: [PATCH 1/2] integrate with notify me api

---
 Code/recommenderapp/app.py                    |  22 +-
 Code/recommenderapp/static/script.js          | 188 +++++++++++++++++
 Code/recommenderapp/static/stylesheet.css     |  12 +-
 .../templates/landing_page.html               | 195 +-----------------
 Code/recommenderapp/templates/success.html    |  32 ++-
 Code/recommenderapp/utils.py                  |   1 +
 6 files changed, 257 insertions(+), 193 deletions(-)
 create mode 100644 Code/recommenderapp/static/script.js

diff --git a/Code/recommenderapp/app.py b/Code/recommenderapp/app.py
index dc94f4631..42f2dcf00 100644
--- a/Code/recommenderapp/app.py
+++ b/Code/recommenderapp/app.py
@@ -2,16 +2,16 @@
 Module for routing all calls from the frontend
 """
 
-import json
-import sys
-from search import Search
-from flask import Flask, jsonify, render_template, request
-from flask_cors import CORS
 from utils import send_email_to_user, beautify_feedback_data
-
+from flask_cors import CORS
+from flask import Flask, jsonify, render_template, request
+from search import Search
+import sys
+import json
 sys.path.append("../../")
 from Code.prediction_scripts.item_based import recommend_for_new_user
 
+
 app = Flask(__name__)
 app.secret_key = "secret key"
 
@@ -63,7 +63,15 @@ def feedback():
     Handles user feedback submission and mails the results.
     """
     data = json.loads(request.data)
-    user_email = "adipai16@gmail.com"
+    return data
+
+@app.route("/sendMail", methods=["POST"])
+def sendMail():
+    """
+    Handles user feedback submission and mails the results.
+    """
+    data = json.loads(request.data)
+    user_email = data['email']
     send_email_to_user(user_email, beautify_feedback_data(data))
     return data
 
diff --git a/Code/recommenderapp/static/script.js b/Code/recommenderapp/static/script.js
new file mode 100644
index 000000000..c20e5c9d4
--- /dev/null
+++ b/Code/recommenderapp/static/script.js
@@ -0,0 +1,188 @@
+$(document).ready(function () {
+  $(function () {
+    $("#searchBox").autocomplete({
+      source: function (request, response) {
+        $.ajax({
+          type: "POST",
+          url: "http://localhost:5000/search",
+          dataType: "json",
+          cache: false,
+          data: {
+            q: request.term,
+          },
+          success: function (data) {
+            //alert(data);
+            // console.log(data);
+            response(data);
+          },
+          error: function (jqXHR, textStatus, errorThrown) {
+            console.log(textStatus + " " + errorThrown);
+          },
+        });
+      },
+      select: function (event, ui) {
+        var ulList = $("#selectedMovies");
+        // Check if the value already exists in the list
+        if (ulList.find('li:contains("' + ui.item.value + '")').length > 0) {
+          $("#searchBox").val("");
+          return false;
+        }
+
+        var li = $("<li class='list-group-item'/>")
+          .text(ui.item.value)
+          .appendTo(ulList);
+        $("#searchBox").val("");
+        return false;
+      },
+
+      // changed the min-length for searching movies from 2 to 1
+      minLength: 1,
+    });
+  });
+
+  $("#predict").click(function () {
+    var movie_list = [];
+
+    $("#selectedMovies li").each(function () {
+      movie_list.push($(this).text());
+    });
+
+    var movies = { movie_list: movie_list };
+
+    // Clear the existing recommendations
+    $("#predictedMovies").empty();
+
+    // if movies list empty then throw an error box saying select atleast 1 movie!!
+    if (movie_list.length == 0) {
+      alert("Select atleast 1 movie!!");
+    }
+
+    $.ajax({
+      type: "POST",
+      url: "/predict",
+      dataType: "json",
+      contentType: "application/json;charset=UTF-8",
+      traditional: "true",
+      cache: false,
+      data: JSON.stringify(movies),
+      success: function (response) {
+        var ulList = $("#predictedMovies");
+        var i = 0;
+        response["recommendations"].forEach((element) => {
+          var diventry = $("<div/>");
+          var fieldset = $("<fieldset/>", { id: i }).css("border", "0");
+          var li = $("<li/>").text(element);
+          var radios = $(`
+                    <table class='table'>
+                        <tr>
+                        <td class='radio-inline'>
+                            <label><input type='radio' name="${i}" value='1'>Dislike</label>
+                        </td>
+                        <td class='radio-inline'>
+                            <label><input type='radio' name="${i}" value='2'>Yet to watch</label>
+                        </td>
+                        <td class='radio-inline'>
+                            <label><input type='radio' name="${i}" value='3'>Like</label>
+                        </td>
+                        </tr>
+                    </table>
+                    `);
+
+          diventry.append(li);
+          diventry.append(radios);
+          fieldset.append(diventry);
+          ulList.append(fieldset);
+          i += 1;
+        });
+
+        // var li = $('<li/>').text()
+        console.log("->", response["recommendations"]);
+      },
+      error: function (error) {
+        console.log("ERROR ->" + error);
+      },
+    });
+  });
+
+  var FeedbackData;
+
+  $("#feedback").click(function () {
+    notifyMeButton = document.getElementById("checkbox");
+    notifyMeButton.disabled = false;
+    var myForm = $("fieldset");
+    var data = {};
+    var labels = {
+      1: "Dislike",
+      2: "Yet to watch",
+      3: "Like",
+    };
+    var error = false; // Flag to track errors
+
+    for (var i = 0; i < myForm.length; i++) {
+      var input = $("#" + i)
+        .find("div")
+        .find("input:checked")[0];
+      var movieName = $("#" + i)
+        .find("div")
+        .find("li")[0].innerText;
+
+      if (!input) {
+        // If no selection is made, set error flag to true and break the loop
+        error = true;
+        break;
+      }
+
+      data[movieName] = labels[input.value];
+    }
+
+    if (error) {
+      // Display an error message if there are missing selections
+      alert("Please select a feedback for all movies.");
+      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",
+      dataType: "json",
+      contentType: "application/json;charset=UTF-8",
+      traditional: "true",
+      cache: false,
+      data: JSON.stringify(data),
+      success: function (response) {
+        window.location.href = "/success";
+        console.log("Success");
+      },
+      error: function (error) {
+        console.log("ERROR ->" + error);
+      },
+    });
+  });
+
+  $("#notifyButton").click(function () {
+    data = JSON.parse(localStorage.getItem("fbData"));
+    var emailString = $("#emailField").val();
+    data.email = emailString;
+    $.ajax({
+      type: "POST",
+      url: "/sendMail",
+      dataType: "json",
+      contentType: "application/json;charset=UTF-8",
+      traditional: "true",
+      cache: false,
+      data: JSON.stringify(data),
+      success: function (response) {
+        localStorage.removeItem("fbData");
+        console.log(response);
+      },
+      error: function (error) {
+        console.log("ERROR ->" + error);
+        localStorage.removeItem("fbData");
+      },
+    });
+  });
+});
diff --git a/Code/recommenderapp/static/stylesheet.css b/Code/recommenderapp/static/stylesheet.css
index 9e3fa5ff8..37858f2be 100644
--- a/Code/recommenderapp/static/stylesheet.css
+++ b/Code/recommenderapp/static/stylesheet.css
@@ -6,6 +6,17 @@ body {
 
 .topNavBar {
   width: 100%;
+  position: fixed;
+  top: -1.2rem;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+}
+
+.searchDiv {
+  p {
+    width: 100%;
+  }
 }
 
 .heading1 {
@@ -163,7 +174,6 @@ body {
   width: auto;
 
   &::before {
-    content: "";
     position: absolute;
     width: 100%;
     height: 100%;
diff --git a/Code/recommenderapp/templates/landing_page.html b/Code/recommenderapp/templates/landing_page.html
index a68961f9f..cf7b884b3 100644
--- a/Code/recommenderapp/templates/landing_page.html
+++ b/Code/recommenderapp/templates/landing_page.html
@@ -7,7 +7,7 @@
       href="{{ url_for('static', filename='stylesheet.css') }}"
     />
     <title>PopcornPicks🍿</title>
-
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link
@@ -55,36 +55,13 @@
         <h2>🎬Pick a Movie!🎬</h2>
       </div>
       <div class="d-flex">
-        <p style="width: 560px; margin: auto">
-          <label>Search Here</label>&nbsp;&nbsp;<input
-            type="text"
-            name="search"
-            id="searchBox"
-          />
-        </p>
-      </div>
-    </div>
-
-    <div>
-      <input class="c-checkbox" type="checkbox" id="checkbox" />
-      <div class="c-formContainer">
-        <form class="c-form" action="">
-          <input
-            class="c-form__input"
-            placeholder="E-mail"
-            type="email"
-            pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$"
-            required
-          />
-          <label class="c-form__buttonLabel" for="checkbox">
-            <button class="c-form__button" type="button">Send</button>
-          </label>
-          <label
-            class="c-form__toggle"
-            for="checkbox"
-            data-title="Notify me"
-          ></label>
-        </form>
+        <input
+          class="form-control mr-sm-2"
+          type="search"
+          placeholder="Search for a Movie"
+          aria-label="Search"
+          id="searchBox"
+        />
       </div>
     </div>
 
@@ -100,7 +77,7 @@ <h2>Please select movies for training</h2>
     </div> -->
     <div style="width: 600px; margin: auto">
       <h2>Selected movie :</h2>
-      <ul id="selectedMovies"></ul>
+      <ul class="list-group" id="selectedMovies"></ul>
     </div>
     <div style="width: 600px; margin: auto">
       <input
@@ -114,7 +91,7 @@ <h2>Selected movie :</h2>
     <div style="width: 600px; margin: auto">
       <h2>Predicted Movies</h2>
       <form class="recos" id="recos">
-        <ul id="predictedMovies"></ul>
+        <ul class="list-group" id="predictedMovies"></ul>
       </form>
     </div>
     <div style="width: 600px; margin: auto">
@@ -196,155 +173,5 @@ <h1>Thanks!! Your response was stored.</h1>
     src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
     crossorigin="anonymous"
   ></script>
-  <script>
-    $(document).ready(function () {
-      $(function () {
-        $("#searchBox").autocomplete({
-          source: function (request, response) {
-            $.ajax({
-              type: "POST",
-              url: "http://localhost:5000/search",
-              dataType: "json",
-              cache: false,
-              data: {
-                q: request.term,
-              },
-              success: function (data) {
-                //alert(data);
-                // console.log(data);
-                response(data);
-              },
-              error: function (jqXHR, textStatus, errorThrown) {
-                console.log(textStatus + " " + errorThrown);
-              },
-            });
-          },
-          select: function (event, ui) {
-            var ulList = $("#selectedMovies");
-            // Check if the value already exists in the list
-            if (
-              ulList.find('li:contains("' + ui.item.value + '")').length > 0
-            ) {
-              $("#searchBox").val("");
-              return false;
-            }
-
-            var li = $("<li/>").text(ui.item.value).appendTo(ulList);
-            $("#searchBox").val("");
-            return false;
-          },
-
-          // changed the min-length for searching movies from 2 to 1
-          minLength: 1,
-        });
-      });
-
-      $("#predict").click(function () {
-        var movie_list = [];
-
-        $("#selectedMovies li").each(function () {
-          movie_list.push($(this).text());
-        });
-
-        var movies = { movie_list: movie_list };
-
-        // Clear the existing recommendations
-        $("#predictedMovies").empty();
-        
-        // if movies list empty then throw an error box saying select atleast 1 movie!!
-        if(movie_list.length == 0){
-            alert("Select atleast 1 movie!!")
-        }
-
-        $.ajax({
-          type: "POST",
-          url: "/predict",
-          dataType: "json",
-          contentType: "application/json;charset=UTF-8",
-          traditional: "true",
-          cache: false,
-          data: JSON.stringify(movies),
-          success: function (response) {
-            var ulList = $("#predictedMovies");
-            var i = 0;
-            response["recommendations"].forEach((element) => {
-              var diventry = $("<div/>");
-              var fieldset = $("<fieldset/>", { id: i }).css("border", "0");
-              var li = $("<li/>").text(element);
-              var radios = $(
-                "<label class='radio-inline'><input type='radio' name=" +
-                  i +
-                  " value=1>Dislike</label> \
-                        <label class='radio-inline'><input type='radio' name=" +
-                  i +
-                  " value=2>Yet to watch</label> \
-                        <label class='radio-inline'><input type='radio' name=" +
-                  i +
-                  " value=3>Like</label><br/><br/>"
-              );
-              diventry.append(li);
-              diventry.append(radios);
-              fieldset.append(diventry);
-              ulList.append(fieldset);
-              i += 1;
-            });
-
-            // var li = $('<li/>').text()
-            console.log("->", response["recommendations"]);
-          },
-          error: function (error) {
-            console.log("ERROR ->" + error);
-          },
-        });
-      });
-
-      $("#feedback").click(function () {
-        var myForm = $("fieldset");
-        var data = {};
-        var labels = {
-          1: "Dislike",
-          2: "Yet to watch",
-          3: "Like",
-        };
-        var error = false;  // Flag to track errors
-
-        for (var i = 0; i < myForm.length; i++) {
-        var input = $("#" + i).find("div").find("input:checked")[0];
-        var movieName = $("#" + i).find("div").find("li")[0].innerText;
-
-        if (!input) {
-            // If no selection is made, set error flag to true and break the loop
-            error = true;
-            break;
-        }
-
-        data[movieName] = labels[input.value];
-        }
-
-        if (error) {
-        // Display an error message if there are missing selections
-        alert("Please select a feedback for all movies.");
-        return;  // Exit the function without making the AJAX call
-        }
-        
-        console.log(data);
-
-        $.ajax({
-          type: "POST",
-          url: "/feedback",
-          dataType: "json",
-          contentType: "application/json;charset=UTF-8",
-          traditional: "true",
-          cache: false,
-          data: JSON.stringify(data),
-          success: function (response) {
-            window.location.href = "/success";
-          },
-          error: function (error) {
-            console.log("ERROR ->" + error);
-          },
-        });
-      });
-    });
-  </script>
+  <script src="{{ url_for('static', filename='script.js') }}"></script>
 </html>
diff --git a/Code/recommenderapp/templates/success.html b/Code/recommenderapp/templates/success.html
index 9e1b154ab..94c48ad91 100644
--- a/Code/recommenderapp/templates/success.html
+++ b/Code/recommenderapp/templates/success.html
@@ -2,7 +2,12 @@
 <html>
   <head>
     <title>What movies do you like?</title>
-
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static', filename='stylesheet.css') }}"
+    />
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link
@@ -36,6 +41,30 @@ <h1>Thanks!! Your response was stored.</h1>
       />
     </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>
   </body>
   <script
     src="https://code.jquery.com/jquery-3.5.1.min.js"
@@ -45,6 +74,7 @@ <h1>Thanks!! Your response was stored.</h1>
     src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
     crossorigin="anonymous"
   ></script>
+  <script src="{{ url_for('static', filename='script.js') }}"></script>
   <script>
     $("#refreshPage").click(function () {
       window.location.href = "/";
diff --git a/Code/recommenderapp/utils.py b/Code/recommenderapp/utils.py
index 7858f4244..a4257d399 100644
--- a/Code/recommenderapp/utils.py
+++ b/Code/recommenderapp/utils.py
@@ -26,6 +26,7 @@ def beautify_feedback_data(data):
         elif status == 'Dislike':
             dislike.append(movie)
 
+
     # Create a category-dictionary of liked, disliked and yet to watch movies
     categorized_data_dict = {"Liked": like,
                              "Disliked": dislike, "Yet to Watch": yet_to_watch}

From bff8e592da16b1017bd1f68f72095ef534c41fd7 Mon Sep 17 00:00:00 2001
From: huygensCortex <51647351+huygensCortex@users.noreply.github.com>
Date: Sat, 14 Oct 2023 21:40:06 -0400
Subject: [PATCH 2/2] wip UI improvements

---
 src/recommenderapp/app.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/recommenderapp/app.py b/src/recommenderapp/app.py
index 9994fb148..1405756ce 100644
--- a/src/recommenderapp/app.py
+++ b/src/recommenderapp/app.py
@@ -2,14 +2,14 @@
 Module for routing all calls from the frontend
 """
 
-sys.path.append("../../")
-from src.prediction_scripts.item_based import recommend_for_new_user
 from utils import send_email_to_user, beautify_feedback_data
 from flask_cors import CORS
 from flask import Flask, jsonify, render_template, request
 from search import Search
 import sys
 import json
+sys.path.append("../../")
+from src.prediction_scripts.item_based import recommend_for_new_user
 # pylint: disable=wrong-import-position
 # pylint: enable=wrong-import-position