quick export with snackbar info, allows canceling process

packages/web/src/Screen.svelte

@@ -69,7 +69,9 @@
   {/if}
   <div class="snackbar-container">
     {#each $openedSnackbars as snackbar}
-      <Snackbar {...snackbar} />
+      {#key snackbar.id}
+        <Snackbar {...snackbar} />
+      {/key}
     {/each}
   </div>
 </div>

packages/web/src/icons/FontIcon.svelte

@@ -77,6 +77,7 @@
     'img error': 'mdi mdi-close-circle color-icon-red',
     'img error-inv': 'mdi mdi-close-circle color-icon-inv-red',
     'img warn': 'mdi mdi-alert color-icon-gold',
+    'img info': 'mdi mdi-information color-icon-blue',
     // 'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',
 
     'img archive': 'mdi mdi-table color-icon-gold',

packages/web/src/tabs/TableDataTab.svelte

@@ -47,7 +47,7 @@
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import registerCommand from '../commands/registerCommand';
   import { registerMenu } from '../utility/contextMenu';
-  import { showSnackbarSuccess } from '../widgets/Snackbar.svelte';
+  import { showSnackbarSuccess } from '../utility/snackbar';
 
   export let tabid;
   export let conid;

packages/web/src/utility/exportElectronFile.ts

@@ -1,6 +1,8 @@
 import ScriptWriter from '../impexp/ScriptWriter';
 import getElectron from './getElectron';
 import axiosInstance from '../utility/axiosInstance';
+import socket from '../utility/socket';
+import { showSnackbar, showSnackbarInfo, showSnackbarError, closeSnackbar } from '../utility/snackbar';
 
 export async function exportElectronFile(dataName, reader, format) {
   const electron = getElectron();
@@ -18,8 +20,6 @@ export async function exportElectronFile(dataName, reader, format) {
   const sourceVar = script.allocVariable();
   script.assign(sourceVar, reader.functionName, reader.props);
 
-  console.log('format.createWriter(filePath, dataName)', format.createWriter(filePath, dataName));
-
   const targetVar = script.allocVariable();
   const writer = format.createWriter(filePath, dataName);
   script.assign(targetVar, writer.functionName, writer.props);
@@ -27,8 +27,30 @@ export async function exportElectronFile(dataName, reader, format) {
   script.copyStream(sourceVar, targetVar);
   script.put();
 
-  console.log('script.getScript()', script.getScript());
-
   const resp = await axiosInstance.post('runners/start', { script: script.getScript() });
   const runid = resp.data.runid;
+  let isCanceled = false;
+
+  const snackId = showSnackbar({
+    message: `Exporting ${dataName}`,
+    icon: 'icon loading',
+    buttons: [
+      {
+        label: 'Cancel',
+        onClick: () => {
+          isCanceled = true;
+          axiosInstance.post('runners/cancel', { runid });
+        },
+      },
+    ],
+  });
+
+  function handleRunnerDone() {
+    closeSnackbar(snackId);
+    socket.off(`runner-done-${runid}`, handleRunnerDone);
+    if (isCanceled) showSnackbarError(`Export ${dataName} canceled`);
+    else showSnackbarInfo(`Export ${dataName} finished`);
+  }
+
+  socket.on(`runner-done-${runid}`, handleRunnerDone);
 }

packages/web/src/utility/snackbar.ts

@@ -0,0 +1,75 @@
+import { openedSnackbars } from '../stores';
+
+export interface SnackbarButton {
+  label: string;
+  onClick: Function;
+}
+
+export interface SnackbarInfo {
+  message: string;
+  icon?: string;
+  autoClose?: boolean;
+  allowClose?: boolean;
+  buttons?: SnackbarButton[];
+}
+
+let lastSnackbarId = 0;
+
+export function showSnackbar(snackbar: SnackbarInfo): string {
+  lastSnackbarId += 1;
+  const id = lastSnackbarId.toString();
+  openedSnackbars.update(x => [
+    ...x,
+    {
+      ...snackbar,
+      id,
+    },
+  ]);
+  return id;
+}
+
+export function showSnackbarSuccess(message: string) {
+  showSnackbar({
+    message,
+    icon: 'img ok',
+    allowClose: true,
+    autoClose: true,
+  });
+}
+
+export function showSnackbarInfo(message: string) {
+  showSnackbar({
+    message,
+    icon: 'img info',
+    allowClose: true,
+    autoClose: true,
+  });
+}
+
+export function showSnackbarError(message: string) {
+  showSnackbar({
+    message,
+    icon: 'img error',
+    allowClose: true,
+    autoClose: true,
+  });
+}
+
+export function closeSnackbar(snackId: string) {
+  openedSnackbars.update(x => x.filter(x => x.id != snackId));
+}
+//   showSnackbar({
+//     icon: 'img ok',
+//     message: 'Test snackbar',
+//     allowClose: true,
+//   });
+showSnackbar({
+  icon: 'img ok',
+  message: 'Auto close',
+  autoClose: true,
+});
+//   showSnackbar({
+//     icon: 'img warn',
+//     message: 'Buttons',
+//     buttons: [{ label: 'OK', onClick: () => console.log('OK') }],
+//   });

packages/web/src/widgets/Snackbar.svelte

@@ -1,63 +1,8 @@
-<script lang="ts" context="module">
-  import { openedSnackbars } from '../stores';
-
-  export interface SnackbarButton {
-    label: string;
-    onClick: Function;
-  }
-
-  export interface SnackbarInfo {
-    message: string;
-    icon?: string;
-    autoClose?: boolean;
-    allowClose?: boolean;
-    buttons?: SnackbarButton[];
-  }
-
-  let lastSnackbarId = 0;
-
-  export function showSnackbar(snackbar: SnackbarInfo) {
-    lastSnackbarId += 1;
-    openedSnackbars.update(x => [
-      ...x,
-      {
-        ...snackbar,
-        id: lastSnackbarId,
-      },
-    ]);
-  }
-
-  export function showSnackbarSuccess(message: string) {
-    showSnackbar({
-      message,
-      icon: 'img ok',
-      allowClose: true,
-      autoClose: true,
-    });
-  }
-
-//   showSnackbar({
-//     icon: 'img ok',
-//     message: 'Test snackbar',
-//     allowClose: true,
-//   });
-//   showSnackbar({
-//     icon: 'img ok',
-//     message: 'Auto close',
-//     autoClose: true,
-//   });
-//   showSnackbar({
-//     icon: 'img warn',
-//     message: 'Buttons',
-//     buttons: [{ label: 'OK', onClick: () => console.log('OK') }],
-//   });
-
-</script>
-
 <script lang="ts">
   import FontIcon from '../icons/FontIcon.svelte';
   import { onMount } from 'svelte';
   import FormStyledButton from '../elements/FormStyledButton.svelte';
+  import { openedSnackbars } from '../stores';
 
   export let message;
   export let id;