97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<script setup>
|
|
import { useMovieStore} from './stores/movie-store';
|
|
import Movie from './components/Movie.vue';
|
|
|
|
const movieStore = useMovieStore();
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<header class="header">
|
|
<img src="/logo.svg" alt="logo" class="header-logo">
|
|
<h2>Favorite Movies</h2>
|
|
</header>
|
|
|
|
<div class="tabs">
|
|
<button
|
|
class="btn"
|
|
:class="{btn_green: movieStore.activeTab === 1}"
|
|
@click="movieStore.setActiveTab(1)"
|
|
>
|
|
Favorites
|
|
</button>
|
|
|
|
<button
|
|
class="btn"
|
|
:class="{btn_green: movieStore.activeTab === 2}"
|
|
@click="movieStore.setActiveTab(2)"
|
|
>
|
|
Search
|
|
</button>
|
|
</div>
|
|
|
|
<div class="movies" v-if="movieStore.activeTab === 1">
|
|
<h3 v-if="movieStore.watchedMovies.length > 0">Watched movies ({{movieStore.watchedMovies.length}})</h3>
|
|
<Movie
|
|
v-for="movie in movieStore.watchedMovies"
|
|
:movie="movie"
|
|
:key="movie.id"
|
|
@toggleWatched="movieStore.toggleWatchedMovie(movie.id)"
|
|
@remove="movieStore.removeMovie(movie.id)"
|
|
/>
|
|
|
|
<h3 v-if="movieStore.totalCount > 0">All movies ({{movieStore.totalCount}})</h3>
|
|
<Movie
|
|
v-for="movie in movieStore.movies"
|
|
:movie="movie"
|
|
:key="movie.id"
|
|
@toggleWatched="movieStore.toggleWatchedMovie(movie.id)"
|
|
@remove="movieStore.removeMovie(movie.id)"
|
|
/>
|
|
|
|
<h3 v-if="movieStore.totalCount === 0">
|
|
No movies
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="search" v-if="movieStore.activeTab === 2">
|
|
Search
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<style lang="css">
|
|
.header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
.header-logo {
|
|
max-width: 50px;
|
|
margin-right: 10px;
|
|
}
|
|
.btn {
|
|
border: none;
|
|
width: 100px;
|
|
height: 40px;
|
|
font-size: 14px;
|
|
margin: 0 10px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
background: #efefef;
|
|
}
|
|
.btn:hover {
|
|
opacity: 0.7;
|
|
}
|
|
.btn_green {
|
|
background: #37df5c;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
</style>
|