fs-words.git

[mod] client
Parent e9e3770
Christian Fraß

Christian Fraß commited on 2021-03-12 22:01:10
Zeige 13 geänderte Dateien mit 532 Einfügungen und 191 Löschungen.

client/source/conf.ts
Zeige Datei @ 409a0a2
... ... 
@@ -0,0 +1,42 @@
1 
+namespace folksprak.words.conf
2 
+{
3 
+
4 
+	/**
5 
+	 */
6 
+	var _data : any = undefined;
7 
+
8 
+
9 
+	/**
10 
+	 */
11 
+	export function setup() : Promise<void>
12 
+	{
13 
+		return (
14 
+			fetch('conf.json')
15 
+			.then(x => x.json())
16 
+			.then
17 
+			(
18 
+				data =>
19 
+				{
20 
+					_data = data;
21 
+					return Promise.resolve<void>(undefined);
22 
+				}
23 
+			)
24 
+		);
25 
+	}
26 
+
27 
+
28 
+	/**
29 
+	 */
30 
+	export function get(key : string) : any
31 
+	{
32 
+		if (_data === undefined)
33 
+		{
34 
+			throw (new Error('conf not loaded'));
35 
+		}
36 
+		else
37 
+		{
38 
+			return lib_object.path_read<any>(_data, key, null, 2);
39 
+		}
40 
+	}
41 
+
42 
+}
client/source/logic.js
Zeige Datei @ e9e3770
... ... 
@@ -1,114 +0,0 @@
1 
-async function api_query
2 
-(
3 
-	action_name,
4 
-	input
5 
-)
6 
-{
7 
-	const client = lib_comm.client_http_construct
8 
-	(
9 
-		{
10 
-			"protocol": "http",
11 
-			"host": "localhost",
12 
-			"port": 7777,
13 
-			"path": "/foo/bar",
14 
-		}
15 
-	);
16 
-	const message = JSON.stringify
17 
-	(
18 
-		{
19 
-			"action": action_name,
20 
-			"input": input,
21 
-		}
22 
-	);
23 
-	const answer = await lib_comm.client_http_send(client, message);
24 
-	if (! (answer.code === 200))
25 
-	{
26 
-		return Promise.reject("server side error");
27 
-	}
28 
-	else
29 
-	{
30 
-		const output = JSON.parse(answer.text);
31 
-		return Promise.resolve(output);
32 
-	}
33 
-}
34 
-
35 
-
36 
-/**
37 
- */
38 
-function main
39 
-(
40 
-)
41 
-{
42 
-	// tabify
43 
-	{
44 
-		for (let dom_tab of document.querySelectorAll(".tab"))
45 
-		{
46 
-			for (let dom_tab_select of dom_tab.querySelectorAll(".tab-select li"))
47 
-			{
48 
-				dom_tab_select.addEventListener
49 
-				(
50 
-					"click",
51 
-					(event) =>
52 
-					{
53 
-						const tab_name = dom_tab_select.getAttribute("rel");
54 
-						dom_tab.setAttribute("rel", tab_name);
55 
-					}
56 
-				);
57 
-			}
58 
-		}
59 
-	}
60 
-	// show
61 
-	{
62 
-		document.querySelector(".tab-content[rel=\"show\"] button").addEventListener
63 
-		(
64 
-			"click",
65 
-			async function ()
66 
-			{
67 
-				const concept_id = document.querySelector(".tab-content[rel=\"show\"] inupt").value;
68 
-				const result = await api_query
69 
-				(
70 
-					"show",
71 
-					{
72 
-						"concept_id": concept_id,
73 
-					}
74 
-				);
75 
-				let dom_result = document.querySelector("#show_result")
76 
-				dom_result.textContent = JSON.stringify(result, undefined, "  ");
77 
-			}
78 
-		);
79 
-	}
80 
-	// translate
81 
-	{
82 
-		document.querySelector(".tab-content[rel=\"translate\"] button").addEventListener
83 
-		(
84 
-			"click",
85 
-			async function ()
86 
-			{
87 
-				const language_from = document.querySelector(".tab-content[rel=\"translate\"] select[name=language_from]").value;
88 
-				const language_to = document.querySelector(".tab-content[rel=\"translate\"] select[name=language_to]").value;
89 
-				const token = document.querySelector(".tab-content[rel=\"translate\"] input[name=token]").value;
90 
-				const result = await api_query
91 
-				(
92 
-					"translate",
93 
-					{
94 
-						"language_from": language_from,
95 
-						"language_to": language_to,
96 
-						"token": token,
97 
-					}
98 
-				);
99 
-				const dom_ul = document.querySelector("#translate_result");
100 
-				dom_ul.textContent = "";
101 
-				for (const entry of result)
102 
-				{
103 
-					let dom_li = document.createElement("li");
104 
-					dom_li.textContent = (`[${entry.language_from}] ${entry.value_from} ~ [${entry.language_to}] ${entry.value_to}`);
105 
-					dom_ul.appendChild(dom_li);
106 
-				}
107 
-			}
108 
-		);
109 
-	}
110 
-}
111 
-
112 
-
113 
-document.addEventListener("DOMContentLoaded", function (event) {main();});
114 
-
client/source/main.html
Zeige Datei @ 409a0a2
... ... 
@@ -0,0 +1,14 @@
1 
+<!DOCTYPE HTML>
2 
+<html>
3 
+	<head>
4 
+		<meta charset="utf-8"/>
5 
+		<link rel="stylesheet" type="text/css" href="style.css"/>
6 
+		<script type="text/javascript" src="logic.js"></script>
7 
+		<script type="text/javascript">document.addEventListener("DOMContentLoaded", function (event) {folksprak.words.main();});</script>
8 
+	</head>
9 
+	<body>
10 
+		<div id="main">
11 
+		</div>
12 
+	</body>
13 
+</html>
14 
+
client/source/main.ts
Zeige Datei @ 409a0a2
... ... 
@@ -0,0 +1,15 @@
1 
+namespace folksprak.words
2 
+{
3 
+
4 
+	/**
5 
+	 */
6 
+	export function main() : void
7 
+	{
8 
+		Promise.resolve<void>(undefined)
9 
+			.then(() => folksprak.words.conf.setup())
10 
+			.then(() => folksprak.words.pages.setup())
11 
+			.then(() => {folksprak.words.pages.load('portal', {});})
12 
+		;
13 
+	}
14 
+
15 
+}
client/source/pages/page.ts
Zeige Datei @ 409a0a2
... ... 
@@ -0,0 +1,76 @@
1 
+namespace folksprak.words.pages
2 
+{
3 
+
4 
+	/**
5 
+	 */
6 
+	export abstract class class_page
7 
+	{
8 
+
9 
+		/**
10 
+		 */
11 
+		public abstract render
12 
+		(
13 
+		) : HTMLElement
14 
+		;
15 
+
16 
+	}
17 
+
18 
+
19 
+	/**
20 
+	 */
21 
+	var _pool : {[name : string] : ()=>class_page} = {};
22 
+
23 
+
24 
+	/**
25 
+	 */
26 
+	export function register
27 
+	(
28 
+		name : string,
29 
+		factory : ()=>class_page
30 
+	) : void
31 
+	{
32 
+		if (_pool.hasOwnProperty(name))
33 
+		{
34 
+			throw (new Error('page "' + name + '" already registered'));
35 
+		}
36 
+		else
37 
+		{
38 
+			_pool[name] = factory;
39 
+		}
40 
+	}
41 
+
42 
+
43 
+	/**
44 
+	 */
45 
+	export function load
46 
+	(
47 
+		name : string,
48 
+		parameters : any
49 
+	) : void
50 
+	{
51 
+		if (! _pool.hasOwnProperty(name))
52 
+		{
53 
+			throw (new Error('page "' + name + '" not found'));
54 
+		}
55 
+		else
56 
+		{
57 
+			const page : class_page = _pool[name]();
58 
+			let dom_target : HTMLElement = document.querySelector('#main');
59 
+			dom_target.textContent = '';
60 
+			dom_target.appendChild(page.render());
61 
+		}
62 
+	}
63 
+
64 
+
65 
+	/**
66 
+	 */
67 
+	export function setup
68 
+	(
69 
+	) : Promise<void>
70 
+	{
71 
+		register('portal', () => new class_page_portal());
72 
+		return Promise.resolve<void>(undefined);
73 
+	}
74 
+
75 
+}
76 
+
client/source/pages/portal/logic.ts
Zeige Datei @ 409a0a2
... ... 
@@ -0,0 +1,22 @@
1 
+namespace folksprak.words.pages
2 
+{
3 
+
4 
+	/**
5 
+	 */
6 
+	export class class_page_portal extends class_page
7 
+	{
8 
+
9 
+		/**
10 
+		 */
11 
+		public render
12 
+		(
13 
+		) : HTMLElement
14 
+		{
15 
+			let widget_translate : folksprak.words.widgets.class_widget_translate = new folksprak.words.widgets.class_widget_translate();
16 
+			return widget_translate.render();
17 
+		}
18 
+
19 
+	}
20 
+
21 
+}
22 
+
client/source/services/service.ts
Zeige Datei @ 409a0a2
... ... 
@@ -0,0 +1,74 @@
1 
+namespace folksprak.words.services
2 
+{
3 
+
4 
+	/**
5 
+	 */
6 
+	export function _abstract
7 
+	(
8 
+		action_name : string,
9 
+		input : any
10 
+	) : Promise<any>
11 
+	{
12 
+		return (
13 
+			fetch
14 
+			(
15 
+				lib_url.encode
16 
+				(
17 
+					{
18 
+						"protocol": "http",
19 
+						"host": folksprak.words.conf.get("server.host"),
20 
+						"port": folksprak.words.conf.get("server.port"),
21 
+						"path": folksprak.words.conf.get("server.path"),
22 
+					}
23 
+				),
24 
+				{
25 
+					"method": "POST",
26 
+					"headers":
27 
+					{
28 
+						"Content-Type": "application/json",
29 
+					},
30 
+					"body": lib_json.encode
31 
+					(
32 
+						{
33 
+							"action": action_name,
34 
+							"input": input,
35 
+						}
36 
+					),
37 
+				}
38 
+			)
39 
+			.then(x => x.json())
40 
+		);
41 
+	}
42 
+
43 
+
44 
+	/**
45 
+	 */
46 
+	export type type_translate = Array<
47 
+		{
48 
+			language_from : string;
49 
+			value_from : string;
50 
+			language_to : string;
51 
+			value_to : string;
52 
+		}
53 
+	>;
54 
+	export async function translate
55 
+	(
56 
+		language_from : string,
57 
+		language_to : string,
58 
+		token : string
59 
+	) : Promise<type_translate>
60 
+	{
61 
+		const result : any = await _abstract
62 
+		(
63 
+			'translate',
64 
+			{
65 
+				'language_from': language_from,
66 
+				'language_to': language_to,
67 
+				'token': token,
68 
+			}
69 
+		);
70 
+		return Promise.resolve<type_translate>(<type_translate>(result));
71 
+	}
72 
+
73 
+}
74 
+
client/source/structure.html
Zeige Datei @ e9e3770
... ... 
@@ -1,59 +0,0 @@
1 
-<!DOCTYPE HTML>
2 
-<html>
3 
-	<head>
4 
-		<meta charset="utf-8"/>
5 
-		<link rel="stylesheet" type="text/css" href="style.css"/>
6 
-		<script type="text/javascript" src="logic.js"></script>
7 
-	</head>
8 
-	<body>
9 
-		<div class="tab" rel="show">
10 
-			<div class="tab-select">
11 
-				<ul>
12 
-					<li rel="show">show</li>
13 
-					<li rel="translate">translate</li>
14 
-				</ul>
15 
-			</div>
16 
-			<div class="tab-content" rel="show">
17 
-				<input type="number"/>
18 
-				<button>query</button>
19 
-				<pre id="show_result">
20 
-				</pre>
21 
-			</div>
22 
-			<div class="tab-content" rel="translate">
23 
-				<select name="language_from">
24 
-					<option value="_">*</option>
25 
-					<option value="afr">afr</option>
26 
-					<option value="dan">dan</option>
27 
-					<option value="deu">deu</option>
28 
-					<option value="eng">eng</option>
29 
-					<option value="flk">flk</option>
30 
-					<option value="gem">gem</option>
31 
-					<option value="isl">isl</option>
32 
-					<option value="nld">nld</option>
33 
-					<option value="nob">nob</option>
34 
-					<option value="swe">swe</option>
35 
-					<option value="yid">yid</option>
36 
-				</select>
37 
-				<select name="language_to">
38 
-					<option value="_">*</option>
39 
-					<option value="afr">afr</option>
40 
-					<option value="dan">dan</option>
41 
-					<option value="deu">deu</option>
42 
-					<option value="eng">eng</option>
43 
-					<option value="flk">flk</option>
44 
-					<option value="gem">gem</option>
45 
-					<option value="isl">isl</option>
46 
-					<option value="nld">nld</option>
47 
-					<option value="nob">nob</option>
48 
-					<option value="swe">swe</option>
49 
-					<option value="yid">yid</option>
50 
-				</select>
51 
-				<input type="text" name="token"/>
52 
-				<button>query</button>
53 
-				<ul id="translate_result">
54 
-				</ul>
55 
-			</div>
56 
-		</div>
57 
-	</body>
58 
-</html>
59 
-
client/source/style.sass
Zeige Datei @ 409a0a2
... ... 
@@ -12,21 +12,3 @@ body
12 12 
 	color: hsl($hue, 0%, 93.875%);
13 13 
 }
14 14
15 
-
16 
-.tab-select > ul > li
17 
-{
18 
-	display: inline-block;
19 
-	margin: 8px;
20 
-	cursor: pointer;
21 
-}
22 
-
23 
-.tab[rel="show"] .tab-select li[rel="show"] {border-bottom: 2px solid black;}
24 
-.tab[rel="show"] .tab-select li[rel="translate"] {border-bottom: none;}
25 
-.tab[rel="translate"] .tab-select li[rel="show"] {border-bottom: none;}
26 
-.tab[rel="translate"] .tab-select li[rel="translate"] {border-bottom: 2px solid black;}
27 
-
28 
-.tab[rel="show"] .tab-content[rel="show"] {display: initial;}
29 
-.tab[rel="show"] .tab-content[rel="translate"] {display: none;}
30 
-.tab[rel="translate"] .tab-content[rel="show"] {display: none;}
31 
-.tab[rel="translate"] .tab-content[rel="translate"] {display: initial;}
32 
-
client/source/widgets/correlation/logic.ts
Zeige Datei @ 409a0a2
... ... 
@@ -0,0 +1,80 @@
1 
+namespace folksprak.words.widgets
2 
+{
3 
+
4 
+	/**
5 
+	 */
6 
+	export class class_widget_correlation extends class_widget
7 
+	{
8 
+
9 
+		/**
10 
+		 */
11 
+		private classes : Array<string>;
12 
+
13 
+
14 
+		/**
15 
+		 */
16 
+		private language_from : string;
17 
+
18 
+
19 
+		/**
20 
+		 */
21 
+		private expression_from : string;
22 
+
23 
+
24 
+		/**
25 
+		 */
26 
+		private language_to : string;
27 
+
28 
+
29 
+		/**
30 
+		 */
31 
+		private expression_to : string;
32 
+
33 
+
34 
+		/**
35 
+		 */
36 
+		public constructor
37 
+		(
38 
+			language_from : string,
39 
+			expression_from : string,
40 
+			language_to : string,
41 
+			expression_to : string,
42 
+			classes : Array<string> = []
43 
+		)
44 
+		{
45 
+			super();
46 
+			this.language_from = language_from;
47 
+			this.expression_from = expression_from;
48 
+			this.language_to = language_to;
49 
+			this.expression_to = expression_to;
50 
+			this.classes = classes;
51 
+		}
52 
+
53 
+
54 
+		/**
55 
+		 */
56 
+		public render() : HTMLElement
57 
+		{
58 
+			const dom_span : HTMLSpanElement = <HTMLSpanElement>(document.createElement('span'));
59 
+			dom_span.setAttribute
60 
+			(
61 
+				'class',
62 
+				['widget', 'widget-correlation'].concat(this.classes).join(' ')
63 
+			);
64 
+			dom_span.textContent = lib_string.coin
65 
+			(
66 
+				'[{{language_from}}] {{expression_from}} ~ [{{language_to}}] {{expression_to}}',
67 
+				{
68 
+					'language_from': this.language_from,
69 
+					'expression_from': this.expression_from,
70 
+					'language_to': this.language_to,
71 
+					'expression_to': this.expression_to,
72 
+				}
73 
+			);
74 
+			return dom_span;
75 
+		}
76 
+
77 
+	}
78 
+
79 
+}
80 
+
client/source/widgets/languagechooser/logic.ts
Zeige Datei @ 409a0a2
... ... 
@@ -0,0 +1,82 @@
1 
+namespace folksprak.words.widgets
2 
+{
3 
+
4 
+	export class class_widget_languagechooser extends class_widget
5 
+	{
6 
+
7 
+		/**
8 
+		 */
9 
+		private classes : Array<string>;
10 
+
11 
+
12 
+		/**
13 
+		 */
14 
+		private dom_select : HTMLSelectElement;
15 
+
16 
+
17 
+		/**
18 
+		 */
19 
+		public constructor(classes : Array<string> = [])
20 
+		{
21 
+			super();
22 
+			this.classes = classes;
23 
+			this.dom_select = undefined;
24 
+		}
25 
+
26 
+
27 
+		/**
28 
+		 */
29 
+		public render() : HTMLElement
30 
+		{
31 
+			const languages : Array<{value : string; label : string;}> =
32 
+			[
33 
+				{'value': '_', 'label': '*'},
34 
+				{'value': 'afr', 'label': 'afr'},
35 
+				{'value': 'dan', 'label': 'dan'},
36 
+				{'value': 'deu', 'label': 'deu'},
37 
+				{'value': 'eng', 'label': 'eng'},
38 
+				{'value': 'flk', 'label': 'flk'},
39 
+				{'value': 'gem', 'label': 'gem'},
40 
+				{'value': 'isl', 'label': 'isl'},
41 
+				{'value': 'nld', 'label': 'nld'},
42 
+				{'value': 'nob', 'label': 'nob'},
43 
+				{'value': 'swe', 'label': 'swe'},
44 
+				{'value': 'yid', 'label': 'yid'},
45 
+			];
46 
+			const dom_select : HTMLSelectElement = <HTMLSelectElement>(document.createElement('select'));
47 
+			dom_select.setAttribute
48 
+			(
49 
+				'class',
50 
+				['widget', 'widget-languagechooser'].concat(this.classes).join(' ')
51 
+			);
52 
+			for (const language of languages)
53 
+			{
54 
+				let dom_option : HTMLOptionElement = document.createElement('option');
55 
+				dom_option.setAttribute('value', language.value);
56 
+				dom_option.textContent = language.label;
57 
+				dom_select.appendChild(dom_option);
58 
+			}
59 
+			this.dom_select = dom_select;
60 
+			return dom_select;
61 
+		}
62 
+
63 
+
64 
+		/**
65 
+		 */
66 
+		public read() : string
67 
+		{
68 
+			return this.dom_select.value;
69 
+		}
70 
+
71 
+
72 
+		/**
73 
+		 */
74 
+		public write(language : string) : void
75 
+		{
76 
+			this.dom_select.value = language;
77 
+		}
78 
+
79 
+	}
80 
+
81 
+}
82 
+
client/source/widgets/translate/logic.ts
Zeige Datei @ 409a0a2
... ... 
@@ -0,0 +1,110 @@
1 
+namespace folksprak.words.widgets
2 
+{
3 
+
4 
+	/**
5 
+	 */
6 
+	export class class_widget_translate extends class_widget
7 
+	{
8 
+
9 
+		/**
10 
+		 */
11 
+		private classes : Array<string>;
12 
+
13 
+
14 
+		/**
15 
+		 */
16 
+		public constructor(classes : Array<string> = [])
17 
+		{
18 
+			super();
19 
+			this.classes = classes;
20 
+		}
21 
+
22 
+
23 
+		/**
24 
+		 */
25 
+		public render() : HTMLElement
26 
+		{
27 
+			let dom_div : HTMLDivElement = <HTMLDivElement>(document.createElement('div'));
28 
+			let widget_languagechooser_from : class_widget_languagechooser;
29 
+			let widget_languagechooser_to : class_widget_languagechooser;
30 
+			let dom_token : HTMLInputElement;
31 
+			let dom_query : HTMLButtonElement;
32 
+			// structure
33 
+			{
34 
+				dom_div.setAttribute
35 
+				(
36 
+					'class',
37 
+					['widget', 'widget-translate'].concat(this.classes).join(' ')
38 
+				);
39 
+				{
40 
+					widget_languagechooser_from = (new class_widget_languagechooser(['widget-translate-language_from']));
41 
+					dom_div.appendChild(widget_languagechooser_from.render());
42 
+				}
43 
+				{
44 
+					widget_languagechooser_to = (new class_widget_languagechooser(['widget-translate-language_to']));
45 
+					dom_div.appendChild(widget_languagechooser_to.render());
46 
+				}
47 
+				{
48 
+					dom_token = <HTMLInputElement>(document.createElement('input'));
49 
+					dom_token.setAttribute('class', 'widget-translate-token');
50 
+					dom_token.setAttribute('type', 'text');
51 
+					dom_div.appendChild(dom_token);
52 
+				}
53 
+				{
54 
+					dom_query = document.createElement('button');
55 
+					dom_query.setAttribute('class', 'widget-translate-query');
56 
+					dom_query.textContent = 'query';
57 
+					dom_div.appendChild(dom_query);
58 
+				}
59 
+				{
60 
+					let dom_ul : HTMLUListElement = <HTMLUListElement>(document.createElement('ul'));
61 
+					dom_ul.setAttribute('class', 'widget-translate-result');
62 
+					dom_div.appendChild(dom_ul);
63 
+				}
64 
+			}
65 
+			// presets
66 
+			{
67 
+				widget_languagechooser_from.write('eng');
68 
+				widget_languagechooser_to.write('flk');
69 
+			}
70 
+			// logic
71 
+			{
72 
+				dom_query.addEventListener
73 
+				(
74 
+					'click',
75 
+					async function ()
76 
+					{
77 
+						const language_from : string = widget_languagechooser_from.read();
78 
+						const language_to : string = widget_languagechooser_to.read();
79 
+						const token : string = dom_token.value;
80 
+						const result : folksprak.words.services.type_translate = await folksprak.words.services.translate
81 
+						(
82 
+							language_from,
83 
+							language_to,
84 
+							token
85 
+						);
86 
+						let dom_ul : HTMLElement = dom_div.querySelector('.widget-translate-result');
87 
+						dom_ul.textContent = '';
88 
+						for (const entry of result)
89 
+						{
90 
+							let dom_li : HTMLElement = document.createElement('li');
91 
+							let widget_correlation : class_widget_correlation = new class_widget_correlation
92 
+							(
93 
+								entry.language_from,
94 
+								entry.value_from,
95 
+								entry.language_to,
96 
+								entry.value_to,
97 
+							);
98 
+							dom_li.appendChild(widget_correlation.render());
99 
+							dom_ul.appendChild(dom_li);
100 
+						}
101 
+					}
102 
+				);
103 
+			}
104 
+			return dom_div;
105 
+		}
106 
+
107 
+	}
108 
+
109 
+}
110 
+
client/source/widgets/widget.ts
Zeige Datei @ 409a0a2
... ... 
@@ -0,0 +1,17 @@
1 
+namespace folksprak.words.widgets
2 
+{
3 
+
4 
+	/**
5 
+	 */
6 
+	export abstract class class_widget
7 
+	{
8 
+
9 
+		/**
10 
+		 */
11 
+		public abstract render() : HTMLElement
12 
+		;
13 
+
14 
+	}
15 
+
16 
+}
17 
+
0 18