add some tabs and api
This commit is contained in:
polv committed
1 parent
f0bd330d04
commit
d3fdba1139
5 files changed
+1072
-5
No files matched your search
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="ExtraPage container">
|
||||
<form @submit.prevent="q = q0">
|
||||
<label for="q" class="label">
|
||||
Search
|
||||
<b-tooltip label="How to?" position="is-right">
|
||||
<a
|
||||
href="https://github.com/zhquiz/zhquiz/wiki/How-to-search-or-filter"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<b-icon icon="info-circle"></b-icon>
|
||||
</a>
|
||||
</b-tooltip>
|
||||
</label>
|
||||
<div class="field has-addons">
|
||||
<p class="control is-expanded">
|
||||
<input
|
||||
v-model="q0"
|
||||
class="input"
|
||||
type="search"
|
||||
name="q"
|
||||
placeholder="Type here to search"
|
||||
aria-label="search"
|
||||
/>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-success" type="button" @click="onNewItem">
|
||||
Add new item
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<b-table
|
||||
:data="tableData"
|
||||
paginated
|
||||
backend-pagination
|
||||
:total="count"
|
||||
:per-page="perPage"
|
||||
:current-page.sync="page"
|
||||
backend-sorting
|
||||
:default-sort="[sort.key, sort.type]"
|
||||
@sort="onSort"
|
||||
>
|
||||
<b-table-column field="entry" label="Entry" v-slot="props">
|
||||
<span
|
||||
class="clickable"
|
||||
@click="(ev) => onTableContextmenu(props.row, ev)"
|
||||
@contextmenu.prevent="(ev) => onTableContextmenu(props.row, ev)"
|
||||
>
|
||||
<div v-for="it in props.row.entry" :key="it">
|
||||
{{ it }}
|
||||
</div>
|
||||
</span>
|
||||
</b-table-column>
|
||||
<b-table-column field="reading" label="Pinyin" v-slot="props">
|
||||
<span
|
||||
class="clickable"
|
||||
@click="(ev) => onTableContextmenu(props.row, ev)"
|
||||
@contextmenu.prevent="(ev) => onTableContextmenu(props.row, ev)"
|
||||
>
|
||||
<div v-for="it in props.row.reading" :key="it">
|
||||
{{ it }}
|
||||
</div>
|
||||
</span>
|
||||
</b-table-column>
|
||||
<b-table-column
|
||||
field="english"
|
||||
label="English"
|
||||
v-slot="props"
|
||||
width="40vw"
|
||||
>
|
||||
<span
|
||||
class="clickable"
|
||||
@click="(ev) => onTableContextmenu(props.row, ev)"
|
||||
@contextmenu.prevent="(ev) => onTableContextmenu(props.row, ev)"
|
||||
>
|
||||
<div v-for="it in props.row.english" :key="it">
|
||||
{{ it }}
|
||||
</div>
|
||||
</span>
|
||||
</b-table-column>
|
||||
</b-table>
|
||||
</div>
|
||||
|
||||
<b-modal v-model="isEditModal">
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<div v-if="!selected.id" class="card-header-title">New item</div>
|
||||
<div v-else class="card-header-title">Edit item</div>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<b-field label="Chinese">
|
||||
<template slot="label">
|
||||
Chinese
|
||||
<b-tooltip
|
||||
type="is-dark"
|
||||
label="Space separated"
|
||||
position="is-right"
|
||||
>
|
||||
<b-icon size="is-small" icon="info-circle"></b-icon>
|
||||
</b-tooltip>
|
||||
</template>
|
||||
<b-input
|
||||
:value="selected.entry.join(' ')"
|
||||
@input="(ev) => (selected.entry = ev.trim().split(' '))"
|
||||
placeholder="Must not be empty"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="Pinyin">
|
||||
<template slot="label">
|
||||
Pinyin
|
||||
<b-tooltip type="is-dark" label="Slash (/) separated">
|
||||
<b-icon size="is-small" icon="info-circle"></b-icon>
|
||||
</b-tooltip>
|
||||
</template>
|
||||
<b-input
|
||||
:value="selected.reading.join(' / ')"
|
||||
@input="(ev) => (selected.reading = ev.trim().split(' / '))"
|
||||
placeholder="Must not be empty"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="English">
|
||||
<template slot="label">
|
||||
English
|
||||
<b-tooltip type="is-dark" label="New-line separated">
|
||||
<b-icon size="is-small" icon="info-circle"></b-icon>
|
||||
</b-tooltip>
|
||||
</template>
|
||||
<b-input
|
||||
:value="selected.english.join('\n')"
|
||||
@input="(ev) => (selected.english = ev.trim().split('\n'))"
|
||||
type="textarea"
|
||||
placeholder="Must not be empty"
|
||||
></b-input>
|
||||
</b-field>
|
||||
<b-field label="Type">
|
||||
<b-select v-model="selected.type">
|
||||
<option value="vocabulary">Vocabulary</option>
|
||||
<option value="sentence">Sentence</option>
|
||||
<option
|
||||
v-if="selected.entry.every((el) => el.length === 1)"
|
||||
value="character"
|
||||
>
|
||||
Hanzi
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
<b-field label="Description">
|
||||
<b-input v-model="selected.description" type="textarea"></b-input>
|
||||
</b-field>
|
||||
<b-field label="Tag">
|
||||
<b-taginput v-model="selected.tag"></b-taginput>
|
||||
</b-field>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<button
|
||||
class="button is-success"
|
||||
type="button"
|
||||
@click="selected.id ? doUpdate() : doCreate()"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
class="button is-cancel"
|
||||
type="button"
|
||||
@click="isEditModal = false"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<ContextMenu
|
||||
:id="selected.id"
|
||||
ref="context"
|
||||
:entry="selected.entry[0]"
|
||||
:type="selected.type || 'vocabulary'"
|
||||
:description="selected.description"
|
||||
source="extra"
|
||||
:additional="additionalContext"
|
||||
@deleted="doDelete"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Ref, Vue, Watch } from 'nuxt-property-decorator'
|
||||
import ContextMenu from '@/components/ContextMenu.vue'
|
||||
import { api, IEntry } from '~/assets/api'
|
||||
|
||||
@Component<BrowseTab>({
|
||||
components: {
|
||||
ContextMenu,
|
||||
},
|
||||
created() {
|
||||
this.$emit('title', 'User content')
|
||||
this.load()
|
||||
},
|
||||
})
|
||||
export default class BrowseTab extends Vue {
|
||||
@Ref() context!: ContextMenu
|
||||
|
||||
q0 = ''
|
||||
q = ''
|
||||
count = 0
|
||||
perPage = 10
|
||||
page = 1
|
||||
tableData: IEntry[] = []
|
||||
|
||||
isEditModal = false
|
||||
|
||||
sort = {
|
||||
key: 'updatedAt',
|
||||
type: 'desc',
|
||||
}
|
||||
|
||||
selected: IEntry = {
|
||||
id: '',
|
||||
entry: [],
|
||||
reading: [],
|
||||
english: [],
|
||||
type: 'vocabulary',
|
||||
description: '',
|
||||
tag: [],
|
||||
}
|
||||
|
||||
additionalContext = [
|
||||
{
|
||||
name: 'Edit item',
|
||||
handler: () => {
|
||||
this.openEditModal()
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Delete item',
|
||||
handler: () => {
|
||||
this.doDelete()
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
async openEditModal() {
|
||||
if (this.selected.entry.length) {
|
||||
if (!this.selected.reading.length) {
|
||||
this.selected.reading = [
|
||||
await api
|
||||
.all_getReading({
|
||||
entry: this.selected.entry[0],
|
||||
})
|
||||
.then((r) => r.result),
|
||||
]
|
||||
}
|
||||
|
||||
if (!this.selected.english.length) {
|
||||
this.selected.english = await api
|
||||
.all_getMeaning({
|
||||
entry: this.selected.entry[0],
|
||||
})
|
||||
.then((r) =>
|
||||
r.result.filter((r0) => !r0.entry).map((r0) => r0.meaning)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.selected.description) {
|
||||
this.$set(this.selected, 'description', '')
|
||||
}
|
||||
|
||||
this.isEditModal = true
|
||||
}
|
||||
|
||||
@Watch('page')
|
||||
@Watch('perPage')
|
||||
@Watch('q')
|
||||
async load() {
|
||||
const { result, count } = await api.extra_getQuery({
|
||||
q: this.q,
|
||||
offset: this.page * this.perPage,
|
||||
limit: this.perPage,
|
||||
})
|
||||
|
||||
this.tableData = result
|
||||
this.count = count
|
||||
}
|
||||
|
||||
async doCreate() {
|
||||
const { id } = await api.extra_create({
|
||||
...this.selected,
|
||||
description: this.selected.description || '',
|
||||
})
|
||||
|
||||
this.selected.id = id
|
||||
|
||||
await this.context.addToQuiz()
|
||||
|
||||
this.isEditModal = false
|
||||
await this.load()
|
||||
}
|
||||
|
||||
async doUpdate() {
|
||||
const { id } = this.selected
|
||||
|
||||
if (id) {
|
||||
await api.extra_update({
|
||||
...this.selected,
|
||||
description: this.selected.description || '',
|
||||
id,
|
||||
})
|
||||
|
||||
this.$buefy.snackbar.open(
|
||||
`Updated ${this.selected.type}: ${this.selected.entry[0]}`
|
||||
)
|
||||
}
|
||||
|
||||
this.isEditModal = false
|
||||
await this.load()
|
||||
}
|
||||
|
||||
async doDelete() {
|
||||
const { id } = this.selected
|
||||
|
||||
if (id) {
|
||||
await api.extra_delete({ id })
|
||||
this.$buefy.snackbar.open(
|
||||
`Deleted ${this.selected.type}: ${this.selected.entry[0]}`
|
||||
)
|
||||
await this.load()
|
||||
}
|
||||
}
|
||||
|
||||
onNewItem() {
|
||||
this.selected = {
|
||||
id: '',
|
||||
entry: [],
|
||||
reading: [],
|
||||
english: [],
|
||||
type: 'vocabulary',
|
||||
description: '',
|
||||
tag: [],
|
||||
}
|
||||
|
||||
this.isEditModal = true
|
||||
}
|
||||
|
||||
async onTableContextmenu(row: IEntry, evt: MouseEvent) {
|
||||
evt.preventDefault()
|
||||
|
||||
this.selected = JSON.parse(JSON.stringify(row))
|
||||
this.context.open(evt)
|
||||
}
|
||||
|
||||
async onSort(key: string, type: string) {
|
||||
this.sort.key = key
|
||||
this.sort.type = type
|
||||
await this.load()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.clickable:hover {
|
||||
cursor: pointer;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.button + .button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.button.is-cancel {
|
||||
background-color: rgb(215, 217, 219);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,517 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="HanziPage">
|
||||
<form class="field" @submit.prevent="q = q0">
|
||||
<label for="q" class="label">
|
||||
Search
|
||||
<b-tooltip label="How to?" position="is-right">
|
||||
<a
|
||||
href="https://github.com/zhquiz/zhquiz/wiki/How-to-search-or-filter"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<b-icon icon="info-circle"></b-icon>
|
||||
</a>
|
||||
</b-tooltip>
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
v-model="q0"
|
||||
class="input"
|
||||
type="search"
|
||||
name="q"
|
||||
placeholder="Type here to search."
|
||||
aria-label="search"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6 entry-display">
|
||||
<div
|
||||
class="hanzi-display clickable font-han"
|
||||
@click="(evt) => openContext(evt, current, 'character')"
|
||||
@contextmenu.prevent="
|
||||
(evt) => openContext(evt, current, 'character')
|
||||
"
|
||||
>
|
||||
{{ current }}
|
||||
</div>
|
||||
|
||||
<div class="buttons has-addons">
|
||||
<button
|
||||
class="button"
|
||||
:disabled="i < 1"
|
||||
@click="i--"
|
||||
@keypress="i--"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
class="button"
|
||||
:disabled="i > entries.length - 2"
|
||||
@click="i++"
|
||||
@keypress="i++"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="tag.length" class="mb-4">
|
||||
Tags:
|
||||
<b-taglist style="display: inline-flex">
|
||||
<b-tag v-for="t in tag.slice(0, 5)" :key="t" type="is-info">
|
||||
{{ t }}
|
||||
</b-tag>
|
||||
</b-taglist>
|
||||
</div>
|
||||
|
||||
<div v-if="level && level <= 60" class="mb-4">
|
||||
<b-taglist attached>
|
||||
<b-tag type="is-dark">Level</b-tag>
|
||||
<b-tag type="is-primary">
|
||||
{{ level }}
|
||||
</b-tag>
|
||||
</b-taglist>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6">
|
||||
<b-collapse class="card" animation="slide" :open="false">
|
||||
<div
|
||||
slot="trigger"
|
||||
slot-scope="props"
|
||||
class="card-header"
|
||||
role="button"
|
||||
>
|
||||
<h2 class="card-header-title">Reading</h2>
|
||||
<a role="button" class="card-header-icon">
|
||||
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
{{ reading.join(' / ') }}
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
||||
<b-collapse class="card" animation="slide" :open="!!english.length">
|
||||
<div
|
||||
slot="trigger"
|
||||
slot-scope="props"
|
||||
class="card-header"
|
||||
role="button"
|
||||
>
|
||||
<h2 class="card-header-title">English</h2>
|
||||
<a role="button" class="card-header-icon">
|
||||
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
{{ english.join(' / ') }}
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
||||
<b-collapse class="card" animation="slide" :open="!!sub.length">
|
||||
<div
|
||||
slot="trigger"
|
||||
slot-scope="props"
|
||||
class="card-header"
|
||||
role="button"
|
||||
>
|
||||
<h2 class="card-header-title">Subcompositions</h2>
|
||||
<a role="button" class="card-header-icon">
|
||||
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<span
|
||||
v-for="h in sub"
|
||||
:key="h"
|
||||
class="font-han clickable"
|
||||
@click="(evt) => openContext(evt, h, 'character')"
|
||||
@contextmenu.prevent="(evt) => openContext(evt, h, 'character')"
|
||||
>
|
||||
{{ h }}
|
||||
</span>
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
||||
<b-collapse class="card" animation="slide" :open="!!sup.length">
|
||||
<div
|
||||
slot="trigger"
|
||||
slot-scope="props"
|
||||
class="card-header"
|
||||
role="button"
|
||||
>
|
||||
<h2 class="card-header-title">Supercompositions</h2>
|
||||
<a role="button" class="card-header-icon">
|
||||
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<span
|
||||
v-for="h in sup"
|
||||
:key="h"
|
||||
class="font-han clickable"
|
||||
@click="(evt) => openContext(evt, h, 'character')"
|
||||
@contextmenu.prevent="(evt) => openContext(evt, h, 'character')"
|
||||
>
|
||||
{{ h }}
|
||||
</span>
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
||||
<b-collapse class="card" animation="slide" :open="!!variants.length">
|
||||
<div
|
||||
slot="trigger"
|
||||
slot-scope="props"
|
||||
class="card-header"
|
||||
role="button"
|
||||
>
|
||||
<h2 class="card-header-title">Variants</h2>
|
||||
<a role="button" class="card-header-icon">
|
||||
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<span
|
||||
v-for="h in variants"
|
||||
:key="h"
|
||||
class="font-han clickable"
|
||||
@click="(evt) => openContext(evt, h, 'character')"
|
||||
@contextmenu.prevent="(evt) => openContext(evt, h, 'character')"
|
||||
>
|
||||
{{ h }}
|
||||
</span>
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
||||
<b-collapse class="card" animation="slide" :open="!!vocabs.length">
|
||||
<div
|
||||
slot="trigger"
|
||||
slot-scope="props"
|
||||
class="card-header"
|
||||
role="button"
|
||||
>
|
||||
<h2 class="card-header-title">Vocabularies</h2>
|
||||
<a role="button" class="card-header-icon">
|
||||
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div v-for="(v, i) in vocabs" :key="i" class="long-item">
|
||||
<span
|
||||
class="clickable"
|
||||
@click="(evt) => openContext(evt, v.entry, 'vocabulary')"
|
||||
@contextmenu.prevent="
|
||||
(evt) => openContext(evt, v.entry, 'vocabulary')
|
||||
"
|
||||
>
|
||||
{{ v.entry }}
|
||||
</span>
|
||||
|
||||
<span v-if="v.alt" class="clickable">
|
||||
{{ v.alt.join(' ') }}
|
||||
</span>
|
||||
|
||||
<span class="pinyin">[{{ v.reading.join(' / ') }}]</span>
|
||||
|
||||
<span>{{ v.english.join(' / ') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
||||
<b-collapse class="card" animation="slide" :open="!!sentences.length">
|
||||
<div
|
||||
slot="trigger"
|
||||
slot-scope="props"
|
||||
class="card-header"
|
||||
role="button"
|
||||
>
|
||||
<h2 class="card-header-title">Sentences</h2>
|
||||
<a role="button" class="card-header-icon">
|
||||
<fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div v-for="(s, i) in sentences" :key="i" class="long-item">
|
||||
<span
|
||||
class="clickable"
|
||||
@click="(evt) => openContext(evt, s.entry, 'sentence')"
|
||||
@contextmenu.prevent="
|
||||
(evt) => openContext(evt, s.entry, 'sentence')
|
||||
"
|
||||
>
|
||||
{{ s.entry }}
|
||||
</span>
|
||||
|
||||
<span>{{ s.english }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContextMenu
|
||||
ref="context"
|
||||
:entry="selected.entry"
|
||||
:type="selected.type"
|
||||
:additional="additionalContext"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Ref, Vue, Watch } from 'nuxt-property-decorator'
|
||||
import ContextMenu from '@/components/ContextMenu.vue'
|
||||
import { api, IEntry } from '~/assets/api'
|
||||
|
||||
@Component<CharacterTab>({
|
||||
components: {
|
||||
ContextMenu,
|
||||
},
|
||||
async created() {
|
||||
this.$emit('title', 'Hanzi')
|
||||
|
||||
this.q = this.query.q || ''
|
||||
|
||||
if (this.additionalContext[0]) {
|
||||
await this.additionalContext[0].handler()
|
||||
}
|
||||
},
|
||||
})
|
||||
export default class CharacterTab extends Vue {
|
||||
@Prop({ default: () => ({}) }) query!: {
|
||||
q?: string
|
||||
}
|
||||
|
||||
@Ref() context!: ContextMenu
|
||||
|
||||
entries: string[] = []
|
||||
i = 0
|
||||
|
||||
sub: string[] = []
|
||||
sup: string[] = []
|
||||
variant: string[] = []
|
||||
visual: string[] = []
|
||||
|
||||
reading: string[] = []
|
||||
english: string[] = []
|
||||
tag: string[] = []
|
||||
level = 0
|
||||
|
||||
vocabulary_lookup: IEntry[] = []
|
||||
sentence_lookup: IEntry[] = []
|
||||
|
||||
selected: {
|
||||
entry: string
|
||||
type: string
|
||||
} = {
|
||||
entry: '',
|
||||
type: '',
|
||||
}
|
||||
|
||||
q = ''
|
||||
q0 = ''
|
||||
|
||||
get current() {
|
||||
return this.entries[this.i] || ' '
|
||||
}
|
||||
|
||||
get additionalContext() {
|
||||
if (!(this.q || '').trim()) {
|
||||
return [
|
||||
{
|
||||
name: 'Reload',
|
||||
handler: async () => {
|
||||
const { result } = await api.all_getRandom({ type: 'character' })
|
||||
this.q0 = result
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
return []
|
||||
}
|
||||
|
||||
openContext(
|
||||
evt: MouseEvent,
|
||||
entry = this.selected.entry,
|
||||
type = this.selected.type
|
||||
) {
|
||||
this.selected = { entry, type }
|
||||
this.context.open(evt)
|
||||
}
|
||||
|
||||
@Watch('q')
|
||||
async onQChange(q: string) {
|
||||
this.$emit('title', (q ? q + ' - ' : '') + 'Hanzi')
|
||||
|
||||
if (/\p{sc=Han}/u.test(q)) {
|
||||
const qs = q.split('').filter((h) => /\p{sc=Han}/u.test(h))
|
||||
this.entries = qs.filter((h, i) => qs.indexOf(h) === i)
|
||||
} else {
|
||||
if (!q.trim()) {
|
||||
const { result } = await api.all_getRandom({ type: 'character' })
|
||||
|
||||
this.q0 = result
|
||||
this.q = result
|
||||
return
|
||||
}
|
||||
|
||||
const r = await api.all_getQuery({ q })
|
||||
this.entries = r.result.map((r) => r.entry)
|
||||
}
|
||||
|
||||
this.i = 0
|
||||
}
|
||||
|
||||
@Watch('current')
|
||||
load() {
|
||||
if (this.current) {
|
||||
this.loadHanzi()
|
||||
this.loadVocab()
|
||||
this.loadSentences()
|
||||
} else {
|
||||
this.sub = []
|
||||
this.sup = []
|
||||
this.variant = []
|
||||
this.visual = []
|
||||
|
||||
this.reading = []
|
||||
this.english = []
|
||||
this.tag = []
|
||||
this.level = 0
|
||||
this.vocabulary_lookup = []
|
||||
this.sentence_lookup = []
|
||||
}
|
||||
}
|
||||
|
||||
async loadHanzi() {
|
||||
if (!/^\p{sc=Han}$/u.test(this.current)) {
|
||||
this.sub = []
|
||||
this.sup = []
|
||||
this.variant = []
|
||||
this.visual = []
|
||||
|
||||
this.english = []
|
||||
this.tag = []
|
||||
this.level = 0
|
||||
return
|
||||
}
|
||||
|
||||
await Promise.all([
|
||||
(async () => {
|
||||
const { result: r } = await api.character_getRadical({
|
||||
entry: this.current,
|
||||
})
|
||||
|
||||
this.sub = r?.sub || []
|
||||
this.sup = r?.sup || []
|
||||
this.variant = r?.variant || []
|
||||
this.visual = r?.visual || []
|
||||
})(),
|
||||
(async () => {
|
||||
const {
|
||||
result: [r],
|
||||
} = await api.all_getLookup({
|
||||
entry: this.current,
|
||||
type: 'character',
|
||||
})
|
||||
|
||||
this.reading = r?.reading || []
|
||||
this.english = r?.english || []
|
||||
this.tag = r?.tag || []
|
||||
this.level = r?.level || 0
|
||||
})(),
|
||||
])
|
||||
}
|
||||
|
||||
async loadVocab() {
|
||||
if (!/^\p{sc=Han}$/u.test(this.current)) {
|
||||
this.vocabulary_lookup = []
|
||||
return
|
||||
}
|
||||
|
||||
const { result } = await api.character_getVocabulary({
|
||||
entry: this.current,
|
||||
})
|
||||
|
||||
this.vocabulary_lookup = await Promise.all(
|
||||
result
|
||||
.map((r) =>
|
||||
api
|
||||
.all_getLookup({ entry: r.entry, type: 'vocabulary', limit: 1 })
|
||||
.then((r) => r.result[0])
|
||||
)
|
||||
.filter((r) => r)
|
||||
.map((r) => r!)
|
||||
)
|
||||
}
|
||||
|
||||
async loadSentences() {
|
||||
if (!/^\p{sc=Han}$/u.test(this.current)) {
|
||||
this.sentence_lookup = []
|
||||
return
|
||||
}
|
||||
|
||||
const { result } = await api.character_getSentence({
|
||||
entry: this.current,
|
||||
})
|
||||
|
||||
this.vocabulary_lookup = await Promise.all(
|
||||
result
|
||||
.map((r) =>
|
||||
api
|
||||
.all_getLookup({ entry: r.entry, type: 'sentence', limit: 1 })
|
||||
.then((r) => r.result[0])
|
||||
)
|
||||
.filter((r) => r)
|
||||
.map((r) => r!)
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.entry-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.entry-display .clickable {
|
||||
min-height: 1.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
max-height: 250px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.card-content .font-han {
|
||||
font-size: 50px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.long-item > span + span {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.long-item > .pinyin {
|
||||
min-width: 8rem;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user