dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

Version 1.4 (#67)

Browse source 
Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: #67
This commit is contained in:
Damien Broqua 2022-10-30 21:48:49 +01:00
parent d03394bee7
commit 1d59ee3b71
22 changed files with 1067 additions and 934 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
.eslintrc.js
View file

@ -5,32 +5,39 @@ module.exports = {
node: true,
jquery: true,
},
extends: ['airbnb-base', 'prettier'],
plugins: ['prettier'],
extends: ["airbnb-base", "prettier"],
plugins: ["prettier"],
parserOptions: {
ecmaVersion: 11,
sourceType: 'module',
sourceType: "module",
},
rules: {
'prettier/prettier': ['error'],
'no-underscore-dangle': [
'error',
"prettier/prettier": ["error"],
"no-underscore-dangle": [
"error",
{
allow: ['_id', 'artists_sort', 'type_'],
allow: ["_id", "artists_sort", "type_"],
},
],
'camelcase': [
'error',
camelcase: [
"error",
{
allow: ['artists_sort',]
allow: ["artists_sort"],
},
],
},
ignorePatterns: ['public/libs/**/*.js', 'public/js/main.js', 'dist/**'],
ignorePatterns: ["public/libs/**/*.js", "public/js/main.js", "dist/**"],
overrides: [
{
files: ['**/*.js'],
excludedFiles: '*.ejs',
files: ["**/*.js"],
excludedFiles: "*.ejs",
},
],
globals: {
Vue: true,
axios: true,
showToastr: true,
protocol: true,
host: true,
},
};

2
.gitignore vendored
View file

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

46
gulpfile.js Normal file
View file

@ -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);
// ----------------------------------------------------------------------------

179
javascripts/ajouter-un-album.js Normal file
View file

@ -0,0 +1,179 @@
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}`;
}
return axios
.get(url)
.then((response) => {
const { results } = response.data;
const 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");

141
javascripts/collection.js Normal file
View file

@ -0,0 +1,141 @@
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",
// eslint-disable-next-line no-undef
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();
// eslint-disable-next-line no-restricted-syntax
for (const entry of entries) {
const [key, value] = entry;
switch (key) {
case "artists_sort":
this.artist = value;
break;
default:
this[key] = value;
}
}
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, 10) +
(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")}`;
}
window.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");
}

43
javascripts/conctact.js Normal file
View file

@ -0,0 +1,43 @@
// eslint-disable-next-line no-undef
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;
return 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");
}

151
javascripts/main.js Normal file
View file

@ -0,0 +1,151 @@
/* eslint-disable no-unused-vars */
const { protocol, host } = window.location;
/**
* Fonction permettant d'afficher un message dans un toastr
* @param {String} message
*/
function showToastr(message, success = false) {
const x = document.getElementById("toastr");
if (message) {
x.getElementsByTagName("SPAN")[0].innerHTML = message;
}
x.className = `${x.className} show`.replace("sucess", "");
if (success) {
x.className = `${x.className} success`;
}
setTimeout(() => {
x.className = x.className.replace("show", "");
}, 3000);
}
/**
* Fonction permettant de masquer le toastr
*/
function hideToastr() {
const x = document.getElementById("toastr");
x.className = x.className.replace("show", "");
x.getElementsByTagName("SPAN")[0].innerHTML = "";
}
/**
* Fonction permettant de récupérer la valeur d'un cookie
* @param {String} cname
* @param {String} defaultValue
*
* @return {String}
*/
function getCookie(cname, defaultValue = "false") {
const name = `${cname}=`;
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(";");
for (let i = 0; i < ca.length; i += 1) {
let c = ca[i];
while (c.charAt(0) === " ") {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return defaultValue;
}
/**
* Fonction permettant de créer un cookie
* @param {String} cname
* @param {String} cvalue
* @param {Number} exdays
*/
function setCookie(cname, cvalue, exdays = 30) {
const d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
const expires = `expires=${d.toUTCString()}`;
document.cookie = `${cname}=${cvalue};${expires};path=/`;
}
/**
* Fonction de (dé)charger le thème accessible
* @param {String} value
*/
function setAriaTheme(value) {
const { body } = document;
if (value === "true") {
const classesString = body.className || "";
if (classesString.indexOf("is-accessible") === -1) {
body.classList.add("is-accessible");
}
} else {
body.classList.remove("is-accessible");
}
}
/**
* Fonction de (dé)charger le thème accessible
*/
function switchAriaTheme() {
const { body } = document;
body.classList.toggle("is-accessible");
setCookie("ariatheme", body.classList.contains("is-accessible"));
}
/**
* Fonction permettant de switcher de thème clair/sombre
* @param {Object} e
*/
function switchTheme(e) {
const theme = e.target.checked ? "dark" : "light";
document.documentElement.setAttribute("data-theme", theme);
setCookie("theme", theme);
}
/**
* Ensemble d'actions effectuées au chargement de la page
*/
document.addEventListener("DOMContentLoaded", () => {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach((el) => {
el.addEventListener("click", () => {
const { target } = el.dataset;
const $target = document.getElementById(target);
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
if (switchAriaThemeBtn) {
switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
}
setAriaTheme(getCookie("ariatheme"));
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
if (toggleSwitch) {
toggleSwitch.addEventListener("change", switchTheme, false);
}
let currentThemeIsDark = getCookie("theme");
if (currentThemeIsDark === "false" && window.matchMedia) {
currentThemeIsDark = window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light";
}
switchTheme({ target: { checked: currentThemeIsDark === "dark" } });
if (toggleSwitch) {
toggleSwitch.checked = currentThemeIsDark === "dark";
}
});

29
javascripts/mon-compte/index.js Normal file
View file

@ -0,0 +1,29 @@
if (typeof email !== "undefined" && typeof username !== "undefined") {
Vue.createApp({
data() {
return {
// eslint-disable-next-line no-undef
email,
// eslint-disable-next-line no-undef
username,
oldPassword: "",
password: "",
passwordConfirm: "",
loading: false,
};
},
methods: {
// eslint-disable-next-line no-unused-vars
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");
}

186
javascripts/mon-compte/ma-collection/details.js Normal file
View file

@ -0,0 +1,186 @@
if (typeof item !== "undefined") {
Vue.createApp({
data() {
return {
// eslint-disable-next-line no-undef
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 = [];
const 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;
}
}
return true;
},
showAllIdentifiers() {
this.identifiersMode = "all";
this.setIdentifiers();
},
showLessIdentifiers() {
this.identifiersMode = "preview";
this.setIdentifiers();
document
.querySelector("#identifiers")
.scrollIntoView({ behavior: "smooth" });
},
showConfirmDelete() {
this.toggleModalDelete();
},
toggleModalDelete() {
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;
this.setTrackList();
this.setIdentifiers();
this.showLessIdentifiers();
})
.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.toggleModalDelete();
});
},
goToArtist() {
return "";
},
},
}).mount("#ma-collection-details");
}

16
javascripts/mon-compte/ma-collection/exporter.js Normal file
View file

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

201
javascripts/mon-compte/ma-collection/index.js Normal file
View file

@ -0,0 +1,201 @@
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 %>`,
// eslint-disable-next-line no-undef
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();
// eslint-disable-next-line no-restricted-syntax
for (const entry of entries) {
const [key, value] = entry;
switch (key) {
case "artists_sort":
this.artist = value;
break;
default:
this[key] = value;
}
}
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, 10) +
(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")}`;
}
window.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");
}

11
package.json
View file

@ -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__/**",

138
public/js/main.js
View file

@ -1,138 +0,0 @@
/**
* Fonction permettant d'afficher un message dans un toastr
* @param {String} message
*/
function showToastr(message, success = false) {
let x = document.getElementById("toastr");
if ( message ) {
x.getElementsByTagName("SPAN")[0].innerHTML = message;
}
x.className = `${x.className} show`.replace("sucess", "");
if ( success ) {
x.className = `${x.className} success`;
}
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
};
/**
* Fonction permettant de masquer le toastr
*/
function hideToastr() {
let x = document.getElementById("toastr");
x.className = x.className.replace("show", "");
x.getElementsByTagName("SPAN")[0].innerHTML = "";
}
/**
* Fonction permettant de récupérer la valeur d'un cookie
* @param {String} cname
* @param {String} defaultValue
*
* @return {String}
*/
function getCookie(cname, defaultValue = 'false') {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i+=1) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return defaultValue;
}
/**
* Fonction permettant de créer un cookie
* @param {String} cname
* @param {String} cvalue
* @param {Number} exdays
*/
function setCookie(cname, cvalue, exdays = 30) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
/**
* Fonction de (dé)charger le thème accessible
* @param {String} value
*/
function setAriaTheme(value) {
let body = document.body;
if ( value === 'true' ) {
let classesString = body.className || "";
if (classesString.indexOf("is-accessible") === -1) {
body.classList.add("is-accessible");
}
} else {
body.classList.remove("is-accessible");
}
}
/**
* Fonction de (dé)charger le thème accessible
*/
function switchAriaTheme() {
let body = document.body;
body.classList.toggle("is-accessible");
setCookie('ariatheme', body.classList.contains("is-accessible"));
}
/**
* Fonction permettant de switcher de thème clair/sombre
* @param {Object} e
*/
function switchTheme(e) {
const theme = e.target.checked ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', theme);
setCookie('theme', theme);
}
/**
* Ensemble d'actions effectuées au chargement de la page
*/
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
if ( switchAriaThemeBtn ) {
switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
}
setAriaTheme(getCookie('ariatheme'));
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
if ( toggleSwitch ) {
toggleSwitch.addEventListener('change', switchTheme, false);
}
let currentThemeIsDark = getCookie('theme');
if ( currentThemeIsDark === 'false' && window.matchMedia ) {
currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
switchTheme({target: {checked: currentThemeIsDark === 'dark'}});
if ( toggleSwitch) {
toggleSwitch.checked = currentThemeIsDark === 'dark';
}
});

8
src/app.js
View file

@ -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);

5
views/index.ejs
View file

@ -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 -->

176
views/pages/ajouter-un-album.ejs
View file

@ -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">
@ -170,177 +170,3 @@
</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>

139
views/pages/collection.ejs
View file

@ -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>

28
views/pages/mon-compte/index.ejs
View file

@ -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>

167
views/pages/mon-compte/ma-collection/details.ejs
View file

@ -1,7 +1,7 @@
<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>
{{item.artists_sort}} - {{item.title}}
<a :href="`/ma-collection?page=1&limit=16&sort=year&order=asc&artists_sort=${item.artists_sort}`">{{item.artists_sort}}</a> - {{item.title}}
<i class="icon-trash" title="Supprimer cette fiche" @click="showConfirmDelete()"></i>
<i class="icon-refresh" title="Mettre à jour les données de cette fiche" @click="updateItem()"></i>
</h1>
@ -120,14 +120,13 @@
</template>
</div>
</div>
<!-- <hr />
<hr />
<div class="grid gap-10">
<div>
<strong>Note</strong>
<br />
<span>{{item.notes}}</span>
<div v-html="(item.notes || '').replaceAll('\n', '<br />')"></div>
</div>
</div>
</div> -->
<hr />
<div class="grid gap-10">
<div>
@ -170,164 +169,12 @@
</section>
<footer>
<button class="button is-primary" @click="deleteItem">Supprimer</button>
<button class="button" @click="toggleModal">Annuler</button>
<button class="button" @click="toggleModalDelete">Annuler</button>
</footer>
</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,
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( () => {
return locatiom.href = "/ma-collection";
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
})
.finally(() => {
this.toggleModal();
});
},
},
}).mount('#app');
const item = <%- JSON.stringify(page.item) %>;
</script>

23
views/pages/mon-compte/ma-collection/exporter.ejs
View file

@ -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 :
@ -45,24 +45,3 @@
</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>

184
views/pages/mon-compte/ma-collection/index.ejs
View file

@ -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');
const isPublicCollection = <%= user.isPublicCollection ? 'true' : 'false' %>;
</script>

45
views/pages/nous-contacter.ejs
View file

@ -1,4 +1,4 @@
<section class="box" id="app">
<section class="box" id="contact">
<h1>Nous contacter</h1>
<form @submit="send" <% if (config.mailMethod === 'formspree' ) { %> id="contact" method="POST" action="https://formspree.io/f/<%= config.formspreeId %>" <% } %>>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
@ -34,47 +34,6 @@
</form>
</section>
<% if (config.mailMethod === 'smtp' ) { %>
<script>
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('#app');
const contactMethod = '<%= config.mailMethod %>';
</script>
<% } %>