diff --git a/src/components/dialogs/ImportAPIDialog.svelte b/src/components/dialogs/ImportAPIDialog.svelte index 2d48895..121130e 100644 --- a/src/components/dialogs/ImportAPIDialog.svelte +++ b/src/components/dialogs/ImportAPIDialog.svelte @@ -19,7 +19,7 @@ import NowCast from './dataSources/Nowcast.svelte'; import CovidHosp from './dataSources/COVIDHosp.svelte'; import CoviDcast from './dataSources/COVIDcast.svelte'; - import { navMode } from '../../store'; + import { navMode, storeApiKeys } from '../../store'; import { NavMode } from '../chartUtils'; const dispatch = createEventDispatcher(); @@ -173,10 +173,26 @@ {/if} - +
+
+ + +
+
+ + diff --git a/src/components/dialogs/dataSources/CDC.svelte b/src/components/dialogs/dataSources/CDC.svelte index 3740151..ace1d29 100644 --- a/src/components/dialogs/dataSources/CDC.svelte +++ b/src/components/dialogs/dataSources/CDC.svelte @@ -3,16 +3,22 @@ import { cdcLocations as regions } from '../../../data/data'; import SelectField from '../inputs/SelectField.svelte'; import TextField from '../inputs/TextField.svelte'; + import { apiKey } from '../../../store'; export let id: string; let locations = regions[0].value; - let auth = ''; export function importDataSet() { - return importCDC({ locations, auth }); + return importCDC({ locations, auth: $apiKey }); } - + diff --git a/src/components/dialogs/dataSources/COVIDcast.svelte b/src/components/dialogs/dataSources/COVIDcast.svelte index 074c881..9da4bef 100644 --- a/src/components/dialogs/dataSources/COVIDcast.svelte +++ b/src/components/dialogs/dataSources/COVIDcast.svelte @@ -4,15 +4,14 @@ import type { LabelValue } from '../../../data/data'; import SelectField from '../inputs/SelectField.svelte'; import TextField from '../inputs/TextField.svelte'; + import { apiKey } from '../../../store'; export let id: string; - let api_key = ''; let data_source = ''; let signal = ''; let geo_type = ''; let geo_value = ''; - let form_key = ''; let valid_key = true; let dataSources: (LabelValue & { signals: string[] })[] = []; @@ -36,12 +35,11 @@ }; function fetchMetadata() { - fetchCOVIDcastMeta(form_key).then((res) => { + fetchCOVIDcastMeta($apiKey).then((res) => { if (res.length == 0) { valid_key = false; } else { valid_key = true; - api_key = form_key; // API key is valid -> use it to fetch data later on geoTypes = [...new Set(res.map((d) => d.geo_type))]; const byDataSource = new Map(); for (const row of res) { @@ -69,10 +67,10 @@ }); export function importDataSet() { - return fetchCOVIDcastMeta(api_key).then((res) => { + return fetchCOVIDcastMeta($apiKey).then((res) => { const meta = res.filter((row) => row.data_source === data_source && row.signal === signal); const time_type = meta[0].time_type; - return importCOVIDcast({ data_source, signal, geo_type, geo_value, time_type, api_key }); + return importCOVIDcast({ data_source, signal, geo_type, geo_value, time_type, api_key: $apiKey }); }); } @@ -89,7 +87,7 @@ class:uk-form-danger={!valid_key} name="api_key" required={false} - bind:value={form_key} + bind:value={$apiKey} on:input={debounce(() => fetchMetadata(), 500)} /> {#if !valid_key} diff --git a/src/components/dialogs/dataSources/FluView.svelte b/src/components/dialogs/dataSources/FluView.svelte index 00ce0ec..3fc4cad 100644 --- a/src/components/dialogs/dataSources/FluView.svelte +++ b/src/components/dialogs/dataSources/FluView.svelte @@ -1,6 +1,7 @@ @@ -23,7 +23,7 @@ id="{id}-auth" name="auth" label="Auth Key" - bind:value={auth} + bind:value={$apiKey} required={false} placeholder="authorization token" /> diff --git a/src/components/dialogs/dataSources/GHT.svelte b/src/components/dialogs/dataSources/GHT.svelte index 0c2102c..b0f12f7 100644 --- a/src/components/dialogs/dataSources/GHT.svelte +++ b/src/components/dialogs/dataSources/GHT.svelte @@ -1,20 +1,26 @@ - + diff --git a/src/components/dialogs/dataSources/Quidel.svelte b/src/components/dialogs/dataSources/Quidel.svelte index dd79cca..f4b8ebf 100644 --- a/src/components/dialogs/dataSources/Quidel.svelte +++ b/src/components/dialogs/dataSources/Quidel.svelte @@ -1,18 +1,24 @@ - + diff --git a/src/components/dialogs/dataSources/Sensors.svelte b/src/components/dialogs/dataSources/Sensors.svelte index d47c9d1..0a577ce 100644 --- a/src/components/dialogs/dataSources/Sensors.svelte +++ b/src/components/dialogs/dataSources/Sensors.svelte @@ -1,20 +1,26 @@ - + diff --git a/src/components/dialogs/dataSources/Twitter.svelte b/src/components/dialogs/dataSources/Twitter.svelte index d3800d5..950c58e 100644 --- a/src/components/dialogs/dataSources/Twitter.svelte +++ b/src/components/dialogs/dataSources/Twitter.svelte @@ -1,21 +1,27 @@ - +
Temporal Resolution
diff --git a/src/store.ts b/src/store.ts index 7bcc73b..9ea8339 100644 --- a/src/store.ts +++ b/src/store.ts @@ -17,6 +17,28 @@ export const isShowingPoints = writable(defaults.showPoints); export const initialViewport = writable(defaults.viewport); export const navMode = writable(NavMode.autofit); +export const storeApiKeys = writable(localStorage.getItem('store-api-key') === 'true'); +storeApiKeys.subscribe((val) => { + localStorage.setItem('store-api-key', val.toString()); + if (val) { + // persist key from session to local storage + localStorage.setItem('api-key', sessionStorage.getItem('api-key') || ''); + } else { + // remove key from local storage + localStorage.removeItem('api-key'); + } +}); + +export const apiKey = writable(localStorage.getItem('api-key')! || ''); +apiKey.subscribe((val) => { + // always keep key around in session storage (resets on page refresh) + sessionStorage.setItem('api-key', val); + if (localStorage.getItem('store-api-key') === 'true') { + // store it in local storage (persistent) + localStorage.setItem('api-key', val); + } +}); + export function addDataSet(dataset: DataSet | DataGroup): void { const root = get(datasetTree); root.datasets.push(dataset);