Version 1.0 #26
17 changed files with 416 additions and 55 deletions
Binary file not shown.
|
|
@ -20,6 +20,10 @@
|
|||
|
||||
<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="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" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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 ) {
|
||||
|
|
@ -124,7 +124,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
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';
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -39,6 +39,8 @@
|
|||
.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-spin:before { content: '\e839'; } /* '' */
|
||||
.icon-link-ext:before { content: '\f08e'; } /* '' */
|
||||
.icon-sun:before { content: '\f185'; } /* '' */
|
||||
|
|
|
|||
|
|
@ -43,4 +43,5 @@
|
|||
@import './error';
|
||||
@import './home';
|
||||
@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;
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -137,6 +137,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;
|
||||
|
|
|
|||
|
|
@ -107,6 +107,20 @@ router
|
|||
}
|
||||
});
|
||||
|
||||
router
|
||||
.route("/ma-collection/: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);
|
||||
}
|
||||
});
|
||||
|
||||
router.route("/nous-contacter").get(async (req, res, next) => {
|
||||
try {
|
||||
const page = new Pages(req, "nous-contacter");
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
260
views/pages/mon-compte/ma-collection/details.ejs
Normal file
260
views/pages/mon-compte/ma-collection/details.ejs
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
<main class="layout-maxed ma-collection-details" id="app">
|
||||
|
||||
<h1>{{item.artists_sort}} - {{item.title}}</h1>
|
||||
<div class="grid md:grid-cols-3 gap-16">
|
||||
<div class="text-center">
|
||||
<img :src="item.thumb %>" :alt="`Miniature pour l'album ${item.title}`" />
|
||||
</div>
|
||||
<div class="md: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 }} ({{track.duration}})
|
||||
<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}}
|
||||
(<span v-for="(description, index) in format.descriptions">
|
||||
{{description}}<template v-if="index < format.descriptions.length - 1">, </template>
|
||||
</span>)
|
||||
</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}} ({{video.duration}})</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">
|
||||
<i class="icon-left-open"></i>
|
||||
</button>
|
||||
<button type="button" aria-label="Image suivante" class="navigation next" @click="next">
|
||||
<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();
|
||||
},
|
||||
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();
|
||||
},
|
||||
showAllIdentifiers() {
|
||||
this.identifiersMode = 'all';
|
||||
this.setIdentifiers();
|
||||
},
|
||||
showLessIdentifiers() {
|
||||
this.identifiersMode = 'preview';
|
||||
this.setIdentifiers();
|
||||
|
||||
document.querySelector('#identifiers').scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
}).mount('#app');
|
||||
</script>
|
||||
Loading…
Reference in a new issue