(wip) - stuff
This commit is contained in:
Sheldon Cooper
parent
d01128d54f
commit
17f6216e67
5 changed files with 180 additions and 52 deletions
|
|
@ -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 =>
|
||||
item.lemma_name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
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())
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -19,10 +19,11 @@
|
|||
@alpine:init="$store.dictionary.loadPreferences()">
|
||||
<aside class="sidebar">
|
||||
<div class="preferences-pane">
|
||||
|
||||
<button
|
||||
@click="showPrefs = !showPrefs"
|
||||
class="prefs-toggle">
|
||||
Preferences
|
||||
class="prefs-toggle is-fullwidth">
|
||||
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(){
|
||||
return this.lemma_detail;
|
||||
async load_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>
|
||||
<button class="float-left tight" x-show="!editing" @click="editing = true">~</button>
|
||||
<button class="float-left tight" x-show="editing" @click="editing = false">-></button>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
|
@ -188,15 +202,17 @@
|
|||
|
||||
<h4>Imi</h4>
|
||||
<ul>
|
||||
<template
|
||||
x-for="def in (get_lemma_detail()?.definitions ?? [])"
|
||||
<template x-for="def in (lemma_detail?.definitions ?? [])">
|
||||
<li
|
||||
x-data="{
|
||||
editing:false
|
||||
}">
|
||||
<li><span x-show="!editing" x-text="def.definition_text"></span>
|
||||
<button class="float-right tight edit" x-show="!editing" @click="editing = true">~</button>
|
||||
<button class="float-right tight" x-show="editing" @click="editing = false">-></button>
|
||||
<input type="text" x-show="editing" x-model="def.definition_text">
|
||||
editing: false,
|
||||
edited_text: def.definition_text.toString()
|
||||
}" @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>
|
||||
</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="is-fullwidth"
|
||||
class="edit"
|
||||
x-show="adding_definition"
|
||||
@click="$store.dictionary.postDefinition(definition_text, get_lemma_detail()?.lemma_name)">
|
||||
Popoczta
|
||||
@click="adding_definition = false">
|
||||
/
|
||||
</button>
|
||||
<button
|
||||
class="is-fullwidth"
|
||||
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 hollow primary"
|
||||
x-show="!adding_definition"
|
||||
@click="adding_definition = !adding_definition">
|
||||
+
|
||||
|
|
@ -220,14 +250,17 @@
|
|||
|
||||
<h4>Tatoeba</h4>
|
||||
<ul>
|
||||
<template
|
||||
x-for="ex in (get_lemma_detail()?.examples ?? [])"
|
||||
x-data="{editing:false}">
|
||||
<li>
|
||||
<span x-show="!editing" x-text="ex.example_text"></span>
|
||||
<button class="float-right tight edit" x-show="!editing" @click="editing = true">~</button>
|
||||
<button class="float-right tight" x-show="editing" @click="editing = false">-></button>
|
||||
<input type="text" x-show="editing" x-model="ex.example_text">
|
||||
<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-text="ex.example_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" 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">
|
||||
+
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: solid 1px #000;
|
||||
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;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background 0.3s ease;
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue