Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: #28
Co-authored-by: Damien Broqua <dbroqua@noreply.localhost>
Co-committed-by: Damien Broqua <dbroqua@noreply.localhost>
This commit is contained in:
Damien Broqua 2022-03-04 16:33:45 +01:00
parent cf63d8b6d8
commit b27a81a0b6
26 changed files with 1094 additions and 97 deletions

View File

@ -16,7 +16,7 @@ module.exports = {
'no-underscore-dangle': [
'error',
{
allow: ['_id', 'artists_sort'],
allow: ['_id', 'artists_sort', 'type_'],
},
],
'camelcase': [

View File

@ -1,5 +1,7 @@
# MusicTopus
![MusicTopus](public/img/logo-large.png)
MusicTopus est une application Web (que vous pouvez auto-héberger) et un site Web (sur lequel vous pouvez créer un compte) permettant de gérer votre liste des CDs et Vinyles et de l'utiliser facilement n'importe où.
Le code source est publié sous licence libre [GNU GPL-3.0-or-later](LICENSE) et est disponible sur [git.darkou.fr](https://git.darkou.fr/dbroqua/MusicTopus).

View File

@ -51,10 +51,12 @@
"debug": "^4.3.3",
"disconnect": "^1.2.2",
"ejs": "^3.1.6",
"excel4node": "^1.7.2",
"express": "^4.17.2",
"express-session": "^1.17.2",
"knacss": "^8.0.4",
"moment": "^2.29.1",
"moment-timezone": "^0.5.34",
"mongoose": "^6.2.1",
"mongoose-unique-validator": "^3.0.0",
"passport": "^0.5.2",

Binary file not shown.

View File

@ -20,6 +20,12 @@
<glyph glyph-name="eye" unicode="&#xe806;" d="M929 314q-85 132-213 197 34-58 34-125 0-103-73-177t-177-73-177 73-73 177q0 67 34 125-128-65-213-197 75-114 187-182t242-68 243 68 186 182z m-402 215q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-11 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19z m473-215q0-19-11-38-78-129-210-206t-279-77-279 77-210 206q-11 19-11 38t11 39q78 128 210 205t279 78 279-78 210-205q11-20 11-39z" horiz-adv-x="1000" />
<glyph glyph-name="left-open" unicode="&#xe807;" d="M654 682l-297-296 297-297q10-10 10-25t-10-25l-93-93q-11-10-25-10t-25 10l-414 415q-11 10-11 25t11 25l414 414q10 11 25 11t25-11l93-93q10-10 10-25t-10-25z" horiz-adv-x="714.3" />
<glyph glyph-name="right-open" unicode="&#xe808;" d="M618 361l-414-415q-11-10-25-10t-25 10l-93 93q-11 11-11 25t11 25l296 297-296 296q-11 11-11 25t11 25l93 93q10 11 25 11t25-11l414-414q10-11 10-25t-10-25z" horiz-adv-x="714.3" />
<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="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" />

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,7 +1,7 @@
/**
* Fonction permettant d'afficher un message dans un toastr
* @param {String} message
*/
* Fonction permettant d'afficher un message dans un toastr
* @param {String} message
*/
function showToastr(message) {
let x = document.getElementById("toastr");
if ( message ) {
@ -114,17 +114,22 @@ document.addEventListener('DOMContentLoaded', () => {
}
const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
if ( switchAriaThemeBtn ) {
switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
}
setAriaTheme(getCookie('ariatheme'));
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
toggleSwitch.addEventListener('change', switchTheme, false);
if ( toggleSwitch ) {
toggleSwitch.addEventListener('change', switchTheme, false);
}
let currentThemeIsDark = getCookie('theme');
if ( currentThemeIsDark === 'false' && window.matchMedia ) {
currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
console.log('currentThemeIsDark:', currentThemeIsDark);
switchTheme({target: {checked: currentThemeIsDark === 'dark'}});
toggleSwitch.checked = currentThemeIsDark === 'dark';
if ( toggleSwitch) {
toggleSwitch.checked = currentThemeIsDark === 'dark';
}
});

View File

@ -3,6 +3,10 @@
display: flex;
flex-direction: column;
&.inline {
flex-direction: row;
}
&.has-addons {
display: flex;
justify-content: flex-start;
@ -40,6 +44,28 @@
}
}
input[type="radio"] {
border-radius: 50%;
appearance: none;
width: 1.2rem;
height: 1.2rem;
vertical-align: text-bottom;
outline: 0;
box-shadow: inset 0 0 0 1px var(--input-active-color);
background-color: #fff;
transition: background-size .15s;
cursor: pointer;
&:checked {
box-shadow: inset 0 0 0 4px var(--input-active-color);
}
}
input[type="radio"] + label,
label + input[type="radio"] {
margin-left: 12px;
}
select {
appearance: none;
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");

View File

@ -1,5 +1,6 @@
html {
min-height: 100vh;
scroll-behavior: smooth;
body {
background-color: var(--bg-color);
@ -69,4 +70,16 @@ html {
.is-hidden {
display: none;
}
.ml-4 {
margin-left: 1rem;
}
.sm-hidden {
display: none;
@include respond-to("small-up") {
display: initial;
}
}

View File

@ -39,6 +39,9 @@
.icon-link:before { content: '\e804'; } /* '' */
.icon-heart:before { content: '\e805'; } /* '' */
.icon-eye:before { content: '\e806'; } /* '' */
.icon-left-open:before { content: '\e807'; } /* '' */
.icon-right-open:before { content: '\e808'; } /* '' */
.icon-export:before { content: '\e809'; } /* '' */
.icon-spin:before { content: '\e839'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-sun:before { content: '\f185'; } /* '' */

View File

@ -19,8 +19,8 @@
// COMPOSANTS (à ajouter au besoin)
// @import "../node_modules/knacss/sass/components/button";
// @import "components/burger";
// @import "components/checkbox";
// @import "components/radio";
// @import "../node_modules/knacss/sass/components/checkbox";
@import "../node_modules/knacss/sass/components/radio";
// @import "../node_modules/knacss/sass/components/select";
// @import "components/quote";
@ -43,4 +43,5 @@
@import './error';
@import './home';
@import './ajouter-un-album';
@import './ma-collection';
@import './ma-collection';
@import './ma-collection-details';

View File

@ -0,0 +1,55 @@
.ma-collection-details {
.galerie {
display: flex;
flex-wrap: wrap;
div {
width: 80px;
height: 80px;
margin: 0.25rem;
padding: 0.25rem;
border: 2px solid var(--font-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
max-width: 90%;
}
}
}
.modal {
button.close {
height: 36px;
max-height: 36px;
max-width: 36px;
min-height: 36px;
min-width: 36px;
width: 36px;
position: absolute;
background-color: rgba(10,10,10,.6);
right: 12px;
top: 12px;
}
.navigation {
position: absolute;
top: 50%;
cursor: pointer;
z-index: 10;
&.previous {
left: 12px;
}
&.next {
right: 12px;
}
i {
font-size: 2rem;
color: $nord4;
}
}
}
}

View File

@ -24,6 +24,47 @@
top: 0;
}
button.close {
user-select: none;
background-color: rgba(10,10,10,.2);
border: none;
border-radius: 9999px;
cursor: pointer;
pointer-events: auto;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
font-size: 0;
height: 20px;
max-height: 20px;
max-width: 20px;
min-height: 20px;
min-width: 20px;
outline: none;
position: relative;
width: 20px;
&::before,
&::after {
background-color: var(--default-color);
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform-origin: center center;
}
&::before {
height: 2px;
width: 50%;
}
&::after {
height: 50%;
width: 2px;
}
}
.modal-card {
position: relative;
width: 300px;
@ -62,47 +103,6 @@
justify-content: space-between;
font-size: 1.5rem;
@include transition() {}
button {
user-select: none;
background-color: rgba(10,10,10,.2);
border: none;
border-radius: 9999px;
cursor: pointer;
pointer-events: auto;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
font-size: 0;
height: 20px;
max-height: 20px;
max-width: 20px;
min-height: 20px;
min-width: 20px;
outline: none;
position: relative;
width: 20px;
&::before,
&::after {
background-color: var(--default-color);
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform-origin: center center;
}
&::before {
height: 2px;
width: 50%;
}
&::after {
height: 50%;
width: 2px;
}
}
}
section {
background-color: var(--default-color);

View File

@ -12,6 +12,7 @@ import config, { env, mongoDbUri, secret } from "./config";
import { isXhr } from "./helpers";
import indexRouter from "./routes";
import maCollectionRouter from "./routes/ma-collection";
import importAlbumRouterApiV1 from "./routes/api/v1/albums";
import importSearchRouterApiV1 from "./routes/api/v1/search";
@ -80,6 +81,7 @@ app.use(
);
app.use("/", indexRouter);
app.use("/ma-collection", maCollectionRouter);
app.use("/api/v1/albums", importAlbumRouterApiV1);
app.use("/api/v1/search", importSearchRouterApiV1);

View File

@ -1,4 +1,6 @@
import moment from "moment";
import momenttz from "moment-timezone";
import xl from "excel4node";
import Pages from "./Pages";
@ -9,6 +11,451 @@ import ErrorEvent from "../libs/error";
* Classe permettant la gestion des albums d'un utilisateur
*/
class Albums extends Pages {
static replaceSpecialChars(str) {
if (!str) {
return "";
}
let final = str.toString();
const find = ["&", "<", ">"];
const replace = ["&amp;", "&lt;", "&gt;"];
for (let i = 0; i < find.length; i += 1) {
final = final.replace(new RegExp(find[i], "g"), replace[i]);
}
return final;
}
/**
* Méthode permettant de convertir les rows en csv
* @param {Array} rows
*
* @return {string}
*/
static async convertToCsv(rows) {
let data =
"Artiste;Titre;Genre;Styles;Pays;Année;Date de sortie;Format\n\r";
for (let i = 0; i < rows.length; i += 1) {
const {
artists_sort,
title,
genres,
styles,
country,
year,
released,
formats,
} = rows[i];
let format = "";
for (let j = 0; j < formats.length; j += 1) {
format += `${format !== "" ? ", " : ""}${formats[j].name}`;
}
data += `${artists_sort};${title};${genres.join()};${styles.join()};${country};${year};${released};${format}\n\r`;
}
return data;
}
/**
* Méthode permettant de convertir les rows en fichier xls
* @param {Array} rows
*
* @return {Object}
*/
static async convertToXls(rows) {
const wb = new xl.Workbook();
const ws = wb.addWorksheet("MusicTopus");
const headerStyle = wb.createStyle({
font: {
color: "#FFFFFF",
size: 11,
},
fill: {
type: "pattern",
patternType: "solid",
bgColor: "#595959",
fgColor: "#595959",
},
});
const style = wb.createStyle({
font: {
color: "#000000",
size: 11,
},
numberFormat: "0000",
});
const header = [
"Artiste",
"Titre",
"Genre",
"Styles",
"Pays",
"Année",
"Date de sortie",
"Format",
];
for (let i = 0; i < header.length; i += 1) {
ws.cell(1, i + 1)
.string(header[i])
.style(headerStyle);
}
for (let i = 0; i < rows.length; i += 1) {
const currentRow = i + 2;
const {
artists_sort,
title,
genres,
styles,
country,
year,
released,
formats,
} = rows[i];
let format = "";
for (let j = 0; j < formats.length; j += 1) {
format += `${format !== "" ? ", " : ""}${formats[j].name}`;
}
ws.cell(currentRow, 1).string(artists_sort).style(style);
ws.cell(currentRow, 2).string(title).style(style);
ws.cell(currentRow, 3).string(genres.join()).style(style);
ws.cell(currentRow, 4).string(styles.join()).style(style);
if (country) {
ws.cell(currentRow, 5).string(country).style(style);
}
if (year) {
ws.cell(currentRow, 6).number(year).style(style);
}
if (released) {
ws.cell(currentRow, 7)
.date(momenttz.tz(released, "Europe/Paris").hour(12))
.style({ numberFormat: "dd/mm/yyyy" });
}
ws.cell(currentRow, 8).string(format).style(style);
}
return wb;
}
/**
* Méthode permettant de convertir les rows en csv pour importer dans MusicTopus
* @param {Array} rows
*
* @return {string}
*/
static async convertToXml(rows) {
let data = '<?xml version="1.0" encoding="UTF-8"?>\n\r<albums>';
for (let i = 0; i < rows.length; i += 1) {
const {
discogsId,
year,
released,
uri,
artists,
artists_sort,
labels,
series,
companies,
formats,
title,
country,
notes,
identifiers,
videos,
genres,
styles,
tracklist,
extraartists,
images,
thumb,
} = rows[i];
let artistsList = "";
let labelList = "";
let serieList = "";
let companiesList = "";
let formatsList = "";
let identifiersList = "";
let videosList = "";
let genresList = "";
let stylesList = "";
let tracklistList = "";
let extraartistsList = "";
let imagesList = "";
for (let j = 0; j < artists.length; j += 1) {
artistsList += `<artist>
<name>${Albums.replaceSpecialChars(artists[j].name)}</name>
<anv>${Albums.replaceSpecialChars(artists[j].anv)}</anv>
<join>${Albums.replaceSpecialChars(artists[j].join)}</join>
<role>${Albums.replaceSpecialChars(artists[j].role)}</role>
<tracks>${Albums.replaceSpecialChars(
artists[j].tracks
)}</tracks>
<id>${Albums.replaceSpecialChars(artists[j].id)}</id>
<resource_url>${Albums.replaceSpecialChars(
artists[j].resource_url
)}</resource_url>
<thumbnail_url>${Albums.replaceSpecialChars(
artists[j].thumbnail_url
)}</thumbnail_url>
</artist>`;
}
for (let j = 0; j < labels.length; j += 1) {
labelList += `<label>
<name>${Albums.replaceSpecialChars(labels[j].name)}</name>
<catno>${Albums.replaceSpecialChars(labels[j].catno)}</catno>
<entity_type>${Albums.replaceSpecialChars(
labels[j].entity_type
)}</entity_type>
<entity_type_name>${Albums.replaceSpecialChars(
labels[j].entity_type
)}</entity_type_name>
<id>${Albums.replaceSpecialChars(labels[j].id)}</id>
<resource_url>${Albums.replaceSpecialChars(
labels[j].resource_url
)}</resource_url>
<thumbnail_url>${Albums.replaceSpecialChars(
labels[j].thumbnail_url
)}</thumbnail_url>
</label>
`;
}
for (let j = 0; j < series.length; j += 1) {
serieList += `<serie>
<name>${Albums.replaceSpecialChars(series[j].name)}</name>
<catno>${Albums.replaceSpecialChars(series[j].catno)}</catno>
<entity_type>${Albums.replaceSpecialChars(
series[j].entity_type
)}</entity_type>
<entity_type_name>${Albums.replaceSpecialChars(
series[j].entity_type_name
)}</entity_type_name>
<id>${Albums.replaceSpecialChars(series[j].id)}</id>
<resource_url>${Albums.replaceSpecialChars(
series[j].resource_url
)}</resource_url>
<thumbnail_url>${Albums.replaceSpecialChars(
series[j].thumbnail_url
)}</thumbnail_url>
</serie>
`;
}
for (let j = 0; j < companies.length; j += 1) {
companiesList += `<company>
<name>${Albums.replaceSpecialChars(companies[j].name)}</name>
<catno>${Albums.replaceSpecialChars(companies[j].catno)}</catno>
<entity_type>${Albums.replaceSpecialChars(
companies[j].entity_type
)}</entity_type>
<entity_type_name>${Albums.replaceSpecialChars(
companies[j].entity_type_name
)}</entity_type_name>
<id>${Albums.replaceSpecialChars(companies[j].id)}</id>
<resource_url>${Albums.replaceSpecialChars(
companies[j].resource_url
)}</resource_url>
<thumbnail_url>${Albums.replaceSpecialChars(
companies[j].thumbnail_url
)}</thumbnail_url>
</company>
`;
}
for (let j = 0; j < formats.length; j += 1) {
let descriptions = "";
if (formats[j].descriptions) {
for (
let k = 0;
k < formats[j].descriptions.length;
k += 1
) {
descriptions += `<description>${formats[j].descriptions[k]}</description>
`;
}
}
formatsList += `<format>
<name>${Albums.replaceSpecialChars(formats[j].name)}</name>
<qte>${Albums.replaceSpecialChars(formats[j].qty)}</qte>
<text>${Albums.replaceSpecialChars(formats[j].text)}</text>
<descriptions>
${descriptions}
</descriptions>
</format>
`;
}
for (let j = 0; j < identifiers.length; j += 1) {
identifiersList += `<identifier>
<type>${Albums.replaceSpecialChars(identifiers[j].type)}</type>
<value>${Albums.replaceSpecialChars(
identifiers[j].value
)}</value>
<description>${Albums.replaceSpecialChars(
identifiers[j].description
)}</description>
</identifier>
`;
}
for (let j = 0; j < videos.length; j += 1) {
videosList += `<video embed="${videos[j].embed}">
<uri>${Albums.replaceSpecialChars(videos[j].uri)}</uri>
<title>${Albums.replaceSpecialChars(videos[j].title)}</title>
<description>${Albums.replaceSpecialChars(
videos[j].description
)}</description>
<duration>${Albums.replaceSpecialChars(
videos[j].duration
)}</duration>
</video>
`;
}
for (let j = 0; j < genres.length; j += 1) {
genresList += `<genre>${Albums.replaceSpecialChars(
genres[j]
)}</genre>
`;
}
for (let j = 0; j < styles.length; j += 1) {
stylesList += `<style>${Albums.replaceSpecialChars(
styles[j]
)}</style>
`;
}
for (let j = 0; j < tracklist.length; j += 1) {
tracklistList += `<tracklist position="${
tracklist[j].position
}" type="${tracklist[j].type_}" duration="${
tracklist[j].duration
}">
${Albums.replaceSpecialChars(tracklist[j].title)}
</tracklist>
`;
}
for (let j = 0; j < extraartists.length; j += 1) {
extraartistsList += `<extraartist>
<name>${Albums.replaceSpecialChars(extraartists[j].name)}</name>
<anv>${Albums.replaceSpecialChars(extraartists[j].anv)}</anv>
<join>${Albums.replaceSpecialChars(extraartists[j].join)}</join>
<role>${Albums.replaceSpecialChars(extraartists[j].role)}</role>
<tracks>${Albums.replaceSpecialChars(
extraartists[j].tracks
)}</tracks>
<id>${Albums.replaceSpecialChars(extraartists[j].id)}</id>
<resource_url>${Albums.replaceSpecialChars(
extraartists[j].resource_url
)}</resource_url>
<thumbnail_url>${Albums.replaceSpecialChars(
extraartists[j].thumbnail_url
)}</thumbnail_url>
</extraartist>
`;
}
for (let j = 0; j < images.length; j += 1) {
imagesList += `<image type="${images[j].type}" width="${
images[j].width
}" height="${images[j].height}">
<uri>${Albums.replaceSpecialChars(images[j].uri)}</uri>
<resource_url>${Albums.replaceSpecialChars(
images[j].resource_url
)}</resource_url>
<uri150>${Albums.replaceSpecialChars(
images[j].resource_url
)}</uri150>
</image>
`;
}
data += `
<album>
<discogId>${discogsId}</discogId>
<title>${Albums.replaceSpecialChars(title)}</title>
<artists_sort>${Albums.replaceSpecialChars(artists_sort)}</artists_sort>
<artists>
${artistsList}
</artists>
<year>${year}</year>
<country>${Albums.replaceSpecialChars(country)}</country>
<released>${released}</released>
<uri>${uri}</uri>
<thumb>${thumb}</thumb>
<labels>
${labelList}
</labels>
<series>
${serieList}
</series>
<companies>
${companiesList}
</companies>
<formats>
${formatsList}
</formats>
<notes>${Albums.replaceSpecialChars(notes)}</notes>
<identifiers>
${identifiersList}
</identifiers>
<videos>
${videosList}
</videos>
<genres>
${genresList}
</genres>
<styles>
${stylesList}
</styles>
<tracklist>
${tracklistList}
</tracklist>
<extraartists>
${extraartistsList}
</extraartists>
<images>
${imagesList}
</images>
</album>`;
}
return `${data}</albums>`;
}
/**
* Méthode permettant de convertir les rows en csv pour importer dans MusicTopus
* @param {Array} rows
*
* @return {string}
*/
static async convertToMusicTopus(rows) {
let data = "itemId;createdAt;updatedAt\n\r";
for (let i = 0; i < rows.length; i += 1) {
const { discogsId, createdAt, updatedAt } = rows[i];
data += `${discogsId};${createdAt};${updatedAt}\n\r`;
}
data += "v1.0";
return data;
}
/**
* Méthode permettant d'ajouter un album dans une collection
* @param {Object} req
@ -59,16 +506,15 @@ class Albums extends Pages {
*/
async getAll() {
const {
page = 1,
limit = 4,
page,
limit,
exportFormat = "json",
sort = "artists_sort",
order = "asc",
artists_sort,
format,
} = this.req.query;
const skip = (page - 1) * limit;
const where = {};
if (artists_sort) {
@ -83,25 +529,47 @@ class Albums extends Pages {
...where,
});
let params = {
sort: {
[sort]: order.toLowerCase() === "asc" ? 1 : -1,
},
};
if (page && limit) {
const skip = (page - 1) * limit;
params = {
...params,
skip,
limit,
};
}
const rows = await AlbumsModel.find(
{
user: this.req.user._id,
...where,
},
[],
{
skip,
limit,
sort: {
[sort]: order.toLowerCase() === "asc" ? 1 : -1,
},
}
params
);
return {
rows,
count,
};
switch (exportFormat) {
case "csv":
return Albums.convertToCsv(rows);
case "xls":
return Albums.convertToXls(rows);
case "xml":
return Albums.convertToXml(rows);
case "musictopus":
return Albums.convertToMusicTopus(rows);
case "json":
default:
return {
rows,
count,
};
}
}
/**
@ -137,6 +605,20 @@ class Albums extends Pages {
this.setPageContent("artists", artists);
this.setPageContent("formats", formats);
}
/**
* Méthode permettant d'afficher le détails d'un album
*/
async loadItem() {
const { itemId: _id } = this.req.params;
const { _id: User } = this.req.user;
const item = await AlbumsModel.findOne({
_id,
User,
});
this.setPageContent("item", item);
}
}
export default Albums;

View File

@ -13,10 +13,24 @@ router
try {
const albums = new Albums(req);
const data = await albums.getAll();
const { exportFormat = "json" } = req.query;
sendResponse(req, res, data);
switch (exportFormat) {
case "csv":
case "musictopus":
res.header("Content-Type", "text/csv");
return res.status(200).send(data);
case "xml":
res.header("Content-type", "text/xml");
return res.status(200).send(data);
case "xls":
return data.write("musictopus.xls", res);
case "json":
default:
return sendResponse(req, res, data);
}
} catch (err) {
next(err);
return next(err);
}
})
.post(ensureLoggedIn("/connexion"), async (req, res, next) => {

View File

@ -4,7 +4,6 @@ import { ensureLoggedIn } from "connect-ensure-login";
import Pages from "../middleware/Pages";
import Auth from "../middleware/Auth";
import Albums from "../middleware/Albums";
import render from "../libs/format";
@ -89,24 +88,6 @@ router
}
});
router
.route("/ma-collection")
.get(ensureLoggedIn("/connexion"), async (req, res, next) => {
try {
const page = new Albums(req, "mon-compte/ma-collection");
await page.loadMyCollection();
if (page.getPageContent("artists").length > 0) {
render(res, page);
} else {
res.redirect("/ajouter-un-album");
}
} catch (err) {
next(err);
}
});
router.route("/nous-contacter").get(async (req, res, next) => {
try {
const page = new Pages(req, "nous-contacter");

View File

@ -0,0 +1,53 @@
import express from "express";
import { ensureLoggedIn } from "connect-ensure-login";
import Albums from "../middleware/Albums";
import render from "../libs/format";
// eslint-disable-next-line new-cap
const router = express.Router();
router.route("/").get(ensureLoggedIn("/connexion"), async (req, res, next) => {
try {
const page = new Albums(req, "mon-compte/ma-collection");
await page.loadMyCollection();
if (page.getPageContent("artists").length > 0) {
render(res, page);
} else {
res.redirect("/ajouter-un-album");
}
} catch (err) {
next(err);
}
});
router
.route("/exporter")
.get(ensureLoggedIn("/connexion"), async (req, res, next) => {
try {
const page = new Albums(req, "mon-compte/ma-collection/exporter");
render(res, page);
} catch (err) {
next(err);
}
});
router
.route("/:itemId")
.get(ensureLoggedIn("/connexion"), async (req, res, next) => {
try {
const page = new Albums(req, "mon-compte/ma-collection/details");
await page.loadItem();
render(res, page);
} catch (err) {
next(err);
}
});
export default router;

View File

@ -68,6 +68,9 @@
<a class="navbar-item" href="/ma-collection">
Ma collection
</a>
<a class="navbar-item" href="/ma-collection/exporter">
Exporter ma collection
</a>
</div>
</div>
<% } %>

View File

@ -52,12 +52,12 @@
</div>
</div>
<div class="modal" :class="{'is-visible': modalIsVisible}" id="addAlbum">
<div class="modal" :class="{'is-visible': modalIsVisible}">
<div class="modal-background"></div>
<div class="modal-card">
<header>
<div>{{details.artists_sort}} - {{details.title}}</div>
<button aria-label="Fermer" @click="toggleModal"></button>
<button aria-label="Fermer" class="close" @click="toggleModal"></button>
</header>
<section>
<div class="grid grid-cols-2 gap-16">
@ -217,8 +217,6 @@
this.modalIsVisible = !this.modalIsVisible;
},
loadDetails(discogsId) {
console.log('discogsId:', discogsId);
axios.get(`/api/v1/search/${discogsId}`)
.then( response => {
const {
@ -245,5 +243,5 @@
});
},
}
}).mount('#app')
}).mount('#app');
</script>

View File

@ -230,6 +230,8 @@
<i class="icon-moon">.icon-moon</i>
<i class="icon-trash">.icon-trash</i>
<i class="icon-blind">.icon-blind</i>
<i class="icon-left-open">.icon-left-open</i>
<i class="icon-right-open">.icon-right-open</i>
<h2 id="listes">Les listes</h2>
<div class="grid grid-cols-1 md:grid-cols-2 list">

View File

@ -40,12 +40,12 @@
<div class="grid grid-cols-1 md:grid-cols-2 list">
<div class="item" v-if="!loading" v-for="item in items">
<span class="title">
{{ item.artists_sort}} - {{ item.title }}
<a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
<i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
</span>
<div class="grid grid-cols-2 md:grid-cols-4">
<div>
<img :src="item.thumb" :alt="item.title" />
<a :href="'/ma-collection/' + item._id"><img :src="item.thumb" :alt="item.title" /></a>
</div>
<div class="md:col-span-3">
<span><strong>Année :</strong> {{ item.year }}</span>
@ -175,7 +175,6 @@
this.fetch();
},
changeSort() {
console.log('TEST:', this.sortOrder);
const [sort,order] = this.sortOrder.split('-');
this.sort = sort;
this.order = order;
@ -208,5 +207,5 @@
});
}
}
}).mount('#app')
}).mount('#app');
</script>

View File

@ -0,0 +1,282 @@
<main class="layout-maxed ma-collection-details" id="app" v-cloak @keyup="changeImage">
<h1>{{item.artists_sort}} - {{item.title}}</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}`" />
</div>
<div class="sm:col-span-2 text-center galerie">
<div v-for="(image, index) in item.images" :data-index="index" @click.stop.prevent="showGallery">
<img :src="image.uri150" :alt="`Miniature de type ${image.type}`" />
</div>
</div>
</div>
<hr />
<div class="grid md:grid-cols-3 gap-16">
<div>
<template v-for="album in tracklist">
<strong v-if="album.title">{{album.title}}</strong>
<ol class="ml-4">
<li v-for="track in album.tracks">
{{ track.title }} <template v-if="track.duration">({{track.duration}})</template>
<ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden ml-4">
<li v-for="extra in track.extraartists">
<small>{{extra.role}} : {{extra.name}}</small>
</li>
</ul>
</li>
</ol>
</template>
</div>
<div class="md:col-span-2">
<div class="grid grid-cols-2 gap-10">
<div>
<strong>Genres</strong>
<br />
<template v-for="(genre, index) in item.genres">
{{genre}}<template v-if="index < item.genres.length - 1">, </template>
</template>
</div>
<div>
<strong>Styles</strong>
<br />
<span v-for="(style, index) in item.styles">
{{style}}<template v-if="index < item.styles.length - 1">, </template>
</span>
</div>
</div>
<hr />
<div class="grid grid-cols-3 gap-10">
<div>
<strong>Pays</strong>
<br />
<span>{{item.country}}</span>
</div>
<div>
<strong>Année</strong>
<br />
<span>{{item.year}}</span>
</div>
<div>
<strong>Date de sortie</strong>
<br />
<span>{{item.released}}</span>
</div>
</div>
<hr />
<div class="grid gap-10">
<div>
<strong>Format</strong>
<ul class="ml-4">
<li v-for="(format) in item.formats">
{{format.name}}
<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>
</span>)
</template>
</li>
</ul>
</div>
</div>
<hr />
<div class="grid grid-cols-2 gap-10">
<div>
<strong id="identifiers">Codes barres</strong>
<ol class="ml-4">
<li v-for="identifier in identifiers">
{{identifier.value}} ({{identifier.type}})
</li>
</ol>
<template v-if="item.identifiers.length > identifiersPreviewLength">
<button type="button" class="button is-link" v-if="identifiersMode === 'preview'" @click="showAllIdentifiers">
Voir la suite
</button>
<button type="button" class="button is-link" v-if="identifiersMode === 'all'" @click="showLessIdentifiers">
Voir moins
</button>
</template>
</div>
<div>
<strong>Label</strong>
<br />
<template v-for="label in item.labels">
{{label.name}} {{label.catno}}
<br />
</template>
<hr />
<strong>Sociétés</strong>
<br />
<template v-for="company in item.companies">
<strong>{{company.entity_type_name}}</strong> : {{company.name}}
<br />
</template>
</div>
</div>
<!-- <hr />
<div class="grid gap-10">
<div>
<strong>Note</strong>
<br />
<span>{{item.notes}}</span>
</div>
</div> -->
<hr />
<div class="grid gap-10">
<div>
<strong>Vidéos</strong>
<dl>
<template v-for="video in item.videos">
<dt>
<a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}}</a>
</dt>
<dd>
{{video.description}}
</dd>
</template>
</dl>
</div>
</div>
</div>
</div>
<div class="modal" :class="{'is-visible': modalIsVisible}">
<div class="modal-background"></div>
<button type="button" aria-label="Fermer" class="close" @click="toggleModal"></button>
<button type="button" aria-label="Image précédente" class="navigation previous" @click="previous" v-if="index > 0">
<i class="icon-left-open"></i>
</button>
<button type="button" aria-label="Image suivante" class="navigation next" @click="next" v-if="index + 1 < item.images.length">
<i class="icon-right-open"></i>
</button>
<div class="modal-card">
<img :src="preview" />
</div>
</div>
</main>
<script>
Vue.createApp({
data() {
return {
item: <%- JSON.stringify(page.item) %>,
tracklist: [],
identifiers: [],
modalIsVisible: false,
identifiersMode: 'preview',
identifiersPreviewLength: 16,
preview: null,
index: null,
}
},
created() {
this.setTrackList();
this.setIdentifiers();
window.addEventListener("keydown", this.changeImage);
},
destroyed() {
window.removeEventListener('keydown', this.changeImage);
},
methods: {
setIdentifiers() {
this.identifiers = [];
let max = this.identifiersMode == 'preview' && this.item.identifiers.length > this.identifiersPreviewLength ? this.identifiersPreviewLength : this.item.identifiers.length;
for ( let i = 0 ; i < max ; i += 1 ) {
this.identifiers.push(this.item.identifiers[i]);
}
},
setTrackList() {
let subTrack = {
type: null,
title: null,
tracks: [],
};
for (let i = 0 ; i < this.item.tracklist.length ; i += 1 ) {
const {
type_,
title,
position,
duration,
extraartists,
} = this.item.tracklist[i];
if ( type_ === 'heading' ) {
if ( subTrack.type ) {
this.tracklist.push(subTrack);
subTrack = {
type: null,
title: null,
tracks: [],
};
}
subTrack.type = type_;
subTrack.title = title;
} else {
subTrack.tracks.push({
title,
position,
duration,
extraartists
});
}
}
this.tracklist.push(subTrack);
},
setImage() {
this.preview = this.item.images[this.index].uri;
},
showGallery(event) {
const item = event.target.tagName === 'IMG' ? event.target.parentElement : event.target;
const {
index,
} = item.dataset;
this.index = Number(index);
this.modalIsVisible = true;
this.setImage();
},
toggleModal() {
this.modalIsVisible = !this.modalIsVisible;
},
previous() {
this.index = this.index > 0 ? this.index - 1 : this.item.images.length -1;
this.setImage();
},
next() {
this.index = (this.index +1) === this.item.images.length ? 0 : this.index + 1;
this.setImage();
},
changeImage(event) {
const direction = event.code;
if ( this.modalIsVisible && ['ArrowRight', 'ArrowLeft', 'Escape'].indexOf(direction) !== -1 ) {
switch (direction) {
case 'ArrowRight':
return this.next();
case 'ArrowLeft':
return this.previous();
default:
this.modalIsVisible = false;
return true;
}
}
},
showAllIdentifiers() {
this.identifiersMode = 'all';
this.setIdentifiers();
},
showLessIdentifiers() {
this.identifiersMode = 'preview';
this.setIdentifiers();
document.querySelector('#identifiers').scrollIntoView({ behavior: 'smooth' });
},
},
}).mount('#app');
</script>

View File

@ -0,0 +1,68 @@
<main class="layout-maxed ma-collection-exporter" id="app">
<h1>Exporter ma collection</h1>
<p>
Les formats CSV et Excel sont facilement lisiblent par un humain. Dans ces 2 formats vous trouverez seulement les informations principales de vos albums, à savoir :
</p>
<ul>
<li>Nom de l'artiste</li>
<li>Nom de l'album</li>
<li>Liste des genres</li>
<li>Liste des styles</li>
<li>Pays (ou région) de distribution</li>
<li>Année de sortie</li>
<li>Date de sortie</li>
<li>Format de l'album</li>
</ul>
<p>
Le format XML quand a lui est un peu moins lisible par un humain, même s'il reste un fichier texte. Dans ce format vous retrouverez toute les informations de vos albums.
</p>
<p>
Enfin le dernier format, MusicTopus, vous permettra d'exporter votre collection afin de l'importer ensuite sur une autre instance MusicTopus.
</p>
<form @submit="exportCollection">
<strong>Choisir le format d'export</strong>
<div class="field inline">
<input type="radio" name="format" v-model="format" value="csv" id="csv">
<label for="csv">CSV</label>
</div>
<div class="field inline">
<input type="radio" name="format" v-model="format" value="xls" id="xls">
<label for="xls">Excel</label>
</div>
<div class="field inline">
<input type="radio" name="format" v-model="format" value="xml" id="xml">
<label for="xml">XML</label>
</div>
<div class="field inline">
<input type="radio" name="format" v-model="format" value="musictopus" id="musictopus">
<label for="musictopus">MusicTopus</label>
</div>
<button type="submit" class="button is-primary my-16">
<i class="icon-export"></i>
Exporter
</button>
</form>
</main>
<script>
Vue.createApp({
data() {
return {
format: 'xml',
}
},
created() {
},
destroyed() {
},
methods: {
exportCollection(event) {
event.preventDefault();
window.open(`/api/v1/albums?exportFormat=${this.format}`, '_blank');
}
},
}).mount('#app');
</script>