Some changes

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(0 -1028.4)"><path d="m12 1037.4c-2.2091 0-4 1.8-4 4s1.7909 4 4 4c2.209 0 4-1.8 4-4s-1.791-4-4-4zm0 3c0.552 0 1 0.4 1 1 0 0.5-0.448 1-1 1s-1-0.5-1-1c0-0.6 0.448-1 1-1z" fill="#e67e22"/><path d="m5.0503 1034.2c-3.9053 3.9-3.9053 10.2 0 14.1 3.9052 3.9 10.237 3.9 14.142 0 3.906-3.9 3.906-10.2 0-14.1-3.905-3.9-10.236-3.9-14.142 0zm4.9497 4.9c1.172-1.2 3.071-1.2 4.243 0 1.171 1.2 1.171 3.1 0 4.3-1.172 1.1-3.071 1.1-4.243 0-1.1716-1.2-1.1716-3.1 0-4.3z" fill="#bdc3c7"/><path d="m4.9289 1033.3c-3.9052 3.9-3.9052 10.2 0 14.1 3.9053 3.9 10.237 3.9 14.142 0s3.905-10.2 0-14.1-10.237-3.9-14.142 0zm4.9498 4.9c1.1713-1.1 3.0713-1.1 4.2423 0 1.172 1.2 1.172 3.1 0 4.3-1.171 1.2-3.071 1.2-4.2423 0-1.1716-1.2-1.1716-3.1 0-4.3z" fill="#34495e"/><path d="m3.3392 1035.4c-0.4005 0.7-0.6934 1.4-0.9126 2.1l6.9748 1.4-4.6623-5.4c-0.5275 0.6-0.9993 1.2-1.3999 1.9z" fill="#ecf0f1"/><path d="m20.66 1045.4c0.4-0.7 0.693-1.4 0.912-2.2l-6.974-1.3 4.662 5.3c0.527-0.5 0.999-1.1 1.4-1.8z" fill="#ecf0f1"/><path d="m12 1036.4c-2.2091 0-4 1.8-4 4s1.7909 4 4 4c2.209 0 4-1.8 4-4s-1.791-4-4-4zm0 3c0.552 0 1 0.4 1 1 0 0.5-0.448 1-1 1s-1-0.5-1-1c0-0.6 0.448-1 1-1z" fill="#f1c40f"/></g></svg>

public/safari-pinned-tab.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3407 6424 c-1 -1 -49 -5 -107 -9 -58 -3 -118 -8 -135 -10 -56 -7
+-130 -17 -150 -21 -631 -116 -1141 -381 -1580 -819 -342 -340 -592 -759 -731
+-1221 -28 -93 -80 -327 -90 -404 -3 -25 -7 -56 -10 -70 -23 -142 -23 -556 0
+-705 8 -47 26 -176 31 -225 38 -313 114 -599 227 -849 54 -122 76 -164 134
+-268 389 -689 1053 -1196 1818 -1388 148 -38 350 -72 481 -83 156 -12 488 -5
+595 12 14 3 48 7 75 11 28 3 57 8 65 10 8 2 31 6 50 9 19 3 74 14 122 26 401
+95 752 259 1088 509 74 55 95 72 195 161 100 90 270 271 344 366 337 435 533
+905 601 1444 16 132 19 174 19 335 1 196 -4 266 -34 480 -8 55 -17 123 -20
+150 -13 104 -26 183 -45 262 -11 46 -22 93 -24 105 -16 84 -129 410 -165 476
+-6 9 -33 63 -60 119 -79 160 -179 318 -294 465 -104 133 -117 148 -252 283
+-331 331 -727 571 -1175 713 -100 32 -274 75 -350 87 -25 4 -52 9 -60 10 -8 2
+-35 6 -60 9 -25 3 -55 8 -66 10 -48 10 -429 27 -437 20z m226 -2954 c43 -20
+117 -91 117 -112 0 -5 -18 -28 -39 -51 -78 -84 -186 -114 -296 -83 -45 14 -69
+29 -111 71 -30 30 -54 58 -54 64 0 34 99 110 170 131 49 15 163 4 213 -20z"/>
+</g>
+</svg>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

sass/home.scss

@@ -0,0 +1,17 @@
+.header {
+  height: 30vh;
+  background-image: url('/header.jpg');
+  background-size: cover;
+  margin-bottom: 3.25rem;
+}
+
+html,
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+body > footer {
+  margin-top: auto;
+}

sass/index.scss

@@ -1,3 +1,4 @@
 @use './bulma.scss';
 @use './toast.scss';
-@use './pagination.scss';
+@use './pagination.scss';
+@use './home.scss';

src/middleware/Albums.js

@@ -83,18 +83,18 @@ class Albums extends Pages {
         return album.save();
     }
 
-    static async getMyArtists(req) {
+    static async getAllDistincts(field, user) {
         const artists = await AlbumsModel.find(
             {
-                user: req.user._id,
+                user,
             },
             [],
             {
                 sort: {
-                    artists_sort: 1,
+                    [field]: 1,
                 },
             }
-        ).distinct("artists_sort");
+        ).distinct(field);
 
         return artists;
     }
@@ -106,6 +106,7 @@ class Albums extends Pages {
             sort = "artists_sort",
             order = "asc",
             artists_sort,
+            format,
         } = this.req.query;
 
         const skip = (page - 1) * limit;
@@ -115,6 +116,9 @@ class Albums extends Pages {
         if (artists_sort) {
             where.artists_sort = artists_sort;
         }
+        if (format) {
+            where["formats.name"] = format;
+        }
 
         const count = await AlbumsModel.count({
             user: this.req.user._id,
@@ -143,9 +147,17 @@ class Albums extends Pages {
     }
 
     async loadMyCollection() {
-        const artists = await Albums.getMyArtists(this.req);
+        const artists = await Albums.getAllDistincts(
+            "artists_sort",
+            this.req.user._id
+        );
+        const formats = await Albums.getAllDistincts(
+            "formats.name",
+            this.req.user._id
+        );
 
         this.setPageContent("artists", artists);
+        this.setPageContent("formats", formats);
     }
 }
 

src/routes/index.js

@@ -11,11 +11,18 @@ import render from "../libs/format";
 // eslint-disable-next-line new-cap
 const router = express.Router();
 
-router
-    .route("/")
-    .get(ensureLoggedIn("/connexion"), (req, res) =>
-        res.redirect("/ma-collection")
-    );
+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);
+    } catch (err) {
+        return next(err);
+    }
+});
 
 router
     .route("/connexion")

views/index.ejs

@@ -5,7 +5,14 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
     
         <title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - Ma CDThèque <% } %></title>
-        <link rel="icon" type="image/png" href="/favicon.png" />
+
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+        <link rel="manifest" href="/site.webmanifest">
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+        <meta name="msapplication-TileColor" content="#da532c">
+        <meta name="theme-color" content="#ffffff">
 
         <link
             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
@@ -42,23 +49,13 @@
                     });
                 }
             });
-
-            // document.addEventListener('DOMContentLoaded', () => {
-            //     (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
-            //         const $notification = $delete.parentNode;
-
-            //         $delete.addEventListener('click', () => {
-            //             $notification.parentNode.removeChild($notification);
-            //         });
-            //     });
-            // });
         </script>
     </head>
     <body class="has-navbar-fixed-top">
         <nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
             <div class="navbar-brand">
                 <a class="navbar-item" href="/">
-                    Ma CDThèque
+                    <img src="/logo.png" alt="Ma CDThèque">
                 </a>
           
                 <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
@@ -71,10 +68,23 @@
             <div id="navbarBasicExample" class="navbar-menu">
                 <% if ( user ) { %>
                 <div class="navbar-start">
-                    <a class="navbar-item" href="/ajouter-un-album">
-                        Ajouter un album
-                    </a>
+                    <div class="navbar-item">
+                        <p class="control">
+                            <a class="button is-link" href="/ajouter-un-album">
+                                <span class="icon">
+                                    <i class="fa-solid fa-plus"></i>
+                                </span>
+                                <span>
+                                    Ajouter un album
+                                </span>
+                            </a>
+                        </p>
+                    </div>
+                </div>
+                <% } %>
           
+                <div class="navbar-end">
+                    <% if ( user ) { %>
                     <div class="navbar-item has-dropdown is-hoverable">
                         <a class="navbar-link">
                             Mon compte
@@ -86,10 +96,7 @@
                             </a>
                         </div>
                     </div>
-                </div>
-                <% } %>
-          
-                <div class="navbar-end">
+                    <% } %>
                     <div class="navbar-item">
                         <div class="buttons">
                             <% if ( !user ) { %>
@@ -155,5 +162,14 @@
             <% } %>
             <%- include(viewname) %>
         </main>
+        <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>. 
+                    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>
+            </div>
+        </footer>
     </body>
 </html>

views/pages/connexion.ejs

@@ -1,12 +1,6 @@
 <div class="container">
     <div class="columns is-mobile">
-        <div class="
-            column 
-            is-10-mobile is-offset-1-mobile
-            is-8-tablet is-offset-2-tablet
-            is-6-desktop is-offset-3-desktop
-            is-4-widescreen is-offset-4-widescreen
-        ">
+        <div class="column is-10-mobile is-offset-1-mobile is-8-tablet is-offset-2-tablet is-6-desktop is-offset-3-desktop is-4-widescreen is-offset-4-widescreen">
             <form class="box" method="POST">
                 <div class="has-text-centered">
                     <img class="mb-4" src="/img/logo.png" alt="DarKou">

views/pages/home.ejs

@@ -0,0 +1,16 @@
+<section class="section">
+    <div class="container">
+        <div class="header"></div>
+        <h1 class="title">
+            Ma CDThèque
+        </h1>
+        <p class="subtitle">
+            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 !
+            <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>.
+        </p>
+    </div>
+</section>

views/pages/inscription.ejs

@@ -1,12 +1,6 @@
 <div class="container">
     <div class="columns is-mobile">
-        <div class="
-            column 
-            is-10-mobile is-offset-1-mobile
-            is-8-tablet is-offset-2-tablet
-            is-6-desktop is-offset-3-desktop
-            is-4-widescreen is-offset-4-widescreen
-        ">
+        <div class="column is-10-mobile is-offset-1-mobile is-8-tablet is-offset-2-tablet is-6-desktop is-offset-3-desktop is-4-widescreen is-offset-4-widescreen">
             <form class="box" method="POST">
                 <div class="has-text-centered">
                     <img class="mb-4" src="/img/logo.png" alt="DarKou">
@@ -38,7 +32,7 @@
                 </div>
               
                 <button class="button is-link">Inscription</button>
-              </form>
+            </form>
         </div>
     </div>
 </div>

views/pages/mon-compte/ma-collection.ejs

@@ -17,7 +17,7 @@
                         </label>
                         <div class="control">
                             <div class="select is-small">
-                                <select v-model="artist" @change="fetch">
+                                <select v-model="artist" @change="changeFilter">
                                     <option value="">Tous</option>
                                     <% 
                                         for (let i = 0; i < page.artists.length; i += 1 ) {
@@ -50,7 +50,32 @@
                         <span>Pays</span>
                     </span>
                 </th>
-                <th>Format</th>
+                <th>
+                    <div class="field">
+                        <label class="label">
+                            <span class="icon-text">
+                                <span class="icon has-text-info">
+                                    <i v-if="sort !== 'formats.name'" class="fa-solid fa-sort" @click="changeSort('formats.name', 'asc')"></i>
+                                    <i v-if="sort === 'formats.name' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('formats.name', 'asc')"></i>
+                                    <i v-if="sort === 'formats.name' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('formats.name', 'desc')"></i>
+                                </span>
+                                <span>Format</span>
+                            </span>
+                        </label>
+                        <div class="control">
+                            <div class="select is-small">
+                                <select v-model="format" @change="changeFilter">
+                                    <option value="">Tous</option>
+                                    <% 
+                                        for (let i = 0; i < page.formats.length; i += 1 ) {
+                                            __append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
+                                        }
+                                    %>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </th>
                 <th>Genres</th>
                 <th>Styles</th>
             </tr>
@@ -129,6 +154,7 @@
                 totalPages: 1,
                 limit: 5,
                 artist: '',
+                format: '',
                 sort: 'artists_sort',
                 order: 'asc',
             }
@@ -140,7 +166,15 @@
             fetch() {
                 this.loading = true;
 
-                axios.get(`/api/v1/albums?page=${this.page}&limit=${this.limit}&artists_sort=${this.artist}&sort=${this.sort}&order=${this.order}`)
+                let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
+                if ( this.artist ) {
+                    url += `&artists_sort=${this.artist}`;
+                }
+                if ( this.format ) {
+                    url += `&format=${this.format}`;
+                }
+
+                axios.get(url)
                     .then( response => {
                         this.items = response.data.rows;
                         this.total = response.data.count;
@@ -180,6 +214,11 @@
 
                 this.fetch();
             },
+            changeFilter() {
+                this.page = 1;
+
+                this.fetch();
+            }
         }
   }).mount('#app')
 </script>