-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmyList.html
202 lines (184 loc) · 8.63 KB
/
myList.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My List</title>
<link rel="icon" href="Pictures/Logo.jpeg" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="myList.css">
</head>
<body>
<header id="header" class="">
<div class="header-cont container">
<div class="left-cont">
<img class="header-brand" src="Pictures/Logo.jpeg" alt="Logo">
<ul class="main-nav">
<li class="nav-item active" onclick="home()">Home</li>
<li class="nav-item" onclick="logout()">Logout</li>
</ul>
</div>
<div class="right-cont">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="Hawkins-Icon Hawkins-Icon-Standard" onclick="toggle_drop_2()">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 4.57092C16.3922 5.05624 18.9998 7.9736 18.9998 11.5V15.2538C20.0486 15.3307 21.0848 15.4245 22.107 15.5347L21.8926 17.5232C18.7219 17.1813 15.409 17 11.9998 17C8.59056 17 5.27764 17.1813 2.10699 17.5232L1.89258 15.5347C2.91473 15.4245 3.95095 15.3307 4.99978 15.2538V11.5C4.99978 7.97345 7.6076 5.05599 11 4.57086V2H13V4.57092ZM8.62568 19.3712C8.6621 20.5173 10.1509 22 11.9993 22C13.8477 22 15.3365 20.5173 15.373 19.3712C15.38 19.1489 15.1756 19 14.9531 19H9.04555C8.82308 19 8.61862 19.1489 8.62568 19.3712Z" fill="currentColor"></path>
</svg>
<img src="Pictures/Icon.jpg" alt="Icon" id="account" onclick="toggleDropdown()">
<div id="dropdown" class="dropdown-content" style="text-align: center;">
<!-- User details here -->
<p><span id="logged_in"></span>
<img src="Pictures/User.jpg" alt="User Image" class="user-image">
</p>
<br>
<button onclick="logout()">Logout</button>
</div>
<div id="notificationDropdown" class="dropdown-content notification-dropdown">
<p style="color: white;">No notifications</p>
</div>
</div>
</div>
</header>
<main id="main" class="">
<div class="container">
<h1 class="main-title">My List</h1>
<div class="my-list-cont">
</div>
</div>
</main>
<script>
function getQueryParam(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
var username = getQueryParam('username');
function replaceUnderscoresWithSpaces(inputString) {
return inputString.replace(/_/g, " ");
}
function deleteMovie(btn) {
// Get the parent element of the button (which is the movie-cont container)
const movieCont = btn.parentElement;
// Remove the movie-cont container from the DOM
movieCont.remove();
}
function add_movie(nam){
// Get the image and movie title variables (replace these with your actual variables)
var image = "Pictures/" + nam + ".jpg"; // Replace with your image variable
var mov = replaceUnderscoresWithSpaces(nam); // Replace with your movie title variable
// Create the HTML structure for the movie container
var movieContainer = document.createElement("div");
movieContainer.classList.add("movie-cont");
movieContainer.setAttribute("onclick","searchAndSet(this)");
movieContainer.id = nam;
// Create the delete button
var deleteButton = document.createElement("button");
deleteButton.classList.add("delete-btn");
deleteButton.innerText = "✖";
deleteButton.setAttribute("onclick", "deleteMovie(this)");
// Create the image element
var imgElement = document.createElement("img");
imgElement.setAttribute("src", image);
imgElement.setAttribute("alt", "Movie");
console.log(nam);
console.log(imgElement.id);
// Create the movie title element
var titleElement = document.createElement("h2");
titleElement.classList.add("movie-title");
titleElement.innerText = mov;
// Append elements to the movie container
movieContainer.appendChild(deleteButton);
movieContainer.appendChild(imgElement);
movieContainer.appendChild(titleElement);
// Append the movie container to the myList.html page
document.querySelector('.my-list-cont').appendChild(movieContainer);
};
function searchAndSet(element) {
const query = element.id;
searchAndExtract(query)
.then(results => {
results.forEach(result => {
result.forEach(([key, value]) => {
localStorage.setItem(key, value);
//keyValueParagraph.textContent = `${key}: ${value}`;
});
});
window.open('template.html?username=' + username, '_self');
})
.catch(error => {
console.error('Error searching data:', error);
});
}
function searchAndExtract(query) {
return new Promise((resolve, reject) => {
fetch(`http://localhost:3000/search?query=${encodeURIComponent(query)}`)
.then(response => response.json())
.then(data => {
const results = [];
data.forEach(doc => {
// Extract key-value pairs from the document
const keyValuePairs = Object.entries(doc);
results.push(keyValuePairs);
});
resolve(results);
})
.catch(error => {
reject(error);
});
});
}
</script>
<script>
const userName = localStorage.getItem("user");
console.log(userName);
function home(){
window.open('main_2.html?username=' + userName,'_self');
}
function logout(){
window.open('main.html','_self')
}
document.getElementById("logged_in").innerHTML = localStorage.getItem("user");
function toggle_drop_2() {
var dropdown = document.getElementById("notificationDropdown");
if (dropdown.style.display === "block") {
dropdown.style.display = "none";
} else {
dropdown.style.display = "block";
}
}
function toggleDropdown() {
var dropdown = document.getElementById("dropdown");
if (dropdown.style.display === "block") {
dropdown.style.display = "none";
} else {
dropdown.style.display = "block";
}
}
fetch(`/search_3?userName=${userName}`)
.then(response => {
/*if (!response.ok) {
throw new Error('Network response was not ok');
}*/
return response.json();
})
.then(data => {
// Display the result
console.log(data);
if (data.error) {
alert(data.error); // Display error message if any
} else {
var moviesObject = data.movies;
// Iterate over each key (movie) in the movies object
for (var movieName in moviesObject) {
if (moviesObject.hasOwnProperty(movieName)) {
// Output or use the movie name
add_movie(movieName);
}
}
}
})
.catch(error => {
console.error('Error fetching data:', error);
alert('An error occurred while fetching data. Please try again later.');
});
</script>
</body>
</html>