Update: Enhanced app functionalities (#196)

hoangsonww · May 25, 2024 · fc459e9 · fc459e9
1 parent 29bd7db
commit fc459e9
Show file tree

Hide file tree

Showing 7 changed files with 328 additions and 0 deletions.
diff --git a/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Frontend/html/notifications.html
@@ -346,6 +346,9 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
         <form id="form1" style="margin-top: 20px">
             <div class="search-container">
                 <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
@@ -366,6 +369,31 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul style="overflow-y: auto">
+            <li style="background: none; border: none"><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li style="background: none; border: none"><a href="#newFeatures">New Features</a></li>
+            <li style="background: none; border: none"><a href="#newReleases">New Releases</a></li>
+            <li style="background: none; border: none"><a href="#tipsTricks">Tips & Tricks</a></li>
+            <li style="background: none; border: none"><a href="#popularActors">Popular Actors</a></li>
+            <li style="background: none; border: none"><a href="#popularDirectors">Popular Directors</a></li>
+            <li style="background: none; border: none"><a href="sign-in.html">Sign In</a></li>
+            <li style="background: none; border: none"><a href="user-profile.html">Profile</a></li>
+            <li style="background: none; border: none"><a href="feedback.html">Submit Feedback</a></li>
+            <li style="background: none; border: none"><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <main>
         <section id="newFeatures">
             <h2 style="cursor: pointer">New Features</h2>
@@ -474,6 +502,54 @@ <h2 style="cursor: pointer">Popular Directors</h2>
     </script>
 
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         document.getElementById('newFeatures').addEventListener('click', function(e) {
             e.preventDefault();
 

diff --git a/...ile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/notifications.html b/...ile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/notifications.html
@@ -346,6 +346,9 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
         <form id="form1" style="margin-top: 20px">
             <div class="search-container">
                 <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
@@ -366,6 +369,31 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul style="overflow-y: auto">
+            <li style="background: none; border: none"><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li style="background: none; border: none"><a href="#newFeatures">New Features</a></li>
+            <li style="background: none; border: none"><a href="#newReleases">New Releases</a></li>
+            <li style="background: none; border: none"><a href="#tipsTricks">Tips & Tricks</a></li>
+            <li style="background: none; border: none"><a href="#popularActors">Popular Actors</a></li>
+            <li style="background: none; border: none"><a href="#popularDirectors">Popular Directors</a></li>
+            <li style="background: none; border: none"><a href="sign-in.html">Sign In</a></li>
+            <li style="background: none; border: none"><a href="user-profile.html">Profile</a></li>
+            <li style="background: none; border: none"><a href="feedback.html">Submit Feedback</a></li>
+            <li style="background: none; border: none"><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <main>
         <section id="newFeatures">
             <h2 style="cursor: pointer">New Features</h2>
@@ -474,6 +502,54 @@ <h2 style="cursor: pointer">Popular Directors</h2>
     </script>
 
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         document.getElementById('newFeatures').addEventListener('click', function(e) {
             e.preventDefault();
 

diff --git a/...e-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/user-profile.js b/...e-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/user-profile.js
@@ -203,6 +203,8 @@ async function performSearch(searchText) {
 }
 
 document.getElementById('container1').addEventListener('click', async () => {
+    showSpinner();
+
     const userEmail = localStorage.getItem('currentlyViewingProfile');
 
     if (!userEmail) {
@@ -227,9 +229,13 @@ document.getElementById('container1').addEventListener('click', async () => {
     catch (error) {
         console.error('Error updating progress circles:', error);
     }
+
+    hideSpinner();
 });
 
 document.getElementById('container2').addEventListener('click', async () => {
+    showSpinner();
+
     const userEmail = localStorage.getItem('currentlyViewingProfile');
 
     if (!userEmail) {
@@ -254,6 +260,8 @@ document.getElementById('container2').addEventListener('click', async () => {
     catch (error) {
         console.error('Error updating progress circles:', error);
     }
+
+    hideSpinner();
 });
 
 async function loadProfile(userEmail = localStorage.getItem('currentlySignedInMovieVerseUser')) {

diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html
@@ -346,6 +346,9 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
         <form id="form1" style="margin-top: 20px">
             <div class="search-container">
                 <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
@@ -366,6 +369,31 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul style="overflow-y: auto">
+            <li style="background: none; border: none"><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li style="background: none; border: none"><a href="#newFeatures">New Features</a></li>
+            <li style="background: none; border: none"><a href="#newReleases">New Releases</a></li>
+            <li style="background: none; border: none"><a href="#tipsTricks">Tips & Tricks</a></li>
+            <li style="background: none; border: none"><a href="#popularActors">Popular Actors</a></li>
+            <li style="background: none; border: none"><a href="#popularDirectors">Popular Directors</a></li>
+            <li style="background: none; border: none"><a href="sign-in.html">Sign In</a></li>
+            <li style="background: none; border: none"><a href="user-profile.html">Profile</a></li>
+            <li style="background: none; border: none"><a href="feedback.html">Submit Feedback</a></li>
+            <li style="background: none; border: none"><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <main>
         <section id="newFeatures">
             <h2 style="cursor: pointer">New Features</h2>
@@ -474,6 +502,54 @@ <h2 style="cursor: pointer">Popular Directors</h2>
     </script>
 
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         document.getElementById('newFeatures').addEventListener('click', function(e) {
             e.preventDefault();
 

diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/user-profile.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/user-profile.js
@@ -203,6 +203,8 @@ async function performSearch(searchText) {
 }
 
 document.getElementById('container1').addEventListener('click', async () => {
+    showSpinner();
+
     const userEmail = localStorage.getItem('currentlyViewingProfile');
 
     if (!userEmail) {
@@ -227,9 +229,13 @@ document.getElementById('container1').addEventListener('click', async () => {
     catch (error) {
         console.error('Error updating progress circles:', error);
     }
+
+    hideSpinner();
 });
 
 document.getElementById('container2').addEventListener('click', async () => {
+    showSpinner();
+
     const userEmail = localStorage.getItem('currentlyViewingProfile');
 
     if (!userEmail) {
@@ -254,6 +260,8 @@ document.getElementById('container2').addEventListener('click', async () => {
     catch (error) {
         console.error('Error updating progress circles:', error);
     }
+
+    hideSpinner();
 });
 
 async function loadProfile(userEmail = localStorage.getItem('currentlySignedInMovieVerseUser')) {