(wip) - stuff

apps/ktb-static/script.js

@@ -70,19 +70,19 @@ document.addEventListener("alpine:init", () => {
       } catch (e) { console.error(e); }
     },
 
-    async postDefinition(definition_text, lemma_name) {
+    async postDefinition(definition_id, definition_text, lemma_name) {
       try {
         const res = await axios.put('http://localhost:1225/definition', {
-          definition_text, lemma_name
+          definition_id, definition_text, lemma_name
         });
         return res.data.lemma_detail;
       } catch (e) { console.error(e); }
     },
 
-    async postExample(example_text, lemma_name) {
+    async postExample(example_id, example_text, lemma_name) {
       try {
         const res = await axios.put('http://localhost:1225/example', {
-          example_text, lemma_name
+          example_id, example_text, lemma_name
         });
         return res.data.lemma_detail;
       } catch (e) { console.error(e); }
@@ -90,8 +90,11 @@ document.addEventListener("alpine:init", () => {
 
     filterResults(searchTerm) {
       if (!searchTerm) return this.search_results.results;
-      return this.search_results.results.filter(item =>
+      return this.search_results.results
-        item.lemma_name.toLowerCase().includes(searchTerm.toLowerCase())
+      .filter( //item.lemma_name.toLowerCase().includes(searchTerm.toLowerCase())
+        item => item.word_forms
+          .map(wf => wf.word_form.toLowerCase())
+          .join().includes(searchTerm.toLowerCase())
       );
     }
   });

apps/ktb-static/search.html

@@ -19,10 +19,11 @@
 			@alpine:init="$store.dictionary.loadPreferences()">
 			<aside class="sidebar">
 				<div class="preferences-pane">
+
 					<button
 						@click="showPrefs = !showPrefs"
-						class="prefs-toggle">
+						class="prefs-toggle is-fullwidth">
-						Preferences
+						Sejenazma
 					</button>
 
 					<div class="prefs-content" x-show="showPrefs">
@@ -116,6 +117,7 @@
 						:key="item.lemma_name">
 						<div
 							class="card"
+							:class="expanded?'is-expanded':''"
 							@click.self="toggle_expand()"
 							x-data="{
 								expanded: false,
@@ -125,10 +127,16 @@
 								example_text: '',
 								definition_text: '',
 								lemma_detail: null,
+								async put_definition(definition_id, definition_text){
+									$store.dictionary.postDefinition(definition_id, definition_text, this.lemma_detail?.lemma_name).then(await 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());
+								},
 								async toggle_expand() {
 									if(!this.lemma_detail){
 										/* If there isn't a lemma detail loaded yet, get it then expand. */
-										this.lemma_detail = await $store.dictionary.fetchOneLemmaDetail(item.lemma_name);
+										await this.load_detail();
 							
 										if(this.lemma_detail) {
 											this.expanded = true;
@@ -141,12 +149,12 @@
 									/* If there is content, simply toggle the state of the card */
 									this.expanded = !this.expanded;
 								},
-								get_lemma_detail(){
+								async load_detail(){
-									return this.lemma_detail;
+									this.lemma_detail = await $store.dictionary.fetchOneLemmaDetail(item.lemma_name);
 								}
 							}">
 							<h3 x-text="item.lemma_name"></h3>
-							<p>
+							<p class="columned">
 								<template x-for="wf in item.word_forms">
 									<span
 										x-text="wf.word_form + ' '"
@@ -166,9 +174,9 @@
 								<h4>Trofal</h4>
 								<table class="is-fullwidth">
 									<template
-										x-for="wf2 in (get_lemma_detail()?.word_forms ?? [])">
+										x-for="wf2 in (lemma_detail?.word_forms ?? [])">
 										<tr x-data="{editing:false}">
-											<td
+											<td style="width: 8em;"
 												x-text="wf2 ? wf2.lect.name : '(empty)'"></td>
 											<td>
 												<span x-text="wf2 ? wf2.word_form : '(empty)'" 
@@ -176,11 +184,17 @@
 												x-show="!editing"
 												></span>
 			
-												<input type="text" x-show="editing" x-model="wf2.word_form">	
+												<input 
+													type="text" 
+													class="is-fullwidth"
+													@click.outside="editing = false" 
+													x-show="editing" 
+													x-model="wf2.word_form">	
 											</td>
-											<td>
+											<td style="width: 5em;">
-												<button class="float-left tight" x-show="!editing" @click="editing = true">~</button>
+												<button class="tiny hollow primary" x-show="!editing" @click="editing = true" title="kawari">~</button>
-												<button class="float-left tight" x-show="editing" @click="editing = false">-></button>
+												<button class="tiny edit" x-show="editing" @click="editing = false" title="jame">/</button>
+												<button class="tiny" x-show="editing" @click="editing = false" title="antaa">></button>
 											</td>
 										</tr>
 									</template>
@@ -188,15 +202,17 @@
 
 								<h4>Imi</h4>
 								<ul>
-									<template
+									<template x-for="def in (lemma_detail?.definitions ?? [])">
-										x-for="def in (get_lemma_detail()?.definitions ?? [])"
+										<li
 										x-data="{
-											editing:false
+											editing: false,
-										}">
+											edited_text: def.definition_text.toString()
-										<li><span x-show="!editing" x-text="def.definition_text"></span>
+										}" @click.outside="editing = false">
-											<button class="float-right tight edit" x-show="!editing" @click="editing = true">~</button>
+											<span x-show="!editing" x-text="def.definition_text" @click="editing = true"></span>
-											<button class="float-right tight" x-show="editing" @click="editing = false">-></button>
+											<input type="text" x-show="editing" x-model="edited_text">
-											<input type="text" x-show="editing" x-model="def.definition_text">
+											<button class="float-right tiny hollow primary" x-show="!editing" @click="editing = true" title="kawari">~</button>
+											<button class="float-right tiny edit" x-show="editing" @click="editing = false" title="jame">/</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>
 										</li>
 									</template>
 								</ul>
@@ -205,14 +221,28 @@
 									x-show="adding_definition"
 									placeholder="Tasta imi..."
 									x-model="definition_text"></textarea>
+								<div class="flex-row">
+									<button
+										class="edit"
+										x-show="adding_definition"
+										@click="adding_definition = false">
+										/
+									</button>
+									<button
+										class="align-self-right"
+										x-show="adding_definition"
+										type="button"
+										@click="put_definition(null, definition_text)
+											.then(()=>{
+												adding_definition = false; 
+												definition_text = '';
+										})">
+										Popoczta
+									</button>
+								</div>
+								
 								<button
-									class="is-fullwidth"
+									class="is-fullwidth hollow primary"
-									x-show="adding_definition"
-									@click="$store.dictionary.postDefinition(definition_text, get_lemma_detail()?.lemma_name)">
-									Popoczta
-								</button>
-								<button
-									class="is-fullwidth"
 									x-show="!adding_definition"
 									@click="adding_definition = !adding_definition">
 									+
@@ -220,14 +250,17 @@
 
 								<h4>Tatoeba</h4>
 								<ul>
-									<template
+									<template x-for="ex in (lemma_detail?.examples ?? [])">
-										x-for="ex in (get_lemma_detail()?.examples ?? [])"
+										<li x-data="{
-										x-data="{editing:false}">
+											editing:false,
-										<li>
+											edited_text: ex.example_text.toString()
-										<span x-show="!editing" x-text="ex.example_text"></span>
+										}"
-											<button class="float-right tight edit" x-show="!editing" @click="editing = true">~</button>
+										@click.outside="editing = false">
-											<button class="float-right tight" x-show="editing" @click="editing = false">-></button>
+											<span x-show="!editing" x-text="ex.example_text" @click="editing = true"></span>
-											<input type="text" x-show="editing" x-model="ex.example_text">
+											<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 edit" x-show="editing" @click="editing = false" title="jame">/</button>
+											<button class="float-right tiny" x-show="editing" type="button" @click="await put_example(ex.example_id, edited_text); editing = false" title="antaa">></button>
 										</li>
 									</template>
 								</ul>
@@ -239,11 +272,16 @@
 								<button
 									class="is-fullwidth"
 									x-show="adding_example"
-									@click="$store.dictionary.postExample(example_text, get_lemma_detail()?.lemma_name)">
+									type="button"
+									@click="put_example(null, example_text)
+									.then(()=>{
+										adding_example = false; 
+										example_text = '';
+									})">
 									Popoczta
 								</button>
 								<button
-									class="is-fullwidth"
+									class="is-fullwidth hollow primary"
 									x-show="!adding_example"
 									@click="adding_example = !adding_example">
 									+

apps/ktb-static/styles.css

@@ -25,10 +25,24 @@
   --shadow-lg: 0 4px 8px var(--color-shadow);
 }
 
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media (max-width: 600px) {
+  .cards-container {
+    grid-template-columns: 1fr;
+    background-color: #fb0;
+  }
+
+  .is-expanded {
+    grid-row: span 1;
+    grid-column: span 1;
+  }
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  transition: all 0.2s ease;
 }
 
 body {
@@ -39,10 +53,9 @@ body {
 }
 
 button {
-  border: solid 1px #fff;
+  border: solid 1px #000;
-  padding: var(--space-sm) var(--space-md);
+  padding: var(--space-xs) var(--space-md);
   cursor: pointer;
-  transition: background 0.2s ease;
   border-radius: var(--radius-sm);
   background: var(--color-primary);
   color: var(--color-text);
@@ -50,12 +63,23 @@ button {
 
 button:hover {
   background: var(--color-secondary);
+  color: #fff;
+}
+
+ul {
+  margin-bottom: var(--space-sm);
 }
 
 li {
+  margin-top: calc(var(--space-xs)/2);
+  margin-bottom: calc(var(--space-xs)/2);
   margin-left: var(--space-md);
 }
 
+table {
+  table-layout: fixed;
+}
+
 .float-right {
   float: right;
 }
@@ -64,11 +88,37 @@ li {
   float: left;
 }
 
+.align-self-right {
+  align-self: self-end;
+}
+
 .tight {
-  padding: 0 var(--space-md);
+  padding: 0 var(--space-sm);
   margin:  var(--space-xs);
 }
 
+button.tiny {
+  min-width: 2em;
+  max-width: 2em;
+  text-align: center;
+  padding: 0 var(--space-xs);
+  margin:  var(--space-xs);
+}
+
+button:disabled{
+  background-color: #555;
+  color: #fff;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.grow-fill {
+  flex-grow: 100;
+}
+
 .edit {
   background-color: #fb0;
 }
@@ -77,16 +127,37 @@ li {
   background-color: #bb0;
 }
 
+.hollow {
+  background-color: #00000000;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.hollow.primary {
+  border-color: var(--color-primary);
+  
+}
+
+.primary:not(.hollow) {
+  background-color: var(--color-primary);
+  color: #000
+}
+
 .dropdown {
   border-radius: 0px;
   border-style: none;
   border-top: solid 1px var(--color-text);
   padding: 0;
   cursor: pointer;
-  transition: background 0.2s ease;
+  transition: background 0.3s ease;
-  border-radius: var(--radius-sm);
   background-color: transparent;
   color: var(--color-text);
+  
+}
+
+.dropdown:hover {
+  background-color: var(--color-primary);
+  color: #000;
 }
 
 /* Main Content */
@@ -202,6 +273,10 @@ li {
   width: 100%;
 }
 
+.columned {
+  columns: 5em 2;
+}
+
 .card {
   align-self: start;
   background: var(--color-card-bg);
@@ -211,6 +286,11 @@ li {
   transition: transform 0.05s ease, box-shadow 0.2s ease;
 }
 
+.card.is-expanded {
+  grid-row: span 5;
+  grid-column: span 2;
+}
+
 .card:hover {
   outline: 1px solid var(--color-primary);
 }

apps/vdb-backend/src/db/dbmodel.ts

@@ -114,5 +114,5 @@ export class PartOfSpeech extends BaseEntity {
 	long_form: string;
 
 	@Column({ nullable: false, unique: true, type: "text" })
-short_form: string;
+	short_form: string;
 }

apps/vdb-backend/src/index.ts

@@ -107,6 +107,7 @@ function initExpress() {
 
 	app.put("/definition", async (_req, res) => {
 		const definition_text = _req.body.definition_text?.toString();
+		const definition_id = _req.body.definition_id ?? null;
 		const lemma_name = _req.body.lemma_name?.toString();
 
 		if(definition_text == null || lemma_name == null){
@@ -125,7 +126,9 @@ function initExpress() {
 		var definition:Definition = new Definition();
 		definition.definition_text = definition_text;
 		definition.lemma = lemma;
-		
+		if(definition_id){
+			definition.definition_id = definition_id;
+		}
 
 		Definition.save(definition)
 		
@@ -149,6 +152,7 @@ function initExpress() {
 
 	app.put("/example", async (_req, res) => {
 		const example_text = _req.body.example_text?.toString();
+		const example_id = _req.body.example_id ?? null;
 		const lemma_name = _req.body.lemma_name?.toString();
 
 		if(!example_text || !lemma_name){
@@ -166,6 +170,9 @@ function initExpress() {
 		var example:Example = new Example();
 		example.example_text = example_text;
 		example.lemma = lemma;
+		if(example_id){
+			example.example_id = example_id;
+		}
 		
 
 		Example.save(example)