Advertisement
EntropyStarRover

god damn it

Mar 6th, 2021
75
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //connector:
  2. import {login} from "./login.js";
  3. import {register} from "./register.js"
  4. import {addMovie} from "./addMovie.js"
  5. import {showMovies} from "./showMovies.js"
  6.  
  7.  
  8.  
  9. function load(){
  10.  
  11.  
  12. let mainContainer=document.getElementById("mainContainer");
  13. mainContainer.innerHTML="";
  14. showMovies();
  15.  
  16. let loginLink=document.getElementById("loginLink");
  17. loginLink.addEventListener("click", function (e){
  18. console.log("login link clicked")
  19. e.preventDefault();
  20. login()
  21. })
  22.  
  23. let registerLink=document.getElementById("registerLink");
  24. registerLink.addEventListener("click", function (e){
  25. console.log("register link clicked")
  26. e.preventDefault();
  27. register()
  28. })
  29.  
  30.  
  31. console.log("hello there")
  32.  
  33. }
  34.  
  35. load()
  36.  
  37.  
  38.  
  39. showMovies:
  40. import {addMovie} from "./addMovie.js"
  41. export function showMovies() {
  42. // let mainContainer = document.getElementById("mainContainer");
  43. // mainContainer.style.display = "none";
  44.  
  45. let main = document.getElementsByTagName("main")[0];
  46. main.innerHTML="";
  47. let moviesSection = document.createElement("section");
  48. moviesSection.id="moviesSection";
  49.  
  50.  
  51. var myHeaders = new Headers();
  52. myHeaders.append("Content-Type","application/json");
  53.  
  54. var requestOptions = {
  55. method: 'GET',
  56. headers: myHeaders,
  57. redirect: 'follow'
  58. };
  59.  
  60. fetch("http://localhost:3030/data/movies", requestOptions)
  61. .then(response => response.json())
  62. .then(result => visualiseMovies(result))
  63. .catch(error => console.log('error', error));
  64.  
  65.  
  66. function visualiseMovies(result) {
  67. let movies = Object.values(result);
  68. movies.forEach(m => {
  69. let movieDiv = document.createElement("div");
  70. movieDiv.className = "container";
  71. movieDiv.innerHTML = `
  72. <div class="container">
  73. <div class="row bg-light text-dark">
  74. <h1>Movie title: ${m.title}</h1>
  75.  
  76. <div class="col-md-8">
  77. <img class="img-thumbnail"
  78. src=${m.img} alt="Movie">
  79. </div>
  80. <div class="col-md-4 text-center">
  81. <h3 class="my-3 ">Movie Description</h3>
  82. <p>${m.description}</p>
  83. <a class="btn btn-danger" href="#">Delete</a>
  84. <a class="btn btn-warning" href="#">Edit</a>
  85. <a class="btn btn-primary" href="#">Like</a>
  86. <span class="enrolled-span">Liked 1</span>
  87. </div>
  88. </div>
  89. </div>`
  90.  
  91. moviesSection.appendChild(movieDiv);
  92. let deleteBtn=movieDiv.querySelector(".btn-danger");
  93. if (m.createdBy==sessionStorage.getItem("loggedUserId")){
  94.  
  95. deleteBtn.addEventListener("click",function(e){
  96. e.preventDefault();
  97. console.log("i delete stuff")
  98. })
  99. } else {
  100. deleteBtn.remove();
  101. }
  102.  
  103. });
  104. if (sessionStorage.getItem("loggedUserToken")){
  105. console.log(sessionStorage.getItem("loggedUserToken"))
  106. console.log("user is loged display add movie button")
  107. let addMovieLink=document.createElement("section");
  108. addMovieLink.innerHTML=`
  109. <a href="#" id="addMovieLink" class="btn btn-warning ">Add Movie</a>`
  110. addMovieLink.addEventListener("click", function(e){
  111. e.preventDefault();
  112. addMovie();
  113. })
  114. main.appendChild(addMovieLink)
  115. }
  116.  
  117. main.appendChild(moviesSection);
  118. }
  119. }
  120.  
  121. login:
  122.  
  123. import {saveCredentialsAndRedirect} from "./saveCredentialsAndRedirect.js"
  124.  
  125. export function login() {
  126. let main = document.getElementsByTagName("main")[0];
  127. main.innerHTML = "";
  128.  
  129.  
  130. let loginSection = document.createElement("section");
  131. loginSection.id = "loginSection";
  132. loginSection.innerHTML=`
  133. <form id="loginForm" class="text-center border border-light p-5" action="" method="">
  134. <div class="form-group">
  135. <label for="email">Email</label>
  136. <input type="email" class="form-control" placeholder="Email" name="email" value="">
  137. </div>
  138. <div class="form-group">
  139. <label for="password">Password</label>
  140. <input type="password" class="form-control" placeholder="Password" name="password" value="">
  141. </div>
  142.  
  143. <button type="submit" class="btn btn-primary">Login</button>
  144. </form>`
  145.  
  146. main.appendChild(loginSection);
  147.  
  148.  
  149. loginForm.addEventListener("submit", function (e) {
  150. e.preventDefault();
  151. console.log("who");
  152. let formData = new FormData(loginForm);
  153. let email = formData.get("email");
  154. let password = formData.get("password");
  155.  
  156. let requestBody = {
  157. email,
  158. password
  159. }
  160. console.log(requestBody)
  161. let b = JSON.stringify(requestBody)
  162.  
  163. var myHeaders = new Headers();
  164. myHeaders.append("Content-Type", "application/json");
  165.  
  166. var requestOptions = {
  167. method: 'POST',
  168. headers: myHeaders,
  169. body: b,
  170. redirect: 'follow'
  171. };
  172.  
  173. fetch("http://localhost:3030/users/login", requestOptions)
  174. .then(response => response.json())
  175. .then(result => saveCredentialsAndRedirect(result,loginSection))
  176. .catch(error => console.log('error', error));
  177. })
  178.  
  179.  
  180. }
  181.  
  182. saveCredentials and shit:
  183. import {showMovies} from "./showMovies.js"
  184.  
  185. export function saveCredentialsAndRedirect(fulfilledRequest,section){
  186. console.log(fulfilledRequest)
  187. sessionStorage.setItem("loggedUserId", fulfilledRequest._id);
  188. sessionStorage.setItem("loggedUserToken", fulfilledRequest.accessToken);
  189. sessionStorage.setItem("userIsLogged", "true");
  190. let loginLink = document.getElementById("loginLink");
  191. loginLink.style.display = "none";
  192. let registerLink = document.getElementById("registerLink");
  193. registerLink.style.display = "none";
  194. //visualise stuff back and hide login
  195. section.remove()
  196. showMovies();
  197. }
  198.  
  199. addMovie:
  200. import { showMovies } from "./showMovies.js";
  201.  
  202. export function addMovie(){
  203. console.log("addmovie clicked")
  204. let main = document.getElementsByTagName("main")[0];
  205. main.innerHTML = "";
  206.  
  207. let addMovieSection=document.createElement("section");
  208. addMovieSection.innerHTML=`
  209.  
  210. <form id="addMovieForm" class="text-center border border-light p-5" action="#" method="">
  211. <h1>Add Movie</h1>
  212. <div class="form-group">
  213. <label for="title">Movie Title</label>
  214. <input type="text" class="form-control" placeholder="Title" name="title" value="">
  215. </div>
  216. <div class="form-group">
  217. <label for="description">Movie Description</label>
  218. <textarea class="form-control" placeholder="Description" name="description"></textarea>
  219. </div>
  220. <div class="form-group">
  221. <label for="imageUrl">Image url</label>
  222. <input type="text" class="form-control" placeholder="Image Url" name="imageUrl" value="">
  223. </div>
  224. <button id="addMovieButton" type="submit" class="btn btn-primary">Submit</button>
  225. </form>
  226. `
  227. main.appendChild(addMovieSection);
  228.  
  229. let addMovieForm=document.getElementById("addMovieForm");
  230. addMovieForm.addEventListener("submit", function(e){
  231. e.preventDefault();
  232. let formData=new FormData(addMovieForm);
  233. submitMovieAndRedirect(formData)
  234. })
  235.  
  236. function submitMovieAndRedirect(formData){
  237. let title=formData.get("title");
  238. let description=formData.get("description");
  239. let imageUrl=formData.get("imageUrl");
  240. let createdBy=sessionStorage.getItem("loggedUserId")
  241. if (title.length==0||description.length==0||imageUrl==0){
  242. return alert("All fields are required!")
  243. }
  244. let movieObj={title,description,imageUrl,createdBy}
  245. console.log(movieObj)
  246.  
  247.  
  248. var myHeaders = new Headers();
  249. myHeaders.append("X-Authorization", sessionStorage.getItem("loggedUserToken"));
  250. myHeaders.append("Content-Type", "application/json")
  251.  
  252. var raw = JSON.stringify(movieObj);
  253.  
  254. var requestOptions = {
  255. method: 'POST',
  256. headers: myHeaders,
  257. body: raw,
  258. redirect: 'follow'
  259. };
  260.  
  261. fetch("http://localhost:3030/data/movies", requestOptions)
  262. .then(response => response.json())
  263. .then(result => showMovies())
  264. .catch(error => console.log('error', error));
  265. }
  266.  
  267.  
  268. }
  269.  
  270.  
  271. register:
  272.  
  273. import {saveCredentialsAndRedirect} from "./saveCredentialsAndRedirect.js"
  274. export function register() {
  275. console.log("hello?")
  276.  
  277. let main = document.getElementsByTagName("main")[0];
  278. main.innerHTML = "";
  279.  
  280. let registerSection = document.createElement("section");
  281. registerSection.id = "registerSection";
  282. registerSection.innerHTML = `
  283. <form id="registerForm" class="text-center border border-light p-5" action="#" method="post">
  284. <div class="form-group">
  285. <label for="email">Email</label>
  286. <input type="email" class="form-control" placeholder="Email" name="email" value="">
  287. </div>
  288. <div class="form-group">
  289. <label for="password">Password</label>
  290. <input type="password" class="form-control" placeholder="Password" name="password" value="">
  291. </div>
  292.  
  293. <div class="form-group">
  294. <label for="repeatPassword">Repeat Password</label>
  295. <input type="password" class="form-control" placeholder="Repeat-Password" name="repeatPassword"
  296. value="">
  297. </div>
  298.  
  299. <button type="submit" class="btn btn-primary">Register</button>
  300. </form>`
  301.  
  302. main.appendChild(registerSection);
  303.  
  304. registerForm.addEventListener("submit", function (e) {
  305. e.preventDefault();
  306.  
  307. let formData = new FormData(registerForm);
  308. let email = formData.get("email");
  309. let password = formData.get("password");
  310. let repeatPassword = formData.get("repeatPassword");
  311. if (password !== repeatPassword) {
  312. return alert("passwords do not match")
  313. }
  314.  
  315. let requestBody = {
  316. email,
  317. password
  318. }
  319. console.log(requestBody)
  320. let b = JSON.stringify(requestBody)
  321.  
  322. var myHeaders = new Headers();
  323. myHeaders.append("Content-Type", "application/json");
  324.  
  325. var requestOptions = {
  326. method: 'POST',
  327. headers: myHeaders,
  328. body: b,
  329. redirect: 'follow'
  330. };
  331.  
  332. fetch("http://localhost:3030/users/register", requestOptions)
  333. .then(response => response.json())
  334. .then(result => saveCredentialsAndRedirect(result,registerSection))
  335. .catch(error => console.log('error', error));
  336. })
  337.  
  338. // function saveCredentialsAndRedirect(result) {
  339. // console.log(result)
  340. // sessionStorage.setItem("loggedUserId", result._id);
  341. // sessionStorage.setItem("loggedUserToken", result.accessToken);
  342. // sessionStorage.setItem("userIsLogged", "true");
  343. // let loginLink = document.getElementById("loginLink");
  344. // loginLink.style.display = "none";
  345. // let registerLink = document.getElementById("registerLink");
  346. // registerLink.style.display = "none";
  347. // //visualise stuff back and hide login
  348. // registerSection.remove()
  349. // showMovies();
  350.  
  351. // }
  352.  
  353. }
Advertisement
RAW Paste Data Copied
Advertisement