From e92ec5fa171e81ce56ac586ac061a5451fa8c12d Mon Sep 17 00:00:00 2001 From: Nunu Miah <nm01312@surrey.ac.uk> Date: Fri, 23 May 2025 00:13:13 +0100 Subject: [PATCH] Bug fixes --- movie-group-8/src/views/FilmDetails.vue | 14 +++++++++++--- movie-group-8/src/views/Home.vue | 2 +- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/movie-group-8/src/views/FilmDetails.vue b/movie-group-8/src/views/FilmDetails.vue index 78ad50c..e89ba83 100644 --- a/movie-group-8/src/views/FilmDetails.vue +++ b/movie-group-8/src/views/FilmDetails.vue @@ -30,7 +30,16 @@ ></iframe> </div> - <WatchlistButton :movie="movie" class="mt-4" /> + <button + type="button" + @click="toggleWatchlist" + class="mt-4 px-4 py-2 rounded text-white transition" + :class="isInWatchlist + ? 'bg-red-600 hover:bg-red-700' + : 'bg-green-600 hover:bg-green-700'" + > + {{ isInWatchlist ? 'Remove from Watchlist' : 'Add to Watchlist' }} + </button> <RouterLink :to="{ name: 'ReviewFilm', params: { id: movie.id } }" @@ -60,7 +69,6 @@ import { ref, onMounted } from 'vue' import { useRoute } from 'vue-router' import { useWatchlist } from '@/composables/useWatchlist.js' -import WatchlistButton from '@/components/WatchlistButton.vue' import { getAuth } from 'firebase/auth' import { getFirestore, doc, getDoc } from 'firebase/firestore' import { getAllReviews } from '@/composables/useReviews.js' @@ -71,7 +79,7 @@ const trailerUrl = ref('') const loading = ref(true) const error = ref('') const movieId = ref(route.params.id) -const { isInWatchlist } = useWatchlist(movieId, movie) +const { isInWatchlist, toggleWatchlist } = useWatchlist(movieId, movie) const reviews = ref([]) const reviewsLoading = ref(true) diff --git a/movie-group-8/src/views/Home.vue b/movie-group-8/src/views/Home.vue index 04089a5..9027152 100644 --- a/movie-group-8/src/views/Home.vue +++ b/movie-group-8/src/views/Home.vue @@ -1,5 +1,5 @@ <template> - <div class="h-full bg-neutral-900 p-6"> + <div class="h-screen bg-neutral-900 p-6"> <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto dark"> <div class="relative p-6 md:p-16"> <div class="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center"> -- GitLab