kan ändra befintliga förkortningar
This commit is contained in:
parent
d4106b41f7
commit
9a8938979c
22
package-lock.json
generated
22
package-lock.json
generated
@ -36,11 +36,13 @@
|
||||
"eslint-plugin-svelte": "^2.46.1",
|
||||
"formsnap": "^1.0.1",
|
||||
"globals": "^15.14.0",
|
||||
"mode-watcher": "^0.5.1",
|
||||
"prettier": "^3.4.2",
|
||||
"prettier-plugin-svelte": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.10",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"svelte-sonner": "^0.3.28",
|
||||
"sveltekit-superforms": "^2.23.1",
|
||||
"tailwind-merge": "^3.0.1",
|
||||
"tailwind-variants": "^0.3.1",
|
||||
@ -6270,6 +6272,16 @@
|
||||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/mode-watcher": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-0.5.1.tgz",
|
||||
"integrity": "sha512-adEC6T7TMX/kzQlaO/MtiQOSFekZfQu4MC+lXyoceQG+U5sKpJWZ4yKXqw846ExIuWJgedkOIPqAYYRk/xHm+w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"svelte": "^4.0.0 || ^5.0.0-next.1"
|
||||
}
|
||||
},
|
||||
"node_modules/mri": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
|
||||
@ -7744,6 +7756,16 @@
|
||||
"svelte": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-sonner": {
|
||||
"version": "0.3.28",
|
||||
"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.28.tgz",
|
||||
"integrity": "sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1"
|
||||
}
|
||||
},
|
||||
"node_modules/sveltekit-superforms": {
|
||||
"version": "2.23.1",
|
||||
"resolved": "https://registry.npmjs.org/sveltekit-superforms/-/sveltekit-superforms-2.23.1.tgz",
|
||||
|
||||
@ -37,11 +37,13 @@
|
||||
"eslint-plugin-svelte": "^2.46.1",
|
||||
"formsnap": "^1.0.1",
|
||||
"globals": "^15.14.0",
|
||||
"mode-watcher": "^0.5.1",
|
||||
"prettier": "^3.4.2",
|
||||
"prettier-plugin-svelte": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.10",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"svelte-sonner": "^0.3.28",
|
||||
"sveltekit-superforms": "^2.23.1",
|
||||
"tailwind-merge": "^3.0.1",
|
||||
"tailwind-variants": "^0.3.1",
|
||||
|
||||
144
src/components/create.svelte
Normal file
144
src/components/create.svelte
Normal file
@ -0,0 +1,144 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import { appState, shortforms, importState } from '$lib/stores.svelte';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import * as Select from '$lib/components/ui/select';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import Button from '$lib/components/ui/button/button.svelte';
|
||||
import { Switch } from '$lib/components/ui/switch/index.js';
|
||||
import { Progress } from '$lib/components/ui/progress';
|
||||
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 { cacheShortforms } from "../modules/shortforms";
|
||||
import { liveQuery } from "dexie";
|
||||
|
||||
import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
|
||||
|
||||
$: abbForm = {
|
||||
shortform: "",
|
||||
phrase: "",
|
||||
target: "",
|
||||
errors: [],
|
||||
};
|
||||
|
||||
let importing = false;
|
||||
let progress = 0;
|
||||
const handleCreate = async (e) => {
|
||||
// abbForm.errors = []
|
||||
e.preventDefault()
|
||||
|
||||
/*
|
||||
id?: number;
|
||||
listid: number;
|
||||
shortform: string;
|
||||
phrase: string;
|
||||
used: Date;
|
||||
uses: number;
|
||||
remind: number, // negative if disabled
|
||||
updated: Date;
|
||||
*/
|
||||
const sf = {
|
||||
listid: abbForm.target.value,
|
||||
shortform: abbForm.shortform,
|
||||
phrase: abbForm.phrase,
|
||||
used: new Date(0),
|
||||
uses: 0,
|
||||
remind: 0,
|
||||
updated: Date.now(),
|
||||
}
|
||||
appState.open = ""
|
||||
db.shortforms.where({listid: sf.listid, shortform: sf.shortform}).first()
|
||||
.then(existing => {
|
||||
sf.id = existing.id
|
||||
db.shortforms.put(sf).then(result => {
|
||||
shortforms.cache = cacheShortforms([sf.listid]);
|
||||
cancelCreate()
|
||||
})
|
||||
})
|
||||
};
|
||||
const cancelCreate = () => {
|
||||
abbForm.shortform = ""
|
||||
abbForm.phrase = ""
|
||||
abbForm.target = {}
|
||||
abbForm.errors = []
|
||||
appState.open = ""
|
||||
};
|
||||
|
||||
const onSelectedChange = (v) => {
|
||||
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")
|
||||
el.focus()
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<Card.Root class="mx-auto w-[490px]">
|
||||
<Card.Header>
|
||||
<Card.Title>Lägg till förkortning</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" on:submit={handleCreate}>
|
||||
<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]" />
|
||||
</div>
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label>Text</Label>
|
||||
<Input id="phraseEl" bind:value={abbForm.phrase} placeholder="" class="w-[290px]" />
|
||||
</div>
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label>Mål</Label>
|
||||
<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>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
{#if abbForm.errors.length > 0}
|
||||
<ScrollArea class="max-h-48 rounded-md">
|
||||
<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}
|
||||
<li class="list-disc">{error}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
{/if}
|
||||
<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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import { importState } from '$lib/stores.svelte';
|
||||
import { appState, importState } from '$lib/stores.svelte';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import * as Select from '$lib/components/ui/select';
|
||||
@ -52,7 +52,8 @@
|
||||
const cancelImport = () => {
|
||||
importState.data = '';
|
||||
importState.errors = [];
|
||||
goto('/');
|
||||
importState.name = "";
|
||||
appState.open = ""
|
||||
};
|
||||
const importDefaultList = () => {
|
||||
importState.data = '';
|
||||
@ -66,7 +67,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<Card.Root class="w-[490px]">
|
||||
<Card.Root class="mx-auto w-[490px]">
|
||||
<Card.Header>
|
||||
<Card.Title>Importera förkortningar</Card.Title>
|
||||
<Card.Description>Nån annan hjälptext.</Card.Description>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { appState, shortforms, textSettings } from '$lib/stores.svelte';
|
||||
let { ref = $bindable() } = $props();
|
||||
|
||||
import { appState, shortforms, initShortformState, textSettings } from '$lib/stores.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
@ -11,23 +13,16 @@
|
||||
|
||||
import * as Select from "$lib/components/ui/select/index.js";
|
||||
|
||||
$: styles = {
|
||||
let styles = $derived({
|
||||
"text-bg": "#333333",
|
||||
"text-fg": "#baff00",
|
||||
"text-font": textSettings.font,
|
||||
"text-size": textSettings.size + "px",
|
||||
}
|
||||
"text-size": textSettings.size + "px"
|
||||
})
|
||||
|
||||
$: cssVarStyles = Object.entries(styles)
|
||||
.map(([key, value]) => `--${key}:${value}`)
|
||||
.join(';');
|
||||
|
||||
$: standardLists = liveQuery( async () => {
|
||||
return await db.lists.toArray()
|
||||
}
|
||||
)
|
||||
let selectedStandardList = {}
|
||||
const selectedStandardListChanged = (v) => {
|
||||
shortforms.standardList = v.value
|
||||
shortforms.cache = cacheShortforms([Number(v.value)]);
|
||||
}
|
||||
let state = {
|
||||
@ -38,6 +33,7 @@
|
||||
let textarea: HTMLTextAreaElement;
|
||||
|
||||
onMount(() => {
|
||||
initShortformState()
|
||||
shortforms.cache = cacheShortforms([890324]);
|
||||
if (browser) {
|
||||
let t = document.getElementById('doc') as HTMLTextAreaElement;
|
||||
@ -45,12 +41,20 @@
|
||||
textarea = t;
|
||||
setTimeout(() => {
|
||||
textarea.focus();
|
||||
console.log('focus the textarea');
|
||||
}, 25);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
const standardLists = $derived(liveQuery( async () => {
|
||||
return await db.lists.toArray()
|
||||
}))
|
||||
let css = Object.entries(styles)
|
||||
.map(([key, value]) => `--${key}:${value}`)
|
||||
.join(';')
|
||||
const cssVarStyles = $derived({css})
|
||||
|
||||
const expand = (e: InputEvent) => {
|
||||
const expander = e.data as string;
|
||||
// console.log("expander:", expander);
|
||||
@ -90,16 +94,11 @@
|
||||
if (e.inputType == 'insertText') {
|
||||
}
|
||||
};
|
||||
/* const hotkeyHandler = (e: KeyboardEvent) => {
|
||||
if (e.key == 'F4') {
|
||||
state.textarea.value = '';
|
||||
}
|
||||
};
|
||||
*/
|
||||
</script>
|
||||
|
||||
<div class="docContainer h-full flex flex-col" role="application" id="docContainer">
|
||||
<textarea
|
||||
bind:this={ref}
|
||||
style="
|
||||
font-size:{textSettings.size}px;
|
||||
font-family:{textSettings.font};
|
||||
@ -112,22 +111,6 @@
|
||||
on:beforeinput={input}
|
||||
bind:value={appState.text}
|
||||
></textarea>
|
||||
<Select.Root
|
||||
selected={selectedStandardList}
|
||||
onSelectedChange={selectedStandardListChanged}
|
||||
class="flex-none"
|
||||
>
|
||||
<Select.Trigger>
|
||||
<Select.Value placeholder="Välj standardlista" />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Group>
|
||||
{#each $standardLists as list}
|
||||
<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
|
||||
{/each}
|
||||
</Select.Group>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
@ -58,6 +58,11 @@ export async function createShortformList(l: List): number {
|
||||
|
||||
}
|
||||
|
||||
export async function createShortform(sf: Shortform): number {
|
||||
return await db.lists.add(sf)
|
||||
|
||||
}
|
||||
|
||||
export async function deleteShortformList(id: number) {
|
||||
await db.shortforms.where("listid").equals(id).delete()
|
||||
await db.lists.where("id").equals(id).delete()
|
||||
|
||||
1
src/lib/components/ui/sonner/index.ts
Normal file
1
src/lib/components/ui/sonner/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as Toaster } from "./sonner.svelte";
|
||||
20
src/lib/components/ui/sonner/sonner.svelte
Normal file
20
src/lib/components/ui/sonner/sonner.svelte
Normal file
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
|
||||
import { mode } from "mode-watcher";
|
||||
|
||||
type $$Props = SonnerProps;
|
||||
</script>
|
||||
|
||||
<Sonner
|
||||
theme={$mode}
|
||||
class="toaster group"
|
||||
toastOptions={{
|
||||
classes: {
|
||||
toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
||||
description: "group-[.toast]:text-muted-foreground",
|
||||
actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
||||
cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
||||
},
|
||||
}}
|
||||
{...$$restProps}
|
||||
/>
|
||||
@ -35,7 +35,21 @@ let selectedColor = 0;
|
||||
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 })
|
||||
export const appState = $state({ text: "", menuOpen: false, open: "" })
|
||||
|
||||
import { toast } from "svelte-sonner";
|
||||
import { db } from "../db/main"
|
||||
|
||||
export const initShortformState = async () => {
|
||||
const lists = await db.lists.toArray()
|
||||
if (shortforms.standardList == "") {
|
||||
if (lists.length > 0) {
|
||||
console.log("Väljer en av standardlistorna")
|
||||
shortforms.standardList = lists[0].id
|
||||
toast("Ingen standardlista vald. Väljer " + lists[0].name)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const selectNextColor = () => {
|
||||
selectedColor += 1
|
||||
|
||||
@ -126,6 +126,13 @@ hotkeys.set("F8", {
|
||||
}
|
||||
})
|
||||
|
||||
hotkeys.set("F2", {
|
||||
action: (e) => {
|
||||
e.preventDefault()
|
||||
appState.open = "create"
|
||||
}
|
||||
})
|
||||
|
||||
hotkeys.set("F11", {
|
||||
action: (e) => {
|
||||
e.preventDefault()
|
||||
@ -152,3 +159,11 @@ hotkeys.set("F12", {
|
||||
goto("/import")
|
||||
}
|
||||
})
|
||||
|
||||
hotkeys.set("Escape", {
|
||||
action: (e) => {
|
||||
e.preventDefault()
|
||||
console.log("Close stuff")
|
||||
appState.open = ""
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,17 +1,30 @@
|
||||
<script lang="ts">
|
||||
import Textarea from '../components/textarea.svelte';
|
||||
import Import from '../components/import/import.svelte';
|
||||
import Create from '../components/create.svelte';
|
||||
import Dashboard from '../components/dashboard.svelte';
|
||||
import { db, deleteShortformList, type Shortform } from '../db/main';
|
||||
import Menu from "../components/menu.svelte";
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { appState } from '$lib/stores.svelte'
|
||||
let loaded = false
|
||||
$effect(() => {
|
||||
appState.open
|
||||
if (loaded) {
|
||||
if (appState.open == "") {
|
||||
textarea.focus()
|
||||
}
|
||||
}
|
||||
loaded = true
|
||||
|
||||
})
|
||||
import { hotkeys } from '../modules/keyboard';
|
||||
let showDashboard: boolean = false;
|
||||
|
||||
import { Toaster } from "$lib/components/ui/sonner";
|
||||
const handleHotkeys = (e: KeyboardEvent) => {
|
||||
hotkeys.get(e.key)?.action(e);
|
||||
};
|
||||
let textarea = null
|
||||
|
||||
</script>
|
||||
<svelte:head>
|
||||
@ -20,15 +33,17 @@
|
||||
<svelte:window on:keydown={handleHotkeys} />
|
||||
|
||||
<div class="h-dvh w-full overflow-hidden" role="application">
|
||||
<div class="h-full">
|
||||
|
||||
<!-- <div class="flex items-center justify-center p-24">
|
||||
<Import />
|
||||
{#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}
|
||||
<div class="h-full">
|
||||
<Menu />
|
||||
<Textarea />
|
||||
<Textarea bind:ref={textarea} />
|
||||
<!-- <Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>-->
|
||||
</div>
|
||||
<!--<Dashboard open={showDashboard} />-->
|
||||
</div>
|
||||
|
||||
<Toaster />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user