Start work on analysis

src/layouts/Editor.vue

@@ -18,37 +18,71 @@
  </v-navigation-drawer>
 
  <v-app-bar>
- <v-app-bar-nav-icon @click="drawer = !drawer"/>
+ <v-app-bar-nav-icon @click="drawer = !drawer">
+ <v-icon>$menu</v-icon>
+
+ <v-tooltip
+ activator="parent"
+ location="start"
+ >
+ Open Sidebar
+ </v-tooltip>
+ </v-app-bar-nav-icon>
 
  <v-app-bar-title>Anglish Editor</v-app-bar-title>
 
  <v-spacer></v-spacer>
 <!--
  @click="settings = !settings" -->
- <v-app-bar-nav-icon
- icon="mdi-cog"
- >
+ <v-app-bar-nav-icon>
+ <v-icon>mdi-cog</v-icon>
+
+ <v-tooltip
+ activator="parent"
+ location="start"
+ >
+ Settings
+ </v-tooltip>
+
  <v-dialog
  v-model="settings"
  activator="parent"
  width="auto"
  >
- <v-card>
+ <v-card class="mx-auto">
  <v-card-item>
  <v-card-title>Settings</v-card-title>
  </v-card-item>
 
  <v-card-text>
- Here are where your settings will be.
+ <p>Here are where your settings will be.</p>
+
+ <v-checkbox
+ label="Auto-Analyse"
+ v-model="autoAnalyse"
+ />
  </v-card-text>
+
+ <v-card-actions>
+ <v-btn>
+ Save permanently (TODO)
+ </v-btn>
+ </v-card-actions>
  </v-card>
  </v-dialog>
  </v-app-bar-nav-icon>
 
  <v-app-bar-nav-icon
  @click="searchDrawer = !searchDrawer"
- icon="mdi-magnify"
- />
+ >
+ <v-icon>mdi-magnify</v-icon>
+ <v-tooltip
+ activator="parent"
+ location="start"
+ >
+ Open Dictionary
+ </v-tooltip>
+ </v-app-bar-nav-icon>
  </v-app-bar>
 
  <!-- Flex 'align-center' puts it vertically central -->
@@ -66,8 +100,16 @@
 import { ref } from "vue";
 import Editor from "@/views/Editor.vue";
 import SearchResult from "@/components/SearchResult.vue";
+import { useEditorStore } from "@/store/editor";
+import { storeToRefs } from "pinia";
 
 const drawer = ref(true);
 const searchDrawer = ref(true);
 const settings = ref(false);
+
+const store = useEditorStore();
+const {
+ autoAnalyse,
+} = storeToRefs(store);
+
 </script>

src/store/app.ts

@@ -1,6 +1,6 @@
 // Utilities
-import { defineStore } from 'pinia'
-import { AnglishToEnglish, AnglishToEnglishEntry, AnglishWord, AnglishWordlist, EnglishToAnglish, Etymologies, GermanicDictionary } from '@/types'
+import { defineStore } from 'pinia';
+import { AnglishToEnglish, AnglishToEnglishEntry, AnglishWord, AnglishWordlist, EnglishToAnglish, Etymologies, GermanicDictionary } from '@/types';
 import { Ref, ref } from 'vue';
 
 export const useAppStore = defineStore("app", () => {

src/store/editor.ts

@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia';
+import { Ref, ref } from 'vue';
+
+export const useEditorStore = defineStore("editor", () => {
+ const autoAnalyse = ref(false);
+
+ return {
+ autoAnalyse,
+ }
+});

src/views/Editor.vue

@@ -5,8 +5,8 @@
  <v-textarea
  variant="outlined"
  counter
+ v-model="rawText"
  >
-
  </v-textarea>
  </v-col>
  </v-row>
@@ -23,18 +23,67 @@
  </v-col>
  </v-row>
 
+ <!-- Word origin filtering -->
+ <!-- v-row -->
+ <v-row>
+ <v-col>
+ <v-chip-group
+ column
+ multiple
+ >
+ <v-chip
+ v-for="(origin, index) in ['Norse', 'Old English']"
+ :key="index"
+ filter
+ outlined
+ variant="outlined"
+ >
+ {{ origin }}
+ </v-chip>
+ </v-chip-group>
+ </v-col>
+ </v-row>
+
+ <!-- List of words with highlighting -->
  <v-row>
  <v-col>
- <!-- <div class="d-flex align-center justify-center w-100 h-100"> -->
- <v-checkbox label="Auto-Analyse"></v-checkbox>
- <!-- </div> -->
+ <v-chip-group
+ mandatory
+ selected-class="text-primary"
+ >
+ <v-chip v-for="(word, index) in splitRawText" :key="index">
+ {{ word }}
+ </v-chip>
+ </v-chip-group>
  </v-col>
  </v-row>
  </v-container>
 </template>
 
 <script setup lang="ts">
+import { useEditorStore } from "@/store/editor";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import { ref } from "vue";
+
+const rawText = ref("");
+const splitRawText = computed(() => {
+ return [...new Set(rawText.value.match(/(\b[^\s]+\b)/g)?.sort())];
+});
+
+const store = useEditorStore();
+const {
+ autoAnalyse,
+} = storeToRefs(store);
+
 function analyse() {
  console.log("Analysing input…");
+
+ if (autoAnalyse.value) {
+ console.log("(Did this automatically)");
+ }
+
+ console.log(`Text: ${rawText.value}`);
+ console.log(`Split text: ${splitRawText.value}`)
 }
 </script>