improve ui and integrate with sendMail api

src/recommenderapp/app.py

@@ -2,18 +2,17 @@
 Module for routing all calls from the frontend
 """
 
-import json
-import sys
-
-from flask import Flask, jsonify, render_template, request
+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
-from utils import beautify_feedback_data, send_email_to_user
-
+import sys
+import json
 sys.path.append("../../")
-#pylint: disable=wrong-import-position
 from src.prediction_scripts.item_based import recommend_for_new_user
-#pylint: enable=wrong-import-position
+# pylint: disable=wrong-import-position
+# pylint: enable=wrong-import-position
+
 
 app = Flask(__name__)
 app.secret_key = "secret key"
@@ -66,7 +65,16 @@ def feedback():
     Handles user feedback submission and mails the results.
     """
     data = json.loads(request.data)
-    user_email = "[email protected]"
+    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
 

src/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");
+      },
+    });
+  });
+});

src/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%;