dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 10 Pull Requests Releases 14 Activity

Merge branch 'develop' of git.darkou.fr:dbroqua/MusicTopus

This commit is contained in:
Damien Broqua 2022-09-01 12:14:10 +02:00
parent cc25b83b2e da08aa0222
commit bc3bb3b554
31 changed files with 684 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -18,7 +18,9 @@ Vous pouvez, si vous le souhaitez héberger l'application sur votre propre serve
### Prérequis
Il existe 2 méthodes d'installation, soit via docker soit en mode standalone. Peu importe la méthode il vous faudra un compte sur [https://formspree.io/](https://formspree.io/) afin d'avoir une page nous-contacter fonctionnelle.
Il existe 2 méthodes d'installation, soit via docker soit en mode standalone.
Peu importe la méthode il vous faudra un compte sur [https://formspree.io/](https://formspree.io/) afin d'avoir une page nous-contacter fonctionnelle ou configurer le SMTP tel que défini dans la section [variables d'environnements](#env-file).
Pour la méthode docker il ne vous faudra rien de plus que `docker` et `docker-compose`.
@ -90,7 +92,7 @@ C'est terminé !
Le site est accessible sur [http://localhost:3001](http://localhost:3001).
:information_source: Information : Vous pouvez, et vous dreviez, également regarder du côté de `systemd`, `pm2` ou encore `supervisor` pour que le service démarre en même temps que votre serveur.
:information_source: Information : Vous pouvez, et vous devriez, également regarder du côté de `systemd`, `pm2` ou encore `supervisor` pour que le service démarre en même temps que votre serveur.
### Aller plus loin
@ -227,6 +229,13 @@ S3_BUCKET # Nom du bucket (musictopus par défaut, à changer impérativement si
JOBS_HEADER_KEY # Nom du header utilisé pour l'identification des tâches cron (musictopus par défaut)
JOBS_HEADER_VALUE # Valeur de la clé (ooYee9xok7eigo2shiePohyoGh1eepew par défaut)
REGISTRATION_OPEN # true/false en fonction de si vous souhaitez activer ou non l'inscription à votre instance (true par défaut)
MAIL_METHOD # permet de définir la façon dont les mails de la page contact sont envoyés (formspree ou smtp)
MAIL_HOST # Adresse du server mail (dams le cas ou MAIL_METHOD est défini sur smtp)
MAIL_PORT # Port d'écoute du serveur smtp (dams le cas ou MAIL_METHOD est défini sur smtp)
MAIL_USER # Adresse mail du compte permettant d'envoyer les mails (dams le cas ou MAIL_METHOD est défini sur smtp)
MAIL_PASSWORD # Mot de passe du compte email (dams le cas ou MAIL_METHOD est défini sur smtp)
MAIL_TO # Adresse mail du contact qui recevra les messages de la page "nous contacter" (dams le cas ou MAIL_METHOD est défini sur smtp)
```
## Contributeurs

6
docker-compose.yml.dev
View File

@ -37,6 +37,12 @@ services:
JOBS_HEADER_KEY: ${JOBS_HEADER_KEY}
JOBS_HEADER_VALUE: ${JOBS_HEADER_VALUE}
REGISTRATION_OPEN: ${REGISTRATION_OPEN}
MAIL_METHOD: ${MAIL_METHOD}
MAIL_HOST: ${MAIL_HOST}
MAIL_PORT: ${MAIL_PORT}
MAIL_USER: ${MAIL_USER}
MAIL_PASSWORD: ${MAIL_PASSWORD}
MAIL_TO: ${MAIL_TO}
networks:
- musictopus
musictopus-db:

118
fontello.json Normal file
View File

@ -0,0 +1,118 @@
{
"name": "icon",
"css_prefix_text": "icon-",
"css_use_suffix": false,
"hinting": true,
"units_per_em": 1000,
"ascent": 850,
"glyphs": [
{
"uid": "44e04715aecbca7f266a17d5a7863c68",
"css": "plus",
"code": 59392,
"src": "fontawesome"
},
{
"uid": "8b80d36d4ef43889db10bc1f0dc9a862",
"css": "user",
"code": 59393,
"src": "fontawesome"
},
{
"uid": "9dd9e835aebe1060ba7190ad2b2ed951",
"css": "search",
"code": 59394,
"src": "fontawesome"
},
{
"uid": "bf882b30900da12fca090d9796bc3030",
"css": "mail",
"code": 59395,
"src": "fontawesome"
},
{
"uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1",
"css": "link",
"code": 59396,
"src": "fontawesome"
},
{
"uid": "e15f0d620a7897e2035c18c80142f6d9",
"css": "link-ext",
"code": 61582,
"src": "fontawesome"
},
{
"uid": "9bc2902722abb366a213a052ade360bc",
"css": "spin",
"code": 59449,
"src": "fontelico"
},
{
"uid": "bbfb51903f40597f0b70fd75bc7b5cac",
"css": "trash",
"code": 61944,
"src": "fontawesome"
},
{
"uid": "d73eceadda1f594cec0536087539afbf",
"css": "heart",
"code": 59397,
"src": "fontawesome"
},
{
"uid": "cce5e05853d0798a4d10077ef613387c",
"css": "blind",
"code": 62109,
"src": "fontawesome"
},
{
"uid": "567e3e257f2cc8fba2c12bf691c9f2d8",
"css": "moon",
"code": 61830,
"src": "fontawesome"
},
{
"uid": "aa035df0908c4665c269b7b09a5596f3",
"css": "sun",
"code": 61829,
"src": "fontawesome"
},
{
"uid": "c5fd349cbd3d23e4ade333789c29c729",
"css": "eye",
"code": 59398,
"src": "fontawesome"
},
{
"uid": "d870630ff8f81e6de3958ecaeac532f2",
"css": "left-open",
"code": 59399,
"src": "fontawesome"
},
{
"uid": "399ef63b1e23ab1b761dfbb5591fa4da",
"css": "right-open",
"code": 59400,
"src": "fontawesome"
},
{
"uid": "895405dfac8a3b7b2f23b183c6608ee6",
"css": "export",
"code": 59401,
"src": "fontawesome"
},
{
"uid": "4aad6bb50b02c18508aae9cbe14e784e",
"css": "share",
"code": 61920,
"src": "fontawesome"
},
{
"uid": "a73c5deb486c8d66249811642e5d719a",
"css": "refresh",
"code": 59402,
"src": "fontawesome"
}
]
}

2
package.json
View File

@ -59,6 +59,7 @@
"knacss": "^8.0.4",
"mongoose": "^6.2.1",
"mongoose-unique-validator": "^3.0.0",
"nodemailer": "^6.7.8",
"npm-run-all": "^4.1.5",
"passport": "^0.5.2",
"passport-custom": "^1.1.1",
@ -66,6 +67,7 @@
"passport-local": "^1.0.0",
"rimraf": "^3.0.2",
"sass": "^1.49.7",
"svg-captcha": "^1.4.0",
"uuid": "^8.3.2",
"vue": "^3.2.31"
},

BIN
public/font/icon.eot
View File

Binary file not shown.

2
public/font/icon.svg
View File

@ -26,6 +26,8 @@
<glyph glyph-name="export" unicode="&#xe809;" d="M786 298v-144q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h142q7 0 13-6t5-12q0-15-15-18-43-15-74-34-5-2-9-2h-62q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v119q0 11 10 16 16 7 31 21 8 9 19 4 12-5 12-16z m132 277l-214-214q-10-11-25-11-7 0-14 3-22 9-22 33v107h-89q-181 0-245-73-66-77-41-264 2-13-11-19-5-1-7-1-9 0-14 7-6 8-12 17t-22 39-28 55-21 64-10 68q0 27 2 51t8 50 15 49 27 45 38 42 52 34 70 27 89 17 110 6h89v107q0 24 22 33 7 3 14 3 14 0 25-11l214-214q11-10 11-25t-11-25z" horiz-adv-x="928.6" />
<glyph glyph-name="refresh" unicode="&#xe80a;" d="M843 261q0-3 0-4-36-150-150-243t-267-93q-81 0-157 31t-136 88l-72-72q-11-11-25-11t-25 11-11 25v250q0 14 11 25t25 11h250q14 0 25-11t10-25-10-25l-77-77q40-36 90-57t105-20q74 0 139 37t104 99q6 10 30 66 4 13 16 13h107q8 0 13-6t5-12z m14 446v-250q0-14-10-25t-26-11h-250q-14 0-25 11t-10 25 10 25l77 77q-82 77-194 77-75 0-140-37t-104-99q-6-10-29-66-5-13-17-13h-111q-7 0-13 6t-5 12v4q36 150 151 243t268 93q81 0 158-31t137-88l72 72q11 11 25 11t26-11 10-25z" horiz-adv-x="857.1" />
<glyph glyph-name="spin" unicode="&#xe839;" d="M855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
<glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
public/font/icon.ttf
View File

Binary file not shown.

BIN
public/font/icon.woff
View File

Binary file not shown.

BIN
public/font/icon.woff2
View File

Binary file not shown.

BIN
public/img/loading-dark.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
public/img/loading-light.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

4
sass/colors.scss
View File

@ -56,6 +56,8 @@ $pagination-hover-color: rgb(115, 151, 186);
--button-link-text-color: #2C364A;
--loader-img: url('/img/loading-light.gif');
--nord0: #{$nord0};
--nord1: #{$nord1};
--nord2: #{$nord2};
@ -94,4 +96,6 @@ $pagination-hover-color: rgb(115, 151, 186);
--border-color: #{$nord1};
--button-link-text-color: #{$white};
--loader-img: url('/img/loading-dark.gif');
}

13
sass/icons.scss
View File

@ -1,11 +1,11 @@
@font-face {
font-family: 'icon';
src: url('/font/icon.eot?80770511');
src: url('/font/icon.eot?80770511#iefix') format('embedded-opentype'),
url('/font/icon.woff2?80770511') format('woff2'),
url('/font/icon.woff?80770511') format('woff'),
url('/font/icon.ttf?80770511') format('truetype'),
url('/font/icon.svg?80770511#icon') format('svg');
src: url('/font/icon.eot?41426785');
src: url('/font/icon.eot?41426785#iefix') format('embedded-opentype'),
url('/font/icon.woff2?41426785') format('woff2'),
url('/font/icon.woff?41426785') format('woff'),
url('/font/icon.ttf?41426785') format('truetype'),
url('/font/icon.svg?41426785#icon') format('svg');
font-weight: normal;
font-style: normal;
}
@ -42,6 +42,7 @@
.icon-left-open:before { content: '\e807'; } /* '' */
.icon-right-open:before { content: '\e808'; } /* '' */
.icon-export:before { content: '\e809'; } /* '' */
.icon-refresh:before { content: '\e80a'; } /* '' */
.icon-spin:before { content: '\e839'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-sun:before { content: '\f185'; } /* '' */

1
sass/index.scss
View File

@ -39,6 +39,7 @@
@import './icons';
@import './list';
@import './box';
@import './loader';
@import './error';
@import './500';

13
sass/loader.scss Normal file
View File

@ -0,0 +1,13 @@
.loader {
display: flex;
flex-direction: column;
align-items: center;
.animation {
background-image: var(--loader-img);
background-repeat: no-repeat;
background-position: center center;
width: 64px;
height: 64px;
}
}

22
sass/ma-collection-details.scss
View File

@ -1,4 +1,26 @@
.ma-collection-details {
h1 {
i {
cursor: pointer;
&.icon-trash {
color: $danger-color;
@include transition() {}
&:hover {
color: $danger-color-hl;
}
}
&.icon-refresh {
color: $primary-color;
@include transition() {}
&:hover {
color: $primary-color-hl;
}
}
}
}
.galerie {
display: flex;
flex-wrap: wrap;

2
sass/navbar.scss
View File

@ -54,7 +54,7 @@
position: relative;
width: 3.25rem;
margin-left: auto;
color: rgba(0,0,0,.7);
color: var(--font-color);
@include respond-to("medium-up") {
display: none;

2
src/app.js
View File

@ -23,6 +23,7 @@ import importJobsRouter from "./routes/jobs";
import importAlbumRouterApiV1 from "./routes/api/v1/albums";
import importSearchRouterApiV1 from "./routes/api/v1/search";
import importMeRouterApiV1 from "./routes/api/v1/me";
import importContactRouterApiV1 from "./routes/api/v1/contact";
passportConfig(passport);
@ -91,6 +92,7 @@ app.use("/jobs", importJobsRouter);
app.use("/api/v1/albums", importAlbumRouterApiV1);
app.use("/api/v1/search", importSearchRouterApiV1);
app.use("/api/v1/me", importMeRouterApiV1);
app.use("/api/v1/contact", importContactRouterApiV1);
// Handle 404
app.use((req, res) => {

10
src/config/index.js
View File

@ -19,4 +19,14 @@ module.exports = {
process.env.JOBS_HEADER_VALUE || "ooYee9xok7eigo2shiePohyoGh1eepew",
registrationOpen:
(process.env.REGISTRATION_OPEN || "true").toLowerCase() === "true",
mailMethod: process.env.MAIL_METHOD || "formspree",
smtpConfig: {
host: process.env.MAIL_HOST,
port: process.env.MAIL_PORT,
auth: {
user: process.env.MAIL_USER,
pass: process.env.MAIL_PASSWORD,
},
},
mailTo: process.env.MAIL_TO,
};

18
src/helpers/index.js
View File

@ -5,13 +5,25 @@ import { discogsToken } from "../config";
export const getBaseUrl = (req) => `${req.protocol}://${req.get("host")}`;
export const searchSong = async (q) => {
export const searchSong = async (q, format, year, country) => {
const dis = new Discogs({ userToken: discogsToken }).database();
const res = await dis.search({
const params = {
q,
type: "release",
});
};
if (format) {
params.format = format;
}
if (year) {
params.year = year;
}
if (country) {
params.country = country;
}
const res = await dis.search(params);
return res;
};

37
src/middleware/Albums.js
View File

@ -7,7 +7,8 @@ import AlbumsModel from "../models/albums";
import JobsModel from "../models/jobs";
import UsersModel from "../models/users";
import ErrorEvent from "../libs/error";
// import { uploadFromUrl } from "../libs/aws";
import { getAlbumDetails } from "../helpers";
/**
* Classe permettant la gestion des albums d'un utilisateur
@ -182,6 +183,34 @@ class Albums extends Pages {
}
}
/**
* Méthode permettant de mettre à jour un album
*
* @return {Object}
*/
async patchOne() {
const { itemId: _id } = this.req.params;
const { _id: User } = this.req.user;
const album = await AlbumsModel.findOne({
_id,
User,
});
if (!album) {
throw new ErrorEvent(
404,
"Mise à jour",
"Impossible de trouver cet album"
);
}
const values = await getAlbumDetails(album.discogsId);
await album.updateOne(values);
return album;
}
/**
* Méthode permettant de supprimer un élément d'une collection
* @return {Boolean}
@ -196,7 +225,11 @@ class Albums extends Pages {
return true;
}
throw new ErrorEvent(404, "Impossible de trouver cet album");
throw new ErrorEvent(
404,
"Suppression",
"Impossible de trouver cet album"
);
}
/**

2
src/middleware/Jobs.js
View File

@ -18,7 +18,7 @@ class Jobs {
throw new ErrorEvent(
404,
"Item non trouvé",
`L'album avant l'id ${itemId} n'existe plus dans la collection`
`L'album avec l'id ${itemId} n'existe plus dans la collection`
);
}

10
src/routes/api/v1/albums.js
View File

@ -47,6 +47,16 @@ router
router
.route("/:itemId")
.patch(ensureLoggedIn("/connexion"), async (req, res, next) => {
try {
const albums = new Albums(req);
const data = await albums.patchOne();
sendResponse(req, res, data);
} catch (err) {
next(err);
}
})
.delete(ensureLoggedIn("/connexion"), async (req, res, next) => {
try {
const albums = new Albums(req);

77
src/routes/api/v1/contact.js Normal file
View File

@ -0,0 +1,77 @@
import express from "express";
import nodemailer from "nodemailer";
import svgCaptcha from "svg-captcha";
import { sendResponse } from "../../../libs/format";
import { mailMethod, smtpConfig, mailTo, siteName } from "../../../config";
import ErrorEvent from "../../../libs/error";
// eslint-disable-next-line new-cap
const router = express.Router();
router
.route("/")
.get(async (req, res, next) => {
try {
const captcha = svgCaptcha.create({
size: 4,
noise: 2,
color: true,
});
req.session.captcha = captcha.text;
res.type("svg");
return res.status(200).send(captcha.data);
} catch (err) {
return next(err);
}
})
.post(async (req, res, next) => {
try {
if (mailMethod === "smtp") {
const { email, name, message, captcha } = req.body;
if (!captcha || captcha !== req.session.captcha) {
throw new ErrorEvent(
406,
"Captcha",
"Le captcha n'est pas valide"
);
}
if (!email || !message) {
throw new ErrorEvent(
406,
"Erreur de saisie",
"Le formulaire n'est pas correctement saisi"
);
}
const transporter = nodemailer.createTransport(smtpConfig);
const text = `Bonjour,
Vous venez de recevoir un nouveau message de ${name} (${email}) :
${message}
`;
const data = await transporter.sendMail({
from: smtpConfig.auth.user,
to: mailTo,
subject: `${siteName} : Nouveau message`,
text,
});
const { messageId, response } = data;
return sendResponse(req, res, { messageId, response });
}
throw new ErrorEvent(500, "Routeur", "Méthode non configurée");
} catch (err) {
return next(err);
}
});
export default router;

7
src/routes/api/v1/search.js
View File

@ -9,7 +9,12 @@ const router = express.Router();
router.route("/").get(ensureLoggedIn("/connexion"), async (req, res, next) => {
try {
const data = await searchSong(req.query.q);
const data = await searchSong(
req.query.q,
req.query.format || null,
req.query.year || null,
req.query.country || null
);
sendResponse(req, res, data);
} catch (err) {

113
views/pages/ajouter-un-album.ejs
View File

@ -1,19 +1,37 @@
<main class="layout-maxed ajouter-un-album" id="app">
<h1>Ajouter un album</h1>
<div class="grid sm:grid-cols-2">
<div>
<form @submit="search">
<form @submit="search">
<div class="grid sm:grid-cols-2">
<div>
<label for="q">Nom de l'album ou code barre</label>
<div class="field has-addons">
<input type="text" name="q" id="q" v-model="q" placeholder="ex : Hybrid Theory" autofocus>
<input type="text" name="q" id="q" v-model="q" placeholder="ex : Iron Maiden - Powerslave" autofocus>
<button class="button is-primary" :disabled="loading" aria-label="Chercher">
<i class="icon-search" v-if="!loading"></i>
<i class="icon-spin animate-spin" v-if="loading"></i>
</button>
</div>
</form>
<div class="grid sm:grid-cols-3 gap-5">
<div class="field">
<label for="format">Trier par</label>
<select id="format" v-model="format">
<option value="">Tous</option>
<option v-for="format in orderedItems(formats)" :value="format">{{format}}</option>
</select>
</div>
<div class="field">
<label for="year">Année</label>
<input type="number" name="year" v-model="year" id="year" placeholder="1984">
</div>
<div class="field">
<label for="country">Pays</label>
<input type="string" name="country" v-model="country" id="country" placeholder="France">
</div>
</div>
</div>
</div>
</div>
</form>
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
<div class="item" v-if="!loading" v-for="item in items">
@ -158,10 +176,77 @@
data() {
return {
q: '',
year: '',
country: '',
format: '',
loading: false,
items: [],
details: {},
modalIsVisible: false,
formats: [
'Vinyl',
'Acetate',
'Flexi-disc',
'Lathe Cut',
'Mighty Tiny',
'Shellac',
'Sopic',
'Pathé Disc',
'Edison Disc',
'Cylinder',
'CD',
'CDr',
'CDV',
'DVD',
'DVDr',
'HD DVD',
'HD DVD-R',
'Blu-ray',
'Blu-ray-R',
'Ultra HD Blu-ray',
'SACD',
'4-Track Cartridge',
'8-Track Cartridge',
'Cassette',
'DC-International',
'Elcaset',
'PlayTape',
'RCA Tape Cartridge',
'DAT',
'DCC',
'Microcassette',
'NT Cassette',
'Pocket Rocker',
'Revere Magnetic Stereo Tape Ca',
'Tefifon',
'Reel-To-Reel',
'Sabamobil',
'Betacam',
'Betacam SP',
'Betamax',
'Cartrivision',
'MiniDV',
'Super VHS',
'U-matic',
'VHS',
'Video 2000',
'Video8',
'Film Reel',
'HitClips',
'Laserdisc',
'SelectaVision',
'VHD',
'Wire Recording',
'Minidisc',
'MVD',
'UMD',
'Floppy Disk',
'File',
'Memory Stick',
'Hybrid',
'All Media',
'Box Set',
]
}
},
methods: {
@ -173,8 +258,19 @@
}
this.loading = true;
let url = `/api/v1/search?q=${this.q}`;
axios.get(`/api/v1/search?q=${this.q}`)
if ( this.year ) {
url += `&year=${this.year}`;
}
if ( this.country ) {
url += `&country=${this.country}`;
}
if ( this.format ) {
url += `&format=${this.format}`;
}
axios.get(url)
.then( response => {
const {
results,
@ -242,6 +338,9 @@
showToastr(err.response?.data?.message || "Impossible d'ajouter cet album pour le moment…");
});
},
orderedItems(items) {
return items.sort();
}
}
}).mount('#app');
</script>

77
views/pages/collection.ejs
View File

@ -85,6 +85,12 @@
</span>
<div class="grid grid-cols-1 md:grid-cols-2 list">
<div class="loader" v-if="loading">
<div class="animation"></div>
<div>
Chargement des données en cours…
</div>
</div>
<div class="item" v-if="!loading" v-for="item in items">
<span class="title">
{{ item.artists_sort}} - {{ item.title }}
@ -172,8 +178,55 @@
methods: {
fetch() {
this.loading = true;
this.total = 0;
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const entries = urlParams.entries();
for(const entry of entries) {
switch(entry[0]) {
case 'artists_sort':
this.artist = entry[1];
break;
default:
this[entry[0]] = entry[1];
}
}
let url = `/api/v1/albums?userId=${this.userId}&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}`;
}
if ( this.year ) {
url += `&year=${this.year}`;
}
if ( this.genre ) {
url += `&genre=${this.genre}`;
}
if ( this.style ) {
url += `&style=${this.style}`;
}
axios.get(url)
.then( response => {
this.items = response.data.rows;
this.total = response.data.count || 0;
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger cette collection");
})
.finally(() => {
this.loading = false;
});
},
changeUrl() {
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if ( this.artist ) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`;
}
@ -190,38 +243,26 @@
url += `&style=${this.style.replace('&', '%26')}`;
}
axios.get(url)
.then( response => {
this.items = response.data.rows;
this.total = response.data.count;
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger cette collection");
})
.finally(() => {
this.loading = false;
});
location.href = url;
},
next(event) {
event.preventDefault();
this.page += 1;
this.fetch();
this.changeUrl();
},
previous(event) {
event.preventDefault();
this.page -= 1;
this.fetch();
this.changeUrl();
},
goTo(page) {
this.page = page;
this.fetch();
this.changeUrl();
},
changeSort() {
const [sort,order] = this.sortOrder.split('-');
@ -229,12 +270,12 @@
this.order = order;
this.page = 1;
this.fetch();
this.changeUrl();
},
changeFilter() {
this.page = 1;
this.fetch();
this.changeUrl();
},
showMoreFilters() {
this.moreFilters = !this.moreFilters;

1
views/pages/composants.ejs
View File

@ -355,6 +355,7 @@
<i class="icon-left-open">.icon-left-open</i>
<i class="icon-right-open">.icon-right-open</i>
<i class="icon-export">.icon-export</i>
<i class="icon-refresh">.icon-refresh</i>
<i class="icon-share">.icon-share</i>
<i class="icon-spin">.icon-spin</i>
<i class="icon-sun">.icon-sun</i>

53
views/pages/mon-compte/ma-collection/details.ejs
View File

@ -1,6 +1,10 @@
<main class="layout-maxed ma-collection-details" id="app" v-cloak @keyup="changeImage">
<h1>{{item.artists_sort}} - {{item.title}}</h1>
<h1>
{{item.artists_sort}} - {{item.title}}
<i class="icon-trash" title="Supprimer cette fiche" @click="showConfirmDelete()"></i>
<i class="icon-refresh" title="Mettre à jour les données de cette fiche" @click="updateItem()"></i>
</h1>
<div class="grid sm:grid-cols-3 gap-16">
<div class="text-center">
<img :src="item.thumb %>" :alt="`Miniature pour l'album ${item.title}`" />
@ -70,6 +74,9 @@
<ul class="ml-4">
<li v-for="(format) in item.formats">
{{format.name}}
<template v-if="format.text">
- <i>{{format.text}}</i>
</template>
<template v-if="format.descriptions && format.descriptions.length > 0">
(<span v-for="(description, index) in format.descriptions">
{{description}}<template v-if="index < format.descriptions.length - 1">, </template>
@ -153,6 +160,20 @@
<img :src="preview" />
</div>
</div>
<div class="modal" :class="{'is-visible': showModalDelete}">
<div class="modal-background"></div>
<div class="modal-card">
<header></header>
<section>
Êtes-vous sûr de vouloir supprimer cet album ?
</section>
<footer>
<button class="button is-primary" @click="deleteItem">Supprimer</button>
<button class="button" @click="toggleModal">Annuler</button>
</footer>
</div>
</div>
</main>
<script>
@ -167,6 +188,7 @@
identifiersPreviewLength: 16,
preview: null,
index: null,
showModalDelete: false,
}
},
created() {
@ -277,6 +299,35 @@
document.querySelector('#identifiers').scrollIntoView({ behavior: 'smooth' });
},
showConfirmDelete() {
this.toggleModal();
},
toggleModal() {
this.showModalDelete = !this.showModalDelete;
},
updateItem() {
showToastr("Mise à jour en cours…", true);
axios.patch(`/api/v1/albums/${this.item._id}`)
.then( (res) => {
showToastr("Mise à jour réalisée avec succès", true);
this.item = res.data;
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de mettre à jour cet album", false);
});
},
deleteItem() {
axios.delete(`/api/v1/albums/${this.item._id}`)
.then( () => {
return locatiom.href = "/ma-collection";
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
})
.finally(() => {
this.toggleModal();
});
},
},
}).mount('#app');
</script>

76
views/pages/mon-compte/ma-collection/index.ejs
View File

@ -89,6 +89,12 @@
</span>
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
<div class="loader" v-if="loading">
<div class="animation"></div>
<div>
Chargement des données en cours…
</div>
</div>
<div class="item" v-if="!loading" v-for="item in items">
<span class="title">
<a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
@ -226,8 +232,54 @@
methods: {
fetch() {
this.loading = true;
this.total = 0;
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const entries = urlParams.entries();
for(const entry of entries) {
switch(entry[0]) {
case 'artists_sort':
this.artist = entry[1];
break;
default:
this[entry[0]] = entry[1];
}
}
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}`;
}
if ( this.year ) {
url += `&year=${this.year}`;
}
if ( this.genre ) {
url += `&genre=${this.genre}`;
}
if ( this.style ) {
url += `&style=${this.style}`;
}
axios.get(url)
.then( response => {
this.items = response.data.rows;
this.total = response.data.count || 0;
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger votre collection");
})
.finally(() => {
this.loading = false;
});
},
changeUrl() {
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if ( this.artist ) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`;
}
@ -244,38 +296,26 @@
url += `&style=${this.style.replace('&', '%26')}`;
}
axios.get(url)
.then( response => {
this.items = response.data.rows;
this.total = response.data.count;
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger votre collection");
})
.finally(() => {
this.loading = false;
});
location.href = url;
},
next(event) {
event.preventDefault();
this.page += 1;
this.fetch();
this.changeUrl();
},
previous(event) {
event.preventDefault();
this.page -= 1;
this.fetch();
this.changeUrl();
},
goTo(page) {
this.page = page;
this.fetch();
this.changeUrl();
},
changeSort() {
const [sort,order] = this.sortOrder.split('-');
@ -283,12 +323,12 @@
this.order = order;
this.page = 1;
this.fetch();
this.changeUrl();
},
changeFilter() {
this.page = 1;
this.fetch();
this.changeUrl();
},
showMoreFilters() {
this.moreFilters = !this.moreFilters;

72
views/pages/nous-contacter.ejs
View File

@ -1,22 +1,80 @@
<section class="box">
<section class="box" id="app">
<h1>Nous contacter</h1>
<form action="https://formspree.io/f/<%= config.formspreeId %>" method="POST">
<form @submit="send" <% if (config.mailMethod === 'formspree' ) { %> id="contact" method="POST" action="https://formspree.io/f/<%= config.formspreeId %>" <% } %>>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
<div class="field">
<label for="email">Addresse e-mail*</label>
<input type="email" name="email" id="email" required />
<input type="email" name="email" id="email" v-model="email" required />
</div>
<div class="field">
<label for="name">Prénom, nom</label>
<input type="text" name="name" id="name" />
<input type="text" name="name" id="name" v-model="name" />
</div>
</div>
<div class="field">
<label for="message">Message*</label>
<textarea name="message" id="message" rows="6" required ></textarea>
<textarea name="message" id="message" rows="6" required v-model="message" ></textarea>
</div>
<button type="submit" class="button is-primary">Envoyer</button>
<% if (config.mailMethod !== 'formspree' ) { %>
<img src="/api/v1/contact" alt="Captcha" />
<div class="field">
<label for="captcha">Captcha</label>
<input type="text" name="captcha" id="captcha" v-model="captcha" required />
</div>
<% } %>
<button type="submit" class="button is-primary" :disabled="loading">
<% if (config.mailMethod !== 'formspree' ) { %>
<i class="icon-spin animate-spin" v-if="loading"></i>
<% } %>
Envoyer
</button>
</form>
</section>
</section>
<% if (config.mailMethod === 'smtp' ) { %>
<script>
Vue.createApp({
data() {
return {
email: '',
name: '',
message: '',
captcha: '',
loading: false,
}
},
methods: {
send(event) {
event.preventDefault();
if ( this.loading ) {
return false;
}
this.loading = true;
const {
email,
message,
name,
captcha,
} = this;
axios.post('/api/v1/contact', {email, name, message, captcha})
.then( () => {
showToastr("Message correctement envoyé", true);
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible d'envoyer votre message", false);
})
.finally(() => {
this.loading = false;
})
},
},
}).mount('#app');
</script>
<% } %>