diff --git a/backend/database/client.js b/backend/database/client.js index 3a4ad5b..95e3a41 100644 --- a/backend/database/client.js +++ b/backend/database/client.js @@ -1,3 +1,4 @@ +require("dotenv").config(); // Get variables from .env file for database connection const { DB_HOST, DB_PORT, DB_USER, DB_PASSWORD, DB_NAME } = process.env; diff --git a/backend/database/schema.sql b/backend/database/schema.sql index 7b934a6..4e0bcd4 100644 --- a/backend/database/schema.sql +++ b/backend/database/schema.sql @@ -5,16 +5,16 @@ CREATE TABLE `id` int primary key auto_increment not null, `miniature` varchar(255) not null, `title` VARCHAR(50) not NULL, + `videoUrl` VARCHAR(255), `duration` INT not NULL, - `year` DATE not NULL, - `descripion` VARCHAR(500) not NULL, - `is_vailable` BOOLEAN not NULL, - `episodes_number` INT not NULL, - `seasons_number` INT not NULL + `year` VARCHAR(4) not NULL, + `description` TEXT not NULL, + `isAvailable` BOOLEAN not NULL, + `episodesNumber` INT not NULL, + `seasonsNumber` INT not NULL ); DROP TABLE IF EXISTS `User`; - CREATE TABLE `User` ( `id` int primary key auto_increment not null, @@ -23,20 +23,187 @@ CREATE TABLE `naissance` DATE NOT NULL, `civility` BOOLEAN NOT NULL, `password` varchar(50) not null, - `is_admin` bool not null + `IsAdmin` bool not null ); - DROP TABLE IF EXISTS `Film`; CREATE TABLE `Film` ( `id` int primary key auto_increment not null, `miniature` VARCHAR(255) not null, + `cover` VARCHAR(255) NOT NULL, `title` VARCHAR(255) not null, + `videoUrl` VARCHAR(255), `duration` INT not null, - `year` DATE NOT NULL, - `description` VARCHAR(500) not null, - `is_available` BOOLEAN NOT NULL + `year` VARCHAR(4) NOT NULL, + `description` VARCHAR(700) not null, + `IsAvailable` BOOLEAN NOT NULL + ); + +INSERT INTO + `Film` ( + `miniature`, + `cover`, + `title`, + `videoUrl`, + `duration`, + `year`, + `description`, + `IsAvailable` + ) +VALUES + ( + 'https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg', + 'https://w0.peakpx.com/wallpaper/34/966/HD-wallpaper-the-avengers-avengers-endgame-avengers-avengers-endgame.jpg', + 'Avengers: Endgame', + 'https://www.youtube.com/watch?v=TcMBFSGVi1c', + 181, + '2019', + 'After the devastating events of Avengers: Infinity War (2018), the universe is in ruins. With the help of remaining allies, the Avengers assemble once more in order to reverse Thanos actions and restore balance to the universe.', + 0 + ), + ( + 'https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_.jpg', + 'https://www.highlandernews.org/wp-content/uploads/landscape-1522924460-avengers-infinity-war-poster.jpg', + 'Avengers: Infinity War', + 'https://www.youtube.com/watch?v=6ZfuNTqbHE8', + 149, + '2018', + 'The Avengers and their allies must be willing to sacrifice all in an attempt to defeat the powerful Thanos before his blitz of devastation and ruin puts an end to the universe.', + 1 + ), + ( + 'https://m.media-amazon.com/images/M/MV5BNDYxNjQyMjAtNTdiOS00NGYwLWFmNTAtNThmYjU5ZGI2YTI1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg', + 'https://pbs.twimg.com/media/EJHjitpUUAA2EAp.jpg', + 'The Avengers', + 'https://www.youtube.com/watch?v=eOrNdBpGMv8', + 143, + '2012', + 'Earth mightiest heroes must come together and learn to fight as a team if they are going to stop the mischievous Loki and his alien army from enslaving humanity.', + 0 + ), + ( + 'https://i.ebayimg.com/images/g/Sv8AAOSwb7Rc0l0P/s-l1600.jpg', + 'https://wallpapercave.com/wp/wp11799668.jpg', + 'Iron man', + 'https://www.youtube.com/watch?v=8hYlB38asDY', + 126, + '2008', + 'After being held captive in an Afghan cave, billionaire engineer Tony Stark creates a unique weaponized suit of armor to fight evil.', + 1 + ), + ( + "https://m.media-amazon.com/images/M/MV5BMTkxM2FiYjctYjliYy00NjY2LWFmOTEtMWZiYWRjNjA4MGYxXkEyXkFqcGdeQXVyMTUzMTg2ODkz._V1_.jpg", + 'https://www.wheninmanila.com/wp-content/uploads/2023/11/SHARED-Cover-Collage-x2-30-2.png', + "Aquaman and the Lost Kingdom", + "https://www.youtube.com/watch?v=2wcj6SrX4zw", + 120, + "2023", + "The film is directed by James Wan from a screenplay written by David Leslie Johnson-McGoldrick and Will Beall and stars Jason Momoa as Aquaman, alongside Amber Heard, Patrick Wilson, Dolph Lundgren, Yahya Abdul-Mateen II, and Temuera Morrison. In the film, Aquaman must save the world from the threat of Ocean Master and Black Manta.", + 0 + ), + ( + "https://cdn.entries.clios.com/styles/clio_aotw_ems_image_details_retina/s3/entry_attachments/image/72/2297/22197/123544/xBckjuirX08J68hRmi7_Zgv4jhFeC3AbYX8REOHE770.jpeg/xBckjuirX08J68hRmi7_Zgv4jhFeC3AbYX8REOHE770.jpeg", + 'https://w0.peakpx.com/wallpaper/307/244/HD-wallpaper-batman-the-batman.jpg', + "The Batman", + "https://www.youtube.com/watch?v=mqqft2x_Aa4", + 120, + "2022", + "The film is directed by Matt Reeves, who wrote the screenplay with Peter Craig. It stars Robert Pattinson as Bruce Wayne / Batman, with Zoë Kravitz, Paul Dano, Jeffrey Wright, John Turturro, Peter Sarsgaard, Barry Keoghan, Jayme Lawson, Andy Serkis, and Colin Farrell rounding out the ensemble cast.", + 1 + ), + ( + 'https://m.media-amazon.com/images/M/MV5BMzZhYTVlMTMtMGZhMC00ZWYxLTljZDQtN2Y3YmFmZTk5OWU2XkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_FMjpg_UX1000_.jpg', + 'https://www.tvinsider.com/wp-content/uploads/2023/11/avatar-the-last-airbender-770x433.jpg', + 'Avatar: The Last Airbender', + 'https://www.youtube.com/watch?v=waJKJW_XU90&ab_channel=Netflix', + 103, + '2010', + 'Air, Water, Earth, Fire: the balance of the world is tipped by a savage war waged for a century already by the Fire Nation against the three other nations. Challenging his courage and combat skills, Aang discovers that he is the new Avatar, the only one capable of mastering all four elements. He joins forces with Katara, a Waterbender, and his older brother Sokka, to stop the Fire Nation before it is too late...', + 0 + ), + ( + 'https://fr.web.img4.acsta.net/pictures/21/11/17/17/24/3336846.jpg', + 'https://hustonsite.files.wordpress.com/2023/06/93361-matrixresurrections_bannerposter.jpg', + 'Matrix Resurrections', + 'https://www.youtube.com/watch?v=9ix7TUGVYIo', + 148, + '2020', + 'MATRIX RESURRECTIONS takes us back into two parallel realities – that of our daily lives and that of the world hidden there. To know with certainty whether his own reality is a physical or mental construct, and to truly know himself, Mr. Anderson will have to follow the white rabbit again. ', + 1 + ), + ( + 'https://static.posters.cz/image/1300/art-photo/harry-potter-and-the-half-blood-prince-i167377.jpg', + 'https://picfiles.alphacoders.com/621/62184.jpg', + 'Harry Potter and the Half-Blood Prince', + 'https://www.youtube.com/watch?v=tAiy66Xrsz4&ab_channel=HarryPotter', + 153, + '2009', + 'Voldemort demonic grip tightens on the Muggle universe and the world of witchcraft. Hogwarts has ceased to be a haven of peace, danger lurks in the heart of the castle... But Dumbledore is more determined than ever to prepare Harry for his final battle, now imminent.', + 0 + ), + ( + 'https://fr.web.img2.acsta.net/pictures/17/09/12/10/29/1142495.jpg', + 'https://pop.h-cdn.co/assets/17/39/1600x900/hd-aspect-1506522430-2049.jpg', + 'Blade Runner 2049', + 'https://www.youtube.com/watch?v=gCcx85zbxz4&ab_channel=WarnerBros.France', + 164, + '2017', + 'In 2049, society is weakened by the numerous tensions between humans and their slaves created by bioengineering. Officer K is a Blade Runner: part of an elite task force tasked with finding and eliminating those who do not obey human orders.', + 1 + ), + ( + 'https://fr.web.img4.acsta.net/r_1280_720/img/6b/c7/6bc7a13ca6446a603f160b4ab4414141.jpg', + 'https://c8.alamy.com/comp/K36B8T/gladiator-gladiator-date-2000-K36B8T.jpg', + 'Gladiator', + 'https://www.youtube.com/watch?v=owK1qxDselE&ab_channel=UniversalPicturesFrance', + 155, + '2000', + 'The Roman general Maximus is the most faithful support of the Emperor Marcus Aurelius, whom he led from victory to victory with exemplary bravery and dedication. Jealous of Maximus prestige, and even more so of the emperor love for him, Marcus Aurelius son, Commodus, brutally assumed power, then ordered the general arrest and execution. Maximus escapes his assassins but cannot prevent the massacre of his family. Captured by a slave trader, he becomes a gladiator and plots his revenge', + 0 + ), + ( + 'https://fr.web.img6.acsta.net/medias/nmedia/18/82/69/17/19806656.jpg', + 'https://assets.mubicdn.net/images/artworks/582651/images-original.png?1686650120', + 'Intouchables', + 'https://www.youtube.com/watch?v=34WIbmXkewU&ab_channel=Gaumont', + 92, + '2011', + 'Following a paragliding accident, Philippe, a rich aristocrat, hires Driss, a young man from the suburbs who has just been released from prison, as a home helper. In short the least appropriate person for the job. Together they will bring together Vivaldi and Earth Wind and Fire, the word and the joke, the costumes and the tracksuit bottoms... Two universes will collide, tame each other, to give birth to a friendship as crazy, funny and strong than unexpected, a unique relationship that will spark and make them... Untouchable.', + 1 + ); + +INSERT INTO + `Serie` ( + `miniature`, + `title`, + `duration`, + `year`, + `description`, + `IsAvailable`, + `episodesNumber`, + `seasonsNumber` + ) +VALUES + ( + "https://fr.web.img6.acsta.net/r_1280_720/pictures/23/01/30/15/02/5217749.jpg", + 'One Piece', + 55, + '2023', + 'Monkey D. Luffy is a young adventurer who has always dreamed of a life of freedom. Leaving his village, he embarks on a perilous journey in search of a mythical treasure, the One Piece, in order to become the king of the pirates! But to find this famous loot, Luffy will have to assemble the crew of his dreams then find a ship, crisscross the oceans, get rid of the Navy on his heels and prove himself to be a better strategist than the dangerous rivals who await him at every step.', + 1, + 9, + 1 + ), + ( + "https://fr.web.img2.acsta.net/pictures/19/08/02/15/12/4423178.jpg", + "Naruto", + 22, + "2002", + "In the village of Konoha lives Naruto, a young boy hated and feared by the villagers, due to the fact that he holds within him Kyuubi (nine-tailed fox demon) of incredible strength, who has killed a large number of people. Konoha's most powerful ninja at the time, Minato Namikaze, managed to seal this demon in Naruto's body. This is how twelve years later, Naruto dreams of becoming the greatest Hokage of Konoha so that everyone will recognize his true worth. But the road to becoming Hokage is very long.", + 1, + 224, + 9 ); DROP TABLE IF EXISTS `Categorie`; @@ -52,86 +219,149 @@ DROP TABLE IF EXISTS `Favori_film`; CREATE TABLE `Favori_film` ( - `user_id` INT NOT NULL, - `film_id` INT NOT NULL, - CONSTRAINT FK_Favori_Film_user_id FOREIGN KEY (`user_id`) REFERENCES `User`(`id`), - CONSTRAINT FK_Favori_Film_film_id FOREIGN KEY (`film_id`) REFERENCES `Film`(`id`), - PRIMARY KEY(`user_id`, `film_id`) + `userId` INT NOT NULL, + `filmId` INT NOT NULL, + CONSTRAINT FK_Favori_Film_user_id FOREIGN KEY (`userId`) REFERENCES `User` (`id`), + CONSTRAINT FK_Favori_Film_film_id FOREIGN KEY (`filmId`) REFERENCES `Film` (`id`), + PRIMARY KEY (`userId`, `filmId`) ); DROP TABLE IF EXISTS `Favori_serie`; CREATE TABLE `Favori_serie` ( - `user_id` INT NOT NULL, - `serie_id` INT NOT NULL, - CONSTRAINT FK_Favori_Serie_user_id FOREIGN KEY (`user_id`) REFERENCES `User`(`id`), - CONSTRAINT FK_Favori_Serie_serie_id FOREIGN KEY (`serie_id`) REFERENCES `Serie`(`id`), - PRIMARY KEY (`user_id`, `serie_id`) + `userId` INT NOT NULL, + `serieId` INT NOT NULL, + CONSTRAINT FK_Favori_Serie_user_id FOREIGN KEY (`userId`) REFERENCES `User` (`id`), + CONSTRAINT FK_Favori_Serie_serie_id FOREIGN KEY (`serieId`) REFERENCES `Serie` (`id`), + PRIMARY KEY (`userId`, `serieId`) ); DROP TABLE IF EXISTS `En_tendance_film`; CREATE TABLE `En_tendance_film` ( - `user_id` INT NOT NULL, - `film_id` INT NOT NULL, - CONSTRAINT FK_En_tendance_Film_user_id FOREIGN KEY (`user_id`) REFERENCES `User`(`id`), - CONSTRAINT FK_En_tendance_Film_film_id FOREIGN KEY (`film_id`) REFERENCES `Film`(`id`), - PRIMARY KEY (`user_id`, `film_id`) + `userId` INT NOT NULL, + `filmId` INT NOT NULL, + CONSTRAINT FK_En_tendance_Film_user_id FOREIGN KEY (`userId`) REFERENCES `User` (`id`), + CONSTRAINT FK_En_tendance_Film_film_id FOREIGN KEY (`filmId`) REFERENCES `Film` (`id`), + PRIMARY KEY (`userId`, `filmId`) ); DROP TABLE IF EXISTS ` En_tendance_serie`; CREATE TABLE - `en_tendance_serie` ( - `user_id` INT NOT NULL, - `serie_id` INT NOT NULL, - CONSTRAINT FK_En_tendance_Serie_user_id FOREIGN KEY (`user_id`) REFERENCES `User`(`id`), - CONSTRAINT FK_En_tendance_Serie_serie_id FOREIGN KEY (`serie_id`) REFERENCES `Serie`(`id`), - PRIMARY KEY (`user_id`, `serie_id`) + `En_tendance_serie` ( + `userId` INT NOT NULL, + `serieId` INT NOT NULL, + CONSTRAINT FK_En_tendance_Serie_user_id FOREIGN KEY (`userId`) REFERENCES `User` (`id`), + CONSTRAINT FK_En_tendance_Serie_serie_id FOREIGN KEY (`serieId`) REFERENCES `Serie` (`id`), + PRIMARY KEY (`userId`, `serieId`) ); DROP TABLE IF EXISTS `Commentaire_serie`; CREATE TABLE `Commentaire_serie` ( - `user_id` INT NOT NULL, - `serie_id` INT NOT NULL, - CONSTRAINT FK_Commentaire_Serie_user_id FOREIGN KEY (`user_id`) REFERENCES `User`(`id`), - CONSTRAINT FK_Commentaire_serie_serie_id FOREIGN KEY (`serie_id`) REFERENCES `Serie`(`id`), - PRIMARY KEY (`user_id`, `serie_id`) + `userId` INT NOT NULL, + `serieId` INT NOT NULL, + CONSTRAINT FK_Commentaire_Serie_user_id FOREIGN KEY (`userId`) REFERENCES `User` (`id`), + CONSTRAINT FK_Commentaire_serie_serie_id FOREIGN KEY (`serieId`) REFERENCES `Serie` (`id`), + PRIMARY KEY (`userId`, `serieId`) ); DROP TABLE IF EXISTS `Commentaire_film`; CREATE TABLE `Commentaire_film` ( - `user_id` INT NOT NULL, - `film_id` INT NOT NULL, - CONSTRAINT FK_Commentaire_Film_user_id FOREIGN KEY (`user_id`) REFERENCES `User`(`id`), - CONSTRAINT FK_Commentaire_Film_film_id FOREIGN KEY (`film_id`) REFERENCES `Film`(`id`), - PRIMARY KEY (`user_id`, `film_id`) + `userId` INT NOT NULL, + `filmId` INT NOT NULL, + CONSTRAINT FK_Commentaire_Film_user_id FOREIGN KEY (`userId`) REFERENCES `User` (`id`), + CONSTRAINT FK_Commentaire_Film_film_id FOREIGN KEY (`filmId`) REFERENCES `Film` (`id`), + PRIMARY KEY (`userId`, `filmId`) ); DROP TABLE IF EXISTS `Categorie_par_serie`; CREATE TABLE `Categorie_par_serie` ( - `serie_id` INT NOT NULL, - `categorie_id` INT NOT NULL, - CONSTRAINT FK_Categorie_Par_Serie_serie_id FOREIGN KEY (`serie_id`) REFERENCES `Serie`(`id`), - CONSTRAINT FK_Categorie_Par_Serie_categorie_id FOREIGN KEY (`categorie_id`) REFERENCES `Categorie`(`id`), - PRIMARY KEY (`serie_id`, `categorie_id`) + `serieId` INT NOT NULL, + `categorieId` INT NOT NULL, + CONSTRAINT FK_Categorie_Par_Serie_serie_id FOREIGN KEY (`serieId`) REFERENCES `Serie` (`id`), + CONSTRAINT FK_Categorie_Par_Serie_categorie_id FOREIGN KEY (`categorieId`) REFERENCES `Categorie` (`id`), + PRIMARY KEY (`serieId`, `categorieId`) ); DROP TABLE IF EXISTS `Categorie_par_film`; CREATE TABLE `Categorie_par_film` ( - `film_id` INT NOT NULL, - `categorie_id` INT NOT NULL, - CONSTRAINT FK_Categorie_Par_Film_film_id FOREIGN KEY (`film_id`) REFERENCES `Film`(`id`), - CONSTRAINT FK_Categorie_Par_Film_categorie_id FOREIGN KEY (`categorie_id`) REFERENCES `Categorie`(`id`), - PRIMARY KEY (`film_id`, `categorie_id`) - ); \ No newline at end of file + `filmId` INT NOT NULL, + `categorieId` INT NOT NULL, + CONSTRAINT FK_Categorie_Par_Film_film_id FOREIGN KEY (`filmId`) REFERENCES `Film` (`id`), + CONSTRAINT FK_Categorie_Par_Film_categorie_id FOREIGN KEY (`categorieId`) REFERENCES `Categorie` (`id`), + PRIMARY KEY (`filmId`, `categorieId`) + ); + +INSERT INTO + `Categorie` (`name`, `position`) +VALUES + ('Action', 1), + ('Adventure', 2), + ('Sci-Fi', 3), + ('Drama', 4), + ('Thriller', 5), + ('Comedy', 6), + ('Crime', 7), + ('Fantasy', 8), + ('Mystery', 9), + ('Animation', 10), + ('Family', 11), + ('Biography', 12), + ('History', 13), + ('Horror', 14), + ('Music', 15), + ('Musical', 16), + ('Romance', 17), + ('Sport', 18), + ('War', 19), + ('Western', 20); + +INSERT INTO + `User` ( + `name`, + `email`, + `naissance`, + `civility`, + `password`, + `IsAdmin` + ) +VALUES + ( + 'Aurel', + 'aurelien.emeriau@wcs.com', + '1983/06/10', + '0', + 'ggfd4554', + '0' + ), + ( + 'Alex', + 'alex@wcs.com', + '1998/03/19', + '0', + 'ggfd455', + '0' + ); + +INSERT INTO + `En_tendance_film` (`userId`, `filmId`) +VALUES + (1, 1), + (1, 2); + +INSERT INTO + `Favori_film` (`userId`, `filmId`) +VALUES + (1, 1), + (1, 2); \ No newline at end of file diff --git a/backend/public/assets/images/favicon.png b/backend/public/assets/images/favicon.png deleted file mode 100644 index 184eb51..0000000 Binary files a/backend/public/assets/images/favicon.png and /dev/null differ diff --git a/backend/seed.js b/backend/seed.js index fdcf805..ceeb61e 100644 --- a/backend/seed.js +++ b/backend/seed.js @@ -19,15 +19,31 @@ const seed = async () => { // Generating Seed Data - // Optional: Truncate tables (remove existing data) - await database.query("truncate item"); + // // Optional: Truncate tables (remove existing data) + // await database.query("truncate item"); - // Insert fake data into the 'item' table - for (let i = 0; i < 10; i += 1) { + // // Insert fake data into the 'item' table + // for (let i = 0; i < 10; i += 1) { + // queries.push( + // database.query("insert into item(title) values (?)", [ + // faker.lorem.word(), + // ]) + // ); + // } + + for (let numberOfData = 0; numberOfData < 100; numberOfData += 1) { queries.push( - database.query("insert into item(title) values (?)", [ - faker.lorem.word(), - ]) + database.query( + "INSERT INTO `Film` (`miniature`, `title`, `duration`, `year`, `description`, `is_available`) VALUES (?, ?, ?, ?, ?, ?)", + [ + faker.image.imageUrl(), + faker.lorem.words(), + faker.datatype.number(), + faker.datatype.number(), + faker.lorem.paragraph(), + faker.datatype.boolean(), + ] + ) ); } diff --git a/backend/src/app.js b/backend/src/app.js index 99b865a..1b87a29 100644 --- a/backend/src/app.js +++ b/backend/src/app.js @@ -25,17 +25,17 @@ const app = express(); // 4. Be sure to only have URLs in the array with domains from which you want to allow requests. // For example: ["http://mysite.com", "http://another-domain.com"] -// const cors = require("cors"); - -// app.use( -// cors({ -// origin: [ -// process.env.FRONTEND_URL, // keep this one, after checking the value in `backend/.env` -// "http://mysite.com", -// "http://another-domain.com", -// ], -// }) -// ); +const cors = require("cors"); // eslint-disable-line + +app.use( + cors({ + origin: [ + process.env.FRONTEND_URL, // keep this one, after checking the value in `backend/.env` + ], + }) +); +/**/ + /* ************************************************************************* */ // Request Parsing: Understanding the purpose of this part @@ -52,9 +52,9 @@ const app = express(); // Uncomment one or more of these options depending on the format of the data sent by your client: app.use(express.json()); -app.use(express.urlencoded()); -app.use(express.text()); -app.use(express.raw()); +// app.use(express.urlencoded()); +// app.use(express.text()); +// app.use(express.raw()); /* ************************************************************************* */ @@ -69,7 +69,7 @@ app.use(express.raw()); // Then, require the module and use it as middleware in your Express application: -// const cookieParser = require("cookie-parser"); +// const cookieParser = require("cookie-parser"); // eslint-disable-line // app.use(cookieParser()); @@ -106,17 +106,17 @@ app.use("/api", router); // 1. Uncomment the lines related to serving static files and redirecting unhandled requests. // 2. Ensure that the `reactBuildPath` points to the correct directory where your frontend's build artifacts are located. -const reactBuildPath = `${__dirname}/../../frontend/dist`; +// const reactBuildPath = `${__dirname}/../../frontend/dist`; -// Serve react resources +// // Serve react resources -app.use(express.static(reactBuildPath)); +app.use(express.static("./public")); -// Redirect unhandled requests to the react index file +// // Redirect unhandled requests to the react index file -app.get("*", (req, res) => { - res.sendFile(`${reactBuildPath}/index.html`); -}); +// app.get("*", (req, res) => { +// res.sendFile(`${reactBuildPath}/index.html`); +// }); /* ************************************************************************* */ diff --git a/backend/src/controllers/categorieControllers.js b/backend/src/controllers/categorieControllers.js new file mode 100644 index 0000000..be0d6fc --- /dev/null +++ b/backend/src/controllers/categorieControllers.js @@ -0,0 +1,109 @@ +// Import access to database tables +const tables = require("../tables"); + +// The B of BREAD - Browse (Read All) operation +const browse = async (request, response, next) => { + try { + // Fetch all items from the database + const categories = await tables.categorie.readAll(); + + // Respond with the items in JSON format + response.json(categories); + } catch (error) { + // Pass any errors to the error-handling middleware + next(error); + } +}; + +// The R of BREAD - Read operation +const read = async (request, response, next) => { + try { + // Fetch a specific item from the database based on the provided ID + const categorie = await tables.categorie.read(request.params.id); + + // If the item is not found, respond with HTTP 404 (Not Found) + // Otherwise, respond with the item in JSON format + if (categorie == null) { + response.sendStatus(404); + } else { + response.json(categorie); + } + } catch (error) { + // Pass any errors to the error-handling middleware + next(error); + } +}; + +// The E of BREAD - Edit (Update) operation +const edit = async (request, response, next) => { + // Extract the ID of the item to be updated from the request parameters + const { id } = request.params; + + // Add the ID to the item data extracted from the request body + request.body.id = id; + + try { + // Update the item in the database + const result = await tables.categorie.update(request.body); + + // If the item is not found, respond with HTTP 404 (Not Found) + // Otherwise, respond with HTTP 204 (No Content) + if (result) { + response.json(result); + response.sendStatus(204); + } else { + response.sendStatus(404); + } + } catch (err) { + // Pass any errors to the error-handling middleware + next(err); + } +}; + +// The A of BREAD - Add (Create) operation +const add = async (request, response, next) => { + // Extract the item data from the request body + const categorie = request.body; + + try { + // Insert the item into the database + const insertId = await tables.categorie.create(categorie); + + // Respond with HTTP 201 (Created) and the ID of the newly inserted item + response.status(201).json({ insertId }); + } catch (err) { + // Pass any errors to the error-handling middleware + next(err); + } +}; + +// The D of BREAD - Destroy (Delete) operation +const destroy = async (request, response, next) => { + // Extract the ID of the item to be deleted from the request parameters + const { id } = request.params.id; + + try { + // Delete the item from the database + const result = await tables.categorie.delete(id); + + // If the item is not found, respond with HTTP 404 (Not Found) + // Otherwise, respond with HTTP 200 (OK) + if (result.affectedRows) { + response.sendStatus(200); + } else { + response.sendStatus(404); + } + } catch (err) { + // Pass any errors to the error-handling middleware + next(err); + } +}; + +// Ready to export the controller functions +module.exports = { + browse, + read, + edit, + add, + destroy, +}; diff --git a/backend/src/controllers/categorieParFilmControllers.js b/backend/src/controllers/categorieParFilmControllers.js new file mode 100644 index 0000000..61d62e6 --- /dev/null +++ b/backend/src/controllers/categorieParFilmControllers.js @@ -0,0 +1,81 @@ +// Import access to database tables +const tables = require("../tables"); + +// The B of BREAD - Browse (Read All) operation +const browseCategoriesForSpecificFilm = async (request, response, next) => { + try { + // Fetch all items from the database + const categories = + await tables.categorieParFilm.readAllCategoriesForSpecificFilm( + request.params.id + ); + + // Respond with the items in JSON format + response.json(categories); + } catch (error) { + // Pass any errors to the error-handling middleware + next(error); + } +}; + +const browseFilmsForSpecificCategorie = async (request, response, next) => { + try { + // Fetch all items from the database + const films = + await tables.categorieParFilm.readAllFilmsForSpecificCategorie( + request.params.id + ); + + // Respond with the items in JSON format + response.json(films); + } catch (error) { + // Pass any errors to the error-handling middleware + next(error); + } +}; + +// The A of BREAD - Add operation +const add = async (request, response, next) => { + const { filmId, categorieId } = request.body; + + try { + // Insert the new item into the database + const id = await tables.categorieParFilm.create({ filmId, categorieId }); + + // Fetch the newly created item from the database + const categorieParFilm = await tables.categorieParFilm.read(id); + + // Respond with the newly created item in JSON format + response.json(categorieParFilm); + } catch (error) { + // Pass any errors to the error-handling middleware + next(error); + } +}; + +// The D of BREAD - Delete operation +const destroy = async (request, response, next) => { + try { + // Delete the item from the database + const result = await tables.categorieParFilm.delete(request.params.id); + + // If the item is not found, respond with HTTP 404 (Not Found) + // Otherwise, respond with HTTP 204 (No Content) + if (result) { + response.sendStatus(204); + } else { + response.sendStatus(404); + } + } catch (error) { + // Pass any errors to the error-handling middleware + next(error); + } +}; + +// Ready to export the controller functions +module.exports = { + browseCategoriesForSpecificFilm, + browseFilmsForSpecificCategorie, + add, + destroy, +}; diff --git a/backend/src/controllers/itemControllers.js b/backend/src/controllers/enTendanceFilmControllers.js similarity index 66% rename from backend/src/controllers/itemControllers.js rename to backend/src/controllers/enTendanceFilmControllers.js index fca2dc2..32e20ca 100644 --- a/backend/src/controllers/itemControllers.js +++ b/backend/src/controllers/enTendanceFilmControllers.js @@ -5,10 +5,10 @@ const tables = require("../tables"); const browse = async (req, res, next) => { try { // Fetch all items from the database - const items = await tables.item.readAll(); + const tendances = await tables.En_Tendance_Film.readAll(); // Respond with the items in JSON format - res.json(items); + res.json(tendances); } catch (err) { // Pass any errors to the error-handling middleware next(err); @@ -19,14 +19,14 @@ const browse = async (req, res, next) => { const read = async (req, res, next) => { try { // Fetch a specific item from the database based on the provided ID - const item = await tables.item.read(req.params.id); + const tendances = await tables.En_Tendance_Film.read(req.params.id); // If the item is not found, respond with HTTP 404 (Not Found) // Otherwise, respond with the item in JSON format - if (item == null) { + if (tendances == null) { res.sendStatus(404); } else { - res.json(item); + res.json(tendances); } } catch (err) { // Pass any errors to the error-handling middleware @@ -40,14 +40,14 @@ const read = async (req, res, next) => { // The A of BREAD - Add (Create) operation const add = async (req, res, next) => { // Extract the item data from the request body - const item = req.body; + const tendances = req.body; try { // Insert the item into the database - const insertId = await tables.item.create(item); + const insertId = await tables.En_Tendance_Film.create(tendances); // Respond with HTTP 201 (Created) and the ID of the newly inserted item - res.status(201).json({ insertId }); + res.status(200).json({ insertId }); } catch (err) { // Pass any errors to the error-handling middleware next(err); @@ -56,12 +56,25 @@ const add = async (req, res, next) => { // The D of BREAD - Destroy (Delete) operation // This operation is not yet implemented +const destroy = async (req, res, next) => { + const { id: userId } = req.params; + const { filmId } = req.body; + try { + const [result] = await tables.En_Tendance_Film.delete(userId, filmId); + if (result.affectedRows) { + res.sendStatus(200); + } else { + res.sendStatus(404); + } + } catch (err) { + next(err); + } +}; // Ready to export the controller functions module.exports = { browse, read, - // edit, add, - // destroy, + destroy, }; diff --git a/backend/src/controllers/favoriFilmControllers.js b/backend/src/controllers/favoriFilmControllers.js new file mode 100644 index 0000000..9467cbb --- /dev/null +++ b/backend/src/controllers/favoriFilmControllers.js @@ -0,0 +1,56 @@ +const tables = require("../tables"); + +const browse = async (req, res, next) => { + try { + const favorites = await tables.favori_film.readAll(); + res.json(favorites); + } catch (err) { + next(err); + } +}; + +const read = async (req, res, next) => { + try { + const favorite = await tables.favori_film.read(req.params.id); + if (favorite == null) { + res.sendStatus(404); + } else { + res.json(favorite); + } + } catch (err) { + next(err); + } +}; + +const add = async (req, res, next) => { + const favorite = req.body; + + try { + const insertId = await tables.favori_film.create(favorite); + res.status(200).json({ insertId }); + } catch (err) { + next(err); + } +}; + +const destroy = async (req, res, next) => { + const { id: userId } = req.params; + const { filmId } = req.body; + + try { + const [result] = await tables.favori_film.delete(userId, filmId); + if (result.affectedRows) { + res.sendStatus(200); + } else { + res.sendStatus(404); + } + } catch (err) { + next(err); + } +}; +module.exports = { + browse, + read, + add, + destroy, +}; diff --git a/backend/src/controllers/favoriSerieControllers.js b/backend/src/controllers/favoriSerieControllers.js new file mode 100644 index 0000000..e88f0c0 --- /dev/null +++ b/backend/src/controllers/favoriSerieControllers.js @@ -0,0 +1,57 @@ +const tables = require("../tables"); + +const browse = async (req, res, next) => { + try { + const FavoriSeries = await tables.favori_serie.readAll(); + res.json(FavoriSeries); + } catch (err) { + next(err); + } +}; + +const read = async (req, res, next) => { + try { + const favoriSerie = await tables.favori_serie.read(req.params.id); + if (favoriSerie == null) { + res.sendStatus(404); + } else { + res.json(favoriSerie); + } + } catch (err) { + next(err); + } +}; + +const add = async (req, res, next) => { + const favorite = req.body; + + try { + const insertId = await tables.favori_serie.create(favorite); + res.status(200).json({ insertId }); + } catch (err) { + next(err); + } +}; + +const destroy = async (req, res, next) => { + const { id: userId } = req.params; + const { serieId } = req.body; + + try { + const [result] = await tables.favori_serie.delete(userId, serieId); + if (result.affectedRows) { + res.sendStatus(200); + } else { + res.sendStatus(404); + } + } catch (err) { + next(err); + } +}; + +module.exports = { + browse, + read, + add, + destroy, +}; diff --git a/backend/src/controllers/filmControllers.js b/backend/src/controllers/filmControllers.js new file mode 100644 index 0000000..0ee7e8a --- /dev/null +++ b/backend/src/controllers/filmControllers.js @@ -0,0 +1,72 @@ +const tables = require("../tables"); + +const browse = async (req, res, next) => { + try { + const films = await tables.film.readAll(); + res.json(films); + } catch (err) { + next(err); + } +}; + +const read = async (req, res, next) => { + try { + const film = await tables.film.read(req.params.id); + if (film == null) { + res.sendStatus(404); + } else { + res.json(film); + } + } catch (err) { + next(err); + } +}; + +const edit = async (req, res, next) => { + const { id } = req.params; + req.body.id = id; + try { + const result = await tables.film.update(req.body); + if (result) { + res.json(result); + res.sendStatus(204); + } else { + res.sendStatus(404); + } + } catch (err) { + next(err); + } +}; + +const add = async (req, res, next) => { + const film = req.body; + + try { + const insertId = await tables.film.create(film); + res.status(201).json({ insertId }); + } catch (err) { + next(err); + } +}; + +const destroy = async (req, res, next) => { + const { id } = req.params; + try { + const [result] = await tables.film.delete(id); + if (result.affectedRows) { + res.sendStatus(200); + } else { + res.sendStatus(404); + } + } catch (err) { + next(err); + } +}; + +module.exports = { + browse, + read, + edit, + add, + destroy, +}; diff --git a/backend/src/controllers/serieControllers.js b/backend/src/controllers/serieControllers.js new file mode 100644 index 0000000..af24827 --- /dev/null +++ b/backend/src/controllers/serieControllers.js @@ -0,0 +1,72 @@ +const tables = require("../tables"); + +const browse = async (req, res, next) => { + try { + const series = await tables.serie.readAll(); + res.json(series); + } catch (err) { + next(err); + } +}; + +const read = async (req, res, next) => { + try { + const serie = await tables.serie.read(req.params.id); + if (serie == null) { + res.sendStatus(404); + } else { + res.json(serie); + } + } catch (err) { + next(err); + } +}; + +const edit = async (req, res, next) => { + const { id } = req.params; + req.body.id = id; + try { + const result = await tables.serie.update(req.body); + if (result) { + res.json(result); + res.sendStatus(204); + } else { + res.sendStatus(404); + } + } catch (err) { + next(err); + } +}; + +const add = async (req, res, next) => { + const serie = req.body; + + try { + const insertId = await tables.serie.create(serie); + res.status(201).json({ insertId }); + } catch (err) { + next(err); + } +}; + +const destroy = async (req, res, next) => { + const { id } = req.params; + try { + const result = await tables.serie.delete(id); + if (result.affectedRows) { + res.sendStatus(200); + } else { + res.sendStatus(404); + } + } catch (err) { + next(err); + } +}; + +module.exports = { + browse, + read, + edit, + add, + destroy, +}; diff --git a/backend/src/controllers/userControllers.js b/backend/src/controllers/userControllers.js new file mode 100644 index 0000000..4d2626e --- /dev/null +++ b/backend/src/controllers/userControllers.js @@ -0,0 +1,97 @@ +// Import access to database tables +const tables = require("../tables"); + +// The B of BREAD - Browse (Read All) operation +const browse = async (req, res, next) => { + try { + // Fetch all items from the database + const users = await tables.user.readAll(); + + // Respond with the items in JSON format + res.json(users); + } catch (err) { + // Pass any errors to the error-handling middleware + next(err); + } +}; + +// The R of BREAD - Read operation +const read = async (req, res, next) => { + try { + // Fetch a specific item from the database based on the provided ID + const user = await tables.user.read(req.params.id); + + // If the item is not found, respond with HTTP 404 (Not Found) + // Otherwise, respond with the item in JSON format + if (user == null) { + res.sendStatus(404); + } else { + res.json(user); + } + } catch (err) { + // Pass any errors to the error-handling middleware + next(err); + } +}; + +// The E of BREAD - Edit (Update) operation +// This operation is not yet implemented + +// eslint-disable-next-line consistent-return +const edit = async (req, res, next) => { + const { id } = req.params; + req.body.id = id; + try { + const result = await tables.user.update(req.body); + if (result) { + res.json(result); + res.status(204); + } else { + return res.sendStatus(404); + } + } catch (err) { + next(err); + } +}; + +// The A of BREAD - Add (Create) operation +const add = async (req, res, next) => { + // Extract the item data from the request body + const user = req.body; + + try { + // Insert the item into the database + const insertId = await tables.user.create(user); + + // Respond with HTTP 201 (Created) and the ID of the newly inserted item + res.status(201).json({ insertId }); + } catch (err) { + // Pass any errors to the error-handling middleware + next(err); + } +}; + +// The D of BREAD - Destroy (Delete) operation +// This operation is not yet implemented +const destroy = async (req, res, next) => { + const { id } = req.params; + try { + const result = await tables.user.delete(id); + if (result.affectedRows) { + res.sendStatus(200); + } else { + res.sendStatus(404); + } + } catch (err) { + next(err); + } +}; + +// Ready to export the controller functions +module.exports = { + browse, + read, + edit, + add, + destroy, +}; diff --git a/backend/src/models/CategorieManager.js b/backend/src/models/CategorieManager.js new file mode 100644 index 0000000..8d9c4cf --- /dev/null +++ b/backend/src/models/CategorieManager.js @@ -0,0 +1,73 @@ +const AbstractManager = require("./AbstractManager"); + +class CategorieManager extends AbstractManager { + constructor() { + // Call the constructor of the parent class (AbstractManager) + // and pass the table name "categorie" as configuration + super({ table: "categorie" }); + } + + // The C of CRUD - Create operation + + async create({ name, position }) { + // Execute the SQL INSERT query to add a new categorie to the "categorie" table + const [result] = await this.database.query( + `insert into ${this.table} (name, position) values (?, ?)`, + [name, position] + ); + + // Return the ID of the newly inserted categorie + return result.insertId; + } + + // The Rs of CRUD - Read operations + + async read(id) { + // Execute the SQL SELECT query to retrieve a specific categorie by its ID + const [rows] = await this.database.query( + `select * from ${this.table} where id = ?`, + [id] + ); + + // Return the first row of the result, which represents the categorie + return rows[0]; + } + + async readAll() { + // Execute the SQL SELECT query to retrieve all categories from the "categorie" table + const [rows] = await this.database.query(`select * from ${this.table}`); + + // Return the array of categories + return rows; + } + + // The U of CRUD - Update operation + // ^ Implemented the update operation to modify an existing categorie + + async update({ id, name, position }) { + // Execute the SQL UPDATE query to modify an existing categorie + const [result] = await this.database.query( + `update ${this.table} set name = ?, position = ? where id = ?`, + [name, position, id] + ); + + // Return the number of affected rows + return result.affectedRows; + } + + // The D of CRUD - Delete operation + // ^ Implemented the delete operation to remove an categorie by its ID + + async delete(id) { + // Execute the SQL DELETE query to remove the categorie from the "categorie" table + const [result] = await this.database.query( + `delete from ${this.table} where id = ?`, + [id] + ); + + // Return the number of affected rows + return result; + } +} + +module.exports = CategorieManager; diff --git a/backend/src/models/CategorieParFilmManager.js b/backend/src/models/CategorieParFilmManager.js new file mode 100644 index 0000000..036dcbb --- /dev/null +++ b/backend/src/models/CategorieParFilmManager.js @@ -0,0 +1,60 @@ +const AbstractManager = require("./AbstractManager"); + +class CategorieParFilmManager extends AbstractManager { + constructor() { + // Call the constructor of the parent class (AbstractManager) + // and pass the table name "categorieParFilm" as configuration + super({ table: "categorieParFilm" }); + } + + // The C of CRUD - Create operation + async create({ filmId, categorieId }) { + // Execute the SQL INSERT query to add a new categorieParFilm to the "categorieParFilm" table + const [result] = await this.database.query( + `insert into ${this.table} (filmId, categorieId) values (?, ?)`, + [filmId, categorieId] + ); + + // Return the ID of the newly inserted categorieParFilm + return result.insertId; + } + + // The Rs of CRUD - Read operations + // ? get all categories for a specific film + async readAllCategoriesForSpecificFilm(idFilm) { + // Execute the SQL SELECT query to retrieve all categories from the "categorie" table + const [rows] = await this.database.query( + `select categorie.name from categorie inner join ${this.table} on categorie.id = ${this.table}.categorieId where ${this.table}.filmId = ?`, + [idFilm] + ); + // Return the array of categories + return rows; + } + + // ? get all films for a specific categorie + async readAllFilmsForSpecificCategorie(idCategorie) { + // Execute the SQL SELECT query to retrieve all categories from the "categorie" table + const [rows] = await this.database.query( + `select film.title from film inner join ${this.table} on film.id = ${this.table}.filmId where ${this.table}.categorieId = ?`, + [idCategorie] + ); + // Return the array of categories + return rows; + } + + // The D of CRUD - Delete operation + + async delete({ filmId, categorieId }) { + // Execute the SQL DELETE query to remove an categorieParFilm by its ID + const [result] = await this.database.query( + `delete from ${this.table} where filmId = ? and categorieId = ?`, + [filmId, categorieId] + ); + + // Return the number of affected rows + return result.affectedRows; + } +} + +// Ready to export the manager +module.exports = CategorieParFilmManager; diff --git a/backend/src/models/EnTendanceFilmManager.js b/backend/src/models/EnTendanceFilmManager.js new file mode 100644 index 0000000..9bd5070 --- /dev/null +++ b/backend/src/models/EnTendanceFilmManager.js @@ -0,0 +1,72 @@ +const AbstractManager = require("./AbstractManager"); + +class EnTendanceFilmManager extends AbstractManager { + constructor() { + // Call the constructor of the parent class (AbstractManager) + // and pass the table name "En_Tendance_Film" as configuration + super({ table: "En_Tendance_Film" }); + } + + // The C of CRUD - Create operation + + async create({ userId, filmId }) { + // Execute the SQL INSERT query to add a new item to the "user" table + const [result] = await this.database.query( + `insert into ${this.table} (userId, filmId) values (?, ?)`, + [userId, filmId] + ); + + // Return the ID of the newly inserted item + return result.insertId; + } + // The Rs of CRUD - Read operations + + async read(id) { + // Execute the SQL SELECT query to retrieve a specific item by its ID + const [rows] = await this.database.query( + `SELECT u.id, f.id, f.title + FROM En_tendance_film tf + INNER JOIN user u on tf.userId = u.id + INNER JOIN film f on tf.filmId = f.id + where tf.userId = ?`, + [id] + ); + + // Return the first row of the result, which represents the item + return rows; + } + + async readAll() { + // Execute the SQL SELECT query to retrieve all items from the "user" table + const [result] = await this.database.query(`select * from ${this.table}`); + return result; + } + // The U of CRUD - Update operation + // TODO: Implement the update operation to modify an existing item + + async update({ userId, filmId }) { + // Execute the SQL UPDATE query to update a item to the "user" table + const [result] = await this.database.query( + `UPDATE ${this.table} SET userId=?, filmId=? WHERE id=?`, + [userId, filmId] + ); + + // Return the ID of the newly inserted item + return result; + } + + // The D of CRUD - Delete operation + // TODO: Implement the delete operation to remove an item by its ID + + async delete(userId, filmId) { + const [result] = await this.database.query( + `DELETE from ${this.table} WHERE userId = ? and filmId = ?`, + [userId, filmId] + ); + + // Return the first row of the result, which represents the item + return result; + } +} + +module.exports = EnTendanceFilmManager; diff --git a/backend/src/models/FavoriFilmManager.js b/backend/src/models/FavoriFilmManager.js new file mode 100644 index 0000000..5d11bf0 --- /dev/null +++ b/backend/src/models/FavoriFilmManager.js @@ -0,0 +1,41 @@ +const AbstractManager = require("./AbstractManager"); + +class FavoriFilmManager extends AbstractManager { + constructor() { + super({ table: "favori_film" }); + } + + async create({ userId, filmId }) { + const [result] = await this.database.query( + `insert into ${this.table} (userId, filmId) values (?,?)`, + [userId, filmId] + ); + return result.insertId; + } + + async read(id) { + const [result] = await this.database.query( + `select u.id, f.id, f.title + from Favori_film ff + inner join user u on ff.userId = u.id + inner join film f on ff.filmId = f.id + where ff.userId = ?`, + [id] + ); + return result; + } + + async readAll() { + const [result] = await this.database.query(`select * from ${this.table}`); + return result; + } + + async delete(userId, filmId) { + const [result] = await this.database.query( + `delete from ${this.table} where userId = ? and filmId = ?`, + [userId, filmId] + ); + return result; + } +} +module.exports = FavoriFilmManager; diff --git a/backend/src/models/FavoriSerieManager.js b/backend/src/models/FavoriSerieManager.js new file mode 100644 index 0000000..d67b6b1 --- /dev/null +++ b/backend/src/models/FavoriSerieManager.js @@ -0,0 +1,41 @@ +/*eslint-disable*/ +const AbstractManager = require("./AbstractManager"); + +class FavoriSerieManager extends AbstractManager { + constructor() { + super({ table: "favori_serie" }); + } + + async create({ userId, serieId }) { + const [result] = await this.database.query( + `INSERT INTO ${this.table} (userId, serieId) values (?,?)`, + [userId, serieId] + ); + return result.insertId; + } + async read(id) { + const [result] = await this.database.query( + `select u.id, s.id, s.title + from Favori_serie fs + inner join user u on fs.userId = u.id + inner join serie s on fs.serieId = s.id + where fs.userId = ?`, + [id] + ); + return result; + } + async readAll() { + const [result] = await this.database.query(`select * from ${this.table}`); + return result; + } + + async delete(userId, serieId) { + const result = await this.database.query( + `delete from ${this.table} where userId = ? and serieId = ?`, + [userId, serieId] + ); + return result; + } +} + +module.exports = FavoriSerieManager; diff --git a/backend/src/models/FilmManager.js b/backend/src/models/FilmManager.js new file mode 100644 index 0000000..35d746a --- /dev/null +++ b/backend/src/models/FilmManager.js @@ -0,0 +1,62 @@ +const AbstractManager = require("./AbstractManager"); + +class FilmManager extends AbstractManager { + constructor() { + super({ table: "film" }); + } + + async create({ + miniature, + title, + videoUrl, + duration, + year, + description, + isAvailable, + }) { + const [result] = await this.database.query( + `insert into ${this.table} (miniature, title, videoUrl, duration, year, description, isAvailable) values (?,?,?,?,?,?,?)`, + [miniature, title, videoUrl, duration, year, description, isAvailable] + ); + return result.insertId; + } + + async read(id) { + const [result] = await this.database.query( + `select * from ${this.table} where id = ?`, + [id] + ); + return result[0]; + } + + async readAll() { + const [result] = await this.database.query(`select * from ${this.table}`); + return result; + } + + async update({ + id, + miniature, + title, + videoUrl, + duration, + year, + description, + isAvailable, + }) { + const [result] = await this.database.query( + `update ${this.table} SET miniature=?, title=?, videoUrl=?, duration=?, year=?, description=?, isAvailable=? where id=?`, + [miniature, title, videoUrl, duration, year, description, isAvailable, id] + ); + return result.affectedRows; + } + + async delete(id) { + const result = await this.database.query( + `delete from ${this.table} where id = ?`, + [id] + ); + return result; + } +} +module.exports = FilmManager; diff --git a/backend/src/models/ItemManager.js b/backend/src/models/ItemManager.js deleted file mode 100644 index eeeae9f..0000000 --- a/backend/src/models/ItemManager.js +++ /dev/null @@ -1,59 +0,0 @@ -const AbstractManager = require("./AbstractManager"); - -class ItemManager extends AbstractManager { - constructor() { - // Call the constructor of the parent class (AbstractManager) - // and pass the table name "item" as configuration - super({ table: "item" }); - } - - // The C of CRUD - Create operation - - async create(item) { - // Execute the SQL INSERT query to add a new item to the "item" table - const [result] = await this.database.query( - `insert into ${this.table} (title) values (?)`, - [item.title] - ); - - // Return the ID of the newly inserted item - return result.insertId; - } - - // The Rs of CRUD - Read operations - - async read(id) { - // Execute the SQL SELECT query to retrieve a specific item by its ID - const [rows] = await this.database.query( - `select * from ${this.table} where id = ?`, - [id] - ); - - // Return the first row of the result, which represents the item - return rows[0]; - } - - async readAll() { - // Execute the SQL SELECT query to retrieve all items from the "item" table - const [rows] = await this.database.query(`select * from ${this.table}`); - - // Return the array of items - return rows; - } - - // The U of CRUD - Update operation - // TODO: Implement the update operation to modify an existing item - - // async update(item) { - // ... - // } - - // The D of CRUD - Delete operation - // TODO: Implement the delete operation to remove an item by its ID - - // async delete(id) { - // ... - // } -} - -module.exports = ItemManager; diff --git a/backend/src/models/SerieManager.js b/backend/src/models/SerieManager.js new file mode 100644 index 0000000..c0be0a7 --- /dev/null +++ b/backend/src/models/SerieManager.js @@ -0,0 +1,89 @@ +/*eslint-disable*/ + +const AbstractManager = require("./AbstractManager"); + +class SerieManager extends AbstractManager { + constructor() { + super({ table: "serie" }); + } + + async create({ + miniature, + title, + videoUrl, + duration, + year, + description, + isAvailable, + episodesNumber, + seasonsNumber, + }) { + const [result] = await this.database.query( + `INSERT INTO ${this.table} (miniature, title, videoUrl, duration, year, description, isAvailable, episodesNumber, seasonsNumber) values (?, ?, ?, ?, ?, ?, ?, ?, ?)`, + [ + miniature, + title, + videoUrl, + duration, + year, + description, + isAvailable, + episodesNumber, + seasonsNumber, + ] + ); + return result; + } + + async read(id) { + const [result] = await this.database.query( + `SELECT * FROM ${this.table} WHERE id = ?`, + [id] + ); + return result; + } + + async readAll() { + const [result] = await this.database.query(`select * from ${this.table} `); + return result; + } + + async update({ + id, + miniature, + title, + videoUrl, + duration, + year, + description, + isAvailable, + episodesNumber, + seasonsNumber, + }) { + const [result] = await this.database.query( + `UPDATE ${this.table} SET miniature=?, title=?, videoUrl=?, duration=?, year=?, description=?, isAvailable=?, episodesNumber=?, seasonsNumber=? WHERE id=?`, + [ + miniature, + title, + videoUrl, + duration, + year, + description, + isAvailable, + episodesNumber, + seasonsNumber, + id, + ] + ); + return result.affectedRows; + } + async delete(id) { + const result = await this.database.query( + `delete from ${this.table} where id = ?`, + [id] + ); + return result; + } +} + +module.exports = SerieManager; diff --git a/backend/src/models/UserManager.js b/backend/src/models/UserManager.js new file mode 100644 index 0000000..dd7fd31 --- /dev/null +++ b/backend/src/models/UserManager.js @@ -0,0 +1,70 @@ +const AbstractManager = require("./AbstractManager"); + +class UserManager extends AbstractManager { + constructor() { + // Call the constructor of the parent class (AbstractManager) + // and pass the table name "user" as configuration + super({ table: "user" }); + } + + // The C of CRUD - Create operation + + async create({ name, email, naissance, civility, password, IsAdmin }) { + // Execute the SQL INSERT query to add a new item to the "user" table + const [result] = await this.database.query( + `insert into ${this.table} (name, email, naissance, civility, password, IsAdmin) values (?, ?, ?, ?, ?, ?)`, + [name, email, naissance, civility, password, IsAdmin] + ); + + // Return the ID of the newly inserted item + return result; + } + // The Rs of CRUD - Read operations + + async read(id) { + // Execute the SQL SELECT query to retrieve a specific item by its ID + const [rows] = await this.database.query( + `select * from ${this.table} where id = ?`, + [id] + ); + + // Return the first row of the result, which represents the item + return rows; + } + + async readAll() { + // Execute the SQL SELECT query to retrieve all items from the "user" table + const [rows] = await this.database.query(`select * from ${this.table}`); + + // Return the array of items + return rows; + } + // The U of CRUD - Update operation + // TODO: Implement the update operation to modify an existing item + + async update({ name, email, naissance, civility, password, IsAdmin, id }) { + // Execute the SQL UPDATE query to update a item to the "user" table + const [result] = await this.database.query( + `UPDATE ${this.table} SET name=?, email=?, naissance=?, civility=?, password=?, IsAdmin=? WHERE id=?`, + [name, email, naissance, civility, password, IsAdmin, id] + ); + + // Return the ID of the newly inserted item + return result; + } + + // The D of CRUD - Delete operation + // TODO: Implement the delete operation to remove an item by its ID + + async delete(id) { + const [rows] = await this.database.query( + `DELETE from ${this.table} where id = ?`, + [id] + ); + + // Return the first row of the result, which represents the item + return rows; + } +} + +module.exports = UserManager; diff --git a/backend/src/router.js b/backend/src/router.js index 38f375d..39bb02a 100644 --- a/backend/src/router.js +++ b/backend/src/router.js @@ -7,17 +7,60 @@ const router = express.Router(); /* ************************************************************************* */ // Import itemControllers module for handling item-related operations -const itemControllers = require("./controllers/itemControllers"); +const categorieControllers = require("./controllers/categorieControllers"); +const filmControllers = require("./controllers/filmControllers"); +const userControllers = require("./controllers/userControllers"); +const serieControllers = require("./controllers/serieControllers"); +const enTendanceFilmControllers = require("./controllers/enTendanceFilmControllers"); +const favoriFilmControllers = require("./controllers/favoriFilmControllers"); +const favoriSerieControllers = require("./controllers/favoriSerieControllers"); +// const categorieParFilmControllers = require("./controllers/categorieParFilmControllers"); // Route to get a list of items -router.get("/items", itemControllers.browse); +router.get("/categories", categorieControllers.browse); +router.get("/films", filmControllers.browse); +router.get("/series", serieControllers.browse); +router.get("/users", userControllers.browse); +router.get("/favorites/film", favoriFilmControllers.browse); +router.get("/favorites/serie", favoriSerieControllers.browse); +router.get("/FilmsEnTendance", enTendanceFilmControllers.browse); +router.get("/favorites", favoriFilmControllers.browse); // Route to get a specific item by ID -router.get("/items/:id", itemControllers.read); +router.get("/categories/:id", categorieControllers.read); +router.get("/films/:id", filmControllers.read); +router.get("/series/:id", serieControllers.read); +router.get("/users/:id", userControllers.read); +router.get("/favorites/film/:id", favoriFilmControllers.read); +router.get("/favorites/serie/:id", favoriSerieControllers.read); +router.get("/FilmsEnTendance/:id", enTendanceFilmControllers.read); +router.get("/favorites/:id", favoriFilmControllers.read); + +// Route to edit a specific item by ID +router.put("/categories/:id", categorieControllers.edit); +router.put("/films/:id", filmControllers.edit); +router.put("/series/:id", serieControllers.edit); +router.put("/users/:id", userControllers.edit); // Route to add a new item -router.post("/items", itemControllers.add); +router.post("/categories", categorieControllers.add); +router.post("/films", filmControllers.add); +router.post("/series", serieControllers.add); +router.post("/users", userControllers.add); +router.post("/favorites/film", favoriFilmControllers.add); +router.post("/favorites/serie", favoriSerieControllers.add); +router.post("/FilmsEnTendance", enTendanceFilmControllers.add); +router.post("/favorites", favoriFilmControllers.add); +// Route to delete a specific item by ID +router.delete("/categories/:id", categorieControllers.destroy); +router.delete("/films/:id", filmControllers.destroy); +router.delete("/series/:id", serieControllers.destroy); +router.delete("/users/:id", userControllers.destroy); +router.delete("/favorites/film/:id", favoriFilmControllers.destroy); +router.delete("/favorites/serie/:id", favoriSerieControllers.destroy); +router.delete("/FilmsEnTendance/:id", enTendanceFilmControllers.destroy); /* ************************************************************************* */ +router.delete("/favorites/:id", favoriFilmControllers.destroy); module.exports = router; diff --git a/backend/src/tables.js b/backend/src/tables.js index 66d032c..9361a51 100644 --- a/backend/src/tables.js +++ b/backend/src/tables.js @@ -3,10 +3,25 @@ /* ************************************************************************* */ // Import the manager modules responsible for handling data operations on the tables -const ItemManager = require("./models/ItemManager"); +const CategorieManager = require("./models/CategorieManager"); +const UserManager = require("./models/UserManager"); +const FilmManager = require("./models/FilmManager"); +const SerieManager = require("./models/SerieManager"); +const EnTendanceFilmManager = require("./models/EnTendanceFilmManager"); +const FavoriFilmManager = require("./models/FavoriFilmManager"); +const FavoriSerieManager = require("./models/FavoriSerieManager"); +const CategorieParFilmManager = require("./models/CategorieParFilmManager"); const managers = [ - ItemManager, + CategorieManager, + UserManager, + FilmManager, + SerieManager, + EnTendanceFilmManager, + FavoriFilmManager, + FavoriSerieManager, + CategorieParFilmManager, + // Add other managers here ]; @@ -20,6 +35,8 @@ managers.forEach((ManagerClass) => { tables[manager.table] = manager; }); +console.info("Registered tables:", Object.keys(tables)); + /* ************************************************************************* */ // Use a Proxy to customize error messages when trying to access a non-existing table diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e2ed2dc..13481bf 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -5,10 +5,12 @@ "packages": { "": { "dependencies": { + "axios": "^1.6.2", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2", + "saas": "^1.0.0", "sass": "^1.69.5" }, "devDependencies": { @@ -1246,6 +1248,11 @@ "has-symbols": "^1.0.3" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -1267,6 +1274,16 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz", + "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -1488,6 +1505,17 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1626,6 +1654,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -2491,6 +2527,25 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", + "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2500,6 +2555,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -3442,6 +3510,25 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mimic-fn": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", @@ -3888,6 +3975,11 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -4232,6 +4324,11 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/saas": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/saas/-/saas-1.0.0.tgz", + "integrity": "sha512-FgayhFS18BlPfcyMcOqxD7PIyNyUjqyv8R+rsr3X2KRK2icEUL4uvWBF+lZ0IPqJIO2kUO0d20OXY+R+pdriqg==" + }, "node_modules/safe-array-concat": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz", @@ -5724,6 +5821,11 @@ "has-symbols": "^1.0.3" } }, + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -5736,6 +5838,16 @@ "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==", "dev": true }, + "axios": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz", + "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==", + "requires": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -5884,6 +5996,14 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "dev": true }, + "combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "requires": { + "delayed-stream": "~1.0.0" + } + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -5984,6 +6104,11 @@ "object-keys": "^1.1.1" } }, + "delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" + }, "dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -6644,6 +6769,11 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "follow-redirects": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", + "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==" + }, "for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -6653,6 +6783,16 @@ "is-callable": "^1.1.3" } }, + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -7305,6 +7445,19 @@ "picomatch": "^2.3.1" } }, + "mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" + }, + "mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "requires": { + "mime-db": "1.52.0" + } + }, "mimic-fn": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", @@ -7604,6 +7757,11 @@ "react-is": "^16.13.1" } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -7820,6 +7978,11 @@ "queue-microtask": "^1.2.2" } }, + "saas": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/saas/-/saas-1.0.0.tgz", + "integrity": "sha512-FgayhFS18BlPfcyMcOqxD7PIyNyUjqyv8R+rsr3X2KRK2icEUL4uvWBF+lZ0IPqJIO2kUO0d20OXY+R+pdriqg==" + }, "safe-array-concat": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 758771a..bcd760b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,10 +5,12 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.6.2", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2", + "saas": "^1.0.0", "sass": "^1.69.5" }, "devDependencies": { diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 539bb57..6b19efd 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,287 +1,16 @@ +import { Outlet, useLocation } from "react-router-dom"; +import NavBar from "./components/NavBar"; +import { MovieProvider } from "./contexts/MovieContext"; + function App() { + const location = useLocation(); + return ( -
-
-
- wildtube logo -
-
- hero movie slide - hero movie slide - hero movie slide - hero movie slide - hero movie slide -
- -
-
-

Action

-

Voir tout

-
-
- movie slide - movie slide -
- movie slide -
-
- lock icon -
-
-
- movie slide - movie slide - movie slide -
-
-
-
-

Action

-

Voir tout

-
-
- movie slide - movie slide -
- movie slide -
-
- lock icon -
-
-
- movie slide - movie slide - movie slide -
-
-
-
-

Action

-

Voir tout

-
-
- movie slide - movie slide -
- movie slide -
-
- lock icon -
-
-
- movie slide - movie slide - movie slide -
-
-
-
-

Action

-

Voir tout

-
-
- movie slide - movie slide -
- movie slide -
-
- lock icon -
-
-
- movie slide - movie slide - movie slide -
-
-
-
-
-
- home icon -
-
-
-
- search icon -
-
-
-
- profile icon -
-
-
+
+ + + + {!location.pathname.includes("/moviePlayer/") && }
); } diff --git a/frontend/src/assets/icons/circle-arrow-left-solid.svg b/frontend/src/assets/icons/circle-arrow-left-solid.svg new file mode 100644 index 0000000..4d0bee1 --- /dev/null +++ b/frontend/src/assets/icons/circle-arrow-left-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icons/play_button_icon.svg b/frontend/src/assets/icons/play_button_icon.svg new file mode 100644 index 0000000..195c6cc --- /dev/null +++ b/frontend/src/assets/icons/play_button_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/assets/icons/sort_icon.svg b/frontend/src/assets/icons/sort_icon.svg new file mode 100644 index 0000000..1a62bd7 --- /dev/null +++ b/frontend/src/assets/icons/sort_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/components/MovieSlide.jsx b/frontend/src/components/MovieSlide.jsx new file mode 100644 index 0000000..4f22d0d --- /dev/null +++ b/frontend/src/components/MovieSlide.jsx @@ -0,0 +1,39 @@ +import PropTypes from "prop-types"; +// import { NavLink } from "react-router-dom"; + +function MovieSlide({ movie }) { + if (movie.IsAvailable) { + return ( + {movie.title} + ); + } + return ( +
+ {movie.title} +
+
+ lock icon +
+
+
+ ); +} + +MovieSlide.propTypes = { + movie: PropTypes.shape({ + id: PropTypes.number.isRequired, + miniature: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + videoUrl: PropTypes.string, + duration: PropTypes.number.isRequired, + year: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + IsAvailable: PropTypes.number.isRequired, + }).isRequired, +}; + +export default MovieSlide; diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx new file mode 100644 index 0000000..cb54f4c --- /dev/null +++ b/frontend/src/components/NavBar.jsx @@ -0,0 +1,37 @@ +import { NavLink } from "react-router-dom"; + +function NavBar() { + return ( +
+
+ + home icon + +
+
+ + search icon + +
+ {/*
+ + profile icon + +
*/} +
+ ); +} + +export default NavBar; diff --git a/frontend/src/contexts/MovieContext.jsx b/frontend/src/contexts/MovieContext.jsx new file mode 100644 index 0000000..fc6bef9 --- /dev/null +++ b/frontend/src/contexts/MovieContext.jsx @@ -0,0 +1,43 @@ +import { createContext, useState, useEffect, useContext, useMemo } from "react"; +import axios from "axios"; +import PropTypes from "prop-types"; + +const MovieContext = createContext(); + +export function MovieProvider({ children }) { + const [movies, setMovies] = useState([]); + + useEffect(() => { + axios + .get("http://localhost:3310/api/films") + .then((response) => { + setMovies(response.data); + // console.info(response.data); + }) + .catch((error) => { + console.error(error); + }); + }, []); + + const value = useMemo(() => ({ movies, setMovies }), [movies, setMovies]); + + return ( + {children} + ); +} + +export function useMovies() { + const context = useContext(MovieContext); + + if (!context) { + throw new Error( + "useMovies must be used within a MovieProvider. Wrap a parent component in to fix this error." + ); + } + + return context; +} + +MovieProvider.propTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index ae981ac..c5d2a82 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -1,13 +1,40 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import { MovieProvider } from "./contexts/MovieContext"; import App from "./App"; +import Home from "./pages/Home"; +import Search from "./pages/Search"; +import Movie from "./pages/Movie"; +import MoviePlayer from "./pages/MoviePlayer"; import "./sass/index.scss"; const router = createBrowserRouter([ { path: "/", element: , + children: [ + { + index: true, + element: , + }, + { + path: "search", + element: , + }, + // { + // path: "profile", + // element:

Profile

, + // }, + { + path: "/movies/:movieId", + element: , + }, + { + path: "/moviePlayer/:movieId", + element: , + }, + ], }, ]); @@ -15,6 +42,10 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + + + + + ); diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx new file mode 100644 index 0000000..b5f8329 --- /dev/null +++ b/frontend/src/pages/Home.jsx @@ -0,0 +1,58 @@ +import { NavLink } from "react-router-dom"; +import { useMovies } from "../contexts/MovieContext"; +import MovieSlide from "../components/MovieSlide"; + +function Home() { + const { movies } = useMovies(); + + return ( +
+
+
+ wildtube logo +
+ {/*
+
*/} + {/*
    +
  • +

    Toutes les catégories

    +
    • +
  • +

    Action

    +
    • +
  • +

    Aventure

    +
    • +
  • +

    Comédie

    +
    • +
  • +

    Romance

    +
    • +
  • +

    Science-fiction

    +
    • +
*/} +
+ {/*
+

Action

+

Voir tout

+
*/} +
+ {movies.map((movie) => ( + + + + ))} +
+
+
+
+ ); +} + +export default Home; diff --git a/frontend/src/pages/Movie.jsx b/frontend/src/pages/Movie.jsx new file mode 100644 index 0000000..32fab51 --- /dev/null +++ b/frontend/src/pages/Movie.jsx @@ -0,0 +1,135 @@ +import { useParams, NavLink } from "react-router-dom"; +import { useMovies } from "../contexts/MovieContext"; + +function Movie() { + const { movieId } = useParams(); + const { movies } = useMovies(); + // console.info(movies); + if (!movieId) { + return

Aucun film trouvé.

; + } + return ( + <> + {movies + .filter((movie) => { + return movie.id === parseInt(movieId, 10); + }) + .map((movie) => { + if (movie.IsAvailable) { + return ( +
+
+
+ {movie.title} +
+ + play button + +
+
+
+
+

{movie.year}

+

•

+

{movie.duration}m

+
+
+
+

{movie.title}

+

{movie.description}

+
+
+
+

+ Commentaires +

+
+
+
+

+ Connectez-vous pour laisser un commentaire. +

+
+
+
+
+
+ ); + } + return ( +
+
+
+
+ {movie.title} +
+
+ play button +
+
+
+
+
+

{movie.year}

+

•

+

{movie.duration}m

+
+
+
+

{movie.title}

+

{movie.description}

+
+
+
+

+ Commentaires +

+
+
+
+

+ Connectez-vous pour laisser un commentaire. +

+
+
+
+
+
+
+

+ Connectez-vous pour regarder ce film. +

+
+
+
+
+ ); + })} + + ); +} + +export default Movie; diff --git a/frontend/src/pages/MoviePlayer.jsx b/frontend/src/pages/MoviePlayer.jsx new file mode 100644 index 0000000..ffc2a53 --- /dev/null +++ b/frontend/src/pages/MoviePlayer.jsx @@ -0,0 +1,45 @@ +/* eslint-disable react/self-closing-comp */ +import { useParams, NavLink } from "react-router-dom"; +import { useMovies } from "../contexts/MovieContext"; + +function MoviePlayer() { + const { movieId } = useParams(); + const { movies } = useMovies(); + return ( +
+
+ + back arrow + +
+
+ {movies + .filter((movie) => { + return movie.id === parseInt(movieId, 10); + }) + .map((movie) => { + const videoId = new URL(movie.videoUrl).searchParams.get("v"); + const embedUrl = `https://www.youtube.com/embed/${videoId}`; + return ( + + ); + })} +
+
+ ); +} + +export default MoviePlayer; diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx new file mode 100644 index 0000000..42b3746 --- /dev/null +++ b/frontend/src/pages/Search.jsx @@ -0,0 +1,64 @@ +import { NavLink } from "react-router-dom"; +import { useState } from "react"; +import { useMovies } from "../contexts/MovieContext"; +import MovieSlide from "../components/MovieSlide"; + +function Search() { + const [searchValue, setSearchValue] = useState(""); + const { movies } = useMovies(); + + function handleSearchChange(event) { + setSearchValue(event.target.value); + } + + return ( +
+
+
+ +
+ {/*
+ +
*/} +
+ {searchValue.length > 0 ? ( + <> + {movies + .filter((movie) => + movie.title.toLowerCase().includes(searchValue.toLowerCase()) + ) + .map((movie) => ( + + + + ))} + + ) : ( + <> + {movies.map((movie) => ( + + + + ))} + + )} +
+
+
+ ); +} + +export default Search; diff --git a/frontend/src/sass/_app.scss b/frontend/src/sass/_app.scss index b14e852..4d210b5 100644 --- a/frontend/src/sass/_app.scss +++ b/frontend/src/sass/_app.scss @@ -1,4 +1,4 @@ -.home { +.app { width: 100%; height: 100%; flex-direction: column; @@ -6,212 +6,4 @@ display: flex; overflow-x: hidden; flex: 1; - - .movies-display-section { - align-self: stretch; - flex: 1; - flex-direction: column; - gap: calc(var(--spacing-constant) * 1); - display: flex; - - .logo-container { - align-self: stretch; - display: flex; - justify-content: center; - align-items: center; - - .logo { - width: clamp( - var(--logo-min-width, 75px), - var(--logo-preferred-width, 25%), - var(--logo-max-width, 185px) - ); - height: clamp( - var(--logo-min-height, 45px), - var(--logo-preferred-height, 8vh), - var(--logo-max-height, 110px) - ); - object-fit: cover; - object-position: center; - position: relative; - } - } - - .dynamic-hero-slider-container { - align-self: stretch; - justify-content: center; - gap: calc(var(--spacing-constant) * 1); - display: flex; - overflow-x: scroll; - scroll-behavior: smooth; - - .hero-movie-slide { - width: clamp( - var(--hero-movie-slide-min-width, 255px), - var(--hero-movie-slide-preferred-width, 80%), - var(--hero-movie-slide-max-width, 1200px) - ); - height: clamp( - var(--hero-movie-slide-min-height, 140px), - var(--hero-movie-slide-preferred-height, 25vh), - var(--hero-movie-slide-max-height, 655px) - ); - object-fit: cover; - position: relative; - border-radius: var(--border-radius-constant, 10px); - } - } - - .movie-genre-tabs-container { - align-self: stretch; - padding: 0 calc(var(--spacing-constant) * 1); - align-items: center; - gap: calc(var(--spacing-constant) * 1); - display: flex; - overflow-x: scroll; - scroll-behavior: smooth; - list-style-type: none; - - .movie-genre-tab-container { - align-items: center; - gap: calc(var(--spacing-constant) * 1); - display: flex; - - .movie-genre { - color: var( - --not-selected-movie-genre-tab-color, - hsla(0, 0%, 100%, 0.6) - ); - font-size: calc(var(--font-size-constant) * 1.2); - font-weight: var(--font-weight-semi-bold); - text-wrap: nowrap; - } - - .selected-tab { - color: var(--selected-movie-genre-tab-color, hsla(0, 0%, 100%, 1)); - border-bottom: 1px solid - var(--selected-tab-border-bottom-color, hsla(335, 100%, 66%, 1)); - } - } - } - - .category-movie-display-container { - align-self: stretch; - flex-direction: column; - gap: calc(var(--spacing-constant) * 1); - display: flex; - - .category-title-container { - align-self: stretch; - padding: 0 calc(var(--spacing-constant) * 1); - justify-content: space-between; - align-items: center; - display: flex; - - .category-title { - color: var(--primary-font-color); - font-size: calc(var(--font-size-constant) * 1.4); - font-weight: var(--font-weight-semi-bold); - text-wrap: nowrap; - } - - .category-page-link { - color: var(--secondary-font-color); - font-size: calc(var(--font-size-constant) * 1.2); - font-weight: var(--font-weight-extra-light); - text-wrap: nowrap; - } - } - - .static-slider-container { - align-self: stretch; - padding: 0 calc(var(--spacing-constant) * 1); - align-items: center; - gap: calc(var(--spacing-constant) * 1); - display: flex; - overflow-x: scroll; - - .movie-slide { - width: var(--movie-slide-width, 70px); - height: var(--movie-slide-height, 90px); - border-radius: var(--border-radius-constant, 10px); - } - - .movie-slide-requiring-registration { - justify-content: center; - align-items: center; - gap: calc(var(--spacing-constant) * 1); - display: flex; - width: var(--movie-slide-width, 70px); - height: var(--movie-slide-height, 90px); - position: relative; - - .movie-slide { - border-radius: var(--border-radius-constant, 10px); - filter: blur(2px); - } - - .locked-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: 0 calc(var(--spacing-constant) * 1); - justify-content: center; - align-items: center; - gap: calc(var(--spacing-constant) * 1); - display: flex; - - .lock-icon-container { - .lock-icon { - width: 30px; - height: 30px; - position: relative; - } - } - } - } - } - } - } - - .navbar { - align-self: stretch; - padding: calc(var(--spacing-constant) * 0.7) - calc(var(--spacing-constant) * 3); - justify-content: space-between; - align-items: center; - display: flex; - - .nav-icon-container { - width: var(--nav-icon-container-width, 18px); - height: var(--nav-icon-container-height, 18px); - position: relative; - - .home-icon { - width: var(--home-icon-width, 18px); - height: var(--home-icon-height, 18px); - left: 0; - top: 0; - position: absolute; - } - - .search-icon { - width: var(--search-icon-width, 18px); - height: var(--search-icon-height, 18px); - left: 0; - top: 0; - position: absolute; - } - - .profile-icon { - width: var(--profile-icon-width, 18px); - height: var(--profile-icon-height, 18px); - left: 0; - top: 0; - position: absolute; - } - } - } } diff --git a/frontend/src/sass/_home.scss b/frontend/src/sass/_home.scss new file mode 100644 index 0000000..9464fba --- /dev/null +++ b/frontend/src/sass/_home.scss @@ -0,0 +1,138 @@ +.home { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: space-between; + display: flex; + overflow-x: hidden; + flex: 1; + + .movies-display-section { + align-self: stretch; + flex: 1; + flex-direction: column; + gap: calc(var(--spacing-constant) * 1); + display: flex; + + .logo-container { + align-self: stretch; + display: flex; + justify-content: center; + align-items: center; + + .logo { + width: clamp( + var(--logo-min-width, 75px), + var(--logo-preferred-width, 25%), + var(--logo-max-width, 185px) + ); + height: clamp( + var(--logo-min-height, 45px), + var(--logo-preferred-height, 8vh), + var(--logo-max-height, 110px) + ); + object-fit: cover; + object-position: center; + position: relative; + } + } + + .dynamic-hero-slider-container { + align-self: stretch; + justify-content: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; + overflow-x: scroll; + scroll-behavior: smooth; + + .hero-movie-slide { + width: clamp( + var(--hero-movie-slide-min-width, 255px), + var(--hero-movie-slide-preferred-width, 80%), + var(--hero-movie-slide-max-width, 1200px) + ); + height: clamp( + var(--hero-movie-slide-min-height, 140px), + var(--hero-movie-slide-preferred-height, 25vh), + var(--hero-movie-slide-max-height, 655px) + ); + object-fit: cover; + position: relative; + border-radius: var(--border-radius-constant, 10px); + } + } + + .movie-genre-tabs-container { + align-self: stretch; + padding: 0 calc(var(--spacing-constant) * 1); + align-items: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; + overflow-x: scroll; + scroll-behavior: smooth; + list-style-type: none; + + .movie-genre-tab-container { + align-items: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; + + .movie-genre { + color: var( + --not-selected-movie-genre-tab-color, + hsla(0, 0%, 100%, 0.6) + ); + font-size: calc(var(--font-size-constant) * 1.2); + font-weight: var(--font-weight-semi-bold); + text-wrap: nowrap; + } + + .selected-tab { + color: var(--selected-movie-genre-tab-color, hsla(0, 0%, 100%, 1)); + border-bottom: 1px solid + var(--selected-tab-border-bottom-color, hsla(335, 100%, 66%, 1)); + } + } + } + + .category-movie-display-container { + align-self: stretch; + flex-direction: column; + gap: calc(var(--spacing-constant) * 1); + display: flex; + + .category-title-container { + align-self: stretch; + padding: 0 calc(var(--spacing-constant) * 1); + justify-content: space-between; + align-items: center; + display: flex; + + .category-title { + color: var(--primary-font-color); + font-size: calc(var(--font-size-constant) * 1.4); + font-weight: var(--font-weight-semi-bold); + text-wrap: nowrap; + } + + .category-page-link { + color: var(--secondary-font-color); + font-size: calc(var(--font-size-constant) * 1.2); + font-weight: var(--font-weight-extra-light); + text-wrap: nowrap; + } + } + + .static-slider-container { + align-self: stretch; + padding: 0 calc(var(--spacing-constant) * 1); + align-items: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; + // overflow-x: scroll; + flex-wrap: wrap; + justify-content: center; + } + } + } +} diff --git a/frontend/src/sass/_movie.scss b/frontend/src/sass/_movie.scss new file mode 100644 index 0000000..3421ea0 --- /dev/null +++ b/frontend/src/sass/_movie.scss @@ -0,0 +1,198 @@ +.movie-page-details { + width: 100%; + height: 100%; + flex-direction: column; + display: flex; + flex: 1; + overflow-y: scroll; + + .movie-information-display { + align-self: stretch; + height: 100%; + flex-direction: column; + gap: calc(var(--spacing-constant) * 1); + display: flex; + + .thumbnail-container { + align-self: stretch; + height: 206px; + flex-direction: column; + gap: calc(var(--spacing-constant) * 1); + display: flex; + justify-content: center; + position: relative; + + .movie-cover { + align-self: stretch; + height: 100%; + flex-direction: column; + display: flex; + object-fit: cover; + } + + .upper-layer { + height: 100%; + background: hsla(0, 0%, 0%, 0.1); + justify-content: center; + align-items: center; + align-self: stretch; + flex-direction: column; + display: flex; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + .play-button-container { + width: 34px; + height: 34px; + position: relative; + + .play-button { + width: 100%; + height: 100%; + } + } + } + } + + .details-option-wrapper { + align-self: stretch; + padding: 0 calc(var(--spacing-constant) * 1); + justify-content: space-between; + align-items: center; + display: flex; + + .details-container { + padding: 0 calc(var(--spacing-constant) * 1); + gap: calc(var(--spacing-constant) * 1); + display: flex; + align-items: center; + + .movie-info { + font-size: calc(var(--font-size-constant) * 1.2); + } + } + } + + .description-container { + align-self: stretch; + padding: 0 calc(var(--spacing-constant) * 1); + flex-direction: column; + gap: calc(var(--spacing-constant) * 1); + display: flex; + + .movie-title { + font-size: calc(var(--font-size-constant) * 1.4); + font-weight: var(--font-weight-semi-bold); + text-decoration: underline; + } + + .movie-description { + font-size: calc(var(--font-size-constant) * 1.2); + } + } + + .comments-section { + padding: 0 calc(var(--spacing-constant) * 1); + flex-direction: column; + gap: calc(var(--spacing-constant) * 1); + display: flex; + + .comments-section-title { + align-self: stretch; + padding: 0 calc(var(--spacing-constant) * 1); + gap: calc(var(--spacing-constant) * 1); + display: flex; + + .comments-section-title-text { + font-size: calc(var(--font-size-constant) * 1.4); + font-weight: var(--font-weight-semi-bold); + text-decoration: underline; + } + } + + .comments-section-content { + align-self: stretch; + padding: 0 calc(var(--spacing-constant) * 1); + gap: calc(var(--spacing-constant) * 1); + display: flex; + flex: 1; + + .registration-invitation-container { + flex: 1 1 0; + align-self: stretch; + padding: calc(var(--spacing-constant) * 0.5) + calc(var(--spacing-constant) * 1); + background: var(--text-field-background-color); + justify-content: center; + align-items: center; + display: flex; + height: var(--comment-section-height, 200px); + border-radius: var(--border-radius-constant, 10px); + + .registration-invitation { + font-size: calc(var(--font-size-constant) * 2); + font-weight: var(--font-weight-semi-bold); + text-align: center; + color: var(--text-field-color, hsla(210, 89%, 7%, 1)); + } + } + } + } + } + + .movie-information-display-wrapper { + width: 100%; + height: 100%; + flex-direction: column; + display: flex; + flex: 1; + position: relative; + + .movie-information-display { + filter: blur(2px); + } + + .upper-layer { + height: 100%; + background: hsla(0, 0%, 0%, 0.1); + justify-content: center; + align-items: center; + align-self: stretch; + flex-direction: column; + display: flex; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + .registration-invitation-container { + align-self: stretch; + padding: calc(var(--spacing-constant) * 0.5) + calc(var(--spacing-constant) * 1); + background: var(--text-field-background-color); + justify-content: center; + align-items: center; + display: flex; + height: var(--comment-section-height, 200px); + border-radius: var(--border-radius-constant, 10px); + width: 90%; + margin: 0 auto; + + .registration-invitation { + font-size: calc(var(--font-size-constant) * 2); + font-weight: var(--font-weight-semi-bold); + text-align: center; + color: var(--text-field-color, hsla(210, 89%, 7%, 1)); + } + } + } + } +} + +.movie-page-details::-webkit-scrollbar { + display: none; +} diff --git a/frontend/src/sass/_moviePlayer.scss b/frontend/src/sass/_moviePlayer.scss new file mode 100644 index 0000000..0eb330f --- /dev/null +++ b/frontend/src/sass/_moviePlayer.scss @@ -0,0 +1,30 @@ +.movie-player { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + display: flex; + flex: 1; + background-color: var(--background-color-2, hsla(0, 0%, 0%, 1)); + padding-top: calc(var(--spacing-constant) * 1); + + .back-to-previous-page { + display: flex; + width: 100%; + padding-left: calc(var(--spacing-constant) * 1); + } + + .movie-player-wrapper { + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + display: flex; + flex: 1; + + iframe { + flex: 1; + } + } +} diff --git a/frontend/src/sass/_movieSlide.scss b/frontend/src/sass/_movieSlide.scss new file mode 100644 index 0000000..d10f036 --- /dev/null +++ b/frontend/src/sass/_movieSlide.scss @@ -0,0 +1,43 @@ +.movie-slide { + width: calc(var(--movie-slide-width) * 1); + height: calc(var(--movie-slide-width, 70px) * 1.3); + border-radius: var(--border-radius-constant, 10px); + object-fit: cover; +} + +.movie-slide-requiring-registration { + width: calc(var(--movie-slide-width) * 1); + height: calc(var(--movie-slide-width, 70px) * 1.3); + justify-content: center; + align-items: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; + position: relative; + + .movie-slide { + border-radius: var(--border-radius-constant, 10px); + object-fit: cover; + filter: blur(2px); + } + + .locked-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0 calc(var(--spacing-constant) * 1); + justify-content: center; + align-items: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; + + .lock-icon-container { + .lock-icon { + width: 30px; + height: 30px; + position: relative; + } + } + } +} diff --git a/frontend/src/sass/_navbar.scss b/frontend/src/sass/_navbar.scss new file mode 100644 index 0000000..b92da4b --- /dev/null +++ b/frontend/src/sass/_navbar.scss @@ -0,0 +1,37 @@ +.navbar { + align-self: stretch; + padding: calc(var(--spacing-constant) * 0.7) calc(var(--spacing-constant) * 3); + justify-content: space-between; + align-items: center; + display: flex; + + .nav-icon-container { + width: var(--nav-icon-container-width, 18px); + height: var(--nav-icon-container-height, 18px); + position: relative; + + .home-icon { + width: var(--home-icon-width, 18px); + height: var(--home-icon-height, 18px); + left: 0; + top: 0; + position: absolute; + } + + .search-icon { + width: var(--search-icon-width, 18px); + height: var(--search-icon-height, 18px); + left: 0; + top: 0; + position: absolute; + } + + .profile-icon { + width: var(--profile-icon-width, 18px); + height: var(--profile-icon-height, 18px); + left: 0; + top: 0; + position: absolute; + } + } +} diff --git a/frontend/src/sass/_search.scss b/frontend/src/sass/_search.scss new file mode 100644 index 0000000..62f7278 --- /dev/null +++ b/frontend/src/sass/_search.scss @@ -0,0 +1,80 @@ +.search { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: space-between; + display: flex; + overflow-x: hidden; + flex: 1; + + .search-display-section { + align-self: stretch; + flex: 1; + padding-top: calc(var(--spacing-constant) * 2); + flex-direction: column; + gap: calc(var(--spacing-constant) * 1); + display: flex; + + .search-bar-container { + align-self: stretch; + height: 45px; + padding: 0 calc(var(--spacing-constant) * 1); + display: flex; + + .search-bar { + flex: 1 1 auto; + align-self: stretch; + padding: 0 calc(var(--spacing-constant) * 1); + border-radius: var(--border-radius-constant, 10px); + align-items: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; + width: 100%; + height: 100%; + border: none; + } + + .search-bar:focus { + outline: none; + } + } + + .sort-container { + align-self: stretch; + height: 30px; + padding: 0 calc(var(--spacing-constant) * 1); + justify-content: flex-end; + align-items: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; + + .sort-button { + height: 100%; + padding: 0 calc(var(--spacing-constant) * 1); + border-radius: calc(var(--border-radius-constant, 10px) * 1.3); + justify-content: center; + align-items: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; + border: none; + + .sort-text { + text-align: center; + font-size: calc(var(--font-size-constant) * 1.2); + font-weight: var(--font-weight-semi-bold); + } + } + } + + .search-result-container { + align-self: stretch; + flex: 1; + justify-content: center; + align-items: center; + gap: calc(var(--spacing-constant) * 1); + display: flex; + flex-wrap: wrap; + padding: 0 calc(var(--spacing-constant) * 1.5); + } + } +} diff --git a/frontend/src/sass/_settings.scss b/frontend/src/sass/_settings.scss index 91ac9b8..f6e5986 100644 --- a/frontend/src/sass/_settings.scss +++ b/frontend/src/sass/_settings.scss @@ -3,6 +3,7 @@ --background-color: hsla(210, 89%, 7%, 1); --primary-font-color: hsla(53, 82%, 66%, 1); --secondary-font-color: hsla(335, 100%, 66%, 1); + --text-field-background-color: hsla(0, 0%, 86%, 1); // ^ fonts --main-font: "Roboto Flex", sans-serif; @@ -17,6 +18,10 @@ // ^ spacing --spacing-constant: 8px; + + // ^ other sizes + + --movie-slide-width: 90px; } * { diff --git a/frontend/src/sass/index.scss b/frontend/src/sass/index.scss index b00299c..acbb14e 100644 --- a/frontend/src/sass/index.scss +++ b/frontend/src/sass/index.scss @@ -1,2 +1,8 @@ @import "settings"; @import "app"; +@import "home"; +@import "search"; +@import "navbar"; +@import "movieSlide"; +@import "movie"; +@import "moviePlayer"; diff --git a/frontend/vite.config.js b/frontend/vite.config.js index f0078e4..012c62e 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -1,5 +1,5 @@ -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; // eslint-disable-line +import react from "@vitejs/plugin-react"; // eslint-disable-line // https://vitejs.dev/config/ export default defineConfig({ diff --git a/package-lock.json b/package-lock.json index d17005d..5ccc7ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,9 @@ "version": "4.2.0", "hasInstallScript": true, "license": "MIT", + "dependencies": { + "axios": "^1.6.2" + }, "devDependencies": { "concurrently": "^8.2.0", "cross-env": "^7.0.3", @@ -70,6 +73,21 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "node_modules/axios": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz", + "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/braces": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", @@ -246,6 +264,17 @@ "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/commander": { "version": "11.0.0", "resolved": "https://registry.npmjs.org/commander/-/commander-11.0.0.tgz", @@ -347,6 +376,14 @@ } } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -409,6 +446,38 @@ "node": ">=8" } }, + "node_modules/follow-redirects": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", + "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", @@ -619,6 +688,25 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mimic-fn": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", @@ -712,6 +800,11 @@ "node": ">=0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/regenerator-runtime": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", @@ -1133,6 +1226,21 @@ "color-convert": "^2.0.1" } }, + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "axios": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz", + "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==", + "requires": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "braces": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", @@ -1265,6 +1373,14 @@ "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==", "dev": true }, + "combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "requires": { + "delayed-stream": "~1.0.0" + } + }, "commander": { "version": "11.0.0", "resolved": "https://registry.npmjs.org/commander/-/commander-11.0.0.tgz", @@ -1326,6 +1442,11 @@ "ms": "2.1.2" } }, + "delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" + }, "eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -1376,6 +1497,21 @@ "to-regex-range": "^5.0.1" } }, + "follow-redirects": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", + "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==" + }, + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + }, "get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", @@ -1511,6 +1647,19 @@ "picomatch": "^2.3.1" } }, + "mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" + }, + "mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "requires": { + "mime-db": "1.52.0" + } + }, "mimic-fn": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", @@ -1567,6 +1716,11 @@ "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==", "dev": true }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "regenerator-runtime": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",