Use lang file in typescript

This commit is contained in:
Harvey Tindall
2021-01-15 14:43:31 +00:00
parent c470e40737
commit 422f13202b
13 changed files with 229 additions and 97 deletions
+14 -18
View File
@@ -100,10 +100,10 @@ class user implements User {
_post("/users/emails", send, (req: XMLHttpRequest) => {
if (req.readyState == 4) {
if (req.status == 200) {
window.notifications.customPositive("emailChanged", "Success:", `Changed email address of "${this.name}".`);
window.notifications.customSuccess("emailChanged", window.lang.var("notifications", "changedEmailAddress", `"${this.name}"`));
} else {
this.email = oldEmail;
window.notifications.customError("emailChanged", `Couldn't change email address of "${this.name}".`);
window.notifications.customError("emailChanged", window.lang.var("notifications", "errorChangedEmailAddress", `"${this.name}"`));
}
}
});
@@ -184,11 +184,9 @@ export class accountsList {
}
this._modifySettings.classList.remove("unfocused");
this._deleteUser.classList.remove("unfocused");
(this._checkCount == 1) ? this._deleteUser.textContent = "Delete User" : this._deleteUser.textContent = "Delete Users";
this._deleteUser.textContent = window.lang.quantity("deleteUser", this._checkCount);
}
}
private _genCountString = (): string => { return `${this._checkCount} user${(this._checkCount > 1) ? "s" : ""}`; }
private _collectUsers = (): string[] => {
let list: string[] = [];
@@ -208,7 +206,7 @@ export class accountsList {
};
for (let field in send) {
if (!send[field]) {
window.notifications.customError("addUserBlankField", "Fields were left blank.");
window.notifications.customError("addUserBlankField", window.lang.notif("errorBlankFields"));
return;
}
}
@@ -217,7 +215,7 @@ export class accountsList {
if (req.readyState == 4) {
toggleLoader(button);
if (req.status == 200) {
window.notifications.customPositive("addUser", "Success:", `user "${send['username']}" created.`);
window.notifications.customSuccess("addUser", window.lang.var("notifications", "userCreated", `"${send['username']}"`));
}
this.reload();
window.modals.addUser.close();
@@ -227,7 +225,7 @@ export class accountsList {
deleteUsers = () => {
const modalHeader = document.getElementById("header-delete-user");
modalHeader.textContent = this._genCountString();
modalHeader.textContent = window.lang.quantity("deleteNUsers", this._checkCount);
let list = this._collectUsers();
const form = document.getElementById("form-delete-user") as HTMLFormElement;
const button = form.querySelector("span.submit") as HTMLSpanElement;
@@ -247,13 +245,13 @@ export class accountsList {
toggleLoader(button);
window.modals.deleteUser.close();
if (req.status != 200 && req.status != 204) {
let errorMsg = "Failed (check console/logs).";
let errorMsg = window.lang.notif("errorFailureCheckLogs");
if (!("error" in req.response)) {
errorMsg = "Partial failure (check console/logs).";
errorMsg = window.lang.notif("errorPartialFailureCheckLogs");
}
window.notifications.customError("deleteUserError", errorMsg);
} else {
window.notifications.customPositive("deleteUserSuccess", "Success:", `deleted ${this._genCountString()}.`);
window.notifications.customSuccess("deleteUserSuccess", window.lang.quantity("deletedUser", this._checkCount));
}
this.reload();
}
@@ -264,7 +262,7 @@ export class accountsList {
modifyUsers = () => {
const modalHeader = document.getElementById("header-modify-user");
modalHeader.textContent = this._genCountString();
modalHeader.textContent = window.lang.quantity("modifySettingsFor", this._checkCount)
let list = this._collectUsers();
(() => {
let innerHTML = "";
@@ -310,18 +308,18 @@ export class accountsList {
const homescreen = Object.keys(response["homescreen"]).length;
const policy = Object.keys(response["policy"]).length;
if (homescreen != 0 && policy == 0) {
errorMsg = "Settings were applied, but applying homescreen layout may have failed.";
errorMsg = window.lang.notif("errorSettingsAppliedNoHomescreenLayout");
} else if (policy != 0 && homescreen == 0) {
errorMsg = "Homescreen layout was applied, but applying settings may have failed.";
errorMsg = window.lang.notif("errorHomescreenAppliedNoSettings");
} else if (policy != 0 && homescreen != 0) {
errorMsg = "Application failed.";
errorMsg = window.lang.notif("errorSettingsFailed");
}
} else if ("error" in response) {
errorMsg = response["error"];
}
window.notifications.customError("modifySettingsError", errorMsg);
} else if (req.status == 200 || req.status == 204) {
window.notifications.customPositive("modifySettingsSuccess", "Success:", `applied settings to ${this._genCountString()}.`);
window.notifications.customSuccess("modifySettingsSuccess", window.lang.quantity("appliedSettings", this._checkCount));
}
this.reload();
window.modals.modifyUser.close();
@@ -331,8 +329,6 @@ export class accountsList {
window.modals.modifyUser.show();
}
constructor() {
this._users = {};
this._selectAll.checked = false;
+7 -5
View File
@@ -60,7 +60,7 @@ export const _get = (url: string, data: Object, onreadystatechange: (req: XMLHtt
window.notifications.connectionError();
return;
} else if (req.status == 401) {
window.notifications.customError("401Error", "Unauthorized. Try logging back in.");
window.notifications.customError("401Error", window.lang.notif("error401Unauthorized"));
}
onreadystatechange(req);
};
@@ -80,7 +80,7 @@ export const _post = (url: string, data: Object, onreadystatechange: (req: XMLHt
window.notifications.connectionError();
return;
} else if (req.status == 401) {
window.notifications.customError("401Error", "Unauthorized. Try logging back in.");
window.notifications.customError("401Error", window.lang.notif("error401Unauthorized"));
}
onreadystatechange(req);
};
@@ -97,7 +97,7 @@ export function _delete(url: string, data: Object, onreadystatechange: (req: XML
window.notifications.connectionError();
return;
} else if (req.status == 401) {
window.notifications.customError("401Error", "Unauthorized. Try logging back in.");
window.notifications.customError("401Error", window.lang.notif("error401Unauthorized"));
}
onreadystatechange(req);
};
@@ -131,7 +131,7 @@ export class notificationBox implements NotificationBox {
private _error = (message: string): HTMLElement => {
const noti = document.createElement('aside');
noti.classList.add("aside", "~critical", "!normal", "mt-half", "notification-error");
noti.innerHTML = `<strong>Error:</strong> ${message}`;
noti.innerHTML = `<strong>${window.lang.strings("error")}:</strong> ${message}`;
const closeButton = document.createElement('span') as HTMLSpanElement;
closeButton.classList.add("button", "~critical", "!low", "ml-1");
closeButton.innerHTML = `<i class="icon ri-close-line"></i>`;
@@ -152,7 +152,7 @@ export class notificationBox implements NotificationBox {
return noti;
}
connectionError = () => { this.customError("connectionError", "Couldn't connect to jfa-go."); }
connectionError = () => { this.customError("connectionError", window.lang.notif("errorConnection")); }
customError = (type: string, message: string) => {
this._errorTypes[type] = this._errorTypes[type] || false;
@@ -179,6 +179,8 @@ export class notificationBox implements NotificationBox {
this._positiveTypes[type] = true;
setTimeout(() => { if (this._box.contains(noti)) { this._box.removeChild(noti); this._positiveTypes[type] = false; } }, this.timeout*1000);
}
customSuccess = (type: string, message: string) => this.customPositive(type, window.lang.strings("success") + ":", message)
}
export const whichAnimationEvent = () => {
+18 -18
View File
@@ -92,7 +92,7 @@ export class DOMInvite implements Invite {
this._usedBy = uB;
if (uB.length == 0) {
this._right.classList.add("empty");
this._userTable.innerHTML = `<p class="content">None yet!</p>`;
this._userTable.innerHTML = `<p class="content">${window.lang.strings("inviteNoUsersCreated")}</p>`;
return;
}
this._right.classList.remove("empty");
@@ -100,8 +100,8 @@ export class DOMInvite implements Invite {
<table class="table inv-table">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>${window.lang.strings("name")}</th>
<th>${window.lang.strings("date")}</th>
</tr>
</thead>
<tbody>
@@ -153,7 +153,7 @@ export class DOMInvite implements Invite {
} else {
selected = selected || select.value;
}
let innerHTML = `<option value="noProfile" ${noProfile ? "selected" : ""}>No Profile</option>`;
let innerHTML = `<option value="noProfile" ${noProfile ? "selected" : ""}>${window.lang.strings("inviteNoProfile")}</option>`;
for (let profile of window.availableProfiles) {
innerHTML += `<option value="${profile}" ${((profile == selected) && !noProfile) ? "selected" : ""}>${profile}</option>`;
}
@@ -221,7 +221,7 @@ export class DOMInvite implements Invite {
this._codeArea.classList.add("inv-codearea");
this._codeArea.innerHTML = `
<a class="invite-link code monospace mr-1" href=""></a>
<span class="button ~info !normal" title="Copy invite link"><i class="ri-file-copy-line"></i></span>
<span class="button ~info !normal" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
`;
const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement;
copyButton.onclick = () => {
@@ -248,7 +248,7 @@ export class DOMInvite implements Invite {
<span class="content sm"></span>
</div>
<span class="inv-expiry mr-1"></span>
<span class="button ~critical !normal inv-delete">Delete</span>
<span class="button ~critical !normal inv-delete">${window.lang.strings("delete")}</span>
<label>
<i class="icon clickable ri-arrow-down-s-line not-rotated"></i>
<input class="inv-toggle-details unfocused" type="checkbox">
@@ -271,23 +271,23 @@ export class DOMInvite implements Invite {
detailsInner.appendChild(this._left);
this._left.classList.add("inv-profilearea");
let innerHTML = `
<p class="supra mb-1 top">Profile</p>
<p class="supra mb-1 top">${window.lang.strings("profile")}</p>
<div class="select ~neutral !normal inv-profileselect inline-block">
<select>
<option value="noProfile" selected>No Profile</option>
<option value="noProfile" selected>${window.lang.strings("inviteNoProfile")}</option>
</select>
</div>
`;
if (window.notificationsEnabled) {
innerHTML += `
<p class="label supra">Notify on:</p>
<p class="label supra">${window.lang.strings("notifyEvent")}</p>
<label class="switch block">
<input class="inv-notify-expiry" type="checkbox">
<span>On expiry</span>
<span>${window.lang.strings("notifyInviteExpiry")}</span>
</label>
<label class="switch block">
<input class="inv-notify-creation" type="checkbox">
<span>On user creation</span>
<span>${window.lang.strings("notifyUserCreation")}</span>
</label>
`;
}
@@ -306,14 +306,14 @@ export class DOMInvite implements Invite {
detailsInner.appendChild(this._middle);
this._middle.classList.add("block");
this._middle.innerHTML = `
<p class="supra mb-1 top">Created <strong class="inv-created"></strong></p>
<p class="supra mb-1">Remaining uses <strong class="inv-remaining"></strong></p>
<p class="supra mb-1 top">${window.lang.strings("inviteDateCreated")} <strong class="inv-created"></strong></p>
<p class="supra mb-1">${window.lang.strings("inviteRemainingUses")} <strong class="inv-remaining"></strong></p>
`;
this._right = document.createElement('div') as HTMLDivElement;
detailsInner.appendChild(this._right);
this._right.classList.add("card", "~neutral", "!low", "inv-created-users");
this._right.innerHTML = `<strong class="supra table-header">Created users</strong>`;
this._right.innerHTML = `<strong class="supra table-header">${window.lang.strings("inviteUsersCreated")}</strong>`;
this._userTable = document.createElement('div') as HTMLDivElement;
this._right.appendChild(this._userTable);
@@ -376,7 +376,7 @@ export class inviteList implements inviteList {
<div class="inv inv-empty">
<div class="card ~neutral !normal inv-header flex-expand mt-half">
<div class="inv-codearea">
<span class="code monospace">None</span>
<span class="code monospace">${window.lang.strings("inviteNoInvites")}</span>
</div>
</div>
</div>
@@ -441,10 +441,10 @@ function parseInvite(invite: { [f: string]: string | number | string[][] | boole
time += `${invite[fields[i]]}${fields[i][0]} `;
}
}
parsed.expiresIn = `Expires in ${time.slice(0, -1)}`;
parsed.expiresIn = window.lang.var("strings", "inviteExpiresInTime", time.slice(0, -1));
parsed.remainingUses = invite["no-limit"] ? "∞" : String(invite["remaining-uses"])
parsed.usedBy = invite["used-by"] as string[][] || [];
parsed.created = invite["created"] as string || "Unknown";
parsed.created = invite["created"] as string || window.lang.strings("unknown");
parsed.profile = invite["profile"] as string || "";
parsed.notifyExpiry = invite["notify-expiry"] as boolean || false;
parsed.notifyCreation = invite["notify-creation"] as boolean || false;
@@ -566,7 +566,7 @@ export class createInvite {
}
loadProfiles = () => {
let innerHTML = `<option value="noProfile">No Profile</option>`;
let innerHTML = `<option value="noProfile">${window.lang.strings("inviteNoProfile")}</option>`;
for (let profile of window.availableProfiles) {
innerHTML += `<option value="${profile}">${profile}</option>`;
}
+52
View File
@@ -0,0 +1,52 @@
interface Meta {
name: string;
}
interface quantityString {
singular: string;
plural: string;
}
export interface LangFile {
meta: Meta;
strings: { [key: string]: string };
notifications: { [key: string]: string };
quantityStrings: { [key: string]: quantityString };
}
export class lang implements Lang {
private _lang: LangFile;
constructor(lang: LangFile) {
this._lang = lang;
}
get = (sect: string, key: string): string => {
if (sect == "quantityStrings" || sect == "meta") { return ""; }
return this._lang[sect][key];
}
strings = (key: string): string => this.get("strings", key)
notif = (key: string): string => this.get("notifications", key)
var = (sect: string, key: string, ...subs: string[]): string => {
if (sect == "quantityStrings" || sect == "meta") { return ""; }
let str = this._lang[sect][key];
for (let sub of subs) {
str = str.replace("{n}", sub);
}
return str;
}
quantity = (key: string, number: number): string => {
if (number == 1) {
return this._lang.quantityStrings[key].singular.replace("{n}", ""+number)
}
return this._lang.quantityStrings[key].plural.replace("{n}", ""+number);
}
}
+8 -8
View File
@@ -44,7 +44,7 @@ class profile implements Profile {
<td><input type="radio" name="profile-default"></td>
<td class="profile-from ellipsis"></td>
<td class="profile-libraries"></td>
<td><span class="button ~critical !normal">Delete</span></td>
<td><span class="button ~critical !normal">${window.lang.strings("delete")}</span></td>
`;
this._name = this._row.querySelector("b.profile-name");
this._adminChip = this._row.querySelector("span.profile-admin") as HTMLSpanElement;
@@ -71,7 +71,7 @@ class profile implements Profile {
if (req.status == 200 || req.status == 204) {
this.remove();
} else {
window.notifications.customError("profileDelete", `Failed to delete profile "${this.name}"`);
window.notifications.customError("profileDelete", window.lang.var("notifications", "errorDeleteProfile", `"${this.name}"`));
}
}
})
@@ -98,7 +98,7 @@ export class ProfileEditor {
get empty(): boolean { return (Object.keys(this._table.children).length == 0) }
set empty(state: boolean) {
if (state) {
this._table.innerHTML = `<tr><td class="empty">None</td></tr>`
this._table.innerHTML = `<tr><td class="empty">${window.lang.strings("inviteNoInvites")}</td></tr>`
} else if (this._table.querySelector("td.empty")) {
this._table.textContent = ``;
}
@@ -133,7 +133,7 @@ export class ProfileEditor {
this.default = resp.default_profile;
window.modals.profiles.show();
} else {
window.notifications.customError("profileEditor", "Failed to load profiles.");
window.notifications.customError("profileEditor", window.lang.notif("errorLoadProfiles"));
}
}
})
@@ -149,7 +149,7 @@ export class ProfileEditor {
this.default = newDefault;
} else {
this.default = prevDefault;
window.notifications.customError("profileDefault", "Failed to set default profile.");
window.notifications.customError("profileDefault", window.lang.notif("errorSetDefaultProfile"));
}
}
});
@@ -171,7 +171,7 @@ export class ProfileEditor {
window.modals.profiles.close();
window.modals.addProfile.show();
} else {
window.notifications.customError("loadUsers", "Failed to load users.");
window.notifications.customError("loadUsers", window.lang.notif("errorLoadUsers"));
}
}
});
@@ -191,9 +191,9 @@ export class ProfileEditor {
window.modals.addProfile.close();
if (req.status == 200 || req.status == 204) {
this.load();
window.notifications.customPositive("createProfile", "Success:", `created profile "${send['name']}"`);
window.notifications.customSuccess("createProfile", window.lang.var("notifications", "createProfile", `"${send['name']}"`));
} else {
window.notifications.customError("createProfile", `Failed to create profile "${send['name']}"`);
window.notifications.customError("createProfile", window.lang.var("notifications", "errorCreateProfile", `"${send['name']}"`));
}
window.modals.profiles.show();
}
+18 -13
View File
@@ -345,6 +345,17 @@ class DOMSelect implements SSelect {
if (this.requires_restart) { document.dispatchEvent(new CustomEvent("settings-requires-restart")); }
};
this._select.onchange = onValueChange;
const message = document.getElementById("settings-message") as HTMLElement;
message.innerHTML = window.lang.var("strings",
"settingsRequiredOrRestartMessage",
`<span class="badge ~critical">*</span>`,
`<span class="badge ~info">R</span>`
);
this.update(setting);
}
update = (s: SSelect) => {
@@ -501,9 +512,9 @@ export class settingsList {
private _send = (config: Object, run?: () => void) => _post("/config", config, (req: XMLHttpRequest) => {
if (req.readyState == 4) {
if (req.status == 200 || req.status == 204) {
window.notifications.customPositive("settingsSaved", "Success:", "settings were saved.");
window.notifications.customSuccess("settingsSaved", window.lang.notif("saveSettings"));
} else {
window.notifications.customError("settingsSaved", "Couldn't save settings.");
window.notifications.customError("settingsSaved", window.lang.notif("errorSaveSettings"));
}
this.reload();
if (run) { run(); }
@@ -526,7 +537,7 @@ export class settingsList {
reload = () => _get("/config", null, (req: XMLHttpRequest) => {
if (req.readyState == 4) {
if (req.status != 200) {
window.notifications.customError("settingsLoadError", "Failed to load settings.");
window.notifications.customError("settingsLoadError", window.lang.notif("errorLoadSettings"));
return;
}
let settings = req.response as Settings;
@@ -558,7 +569,7 @@ class ombiDefaults {
constructor() {
this._button = document.createElement("span") as HTMLSpanElement;
this._button.classList.add("button", "~neutral", "!low", "settings-section-button", "mb-half");
this._button.innerHTML = `<span class="flex">Ombi user defaults <i class="ri-link-unlink-m ml-half"></i></span>`;
this._button.innerHTML = `<span class="flex">${window.lang.strings("ombiUserDefaults")} <i class="ri-link-unlink-m ml-half"></i></span>`;
this._button.onclick = this.load;
this._form = document.getElementById("form-ombi-defaults") as HTMLFormElement;
this._form.onsubmit = this.send;
@@ -575,9 +586,9 @@ class ombiDefaults {
if (req.readyState == 4) {
toggleLoader(button);
if (req.status == 200 || req.status == 204) {
window.notifications.customPositive("ombiDefaults", "Success:", "stored ombi defaults.");
window.notifications.customSuccess("ombiDefaults", window.lang.notif("setOmbiDefaults"));
} else {
window.notifications.customError("ombiDefaults", "Failed to store ombi defaults.");
window.notifications.customError("ombiDefaults", window.lang.notif("errorSetOmbiDefaults"));
}
window.modals.ombiDefaults.close();
}
@@ -600,15 +611,9 @@ class ombiDefaults {
window.modals.ombiDefaults.show();
} else {
toggleLoader(this._button);
window.notifications.customError("ombiLoadError", "Failed to load ombi users.")
window.notifications.customError("ombiLoadError", window.lang.notif("errorLoadOmbiUsers"))
}
}
});
}
}