nodecdtheque => MyMusicLibrary & new UI for adding album

2022-02-17 09:37:25 +01:00 · 2022-02-17 09:37:25 +01:00 · a502fe9088
commit a502fe9088
parent a35c8899ac
14 changed files with 231 additions and 37 deletions
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
-# nodecdtheque
+# My Music Library

-NodeCDThèque (non temporaire faute de mieux haha) est une application Web permettant de lister votre collection de CD ou vinyles.
+My Music Library est une application Web permettant de lister votre collection de CD ou vinyles.

 ## Prérequis

--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,8 +1,8 @@
 version: "2.4"

 services:
-  nodecdtheque-www:
-    container_name: nodecdtheque-www
+  mymusiclibrary-www:
+    container_name: mymusiclibrary-www
    image: "node:16"
    restart: always
    user: "node"
@ -17,21 +17,21 @@ services:
    ports:
      - 3001:3001
    depends_on:
-      - nodecdtheque-db
+      - mymusiclibrary-db
    environment:
      NODE_ENV: ${NODE_ENV}
      DISCOGS_TOKEN: ${DISCOGS_TOKEN}
    networks:
-      - nodecdtheque
-  nodecdtheque-db:
-    container_name: nodecdtheque-db
+      - mymusiclibrary
+  mymusiclibrary-db:
+    container_name: mymusiclibrary-db
    image: mongo:latest
    restart: always
    ports:
      - 27617:27017
    networks:
-      - nodecdtheque
+      - mymusiclibrary

 networks:
-  nodecdtheque:
+  mymusiclibrary:
    driver: bridge
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-  "name": "nodecdtheque",
+  "name": "mymusiclibrary",
  "version": "1.0.0",
  "description": "Simple application to manage your CD/Vinyl collection",
  "scripts": {
@ -18,7 +18,7 @@
  },
  "repository": {
    "type": "git",
-    "url": "git@git.darkou.fr:dbroqua/nodecdtheque.git"
+    "url": "git@git.darkou.fr:dbroqua/MyMusicLibrary.git"
  },
  "author": {
    "name": "Damien Broqua",
--- a/public/logo.png
+++ b/public/logo.png
--- a/sass/bulma.scss
+++ b/sass/bulma.scss
@ -1 +1,5 @@
-@use '../node_modules/bulma/bulma.sass';
+@use '../node_modules/bulma/bulma.sass';
+
+.modal-content {
+  width: 80%;
+}
--- a/src/app.js
+++ b/src/app.js
@ -13,8 +13,9 @@ import { isXhr } from "./helpers";

 import indexRouter from "./routes";
 import addAlbumRouter from "./routes/addAlbum";
-import importRouterApiV1 from "./routes/api/v1";
+
 import importAlbumRouterApiV1 from "./routes/api/v1/albums";
+import importSearchRouterApiV1 from "./routes/api/v1/search";

 // Mongoose schema init
 require("./models/users");
@ -81,8 +82,8 @@ app.use(

 app.use("/", indexRouter);
 app.use("/ajouter-un-album", addAlbumRouter);
-app.use("/api/v1", importRouterApiV1);
 app.use("/api/v1/albums", importAlbumRouterApiV1);
+app.use("/api/v1/search", importSearchRouterApiV1);

 // Handle 404
 app.use((req, res) => {
--- a/src/bin/www.js
+++ b/src/bin/www.js
@ -9,7 +9,7 @@ import http from "http";
 import app from "../app";
 import { port } from "../config";

-const debug = debugLib("nodecdtheque:server");
+const debug = debugLib("mymusiclibrary:server");
 const server = http.createServer(app);

 /**
--- a/src/config/index.js
+++ b/src/config/index.js
@ -1,7 +1,8 @@
 module.exports = {
    nodeEnv: process.env.NODE_ENV || "development",
    port: parseInt(process.env.PORT || "3001", 10),
-    mongoDbUri: process.env.MONGODB_URI || "mongodb://nodecdtheque-db/cdtheque",
+    mongoDbUri:
+        process.env.MONGODB_URI || "mongodb://mymusiclibrary-db/mymusiclibrary",
    secret: process.env.SECRET || "waemaeMe5ahc6ce1chaeKohKa6Io8Eik",
    discogsToken: process.env.DISCOGS_TOKEN,
 };
--- a/src/middleware/Pages.js
+++ b/src/middleware/Pages.js
@ -38,6 +38,10 @@ class Pages {
        this.pageContent.page[field] = value;
    }

+    getPageContent(field) {
+        return this.pageContent.page[field];
+    }
+
    /**
     * Rendu de la page
     * @return {Object}
--- a/src/routes/api/v1/search.js
+++ b/src/routes/api/v1/search.js
@ -2,16 +2,26 @@ import express from "express";
 import { ensureLoggedIn } from "connect-ensure-login";

 import { sendResponse } from "../../../libs/format";
-import { searchSong } from "../../../helpers";
+import { searchSong, getAlbumDetails } from "../../../helpers";

 // eslint-disable-next-line new-cap
 const router = express.Router();

+router.route("/").get(ensureLoggedIn("/connexion"), async (req, res, next) => {
+    try {
+        const data = await searchSong(req.query.q);
+
+        sendResponse(req, res, data);
+    } catch (err) {
+        next(err);
+    }
+});
+
 router
-    .route("/search")
+    .route("/:discogsId")
    .get(ensureLoggedIn("/connexion"), async (req, res, next) => {
        try {
-            const data = await searchSong(req.query.q);
+            const data = await getAlbumDetails(req.params.discogsId);

            sendResponse(req, res, data);
        } catch (err) {
--- a/src/routes/index.js
+++ b/src/routes/index.js
@ -12,15 +12,12 @@ import render from "../libs/format";
 const router = express.Router();

 router.route("/").get((req, res, next) => {
-    if (req.user) {
-        return res.redirect("/ma-collection");
-    }
    try {
        const page = new Pages(req, "home");

-        return render(res, page);
+        render(res, page);
    } catch (err) {
-        return next(err);
+        next(err);
    }
 });

@ -88,7 +85,11 @@ router

            await page.loadMyCollection();

-            render(res, page);
+            if (page.getPageContent("artists").length > 0) {
+                render(res, page);
+            } else {
+                res.redirect("/ajouter-un-album");
+            }
        } catch (err) {
            next(err);
        }
--- a/views/index.ejs
+++ b/views/index.ejs
@ -4,7 +4,7 @@
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
-        <title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - Ma CDThèque <% } %></title>
+        <title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - My Music Library <% } %></title>

        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@ -55,7 +55,8 @@
        <nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <a class="navbar-item" href="/">
-                    <img src="/logo.png" alt="Ma CDThèque">
+                    <img src="/logo.png" alt="Logo">
+                    <h1 class="title ml-2">My Music Library</h1>
                </a>
          
                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
@ -87,7 +88,12 @@
                    <% if ( user ) { %>
                    <div class="navbar-item has-dropdown is-hoverable">
                        <a class="navbar-link">
-                            Mon compte
+                            <span class="icon">
+                                <i class="fa-solid fa-user"></i>
+                            </span>
+                            <span>
+                                <%= user.username %>
+                            </span>
                        </a>
          
                        <div class="navbar-dropdown">
@ -165,7 +171,7 @@
        <footer class="footer">
            <div class="content has-text-centered">
                <p>
-                    <strong>Ma CDThèque</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>. 
+                    <strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>. 
                    Fait avec ❤ à Bordeaux.
                    Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU GPL-3.0-or-later</a>.
                </p>
--- a/views/pages/ajouter-un-album/search.ejs
+++ b/views/pages/ajouter-un-album/search.ejs
@ -36,7 +36,8 @@
                    <img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
                </td>
                <td>
-                    <a :href="'/ajouter-un-album/' + item.id">{{ item.title }}</a>
+                    <a @click="loadDetails(item.id)">{{ item.title }}</a>
+                    <!-- <a :href="'/ajouter-un-album/' + item.id">{{ item.title }}</a> -->
                </td>
                <td>{{ item.year }}</td>
                <td>{{ item.country }}</td>
@ -58,6 +59,120 @@
            </tr>
        </tbody>
    </table>
+    <div class="modal" :class="{'is-active': modalIsVisible}" id="addAlbum">
+        <div class="modal-background"></div>
+        <div class="modal-card">
+            <header class="modal-card-head">
+                <p class="modal-card-title">{{details.artists_sort}} - {{details.title}}</p>
+                <button class="delete" aria-label="close" @click="toggleModal"></button>
+            </header>
+            <section class="modal-card-body">
+                <div class="columns is-mobile">
+                    <div class="column is-12-mobile is-4-desktop">
+                        <div class="has-text-centered">
+                            <img :src="details.thumb %>" alt="Miniature" />
+                            <hr />
+                            <img v-for="image in details.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
+                            <hr />
+                        </div>
+                        <ol class="ml-4">
+                            <li v-for="track in details.tracklist">{{ track.title }} ({{track.duration}})</li>
+                        </ol>
+                    </div>
+                    <div class="column is-12-mobile is-8-desktop">
+                        <div class="column is-12">
+                            <div class="columns is-mobile is-multiline">
+                                <div class="column is-12-mobile is-6-desktop" v-for="genre in details.genres">
+                                    <div class="field">
+                                        <label class="label" for="company">Genre</label>
+                                        <div class="control">
+                                            <input type="text" id="genres" name="genres" class="input" v-model="genre" disabled />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="column is-12-mobile is-6-desktop" v-for="style in details.styles">
+                                    <div class="field">
+                                        <label class="label" for="company">Style</label>
+                                        <div class="control">
+                                            <input type="text" id="style" name="style" class="input" v-model="style" disabled />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div> 
+                            <hr />
+                            <div class="columns is-mobile">
+                                <div class="column is-12-mobile is-6-desktop">
+                                    <div class="field">
+                                        <label class="label" for="year">Année</label>
+                                        <div class="control">
+                                            <input type="text" id="year" name="year" class="input" v-model="details.year" disabled />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="column is-12-mobile is-6-desktop">
+                                    <div class="field">
+                                        <label class="label" for="released">Date de sortie</label>
+                                        <div class="control">
+                                            <input type="text" id="released" name="released" class="input" v-model="details.released" disabled />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <hr />
+                            <div class="columns is-mobile">
+                                <div class="column is-12-mobile is-6-desktop">
+                                    <div class="field">
+                                        <label class="label" for="country">Pays</label>
+                                        <div class="control">
+                                            <input type="text" id="country" name="country" class="input" v-model="details.country" disabled />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="column is-12-mobile is-6-desktop" v-for="format in details.formats">
+                                    <div class="field">
+                                        <label class="label" for="format">Format</label>
+                                        <div class="control">
+                                            <input type="text" id="format" name="format" class="input" v-model="format.name" disabled />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <hr />
+                            <div class="columns is-mobile">
+                                <div class="column is-12-mobile is-6-desktop">
+                                    <span class="label">Codes barres</span>
+                                    <ol>
+                                        <li v-for="identifier in details.identifiers">
+                                            {{identifier.value}} ({{identifier.type}})
+                                        </li>
+                                    </ol>
+                                </div>
+                                <div class="column is-12-mobile is-6-desktop">
+                                    <span class="label">Label</span>
+                                    <div class="field" v-for="label in details.labels">
+                                        <div class="control">
+                                            <input type="text" name="label" class="input" v-model="label.name" disabled />
+                                        </div>
+                                    </div>
+                                    <span class="label">Société</span>
+                                    <div class="field" v-for="company in details.companies">
+                                        <div class="control">
+                                            <input type="text" name="company" class="input" v-model="company.name" disabled />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>                 
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <footer class="modal-card-foot">
+                <button class="button is-success" @click="add">Ajouter</button>
+                <button class="button" @click="toggleModal">Annuler</button>
+            </footer>      
+        </div>
+        <button class="modal-close is-large" aria-label="close" @click="toggleModal"></button>
+    </div>
 </div>
 <script>
    Vue.createApp({
@ -66,6 +181,8 @@
                q: '',
                loading: false,
                items: [],
+                details: {},
+                modalIsVisible: false,
            }
        },
        methods: {
@ -116,7 +233,38 @@
                    .finally(() => {
                        this.loading = false;
                    });
-            }
+            },
+            toggleModal() {
+                this.modalIsVisible = !this.modalIsVisible;
+            },
+            loadDetails(discogsId) {
+                console.log('discogsId:', discogsId);
+
+                axios.get(`/api/v1/search/${discogsId}`)
+                    .then( response => {
+                        const {
+                            data,
+                        } = response;
+
+                        this.details = data;
+                        this.toggleModal();
+                    })
+                    .catch((err) => {
+                        showToastr(err.response?.data?.message || "Impossible de charger les détails de cet album");
+                    })
+                    .finally(() => {
+                        this.loading = false;
+                    });
+            },
+            add() {
+                axios.post('/api/v1/albums', this.details)
+                    .then(() => {
+                        window.location.href = '/ma-collection';
+                    })
+                    .catch((err) => {
+                        showToastr(err.response?.data?.message || "Impossible d'ajouter ce album pour le moment…");
+                    });
+            },
        }
    }).mount('#app')
  </script>
--- a/views/pages/home.ejs
+++ b/views/pages/home.ejs
@ -1,16 +1,35 @@
 <section class="section">
    <div class="container">
        <div class="header"></div>
-        <h1 class="title">
-            Ma CDThèque
+        <h1 class="title is-1">
+            My Music Library
        </h1>
        <p class="subtitle">
-            Retrouvez votre CDThèque partout depuis votre PC ou votre smartphone.
+            Retrouvez votre cdthèque partout depuis votre PC ou votre smartphone.
        </p>
        <p>
-            Ma CDThèque est un site web permettant de sauvegarder votre liste des CDs ou Vinyles et de la retrouver facilement et n'importe ou !
+            <strong>My Music Library</strong> est un site web permettant de sauvegarder votre liste des CDs ou Vinyles et de la retrouver facilement et n'importe ou !
            <br />
-            Le code source est publiée sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU GPL-3.0-or-later</a>. Le code source est librement accessible sur <a href="https://git.darkou.fr/dbroqua/nodecdtheque">git.darkou.fr</a>.
+            Le code source est publiée sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later</a>. Le code source est librement accessible sur <a href="https://git.darkou.fr/dbroqua/MyMusicLibrary" target="_blank">git.darkou.fr</a>.
        </p>
+        <h2 class="title is-2">
+            Pourquoi ?
+        </h2>
+        <p>
+            <strong>My Music Library</strong> est né d'un besoin personnel lorsque ma collecion de CD est devenu un peu trop grosse pour m'en souvenir et après avoir acheté par accident plusieurs fois le même CD…
+            <br />
+            Il était donc temps de trouver une solution ! Il existe plusieurs logiciel de gestion de librairies musicales mais, à ma connaissance, aucun facilement accessible via internet (genre calé sous la couette ou dans un magasin de musique 😜).
+        </p>
+        <h2 class="title is-2">
+            Comment ?
+        </h2>
+        <p>
+            Alors là clairement j'ai pas trop réfléchi… <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS</a> forcément, déformation pro 😅. 
+            <br />
+            Pour la base de données je suis parti sur <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB</a> qui me semblait être le plus logique pour stocker une telle collection sans avoir plein de relations dans tous les sens (artiste, pays, genre, style etc…).
+            <br />
+            Pour le front j'ai voulu innover en n'utilisant pas <a href="https://jquery.com/" target="_blank" rel="noopener noreferrer">jQuery</a> et <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Boostrap</a> mais <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS</a> et <a href="https://bulma.io/" target="_blank" rel="noopener noreferrer">Bulma</a> !
+        </p>
+
    </div>
 </section>