From d3fdba1139b3c95dfbadbdbdd9654baae5a60503 Mon Sep 17 00:00:00 2001
From: Pacharapol Withayasakpunt <polv@polv.cc>
Date: Sun, 24 Oct 2021 21:49:18 +0700
Subject: [PATCH] add some tabs and api

---
 assets/api.ts                    | 153 ++++++++-
 components/tabs/BrowseTab.vue    | 379 ++++++++++++++++++++++
 components/tabs/CharacterTab.vue | 517 +++++++++++++++++++++++++++++++
 package.json                     |   1 +
 yarn.lock                        |  27 +-
 5 files changed, 1072 insertions(+), 5 deletions(-)
 create mode 100644 components/tabs/BrowseTab.vue
 create mode 100644 components/tabs/CharacterTab.vue

diff --git a/assets/api.ts b/assets/api.ts
index d54cd1a..b139abf 100644
--- a/assets/api.ts
+++ b/assets/api.ts
@@ -1,5 +1,27 @@
 import _axios, { AxiosInstance } from 'axios'
 
+export type IType = 'character' | 'vocabulary' | 'sentence'
+
+export interface IEntry {
+  id: string
+  entry: string[]
+  reading: string[]
+  english: string[]
+  type: IType
+  description: string
+  tag: string[]
+}
+
+export type ILookup<T> = T & {
+  offset?: number
+  limit?: number
+}
+
+export interface ILookupResult<T> {
+  result: T[]
+  count: number
+}
+
 class Api {
   axios: AxiosInstance
   _isAuthorized = true
@@ -89,8 +111,8 @@ class Api {
     )
   }
 
-  async quiz_create(params: { entries: string[]; type: string }) {
-    return await this.axios.put('/api/quiz', params).then(
+  async quiz_create(payload: { entries: string[]; type: IType }) {
+    return await this.axios.put('/api/quiz', payload).then(
       (r) =>
         r.data as {
           result: {
@@ -100,15 +122,138 @@ class Api {
     )
   }
 
-  async quiz_deleteMany(params: { entries: string[]; type: string }) {
+  async quiz_deleteMany(params: { entries: string[]; type: IType }) {
     return await this.axios.post('/api/quiz/deleteMany', params)
   }
 
+  async extra_getQuery(params: ILookup<{ q: string }>) {
+    params.offset = params.offset || 0
+    params.limit = params.limit || 5
+
+    return await this.axios
+      .get('/api/extra/q', { params })
+      .then((r) => r.data as ILookupResult<IEntry>)
+  }
+
+  async extra_create(payload: Omit<IEntry, 'id'>) {
+    return await this.axios
+      .put('/api/extra', payload)
+      .then((r) => r.data as { id: string })
+  }
+
+  async extra_update(payload: IEntry) {
+    return await this.axios.patch('/api/extra', payload, {
+      params: { id: payload.id },
+    })
+  }
+
   async extra_delete(params: { id: string }) {
-    return await this.axios.delete('/extra/delete', {
+    return await this.axios.delete('/api/extra/delete', {
       params,
     })
   }
+
+  async character_getRadical(params: { entry: string }) {
+    return await this.axios.get('/api/character/radical', { params }).then(
+      (r) =>
+        r.data as {
+          result: {
+            sub: string[]
+            sup: string[]
+            variant: string[]
+            visual: string[]
+          } | null
+        }
+    )
+  }
+
+  async character_getVocabulary(params: ILookup<{ entry: string }>) {
+    return await this.axios.get('/api/character/vocabulary', { params }).then(
+      (r) =>
+        r.data as ILookupResult<{
+          entry: string
+        }>
+    )
+  }
+
+  async character_getSentence(params: ILookup<{ entry: string }>) {
+    return await this.axios.get('/api/character/sentence', { params }).then(
+      (r) =>
+        r.data as ILookupResult<{
+          entry: string
+        }>
+    )
+  }
+
+  async all_getRandom(params: { type: IType }) {
+    return await this.axios.get('/api/all/random', { params }).then(
+      (r) =>
+        r.data as {
+          result: string
+          level: number
+        }
+    )
+  }
+
+  async all_getQuery(params: ILookup<{ q: string }>) {
+    params.offset = params.offset || 0
+    params.limit = params.limit || 5
+
+    return await this.axios.get('/api/all/q', { params }).then(
+      (r) =>
+        r.data as ILookupResult<{
+          entry: string
+          type: IType
+        }>
+    )
+  }
+
+  async all_getLookup(params: ILookup<{ entry: string; type: IType }>) {
+    params.offset = params.offset || 0
+    params.limit = params.limit || 5
+
+    return await this.axios
+      .get('/api/all', {
+        params,
+      })
+      .then(
+        (r) =>
+          r.data as ILookupResult<
+            IEntry & {
+              level?: number
+            }
+          >
+      )
+  }
+
+  async all_getReading(params: { entry: string }) {
+    return await this.axios
+      .get('/api/all/reading', {
+        params,
+      })
+      .then(
+        (r) =>
+          r.data as {
+            result: string
+          }
+      )
+  }
+
+  async all_getMeaning(params: { entry: string }) {
+    return await this.axios
+      .get('/api/all/meaning', {
+        params,
+      })
+      .then(
+        (r) =>
+          r.data as {
+            result: {
+              entry?: string
+              meaning: string
+            }[]
+          }
+      )
+  }
 }
 
 export const api = new Api()
diff --git a/components/tabs/BrowseTab.vue b/components/tabs/BrowseTab.vue
new file mode 100644
index 0000000..787df5e
--- /dev/null
+++ b/components/tabs/BrowseTab.vue
@@ -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>
diff --git a/components/tabs/CharacterTab.vue b/components/tabs/CharacterTab.vue
new file mode 100644
index 0000000..62faab2
--- /dev/null
+++ b/components/tabs/CharacterTab.vue
@@ -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>
diff --git a/package.json b/package.json
index 52e0f50..1baad86 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@nuxtjs/pwa": "^3.3.5",
     "axios": "^0.23.0",
     "core-js": "^3.15.1",
+    "jsonschema-definer": "^1.3.2",
     "nuxt": "^2.15.7",
     "nuxt-buefy": "^0.4.8",
     "nuxt-property-decorator": "^2.9.1",
diff --git a/yarn.lock b/yarn.lock
index afd0946..c63dde0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1596,6 +1596,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/uuid@^8.3.0":
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.1.tgz#1a32969cf8f0364b3d8c8af9cc3555b7805df14f"
+  integrity sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg==
+
 "@types/webpack-bundle-analyzer@3.9.3":
   version "3.9.3"
   resolved "https://registry.yarnpkg.com/@types/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.9.3.tgz#3a12025eb5d86069c30b47a157e62c0aca6e39a1"
@@ -1944,7 +1949,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -4830,6 +4835,16 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonschema-definer@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/jsonschema-definer/-/jsonschema-definer-1.3.2.tgz#41c5a57dcd62b8e2b234fb4cf2defd1e526dc450"
+  integrity sha512-5bFNbTsJb/LFHQjKiNJJw3HEUzEEcv3lENy1muIDYXjYYLRw/xNnZ8UVsKN1X6gYb0yc+acuEinaeAH7fUAMMA==
+  dependencies:
+    "@types/uuid" "^8.3.0"
+    ajv "^6.12.0"
+    ts-toolbelt "^6.3.6"
+    uuid "^8.3.0"
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -7782,6 +7797,11 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+ts-toolbelt@^6.3.6:
+  version "6.15.5"
+  resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz#cb3b43ed725cb63644782c64fbcad7d8f28c0a83"
+  integrity sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==
+
 tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -8038,6 +8058,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
+uuid@^8.3.0:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 vary@^1.1.2, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"