feat: New watchlist view & refactored others

justinhartman · Jun 4, 2024 · b5a28a0 · b5a28a0
1 parent c67a08c
commit b5a28a0
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -129,8 +129,8 @@ Application and then follow these steps.
    sudo systemctl restart binger.service
    ```
 
-5. You can now test your app URL paths like `./register`, `./login` and `./profile` paths to see if data is being 
-   stored correctly.
+5. You can now test your app URL paths like `./user/register`, `./user/login` and `./user/profile` paths to see if data 
+   is being stored correctly.
 
 ## OMDb API
 

diff --git a/public/css/style.css b/public/css/style.css
@@ -16,6 +16,11 @@ a.btn-primary:hover {
     background-color: #0056b3;
 }
 
+/* Grow the search bar input. */
+.navbar .search-input {
+    flex-grow: 1;
+}
+
 /* Styles that apply at the 'md' breakpoint and above */
 @media (min-width: 768px) {
     .card-img-top {

diff --git a/views/login.ejs b/views/login.ejs
@@ -11,7 +11,7 @@
     <div class="container">
         <h1>Login</h1>
         <%- include('./partials/alerts.ejs') -%>
-        <form action="/login" method="post">
+        <form action="/user/login" method="post">
             <div class="mb-3">
                 <label for="username" class="form-label">Username</label>
                 <input type="text" class="form-control" id="username" name="username" required>

diff --git a/views/partials/card-add.ejs b/views/partials/card-add.ejs
@@ -1,13 +1,13 @@
 <div class="col-md-3 col-sm-6 mb-4">
-    <div class="card text-bg-dark mb-3">
+    <div class="card bg-dark bg-gradient mb-3 shadow-lg border border-0">
         <a href="<%- url %>">
             <img class="card-img-top" src="<%- poster %>" alt="<%- title %>">
         </a>
         <div class="card-body">
             <h5 class="card-title text-nowrap text-truncate text-warning"><%- title %></h5>
             <div class="d-flex">
-                <form action="<%= APP_URL %>/add-to-watchlist" method="post" class="w-25 mt-2 me-2">
-                    <input type="hidden" name="imdbID" value="<%- id %>">
+                <form action="<%= APP_URL %>/watchlist/add" method="post" class="w-25 mt-2 me-2">
+                    <input type="hidden" name="imdbId" value="<%- id %>">
                     <input type="hidden" name="title" value="<%- title %>">
                     <input type="hidden" name="poster" value="<%- poster %>">
                     <input type="hidden" name="type" value="<%- type %>">

diff --git a/views/partials/card-delete.ejs b/views/partials/card-delete.ejs
@@ -1,13 +1,13 @@
 <div class="col-md-3 col-sm-6 mb-4">
-    <div class="card text-bg-dark mb-3">
+    <div class="card bg-dark bg-gradient mb-3 shadow-lg border border-0">
         <a href="<%- url %>">
             <img class="card-img-top" src="<%- poster %>" alt="<%- title %>">
         </a>
         <div class="card-body">
             <h5 class="card-title text-nowrap text-truncate text-warning"><%- title %></h5>
             <div class="d-flex">
-                <form action="<%= APP_URL %>/delete-from-watchlist" method="post" class="w-25 mt-2 me-2">
-                    <input type="hidden" name="imdbID" value="<%- id %>">
+                <form action="<%= APP_URL %>/watchlist/delete" method="post" class="w-25 mt-2 me-2">
+                    <input type="hidden" name="imdbId" value="<%- id %>">
                     <button type="submit" class="btn btn-danger">
                         <i class="bi-x-circle-fill px-1"></i>
                     </button>

diff --git a/views/partials/card.ejs b/views/partials/card.ejs
@@ -1,10 +1,10 @@
 <div class="col-md-3 col-sm-6 mb-4">
-    <div class="card text-bg-dark mb-3">
+    <div class="card bg-dark bg-gradient mb-3 shadow-lg border border-0">
         <a href="<%- url %>">
             <img class="card-img-top" src="<%- poster %>" alt="<%- title %>">
         </a>
         <div class="card-body">
-            <h5 class="card-title text-nowrap overflow-hidden text-warning"><%- title %></h5>
+            <h5 class="card-title text-nowrap text-truncate text-warning"><%- title %></h5>
             <a class="btn btn-primary w-100" href="<%- url %>">
                 <i class="bi-collection-play-fill px-1"></i> Watch Now
             </a>

diff --git a/views/partials/ld/search.ejs b/views/partials/ld/search.ejs
@@ -7,7 +7,7 @@
                 "@type": "<%= result.Type === 'movie' ? 'Movie' : 'TVSeries' %>",
                 "position": <%= index + 1 -%>,
                 "name": "<%= result.Title -%>",
-                "url": "<%= APP_URL %>/view/<%= result.imdbID -%>/<%= result.Type -%>",
+                "url": "<%= APP_URL %>/view/<%= result.imdbId -%>/<%= result.Type -%>",
                 "image": "<%= result.Poster !== 'N/A' ? result.Poster : `${APP_URL}/images/no-binger.jpg` -%>"
             }<% if (index < results.length - 1) { -%>,<% } %>
             <% }); %>

diff --git a/views/partials/navigation.ejs b/views/partials/navigation.ejs
@@ -1,13 +1,13 @@
-<body class="bg-dark bg-gradient">
+<body class="bg-dark">
     <header class="pt-3 p-md-3 bg-dark text-white sticky-top shadow">
         <div class="container">
             <!-- Header Search -->
             <div class="row">
                 <form action="<%= APP_URL %>/search" class="d-md-flex justify-content-center text-center" method="get" name="search">
                     <div class="col-sm-12 col-md-3">
                         <a href="<%= APP_URL %>/" class="display-5 text-decoration-none me-2 me-md-0 ms-0 ms-lg-2 d-inline-flex d-md-relative" for="q">
-                            <img src="<%= APP_URL %>/images/favicons/apple-touch-icon.png" style="width:64px" class="d-none d-md-inline me-2" alt="Binger.uk Free Movies and TV Series">
-                            <img src="<%= APP_URL %>/images/favicons/apple-touch-icon.png" style="width:80px" class="d-inline d-md-none" alt="Binger.uk Free Movies and TV Series">
+                            <img src="<%= APP_URL %>/images/favicons/apple-touch-icon.png" style="width:64px" class="d-none d-md-inline me-2" alt="<%= APP_DESCRIPTION %>>">
+                            <img src="<%= APP_URL %>/images/favicons/apple-touch-icon.png" style="width:80px" class="d-inline d-md-none" alt="<%= APP_DESCRIPTION %>>">
                             <div class="d-md-none d-lg-inline-flex position-relative pt-4 pt-md-0 ps-2 ps-md-0 text-white">
                                 Bin<i class="text-warning fst-normal opacity-50">ger</i>
                                 <h2 class="d-none"><%= APP_NAME %> - <%= APP_DESCRIPTION %></h2>

diff --git a/views/profile.ejs b/views/profile.ejs
@@ -11,20 +11,15 @@
     <div class="container">
         <%- include('./partials/alerts.ejs') -%>
         <div class="row">
-            <h1 class="display-4 my-4 text-warning">Your Watchlist</h1>
-        <% if (user.watchlist.length > 0) { -%>
-            <% user.watchlist.forEach(item => { -%>
-                <%-include('./partials/card-delete.ejs', {
-                    url: `${APP_URL}/view/${item.imdbID}/${item.type}`,
-                    poster: item.poster,
-                    title: item.title,
-                    id: item.imdbID,
-                    type: item.type
-                })%>
-            <% }); -%>
-        <% } else { -%>
-            <h2 class="card-title text-info">Your watchlist is empty.</h2>
-        <% } -%>
+            <h1 class="display-4 my-4 text-warning">Welcome <%= user.username %></h1>
+            <div class="d-flex">
+                <a class="btn btn-outline-danger w-50 mx-2" href="<%= APP_URL %>/watchlist">
+                    <i class="bi-box-arrow-left px-1"></i> Log out Account
+                </a>
+                <a class="btn btn-success w-50 mx-2" href="<%= APP_URL %>/watchlist">
+                    <i class="bi-card-checklist px-1"></i> View Watchlist
+                </a>
+            </div>
         </div>
     </div>
 <%- include('./partials/footer.ejs') -%>
diff --git a/views/register.ejs b/views/register.ejs
@@ -11,7 +11,7 @@
     <div class="container">
         <h1>Register</h1>
         <%- include('./partials/alerts.ejs') -%>
-        <form action="/register" method="post">
+        <form action="/user/register" method="post">
             <div class="mb-3">
                 <label for="username" class="form-label">Username</label>
                 <input type="text" class="form-control" id="username" name="username" required>

diff --git a/views/search.ejs b/views/search.ejs
@@ -16,7 +16,7 @@
             <h1 class="display-4 my-4 text-warning text-capitalize"><%= query %></h1>
             <% results.forEach(result => { %>
                 <%-include(`./partials/${card}.ejs`, {
-                    url: `${APP_URL}/view/${result.imdbID}/${type === 'movie' ? 'movie' : 'series'}`,
+                    url: `${APP_URL}/view/${result.imdbId}/${type === 'movie' ? 'movie' : 'series'}`,
                     poster: result.Poster !== 'N/A' ? result.Poster : `${APP_URL}/images/no-binger.jpg`,
                     title: `${result.Title} (${result.Year})`,
                     id: result.imdbID,

diff --git a/views/watchlist.ejs b/views/watchlist.ejs
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Watchlist</title>
+    <meta name="description" content="<%= APP_DESCRIPTION _%>">
+<%- include('./partials/meta/base.ejs') -%>
+</head>
+<%- include('./partials/navigation.ejs') -%>
+    <div class="container">
+        <%- include('./partials/alerts.ejs') -%>
+        <div class="row">
+            <h1 class="display-4 my-4 text-warning">Your Watchlist</h1>
+        <% if (watchlist && watchlist.length > 0) {
+            watchlist.forEach(item => {
+                for (const i of item.items) { -%>
+                <%-include('./partials/card-delete.ejs', {
+                    url: `${APP_URL}/view/${i.imdbId}/${i.type}`,
+                    poster: i.poster,
+                    title: i.title,
+                    id: i.imdbId,
+                    type: i.type
+                })%>
+            <% }});
+            } else { -%>
+            <h2 class="card-title text-info">Your watchlist is empty.</h2>
+        <% } -%>
+        </div>
+    </div>
+<%- include('./partials/footer.ejs') -%>