issue/2 #28
26 changed files with 1094 additions and 97 deletions
|
|
@ -16,7 +16,7 @@ module.exports = {
|
||||||
'no-underscore-dangle': [
|
'no-underscore-dangle': [
|
||||||
'error',
|
'error',
|
||||||
{
|
{
|
||||||
allow: ['_id', 'artists_sort'],
|
allow: ['_id', 'artists_sort', 'type_'],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
'camelcase': [
|
'camelcase': [
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
# MusicTopus
|
# MusicTopus
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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ù.
|
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).
|
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).
|
||||||
|
|
|
||||||
|
|
@ -51,10 +51,12 @@
|
||||||
"debug": "^4.3.3",
|
"debug": "^4.3.3",
|
||||||
"disconnect": "^1.2.2",
|
"disconnect": "^1.2.2",
|
||||||
"ejs": "^3.1.6",
|
"ejs": "^3.1.6",
|
||||||
|
"excel4node": "^1.7.2",
|
||||||
"express": "^4.17.2",
|
"express": "^4.17.2",
|
||||||
"express-session": "^1.17.2",
|
"express-session": "^1.17.2",
|
||||||
"knacss": "^8.0.4",
|
"knacss": "^8.0.4",
|
||||||
"moment": "^2.29.1",
|
"moment": "^2.29.1",
|
||||||
|
"moment-timezone": "^0.5.34",
|
||||||
"mongoose": "^6.2.1",
|
"mongoose": "^6.2.1",
|
||||||
"mongoose-unique-validator": "^3.0.0",
|
"mongoose-unique-validator": "^3.0.0",
|
||||||
"passport": "^0.5.2",
|
"passport": "^0.5.2",
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -20,6 +20,12 @@
|
||||||
|
|
||||||
<glyph glyph-name="eye" unicode="" 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="eye" unicode="" 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="" 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="" 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="" 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="" 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="spin" unicode="" 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="" 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" />
|
<glyph glyph-name="link-ext" unicode="" 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.
|
|
@ -114,17 +114,22 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
|
const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
|
||||||
|
if ( switchAriaThemeBtn ) {
|
||||||
switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
|
switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
|
||||||
|
}
|
||||||
setAriaTheme(getCookie('ariatheme'));
|
setAriaTheme(getCookie('ariatheme'));
|
||||||
|
|
||||||
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
|
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
|
||||||
|
if ( toggleSwitch ) {
|
||||||
toggleSwitch.addEventListener('change', switchTheme, false);
|
toggleSwitch.addEventListener('change', switchTheme, false);
|
||||||
|
}
|
||||||
|
|
||||||
let currentThemeIsDark = getCookie('theme');
|
let currentThemeIsDark = getCookie('theme');
|
||||||
if ( currentThemeIsDark === 'false' && window.matchMedia ) {
|
if ( currentThemeIsDark === 'false' && window.matchMedia ) {
|
||||||
currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||||
}
|
}
|
||||||
console.log('currentThemeIsDark:', currentThemeIsDark);
|
|
||||||
switchTheme({target: {checked: currentThemeIsDark === 'dark'}});
|
switchTheme({target: {checked: currentThemeIsDark === 'dark'}});
|
||||||
|
if ( toggleSwitch) {
|
||||||
toggleSwitch.checked = currentThemeIsDark === 'dark';
|
toggleSwitch.checked = currentThemeIsDark === 'dark';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -3,6 +3,10 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
&.inline {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
&.has-addons {
|
&.has-addons {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
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 {
|
select {
|
||||||
appearance: none;
|
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");
|
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");
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
html {
|
html {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
|
|
@ -70,3 +71,15 @@ html {
|
||||||
.is-hidden {
|
.is-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ml-4 {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-hidden {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@include respond-to("small-up") {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -39,6 +39,9 @@
|
||||||
.icon-link:before { content: '\e804'; } /* '' */
|
.icon-link:before { content: '\e804'; } /* '' */
|
||||||
.icon-heart:before { content: '\e805'; } /* '' */
|
.icon-heart:before { content: '\e805'; } /* '' */
|
||||||
.icon-eye:before { content: '\e806'; } /* '' */
|
.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-spin:before { content: '\e839'; } /* '' */
|
||||||
.icon-link-ext:before { content: '\f08e'; } /* '' */
|
.icon-link-ext:before { content: '\f08e'; } /* '' */
|
||||||
.icon-sun:before { content: '\f185'; } /* '' */
|
.icon-sun:before { content: '\f185'; } /* '' */
|
||||||
|
|
|
||||||
|
|
@ -19,8 +19,8 @@
|
||||||
// COMPOSANTS (à ajouter au besoin)
|
// COMPOSANTS (à ajouter au besoin)
|
||||||
// @import "../node_modules/knacss/sass/components/button";
|
// @import "../node_modules/knacss/sass/components/button";
|
||||||
// @import "components/burger";
|
// @import "components/burger";
|
||||||
// @import "components/checkbox";
|
// @import "../node_modules/knacss/sass/components/checkbox";
|
||||||
// @import "components/radio";
|
@import "../node_modules/knacss/sass/components/radio";
|
||||||
// @import "../node_modules/knacss/sass/components/select";
|
// @import "../node_modules/knacss/sass/components/select";
|
||||||
// @import "components/quote";
|
// @import "components/quote";
|
||||||
|
|
||||||
|
|
@ -44,3 +44,4 @@
|
||||||
@import './home';
|
@import './home';
|
||||||
@import './ajouter-un-album';
|
@import './ajouter-un-album';
|
||||||
@import './ma-collection';
|
@import './ma-collection';
|
||||||
|
@import './ma-collection-details';
|
||||||
55
sass/ma-collection-details.scss
Normal file
55
sass/ma-collection-details.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -24,6 +24,47 @@
|
||||||
top: 0;
|
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 {
|
.modal-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
|
|
@ -62,47 +103,6 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
@include transition() {}
|
@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 {
|
section {
|
||||||
background-color: var(--default-color);
|
background-color: var(--default-color);
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ import config, { env, mongoDbUri, secret } from "./config";
|
||||||
import { isXhr } from "./helpers";
|
import { isXhr } from "./helpers";
|
||||||
|
|
||||||
import indexRouter from "./routes";
|
import indexRouter from "./routes";
|
||||||
|
import maCollectionRouter from "./routes/ma-collection";
|
||||||
|
|
||||||
import importAlbumRouterApiV1 from "./routes/api/v1/albums";
|
import importAlbumRouterApiV1 from "./routes/api/v1/albums";
|
||||||
import importSearchRouterApiV1 from "./routes/api/v1/search";
|
import importSearchRouterApiV1 from "./routes/api/v1/search";
|
||||||
|
|
@ -80,6 +81,7 @@ app.use(
|
||||||
);
|
);
|
||||||
|
|
||||||
app.use("/", indexRouter);
|
app.use("/", indexRouter);
|
||||||
|
app.use("/ma-collection", maCollectionRouter);
|
||||||
app.use("/api/v1/albums", importAlbumRouterApiV1);
|
app.use("/api/v1/albums", importAlbumRouterApiV1);
|
||||||
app.use("/api/v1/search", importSearchRouterApiV1);
|
app.use("/api/v1/search", importSearchRouterApiV1);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
|
import momenttz from "moment-timezone";
|
||||||
|
import xl from "excel4node";
|
||||||
|
|
||||||
import Pages from "./Pages";
|
import Pages from "./Pages";
|
||||||
|
|
||||||
|
|
@ -9,6 +11,451 @@ import ErrorEvent from "../libs/error";
|
||||||
* Classe permettant la gestion des albums d'un utilisateur
|
* Classe permettant la gestion des albums d'un utilisateur
|
||||||
*/
|
*/
|
||||||
class Albums extends Pages {
|
class Albums extends Pages {
|
||||||
|
static replaceSpecialChars(str) {
|
||||||
|
if (!str) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
let final = str.toString();
|
||||||
|
const find = ["&", "<", ">"];
|
||||||
|
const replace = ["&", "<", ">"];
|
||||||
|
|
||||||
|
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
|
* Méthode permettant d'ajouter un album dans une collection
|
||||||
* @param {Object} req
|
* @param {Object} req
|
||||||
|
|
@ -59,16 +506,15 @@ class Albums extends Pages {
|
||||||
*/
|
*/
|
||||||
async getAll() {
|
async getAll() {
|
||||||
const {
|
const {
|
||||||
page = 1,
|
page,
|
||||||
limit = 4,
|
limit,
|
||||||
|
exportFormat = "json",
|
||||||
sort = "artists_sort",
|
sort = "artists_sort",
|
||||||
order = "asc",
|
order = "asc",
|
||||||
artists_sort,
|
artists_sort,
|
||||||
format,
|
format,
|
||||||
} = this.req.query;
|
} = this.req.query;
|
||||||
|
|
||||||
const skip = (page - 1) * limit;
|
|
||||||
|
|
||||||
const where = {};
|
const where = {};
|
||||||
|
|
||||||
if (artists_sort) {
|
if (artists_sort) {
|
||||||
|
|
@ -83,26 +529,48 @@ class Albums extends Pages {
|
||||||
...where,
|
...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(
|
const rows = await AlbumsModel.find(
|
||||||
{
|
{
|
||||||
user: this.req.user._id,
|
user: this.req.user._id,
|
||||||
...where,
|
...where,
|
||||||
},
|
},
|
||||||
[],
|
[],
|
||||||
{
|
params
|
||||||
skip,
|
|
||||||
limit,
|
|
||||||
sort: {
|
|
||||||
[sort]: order.toLowerCase() === "asc" ? 1 : -1,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
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 {
|
return {
|
||||||
rows,
|
rows,
|
||||||
count,
|
count,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Méthode permettant de supprimer un élément d'une collection
|
* Méthode permettant de supprimer un élément d'une collection
|
||||||
|
|
@ -137,6 +605,20 @@ class Albums extends Pages {
|
||||||
this.setPageContent("artists", artists);
|
this.setPageContent("artists", artists);
|
||||||
this.setPageContent("formats", formats);
|
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;
|
export default Albums;
|
||||||
|
|
|
||||||
|
|
@ -13,10 +13,24 @@ router
|
||||||
try {
|
try {
|
||||||
const albums = new Albums(req);
|
const albums = new Albums(req);
|
||||||
const data = await albums.getAll();
|
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) {
|
} catch (err) {
|
||||||
next(err);
|
return next(err);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.post(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
.post(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ import { ensureLoggedIn } from "connect-ensure-login";
|
||||||
|
|
||||||
import Pages from "../middleware/Pages";
|
import Pages from "../middleware/Pages";
|
||||||
import Auth from "../middleware/Auth";
|
import Auth from "../middleware/Auth";
|
||||||
import Albums from "../middleware/Albums";
|
|
||||||
|
|
||||||
import render from "../libs/format";
|
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) => {
|
router.route("/nous-contacter").get(async (req, res, next) => {
|
||||||
try {
|
try {
|
||||||
const page = new Pages(req, "nous-contacter");
|
const page = new Pages(req, "nous-contacter");
|
||||||
|
|
|
||||||
53
src/routes/ma-collection.js
Normal file
53
src/routes/ma-collection.js
Normal 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;
|
||||||
|
|
@ -68,6 +68,9 @@
|
||||||
<a class="navbar-item" href="/ma-collection">
|
<a class="navbar-item" href="/ma-collection">
|
||||||
Ma collection
|
Ma collection
|
||||||
</a>
|
</a>
|
||||||
|
<a class="navbar-item" href="/ma-collection/exporter">
|
||||||
|
Exporter ma collection
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
|
||||||
|
|
@ -52,12 +52,12 @@
|
||||||
</div>
|
</div>
|
||||||
</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-background"></div>
|
||||||
<div class="modal-card">
|
<div class="modal-card">
|
||||||
<header>
|
<header>
|
||||||
<div>{{details.artists_sort}} - {{details.title}}</div>
|
<div>{{details.artists_sort}} - {{details.title}}</div>
|
||||||
<button aria-label="Fermer" @click="toggleModal"></button>
|
<button aria-label="Fermer" class="close" @click="toggleModal"></button>
|
||||||
</header>
|
</header>
|
||||||
<section>
|
<section>
|
||||||
<div class="grid grid-cols-2 gap-16">
|
<div class="grid grid-cols-2 gap-16">
|
||||||
|
|
@ -217,8 +217,6 @@
|
||||||
this.modalIsVisible = !this.modalIsVisible;
|
this.modalIsVisible = !this.modalIsVisible;
|
||||||
},
|
},
|
||||||
loadDetails(discogsId) {
|
loadDetails(discogsId) {
|
||||||
console.log('discogsId:', discogsId);
|
|
||||||
|
|
||||||
axios.get(`/api/v1/search/${discogsId}`)
|
axios.get(`/api/v1/search/${discogsId}`)
|
||||||
.then( response => {
|
.then( response => {
|
||||||
const {
|
const {
|
||||||
|
|
@ -245,5 +243,5 @@
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}).mount('#app')
|
}).mount('#app');
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -230,6 +230,8 @@
|
||||||
<i class="icon-moon">.icon-moon</i>
|
<i class="icon-moon">.icon-moon</i>
|
||||||
<i class="icon-trash">.icon-trash</i>
|
<i class="icon-trash">.icon-trash</i>
|
||||||
<i class="icon-blind">.icon-blind</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>
|
<h2 id="listes">Les listes</h2>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
||||||
|
|
|
||||||
|
|
@ -40,12 +40,12 @@
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
||||||
<div class="item" v-if="!loading" v-for="item in items">
|
<div class="item" v-if="!loading" v-for="item in items">
|
||||||
<span class="title">
|
<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>
|
<i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
|
||||||
</span>
|
</span>
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4">
|
<div class="grid grid-cols-2 md:grid-cols-4">
|
||||||
<div>
|
<div>
|
||||||
<img :src="item.thumb" :alt="item.title" />
|
<a :href="'/ma-collection/' + item._id"><img :src="item.thumb" :alt="item.title" /></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="md:col-span-3">
|
<div class="md:col-span-3">
|
||||||
<span><strong>Année :</strong> {{ item.year }}</span>
|
<span><strong>Année :</strong> {{ item.year }}</span>
|
||||||
|
|
@ -175,7 +175,6 @@
|
||||||
this.fetch();
|
this.fetch();
|
||||||
},
|
},
|
||||||
changeSort() {
|
changeSort() {
|
||||||
console.log('TEST:', this.sortOrder);
|
|
||||||
const [sort,order] = this.sortOrder.split('-');
|
const [sort,order] = this.sortOrder.split('-');
|
||||||
this.sort = sort;
|
this.sort = sort;
|
||||||
this.order = order;
|
this.order = order;
|
||||||
|
|
@ -208,5 +207,5 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}).mount('#app')
|
}).mount('#app');
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
282
views/pages/mon-compte/ma-collection/details.ejs
Normal file
282
views/pages/mon-compte/ma-collection/details.ejs
Normal 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>
|
||||||
68
views/pages/mon-compte/ma-collection/exporter.ejs
Normal file
68
views/pages/mon-compte/ma-collection/exporter.ejs
Normal 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>
|
||||||
Loading…
Reference in a new issue