feat(webui): language selector #593

Merged
Sainan merged 4 commits from langsel into main 2024-12-22 11:38:50 -08:00
4 changed files with 149 additions and 59 deletions

View File

@ -1,5 +1,5 @@
import { RequestHandler } from "express";
import { getEnglishString } from "@/src/services/itemDataService";
import { getDict, 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 = getDict(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,

View File

@ -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,40 @@ 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, dict: Record<string, string>): string => {
return dict[key] ?? key;
};

View File

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

View File

@ -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=" + window.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");