forked from dbroqua/MusicTopus
develop (#91)
Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/91 Co-authored-by: dbroqua <contact@darkou.fr> Co-committed-by: dbroqua <contact@darkou.fr>
This commit is contained in:
Damien Broqua
parent
e0f227af08
commit
4109186a47
29 changed files with 497 additions and 325 deletions
|
|
@ -9,6 +9,7 @@ Vue.createApp({
|
|||
items: [],
|
||||
details: {},
|
||||
modalIsVisible: false,
|
||||
submitting: false,
|
||||
formats: [
|
||||
"Vinyl",
|
||||
"Acetate",
|
||||
|
|
@ -160,12 +161,18 @@ Vue.createApp({
|
|||
});
|
||||
},
|
||||
add() {
|
||||
axios
|
||||
if (this.submitting) {
|
||||
return true;
|
||||
}
|
||||
this.submitting = true;
|
||||
|
||||
return axios
|
||||
.post("/api/v1/albums", this.details)
|
||||
.then(() => {
|
||||
window.location.href = "/ma-collection";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.submitting = false;
|
||||
showToastr(
|
||||
err.response?.data?.message ||
|
||||
"Impossible d'ajouter cet album pour le moment…"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
const { protocol, host } = window.location;
|
||||
|
||||
let timeout = null;
|
||||
|
||||
/**
|
||||
* Fonction permettant d'afficher un message dans un toastr
|
||||
* @param {String} message
|
||||
|
|
@ -11,12 +13,23 @@ function showToastr(message, success = false) {
|
|||
x.getElementsByTagName("SPAN")[0].innerHTML = message;
|
||||
}
|
||||
|
||||
x.className = `${x.className} show`.replace("sucess", "");
|
||||
if (success) {
|
||||
x.className = `${x.className} success`;
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
x.classList.remove("show");
|
||||
}
|
||||
setTimeout(() => {
|
||||
x.className = x.className.replace("show", "");
|
||||
|
||||
x.classList.remove("success");
|
||||
x.classList.remove("error");
|
||||
if (success) {
|
||||
x.classList.add("success");
|
||||
} else {
|
||||
x.classList.add("error");
|
||||
}
|
||||
|
||||
x.classList.add("show");
|
||||
|
||||
timeout = setTimeout(() => {
|
||||
x.classList.remove("show");
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
|
|
@ -30,80 +43,6 @@ function hideToastr() {
|
|||
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
|
||||
*/
|
||||
|
|
@ -123,29 +62,4 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,27 +2,100 @@ 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: "",
|
||||
formData: {
|
||||
// eslint-disable-next-line no-undef
|
||||
email,
|
||||
// eslint-disable-next-line no-undef
|
||||
username,
|
||||
oldPassword: "",
|
||||
password: "",
|
||||
passwordConfirm: "",
|
||||
// eslint-disable-next-line no-undef
|
||||
mastodon: mastodon || {
|
||||
publish: false,
|
||||
url: "",
|
||||
token: "",
|
||||
message:
|
||||
"Je viens d'ajouter {artist} - {album} à ma collection !",
|
||||
},
|
||||
},
|
||||
loading: false,
|
||||
errors: [],
|
||||
};
|
||||
},
|
||||
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);
|
||||
// }
|
||||
async testMastodon() {
|
||||
const { url, token } = this.formData.mastodon;
|
||||
|
||||
if (!url) {
|
||||
this.errors.push("emptyUrl");
|
||||
}
|
||||
if (!token) {
|
||||
this.errors.push("emptyToken");
|
||||
}
|
||||
|
||||
if (this.errors.length > 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
await axios.post(`/api/v1/mastodon`, { url, token });
|
||||
|
||||
showToastr("Configuration valide !", true);
|
||||
} catch (err) {
|
||||
showToastr(
|
||||
err.response?.data?.message ||
|
||||
"Impossible de tester cette configuration",
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
async updateProfil() {
|
||||
this.errors = [];
|
||||
const { oldPassword, password, passwordConfirm, mastodon } =
|
||||
this.formData;
|
||||
|
||||
if (password && !oldPassword) {
|
||||
this.errors.push("emptyPassword");
|
||||
}
|
||||
|
||||
if (password !== passwordConfirm) {
|
||||
this.errors.push("passwordsDiffer");
|
||||
}
|
||||
|
||||
if (this.errors.length > 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
const data = {
|
||||
mastodon,
|
||||
};
|
||||
|
||||
if (password) {
|
||||
data.password = password;
|
||||
data.oldPassword = oldPassword;
|
||||
}
|
||||
|
||||
try {
|
||||
await axios.patch(`/api/v1/me`, data);
|
||||
|
||||
showToastr("Profil mis à jour", true);
|
||||
} catch (err) {
|
||||
showToastr(
|
||||
err.response?.data?.message ||
|
||||
"Impossible de mettre à jour votre profil"
|
||||
);
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
|
||||
return true;
|
||||
},
|
||||
},
|
||||
}).mount("#mon-compte");
|
||||
|
|
|
|||
71
javascripts/theme.js
Normal file
71
javascripts/theme.js
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* Fonction permettant de sauvegarder dans le stockage local le choix du thème
|
||||
* @param {String} scheme
|
||||
*/
|
||||
function saveColorScheme(scheme) {
|
||||
localStorage.setItem("theme", scheme);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fonction permettant de changer le thème du site
|
||||
* @param {String} scheme
|
||||
*/
|
||||
function setColorScheme(scheme) {
|
||||
document.documentElement.setAttribute("data-theme", scheme);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fonction permettant de récupérer le thème du système
|
||||
* @return {String}
|
||||
*/
|
||||
function getPreferredColorScheme() {
|
||||
if (window.matchMedia) {
|
||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
return "dark";
|
||||
}
|
||||
return "light";
|
||||
}
|
||||
return "light";
|
||||
}
|
||||
|
||||
// INFO: On place un event sur le bouton
|
||||
const toggleSwitch = document.querySelector(
|
||||
'.theme-switch input[type="checkbox"]'
|
||||
);
|
||||
|
||||
/**
|
||||
* Event permettant de détecter les changements de thème du système
|
||||
*/
|
||||
if (window.matchMedia) {
|
||||
const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
colorSchemeQuery.addEventListener("change", () => {
|
||||
const selectedColorScheme = localStorage.getItem("theme") || "system";
|
||||
|
||||
if (selectedColorScheme === "system") {
|
||||
const preferedColorScheme = getPreferredColorScheme();
|
||||
setColorScheme(preferedColorScheme);
|
||||
|
||||
toggleSwitch.checked = preferedColorScheme === "dark";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const currentTheme = localStorage.getItem("theme") || getPreferredColorScheme();
|
||||
|
||||
// INFO: Au chargement de la page on détecte le thème à charger
|
||||
setColorScheme(currentTheme);
|
||||
|
||||
toggleSwitch.checked = currentTheme === "dark";
|
||||
|
||||
toggleSwitch.addEventListener(
|
||||
"change",
|
||||
(e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const scheme = e.target.checked ? "dark" : "light";
|
||||
|
||||
saveColorScheme(scheme);
|
||||
setColorScheme(scheme);
|
||||
},
|
||||
false
|
||||
);
|
||||
Loading…
Add table
Add a link
Reference in a new issue