#66 - Compiler le JS avant de l'envoyer au client

develop
Damien Broqua 1 month ago
parent a74c67e241
commit 8f9e902587
  1. 2
      .gitignore
  2. 46
      gulpfile.js
  3. 171
      javascripts/ajouter-un-album.js
  4. 133
      javascripts/collection.js
  5. 42
      javascripts/conctact.js
  6. 9
      javascripts/main.js
  7. 26
      javascripts/mon-compte/index.js
  8. 158
      javascripts/mon-compte/ma-collection/details.js
  9. 18
      javascripts/mon-compte/ma-collection/exporter.js
  10. 178
      javascripts/mon-compte/ma-collection/index.js
  11. 11
      package.json
  12. 8
      src/app.js
  13. 5
      views/index.ejs
  14. 178
      views/pages/ajouter-un-album.ejs
  15. 139
      views/pages/collection.ejs
  16. 28
      views/pages/mon-compte/index.ejs
  17. 159
      views/pages/mon-compte/ma-collection/details.ejs
  18. 25
      views/pages/mon-compte/ma-collection/exporter.ejs
  19. 186
      views/pages/mon-compte/ma-collection/index.ejs
  20. 49
      views/pages/nous-contacter.ejs

2
.gitignore vendored

@ -121,6 +121,6 @@ dist
dist
yarn.lock
public/css
public/css
public/js
docker-compose.yml
dump

@ -0,0 +1,46 @@
const { parallel, src, dest } = require("gulp");
const sourcemaps = require("gulp-sourcemaps");
const concat = require("gulp-concat");
const gulp = require("gulp");
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const sourceJs = "javascripts/**/*.js";
const sourceRemoteJS = [
"./node_modules/vue/dist/vue.global.prod.js",
"./node_modules/axios/dist/axios.min.js",
];
const destination = "public/js";
// TASKS ----------------------------------------------------------------------
const compileJs = function () {
return gulp
.src(sourceJs)
.pipe(sourcemaps.init())
.pipe(concat("main.js"))
.pipe(
babel({
presets: ["@babel/env"],
})
)
.pipe(uglify())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(destination));
};
const compileRemoteJs = function () {
return gulp
.src(sourceRemoteJS)
.pipe(sourcemaps.init())
.pipe(concat("libs.js"))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(destination));
};
// ----------------------------------------------------------------------------
// COMMANDS -------------------------------------------------------------------
exports.default = parallel(compileJs, compileRemoteJs);
// ----------------------------------------------------------------------------

@ -0,0 +1,171 @@
Vue.createApp({
data() {
return {
q: '',
year: '',
country: '',
format: '',
loading: false,
items: [],
details: {},
modalIsVisible: false,
formats: [
'Vinyl',
'Acetate',
'Flexi-disc',
'Lathe Cut',
'Mighty Tiny',
'Shellac',
'Sopic',
'Pathé Disc',
'Edison Disc',
'Cylinder',
'CD',
'CDr',
'CDV',
'DVD',
'DVDr',
'HD DVD',
'HD DVD-R',
'Blu-ray',
'Blu-ray-R',
'Ultra HD Blu-ray',
'SACD',
'4-Track Cartridge',
'8-Track Cartridge',
'Cassette',
'DC-International',
'Elcaset',
'PlayTape',
'RCA Tape Cartridge',
'DAT',
'DCC',
'Microcassette',
'NT Cassette',
'Pocket Rocker',
'Revere Magnetic Stereo Tape Ca',
'Tefifon',
'Reel-To-Reel',
'Sabamobil',
'Betacam',
'Betacam SP',
'Betamax',
'Cartrivision',
'MiniDV',
'Super VHS',
'U-matic',
'VHS',
'Video 2000',
'Video8',
'Film Reel',
'HitClips',
'Laserdisc',
'SelectaVision',
'VHD',
'Wire Recording',
'Minidisc',
'MVD',
'UMD',
'Floppy Disk',
'File',
'Memory Stick',
'Hybrid',
'All Media',
'Box Set',
]
}
},
methods: {
search(event) {
event.preventDefault();
if ( this.loading ) {
return false;
}
this.loading = true;
let url = `/api/v1/search?q=${this.q}`;
if ( this.year ) {
url += `&year=${this.year}`;
}
if ( this.country ) {
url += `&country=${this.country}`;
}
if ( this.format ) {
url += `&format=${this.format}`;
}
axios.get(url)
.then( response => {
const {
results,
} = response.data;
let items = [];
for (let i = 0 ; i < results.length ; i += 1 ) {
const {
id,
title,
thumb,
year,
country,
format,
genre,
style,
} = results[i];
items.push({
id,
title,
thumb,
year,
country,
format,
genre,
style,
});
}
this.items = items;
})
.catch((err) => {
showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
})
.finally(() => {
this.loading = false;
});
},
toggleModal() {
this.modalIsVisible = !this.modalIsVisible;
},
loadDetails(discogsId) {
axios.get(`/api/v1/search/${discogsId}`)
.then( response => {
const {
data,
} = response;
this.details = data;
this.toggleModal();
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger les détails de cet album");
})
.finally(() => {
this.loading = false;
});
},
add() {
axios.post('/api/v1/albums', this.details)
.then(() => {
window.location.href = '/ma-collection';
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible d'ajouter cet album pour le moment…");
});
},
orderedItems(items) {
return items.sort();
}
}
}).mount('#ajouter-album');

@ -0,0 +1,133 @@
if ( typeof userId !== 'undefined' ) {
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',
userId,
}
},
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?userId=${this.userId}&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 cette collection");
})
.finally(() => {
this.loading = false;
});
},
changeUrl() {
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if ( this.artist ) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`;
}
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;
}
}
}).mount('#collection-publique');
}

@ -0,0 +1,42 @@
if ( typeof contactMethod !== 'undefined' && contactMethod === 'smtp' ) {
Vue.createApp({
data() {
return {
email: '',
name: '',
message: '',
captcha: '',
loading: false,
}
},
methods: {
send(event) {
event.preventDefault();
if ( this.loading ) {
return false;
}
this.loading = true;
const {
email,
message,
name,
captcha,
} = this;
axios.post('/api/v1/contact', {email, name, message, captcha})
.then( () => {
showToastr("Message correctement envoyé", true);
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible d'envoyer votre message", false);
})
.finally(() => {
this.loading = false;
})
},
},
}).mount('#contact');
}

@ -1,8 +1,13 @@
/**
const {
protocol,
host
} = window.location;
/**
* Fonction permettant d'afficher un message dans un toastr
* @param {String} message
*/
function showToastr(message, success = false) {
function showToastr(message, success = false) {
let x = document.getElementById("toastr");
if ( message ) {
x.getElementsByTagName("SPAN")[0].innerHTML = message;

@ -0,0 +1,26 @@
if ( typeof email !== 'undefined' && typeof username !== 'undefined' ) {
Vue.createApp({
data() {
return {
email,
username,
oldPassword: '',
password: '',
passwordConfirm: '',
loading: false,
}
},
methods: {
async updateProfil(event) {
// try {
// if ( this.password !== this.passwordConfirm ) {
// throw "La confirnation du mot de passe ne correspond pas";
// }
// } catch(err) {
// event.preventDefault();
// showToastr(err);
// }
},
}
}).mount('#mon-compte');
}

@ -0,0 +1,158 @@
if ( typeof item !== 'undefined' ) {
Vue.createApp({
data() {
return {
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('#ma-collection-details');
}

@ -0,0 +1,18 @@
Vue.createApp({
data() {
return {
format: 'xml',
}
},
created() {
},
destroyed() {
},
methods: {
exportCollection(event) {
event.preventDefault();
window.open(`/api/v1/albums?exportFormat=${this.format}`, '_blank');
}
},
}).mount('#exporter');

@ -0,0 +1,178 @@
if ( typeof isPublicCollection !== 'undefined' ) {
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,
}
},
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('#ma-collection');
}

@ -4,9 +4,10 @@
"description": "Simple application to manage your CD/Vinyl collection",
"scripts": {
"start": "node ./dist/bin/www",
"run:all": "npm-run-all build sass start",
"run:all": "npm-run-all build sass uglify start",
"watch": "nodemon -e js,scss",
"sass": "npx sass sass/index.scss public/css/main.css -s compressed --color",
"uglify": "npx gulp",
"prebuild": "rimraf dist",
"build": "babel ./src --out-dir dist --copy-files",
"test": "jest",
@ -55,6 +56,11 @@
"excel4node": "^1.7.2",
"express": "^4.17.2",
"express-session": "^1.17.2",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-sourcemaps": "^3.0.0",
"gulp-uglify": "^3.0.2",
"joi": "^17.6.0",
"knacss": "^8.0.4",
"mongoose": "^6.2.1",
@ -75,7 +81,8 @@
"exec": "yarn run:all",
"watch": [
"src/*",
"sass/*"
"sass/*",
"javascripts/*"
],
"ignore": [
"**/__tests__/**",

@ -75,14 +75,6 @@ app.set("views", path.join(__dirname, "../views"));
app.set("view engine", "ejs");
app.use(express.static(path.join(__dirname, "../public")));
app.use(
"/libs/vue",
express.static(path.join(__dirname, "../node_modules/vue/dist"))
);
app.use(
"/libs/axios",
express.static(path.join(__dirname, "../node_modules/axios/dist"))
);
app.use("/", indexRouter);
app.use("/mon-compte", monCompteRouter);

@ -16,9 +16,8 @@
<link href="/css/main.css" rel="stylesheet" />
<script src="/libs/axios/axios.min.js"></script>
<script src="/libs/vue/vue.global.prod.js"></script>
<script src="/js/main.js"></script>
<script defer src="/js/libs.js"></script>
<script defer src="/js/main.js"></script>
<% if ( config.matomoUrl ) { %>
<!-- Matomo -->

@ -1,4 +1,4 @@
<main class="layout-maxed ajouter-un-album" id="app">
<main class="layout-maxed ajouter-un-album" id="ajouter-album">
<h1>Ajouter un album</h1>
<form @submit="search">
<div class="grid sm:grid-cols-2">
@ -169,178 +169,4 @@
</footer>
</div>
</div>
</main>
<script>
Vue.createApp({
data() {
return {
q: '',
year: '',
country: '',
format: '',
loading: false,
items: [],
details: {},
modalIsVisible: false,
formats: [
'Vinyl',
'Acetate',
'Flexi-disc',
'Lathe Cut',
'Mighty Tiny',
'Shellac',
'Sopic',
'Pathé Disc',
'Edison Disc',
'Cylinder',
'CD',
'CDr',
'CDV',
'DVD',
'DVDr',
'HD DVD',
'HD DVD-R',
'Blu-ray',
'Blu-ray-R',
'Ultra HD Blu-ray',
'SACD',
'4-Track Cartridge',
'8-Track Cartridge',
'Cassette',
'DC-International',
'Elcaset',
'PlayTape',
'RCA Tape Cartridge',
'DAT',
'DCC',
'Microcassette',
'NT Cassette',
'Pocket Rocker',
'Revere Magnetic Stereo Tape Ca',
'Tefifon',
'Reel-To-Reel',
'Sabamobil',
'Betacam',
'Betacam SP',
'Betamax',
'Cartrivision',
'MiniDV',
'Super VHS',
'U-matic',
'VHS',
'Video 2000',
'Video8',
'Film Reel',
'HitClips',
'Laserdisc',
'SelectaVision',
'VHD',
'Wire Recording',
'Minidisc',
'MVD',
'UMD',
'Floppy Disk',
'File',
'Memory Stick',
'Hybrid',
'All Media',
'Box Set',
]
}
},
methods: {
search(event) {
event.preventDefault();
if ( this.loading ) {
return false;
}
this.loading = true;
let url = `/api/v1/search?q=${this.q}`;
if ( this.year ) {
url += `&year=${this.year}`;
}
if ( this.country ) {
url += `&country=${this.country}`;
}
if ( this.format ) {
url += `&format=${this.format}`;
}
axios.get(url)
.then( response => {
const {
results,
} = response.data;
let items = [];
for (let i = 0 ; i < results.length ; i += 1 ) {
const {
id,
title,
thumb,
year,
country,
format,
genre,
style,
} = results[i];
items.push({
id,
title,
thumb,
year,
country,
format,
genre,
style,
});
}
this.items = items;
})
.catch((err) => {
showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
})
.finally(() => {
this.loading = false;
});
},
toggleModal() {
this.modalIsVisible = !this.modalIsVisible;
},
loadDetails(discogsId) {
axios.get(`/api/v1/search/${discogsId}`)
.then( response => {
const {
data,
} = response;
this.details = data;
this.toggleModal();
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger les détails de cet album");
})
.finally(() => {
this.loading = false;
});
},
add() {
axios.post('/api/v1/albums', this.details)
.then(() => {
window.location.href = '/ma-collection';
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible d'ajouter cet album pour le moment…");
});
},
orderedItems(items) {
return items.sort();
}
}
}).mount('#app');
</script>
</main>

@ -1,4 +1,4 @@
<main class="layout-maxed collection" id="app">
<main class="layout-maxed collection" id="collection-publique">
<h1>
Collection de <%= page.username %>
</h1>
@ -146,140 +146,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',
userId: "<%= params.userId %>",
}
},
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?userId=${this.userId}&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 cette collection");
})
.finally(() => {
this.loading = false;
});
},
changeUrl() {
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if ( this.artist ) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`;
}
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;
}
}
}).mount('#app');
const userId = "<%= params.userId %>";
</script>

@ -1,4 +1,4 @@
<main class="layout-maxed collection" id="app">
<main class="layout-maxed collection" id="mon-compte">
<h1>
Mon compte
</h1>
@ -72,28 +72,6 @@
</main>
<script>
Vue.createApp({
data() {
return {
email: '<%= user.email %>',
username: '<%= user.username %>',
oldPassword: '',
password: '',
passwordConfirm: '',
loading: false,
}
},
methods: {
async updateProfil(event) {
// try {
// if ( this.password !== this.passwordConfirm ) {
// throw "La confirnation du mot de passe ne correspond pas";
// }
// } catch(err) {
// event.preventDefault();
// showToastr(err);
// }
},
}
}).mount('#app');
const email = '<%= user.email %>';
const username = '<%= user.username %>';
</script>

@ -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');
}
},