qwertyist/skrivert
1
0
Fork 0
Code Issues 4 Releases Wiki Activity

Compare commits

base: qwertyist:02f41e57c108a0c7dca71d0b71489c89d7c16384
Branches Tags
qwertyist:main
..
compare: qwertyist:6fdbc88910950e6f98607aa21f1caad8086198a9
Branches Tags
qwertyist:main

No commits in common. "02f41e57c108a0c7dca71d0b71489c89d7c16384" and "6fdbc88910950e6f98607aa21f1caad8086198a9" have entirely different histories.
02f41e57c1 ... 6fdbc88910

8 changed files with 190 additions and 359 deletions
Show Stats Expand all files Collapse all files

112
src/components/create.svelte
View File

@ -12,23 +12,23 @@
import { Badge } from '$lib/components/ui/badge';
import { Separator } from '$lib/components/ui/separator';
import { db, createShortform, type List, type Shortform } from '../db/main';
import { cacheShortform } from '../modules/shortforms';
import { liveQuery } from 'dexie';
import { cacheShortform } from "../modules/shortforms";
import { liveQuery } from "dexie";
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
$: abbForm = {
shortform: '',
phrase: '',
target: '',
errors: []
shortform: "",
phrase: "",
target: "",
errors: [],
};
let importing = false;
let progress = 0;
const handleCreate = async (e) => {
// abbForm.errors = []
e.preventDefault();
// abbForm.errors = []
e.preventDefault()
/*
id?: number;
@ -42,59 +42,55 @@
*/
const sf = {
listid: abbForm.target.value,
shortform: abbForm.shortform.replace(/\s/g, '').toLowerCase(),
shortform: abbForm.shortform.replace(/\s/g,"").toLowerCase(),
phrase: abbForm.phrase.trim(),
last_used: new Date(0),
uses: 0,
remind: 0,
updated: Date.now()
};
updated: Date.now(),
}
//appState.open = ""
db.shortforms
.where('[listid+shortform]')
.equals([sf.listid, sf.shortform])
.first()
.then((existing) => {
sf.id = existing.id;
db.shortforms.put(sf).then((result) => {
db.shortforms.where("[listid+shortform]").equals([sf.listid, sf.shortform]).first()
.then(existing => {
sf.id = existing.id
db.shortforms.put(sf).then(result => {
cacheShortform(sf);
appState.open = '';
});
appState.open = ""
})
})
.catch(() => {
db.shortforms.put(sf).then((result) => {
db.shortforms.put(sf).then(result => {
cacheShortform(sf);
appState.open = '';
});
});
appState.open = ""
})
})
};
const cancelCreate = () => {
abbForm.shortform = '';
abbForm.phrase = '';
abbForm.target = {};
abbForm.errors = [];
appState.open = '';
abbForm.shortform = ""
abbForm.phrase = ""
abbForm.target = {}
abbForm.errors = []
appState.open = ""
};
const onSelectedChange = (v) => {
console.log(v);
abbForm.target = v;
};
let selectedLists = [];
console.log(v)
abbForm.target = v
}
let selectedLists = []
onMount(() => {
db.lists.get(shortforms.standardList).then((l) => {
selectedLists.push({ value: l.id, label: l.name });
abbForm.target = { value: l.id, label: l.name };
});
console.log('fokusera på input och mata med medhavd data');
const el = document.getElementById('shortformEl');
if (el) {
setTimeout(() => {
el.focus();
}, 15);
}
db.lists.get(shortforms.standardList).then(l => {
selectedLists.push({ value: l.id, label: l.name })
abbForm.target = { value: l.id, label: l.name }
})
console.log("fokusera på input och mata med medhavd data")
const el = document.getElementById("shortformEl")
el.focus()
});
</script>
<Card.Root class="mx-auto w-[490px]">
@ -103,22 +99,10 @@
<Card.Description></Card.Description>
</Card.Header>
<Card.Content class="mx-auto">
<form
class="grid gap-4 py-4"
method="post"
enctype="multipart/form-data"
on:submit={handleCreate}
autocomplete="off"
>
<form class="grid gap-4 py-4" method="post" enctype="multipart/form-data" on:submit={handleCreate} autocomplete="off">
<div class="grid grid-cols-4 items-center gap-4">
<Label>Förkortning</Label>
<Input
id="shortformEl"
bind:value={abbForm.shortform}
focus
placeholder=""
class="w-[290px]"
/>
<Input id="shortformEl" bind:value={abbForm.shortform} focus placeholder="" class="w-[290px]" />
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label>Text</Label>
@ -126,21 +110,24 @@
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label>Mål</Label>
<Select.Root selected={abbForm.target} {onSelectedChange}>
<Select.Root selected={abbForm.target} onSelectedChange={onSelectedChange}>
<Select.Trigger class="w-[290px]">
<Select.Value placeholder="Ingen lista vald" />
</Select.Trigger>
<Select.Content>
{#each selectedLists as list}
<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
<Select.Item
value={list.id}
label={list.name}
>{list.name}</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
{#if abbForm.errors.length > 0}
<ScrollArea class="max-h-48 rounded-md">
<div class="border-l-4 border-orange-500 bg-orange-100 p-4 text-orange-700" role="alert">
<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
<p class="font-bold">Fel vid import</p>
<ul class="p-6">
{#each abbForms.errors as error}
@ -160,3 +147,4 @@
</Card.Footer>
-->
</Card.Root>

4
src/components/import/import.svelte
View File

@ -21,7 +21,7 @@
$: form = {
textarea: '',
name: '',
type: true
type: false
};
let importing = false;
let progress = 0;
@ -92,7 +92,7 @@ förkn=förkortningen
<Input bind:value={form.name} placeholder="Döp förkortningslistan" class="w-[290px]" />
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label>Skapa ämneslista</Label>
<Label>Prioritera lista</Label>
<Switch bind:checked={form.type} />
</div>

118
src/components/listselector.svelte
View File

@ -1,118 +0,0 @@
<script>
import { onMount } from 'svelte';
import * as Card from '$lib/components/ui/card/index';
import * as Select from '$lib/components/ui/select';
import { Label } from '$lib/components/ui/label';
import { db } from '../db/main';
import { liveQuery } from 'dexie';
import { shortforms } from '$lib/stores.svelte';
import { cacheShortforms } from '../modules/shortforms';
const onSelectedStandardListChange = (e) => {
console.log('onSelectedStandardListChange', e);
shortforms.standardList = e.value;
cacheShortforms([Number(shortforms.standardList), Number(shortforms.subjectList)]);
};
const onSelectedSubjectListChange = (e) => {
if (e.value == 0) {
listSelectorForm.subject = { value: '', label: '' };
shortforms.subjectList = '';
cacheShortforms([Number(shortforms.standardList)]);
return;
}
console.log('onSelectedSubjectListChange', e);
shortforms.subjectList = e.value;
cacheShortforms([Number(shortforms.standardList), Number(shortforms.subjectList)]);
};
const onSubmit = (e) => {
e.preventDefault();
console.log('submit', listSelectorForm);
};
$: listSelectorForm = {
standard: { value: '', label: '' },
subject: {}
};
const getListFromId = (lists, id) => {
return lists.filter((l) => l.id == id)[0];
};
let standardLists = [];
let subjectLists = [];
onMount(() => {
//console.log($state.snapshot(shortforms));
db.lists.toArray().then((lists) => {
standardLists = lists.filter((l) => l.type == 0);
subjectLists = lists.filter((l) => l.type == 1);
const standard = getListFromId(standardLists, shortforms.standardList);
listSelectorForm.standard = { value: standard.id, label: standard.name };
const subject = getListFromId(subjectLists, shortforms.subjectList);
listSelectorForm.subject = { value: subject.id, label: subject.name };
console.log(listSelectorForm);
});
});
</script>
<Card.Root class="mx-auto w-[490px]">
<Card.Header>
<Card.Title>Välj förkortningslistor</Card.Title>
<Card.Description></Card.Description>
</Card.Header>
<Card.Content class="mx-auto">
<form
class="grid gap-4 py-4"
method="post"
enctype="multipart/form-data"
onsubmit={onSubmit}
autocomplete="off"
>
<div class="grid grid-cols-4 items-center gap-4">
<Label>Standardlista</Label>
<Select.Root
selected={listSelectorForm.standard}
onSelectedChange={onSelectedStandardListChange}
>
<Select.Trigger class="w-[290px]">
<Select.Value placeholder="Ingen lista vald" />
</Select.Trigger>
<Select.Content>
{#each standardLists as list}
<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label>Ämneslista</Label>
<Select.Root
selected={listSelectorForm.subject}
onSelectedChange={onSelectedSubjectListChange}
disabled={subjectLists.length < 1}
>
<Select.Trigger class="w-[290px]">
<Select.Value placeholder="Ingen lista vald" />
</Select.Trigger>
<Select.Content>
<Select.Item value={0} label="Ingen lista vald">Ingen lista vald</Select.Item>
{#each subjectLists as list}
<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
<button type="submit" class="hidden" />
</form>
</Card.Content>
<!--
<Card.Footer class="flex justify-between">
<Button on:click={cancelCreate} variant="outline">Avbryt</Button>
<Button on:click={handleCreate}>Importera</Button>
</Card.Footer>
-->
</Card.Root>

38
src/components/menu.svelte
View File

@ -1,21 +1,13 @@
<script>
import { appState } from '$lib/stores.svelte';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
import { appState } from "$lib/stores.svelte"
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index";
import { Button } from '$lib/components/ui/button';
import Gear from 'svelte-radix/Gear.svelte';
let closeFocus = 'textarea#doc.textarea';
import Gear from "svelte-radix/Gear.svelte";
</script>
<DropdownMenu.Root
open={appState.menuOpen}
onOpenChange={(v) => {
appState.menuOpen = v;
}}
{closeFocus}
>
<DropdownMenu.Root open={appState.menuOpen} onOpenChange={(v) => {appState.menuOpen = v}} closeFocus="textarea#doc.textarea">
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" class="absolute right-2 top-2" size="icon">
<Button builders={[builder]} variant="ghost" class="absolute top-2 right-2" size="icon">
<Gear class="h-4 w-4" />
</Button>
</DropdownMenu.Trigger>
@ -23,11 +15,7 @@
<DropdownMenu.Label>Inställningar</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Group>
<DropdownMenu.Item
on:click={() => {
appState.open = 'create';
}}
>
<DropdownMenu.Item on:click={() => {appState.open="create"}}>
Lägg till förkortning
<DropdownMenu.Shortcut>F2</DropdownMenu.Shortcut>
</DropdownMenu.Item>
@ -38,14 +26,6 @@
</DropdownMenu.Group>
<DropdownMenu.Separator />
<DropdownMenu.Group>
<DropdownMenu.Item
on:click={() => {
appState.open = 'selectLists';
}}
>
Välj listor
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Item>
Förkortningar
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
@ -84,12 +64,10 @@
Hjälp
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Item
>Feedback
<DropdownMenu.Item>Feedback
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Item
>Användarkonto
<DropdownMenu.Item>Användarkonto
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Separator />

9
src/lib/stores.svelte.ts
View File

@ -32,7 +32,7 @@ const colorThemes = [
let selectedColor = 0;
export const shortforms = $state({ standardList: "", subjectList: "", cache: new Map() })
export const shortforms = $state({ standardList: "", subjectLists: [], cache: new Map() })
export const importState = $state({ data: "", errors: [] })
export const textSettings = $state({ font: "Arial", size: 30, colors: colorSetting, padding: 0, lineheight: 1 })
export const appState = $state({ text: "", menuOpen: false, open: "" })
@ -58,15 +58,10 @@ export const selectNextColor = () => {
textSettings.colors = colorThemes[(selectedColor % 6)]
}
export const toggleMenuOpen = (force = undefined) => {
if (force == undefined) {
export const toggleMenuOpen = () => {
appState.menuOpen = !appState.menuOpen
} else {
appState.menuOpen = force
}
}
export const incTextSize = () => {
console.log(textSettings.size)
if (textSettings.size < 200) {

3
src/modules/keyboard.ts
View File

@ -9,7 +9,7 @@ export const defaultExpanders: Map<string, ExpanderType> = new Map();
export const hotkeys: Map<string, any> = new Map();
defaultExpanders.set("\n", {
key: { keyCode: 188, shiftKey: false },
key: { keyCode: 13, shiftKey: false },
symbol: "\n",
fullstop: true,
});
@ -136,7 +136,6 @@ hotkeys.set("F8", {
hotkeys.set("F2", {
action: (e) => {
e.preventDefault()
toggleMenuOpen(false)
appState.open = "create"
}
})

2
src/modules/shortforms.ts
View File

@ -49,8 +49,6 @@ export function cacheShortforms(lists: Array<number> = []) {
})
}
shortforms.cache = cache
return cache;
}
export function expandShortform(

45
src/routes/+page.svelte
View File

@ -2,55 +2,46 @@
import Textarea from '../components/textarea.svelte';
import Import from '../components/import/import.svelte';
import Create from '../components/create.svelte';
import ListSelector from '../components/listselector.svelte';
import Dashboard from '../components/dashboard.svelte';
import { db, deleteShortformList, type Shortform } from '../db/main';
import Menu from '../components/menu.svelte';
import Menu from "../components/menu.svelte";
import { Button } from '$lib/components/ui/button';
import { appState } from '$lib/stores.svelte';
let loaded = false;
import { appState } from '$lib/stores.svelte'
let loaded = false
$effect(() => {
appState.open;
appState.open
if (loaded) {
if (appState.open == '') {
textarea.focus();
if (appState.open == "") {
textarea.focus()
}
if (appState.open == 'dashboard') {
console.log('should open dashboard');
showDashboard = true;
if (appState.open == "dashboard") {
console.log("should open dashboard")
showDashboard = true
}
}
loaded = true;
});
loaded = true
})
import { hotkeys } from '../modules/keyboard';
let showDashboard: boolean = true;
import { Toaster } from '$lib/components/ui/sonner';
import { Toaster } from "$lib/components/ui/sonner";
const handleHotkeys = (e: KeyboardEvent) => {
hotkeys.get(e.key)?.action(e);
};
let textarea = null;
</script>
let textarea = null
</script>
<svelte:head>
<title>SKRIVERT</title>
<title>SKRIVERT</title>
</svelte:head>
<svelte:window on:keydown={handleHotkeys} />
<div class="h-dvh w-full overflow-hidden" role="application">
{#if appState.open == 'create'}
<div
class="fixed left-0 right-0 top-0 z-50 flex h-[calc(100%-1rem)] max-h-full w-full items-center justify-center align-middle md:inset-0"
>
{#if appState.open == "create"}
<div class="fixed flex top-0 right-0 left-0 z-50 justify-center items-center align-middle w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<Create />
</div>
{/if}
{#if appState.open == 'selectLists'}
<div
class="fixed left-0 right-0 top-0 z-50 flex h-[calc(100%-1rem)] max-h-full w-full items-center justify-center align-middle md:inset-0"
>
<ListSelector />
</div>
{/if}
<div class="h-full">
<Menu />
<Textarea bind:ref={textarea} />