diff --git a/package.json b/package.json index 0b694de..e62d8e1 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@vue/compiler-sfc": "3.0.0-beta.15", "copy-webpack-plugin": "^6.0.2", "css-loader": "^3.6.0", + "dexie": "^3.0.1", "favicons-webpack-plugin": "^3.0.1", "file-loader": "^6.0.0", "html-webpack-plugin": "^4.3.0", diff --git a/src/lib/card.ts b/src/lib/card.ts index 5e260f3..d1c5984 100644 --- a/src/lib/card.ts +++ b/src/lib/card.ts @@ -1,11 +1,9 @@ -import randomId from './randomId' -import { Card, CardSize } from '../types' +import { ICard, CardSize } from '../types' -export function defaultCard (): Card { +export function defaultCard (): ICard { return { - id: `c${randomId()}`, + id: 0, name: 'no title yet', - count: 1, tags: [], icon: 'robe', content: { diff --git a/src/lib/deck.ts b/src/lib/deck.ts index 049b5e7..687d662 100644 --- a/src/lib/deck.ts +++ b/src/lib/deck.ts @@ -1,9 +1,8 @@ -import randomId from './randomId' -import { Deck, CardSize, PageSize, Arrangement } from '../types' +import { IDeck, CardSize, PageSize, Arrangement } from '../types' -export function defaultDeck (): Deck { +export function defaultDeck (): IDeck { return { - id: randomId(), + id: 0, icon: 'robe', name: 'the nameless', description: '', diff --git a/src/state.ts b/src/state.ts index 5760d0c..bafcdf2 100644 --- a/src/state.ts +++ b/src/state.ts @@ -1,6 +1,7 @@ import { reactive, ref, Ref } from 'vue' -import { State, Notification, Deck } from './types' +import { State, Notification, IDeck } from './types' import { defaultDeck } from './lib/deck' +import { DeckDB } from './storage' interface Payload { [key: string]: any; @@ -27,7 +28,7 @@ export const stateActions = { notification.dismissed = true notifications.value = notifications.value.filter(note => !note.dismissed) }, - 'decks/new' (): Deck { + 'decks/new' (): IDeck { return defaultDeck() } } @@ -45,4 +46,14 @@ export function useState (field: string): { [key: string]: any } { return { collection, actions } } +const deckDB = new DeckDB() +console.log('deck db', deckDB) +deckDB.putDeck(defaultDeck()).then(() => { + return deckDB.decks.toArray() +}).then(decks => { + console.log('Created Decks DB', decks) +}).catch(error => { + console.error('Cannot use in-browser database. This happens for example in Firefox when used in private mode. Unfortunately there is no fix. Please use this app outside of private mode. You can read more about the issue here: https://bugzilla.mozilla.org/show_bug.cgi?id=781982 and here: https://bugzilla.mozilla.org/show_bug.cgi?id=1639542', error) +}) + export default reactive(state) diff --git a/src/storage.ts b/src/storage.ts new file mode 100644 index 0000000..1783591 --- /dev/null +++ b/src/storage.ts @@ -0,0 +1,52 @@ +import Dexie from 'dexie' +import { IDeck, ICard } from './types' + +interface IDeckTable { + id?: number; + name: string; + description: string; + color: string; + icon: string; + cards: number[]; // array of card IDs + cardSize: string; + arrangement: string; + pageSize: string; + roundedCorners: boolean; +} + +export class DeckDB extends Dexie { + public decks: Dexie.Table + public cards: Dexie.Table + public tags: Dexie.Table + + public constructor () { + super('DeckDB') + console.log('initializing deck db') + + this.version(1).stores({ + decks: '++id,name', + cards: '++id,name,*tags', + tags: '&tag' + }) + + this.decks = this.table('decks') + this.cards = this.table('cards') + this.tags = this.table('tags') + console.log('deck db initialized', this) + } + + public async putDeck (deck: IDeck) { + const cards = await this.cards.bulkPut(deck.cards, { allKeys: true }) + await this.decks.put({ ...deck, cards }) + } + + public async putCard (card: ICard, deckId: number) { + const cardId = await this.cards.put(card) + const deck = await this.decks.get(deckId) + + if (deck && deck.cards.indexOf(cardId) < 0) { + deck.cards.push(cardId) + await this.decks.put(deck) + } + } +} diff --git a/src/types.ts b/src/types.ts index a6c977e..b554c17 100644 --- a/src/types.ts +++ b/src/types.ts @@ -28,35 +28,34 @@ export interface KV { [key: string]: V; } -export interface ContentBlock { +export interface IContentBlock { type: string; data: object; } -export interface CardContent { +export interface ICardContent { time: number; - blocks: ContentBlock[]; + blocks: IContentBlock[]; version: string; } -export interface Card { - id: string; +export interface ICard { + id: number; name: string; - count: number; tags: string[]; icon: string; - content: CardContent; + content: ICardContent; backIcon?: string; color?: string; } -export interface Deck { - id: string; +export interface IDeck { + id: number; name: string; description: string; color: string; icon: string; - cards: Card[]; + cards: ICard[]; cardSize: CardSize; arrangement: Arrangement; pageSize: PageSize; @@ -68,7 +67,7 @@ export interface Settings { } export interface StoredSettings { - decks: Deck[]; + decks: IDeck[]; defaults: Settings; } @@ -81,6 +80,6 @@ export interface Notification { export interface State { settings: Ref; - decks: Ref; + decks: Ref; notifications: Ref; } diff --git a/yarn.lock b/yarn.lock index 4e7632c..211d423 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1976,6 +1976,11 @@ detect-node@^2.0.4: resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c" integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw== +dexie@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/dexie/-/dexie-3.0.1.tgz#faafeb94be0d5e18b25d700546a2c05725511cfc" + integrity sha512-/s4KzlaerQnCad/uY1ZNdFckTrbdMVhLlziYQzz62Ff9Ick1lHGomvTXNfwh4ApEZATyXRyVk5F6/y8UU84B0w== + diffie-hellman@^5.0.0: version "5.0.3" resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"