Add flashcard
This commit is contained in:
parent
9053107b5d
commit
25aadab4a0
2 changed files with 49 additions and 5 deletions
|
@ -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.removeFlashcardCallback = db.removeFlashcard;
|
||||
console.log(db);
|
||||
com.addFlashcardCallback = (c) => db.addFlashcard(c);
|
||||
com.removeFlashcardCallback = (c) => db.removeFlashcard(c);
|
||||
|
||||
const getTabID = async (s: Runtime.MessageSender): Promise<number> => {
|
||||
if (s.tab?.id) return s.tab.id;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue