Added profile page for users (Issue #12)

brwali · Nov 24, 2023 · dba864f · dba864f
1 parent 9268138
commit dba864f
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 3 deletions.
diff --git a/src/recommenderapp/app.py b/src/recommenderapp/app.py
@@ -13,7 +13,7 @@
 from flask import Flask, jsonify, render_template, request, g
 from flask_cors import CORS
 from search import Search
-from utils import beautify_feedback_data, send_email_to_user, createAccount, logintoAccount, submitReview, getWallPosts, getRecentMovies
+from utils import beautify_feedback_data, send_email_to_user, createAccount, logintoAccount, submitReview, getWallPosts, getRecentMovies, getUserName
 import mysql.connector
 import os
 from dotenv import load_dotenv
@@ -39,6 +39,13 @@ def login_page():
     """
     return render_template("login.html")
 
+@app.route("/profile")
+def profile_page():
+    """
+    Renders the login page.
+    """
+    return render_template("profile.html")
+
 @app.route("/wall")
 def wall_page():
     """
@@ -139,7 +146,7 @@ def review():
     data = json.loads(request.data)
     d = datetime.datetime.utcnow()
     timestamp = calendar.timegm(d.timetuple())
-    submitReview(g.db, 1, data["movie"], data["score"], data["review"], timestamp)
+    submitReview(g.db, user[1], data["movie"], data["score"], data["review"], timestamp)
     return request.data
 
 @app.route("/getWallData", methods=["GET"])
@@ -150,6 +157,10 @@ def wallPosts():
 def recentMovies():
     return getRecentMovies(g.db, user[1])
 
+@app.route("/getUserName", methods=["GET"])
+def username():
+    return getUserName(g.db, user[1])
+
 
 @app.route("/feedback", methods=["POST"])
 def feedback():

diff --git a/src/recommenderapp/static/script.js b/src/recommenderapp/static/script.js
@@ -227,6 +227,14 @@ $(document).ready(function () {
 		})
 	}
 
+	function friend(username) {
+
+	}
+
+	$("#friendButton").click(function () {
+		friend($("#addFriend").val())
+	})
+
 	$("#signOut").click(function () {
 		signOut()
 	})

diff --git a/src/recommenderapp/templates/profile.html b/src/recommenderapp/templates/profile.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheet.css') }}">
+    <title>PopcornPicks</title>
+    <link rel="icon" href="{{ url_for('static', filename='Popcorn-icon.png') }}" />
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+        crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+</head>
+
+<body class="Profile">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark topNavBar fixed-top" id="profileTopNav">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">PopcornPicks🍿</a> <button type="button" id="signOut" onclick="signOut()"
+                style="background-color: transparent; color:white; width: 5%;">Sign Out</button>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+        </div>
+    </nav>
+
+    <div class="wrapper"
+        style="margin-top: 20px; margin-bottom: 20px; height: 80%; width: 80%; background-color: rgba(83, 83, 83, 0.5); orientation: portrait;"
+        id="centralDivLanding">
+        <div class="heading1" style="background-color: transparent; color: white;"><br><br><br><br>
+            <center>
+                <h2 id="profBanner" style="top:5%; margin-top: 5px;"></h2>
+            </center>
+            <div class="wrapper" style="flex-direction: row;">
+                <div style="flex-direction: column; left: 50%; top: 30%; margin-right: 25%;">
+                    <h3 style="text-align: center;">Recently Rated Movies:</h2>
+                        <ul class="list-group" id="recentMoviesProf"></ul>
+                </div>
+                <div style="flex-direction: column; right: 50%; top: 30%; margin-left: 25%;">
+                    <center><input class="form-control mr-sm-2" type="text" placeholder="Enter Your Friend's Username"
+                            aria-label="FriendId" id="addFriend"
+                            style="width:120%; align-items: center; border-radius: 40px; margin-bottom: 20px;" />
+                    </center>
+                    <center><button id="friendButton" onclick="friend()" class="btn btn-primary mx-auto">Add
+                            Friend</button></center>
+                    <h3 style="text-align: center;">Friends List:</h2>
+                        <ul class="list-group" id="friendsList"></ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</body>
+<script>
+    window.onload = function () {
+        getRecentMoviesProfile();
+        getUserName();
+    }
+    function getRecentMoviesProfile() {
+        $.ajax({
+            type: 'GET',
+            url: '/getRecentMovies',
+            contentType: "application/json;charset=UTF-8",
+            success: function (response) {
+                response.forEach(element => {
+                    const resp = element.name + ": " + element.score + " stars";
+                    $("#recentMoviesProf").append(resp);
+                });
+            },
+            error: function (error) {
+            }
+        });
+    }
+    function getUserName() {
+        $.ajax({
+            type: 'GET',
+            url: '/getUserName',
+            contentType: "application/json;charset=UTF-8",
+            success: function (response) {
+                console.log(response)
+                const resp = "Welcome " + response + "!";
+                $("#profBanner").append(resp);
+            },
+            error: function (error) {
+            }
+        });
+    }
+</script>
+<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
+<script 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>
+
+</html>
diff --git a/src/recommenderapp/utils.py b/src/recommenderapp/utils.py
@@ -231,4 +231,10 @@ def getRecentMovies(db, user):
     json_data = []
     for r in result:
         json_data.append(dict(zip(rows, r)))
-    return jsonify(json_data)
+    return jsonify(json_data)
+
+def getUserName(db, user):
+    executor = db.cursor()
+    executor.execute("SELECT username FROM users WHERE idUsers = %s;", [int(user)])
+    result = executor.fetchall()
+    return jsonify(result[0][0])