@bexis2/bexis2-core-ui 0.0.1

package/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package/TableView.svelte

@@ -0,0 +1 @@
+<h1>table</h1>

package/TableView.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TableViewProps */
+/** @typedef {typeof __propDef.events}  TableViewEvents */
+/** @typedef {typeof __propDef.slots}  TableViewSlots */
+export default class TableView extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TableViewProps = typeof __propDef.props;
+export type TableViewEvents = typeof __propDef.events;
+export type TableViewSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/File/FileIcon.svelte

@@ -0,0 +1,49 @@
+<script>
+
+import Fa from 'svelte-fa'
+import { faFileAudio } from '@fortawesome/free-regular-svg-icons'
+import { faFileVideo } from '@fortawesome/free-regular-svg-icons'
+import { faFileWord } from '@fortawesome/free-regular-svg-icons'
+import { faFilePdf } from '@fortawesome/free-regular-svg-icons'
+import { faFileExcel } from '@fortawesome/free-regular-svg-icons'
+import { faFileAlt } from '@fortawesome/free-regular-svg-icons'
+import { faFileImage } from '@fortawesome/free-regular-svg-icons'
+import { faFileArchive } from '@fortawesome/free-regular-svg-icons'
+
+ export let type = "";
+ 
+</script>
+
+{#if type.includes("excel") || type.includes("spreadsheetml")}
+  <Fa icon={faFileExcel} />
+{/if}
+
+{#if type.includes("text")}
+  <Fa icon={faFileAlt} />
+{/if}
+
+{#if type.includes("image")}
+  <Fa icon={faFileImage} />
+{/if}
+
+{#if type.includes("audio")}
+  <Fa icon={faFileAudio} />
+{/if}
+
+{#if type.includes("video")}
+  <Fa icon={faFileVideo} />
+{/if}
+
+{#if type.includes("word")}
+  <Fa icon={faFileWord} />
+{/if}
+
+{#if type.includes("pdf")}
+  <Fa icon={faFilePdf} />
+{/if}
+
+{#if type.includes("zip")}
+  <Fa icon={faFileArchive} />
+{/if}
+
+

package/components/File/FileIcon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FileIconProps */
+/** @typedef {typeof __propDef.events}  FileIconEvents */
+/** @typedef {typeof __propDef.slots}  FileIconSlots */
+export default class FileIcon extends SvelteComponentTyped<{
+    type?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FileIconProps = typeof __propDef.props;
+export type FileIconEvents = typeof __propDef.events;
+export type FileIconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/File/FileInfo.svelte

@@ -0,0 +1,14 @@
+<script>
+
+import FileIcon from './FileIcon.svelte';
+
+export let name="";
+export let type = "";
+// export let description;
+export let size = "";
+
+</script>
+
+<div style="font-size:{size}">
+ <FileIcon {type} /> {name}
+</div>

package/components/File/FileInfo.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  FileInfoProps */
+/** @typedef {typeof __propDef.events}  FileInfoEvents */
+/** @typedef {typeof __propDef.slots}  FileInfoSlots */
+export default class FileInfo extends SvelteComponentTyped<{
+    type?: string | undefined;
+    name?: string | undefined;
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FileInfoProps = typeof __propDef.props;
+export type FileInfoEvents = typeof __propDef.events;
+export type FileInfoSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: string | undefined;
+        name?: string | undefined;
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/File/FileUploader.svelte

@@ -0,0 +1,135 @@
+<script >import DropZone from "svelte-file-dropzone/src/index";
+import { Fa } from "svelte-fa/src/index.js";
+import { Spinner, Button, Row, Col, Input } from "sveltestrap";
+import { createEventDispatcher } from "svelte";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faSave } from "@fortawesome/free-regular-svg-icons";
+import { faFileUpload } from "@fortawesome/free-solid-svg-icons";
+import { Api } from "../../services/Api.js";
+export let id = 0;
+export let version = 1;
+import { onMount } from "svelte";
+export let start = "";
+export let submit = "";
+export let context = "";
+export let data;
+$:
+  model = data;
+$:
+  submitBt = "submit";
+let maxSize = 0;
+const dispatch = createEventDispatcher();
+let fx;
+let files = { accepted: [], rejected: [] };
+$:
+  files;
+onMount(async () => {
+  console.log("fileupload - OnMount", data);
+  if (!data) {
+    load();
+  } else {
+    model = data;
+  }
+  if (model) {
+    submitBt += context;
+    maxSize = model.maxSize * 1024 * 1024;
+  }
+});
+async function load() {
+  let url = start + "?id=" + id + "&version=" + version;
+  const res = await Api.get(url);
+  model = await res.json();
+  console.log("fileupload", model);
+}
+function handleFilesSelect(e) {
+  console.log("handleFilesSelect", e);
+  console.log("files", files);
+  const { acceptedFiles, fileRejections } = e.detail;
+  files.accepted = [...files.accepted, ...acceptedFiles];
+  files.rejected = [...files.rejected, ...fileRejections];
+  console.log("acceptedFiles", acceptedFiles);
+  console.log("files.accepted", files.accepted);
+  if (fileRejections.length > 0) {
+    console.log("the dropped file is not supported.");
+    console.log(files.rejected);
+    let messages = [""];
+    for (let index = 0; index < fileRejections.length; index++) {
+      const element = fileRejections[index];
+      messages.push(getErrorMessage(element));
+    }
+    console.log(messages);
+    dispatch("error", { messages });
+    files.rejected = [];
+  }
+  if (acceptedFiles.length > 0) {
+    document.getElementById(submitBt)?.click();
+  }
+}
+function getErrorMessage(rejected) {
+  let message = "";
+  message = rejected.file.path + " : ";
+  let errors = rejected.errors;
+  for (let index = 0; index < errors.length; index++) {
+    const error = errors[index];
+    message += error.message;
+  }
+  return message;
+}
+async function handleSubmit() {
+  console.log("SUBMIT");
+  dispatch("submit");
+  let url = submit + "?id=" + id;
+  console.log("SUBMIT");
+  if (files.accepted.length > 0) {
+    console.log(files);
+    const formData = new FormData();
+    formData.append("files", "123");
+    for (var i = 0; i < files.accepted.length; i++) {
+      formData.append(files.accepted[i].name, files.accepted[i]);
+    }
+    const response = await Api.post(url, formData);
+    if (response.status == 200) {
+      dispatch("submited");
+      let message = files.accepted.length + " is/are uploaded";
+      dispatch("success", { text: message });
+      files.accepted = [];
+    }
+  }
+}
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+    {#if model}
+      <!--if model exist  -->
+      <Row>
+
+        <DropZone 
+          on:drop={handleFilesSelect} 
+          accept={model.accept}
+          multiple={model.multiple}
+          {maxSize}>
+
+          <b style="font-size:xx-large"><Fa icon={faFileUpload}/></b>
+          <span><b>Drag 'n' drop some files here, or click to select files</b>
+          <b>max file : {model.maxSize} mb</b></span>
+          <p>
+            {#if model.accept}
+              {#each model.accept as ext}
+              {ext} ,   
+              {/each}
+            {/if}
+          </p>
+        </DropZone>
+
+      </Row> 
+
+      <Button id="{submitBt}" color="primary" style="display:none" ><Fa icon={faSave}/></Button>      
+
+    {:else} <!-- while data is not loaded show a loading information -->
+
+    <Spinner color="info" size="sm" type ="grow" />
+    {/if}
+
+</form> 
+
+

package/components/File/FileUploader.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FileUploaderModel } from '../../models/Models.js';
+declare const __propDef: {
+    props: {
+        id?: number | undefined;
+        version?: number | undefined;
+        start?: string | undefined;
+        submit?: string | undefined;
+        context?: string | undefined;
+        data: FileUploaderModel | undefined;
+    };
+    events: {
+        error: CustomEvent<any>;
+        submit: CustomEvent<any>;
+        submited: CustomEvent<any>;
+        success: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FileUploaderProps = typeof __propDef.props;
+export type FileUploaderEvents = typeof __propDef.events;
+export type FileUploaderSlots = typeof __propDef.slots;
+export default class FileUploader extends SvelteComponentTyped<FileUploaderProps, FileUploaderEvents, FileUploaderSlots> {
+}
+export {};

package/components/ListView.svelte

@@ -0,0 +1,6 @@
+<script>let result = { name: "david" };
+</script>
+ 
+<h1>MyList</h1>
+{result.name}
+<b>from bexis-lib</b>

package/components/ListView.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListViewProps = typeof __propDef.props;
+export type ListViewEvents = typeof __propDef.events;
+export type ListViewSlots = typeof __propDef.slots;
+export default class ListView extends SvelteComponentTyped<ListViewProps, ListViewEvents, ListViewSlots> {
+}
+export {};

package/index.d.ts

@@ -0,0 +1,9 @@
+import ListView from './components/ListView.svelte';
+import TableView from './TableView.svelte';
+import FileIcon from './components/File/FileIcon.svelte';
+import FileInfo from './components/File/FileInfo.svelte';
+import FileUploader from './components/File/FileUploader.svelte';
+export { ListView, TableView, FileInfo, FileIcon, FileUploader };
+export { Api } from './services/Api.js';
+export { host, username, password, setApiConfig } from './stores/apistore.js';
+export type { user, FileUploaderModel } from './models/Models.js';

package/index.js

@@ -0,0 +1,9 @@
+// Reexport your entry components here
+import ListView from './components/ListView.svelte';
+import TableView from './TableView.svelte';
+import FileIcon from './components/File/FileIcon.svelte';
+import FileInfo from './components/File/FileInfo.svelte';
+import FileUploader from './components/File/FileUploader.svelte';
+export { ListView, TableView, FileInfo, FileIcon, FileUploader };
+export { Api } from './services/Api.js';
+export { host, username, password, setApiConfig } from './stores/apistore.js';

package/models/Models.d.ts

@@ -0,0 +1,31 @@
+export interface FileInfo {
+    name: string;
+    type: string;
+    lenght: number;
+    description: string;
+    validationHash: string;
+}
+export interface FileUploaderModel {
+    accept: string[];
+    existingFiles: FileInfo[];
+    descriptionType: number;
+    multiple: boolean;
+    maxSize: number;
+    lastModification: Date;
+}
+export interface Files {
+    accepted: Blob[];
+    rejected: Blob[];
+}
+export type user = {
+    name: string;
+};
+export interface FileObj {
+    path: string;
+    lastModified: number;
+    lastModifiedDate: Date;
+    name: string;
+    size: number;
+    type: string;
+    webkitRelativePath: string;
+}

package/models/Models.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,202 @@
+{
+  "name": "@bexis2/bexis2-core-ui",
+  "version": "0.0.1",
+  "private": false,
+  "devDependencies": {
+    "@playwright/test": "^1.28.1",
+    "@sveltejs/adapter-auto": "^1.0.0-next.90",
+    "@sveltejs/kit": "^1.0.0-next.587",
+    "@sveltejs/package": "^1.0.0-next.6",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "svelte": "^3.55.0",
+    "svelte-check": "^2.9.2",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0"
+  },
+  "type": "module",
+  "module": "./src/lib/index.ts",
+  "types": "./src/lib/index.d.ts",
+  "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
+  "main": "./src/lib/index.d.ts",
+  "directories": {
+    "test": "tests"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "axios": "^1.2.1",
+    "es6-promise": "^3.3.1",
+    "esbuild": "^0.16.6",
+    "escape-string-regexp": "^4.0.0",
+    "eslint-scope": "^5.1.1",
+    "eslint-utils": "^3.0.0",
+    "eslint-visitor-keys": "^3.3.0",
+    "esm-env": "^1.0.0",
+    "espree": "^9.4.1",
+    "esquery": "^1.4.0",
+    "esrecurse": "^4.3.0",
+    "estraverse": "^4.3.0",
+    "esutils": "^2.0.3",
+    "fast-deep-equal": "^3.1.3",
+    "fast-glob": "^3.2.12",
+    "fast-json-stable-stringify": "^2.1.0",
+    "fast-levenshtein": "^2.0.6",
+    "fastq": "^1.14.0",
+    "file-entry-cache": "^6.0.1",
+    "fill-range": "^7.0.1",
+    "find-up": "^5.0.0",
+    "flat-cache": "^3.0.4",
+    "flatted": "^3.2.7",
+    "fs.realpath": "^1.0.0",
+    "function-bind": "^1.1.1",
+    "glob": "^7.2.3",
+    "glob-parent": "^5.1.2",
+    "globals": "^13.19.0",
+    "globalyzer": "^0.1.0",
+    "globby": "^11.1.0",
+    "globrex": "^0.1.2",
+    "graceful-fs": "^4.2.10",
+    "grapheme-splitter": "^1.0.4",
+    "has": "^1.0.3",
+    "has-flag": "^4.0.0",
+    "ignore": "^5.2.1",
+    "import-fresh": "^3.3.0",
+    "import-meta-resolve": "^2.2.0",
+    "imurmurhash": "^0.1.4",
+    "inflight": "^1.0.6",
+    "inherits": "^2.0.4",
+    "is-binary-path": "^2.1.0",
+    "is-core-module": "^2.11.0",
+    "is-extglob": "^2.1.1",
+    "is-glob": "^4.0.3",
+    "is-number": "^7.0.0",
+    "is-path-inside": "^3.0.3",
+    "isexe": "^2.0.0",
+    "js-sdsl": "^4.2.0",
+    "js-yaml": "^4.1.0",
+    "json-schema-traverse": "^0.4.1",
+    "json-stable-stringify-without-jsonify": "^1.0.1",
+    "kleur": "^4.1.5",
+    "levn": "^0.4.1",
+    "locate-path": "^6.0.0",
+    "lodash.merge": "^4.6.2",
+    "lower-case": "^2.0.2",
+    "lru-cache": "^6.0.0",
+    "magic-string": "^0.27.0",
+    "merge2": "^1.4.1",
+    "micromatch": "^4.0.5",
+    "mime": "^3.0.0",
+    "min-indent": "^1.0.1",
+    "minimatch": "^3.1.2",
+    "minimist": "^1.2.7",
+    "mkdirp": "^0.5.6",
+    "mri": "^1.2.0",
+    "mrmime": "^1.0.1",
+    "ms": "^2.1.2",
+    "nanoid": "^3.3.4",
+    "natural-compare": "^1.4.0",
+    "natural-compare-lite": "^1.4.0",
+    "no-case": "^3.0.4",
+    "normalize-path": "^3.0.0",
+    "once": "^1.4.0",
+    "optionator": "^0.9.1",
+    "p-limit": "^3.1.0",
+    "p-locate": "^5.0.0",
+    "parent-module": "^1.0.1",
+    "pascal-case": "^3.1.2",
+    "path-exists": "^4.0.0",
+    "path-is-absolute": "^1.0.1",
+    "path-key": "^3.1.1",
+    "path-parse": "^1.0.7",
+    "path-type": "^4.0.0",
+    "picocolors": "^1.0.0",
+    "picomatch": "^2.3.1",
+    "playwright-core": "^1.28.1",
+    "postcss": "^8.4.20",
+    "prelude-ls": "^1.2.1",
+    "punycode": "^2.1.1",
+    "queue-microtask": "^1.2.3",
+    "readdirp": "^3.6.0",
+    "regexpp": "^3.2.0",
+    "resolve": "^1.22.1",
+    "resolve-from": "^4.0.0",
+    "reusify": "^1.0.4",
+    "rimraf": "^3.0.2",
+    "rollup": "^3.7.4",
+    "run-parallel": "^1.2.0",
+    "sade": "^1.8.1",
+    "sander": "^0.5.1",
+    "semver": "^7.3.8",
+    "set-cookie-parser": "^2.5.1",
+    "shebang-command": "^2.0.0",
+    "shebang-regex": "^3.0.0",
+    "sirv": "^2.0.2",
+    "slash": "^3.0.0",
+    "sorcery": "^0.10.0",
+    "source-map-js": "^1.0.2",
+    "sourcemap-codec": "^1.4.8",
+    "streamsearch": "^1.1.0",
+    "strip-ansi": "^6.0.1",
+    "strip-indent": "^3.0.0",
+    "strip-json-comments": "^3.1.1",
+    "supports-color": "^7.2.0",
+    "supports-preserve-symlinks-flag": "^1.0.0",
+    "svelte-fa": "^3.0.3",
+    "svelte-file-dropzone": "^1.0.0",
+    "svelte-hmr": "^0.15.1",
+    "svelte-preprocess": "^4.10.7",
+    "svelte2tsx": "^0.5.22",
+    "sveltestrap": "^5.10.0",
+    "text-table": "^0.2.0",
+    "tiny-glob": "^0.2.9",
+    "to-regex-range": "^5.0.1",
+    "totalist": "^3.0.0",
+    "tsutils": "^3.21.0",
+    "type-check": "^0.4.0",
+    "type-fest": "^0.20.2",
+    "undici": "^5.14.0",
+    "uri-js": "^4.4.1",
+    "vitefu": "^0.2.3",
+    "which": "^2.0.2",
+    "word-wrap": "^1.2.3",
+    "wrappy": "^1.0.2",
+    "yallist": "^4.0.0",
+    "yocto-queue": "^0.1.0"
+  },
+  "author": "David Schöne",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
+  },
+  "homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
+  "keywords": [
+    "bexis2",
+    "libary"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./components/File/FileIcon.svelte": "./components/File/FileIcon.svelte",
+    "./components/File/FileInfo.svelte": "./components/File/FileInfo.svelte",
+    "./components/File/FileUploader.svelte": "./components/File/FileUploader.svelte",
+    "./components/ListView.svelte": "./components/ListView.svelte",
+    ".": "./index.js",
+    "./models/Models": "./models/Models.js",
+    "./services/Api": "./services/Api.js",
+    "./stores/apistore": "./stores/apistore.js",
+    "./TableView.svelte": "./TableView.svelte"
+  },
+  "svelte": "./index.js"
+}

package/services/Api.d.ts

@@ -0,0 +1,7 @@
+export declare const Api: {
+    get: (url: any, request?: string) => Promise<import("axios").AxiosResponse<any, any>>;
+    delete: (url: any, request: any) => Promise<import("axios").AxiosResponse<any, any>>;
+    post: (url: any, request: any) => Promise<import("axios").AxiosResponse<any, any>>;
+    put: (url: any, request: any) => Promise<import("axios").AxiosResponse<any, any>>;
+    patch: (url: any, request: any) => Promise<import("axios").AxiosResponse<any, any>>;
+};

package/services/Api.js

@@ -0,0 +1,44 @@
+// Api.js
+import axios from "axios";
+import { host, username, password } from "../stores/apistore";
+console.log("setup axios");
+// implement a method to execute all the request from here.
+const apiRequest = (method, url, request) => {
+    // Create a instance of axios to use the same base url.
+    const axiosAPI = axios.create({
+        baseURL: host
+    });
+    const headers = {
+        authorization: 'Basic ' + btoa(username + ":" + password)
+    };
+    //using the axios instance to perform the request that received from each http method
+    return axiosAPI({
+        method,
+        url,
+        data: request,
+        headers
+    }).then(res => {
+        return Promise.resolve(res);
+    })
+        .catch(err => {
+        return Promise.reject(err);
+    });
+};
+// function to execute the http get request
+const get = (url, request = "") => apiRequest("get", url, request);
+// function to execute the http delete request
+const deleteRequest = (url, request) => apiRequest("delete", url, request);
+// function to execute the http post request
+const post = (url, request) => apiRequest("post", url, request);
+// function to execute the http put request
+const put = (url, request) => apiRequest("put", url, request);
+// function to execute the http path request
+const patch = (url, request) => apiRequest("patch", url, request);
+// expose your method to other services or actions
+export const Api = {
+    get,
+    delete: deleteRequest,
+    post,
+    put,
+    patch
+};

package/stores/apistore.d.ts

@@ -0,0 +1,4 @@
+export declare let host: string;
+export declare let username: string;
+export declare let password: string;
+export declare function setApiConfig(_host: string, _user: string, _pw: string): void;

package/stores/apistore.js

@@ -0,0 +1,22 @@
+import { writable } from 'svelte/store';
+export let host = "window.location.origin";
+export let username = "";
+export let password = "";
+const hostStore = writable(""); //writable(window.location.origin);
+const usernameStore = writable("");
+const passwordStore = writable("");
+hostStore.subscribe(value => {
+    host = value;
+});
+usernameStore.subscribe(value => {
+    username = value;
+});
+passwordStore.subscribe(value => {
+    password = value;
+});
+export function setApiConfig(_host, _user, _pw) {
+    console.log("overwrite settings");
+    hostStore.update(h => h = _host);
+    usernameStore.update(u => u = _user);
+    passwordStore.update(p => p = _pw);
+}