summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--front/src/App.css11
-rw-r--r--front/src/App.tsx25
-rw-r--r--front/src/Emelents/Elements.css3
-rw-r--r--front/src/Emelents/IndexElement.tsx6
-rw-r--r--front/src/Emelents/Sidebar.tsx15
-rw-r--r--front/src/Emelents/Topbar.tsx21
-rw-r--r--front/src/Locales/Context.tsx5
-rw-r--r--front/src/Locales/Language.ts5
-rw-r--r--front/src/Locales/Locales.ts30
-rw-r--r--front/src/Locales/en_US.ts10
-rw-r--r--front/src/Locales/ru_RU.ts10
-rw-r--r--front/tsconfig.json3
12 files changed, 133 insertions, 11 deletions
diff --git a/front/src/App.css b/front/src/App.css
index a971f8e..5cbbeb8 100644
--- a/front/src/App.css
+++ b/front/src/App.css
@@ -8,3 +8,14 @@
.App > div {
padding: 10px;
}
+
+.AppContents > div {
+ padding-left: 10px;
+}
+
+.AppContents > div > h1 {
+ background-color: var(--colorscheme-black);
+ color: var(--colorscheme-white);
+ padding-left: 10px;
+ padding-right: 10px;
+}
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 0759d38..a685379 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -5,6 +5,8 @@ import { createBrowserRouter, RouterProvider } from 'react-router';
import IndexElement from './Emelents/IndexElement';
import ClassesList from './Emelents/ClassList';
import Topbar from './Emelents/Topbar';
+import { AllowedLanguages, LanguageContext } from './Locales/Context';
+import { useState } from 'react';
const router = createBrowserRouter([
{
@@ -18,14 +20,25 @@ const router = createBrowserRouter([
]);
function App() {
+ const [lang, setLang] = useState<AllowedLanguages>("en");
+
+ function SetLanguage(newLang: AllowedLanguages) {
+ console.log(`Setting a new language ${newLang}...`);
+ setLang(newLang);
+ }
+
return (
- <div className='App'>
- <Topbar />
- <div className='AppContents'>
- <Sidebar />
- <RouterProvider router={router} />
+ <LanguageContext.Provider value={lang}>
+ <div className='App'>
+ <Topbar />
+ <div className='AppContents'>
+ <Sidebar
+ setLang={SetLanguage}
+ />
+ <RouterProvider router={router} />
+ </div>
</div>
- </div>
+ </LanguageContext.Provider>
);
}
diff --git a/front/src/Emelents/Elements.css b/front/src/Emelents/Elements.css
index 8a50296..eb3c558 100644
--- a/front/src/Emelents/Elements.css
+++ b/front/src/Emelents/Elements.css
@@ -35,7 +35,7 @@
max-width: var(--width);
min-height: 30px;
padding: 5px;
- margin-top: 0px;
+ margin: 0px;
background-color: var(--colorscheme-black);
color: var(--colorscheme-white);
text-align: center;
@@ -48,6 +48,7 @@
background-color: var(--colorscheme-white);
color: var(--colorscheme-gray);
margin: 20px;
+ text-transform: uppercase;
}
.SidebarContents > h1 {
diff --git a/front/src/Emelents/IndexElement.tsx b/front/src/Emelents/IndexElement.tsx
index 4eda815..9914e89 100644
--- a/front/src/Emelents/IndexElement.tsx
+++ b/front/src/Emelents/IndexElement.tsx
@@ -1,7 +1,11 @@
+import { useState } from "react";
+import { GetString } from "../Locales/Locales";
+
function IndexElement() {
+ const [lang, setLang] = useState('en');
return (
<div>
- <h1> Index element </h1>
+ <h1> {GetString("index", lang)} </h1>
</div>
);
}
diff --git a/front/src/Emelents/Sidebar.tsx b/front/src/Emelents/Sidebar.tsx
index b138de6..4802e76 100644
--- a/front/src/Emelents/Sidebar.tsx
+++ b/front/src/Emelents/Sidebar.tsx
@@ -1,10 +1,21 @@
+import { useContext } from 'react';
+import { AllowedLanguages, LanguageContext } from '../Locales/Context';
+import { GetString } from '../Locales/Locales';
import './Elements.css';
-function Sidebar() {
+type SidebarProps = {
+ setLang: (newLang: AllowedLanguages) => void;
+};
+
+function Sidebar({setLang}: SidebarProps) {
+ var language = useContext(LanguageContext);
+
return (
<nav className='Sidebar'>
<div className='SidebarContents'>
- <h1> Contents </h1>
+ <button onClick={() => setLang("ru")}> ru </button>
+ <button onClick={() => setLang("en")}> en </button>
+ <h1> {GetString("contents", language)} </h1>
<ul>
</ul>
</div>
diff --git a/front/src/Emelents/Topbar.tsx b/front/src/Emelents/Topbar.tsx
index 6c4ef74..667b42f 100644
--- a/front/src/Emelents/Topbar.tsx
+++ b/front/src/Emelents/Topbar.tsx
@@ -1,12 +1,31 @@
+import { useContext } from "react";
+import { LanguageContext } from "../Locales/Context";
+import { GetString } from "../Locales/Locales";
+
+const defaultPathName = 'index';
+
function Topbar() {
+ var language = useContext(LanguageContext);
+ let path = getTopbarElement(window.location.pathname);
+
return (
<div className="Topbar">
<h1> View from the edge </h1>
<div className="TopbarContents">
- <h2> Lifepath </h2>
+ <h2> {GetString(path, language)} </h2>
</div>
</div>
);
}
+// Extracts the black part thing from the path
+function getTopbarElement(fullPath: string): string {
+ let path = fullPath.replace('/', '');
+ if (path.length === 0) {
+ path = defaultPathName;
+ }
+
+ return path.split('/')[0];
+}
+
export default Topbar;
diff --git a/front/src/Locales/Context.tsx b/front/src/Locales/Context.tsx
new file mode 100644
index 0000000..a15d57d
--- /dev/null
+++ b/front/src/Locales/Context.tsx
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+export type AllowedLanguages = "en" | "ru";
+
+export const LanguageContext = createContext<AllowedLanguages>("en");
diff --git a/front/src/Locales/Language.ts b/front/src/Locales/Language.ts
new file mode 100644
index 0000000..a96ee9f
--- /dev/null
+++ b/front/src/Locales/Language.ts
@@ -0,0 +1,5 @@
+class Language {
+ LocalizedStrings: Map<string, string>;
+}
+
+export default Language;
diff --git a/front/src/Locales/Locales.ts b/front/src/Locales/Locales.ts
new file mode 100644
index 0000000..af76045
--- /dev/null
+++ b/front/src/Locales/Locales.ts
@@ -0,0 +1,30 @@
+import { createContext } from 'vm';
+import { LanguageContext } from './Context';
+import en_us from './en_US';
+import Language from './Language';
+import ru_ru from './ru_RU';
+
+
+const defaultLocale: Language = en_us;
+
+const nameToLocale = new Map<string, Language>([
+ ['en', en_us],
+ ['ru', ru_ru],
+]);
+
+function getCurrentLocale(lang: string): Language {
+ const outp = nameToLocale.get(lang);
+ if (outp == undefined) return defaultLocale;
+ return outp;
+}
+
+export function GetString(query: string, lang: string): string {
+ const locale = getCurrentLocale(lang);
+ const found = locale.LocalizedStrings.get(query);
+ if (found == undefined) return defaultLocale.LocalizedStrings.get(query) || query;
+ return found;
+}
+
+export function SetLocale(locale: string, setLang: (x: string) => void) {
+ if (nameToLocale.has(locale)) setLang(locale);
+}
diff --git a/front/src/Locales/en_US.ts b/front/src/Locales/en_US.ts
new file mode 100644
index 0000000..f99d324
--- /dev/null
+++ b/front/src/Locales/en_US.ts
@@ -0,0 +1,10 @@
+import Language from "./Language";
+
+const lang = new Language();
+lang.LocalizedStrings = new Map<string, string>([
+ ["index", "index"],
+ ["classes", "classes"],
+ ["contents", "contents"],
+]);
+
+export default lang;
diff --git a/front/src/Locales/ru_RU.ts b/front/src/Locales/ru_RU.ts
new file mode 100644
index 0000000..fe1df70
--- /dev/null
+++ b/front/src/Locales/ru_RU.ts
@@ -0,0 +1,10 @@
+import Language from "./Language";
+
+const lang = new Language();
+lang.LocalizedStrings = new Map<string, string>([
+ ["index", "главная"],
+ ["classes", "классы"],
+ ["contents", "содержание"],
+]);
+
+export default lang;
diff --git a/front/tsconfig.json b/front/tsconfig.json
index a273b0c..cb8923e 100644
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@@ -1,6 +1,9 @@
{
"compilerOptions": {
"target": "es5",
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "strictPropertyInitialization": false,
"lib": [
"dom",
"dom.iterable",
Rendered by CGit