feat(ktb): add new-lemma feature, fix some styling.
This commit is contained in:
Sheldon Cooper
parent
9cd6667e4a
commit
da7d75641d
5 changed files with 556 additions and 192 deletions
25
README.md
25
README.md
|
|
@ -1,28 +1,20 @@
|
|||
# Viossa.net
|
||||
# Viossa.net kotoba-tumam
|
||||
|
||||
bråtula viossa.net måde! We're here to build an informational website about Viossa.
|
||||
|
||||
## The Stack
|
||||
**What will we be using to build this site?**
|
||||
|
||||
### Core
|
||||
### Backend
|
||||
- [Node.js](https://nodejs.org/)
|
||||
- [TypeScript](https://www.typescriptlang.org/)
|
||||
- [pnpm](https://pnpm.io/)
|
||||
- [Turborepo](https://turborepo.com/)
|
||||
|
||||
### Frontend
|
||||
- [Vue 3](https://vuejs.org/)
|
||||
- [Vite](https://vite.dev/)
|
||||
- The ktb frontend is purely coded in HTML, CSS, and browser JS.
|
||||
- [AlpineJS](https://alpinejs.dev/)
|
||||
|
||||
Additionally, we will be following [**atomic design principles**](https://bradfrost.com/blog/post/atomic-web-design/) to organize the components of the project.
|
||||
|
||||
### Styling
|
||||
- [Bulma](https://bulma.io/)
|
||||
- [Tailwind CSS](https://tailwindcss.com/)
|
||||
- [Sass](https://sass-lang.com/)
|
||||
|
||||
### Backend
|
||||
- [Node.js](https://nodejs.org/)
|
||||
|
||||
### Linting
|
||||
- [Prettier](https://prettier.io/)
|
||||
|
|
@ -46,15 +38,12 @@ Additionally, we will be following [**atomic design principles**](https://bradfr
|
|||
This project uses Turborepo for task management/caching. Install Turborepo globally on your machine to allow for executing turbo commands more easily: `pnpm i -g turbo` (this is needed to continue with the instructions below)
|
||||
|
||||
### Frontend (Viossa.net)
|
||||
1. Ensure you're in the root directory of the project (`ViossaDotNet`)
|
||||
1. Move into the app's directory: `cd apps/vdn-static`
|
||||
1. To run the site, use `turbo dev`. This will set up watchers to build all libraries used by the frontend, as well as hot-refreshing the site as changes are made to it.
|
||||
1. To view the website running locally, visit http://localhost:1224/ in your browser!
|
||||
1. The frontend no longer requires a compilation step. Yippee!
|
||||
|
||||
### Backend (Viossa DB)
|
||||
1. Ensure you're in the root directory of the project (`ViossaDotNet`)
|
||||
1. Move into the app's directory: `cd apps/vdb-backend`
|
||||
1. To run the site, use `turbo start`. This will build all of the app's dependencies and then start the application.
|
||||
1. To run the API, use `turbo start`. This will build all of the app's dependencies and then start the application.
|
||||
1. **NOTE:** Backend apps are not watched/hot-refreshed like frontend apps! If you make changes, you must kill the app and re-run it to apply changes.
|
||||
1. To view a sample response from the backend API, visit http://localhost:1225/sample in your browser!
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// script.js
|
||||
let HOST = 'http://localhost:1225'
|
||||
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.store("dictionary", {
|
||||
search_results: {
|
||||
|
|
@ -83,7 +84,7 @@ document.addEventListener("alpine:init", () => {
|
|||
|
||||
async fetch_all_lects() {
|
||||
try {
|
||||
const res = await axios.get("http://localhost:1225/lects");
|
||||
const res = await axios.get(`${HOST}/lects`);
|
||||
return res.data;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
@ -92,7 +93,7 @@ document.addEventListener("alpine:init", () => {
|
|||
|
||||
async post_lect(lect_name) {
|
||||
try {
|
||||
const res = await axios.post("http://localhost:1225/lect", {
|
||||
const res = await axios.post(`${HOST}/lect`, {
|
||||
lect_name,
|
||||
});
|
||||
return res.data.lect;
|
||||
|
|
@ -103,7 +104,7 @@ document.addEventListener("alpine:init", () => {
|
|||
|
||||
async fetch_all_terms(search_term) {
|
||||
try {
|
||||
const res = await axios.get("http://localhost:1225/search", {
|
||||
const res = await axios.get(`${HOST}/search`, {
|
||||
params: { search_term: search_term },
|
||||
});
|
||||
this.search_results = res.data;
|
||||
|
|
@ -115,7 +116,7 @@ document.addEventListener("alpine:init", () => {
|
|||
async fetch_one_lemma_detail(lemma_name) {
|
||||
try {
|
||||
const res = await axios.get(
|
||||
"http://localhost:1225/lemma-detail",
|
||||
`${HOST}/lemma-detail`,
|
||||
{ params: { lemma_name } },
|
||||
);
|
||||
return res.data.lemma_detail;
|
||||
|
|
@ -127,7 +128,7 @@ document.addEventListener("alpine:init", () => {
|
|||
async put_definition(definition_id, definition_text, lemma_name) {
|
||||
try {
|
||||
const res = await axios.put(
|
||||
"http://localhost:1225/definition",
|
||||
`${HOST}/definition`,
|
||||
{ definition_id, definition_text, lemma_name },
|
||||
);
|
||||
return res.data.lemma_detail;
|
||||
|
|
@ -142,7 +143,7 @@ document.addEventListener("alpine:init", () => {
|
|||
) {
|
||||
try {
|
||||
const res = await axios.delete(
|
||||
`http://localhost:1225/definition/${definition_id}`,
|
||||
`${HOST}/definition/${definition_id}`,
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
@ -152,7 +153,7 @@ document.addEventListener("alpine:init", () => {
|
|||
|
||||
async put_example(example_id, example_text, lemma_name) {
|
||||
try {
|
||||
const res = await axios.put("http://localhost:1225/example", {
|
||||
const res = await axios.put(`${HOST}/example`, {
|
||||
example_id,
|
||||
example_text,
|
||||
lemma_name,
|
||||
|
|
@ -169,7 +170,7 @@ document.addEventListener("alpine:init", () => {
|
|||
) {
|
||||
try {
|
||||
const res = await axios.delete(
|
||||
`http://localhost:1225/example/${example_id}`,
|
||||
`${HOST}/example/${example_id}`,
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
@ -179,7 +180,7 @@ document.addEventListener("alpine:init", () => {
|
|||
|
||||
async put_word_form_text(word_form_id, word_form_text) {
|
||||
try {
|
||||
const res = await axios.put("http://localhost:1225/word-form", {
|
||||
const res = await axios.put(`${HOST}/word-form`, {
|
||||
word_form_id,
|
||||
word_form_text,
|
||||
});
|
||||
|
|
@ -198,7 +199,7 @@ document.addEventListener("alpine:init", () => {
|
|||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
"http://localhost:1225/word-form",
|
||||
`${HOST}/word-form`,
|
||||
{ lemma_name, lect_name, word_form_text },
|
||||
);
|
||||
return res.data.lemma_detail;
|
||||
|
|
@ -207,13 +208,26 @@ document.addEventListener("alpine:init", () => {
|
|||
}
|
||||
},
|
||||
|
||||
async post_lemma(lect_name, word_form_text){
|
||||
/* Accepts a new word form for a lemma and the corresponding lect, initializing with the provided form. */
|
||||
try {
|
||||
const res = await axios.post(
|
||||
`${HOST}/lemma`,
|
||||
{ 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}`,
|
||||
`${HOST}/word-form/${word_form_id}`,
|
||||
);
|
||||
return res.data.lemma_detail;
|
||||
} catch (e) {
|
||||
|
|
|
|||
|
|
@ -21,9 +21,48 @@
|
|||
lects: [],
|
||||
current_result_page: 0,
|
||||
results_per_page: 30,
|
||||
new_lemma_form_open: false,
|
||||
md(text){
|
||||
return $store.dictionary.md(text);
|
||||
},
|
||||
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.put_definition(definition_id, definition_text, this.lemma_detail?.lemma_name).then(()=>{
|
||||
this.load_detail();
|
||||
});
|
||||
},
|
||||
async delete_definition(definition_id, definition_text){
|
||||
$store.dictionary.delete_definition(definition_id, definition_text).then(()=>{
|
||||
this.load_detail();
|
||||
});
|
||||
},
|
||||
async put_example(example_id, example_text){
|
||||
$store.dictionary.put_example(example_id, example_text, this.lemma_detail?.lemma_name).then(()=>{
|
||||
this.load_detail();
|
||||
});
|
||||
},
|
||||
async post_lemma(lect_name, word_form_text){
|
||||
$store.dictionary.post_lemma(lect_name, word_form_text).then(lemma=>console.info(JSON.stringify(lemma)));
|
||||
},
|
||||
async delete_example(example_id, example_text){
|
||||
$store.dictionary.delete_example(example_id, example_text).then(()=>{
|
||||
this.load_detail();
|
||||
});
|
||||
},
|
||||
}"
|
||||
x-init="$store.dictionary.fetch_all_lects().then((lects_response)=>{
|
||||
if(!!lects_response.lects) {
|
||||
|
|
@ -32,7 +71,6 @@
|
|||
});">
|
||||
<aside class="sidebar">
|
||||
<div class="preferences-pane">
|
||||
|
||||
<button
|
||||
@click="showPrefs = !showPrefs"
|
||||
class="prefs-toggle is-fullwidth">
|
||||
|
|
@ -83,39 +121,53 @@
|
|||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="search-bar">
|
||||
<button
|
||||
@click="$store.dictionary.fetch_all_terms(search_term)">
|
||||
Zuha
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
x-model="search_term"
|
||||
@keydown.enter="$store.dictionary.fetch_all_terms(search_term)"
|
||||
placeholder="Tasta ko(tel) her..." />
|
||||
</div>
|
||||
<div class="flex-row"
|
||||
x-data="{
|
||||
page_count: 1,
|
||||
item_count: 0
|
||||
}"
|
||||
x-effect="current_result_page = Math.min(current_result_page, page_count-1); page_count = Math.ceil($store.dictionary.search_results.terms/results_per_page); item_count = $store.dictionary.search_results.terms;">
|
||||
<button
|
||||
class="hollow primary"
|
||||
x-show="item_count > results_per_page && current_result_page > 0"
|
||||
@click="current_result_page-=1"><strong>←</strong></button>
|
||||
<div x-text="`${current_result_page + 1} / ${page_count}`"></div>
|
||||
<button
|
||||
class="hollow primary"
|
||||
x-show="item_count > results_per_page && current_result_page+1 < page_count"
|
||||
@click="current_result_page+=1"><strong>→</strong></button>
|
||||
<select x-model="results_per_page">
|
||||
<option value="15">15</option>
|
||||
<option value="30">30</option>
|
||||
<option value="60">60</option>
|
||||
<option value="120">120</option>
|
||||
</select>
|
||||
<div class="top-bar sticky top">
|
||||
<div class="search-bar">
|
||||
<button
|
||||
@click="$store.dictionary.fetch_all_terms(search_term)">
|
||||
Zuha
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
x-model="search_term"
|
||||
@keydown.enter="$store.dictionary.fetch_all_terms(search_term)"
|
||||
placeholder="Tasta ko(tel) her..." />
|
||||
<button
|
||||
class="hollow primary"
|
||||
@click="new_lemma_form_open = true">
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="flex-row"
|
||||
x-data="{
|
||||
page_count: 1,
|
||||
item_count: 0
|
||||
}"
|
||||
x-effect="current_result_page = Math.min(current_result_page, page_count-1); page_count = Math.ceil($store.dictionary.search_results.terms/results_per_page); item_count = $store.dictionary.search_results.terms;">
|
||||
<button
|
||||
class="hollow primary"
|
||||
:disabled="!(item_count > results_per_page && current_result_page > 0)"
|
||||
@click="current_result_page-=1">
|
||||
<strong>←</strong>
|
||||
</button>
|
||||
<div
|
||||
x-text="`${current_result_page + 1} / ${page_count}`"></div>
|
||||
<button
|
||||
class="hollow primary"
|
||||
:disabled="!(item_count > results_per_page && current_result_page+1 < page_count)"
|
||||
@click="current_result_page+=1">
|
||||
<strong>→</strong>
|
||||
</button>
|
||||
<select x-model="results_per_page">
|
||||
<option value="15">15</option>
|
||||
<option value="30">30</option>
|
||||
<option value="60">60</option>
|
||||
<option value="120">120</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards-container">
|
||||
<template
|
||||
x-for="item in $store.dictionary.filter_results(search_term).slice(current_result_page*results_per_page, Math.min((current_result_page+1)*results_per_page, $store.dictionary.search_results.terms))"
|
||||
|
|
@ -132,41 +184,7 @@
|
|||
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.put_definition(definition_id, definition_text, this.lemma_detail?.lemma_name).then(()=>{
|
||||
this.load_detail();
|
||||
});
|
||||
},
|
||||
async delete_definition(definition_id, definition_text){
|
||||
$store.dictionary.delete_definition(definition_id, definition_text).then(()=>{
|
||||
this.load_detail();
|
||||
});
|
||||
},
|
||||
async put_example(example_id, example_text){
|
||||
$store.dictionary.put_example(example_id, example_text, this.lemma_detail?.lemma_name).then(()=>{
|
||||
this.load_detail();
|
||||
});
|
||||
},
|
||||
async delete_example(example_id, example_text){
|
||||
$store.dictionary.delete_example(example_id, example_text).then(()=>{
|
||||
this.load_detail();
|
||||
});
|
||||
},
|
||||
|
||||
async toggle_expand() {
|
||||
if(!this.lemma_detail){
|
||||
/* If there isn't a lemma detail loaded yet, get it then expand. */
|
||||
|
|
@ -209,80 +227,157 @@
|
|||
<h4>Trofal</h4>
|
||||
<table class="is-fullwidth">
|
||||
<tbody>
|
||||
<template
|
||||
x-for="wf2 in (lemma_detail?.word_forms ?? [])">
|
||||
<tr x-data="{
|
||||
<template
|
||||
x-for="wf2 in (lemma_detail?.word_forms ?? [])">
|
||||
<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>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
class="is-fullwidth"
|
||||
@click.outside="editing = false"
|
||||
x-show="editing"
|
||||
x-model="edited_text">
|
||||
</td>
|
||||
<td style="width: 5em;">
|
||||
<div class="float-right">
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<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>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
class="is-fullwidth"
|
||||
@click.outside="editing = false"
|
||||
x-show="editing"
|
||||
x-model="edited_text" />
|
||||
</td>
|
||||
<td style="width: 5em">
|
||||
<div class="float-right">
|
||||
<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)">
|
||||
×
|
||||
</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>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
|
||||
<!-- Add new wf -->
|
||||
<tfoot>
|
||||
<tr x-data="{
|
||||
<tr
|
||||
x-data="{
|
||||
adding_word_form:false,
|
||||
new_word_form_text:'',
|
||||
selected_lect:'',
|
||||
adding_lect:false,
|
||||
new_lect_name:''
|
||||
}">
|
||||
|
||||
<td colspan="3" x-show="!adding_word_form">
|
||||
<button class="is-fullwidth hollow primary"
|
||||
@click="adding_word_form = !adding_word_form">+</button>
|
||||
<td
|
||||
colspan="3"
|
||||
x-show="!adding_word_form">
|
||||
<button
|
||||
class="is-fullwidth hollow primary"
|
||||
@click="adding_word_form = !adding_word_form">
|
||||
+
|
||||
</button>
|
||||
</td>
|
||||
|
||||
<td colspan="3" x-show="adding_word_form" style="width: 12em;">
|
||||
<div style="display: flex; flex-direction: row; gap: 2em; justify-content: space-between;">
|
||||
|
||||
<td
|
||||
colspan="3"
|
||||
x-show="adding_word_form"
|
||||
style="width: 12em">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2em;
|
||||
justify-content: space-between;
|
||||
">
|
||||
<div>
|
||||
<select name="vilgovor" x-model="selected_lect" x-show="!adding_lect">
|
||||
<option value="" selected disabled hidden>Sentaku...</option>
|
||||
<template x-for="lect in lects">
|
||||
<option :value="lect.name" x-text="lect.name"></option>
|
||||
<select
|
||||
name="vilgovor"
|
||||
x-model="selected_lect"
|
||||
x-show="!adding_lect">
|
||||
<option
|
||||
value=""
|
||||
selected
|
||||
disabled
|
||||
hidden>
|
||||
Sentaku...
|
||||
</option>
|
||||
<template
|
||||
x-for="lect in lects">
|
||||
<option
|
||||
:value="lect.name"
|
||||
x-text="lect.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
<input type="text" x-show="adding_lect" x-model="new_lect_name">
|
||||
<button class="float-right tiny primary" x-show="!adding_lect" @click="adding_lect = true" title="neo govor">+</button>
|
||||
<button class="float-right tiny edit" x-show="adding_lect" title="jame" @click="adding_lect = false">/</button>
|
||||
<input
|
||||
type="text"
|
||||
x-show="adding_lect"
|
||||
x-model="new_lect_name" />
|
||||
<button
|
||||
class="float-right tiny primary"
|
||||
x-show="!adding_lect"
|
||||
@click="adding_lect = true"
|
||||
title="neo govor">
|
||||
+
|
||||
</button>
|
||||
<button
|
||||
class="float-right tiny edit"
|
||||
x-show="adding_lect"
|
||||
title="jame"
|
||||
@click="adding_lect = false">
|
||||
/
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" x-model="new_word_form_text">
|
||||
<input
|
||||
type="text"
|
||||
x-model="new_word_form_text" />
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<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, adding_lect ? new_lect_name : selected_lect, new_word_form_text); adding_word_form = false">></button>
|
||||
<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"
|
||||
:disabled="!(selected_lect || new_lect_name)"
|
||||
@click="await post_new_word_form(item.lemma_name, adding_lect ? new_lect_name : selected_lect, new_word_form_text); adding_word_form = false">
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
|
@ -290,23 +385,51 @@
|
|||
|
||||
<h4>Imi</h4>
|
||||
<ul>
|
||||
<template x-for="def in (lemma_detail?.definitions ?? [])">
|
||||
<template
|
||||
x-for="def in (lemma_detail?.definitions ?? [])">
|
||||
<li
|
||||
x-data="{
|
||||
x-data="{
|
||||
editing: false,
|
||||
edited_text: def.definition_text.toString()
|
||||
}" @click.outside="editing = false">
|
||||
<span x-show="!editing" x-html="md(def.definition_text)" @click="editing = true"></span>
|
||||
<input type="text" x-show="editing" x-model="edited_text">
|
||||
}"
|
||||
@click.outside="editing = false">
|
||||
<span
|
||||
x-show="!editing"
|
||||
x-html="md(def.definition_text)"
|
||||
@click="editing = true"></span>
|
||||
<input
|
||||
type="text"
|
||||
x-show="editing"
|
||||
x-model="edited_text" />
|
||||
<div class="float-right">
|
||||
<button class="tiny hollow primary" title="kawari" x-show="!editing"
|
||||
@click="editing = true">~</button>
|
||||
<button class="tiny edit" title="jame" x-show="editing"
|
||||
@click="editing = false">/</button>
|
||||
<button class="tiny primary" title="antaa" x-show="editing"
|
||||
@click="await put_definition(def.definition_id, edited_text); editing = false">></button>
|
||||
<button class="tiny hollow delete" x-show="!editing" title="keshite"
|
||||
@click="await delete_definition(def.definition_id, def.definition_text)" >x</button>
|
||||
<button
|
||||
class="tiny hollow primary"
|
||||
title="kawari"
|
||||
x-show="!editing"
|
||||
@click="editing = true">
|
||||
~
|
||||
</button>
|
||||
<button
|
||||
class="tiny edit"
|
||||
title="jame"
|
||||
x-show="editing"
|
||||
@click="editing = false">
|
||||
/
|
||||
</button>
|
||||
<button
|
||||
class="tiny primary"
|
||||
title="antaa"
|
||||
x-show="editing"
|
||||
@click="await put_definition(def.definition_id, edited_text); editing = false">
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class="tiny hollow delete"
|
||||
x-show="!editing"
|
||||
title="keshite"
|
||||
@click="await delete_definition(def.definition_id, def.definition_text)">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
|
@ -334,7 +457,7 @@
|
|||
Popoczta
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<button
|
||||
class="is-fullwidth hollow primary"
|
||||
x-show="!adding_definition"
|
||||
|
|
@ -344,23 +467,52 @@
|
|||
|
||||
<h4>Tatoeba</h4>
|
||||
<ul>
|
||||
<template x-for="ex in (lemma_detail?.examples ?? [])">
|
||||
<li x-data="{
|
||||
<template
|
||||
x-for="ex in (lemma_detail?.examples ?? [])">
|
||||
<li
|
||||
x-data="{
|
||||
editing:false,
|
||||
edited_text: ex.example_text.toString()
|
||||
}"
|
||||
@click.outside="editing = false">
|
||||
<span x-show="!editing" x-html="md(ex.example_text)" @click="editing = true"></span>
|
||||
<input type="text" x-show="editing" x-model="edited_text">
|
||||
@click.outside="editing = false">
|
||||
<span
|
||||
x-show="!editing"
|
||||
x-html="md(ex.example_text)"
|
||||
@click="editing = true"></span>
|
||||
<input
|
||||
type="text"
|
||||
x-show="editing"
|
||||
x-model="edited_text" />
|
||||
<div class="float-right">
|
||||
<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" type="button"
|
||||
@click="await put_example(ex.example_id, edited_text); editing = false" title="antaa">></button>
|
||||
<button class="tiny hollow delete" x-show="!editing" title="keshite"
|
||||
@click="await delete_example(ex.example_id, ex.example_text)">x</button>
|
||||
<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"
|
||||
type="button"
|
||||
@click="await put_example(ex.example_id, edited_text); editing = false"
|
||||
title="antaa">
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class="tiny hollow delete"
|
||||
x-show="!editing"
|
||||
title="keshite"
|
||||
@click="await delete_example(ex.example_id, ex.example_text)">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
|
@ -397,6 +549,89 @@
|
|||
</template>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div
|
||||
x-show="new_lemma_form_open"
|
||||
class="modal"
|
||||
x-data="{
|
||||
adding_word_form:false,
|
||||
adding_lect:false,
|
||||
new_word_form_text:'',
|
||||
selected_lect:'',
|
||||
new_lect_name:''
|
||||
}"
|
||||
@click.self="new_lemma_form_open = false;">
|
||||
<div class="card">
|
||||
<h3>Neo kotoba...</h3>
|
||||
<div class="flex-row">
|
||||
<div>
|
||||
<label>
|
||||
<div>Viljena govor</div>
|
||||
<div>
|
||||
<select
|
||||
name="vilgovor"
|
||||
x-model="selected_lect"
|
||||
x-show="!adding_lect">
|
||||
<option
|
||||
value=""
|
||||
selected
|
||||
disabled
|
||||
hidden>
|
||||
Sentaku...
|
||||
</option>
|
||||
<template x-for="lect in lects">
|
||||
<option
|
||||
:value="lect.name"
|
||||
x-text="lect.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
x-show="adding_lect"
|
||||
x-model="new_lect_name" />
|
||||
<button
|
||||
class="float-right tiny primary"
|
||||
x-show="!adding_lect"
|
||||
@click="adding_lect = true"
|
||||
title="neo govor">
|
||||
+
|
||||
</button>
|
||||
<button
|
||||
class="float-right tiny edit"
|
||||
x-show="adding_lect"
|
||||
title="jame"
|
||||
@click="adding_lect = false">
|
||||
/
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<div>Kakufal</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
x-model="new_word_form_text" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div style="margin-top: var(--space-sm)">
|
||||
<button
|
||||
class="edit"
|
||||
@click="new_lemma_form_open = false">
|
||||
/
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="post_lemma(new_lect_name?new_lect_name:selected_lect, new_word_form_text)
|
||||
.then(()=>{
|
||||
new_lemma_form_open = false;
|
||||
})">
|
||||
Popoczta
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -102,6 +102,49 @@ tfoot {
|
|||
margin: var(--space-xs);
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.modal {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
background-color: #000000aa;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal .card {
|
||||
max-width: 480px;
|
||||
margin: auto;
|
||||
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
padding: var(--space-sm);
|
||||
border: 1px solid var(--color-text-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: var(--color-card-bg);
|
||||
}
|
||||
|
||||
button.tiny {
|
||||
min-width: 2em;
|
||||
max-width: 2em;
|
||||
|
|
@ -111,8 +154,10 @@ button.tiny {
|
|||
}
|
||||
|
||||
button:disabled{
|
||||
background-color: #555;
|
||||
background-color: #aaa;
|
||||
color: #fff;
|
||||
border-color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
|
|
@ -130,7 +175,7 @@ button:disabled{
|
|||
}
|
||||
|
||||
.edit:hover {
|
||||
background-color: #bb0;
|
||||
background-color: rgb(187, 159, 0);
|
||||
}
|
||||
|
||||
.delete {
|
||||
|
|
@ -262,10 +307,15 @@ button:disabled{
|
|||
}
|
||||
|
||||
/* Search Bar */
|
||||
|
||||
.search-bar {
|
||||
margin: var(--space-sm);
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
width: 16rem;
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 1rem;
|
||||
|
|
|
|||
|
|
@ -27,18 +27,14 @@ function initExpress() {
|
|||
const app = express();
|
||||
const PORT = 1225;
|
||||
|
||||
const lect_repository = appDataSource.getRepository(Lect);
|
||||
const word_form_repository = appDataSource.getRepository(WordForm);
|
||||
const lemma_repository = appDataSource.getRepository(Lemma);
|
||||
|
||||
app.use(cors(), express.json());
|
||||
|
||||
app.get("/sample", (_req, res) => {
|
||||
res.status(200).send(SAMPLE);
|
||||
});
|
||||
|
||||
app.get("/search", async (req, res) => {
|
||||
const search_term = req.query.search_term?.toString();
|
||||
app.get("/search", async (_req, res) => {
|
||||
const search_term = _req.query.search_term?.toString();
|
||||
|
||||
let word_forms: WordForm[];
|
||||
let lemmas: Lemma[];
|
||||
|
|
@ -64,8 +60,8 @@ function initExpress() {
|
|||
res.status(200).send({ terms: lemmas.length, results: lemmas });
|
||||
});
|
||||
|
||||
app.get("/lect", async (req, res) => {
|
||||
const name = req.query.name?.toString();
|
||||
app.get("/lect", async (_req, res) => {
|
||||
const name = _req.query.name?.toString();
|
||||
|
||||
if (!name) {
|
||||
return void res.sendStatus(400);
|
||||
|
|
@ -79,8 +75,8 @@ function initExpress() {
|
|||
res.status(200).send({ lect });
|
||||
});
|
||||
|
||||
app.post("/lect", (req, res) => {
|
||||
const lect_name = req.query.lect_name?.toString();
|
||||
app.post("/lect", (_req, res) => {
|
||||
const lect_name = _req.query.lect_name?.toString();
|
||||
|
||||
if (!lect_name) {
|
||||
return void res.sendStatus(400);
|
||||
|
|
@ -120,7 +116,74 @@ function initExpress() {
|
|||
res.status(200).send({ lemma_detail });
|
||||
});
|
||||
|
||||
/* Definitions */
|
||||
app.post("/lemma", async (_req, res) => {
|
||||
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){
|
||||
console.error(`Error: ${JSON.stringify(_req.body)}`);
|
||||
return void res.status(400).send();
|
||||
}
|
||||
|
||||
let word_form = new WordForm();
|
||||
let lemma = new Lemma();
|
||||
|
||||
let lect;
|
||||
try{
|
||||
lect = await Lect.findOne({where:{name:lect_name}});
|
||||
} catch {
|
||||
console.info(`Lect ${lect_name} not found.`);
|
||||
}
|
||||
|
||||
if(!lect) {
|
||||
lect = new Lect();
|
||||
lect.name = lect_name;
|
||||
await lect
|
||||
.save()
|
||||
.then((l)=>{console.info(`Created lect: ${JSON.stringify(l)}`)});
|
||||
}
|
||||
|
||||
|
||||
lemma.lemma_name = word_form_text;
|
||||
|
||||
word_form.word_form = word_form_text;
|
||||
word_form.lemma = lemma;
|
||||
word_form.lect = lect;
|
||||
|
||||
lemma.word_forms = [word_form];
|
||||
|
||||
Lemma.save(lemma);
|
||||
|
||||
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.get("/definition/:definition_id", async (_req, res) =>{
|
||||
const definition_id:number = parseInt(_req.params.definition_id);
|
||||
|
||||
if(!definition_id){
|
||||
console.error(`Error: Could not find word form ${JSON.stringify({definition_id})}`);
|
||||
return void res.status(400).send();
|
||||
}
|
||||
|
||||
let definition = await Definition.findOne({where:{definition_id}}).then();
|
||||
|
||||
res.status(200).send({definition});
|
||||
});
|
||||
|
||||
app.put("/definition", async (_req, res) => {
|
||||
const definition_text = _req.body.definition_text?.toString();
|
||||
|
|
@ -171,7 +234,7 @@ function initExpress() {
|
|||
const definition_id:number = parseInt(_req.params.definition_id);
|
||||
|
||||
if(!definition_id){
|
||||
console.error(`Error: Could not find word form ${JSON.stringify({definition_id:definition_id})}`);
|
||||
console.error(`Error: Could not find word form ${JSON.stringify({definition_id})}`);
|
||||
return void res.status(400).send();
|
||||
}
|
||||
|
||||
|
|
@ -182,6 +245,19 @@ function initExpress() {
|
|||
|
||||
/* examples */
|
||||
|
||||
app.get("/example/:example_id", async (_req, res) =>{
|
||||
const example_id:number = parseInt(_req.params.example_id);
|
||||
|
||||
if(!example_id){
|
||||
console.error(`Error: Could not find word form ${JSON.stringify({example_id})}`);
|
||||
return void res.status(400).send();
|
||||
}
|
||||
|
||||
let example = await Example.findOne({where:{example_id}}).then();
|
||||
|
||||
res.status(200).send({definition: example});
|
||||
});
|
||||
|
||||
app.put("/example", async (_req, res) => {
|
||||
const example_text = _req.body.example_text?.toString();
|
||||
const example_id = _req.body.example_id ?? null;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue