forked from dbroqua/MusicTopus
#66 - Compiler le JS avant de l'envoyer au client
This commit is contained in:
parent
a74c67e241
commit
8f9e902587
20 changed files with 809 additions and 762 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<main class="layout-maxed ma-collection-details" id="app" v-cloak @keyup="changeImage">
|
||||
<main class="layout-maxed ma-collection-details" id="ma-collection-details" v-cloak @keyup="changeImage">
|
||||
|
||||
<h1>
|
||||
<a :href="`/ma-collection?page=1&limit=16&sort=year&order=asc&artists_sort=${item.artists_sort}`">{{item.artists_sort}}</a> - {{item.title}}
|
||||
|
|
@ -176,160 +176,5 @@
|
|||
</main>
|
||||
|
||||
<script>
|
||||
Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
item: <%- JSON.stringify(page.item) %>,
|
||||
tracklist: [],
|
||||
identifiers: [],
|
||||
modalIsVisible: false,
|
||||
identifiersMode: 'preview',
|
||||
identifiersPreviewLength: 16,
|
||||
preview: null,
|
||||
index: null,
|
||||
showModalDelete: false,
|
||||
}
|
||||
},
|
||||
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' });
|
||||
},
|
||||
showConfirmDelete() {
|
||||
this.toggleModal();
|
||||
},
|
||||
toggleModal() {
|
||||
this.showModalDelete = !this.showModalDelete;
|
||||
},
|
||||
updateItem() {
|
||||
showToastr("Mise à jour en cours…", true);
|
||||
axios.patch(`/api/v1/albums/${this.item._id}`)
|
||||
.then( (res) => {
|
||||
showToastr("Mise à jour réalisée avec succès", true);
|
||||
this.item = res.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
showToastr(err.response?.data?.message || "Impossible de mettre à jour cet album", false);
|
||||
});
|
||||
},
|
||||
deleteItem() {
|
||||
axios.delete(`/api/v1/albums/${this.item._id}`)
|
||||
.then( () => {
|
||||
window.location.href = "/ma-collection";
|
||||
})
|
||||
.catch((err) => {
|
||||
showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
|
||||
})
|
||||
.finally(() => {
|
||||
this.toggleModal();
|
||||
});
|
||||
},
|
||||
goToArtist() {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
}).mount('#app');
|
||||
const item = <%- JSON.stringify(page.item) %>;
|
||||
</script>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<main class="layout-maxed" id="app">
|
||||
<main class="layout-maxed" id="exporter">
|
||||
<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 :
|
||||
|
|
@ -44,25 +44,4 @@
|
|||
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>
|
||||
</main>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<main class="layout-maxed collection" id="app">
|
||||
<main class="layout-maxed collection" id="ma-collection">
|
||||
<h1>
|
||||
Ma collection
|
||||
<i class="icon-share" @click="toggleModalShare" aria-label="Partager ma collection" title="Votre collection sera visible en lecture aux personnes ayant le lien de partage"></i>
|
||||
|
|
@ -196,185 +196,5 @@
|
|||
</main>
|
||||
|
||||
<script>
|
||||
const {
|
||||
protocol,
|
||||
host
|
||||
} = window.location;
|
||||
|
||||
Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
moreFilters: false,
|
||||
items: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
limit: 16,
|
||||
artist: '',
|
||||
format: '',
|
||||
year: '',
|
||||
genre: '',
|
||||
style: '',
|
||||
sortOrder: 'artists_sort-asc',
|
||||
sort: 'artists_sort',
|
||||
order: 'asc',
|
||||
itemId: null,
|
||||
showModalDelete: false,
|
||||
showModalShare: false,
|
||||
shareLink: `${protocol}//${host}/collection/<%= user._id %>`,
|
||||
isPublicCollection: <%= user.isPublicCollection ? 'true' : 'false' %>,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
this.loading = true;
|
||||
this.total = 0;
|
||||
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const entries = urlParams.entries();
|
||||
|
||||
for(const entry of entries) {
|
||||
switch(entry[0]) {
|
||||
case 'artists_sort':
|
||||
this.artist = entry[1];
|
||||
break;
|
||||
default:
|
||||
this[entry[0]] = entry[1];
|
||||
}
|
||||
}
|
||||
|
||||
let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
|
||||
if ( this.artist ) {
|
||||
url += `&artists_sort=${this.artist.replace('&', '%26')}`;
|
||||
}
|
||||
if ( this.format ) {
|
||||
url += `&format=${this.format.replace('&', '%26')}`;
|
||||
}
|
||||
if ( this.year ) {
|
||||
url += `&year=${this.year}`;
|
||||
}
|
||||
if ( this.genre ) {
|
||||
url += `&genre=${this.genre.replace('&', '%26')}`;
|
||||
}
|
||||
if ( this.style ) {
|
||||
url += `&style=${this.style.replace('&', '%26')}`;
|
||||
}
|
||||
|
||||
axios.get(url)
|
||||
.then( response => {
|
||||
this.items = response.data.rows;
|
||||
this.total = response.data.count || 0;
|
||||
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
|
||||
})
|
||||
.catch((err) => {
|
||||
showToastr(err.response?.data?.message || "Impossible de charger votre collection");
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
changeUrl() {
|
||||
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
|
||||
if ( this.artist ) {
|
||||
url += `&artists_sort=${this.artist.replace('&', '%26')}`;
|
||||
}
|
||||
if ( this.format ) {
|
||||
url += `&format=${this.format.replace('&', '%26')}`;
|
||||
}
|
||||
if ( this.year ) {
|
||||
url += `&year=${this.year}`;
|
||||
}
|
||||
if ( this.genre ) {
|
||||
url += `&genre=${this.genre.replace('&', '%26')}`;
|
||||
}
|
||||
if ( this.style ) {
|
||||
url += `&style=${this.style.replace('&', '%26')}`;
|
||||
}
|
||||
|
||||
location.href = url;
|
||||
},
|
||||
next(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.page += 1;
|
||||
|
||||
this.changeUrl();
|
||||
},
|
||||
previous(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.page -= 1;
|
||||
|
||||
this.changeUrl();
|
||||
},
|
||||
goTo(page) {
|
||||
this.page = page;
|
||||
|
||||
this.changeUrl();
|
||||
},
|
||||
changeSort() {
|
||||
const [sort,order] = this.sortOrder.split('-');
|
||||
this.sort = sort;
|
||||
this.order = order;
|
||||
this.page = 1;
|
||||
|
||||
this.changeUrl();
|
||||
},
|
||||
changeFilter() {
|
||||
this.page = 1;
|
||||
|
||||
this.changeUrl();
|
||||
},
|
||||
showMoreFilters() {
|
||||
this.moreFilters = !this.moreFilters;
|
||||
},
|
||||
toggleModal() {
|
||||
this.showModalDelete = !this.showModalDelete;
|
||||
},
|
||||
toggleModalShare() {
|
||||
this.showModalShare = !this.showModalShare;
|
||||
},
|
||||
showConfirmDelete(itemId) {
|
||||
this.itemId = itemId;
|
||||
this.toggleModal();
|
||||
},
|
||||
deleteItem() {
|
||||
axios.delete(`/api/v1/albums/${this.itemId}`)
|
||||
.then( () => {
|
||||
this.fetch();
|
||||
})
|
||||
.catch((err) => {
|
||||
showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
|
||||
})
|
||||
.finally(() => {
|
||||
this.toggleModal();
|
||||
});
|
||||
},
|
||||
shareCollection() {
|
||||
axios.patch(`/api/v1/me`, {
|
||||
isPublicCollection: !this.isPublicCollection,
|
||||
})
|
||||
.then( (res) => {
|
||||
this.isPublicCollection = res.data.isPublicCollection;
|
||||
|
||||
if ( this.isPublicCollection ) {
|
||||
showToastr("Votre collection est désormais publique", true);
|
||||
} else {
|
||||
showToastr("Votre collection n'est plus partagée", true);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
|
||||
})
|
||||
.finally(() => {
|
||||
this.toggleModalShare();
|
||||
});
|
||||
},
|
||||
}
|
||||
}).mount('#app');
|
||||
</script>
|
||||
const isPublicCollection = <%= user.isPublicCollection ? 'true' : 'false' %>;
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue