diff options
Diffstat (limited to 'src/webapp')
| -rw-r--r-- | src/webapp/src/routes/app/_header.svelte | 47 | ||||
| -rw-r--r-- | src/webapp/src/routes/app/modals/file-import-modal.svelte | 126 | ||||
| -rw-r--r-- | src/webapp/src/routes/app/modals/new-access-token-modal.svelte | 8 |
3 files changed, 143 insertions, 38 deletions
diff --git a/src/webapp/src/routes/app/_header.svelte b/src/webapp/src/routes/app/_header.svelte index 04eb405..d96e73c 100644 --- a/src/webapp/src/routes/app/_header.svelte +++ b/src/webapp/src/routes/app/_header.svelte @@ -13,22 +13,20 @@ import {end_session_async} from "@/lib/api/account"; import {clear_entries} from "@/lib/stores/entries"; import AccessTokensModal from "./modals/access-tokens-modal.svelte"; + import FileImportModal from "./modals/file-import-modal.svelte"; let profile_dropdown_is_open = false; let options_dropdown_is_open = false; let enable_dark_theme = get(preferences).theme === ApplicationTheme.DARK; let enable_site_report = get(preferences).enable_site_report; let access_token_modal_is_open = false; + let file_import_modal_is_open = false; preferences.subscribe(e => { enable_site_report = e.enable_site_report; enable_dark_theme = e.theme === ApplicationTheme.DARK; }); - function start_file_import() { - alert("Not implemented"); - } - function download_data() { const anchor = document.createElement("a"); anchor.href = api_base("account/archive"); @@ -36,30 +34,6 @@ anchor.remove(); } - function manage_profile() { - alert("Not implemented"); - } - - function connect_github() { - alert("Not implemented"); - } - - function manage_access_tokens() { - access_token_modal_is_open = true; - } - - function on_access_tokens_modal_close() { - access_token_modal_is_open = false; - } - - function toggle_site_report() { - set_site_report_state(!enable_site_report); - } - - function toggle_dark_theme() { - set_theme(enable_dark_theme ? ApplicationTheme.LIGHT : ApplicationTheme.DARK); - } - async function handle_logout() { await clear_session_async(); await end_session_async(); @@ -69,7 +43,10 @@ </script> <AccessTokensModal open={access_token_modal_is_open} - on:close={on_access_tokens_modal_close}/> + on:close={() => access_token_modal_is_open = false}/> + +<FileImportModal open="{file_import_modal_is_open}" + on:close={() => file_import_modal_is_open = false}/> <Header company="IOL" platformName="Bookmark Thing"> @@ -81,11 +58,11 @@ transition={false}> <HeaderPanelLinks> <HeaderPanelDivider>Actions</HeaderPanelDivider> - <HeaderPanelLink on:click={start_file_import}>Import data from file</HeaderPanelLink> - <HeaderPanelLink on:click={connect_github}>Connect github</HeaderPanelLink> + <HeaderPanelLink on:click={() => alert("Not implemented")}>Import data from file</HeaderPanelLink> + <HeaderPanelLink on:click={() => alert("Not implemented")}>Connect github</HeaderPanelLink> <HeaderPanelDivider>Options</HeaderPanelDivider> <HeaderPanelToggle size="sm" - on:toggle={toggle_site_report} + on:toggle={() => set_site_report_state(!enable_site_report)} toggled="{enable_site_report}"> <span>Enable site report</span> <Tooltip tooltipBodyId="tooltip-body" @@ -99,7 +76,7 @@ </Tooltip> </HeaderPanelToggle> <HeaderPanelToggle size="sm" - on:toggle={toggle_dark_theme} + on:toggle={() => set_theme(enable_dark_theme ? ApplicationTheme.LIGHT : ApplicationTheme.DARK)} toggled="{enable_dark_theme}"> Use dark theme </HeaderPanelToggle> @@ -112,8 +89,8 @@ transition={false}> <HeaderPanelLinks> <HeaderPanelDivider>Logged in as {$session?.username}</HeaderPanelDivider> - <HeaderPanelLink on:click={manage_profile}>Manage profile</HeaderPanelLink> - <HeaderPanelLink on:click={manage_access_tokens}>Manage access tokens</HeaderPanelLink> + <HeaderPanelLink on:click={() => alert("Not implemented")}>Manage profile</HeaderPanelLink> + <HeaderPanelLink on:click={() => access_token_modal_is_open = true}>Manage access tokens</HeaderPanelLink> <HeaderPanelLink on:click={download_data}>Download data</HeaderPanelLink> <HeaderPanelLink on:click={handle_logout}>Log out</HeaderPanelLink> </HeaderPanelLinks> diff --git a/src/webapp/src/routes/app/modals/file-import-modal.svelte b/src/webapp/src/routes/app/modals/file-import-modal.svelte index e69de29..b013688 100644 --- a/src/webapp/src/routes/app/modals/file-import-modal.svelte +++ b/src/webapp/src/routes/app/modals/file-import-modal.svelte @@ -0,0 +1,126 @@ +<script lang="ts"> + import {Modal, FileUploader, Select, SelectItem, Form, FormGroup} from "carbon-components-svelte"; + + export let open; + + let available_fields = []; + let import_json = []; + + const mappings = { + can_map: false, + url: { + value: "", + error: "", + validate() { + } + }, + tags: { + value: "", + error: "", + available_fields: [], + is_array: false, + validate() { + console.log(import_json); + const first_tag = import_json[0][mappings.tags.value]; + console.log(first_tag); + if (typeof first_tag === "object") { + for (const field in first_tag) { + mappings.tags.available_fields.push(field); + } + console.log(mappings.tags.available_fields); + mappings.tags.is_array = true; + } else { + mappings.tags.is_array = false; + } + } + }, + description: { + value: "", + error: "", + validate() { + } + } + }; + + async function file_input_change(e) { + const file = e.target.files[0]; + if (!file) return; + const text = await file.text(); + import_json = JSON.parse(text); + const first_entry = import_json[0]; + if (typeof first_entry !== "object") return; + for (const field in first_entry) { + available_fields.push(field); + } + mappings.can_map = available_fields.length >= 3; + } +</script> + +<Modal size="lg" + passiveModal="{true}" + preventCloseOnClickOutside + modalHeading="Import entries from a json file" + on:close + bind:open={open}> + + {#if mappings.can_map} + <Form> + <FormGroup legendText="Mappings" + noMargin + message + messageText="Map the fields you want to import"> + <Select inline + labelText="Url" + error="{mappings.url.error !== ''}" + errorMessage="{mappings.url.error}" + on:change={mappings.url.validate} + bind:selected={mappings.url.value}> + {#each available_fields as field} + <SelectItem value="{field}" + text="{field}"/> + {/each} + </Select> + <Select inline + labelText="Tags" + error="{mappings.tags.error !== ''}" + errorMessage="{mappings.tags.error}" + on:change={mappings.tags.validate} + bind:selected={mappings.tags.value}> + {#each available_fields as field} + <SelectItem value="{field}" + text="{field}"/> + {/each} + </Select> + {#if mappings.tags.available_fields.length > 0} + <Select inline + labelText="Tags" + error="{mappings.tags.error !== ''}" + errorMessage="{mappings.tags.error}" + bind:selected={mappings.tags.value}> + {#each mappings.tags.available_fields as field} + <SelectItem value="{field}" + text="{field}"/> + {/each} + </Select> + {/if} + <Select inline + labelText="Description" + error="{mappings.description.error !== ''}" + errorMessage="{mappings.description.error}" + on:change={mappings.description.validate} + bind:selected={mappings.description.value}> + {#each available_fields as field} + <SelectItem value="{field}" + text="{field}"/> + {/each} + </Select> + </FormGroup> + </Form> + {/if} + <FileUploader + buttonLabel="Select json file" + accept={[".json"]} + on:change={file_input_change} + status="" + /> +</Modal> diff --git a/src/webapp/src/routes/app/modals/new-access-token-modal.svelte b/src/webapp/src/routes/app/modals/new-access-token-modal.svelte index 8999b0b..c130328 100644 --- a/src/webapp/src/routes/app/modals/new-access-token-modal.svelte +++ b/src/webapp/src/routes/app/modals/new-access-token-modal.svelte @@ -6,17 +6,19 @@ import {createEventDispatcher} from "svelte"; export let open = false; - const default_expires = (new Date().setTime(new Date().getTime() + 1)); + const date = new Date(); + date.setDate(date.getDate() + 1); + const default_expiry_date = date; const dispatch = createEventDispatcher(); const form = { error: "", loading: false, expiry_date: { - value: default_expires, + value: default_expiry_date, error: "", warning: "", reset() { - form.expiry_date.value = default_expires; + form.expiry_date.value = default_expiry_date; }, change() { }, |