Talalbranch

Client/UserProfile.html

@@ -215,6 +215,7 @@ <h5>${movieInfo.title}</h5>
             const userData = data.data;
             console.log(data.data);
             displayUserProfile(userData);
+
         } else {
             console.error('Error:', data.message);
         }
@@ -276,18 +277,120 @@ <h4>Movies:</h4>
     const card = document.createElement('div');
     card.className = 'movie-card';
     card.innerHTML = `
-        <img src="${movieInfo.poster}" alt="${movieInfo.title}" style="width: 100%; height: auto;">
-        <h5>${movieInfo.title}</h5>
-        <p>${movieInfo.description}</p>
-        <button onclick="watchMovie(${movieInfo.id})">Watch</button>
+        <img src="${pathos}" alt="${movieInfo.data.title}" style="width: 100%; height: auto;">
+        <h5>${movieInfo.data.title}</h5>
+        <p>${movieInfo.data.description}</p>
+        <button onclick="watchMovie(${movieInfo.data.movie_id})">Watch</button>
     `;
     return card;
 }
 
-function watchMovie(movieId) {
-    window.location.href = `/movie?id=${movieId}`;
+function getUserIdFromSession() {
+    return new Promise((resolve, reject) => {
+        fetch('/profile', {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json' },
+        })
+        .then((response) => response.json())
+        .then((data) => {
+            if (data.success) {
+                const userData = data.data;
+                console.log("User data received:", userData);
+                if (userData && userData.id) {
+                    console.log("User ID found:", userData.id);
+                    resolve(userData.id);
+                } else {
+                    console.error('User ID not found in response');
+                    resolve(null);
+                }
+            } else {
+                console.error('Error:', data.message);
+                resolve(null);
+            }
+        })
+        .catch((error) => {
+            console.error('Error fetching user profile:', error);
+            reject(error);
+        });
+    });
 }
 
+
+
+
+
+
+
+// function watchMovie(movieId) {
+//     const userId = getUserIdFromSession();
+//     console.log("User ID: and HAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", userId);
+//     console.log("Sending request to prepare movie:", { movieId, userId });
+//     
+//     fetch('/prepare-movie', {
+//         method: 'POST',
+//         headers: {
+//             'Content-Type': 'application/json',
+//         },
+//         body: JSON.stringify({ movieId, userId }),
+//     })
+//     .then(response => response.json())
+//     .then(data => {
+//         console.log("Received response:", data);
+//         if (data.success) {
+//             setTimeout(() => {
+//                 window.location.href = '/movie';
+//             }, 1000);
+//         } else {
+//             console.error('Error preparing movie:', data.message);
+//             alert('Error preparing movie: ' + data.message);
+//         }
+//     })
+//     .catch(error => {
+//         console.error('Error:', error);
+//         alert('An error occurred: ' + error.message);
+//     });
+// }
+
+
+
+async function watchMovie(movieId) {
+    try {
+        const userId = await getUserIdFromSession();
+        if (!userId) {
+            console.error('No user ID found. User might not be logged in.');
+            alert('Please log in to watch the movie.');
+            return;
+        }
+
+        console.log("Sending request to prepare movie:", { movieId, userId });
+
+        const response = await fetch('/prepare-movie', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ movieId, userId }),
+        });
+
+        const data = await response.json();
+        console.log("Received response:", data);
+
+        if (data.success) {
+            setTimeout(() => {
+                window.location.href = '/movie';
+            }, 1000);
+        } else {
+            console.error('Error preparing movie:', data.message);
+            alert('Error preparing movie: ' + data.message);
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        alert('An error occurred: ' + error.message);
+    }
+}
+
+
+
 // Initialize the page
 fetchUserProfileAndRecommendations();
 

Client/chat.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Chat Page</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            padding: 20px;
+        }
+        .container {
+            max-width: 600px;
+            margin: auto;
+            background: #fff;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+        .hidden {
+            display: none;
+        }
+        .visible {
+            display: block;
+        }
+        .message-input {
+            width: calc(100% - 22px);
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+        .send-button {
+            padding: 10px 20px;
+            background-color: #007BFF;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .send-button:hover {
+            background-color: #0056b3;
+        }
+        .messages {
+            display: block;
+        }
+        .message {
+            display: block;
+            margin-bottom: 10px;
+        }
+        .message-bubble {
+            padding: 10px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+        }
+        .message-bubble.signed-in {
+            background-color: #C6F4D6;
+            align-self: flex-end;
+        }
+        .message-bubble.recipient {
+            background-color: #ADD8E6;
+            align-self: flex-start;
+        }
+        .message-container {
+            display: flex;
+            flex-direction: column;
+        }
+    </style>
+</head>
+<head>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+</head>
+<body>
+<div class="container">
+  <h2>Chat</h2>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="input-group mb-3">
+        <input type="text" id="searchUser" placeholder="Enter user ID" class="form-control" aria-label="Search user ID">
+        <button class="btn btn-primary" type="button" onclick="searchUser()">Search</button>
+        <button class="btn btn-success" type="button" id="view-messages-btn" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">View Messages</button>
+      </div>
+    </div>
+  </div>
+  <div id="searchResults"></div>
+  <div class="collapse multi-collapse" id="multiCollapseExample1">
+    <div class="card card-body">
+      <div id="messages"></div>
+    </div>
+  </div>
+  <div class="input-group mb-3">
+    <input type="text" id="message" placeholder="Your message" class="form-control" aria-label="Your message">
+    <button class="btn btn-primary" type="button" onclick="sendMessage()">Send</button>
+  </div>
+  <div id="error-message" style="display: none; color: red;"></div>
+</div>
+    <script>
+
+        document.getElementById('view-messages-btn').addEventListener('click', function() {
+          var searchUserId = document.getElementById('searchUser').value.trim();
+          if (searchUserId === '') {
+            document.getElementById('error-message').innerHTML = 'Please search for a user ID to view messages';
+            document.getElementById('error-message').style.display = 'block';
+            setTimeout(function() {
+              document.getElementById('error-message').style.display = 'none';
+            }, 2000);
+            return false;
+          }
+        });
+
+
+        const signedInUserId = 1; // Signed in user ID
+        console.log('Signed in user ID:', signedInUserId);
+        let recipientUserId = null; // Recipient user ID
+
+        async function searchUser() {
+  const userId = document.getElementById('searchUser').value;
+  try {
+    const response = await fetch(`/searchUser/${userId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    console.log('response:', response);
+    const data = await response.json();
+    console.log('data:', data);
+    if (data.user) {
+      recipientUserId = data.user.id;
+      loadMessages();
+      // Toggle the collapse
+      const collapse = document.getElementById('multiCollapseExample1');
+      collapse.classList.toggle('show');
+    } else {
+      alert('User not found');
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}
+
+        async function sendMessage() {
+            const message = document.getElementById('message').value;
+            if (!recipientUserId) {
+                alert('Please search and select a user first');
+                return;
+            }
+            const response = await fetch('/send', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ from_user_id: signedInUserId, to_user_id: recipientUserId, message })
+            });
+            if (response.ok) {
+                document.getElementById('message').value = '';
+                loadMessages();
+            }
+        }
+
+        async function loadMessages() {
+  try {
+    const response = await fetch(`/messages/${signedInUserId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    if (response.ok) {
+      const data = await response.json();
+      const messagesContainer = document.getElementById('messages');
+      messagesContainer.innerHTML = '';
+      if (data.messages && data.messages.length > 0) {
+        // Sort messages by ID to ensure chronological order
+        data.messages.sort((a, b) => a.id - b.id);
+        // Filter messages to only show messages between signed-in user and recipient user
+        const filteredMessages = data.messages.filter(msg => {
+          return (msg.from_user_id === signedInUserId && msg.to_user_id === recipientUserId) ||
+                 (msg.from_user_id === recipientUserId && msg.to_user_id === signedInUserId);
+        });
+        // Combine messages and format them for display
+        filteredMessages.forEach(msg => {
+          const messageBubble = document.createElement('div');
+          messageBubble.className = 'message-bubble';
+          if (msg.from_user_id === signedInUserId) {
+            messageBubble.classList.add('signed-in');
+          } else {
+            messageBubble.classList.add('recipient');
+          }
+          messageBubble.innerHTML = msg.message;
+          const messageContainer = document.createElement('div');
+          messageContainer.className = 'message-container';
+          messageContainer.appendChild(messageBubble);
+          messagesContainer.appendChild(messageContainer);
+        });
+      }
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}
+
+        loadMessages();
+    </script>
+</body>
+</html>