Added an interactive wordlist + other things

src/components/SearchResult.vue

@@ -478,7 +478,8 @@ onMounted(() => {
       window.scrollTo(0, 0);
     } else if (e.key === "Enter" && (document.activeElement === searchBar)) {
       window.scrollTo(0, 0);
-      searchBar?.blur();
+      // Moved to AppBar.vue
+      // searchBar?.blur();
     } else if (e.code === "KeyD" && !(document.activeElement === searchBar)) {
       window.scrollTo(0, document.body.scrollHeight);
     }

src/layouts/default/AppBar.vue

@@ -47,15 +47,20 @@ function searchWord() {
 
 onMounted(() => {
   const searchBar = document.getElementById("searchBar");
+  const wordlistSearch = document.getElementById("wordlistSearch");
 
   window.addEventListener("keyup", (e) => {
     // If the key is pressed and it is not focused
-    if (e.code === "KeyS" && !(document.activeElement === searchBar)) {
+    if (e.code === "KeyS"
+      && (document.activeElement !== searchBar)
+      && (document.activeElement !== wordlistSearch)) {
       // console.log("Pressed 's'!");
       searchBar?.focus();
     // Unfocus the search bar if escape is pressed
     } else if (e.code === "Escape" && (document.activeElement === searchBar)) {
       searchBar?.blur();
+    } else if (e.code === "Enter" && (document.activeElement === searchBar)) {
+      searchBar?.blur();
     }
   });
 });

src/layouts/default/Default.vue

@@ -15,7 +15,9 @@ import { storeToRefs } from 'pinia';
 
 const store = useAppStore();
 const {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   anglishToEnglishDictionary,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   englishToAnglishDictionary,
 } = storeToRefs(store);
 </script>

src/router/index.ts

@@ -12,6 +12,11 @@ const routes = [
         name: "Word Search",
         component: () => import("@/views/Search.vue"),
       },
+      {
+        path: "/list",
+        name: "Word List",
+        component: () => import("@/views/Wordlist.vue"),
+      },
       {
         path: '/word/:word',
         name: "Word Definition",

src/store/app.ts

@@ -1,6 +1,6 @@
 // Utilities
 import { defineStore } from 'pinia'
-import { AnglishToEnglish, AnglishToEnglishEntry, AnglishWord, EnglishToAnglish, GermanicDictionary, GermanicEntry } from '@/types'
+import { AnglishToEnglish, AnglishToEnglishEntry, AnglishWord, AnglishWordlist, EnglishToAnglish, GermanicDictionary } from '@/types'
 import { Ref, ref } from 'vue';
 
 export const useAppStore = defineStore("app", () => {
@@ -13,6 +13,9 @@ export const useAppStore = defineStore("app", () => {
   const englishToGermanicPath = process.env.NODE_ENV === 'production'
   ? "/dictionary/english_to_germanic.json"
   : "/english_to_germanic.json";
+  const anglishWordlistPath = process.env.NODE_ENV === 'production'
+  ? "/dictionary/anglish_wordlist.json"
+  : "/anglish_wordlist.json";
 
   const anglishToEnglishDictionary: Ref<AnglishToEnglish> = ref({
     "NOT_LOADED": {
@@ -85,11 +88,21 @@ export const useAppStore = defineStore("app", () => {
     })
   });
 
+  const anglishWordlist: Ref<AnglishWordlist> = ref([]);
+
+  fetch(anglishWordlistPath).then((a) => {
+    a.json().then((data: AnglishWordlist) => {
+      anglishWordlist.value = data;
+      console.log("Loaded Anglish Wordlist!");
+    })
+  });
+
   return {
     anglishToEnglishDictionary,
     englishToAnglishDictionary,
     emptyAnglishToEnglishEntry,
     englishToGermanicDictionary,
+    anglishWordlist,
     foundWord,
   }
 });

src/types.ts

@@ -89,3 +89,5 @@ export interface GermanicDictionary {
     },
  * }
  */
+
+export type AnglishWordlist = Array<AnglishEntry>;

src/views/Home.vue

@@ -24,6 +24,20 @@
       </ul>
     </p>
 
+    <p>
+      <b>Other links</b>
+      <ul>
+        <li>
+          <router-link to="./list/">Interactive Wordlist</router-link> (for sorting and filtering)
+        </li>
+        <li>
+          <a href="https://pure-english.github.io/name-generator/" target="_blank">
+            Anglish Name Generator
+          </a> (generating names)
+        </li>
+      </ul>
+    </p>
+
     <p>
       <b>Credits</b>
       <ul>
@@ -42,16 +56,26 @@
 
     <p><sub>This project is still in progress, expect errors.</sub></p>
 
-    <p><sub>v1.4.1 (2023-12-17)</sub></p>
+    <p><sub>v1.5.0 (2023-12-17)</sub></p>
   </center>
 </template>
 
 <script lang="ts" setup>
+import { onMounted } from 'vue';
+
 // window.addEventListener("keydown", (e) => {
 //   if (e.code === "KeyS") {
 //     console.log("Pressed 's'!");
 //   }
 // });
+onMounted(() => {
+  const searchBar = document.getElementById("searchBar");
+  window.addEventListener("keyup", (e) => {
+    if (e.key === "Enter" && (document.activeElement === searchBar)) {
+      searchBar?.blur();
+    }
+  });
+});
 </script>
 
 <style scoped>

src/views/Wordlist.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-container class="fill-height">
+    <v-row>
+      <v-col>
+        <v-card
+          flat
+          title="Interactive Anglish Wordlist"
+        >
+          <template v-slot:text>
+            <p>
+              You can combine searching and sorting on this page.
+            </p>
+
+            <p>For example, you can search "Preposition" to get a list of all
+            prepositions, and then sort by "Anglish Spelling" in order to get
+            all prepositions that have a spelling attached. Likewise, you can
+            also search "Norse" to get a list of all words derived from Old
+            Norse, then sort by "Kind" to have the words be sorted by their
+            parts of speech.</p>
+
+            <p>You cannot, however, search in two columns at once.</p>
+
+            <p>This wordlist automatically limits itself to 10 words at a time
+            (due to processing lag), but this can be controlled at the very
+            bottom with the "Items per page" dropdown selector.</p>
+
+            <v-text-field
+              v-model="search"
+              label="Search"
+              prepend-inner-icon="mdi-magnify"
+              single-line
+              variant="outlined"
+              hide-details
+              id="wordlistSearch"
+            >
+            </v-text-field>
+          </template>
+
+          <!--
+            :sort-by="[{ key: 'word', order: 'asc' }]" -->
+            <!-- Ignore error below, it's fine -->
+          <v-data-table
+            :headers="headers"
+            :items="anglishWordlist"
+            :search="search"
+            :items-per-page="10"
+            multi-sort
+          >
+          </v-data-table>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store/app';
+import { storeToRefs } from 'pinia';
+import { Ref, onMounted, ref } from 'vue';
+
+const store = useAppStore();
+const {
+  anglishWordlist
+} = storeToRefs(store);
+
+const headers = [
+  {
+    key: "word",
+    title: "Word",
+    align: "start",
+  },
+  {
+    key: "anglish_spelling",
+    title: "Anglish Spelling",
+  },
+  {
+    key: "meaning",
+    title: "Meaning",
+  },
+  {
+    key: "kind",
+    title: "Kind",
+  },
+  {
+    key: "forebear",
+    title: "Forebear",
+  },
+  {
+    key: "taken_from",
+    title: "Taken From",
+  },
+  {
+    key: "notes",
+    title: "Notes",
+  },
+];
+let search: Ref<string> = ref("");
+
+onMounted(() => {
+  const searchBar = document.getElementById("searchBar");
+  searchBar?.blur();
+});
+</script>
+
+<style scoped>
+p {
+  margin-bottom: 10px;
+}
+</style>