lang: navbar translation

frontend/static/js/api/LanguageManager.js

@@ -0,0 +1,45 @@
+export default class LanguageManager {
+	constructor() {
+		this.availableLanguages = ['en', 'fr'];
+
+		this.currentLang = 'en'
+		this.chosenLang = localStorage.getItem('preferedLanguage') || this.currentLang;
+		if (this.chosenLang !== this.currentLang && this.availableLanguages.includes(this.chosenLang)) {
+			this.translatePage();
+		}
+	}
+
+	async translatePage() {
+		if (this.currentLang === this.chosenLang)
+			return;
+
+		let dictUrl = `${location.origin}/static/js/lang/${this.chosenLang}.json`;
+		let translation = await fetch(dictUrl).then(response => {
+			if (response.status !== 200)
+				return null;
+			return response.json();
+		});
+		if (!translation) {
+			console.log(`No translation found for language ${this.chosenLang}`);
+			return 1;
+		}
+		document.querySelectorAll('[data-i18n]').forEach(el => {
+			let key = el.getAttribute('data-i18n');
+			el.innerHTML = translation[key];
+		})
+
+		this.currentLang = this.chosenLang;
+		return 0;
+	}
+
+	async changeLanguage(lang) {
+		if (lang === this.currentLang || !this.availableLanguages.includes(lang))
+			return;
+
+		this.chosenLang = lang;
+		if (await this.translatePage() !== 0)
+			return;
+
+		localStorage.setItem('preferedLanguage', lang);
+	}
+}

frontend/static/js/api/client.js

@@ -7,6 +7,7 @@ import { navigateTo } from "../index.js"
 import { Tourmanents } from "./tournament/tournaments.js";
 import {Notice} from "./chat/notice.js"
 import { Channel } from "./chat/channel.js";
+import LanguageManager from './LanguageManager.js'
 
 function getCookie(name)
 {
@@ -70,6 +71,8 @@ class Client
 		 * @type {Notice}
 		 */
 		this.notice = new Notice(this);
+
+		this.lang = new LanguageManager;
 	}
 
 	/**

frontend/static/js/index.js

@@ -135,6 +135,12 @@ document.addEventListener("DOMContentLoaded", async () => {
             navigateTo(e.target.href.slice(location.origin.length));
         }
     });
+
+	//Languages
+	Array.from(document.getElementById('languageSelector').children).forEach(el => {
+		el.onclick = _ => client.lang.changeLanguage(el.value);
+	});
+
 	await client.isAuthentificate();
     router(location.pathname);
 	document.querySelector('a[href=\'' + location.pathname + '\']')?.classList.add('active');

frontend/static/js/lang/en.json

@@ -0,0 +1,9 @@
+{
+	"navbarSearch": "Search",
+	"navbarHome": "Home",
+	"navbarLogin": "Login",
+	"navbarRegister": "Register",
+	"navbarProfile": "My Profile",
+	"navbarSettings": "Settings",
+	"navbarLogout": "Logout"
+}

frontend/static/js/lang/fr.json

@@ -0,0 +1,9 @@
+{
+	"navbarSearch": "Recherche",
+	"navbarHome": "Maison",
+	"navbarLogin": "Se connecter",
+	"navbarRegister": "S'inscrire",
+	"navbarProfile": "Mon Profil",
+	"navbarSettings": "Paramètres",
+	"navbarLogout": "Se déconnecter"
+}