chaos/VaultUI
1
0
Fork 0
Code Issues Activity

Add tsx syntax to SetLanguage.

Browse source
This commit is contained in:
Kitteh 2021-05-24 12:55:39 +01:00
parent 8a71f8fd0e
commit 2c87ceb24c
2 changed files with 55 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/pages/SetLanguage.ts
View file

@ -1,68 +0,0 @@
import { Form } from "../elements/Form";
import { Margin } from "../elements/Margin";
import { Page } from "../types/Page";
import { makeElement } from "z-makeelement";
import { reloadNavBar } from "../elements/NavBar";
import i18next from "i18next";
// @ts-ignore
import translations from "../translations/index.mjs";
const languageIDs = Object.getOwnPropertyNames(translations);
export class SetLanguagePage extends Page {
constructor() {
super();
}
async render(): Promise<void> {
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "select",
class: ["uk-select", "uk-form-width-large"],
attributes: {
name: "language",
},
children: languageIDs.map(function (languageID) {
return makeElement({
tag: "option",
text: i18next.getFixedT(languageID, null)("language_name"),
attributes: { value: languageID },
});
}),
}),
),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("set_language_btn"),
attributes: {
type: "submit",
},
}),
],
async (form: HTMLFormElement) => {
const formData = new FormData(form);
const language = formData.get("language") as string;
this.state.language = language;
const t = await i18next.changeLanguage(language);
this.state.pageDirection = t("language_direction");
reloadNavBar(this.router);
await this.router.changePage("HOME");
},
),
);
}
get name(): string {
return i18next.t("set_language_title");
}
}

55
src/pages/SetLanguage.tsx Normal file
View file

@ -0,0 +1,55 @@
// @ts-ignore
import translations from "../translations/index.mjs";
// ts-unignore
import { Form } from "../elements/ReactForm";
import { Margin } from "../elements/ReactMargin";
import { MarginInline } from "../elements/ReactMarginInline";
import { Page } from "../types/Page";
import { reloadNavBar } from "../elements/NavBar";
import { render } from "preact";
import i18next from "i18next";
const languageIDs = Object.getOwnPropertyNames(translations);
export class SetLanguagePage extends Page {
constructor() {
super();
}
async render(): Promise<void> {
render(
<Form onSubmit={(data) => this.onSubmit(data)}>
<Margin>
<select class="uk-select uk-form-width-large" name="language">
{languageIDs.map((languageID) => (
<option value={languageID}>
{i18next.getFixedT(languageID, null)("language_name")}
</option>
))}
</select>
</Margin>
<p class="uk-text-danger" id="errorText" />
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("set_language_btn")}
</button>
</MarginInline>
</Form>,
this.router.pageContentElement,
);
}
async onSubmit(data: FormData): Promise<void> {
const language = data.get("language") as string;
this.state.language = language;
const t = await i18next.changeLanguage(language);
this.state.pageDirection = t("language_direction");
reloadNavBar(this.router);
await this.router.changePage("HOME");
}
get name(): string {
return i18next.t("set_language_title");
}
}