plus: antaa plus presmi

apps/ktb-static/script.js

@@ -7,12 +7,24 @@ document.addEventListener("alpine:init", () => {
 				{
 					lemma_name: "wiigel",
 					word_forms: [
-            { word_form_id: 1262, word_form: "wijgeu", lect: { name: "ArekaDareka" } },
+						{
-            { word_form_id: 1263, word_form: "wigl", lect: { name: "Anott" } },
+							word_form_id: 1262,
-            { word_form_id: 1264, word_form: "wijev", lect: { name: "Djin" } }
+							word_form: "wijgeu",
-          ]
+							lect: { name: "ArekaDareka" },
-        }
+						},
-      ]
+						{
+							word_form_id: 1263,
+							word_form: "wigl",
+							lect: { name: "Anott" },
+						},
+						{
+							word_form_id: 1264,
+							word_form: "wijev",
+							lect: { name: "Djin" },
+						},
+					],
+				},
+			],
 		},
 
 		prefs: {
@@ -23,79 +35,158 @@ document.addEventListener("alpine:init", () => {
 			colorSecondary: "#08e",
 			colorText: "#333",
 			colorTextSecondary: "#555",
-      spaceMd: 1.5,
-      shadowStrength: 0.1
 		},
 
-    updateCSSVariables() {
+		update_css_variables() {
-      document.documentElement.style.setProperty("--color-sidebar-bg", this.prefs.colorSidebarBg);
+			document.documentElement.style.setProperty(
-      document.documentElement.style.setProperty("--color-main-bg", this.prefs.colorMainBg);
+				"--color-sidebar-bg",
-      document.documentElement.style.setProperty("--color-card-bg", this.prefs.colorCardBg);
+				this.prefs.colorSidebarBg,
-      document.documentElement.style.setProperty("--color-primary", this.prefs.colorPrimary);
+			);
-      document.documentElement.style.setProperty("--color-secondary", this.prefs.colorSecondary);
+			document.documentElement.style.setProperty(
-      document.documentElement.style.setProperty("--color-text", this.prefs.colorText);
+				"--color-main-bg",
-      document.documentElement.style.setProperty("--color-text-secondary", this.prefs.colorTextSecondary);
+				this.prefs.colorMainBg,
-      document.documentElement.style.setProperty("--space-md", `${this.prefs.spaceMd}rem`);
+			);
-      document.documentElement.style.setProperty("--color-shadow", `rgba(0, 0, 0, ${this.prefs.shadowStrength})`);
+			document.documentElement.style.setProperty(
+				"--color-card-bg",
+				this.prefs.colorCardBg,
+			);
+			document.documentElement.style.setProperty(
+				"--color-primary",
+				this.prefs.colorPrimary,
+			);
+			document.documentElement.style.setProperty(
+				"--color-secondary",
+				this.prefs.colorSecondary,
+			);
+			document.documentElement.style.setProperty(
+				"--color-text",
+				this.prefs.colorText,
+			);
+			document.documentElement.style.setProperty(
+				"--color-text-secondary",
+				this.prefs.colorTextSecondary,
+			);
 		},
 
-    loadPreferences() {
+		load_preferences() {
 			const saved_prefs = localStorage.getItem("prefs");
 			if (saved_prefs) {
 				this.prefs = { ...this.prefs, ...JSON.parse(saved_prefs) };
-        this.updateCSSVariables();
+				this.update_css_variables();
 			}
 		},
 
-    savePreferences() {
+		save_preferences() {
 			localStorage.setItem("prefs", JSON.stringify(this.prefs));
-      this.updateCSSVariables();
+			this.update_css_variables();
 		},
     
-    async fetchAllTerms(searchTerm) {
+    async fetch_all_lects() {
       try {
-        const res = await axios.get('http://localhost:1225/search', {
+        const res = await axios.get("http://localhost:1225/lects");
-          params: { search_term: searchTerm }
+        console.log(JSON.stringify(res.data));
+        return res.data;
+      } catch (e) {
+        console.error(e);
+      }
+    },
+
+		async fetch_all_terms(search_term) {
+			try {
+				const res = await axios.get("http://localhost:1225/search", {
+					params: { search_term: search_term },
 				});
 				this.search_results = res.data;
-      } catch (e) { console.error(e); }
+			} catch (e) {
-    },
+				console.error(e);
-
-    async fetchOneLemmaDetail(lemma_name) {
-      try {
-        const res = await axios.get('http://localhost:1225/lemma-detail', {
-          params: { lemma_name }
-        });
-        return res.data.lemma_detail;
-      } catch (e) { console.error(e); }
-    },
-
-    async postDefinition(definition_id, definition_text, lemma_name) {
-      try {
-        const res = await axios.put('http://localhost:1225/definition', {
-          definition_id, definition_text, lemma_name
-        });
-        return res.data.lemma_detail;
-      } catch (e) { console.error(e); }
-    },
-
-    async postExample(example_id, example_text, lemma_name) {
-      try {
-        const res = await axios.put('http://localhost:1225/example', {
-          example_id, example_text, lemma_name
-        });
-        return res.data.lemma_detail;
-      } catch (e) { console.error(e); }
-    },
-
-    filterResults(searchTerm) {
-      if (!searchTerm) return this.search_results.results;
-      return this.search_results.results
-      .filter( //item.lemma_name.toLowerCase().includes(searchTerm.toLowerCase())
-        item => item.word_forms
-          .map(wf => wf.word_form.toLowerCase())
-          .join().includes(searchTerm.toLowerCase())
-      );
 			}
+		},
+
+		async fetch_one_lemma_detail(lemma_name) {
+			try {
+				const res = await axios.get(
+					"http://localhost:1225/lemma-detail",
+					{ params: { lemma_name } },
+				);
+				return res.data.lemma_detail;
+			} catch (e) {
+				console.error(e);
+			}
+		},
+
+		async put_definition(definition_id, definition_text, lemma_name) {
+			try {
+				const res = await axios.put(
+					"http://localhost:1225/definition",
+					{ definition_id, definition_text, lemma_name },
+				);
+				return res.data.lemma_detail;
+			} catch (e) {
+				console.error(e);
+			}
+		},
+
+		async put_example(example_id, example_text, lemma_name) {
+			try {
+				const res = await axios.put("http://localhost:1225/example", {
+					example_id,
+					example_text,
+					lemma_name,
+				});
+				return res.data.lemma_detail;
+			} catch (e) {
+				console.error(e);
+			}
+		},
+
+		async put_word_form_text(word_form_id, word_form_text) {
+			try {
+				const res = await axios.put("http://localhost:1225/word-form", {
+					word_form_id,
+					word_form_text,
+				});
+				return res.data.lemma_detail;
+			} catch (e) {
+				console.error(e);
+			}
+		},
+
+		async post_new_word_form(lemma_name, lect_name, word_form_text) {
+			try {
+				const res = await axios.post(
+					"http://localhost:1225/word-form",
+					{ lemma_name, lect_name, word_form_text },
+				);
+				return res.data.lemma_detail;
+			} catch (e) {
+				console.error(e);
+			}
+		},
+
+		async delete_word_form(word_form_id, word_form_text) {
+			if (
+				window.confirm(`Du keshite kofal ${word_form_text}.\nPravda?`)
+			) {
+				try {
+					const res = await axios.delete(
+						`http://localhost:1225/word-form/${word_form_id}`,
+					);
+					return res.data.lemma_detail;
+				} catch (e) {
+					console.error(e);
+				}
+			}
+		},
+
+		filter_results(search_term) {
+			if (!search_term) return this.search_results.results;
+			return this.search_results.results.filter(
+				(item) =>
+					item.word_forms
+						.map((wf) => wf.word_form.toLowerCase())
+						.join()
+						.includes(search_term.toLowerCase()),
+			);
+		},
 	});
 });

apps/ktb-static/search.html

@@ -12,11 +12,17 @@
 	<body>
 		<div
 			class="app-container"
+			@alpine:init="$store.dictionary.load_preferences()"
 			x-data="{ 
-				searchTerm: '',
+				search_term: '',
-				showPrefs: false
+				showPrefs: false,
+				lects: []
 			}"
-			@alpine:init="$store.dictionary.loadPreferences()">
+			x-init="$store.dictionary.fetch_all_lects().then((lects_response)=>{
+				if(!!lects_response.lects) {
+					lects = lects_response.lects;
+				}
+			});">
 			<aside class="sidebar">
 				<div class="preferences-pane">
 
@@ -34,65 +40,35 @@
 								<input
 									type="color"
 									x-model="$store.dictionary.prefs.colorSidebarBg"
-									@input="$store.dictionary.savePreferences()" />
+									@input="$store.dictionary.save_preferences()" />
 							</label>
 							<label>
 								Hinafarge fu glavna lehtia:
 								<input
 									type="color"
 									x-model="$store.dictionary.prefs.colorMainBg"
-									@input="$store.dictionary.savePreferences()" />
+									@input="$store.dictionary.save_preferences()" />
 							</label>
 							<label>
 								Hinafarge fu kofuga:
 								<input
 									type="color"
 									x-model="$store.dictionary.prefs.colorCardBg"
-									@input="$store.dictionary.savePreferences()" />
+									@input="$store.dictionary.save_preferences()" />
 							</label>
 							<label>
 								Viktifarge:
 								<input
 									type="color"
 									x-model="$store.dictionary.prefs.colorPrimary"
-									@input="$store.dictionary.savePreferences()" />
+									@input="$store.dictionary.save_preferences()" />
 							</label>
 							<label>
 								Nisvikti farge:
 								<input
 									type="color"
 									x-model="$store.dictionary.prefs.colorSecondary"
-									@input="$store.dictionary.savePreferences()" />
+									@input="$store.dictionary.save_preferences()" />
-							</label>
-						</div>
-
-						<div class="prefs-section">
-							<h3>Mellanluft</h3>
-							<label>
-								Card Gap:
-								<input
-									type="range"
-									x-model.number="$store.dictionary.prefs.spaceMd"
-									min="0.5"
-									max="3"
-									step="0.1"
-									@input="$store.dictionary.savePreferences()" />
-								<span
-									x-text="$store.dictionary.prefs.spaceMd + 'rem'"></span>
-							</label>
-						</div>
-
-						<div class="prefs-section">
-							<h3>Kurai</h3>
-							<label>
-								Shadow Strength:
-								<input
-									type="range"
-									x-model.number="$store.dictionary.prefs.shadowStrength"
-									min="0.1"
-									max="0.5"
-									step="0.05"
-									@input="$store.dictionary.savePreferences()" />
 							</label>
 						</div>
 					</div>
@@ -102,18 +78,18 @@
 			<main class="main-content">
 				<div class="search-bar">
 					<button
-						@click="$store.dictionary.fetchAllTerms(searchTerm)">
+						@click="$store.dictionary.fetch_all_terms(search_term)">
 						Zuha
 					</button>
 					<input
 						type="text"
-						x-model="searchTerm"
+						x-model="search_term"
-						@keydown.enter="$store.dictionary.fetchAllTerms(searchTerm)"
+						@keydown.enter="$store.dictionary.fetch_all_terms(search_term)"
 						placeholder="Tasta ko(tel) her..." />
 				</div>
 				<div class="cards-container">
 					<template
-						x-for="item in $store.dictionary.filterResults(searchTerm)"
+						x-for="item in $store.dictionary.filter_results(search_term)"
 						:key="item.lemma_name">
 						<div
 							class="card"
@@ -127,11 +103,30 @@
 								example_text: '',
 								definition_text: '',
 								lemma_detail: null,
+								async put_word_form_text(word_form_id, word_form_text){
+									$store.dictionary.put_word_form_text(word_form_id, word_form_text).then(()=>{
+										this.load_detail();
+									});
+								},
+								async post_new_word_form(lemma_name, lect_name, word_form_text){
+									$store.dictionary.post_new_word_form(lemma_name, lect_name, word_form_text).then(()=>{
+										this.load_detail();
+									});
+								},
+								async delete_word_form(word_form_id, word_form_text){
+									$store.dictionary.delete_word_form(word_form_id, word_form_text).then(()=>{
+										this.load_detail();
+									});
+								},
 								async put_definition(definition_id, definition_text){
-									$store.dictionary.postDefinition(definition_id, definition_text, this.lemma_detail?.lemma_name).then(await this.load_detail());
+									$store.dictionary.put_definition(definition_id, definition_text, this.lemma_detail?.lemma_name).then(()=>{
+										this.load_detail();
+									});
 								},
 								async put_example(example_id, example_text){
-									$store.dictionary.postExample(example_id, example_text, this.lemma_detail?.lemma_name).then(await this.load_detail());
+									$store.dictionary.put_example(example_id, example_text, this.lemma_detail?.lemma_name).then(()=>{
+										this.load_detail();
+									});
 								},
 								async toggle_expand() {
 									if(!this.lemma_detail){
@@ -150,7 +145,7 @@
 									this.expanded = !this.expanded;
 								},
 								async load_detail(){
-									this.lemma_detail = await $store.dictionary.fetchOneLemmaDetail(item.lemma_name);
+									this.lemma_detail = await $store.dictionary.fetch_one_lemma_detail(item.lemma_name);
 								}
 							}">
 							<h3 x-text="item.lemma_name"></h3>
@@ -171,33 +166,71 @@
 							</button>
 
 							<div x-show="expanded && lemma_detail">
+								<!-- wfs -->
 								<h4>Trofal</h4>
 								<table class="is-fullwidth">
 									<template
 										x-for="wf2 in (lemma_detail?.word_forms ?? [])">
-										<tr x-data="{editing:false}">
+										<tr x-data="{
+											editing:false,
+											edited_text: wf2.word_form
+										}">
 											<td style="width: 8em;"
 												x-text="wf2 ? wf2.lect.name : '(empty)'"></td>
 											<td>
 												<span x-text="wf2 ? wf2.word_form : '(empty)'" 
 												@click="editing = true"
-												x-show="!editing"
+												x-show="!editing"></span>
-												></span>
 			
 												<input 
 													type="text" 
 													class="is-fullwidth"
 													@click.outside="editing = false" 
 													x-show="editing" 
-													x-model="wf2.word_form">	
+													x-model="edited_text">
 											</td>
 											<td style="width: 5em;">
-												<button class="tiny hollow primary" x-show="!editing" @click="editing = true" title="kawari">~</button>
+												<button class="tiny hollow primary" x-show="!editing" title="kawari" 
-												<button class="tiny edit" x-show="editing" @click="editing = false" title="jame">/</button>
+													@click="editing = true" >~</button>
-												<button class="tiny" x-show="editing" @click="editing = false" title="antaa">></button>
+												<button class="tiny hollow delete" x-show="!editing" title="keshite" 
+													@click="await delete_word_form(wf2.word_form_id, wf2.word_form)" >x</button>
+												<button class="tiny edit" x-show="editing" title="jame" 
+													@click="editing = false">/</button>
+												<button class="tiny" x-show="editing" title="antaa"
+													@click="await put_word_form_text(wf2.word_form_id, edited_text); editing = false" >></button>
 											</td>
 										</tr>
 									</template>
+
+									<!-- Add new wf -->
+									<tr x-data="{
+										adding_word_form:false,
+										new_word_form_text:'',
+										selected_lect:''
+										}">
+									
+										<td colspan="3" x-show="!adding_word_form">
+											<button class="is-fullwidth hollow primary" 
+												@click="adding_word_form = !adding_word_form">+</button>
+										</td>
+									
+										<td x-show="adding_word_form">
+											<select name="vilgovor" x-model="selected_lect">
+												<template x-for="lect in lects">
+													<option :value="lect.name" x-text="lect.name"></option>
+												</template>
+											</select>
+										</td>
+										<td x-show="adding_word_form">
+											<input type="text" x-model="new_word_form_text">
+										</td>
+										<td x-show="adding_word_form">
+											<button class="tiny edit" x-show="adding_word_form" title="jame" @click="adding_word_form = false">/</button>
+											<button class="tiny" x-show="adding_word_form" title="antaa"
+												@click="await post_new_word_form(item.lemma_name, selected_lect, new_word_form_text); adding_word_form = false">></button>
+										</td>
+									
+									</tr>
 								</table>
 
 								<h4>Imi</h4>
@@ -210,9 +243,12 @@
 										}" @click.outside="editing = false">
 											<span x-show="!editing" x-text="def.definition_text" @click="editing = true"></span>
 											<input type="text" x-show="editing" x-model="edited_text">
-											<button class="float-right tiny hollow primary" x-show="!editing" @click="editing = true" title="kawari">~</button>
+											<button class="float-right tiny hollow primary" title="kawari" x-show="!editing" 
-											<button class="float-right tiny edit" x-show="editing" @click="editing = false" title="jame">/</button>
+												@click="editing = true">~</button>
-											<button class="float-right tiny primary" x-show="editing" type="button" @click="await put_definition(def.definition_id, edited_text); editing = false" title="antaa">></button>
+											<button class="float-right tiny edit" title="jame" x-show="editing" 
+												@click="editing = false">/</button>
+											<button class="float-right tiny primary" title="antaa" x-show="editing" 
+												@click="await put_definition(def.definition_id, edited_text); editing = false">></button>
 										</li>
 									</template>
 								</ul>

apps/ktb-static/styles.css

@@ -3,6 +3,7 @@
   --color-primary: #0bf;
   --color-secondary: #08e;
   --color-edit: #fb0;
+  --color-delete: #b10;
   --color-main-bg: #eee;
   --color-card-bg: #fff;
   --color-text: #333;
@@ -120,13 +121,21 @@ button:disabled{
 }
 
 .edit {
-  background-color: #fb0;
+  background-color: var(--color-edit);
 }
 
 .edit:hover {
   background-color: #bb0;
 }
 
+.delete {
+  background-color: var(--color-delete);
+}
+
+.delete:hover {
+  background-color: #f00;
+}
+
 .hollow {
   background-color: #00000000;
   border-style: solid;
@@ -135,7 +144,14 @@ button:disabled{
 
 .hollow.primary {
   border-color: var(--color-primary);
+}
 
+.hollow.edit {
+  border-color: var(--color-edit);
+}
+
+.hollow.delete {
+  border-color: var(--color-delete);
 }
 
 .primary:not(.hollow) {
@@ -188,6 +204,7 @@ button:disabled{
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
+  resize: horizontal;
 }
 
 .sidebar-header {

apps/vdb-backend/src/index.ts

@@ -105,6 +105,8 @@ function initExpress() {
 		res.status(200).send({ lemma_detail });
 	});
 
+	/* Definitions */
+
 	app.put("/definition", async (_req, res) => {
 		const definition_text = _req.body.definition_text?.toString();
 		const definition_id = _req.body.definition_id ?? null;
@@ -123,7 +125,7 @@ function initExpress() {
 			return void res.status(400).send();
 		}
 
-		var definition:Definition = new Definition();
+		let definition:Definition = new Definition();
 		definition.definition_text = definition_text;
 		definition.lemma = lemma;
 		if(definition_id){
@@ -132,7 +134,7 @@ function initExpress() {
 
 		Definition.save(definition)
 		
-		var lemma_detail = await Lemma.findOne({
+		let lemma_detail = await Lemma.findOne({
 			where: {
 				lemma_name: lemma_name
 			},
@@ -150,6 +152,8 @@ function initExpress() {
 		res.status(200).send({lemma_detail});
 	});
 
+	/* examples */
+
 	app.put("/example", async (_req, res) => {
 		const example_text = _req.body.example_text?.toString();
 		const example_id = _req.body.example_id ?? null;
@@ -195,6 +199,112 @@ function initExpress() {
 		res.status(200).send({lemma_detail});
 	});
 
+	/* word forms */
+
+	app.put("/word-form", async (_req, res) => {
+		const word_form_text = _req.body.word_form_text?.toString();
+		const word_form_id = _req.body.word_form_id ?? null;
+		const lemma_name = _req.body.lemma_name ?? null;
+
+		if(!word_form_text || /^\s*$/.test(word_form_text) || !word_form_id){
+			console.error(`Error: ${JSON.stringify({word_form_text:word_form_text, word_form_id:word_form_id})}`);
+			return void res.status(400).send();
+		}
+
+		let word_form = await WordForm.findOne({where:{
+			word_form_id: word_form_id
+		}, relations:{
+			lemma: true
+		}});
+
+		if(!word_form){
+			if(lemma_name){
+				word_form = new WordForm();
+				let lemma = await Lemma.findOne({where:{lemma_name}});
+			}
+			console.error(`Failed to find word form with ID ${word_form_id}`)
+			return void res.status(400).send();
+		} 
+
+
+		word_form.word_form = word_form_text;
+
+		WordForm.save(word_form);
+		
+		let lemma_detail = await Lemma.findOne({
+			where: {
+				lemma_name: word_form.lemma.lemma_name
+			},
+			relations: {
+				word_forms: {
+					lect: true
+				},
+				examples: true,
+				definitions: true,
+				media: true,
+				parts_of_speech: true
+			}
+		});
+
+		res.status(200).send({lemma_detail});
+	});
+
+	app.post("/word-form", async (_req, res) => {
+		const lemma_name = _req.body.lemma_name ?? null;
+		const lect_name = _req.body.lect_name ?? null;
+		const word_form_text = _req.body.word_form_text?.toString();
+
+		if(!word_form_text || /^\s*$/.test(word_form_text) || !lect_name || !lemma_name){
+			console.error(`Error: ${JSON.stringify(_req.body)}`);
+			return void res.status(400).send();
+		}
+
+		let word_form = new WordForm();
+		let lemma = await Lemma.findOne({where:{lemma_name}});
+		let lect = await Lect.findOne({where:{name:lect_name}});
+
+		if(!lect || !lemma){
+			console.error(`Error: ${JSON.stringify({lect:lect, lemma:lemma})}`);
+			return void res.status(400).send();
+		}
+
+		word_form.word_form = word_form_text;
+		word_form.lemma = lemma;
+		word_form.lect = lect;
+
+		WordForm.save(word_form);
+		
+		let lemma_detail = await Lemma.findOne({
+			where: {
+				lemma_name: word_form.lemma.lemma_name
+			},
+			relations: {
+				word_forms: {
+					lect: true
+				},
+				examples: true,
+				definitions: true,
+				media: true,
+				parts_of_speech: true
+			}
+		});
+
+		res.status(200).send({lemma_detail});
+	});
+	
+	app.delete("/word-form/:word_form_id", async (_req, res) =>{
+		const word_form_id:number = parseInt(_req.params.word_form_id); 
+
+		if(!word_form_id){
+			console.error(`Error: Could not find word form ${JSON.stringify({word_form_id:word_form_id})}`);
+			return void res.status(400).send();
+		}
+
+		WordForm.delete({word_form_id: word_form_id});
+
+		res.status(200).send();
+	});
+
 	app.listen(PORT, () => {
 		console.log(`Backend started @ http://localhost:${PORT} !`);
 		console.log(SAMPLE);