Add flashcard

This commit is contained in:
a 2020-08-11 16:34:33 +02:00
parent 9053107b5d
commit 25aadab4a0
2 changed files with 49 additions and 5 deletions

View file

@ -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 { GTranslateScraper } from "./gtranslate_scraper";
import { Flashcards } from "./database"; import { Flashcards } from "./database";
import { Communicator, commandKinds } from "../communication"; import { Communicator, commandKinds } from "../communication";
@ -10,9 +10,8 @@ const scraper = new GTranslateScraper();
com.translateCallback = (toTranslate) => scraper.translate(toTranslate); com.translateCallback = (toTranslate) => scraper.translate(toTranslate);
const db = new Flashcards(); 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> => { const getTabID = async (s: Runtime.MessageSender): Promise<number> => {
if (s.tab?.id) return s.tab.id; if (s.tab?.id) return s.tab.id;

View file

@ -1,5 +1,18 @@
<script lang="ts"> <script lang="ts">
import { Communicator } from "../../communication";
export let trans: Translation; 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> </script>
<style lang="scss"> <style lang="scss">
@ -7,12 +20,44 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
span {
margin-right: 0.7em;
}
button { button {
color: white;
font-size: 0.8em;
border: 0;
min-width: 9ch;
border-radius: 2px;
min-height: 100%; min-height: 100%;
} }
.remove {
background-color: red;
}
.add {
background-color: #25a35a;
}
</style> </style>
<div class="translatedContainer"> <div class="translatedContainer">
<span>{trans.result}</span> <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> </div>