feat(webui): language selector
This commit is contained in:
		
							parent
							
								
									37f6fe9323
								
							
						
					
					
						commit
						240a4df2e0
					
				@ -1,5 +1,5 @@
 | 
			
		||||
import { RequestHandler } from "express";
 | 
			
		||||
import { getEnglishString } from "@/src/services/itemDataService";
 | 
			
		||||
import { getString } from "@/src/services/itemDataService";
 | 
			
		||||
import {
 | 
			
		||||
    ExportArcanes,
 | 
			
		||||
    ExportGear,
 | 
			
		||||
@ -16,7 +16,8 @@ interface ListedItem {
 | 
			
		||||
    fusionLimit?: number;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const getItemListsController: RequestHandler = (_req, res) => {
 | 
			
		||||
const getItemListsController: RequestHandler = (req, res) => {
 | 
			
		||||
    const lang = typeof req.query.lang == "string" ? req.query.lang : "en";
 | 
			
		||||
    const weapons = [];
 | 
			
		||||
    const miscitems = [];
 | 
			
		||||
    for (const [uniqueName, item] of Object.entries(ExportWeapons)) {
 | 
			
		||||
@ -24,12 +25,12 @@ const getItemListsController: RequestHandler = (_req, res) => {
 | 
			
		||||
            if (item.totalDamage !== 0) {
 | 
			
		||||
                weapons.push({
 | 
			
		||||
                    uniqueName,
 | 
			
		||||
                    name: getEnglishString(item.name)
 | 
			
		||||
                    name: getString(item.name, lang)
 | 
			
		||||
                });
 | 
			
		||||
            } else if (!item.excludeFromCodex) {
 | 
			
		||||
                miscitems.push({
 | 
			
		||||
                    uniqueName: "MiscItems:" + uniqueName,
 | 
			
		||||
                    name: getEnglishString(item.name)
 | 
			
		||||
                    name: getString(item.name, lang)
 | 
			
		||||
                });
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
@ -37,13 +38,13 @@ const getItemListsController: RequestHandler = (_req, res) => {
 | 
			
		||||
    for (const [uniqueName, item] of Object.entries(ExportResources)) {
 | 
			
		||||
        miscitems.push({
 | 
			
		||||
            uniqueName: item.productCategory + ":" + uniqueName,
 | 
			
		||||
            name: getEnglishString(item.name)
 | 
			
		||||
            name: getString(item.name, lang)
 | 
			
		||||
        });
 | 
			
		||||
    }
 | 
			
		||||
    for (const [uniqueName, item] of Object.entries(ExportGear)) {
 | 
			
		||||
        miscitems.push({
 | 
			
		||||
            uniqueName: "Consumables:" + uniqueName,
 | 
			
		||||
            name: getEnglishString(item.name)
 | 
			
		||||
            name: getString(item.name, lang)
 | 
			
		||||
        });
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -52,7 +53,7 @@ const getItemListsController: RequestHandler = (_req, res) => {
 | 
			
		||||
    for (const [uniqueName, upgrade] of Object.entries(ExportUpgrades)) {
 | 
			
		||||
        mods.push({
 | 
			
		||||
            uniqueName,
 | 
			
		||||
            name: getEnglishString(upgrade.name),
 | 
			
		||||
            name: getString(upgrade.name, lang),
 | 
			
		||||
            fusionLimit: upgrade.fusionLimit
 | 
			
		||||
        });
 | 
			
		||||
        if (upgrade.isStarter || upgrade.isFrivolous || upgrade.upgradeEntries) {
 | 
			
		||||
@ -62,7 +63,7 @@ const getItemListsController: RequestHandler = (_req, res) => {
 | 
			
		||||
    for (const [uniqueName, arcane] of Object.entries(ExportArcanes)) {
 | 
			
		||||
        mods.push({
 | 
			
		||||
            uniqueName,
 | 
			
		||||
            name: getEnglishString(arcane.name)
 | 
			
		||||
            name: getString(arcane.name, lang)
 | 
			
		||||
        });
 | 
			
		||||
        if (arcane.isFrivolous) {
 | 
			
		||||
            badItems[uniqueName] = true;
 | 
			
		||||
@ -75,7 +76,7 @@ const getItemListsController: RequestHandler = (_req, res) => {
 | 
			
		||||
            .map(([uniqueName, warframe]) => {
 | 
			
		||||
                return {
 | 
			
		||||
                    uniqueName,
 | 
			
		||||
                    name: getEnglishString(warframe.name)
 | 
			
		||||
                    name: getString(warframe.name, lang)
 | 
			
		||||
                };
 | 
			
		||||
            }),
 | 
			
		||||
        weapons,
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,21 @@
 | 
			
		||||
import { getIndexAfter } from "@/src/helpers/stringHelpers";
 | 
			
		||||
import { logger } from "@/src/utils/logger";
 | 
			
		||||
import {
 | 
			
		||||
    dict_de,
 | 
			
		||||
    dict_en,
 | 
			
		||||
    dict_es,
 | 
			
		||||
    dict_fr,
 | 
			
		||||
    dict_it,
 | 
			
		||||
    dict_ja,
 | 
			
		||||
    dict_ko,
 | 
			
		||||
    dict_pl,
 | 
			
		||||
    dict_pt,
 | 
			
		||||
    dict_ru,
 | 
			
		||||
    dict_tc,
 | 
			
		||||
    dict_th,
 | 
			
		||||
    dict_tr,
 | 
			
		||||
    dict_uk,
 | 
			
		||||
    dict_zh,
 | 
			
		||||
    ExportRecipes,
 | 
			
		||||
    ExportWarframes,
 | 
			
		||||
    ExportWeapons,
 | 
			
		||||
@ -70,6 +84,27 @@ export const getSuitByUniqueName = (uniqueName: string): IPowersuit | undefined
 | 
			
		||||
    return ExportWarframes[uniqueName];
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const getEnglishString = (key: string): string => {
 | 
			
		||||
    return dict_en[key] ?? key;
 | 
			
		||||
export const getDict = (lang: string): Record<string, string> => {
 | 
			
		||||
    switch (lang) {
 | 
			
		||||
    case "de": return dict_de;
 | 
			
		||||
    case "es": return dict_es;
 | 
			
		||||
    case "fr": return dict_fr;
 | 
			
		||||
    case "it": return dict_it;
 | 
			
		||||
    case "ja": return dict_ja;
 | 
			
		||||
    case "ko": return dict_ko;
 | 
			
		||||
    case "pl": return dict_pl;
 | 
			
		||||
    case "pt": return dict_pt;
 | 
			
		||||
    case "ru": return dict_ru;
 | 
			
		||||
    case "tc": return dict_tc;
 | 
			
		||||
    case "th": return dict_th;
 | 
			
		||||
    case "tr": return dict_tr;
 | 
			
		||||
    case "uk": return dict_uk;
 | 
			
		||||
    case "zh": return dict_zh;
 | 
			
		||||
    }
 | 
			
		||||
    return dict_en;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const getString = (key: string, lang: string = "en"): string => {
 | 
			
		||||
    const dict = getDict(lang);
 | 
			
		||||
    return dict[key] ?? key;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -7,18 +7,40 @@
 | 
			
		||||
    <link rel="stylesheet" href="/webui/style.css" />
 | 
			
		||||
</head>
 | 
			
		||||
<body>
 | 
			
		||||
    <nav class="navbar sticky-top bg-body-tertiary">
 | 
			
		||||
    <nav class="navbar navbar-expand sticky-top bg-body-tertiary">
 | 
			
		||||
        <div class="container">
 | 
			
		||||
            <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar" aria-label="Toggle sidebar">
 | 
			
		||||
                <span class="navbar-toggler-icon"></span>
 | 
			
		||||
            </button>
 | 
			
		||||
            <a class="navbar-brand">OpenWF WebUI</a>
 | 
			
		||||
            <div class="nav-item dropdown">
 | 
			
		||||
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
 | 
			
		||||
                <li class="nav-item dropdown">
 | 
			
		||||
                    <button id="active-lang-name" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"></button>
 | 
			
		||||
                    <ul class="dropdown-menu dropdown-menu-end">
 | 
			
		||||
                        <li><a class="dropdown-item active" href="#" data-lang="en" onclick="event.preventDefault();setLanguage('en');">English</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="de" onclick="event.preventDefault();setLanguage('de');">Deutsch</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="es" onclick="event.preventDefault();setLanguage('es');">Español</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="fr" onclick="event.preventDefault();setLanguage('fr');">Français</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="it" onclick="event.preventDefault();setLanguage('it');">Italiano</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="ja" onclick="event.preventDefault();setLanguage('ja');">日本語</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="ko" onclick="event.preventDefault();setLanguage('ko');">한국어</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="pl" onclick="event.preventDefault();setLanguage('pl');">Polski</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="pt" onclick="event.preventDefault();setLanguage('pt');">Português</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="ru" onclick="event.preventDefault();setLanguage('ru');">Русский</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="tr" onclick="event.preventDefault();setLanguage('tr');">Türkçe</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="uk" onclick="event.preventDefault();setLanguage('uk');">Українська</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="zh" onclick="event.preventDefault();setLanguage('zh');">简体中文</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="tc" onclick="event.preventDefault();setLanguage('tc');">繁體中文</a></li>
 | 
			
		||||
                        <li><a class="dropdown-item" href="#" data-lang="th" onclick="event.preventDefault();setLanguage('th');">แบบไทย</a></li>
 | 
			
		||||
                    </ul>
 | 
			
		||||
                </li>
 | 
			
		||||
                <li class="nav-item dropdown">
 | 
			
		||||
                    <button class="nav-link dropdown-toggle displayname" data-bs-toggle="dropdown" aria-expanded="false"></button>
 | 
			
		||||
                    <ul class="dropdown-menu dropdown-menu-end">
 | 
			
		||||
                        <li><a class="dropdown-item" href="/webui/" onclick="logout();">Logout</a></li>
 | 
			
		||||
                    </ul>
 | 
			
		||||
            </div>
 | 
			
		||||
                </li>
 | 
			
		||||
            </ul>
 | 
			
		||||
        </div>
 | 
			
		||||
    </nav>
 | 
			
		||||
    <div class="container pt-3 pb-3" id="main-view">
 | 
			
		||||
 | 
			
		||||
@ -84,8 +84,25 @@ single.on("route_load", function (event) {
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
window.itemListPromise = new Promise(resolve => {
 | 
			
		||||
    const req = $.get("/custom/getItemLists");
 | 
			
		||||
function setActiveLanguage(lang) {
 | 
			
		||||
    window.lang = lang;
 | 
			
		||||
    const lang_name = document.querySelector("[data-lang=" + lang + "]").textContent;
 | 
			
		||||
    document.getElementById("active-lang-name").textContent = lang_name;
 | 
			
		||||
    document.querySelector("[data-lang].active").classList.remove("active");
 | 
			
		||||
    document.querySelector("[data-lang=" + lang + "]").classList.add("active");
 | 
			
		||||
}
 | 
			
		||||
setActiveLanguage(localStorage.getItem("lang") ?? "en");
 | 
			
		||||
 | 
			
		||||
function setLanguage(lang) {
 | 
			
		||||
    setActiveLanguage(lang);
 | 
			
		||||
    localStorage.setItem("lang", lang);
 | 
			
		||||
    fetchItemList();
 | 
			
		||||
    updateInventory();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function fetchItemList() {
 | 
			
		||||
    window.itemListPromise = new Promise(resolve => {
 | 
			
		||||
        const req = $.get("/custom/getItemLists?lang=" + lang);
 | 
			
		||||
        req.done(data => {
 | 
			
		||||
            window.archonCrystalUpgrades = data.archonCrystalUpgrades;
 | 
			
		||||
 | 
			
		||||
@ -129,7 +146,9 @@ window.itemListPromise = new Promise(resolve => {
 | 
			
		||||
            }
 | 
			
		||||
            resolve(itemMap);
 | 
			
		||||
        });
 | 
			
		||||
});
 | 
			
		||||
    });
 | 
			
		||||
}
 | 
			
		||||
fetchItemList();
 | 
			
		||||
 | 
			
		||||
function updateInventory() {
 | 
			
		||||
    const req = $.get("/api/inventory.php?" + window.authz + "&xpBasedLevelCapDisabled=1");
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user