Add flashcard

src/background/background.ts

@@ -1,4 +1,4 @@
-import { browser, Runtime, Tabs } from "webextension-polyfill-ts";
+import { browser, Runtime } from "webextension-polyfill-ts";
 import { GTranslateScraper } from "./gtranslate_scraper";
 import { Flashcards } from "./database";
 import { Communicator, commandKinds } from "../communication";
@@ -10,9 +10,8 @@ const scraper = new GTranslateScraper();
 com.translateCallback = (toTranslate) => scraper.translate(toTranslate);
 
 const db = new Flashcards();
-com.addFlashcardCallback = db.addFlashcard;
+com.addFlashcardCallback = (c) => db.addFlashcard(c);
-com.removeFlashcardCallback = db.removeFlashcard;
+com.removeFlashcardCallback = (c) => db.removeFlashcard(c);
-console.log(db);
 
 const getTabID = async (s: Runtime.MessageSender): Promise<number> => {
 	if (s.tab?.id) return s.tab.id;

src/frontend/content_script/Translated.svelte

@@ -1,5 +1,18 @@
 <script lang="ts">
+	import { Communicator } from "../../communication";
+
 	export let trans: Translation;
+	let card: Flashcard;
+	$: card = undefined;
+
+	const addFlashcard = async () => {
+		card = await Communicator.addFlashcard(trans);
+	};
+
+	const removeFlashcard = async () => {
+		await Communicator.removeFlashcard(card);
+		card = undefined;
+	};
 </script>
 
 <style lang="scss">
@@ -7,12 +20,44 @@
 		display: flex;
 		align-items: center;
 	}
+
+	span {
+		margin-right: 0.7em;
+	}
+
 	button {
+		color: white;
+		font-size: 0.8em;
+		border: 0;
+		min-width: 9ch;
+		border-radius: 2px;
 		min-height: 100%;
 	}
+
+	.remove {
+		background-color: red;
+	}
+
+	.add {
+		background-color: #25a35a;
+	}
 </style>
 
 <div class="translatedContainer">
 	<span>{trans.result}</span>
-	<button>a</button>
+
+	{#if !card}
+		<button on:click={addFlashcard} class="add">
+			Add
+			<br />
+			card
+		</button>
+	{:else}
+		<button on:click={removeFlashcard} class="remove">
+			Remove
+			<br />
+			card
+		</button>
+	{/if}
+
 </div>