From 68fa736a914397d46a6cd4345da0204aeaaf5f07 Mon Sep 17 00:00:00 2001 From: dbroqua Date: Tue, 15 Feb 2022 16:45:14 +0100 Subject: [PATCH] mdb to bulma + view my collection --- .gitignore | 1 + package.json | 10 +- public/css/main.css | 1 - sass/bulma.scss | 1 + sass/index.scss | 3 + sass/pagination.scss | 15 ++ sass/toast.scss | 9 +- src/app.js | 18 +- src/helpers/index.js | 13 ++ src/middleware/Albums.js | 38 +++- src/routes/api/v1/albums.js | 28 ++- src/routes/index.js | 12 ++ views/index.ejs | 172 +++++++++++++++--- views/pages/ajouter-un-album/form.ejs | 214 ++++++++++++++--------- views/pages/ajouter-un-album/search.ejs | 40 +++-- views/pages/connexion.ejs | 50 +++--- views/pages/inscription.ejs | 61 ++++--- views/pages/mon-compte/ma-collection.ejs | 133 ++++++++++++++ views/partials/footer.ejs | 2 - views/partials/head.ejs | 39 ----- views/partials/header.ejs | 49 ------ 21 files changed, 617 insertions(+), 292 deletions(-) delete mode 100644 public/css/main.css create mode 100644 sass/bulma.scss create mode 100644 sass/index.scss create mode 100644 sass/pagination.scss create mode 100644 views/pages/mon-compte/ma-collection.ejs delete mode 100644 views/partials/footer.ejs delete mode 100644 views/partials/head.ejs delete mode 100644 views/partials/header.ejs diff --git a/.gitignore b/.gitignore index 558a321..17b4305 100644 --- a/.gitignore +++ b/.gitignore @@ -121,3 +121,4 @@ dist dist yarn.lock public/css +public/css diff --git a/package.json b/package.json index 4d63018..0579244 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,8 @@ "scripts": { "start": "node ./dist/bin/www", "dev": "npm-run-all build sass start", - "watch": "nodemon", - "sass": "npx sass sass/*.scss public/css/main.css -s compressed", + "watch": "nodemon -e js,scss", + "sass": "npx sass sass/index.scss public/css/main.css -s compressed", "prebuild": "rimraf dist", "build": "babel ./src --out-dir dist --copy-files", "test": "jest", @@ -44,6 +44,7 @@ }, "dependencies": { "axios": "^0.26.0", + "bulma": "^0.9.3", "connect-ensure-login": "^0.1.1", "connect-flash": "^0.1.1", "connect-mongo": "^4.6.0", @@ -53,8 +54,6 @@ "ejs": "^3.1.6", "express": "^4.17.2", "express-session": "^1.17.2", - "jquery": "^3.6.0", - "mdb-ui-kit": "^3.10.2", "moment": "^2.29.1", "mongoose": "^6.2.1", "mongoose-unique-validator": "^3.0.0", @@ -67,7 +66,8 @@ "nodemonConfig": { "exec": "npm run dev", "watch": [ - "src/*" + "src/*", + "sass/*" ], "ignore": [ "**/__tests__/**", diff --git a/public/css/main.css b/public/css/main.css deleted file mode 100644 index 5894bdb..0000000 --- a/public/css/main.css +++ /dev/null @@ -1 +0,0 @@ -#toastr{visibility:hidden;min-width:250px;margin-left:-125px;background-color:#9c3030;color:#fff;text-align:left;border-radius:2px;padding:16px;position:fixed;z-index:1;right:30px;top:30px;font-size:17px}#toastr.show{visibility:visible;animation:toastrFadein .5s,toastrFadeout .5s 2.5s}@keyframes toastrFadein{from{top:0;opacity:0}to{top:30px;opacity:1}}@keyframes toastrFadeout{from{top:30px;opacity:1}to{top:0;opacity:0}}/*# sourceMappingURL=main.css.map */ diff --git a/sass/bulma.scss b/sass/bulma.scss new file mode 100644 index 0000000..1cd59ea --- /dev/null +++ b/sass/bulma.scss @@ -0,0 +1 @@ +@use '../node_modules/bulma/bulma.sass'; \ No newline at end of file diff --git a/sass/index.scss b/sass/index.scss new file mode 100644 index 0000000..d157cd1 --- /dev/null +++ b/sass/index.scss @@ -0,0 +1,3 @@ +@use './bulma.scss'; +@use './toast.scss'; +@use './pagination.scss'; \ No newline at end of file diff --git a/sass/pagination.scss b/sass/pagination.scss new file mode 100644 index 0000000..cf4079d --- /dev/null +++ b/sass/pagination.scss @@ -0,0 +1,15 @@ +.pagination-link, +.pagination-link, +.pagination-next, +.pagination-next, +.pagination-previous, +.pagination-previous { + &.is-disabled, + &[disabled] { + background-color: #dbdbdb; + border-color: #dbdbdb; + box-shadow: none; + color: #7a7a7a; + opacity: .5; + } +} \ No newline at end of file diff --git a/sass/toast.scss b/sass/toast.scss index 3cb8e01..af7a06a 100644 --- a/sass/toast.scss +++ b/sass/toast.scss @@ -1,14 +1,9 @@ #toastr { visibility: hidden; min-width: 250px; - margin-left: -125px; - background-color: rgb(156, 48, 48); - color: #fff; - text-align: left; - border-radius: 2px; - padding: 16px; + max-width: 360px; position: fixed; - z-index: 1; + z-index: 31; right: 30px; top: 30px; font-size: 17px; diff --git a/src/app.js b/src/app.js index f5a00fe..756b493 100644 --- a/src/app.js +++ b/src/app.js @@ -9,6 +9,8 @@ import MongoStore from "connect-mongo"; import config, { env, mongoDbUri, secret } from "./config"; +import { isXhr } from "./helpers"; + import indexRouter from "./routes"; import addAlbumRouter from "./routes/addAlbum"; import importRouterApiV1 from "./routes/api/v1"; @@ -68,18 +70,6 @@ app.set("views", path.join(__dirname, "../views")); app.set("view engine", "ejs"); app.use(express.static(path.join(__dirname, "../public"))); -app.use( - "/libs/jquery", - express.static(path.join(__dirname, "../node_modules/jquery/dist/")) -); -app.use( - "/libs/mdb-ui-kit/css", - express.static(path.join(__dirname, "../node_modules/mdb-ui-kit/css")) -); -app.use( - "/libs/mdb-ui-kit/js", - express.static(path.join(__dirname, "../node_modules/mdb-ui-kit/js")) -); app.use( "/libs/vue", express.static(path.join(__dirname, "../node_modules/vue/dist")) @@ -96,7 +86,7 @@ app.use("/api/v1/albums", importAlbumRouterApiV1); // Handle 404 app.use((req, res) => { - if (req.xhr || req.rawHeaders.indexOf("application/json") !== -1) { + if (isXhr(req)) { res.status(404).send({ message: "404: Not found" }); } else { res.status(404).render("index", { @@ -116,7 +106,7 @@ app.use((req, res) => { // Handle 500 app.use((error, req, res, next) => { - if (req.xhr || req.rawHeaders.indexOf("application/json") !== -1) { + if (isXhr(req)) { const { message, errorCode, date } = error; res.status(error.errorCode || 500).send({ message, errorCode, date }); } else { diff --git a/src/helpers/index.js b/src/helpers/index.js index 95f2ba1..128f594 100644 --- a/src/helpers/index.js +++ b/src/helpers/index.js @@ -23,3 +23,16 @@ export const getAlbumDetails = async (id) => { return res; }; + +export const isXhr = (req) => { + const is = req.xhr; + if (!is) { + for (let i = 0; i < req.rawHeaders.length; i += 1) { + if (req.rawHeaders[i].indexOf("application/json") !== -1) { + return true; + } + } + } + + return is; +}; diff --git a/src/middleware/Albums.js b/src/middleware/Albums.js index 821267d..e0ab50b 100644 --- a/src/middleware/Albums.js +++ b/src/middleware/Albums.js @@ -73,13 +73,49 @@ class Albums extends Pages { discogsId: body.id, User: user._id, }; - data.released = moment(data.released.replace("-00", "-01")); + data.released = data.released + ? moment(data.released.replace("-00", "-01")) + : null; delete data.id; const album = new AlbumsModel(data); return album.save(); } + + async getAll() { + const { + page = 1, + limit = 4, + sort = "artists_sort", + order = "asc", + } = this.req.query; + + const skip = (page - 1) * limit; + + const count = await AlbumsModel.count({ + user: this.req.user._id, + }); + + const rows = await AlbumsModel.find( + { + user: this.req.user._id, + }, + [], + { + skip, + limit, + sort: { + [sort]: order.toLowerCase() === "asc" ? 1 : -1, + }, + } + ); + + return { + rows, + count, + }; + } } export default Albums; diff --git a/src/routes/api/v1/albums.js b/src/routes/api/v1/albums.js index 512d6f5..8675cea 100644 --- a/src/routes/api/v1/albums.js +++ b/src/routes/api/v1/albums.js @@ -7,14 +7,26 @@ import Albums from "../../../middleware/Albums"; // eslint-disable-next-line new-cap const router = express.Router(); -router.route("/").post(ensureLoggedIn("/connexion"), async (req, res, next) => { - try { - const data = await Albums.postAddOne(req); +router + .route("/") + .get(ensureLoggedIn("/connexion"), async (req, res, next) => { + try { + const albums = new Albums(req); + const data = await albums.getAll(); - sendResponse(req, res, data); - } catch (err) { - next(err); - } -}); + sendResponse(req, res, data); + } catch (err) { + next(err); + } + }) + .post(ensureLoggedIn("/connexion"), async (req, res, next) => { + try { + const data = await Albums.postAddOne(req); + + sendResponse(req, res, data); + } catch (err) { + next(err); + } + }); export default router; diff --git a/src/routes/index.js b/src/routes/index.js index e2cb331..5eb4117 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -72,6 +72,18 @@ router } }); +router + .route("/ma-collection") + .get(ensureLoggedIn("/connexion"), async (req, res, next) => { + try { + const page = new Pages(req, "mon-compte/ma-collection"); + + render(res, page); + } catch (err) { + next(err); + } + }); + router.route("/se-deconnecter").get((req, res) => { req.logout(); req.session.destroy(() => { diff --git a/views/index.ejs b/views/index.ejs index c894cae..7ccad87 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -1,37 +1,159 @@ - <%- include('partials/head'); %> - -
- <%- include('partials/header'); %> -
+ + + + + <% if (page.title) { %><%= page.title %> <% } else { %> DarKou - Ma CDThèque <% } %> + + + + + + + + + + + + + -
+
+ + +
- - <% if ( page.failureFlash ) {%> -
- diff --git a/views/pages/ajouter-un-album/form.ejs b/views/pages/ajouter-un-album/form.ejs index 778d75b..db92db7 100644 --- a/views/pages/ajouter-un-album/form.ejs +++ b/views/pages/ajouter-un-album/form.ejs @@ -1,117 +1,166 @@ -
-
-
-
- Miniature -
- Miniature -
+
+ +
+
+
+ Miniature +
+ Miniature +
+
  1. {{ track.title }} ({{track.duration}})
-
-
-
-
- - +
+
+
+
+
+ +
+ +
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ +
+ +
+
- -
- - +
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
-
-
- - -
-
-
-
- - +
+
+
+ +
+ +
+
-
-
- - +
+
+ Codes barres +
    +
  1. + {{identifier.value}} ({{identifier.type}}) +
    2. +
-
-
-
- - +
+
+
+
+
+ +
+ +
+
-
-
- - +
+
+
+ +
+ +
+
-
-
    -
  1. - {{identifier.value}} ({{identifier.type}}) -
    2. -
-
-
-
-
- - +
+
+
+ +
+ +
+
-
-
- - +
+
+
+ +
+ +
+
-
-
- - +
+
+ Vidéos +
    +
  1. + {{video.title}} +
    2. +
-
-
- - +
+
+ Artistes +
    +
  • + {{extraartist.name}} ({{extraartist.role}}) +
    • +
-
-
-
    -
  1. - {{video.title}} -
    2. -
-
-
-
-
    -
  1. - {{extraartist.name}} ({{extraartist.role}}) -
    2. -
-
- +
@@ -134,7 +183,6 @@ window.location.href = '/ma-collection'; }) .catch((err) => { - console.log('ERR:', err.response); showToastr(err.response?.data?.message || "Impossible d'ajouter ce album pour le moment…"); }); } diff --git a/views/pages/ajouter-un-album/search.ejs b/views/pages/ajouter-un-album/search.ejs index 23a46b2..1e954fe 100644 --- a/views/pages/ajouter-un-album/search.ejs +++ b/views/pages/ajouter-un-album/search.ejs @@ -1,16 +1,19 @@ -
+
-
-
- - +
+
+ +
+
+
-
- +
@@ -23,6 +26,11 @@ + + +
Pochette
+ Chargement en cours… +
@@ -56,6 +64,7 @@ data() { return { q: '', + loading: false, items: [], } }, @@ -63,6 +72,12 @@ search(event) { event.preventDefault(); + if ( this.loading ) { + return false; + } + + this.loading = true; + axios.get(`/api/v1/search?q=${this.q}`) .then( response => { const { @@ -95,8 +110,11 @@ this.items = items; }) - .catch( err => { - console.log('err:', err); + .catch((err) => { + showToastr(err.response?.data?.message || "Aucun résultat trouvé :/"); + }) + .finally(() => { + this.loading = false; }); } } diff --git a/views/pages/connexion.ejs b/views/pages/connexion.ejs index ff1b043..d71ebde 100644 --- a/views/pages/connexion.ejs +++ b/views/pages/connexion.ejs @@ -1,30 +1,38 @@
-
-
-
-
+
+
+ +
DarKou
-

Connexion

- -
- - +
+ Connexion
- -
- - -
- -
-
-

Pas encore inscrit ? Inscrivez-vous

+
+ +
+ +
+
+
+ +
+
- - - + +
+

Pas encore inscrit ? Inscrivez-vous

+
+ + +
\ No newline at end of file diff --git a/views/pages/inscription.ejs b/views/pages/inscription.ejs index d723c5c..0ca09ba 100644 --- a/views/pages/inscription.ejs +++ b/views/pages/inscription.ejs @@ -1,35 +1,44 @@
-
-
-
-
+
+
+ +
DarKou
-

Inscription

- -
- - +
+ Inscription
- -
- - -
- -
- - -
- -
-
-

Déjà inscrit ? Connectez-vous

+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+
- - - + +
+

Déjà inscrit ? Connectez-vous

+
+ + +
\ No newline at end of file diff --git a/views/pages/mon-compte/ma-collection.ejs b/views/pages/mon-compte/ma-collection.ejs new file mode 100644 index 0000000..5a4d80f --- /dev/null +++ b/views/pages/mon-compte/ma-collection.ejs @@ -0,0 +1,133 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PochetteArtisteTitreAnnéePaysFormatGenresStyles
+ Chargement en cours… +
+ + {{ item.artists_sort }} + {{ item.title }} + {{ item.year }}{{ item.country }} +
    +
  • {{ format.name }}
    • +
+ 		+
    +
  • {{ genre }}
    • +
+ 		+
    +
  • {{ style }}
    • +
+
+ +
+ + diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs deleted file mode 100644 index 2919c59..0000000 --- a/views/partials/footer.ejs +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/views/partials/head.ejs b/views/partials/head.ejs deleted file mode 100644 index f8d57a9..0000000 --- a/views/partials/head.ejs +++ /dev/null @@ -1,39 +0,0 @@ - - - - - <% if (page.title) { %><%= page.title %> <% } else { %> DarKou - Ma CDThèque <% } %> - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/views/partials/header.ejs b/views/partials/header.ejs deleted file mode 100644 index 2af8ee1..0000000 --- a/views/partials/header.ejs +++ /dev/null @@ -1,49 +0,0 @@ - \ No newline at end of file