niko/vi-ilo
1
0
Fork 0
Code Issues 3 Pull requests 1 Projects 1 Releases Packages Wiki Activity Actions

plus: antaa plus presmi

Browse source
This commit is contained in:
Sheldon Cooper 2026-07-19 02:10:47 -04:00 • committed by nikomiko
parent 17f6216e67
commit bf8538bbb9
4 changed files with 400 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

265
apps/ktb-static/script.js
View file

@ -1,101 +1,192 @@
// script.js
document.addEventListener("alpine:init", () => {
Alpine.store("dictionary", {
search_results: {
terms: 0,
results: [
{
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: 1264, word_form: "wijev", lect: { name: "Djin" } }
]
}
]
},
Alpine.store("dictionary", {
search_results: {
terms: 0,
results: [
{
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: 1264,
word_form: "wijev",
lect: { name: "Djin" },
},
],
},
],
},
prefs: {
colorSidebarBg: "#000",
colorMainBg: "#eee",
colorCardBg: "#fff",
colorPrimary: "#0bf",
colorSecondary: "#08e",
colorText: "#333",
colorTextSecondary: "#555",
spaceMd: 1.5,
shadowStrength: 0.1
},
prefs: {
colorSidebarBg: "#000",
colorMainBg: "#eee",
colorCardBg: "#fff",
colorPrimary: "#0bf",
colorSecondary: "#08e",
colorText: "#333",
colorTextSecondary: "#555",
},
updateCSSVariables() {
document.documentElement.style.setProperty("--color-sidebar-bg", this.prefs.colorSidebarBg);
document.documentElement.style.setProperty("--color-main-bg", this.prefs.colorMainBg);
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);
document.documentElement.style.setProperty("--space-md", `${this.prefs.spaceMd}rem`);
document.documentElement.style.setProperty("--color-shadow", `rgba(0, 0, 0, ${this.prefs.shadowStrength})`);
},
update_css_variables() {
document.documentElement.style.setProperty(
"--color-sidebar-bg",
this.prefs.colorSidebarBg,
);
document.documentElement.style.setProperty(
"--color-main-bg",
this.prefs.colorMainBg,
);
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() {
const saved_prefs = localStorage.getItem("prefs");
if (saved_prefs) {
this.prefs = { ...this.prefs, ...JSON.parse(saved_prefs) };
this.updateCSSVariables();
load_preferences() {
const saved_prefs = localStorage.getItem("prefs");
if (saved_prefs) {
this.prefs = { ...this.prefs, ...JSON.parse(saved_prefs) };
this.update_css_variables();
}
},
save_preferences() {
localStorage.setItem("prefs", JSON.stringify(this.prefs));
this.update_css_variables();
},
async fetch_all_lects() {
try {
const res = await axios.get("http://localhost:1225/lects");
console.log(JSON.stringify(res.data));
return res.data;
} catch (e) {
console.error(e);
}
},
savePreferences() {
localStorage.setItem("prefs", JSON.stringify(this.prefs));
this.updateCSSVariables();
},
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);
}
},
async fetchAllTerms(searchTerm) {
try {
const res = await axios.get('http://localhost:1225/search', {
params: { search_term: searchTerm }
});
this.search_results = res.data;
} catch (e) { console.error(e); }
},
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 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 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 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 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 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); }
},
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);
}
},
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 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()),
);
},
});
});

146
apps/ktb-static/search.html
View file

@ -12,11 +12,17 @@
<body>
<div
class="app-container"
@alpine:init="$store.dictionary.load_preferences()"
x-data="{
searchTerm: '',
showPrefs: false
search_term: '',
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()" />
</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()" />
@input="$store.dictionary.save_preferences()" />
</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"
@keydown.enter="$store.dictionary.fetchAllTerms(searchTerm)"
x-model="search_term"
@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"
></span>
x-show="!editing"></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 edit" x-show="editing" @click="editing = false" title="jame">/</button>
<button class="tiny" x-show="editing" @click="editing = false" title="antaa">></button>
<button class="tiny hollow primary" x-show="!editing" title="kawari"
@click="editing = true" >~</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 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>
<button class="float-right tiny hollow primary" title="kawari" x-show="!editing"
@click="editing = true">~</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>

21
apps/ktb-static/styles.css
View file

@ -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 {

114
apps/vdb-backend/src/index.ts
View file

@ -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);