timer label

packages/web/src/query/AceEditor.svelte

@@ -92,7 +92,7 @@
     if (editor) {
       editor.setOptions({
         ...stdOptions,
-        newOption,
+        ...newOption,
       });
     }
   }
@@ -133,7 +133,7 @@
     if (options) {
       editor.setOptions({
         ...stdOptions,
-        options,
+        ...options,
       });
     }
 
@@ -158,12 +158,17 @@
     // editor.onCursorChange = () => dispatch('cursorChange');
     // editor.onCut = () => dispatch('cut');
     // editor.onDocumentChange = (obj: { data: any }) => dispatch('documentChange', obj);
-    // editor.onFocus = () => dispatch('focus');
+    // editor.onFocus = () => {
+    //   dispatch('focus');
+    //   return false;
+    // };
     // editor.onPaste = text => dispatch('paste', text);
     // editor.onSelectionChange = obj => dispatch('selectionChange', obj);
 
+    editor.on('focus', () => dispatch('focus'));
+
     editor.setReadOnly(readOnly);
-    editor.on('change', function () {
+    editor.on('change', () => {
       const content = editor.getValue();
       value = content;
       dispatch('input', content);

packages/web/src/tabs/QueryDesignTab.svelte

@@ -46,6 +46,7 @@
   import { findEngineDriver } from 'dbgate-tools';
   import { generateDesignedQuery } from '../designer/designerTools';
   import QueryDesignColumns from '../elements/QueryDesignColumns.svelte';
+  import useTimerLabel from '../utility/useTimerLabel';
 
   export let tabid;
   export let conid;
@@ -54,6 +55,7 @@
 
   const instance = get_current_component();
   const tabVisible: any = getContext('tabVisible');
+  const timerLabel = useTimerLabel();
 
   let busy = false;
   let executeNumber = 0;
@@ -124,7 +126,7 @@
       sessionId = sesid;
     }
     busy = true;
-    // timerLabel.start();
+    timerLabel.start();
     await axiosInstance.post('sessions/execute-query', {
       sesid,
       sql: sqlPreview,
@@ -137,7 +139,7 @@
     });
     sessionId = null;
     busy = false;
-    // timerLabel.stop();
+    timerLabel.stop();
   }
 
   export function getData() {
@@ -168,7 +170,7 @@
 
   const handleSessionDone = () => {
     busy = false;
-    // timerLabel.stop();
+    timerLabel.stop();
   };
 
   const handleChange = (value, skipUndoChain) =>

packages/web/src/tabs/QueryTab.svelte

@@ -57,6 +57,7 @@
   import invalidateCommands from '../commands/invalidateCommands';
   import { showModal } from '../modals/modalTools';
   import InsertJoinModal from '../modals/InsertJoinModal.svelte';
+  import useTimerLabel from '../utility/useTimerLabel';
 
   export let tabid;
   export let conid;
@@ -65,6 +66,7 @@
 
   const instance = get_current_component();
   const tabVisible: any = getContext('tabVisible');
+  const timerLabel = useTimerLabel();
 
   let busy = false;
   let executeNumber = 0;
@@ -131,7 +133,7 @@
       sessionId = sesid;
     }
     busy = true;
-    // timerLabel.start();
+    timerLabel.start();
     await axiosInstance.post('sessions/execute-query', {
       sesid,
       sql: selectedText || $editorValue,
@@ -144,7 +146,7 @@
     });
     sessionId = null;
     busy = false;
-    // timerLabel.stop();
+    timerLabel.stop();
   }
 
   // export function getStatus() {
@@ -195,7 +197,7 @@
 
   const handleSessionDone = () => {
     busy = false;
-    // timerLabel.stop();
+    timerLabel.stop();
   };
 
   const { editorState, editorValue, setEditorData } = useEditorData({

packages/web/src/tabs/ShellTab.svelte

@@ -38,10 +38,12 @@
   import memberStore from '../utility/memberStore';
   import socket from '../utility/socket';
   import useEffect from '../utility/useEffect';
+  import useTimerLabel from '../utility/useTimerLabel';
 
   export let tabid;
 
   const tabVisible: any = getContext('tabVisible');
+  const timerLabel = useTimerLabel();
 
   let runnerId;
 
@@ -90,7 +92,7 @@
 
   function handleRunnerDone() {
     busy = false;
-    // timerLabel.stop();
+    timerLabel.stop();
   }
 
   // export function getStatus() {
@@ -138,14 +140,14 @@
     runid = resp.data.runid;
     runnerId = runid;
     busy = true;
-    //timerLabel.start();
+    timerLabel.start();
   }
 
   export function kill() {
     axiosInstance.post('runners/cancel', {
       runid: runnerId,
     });
-    // timerLabel.stop();
+    timerLabel.stop();
   }
 
   const { editorState, editorValue, setEditorData } = useEditorData({ tabid });

packages/web/src/utility/useTimerLabel.ts

@@ -0,0 +1,57 @@
+import _ from 'lodash';
+import { getContext, onDestroy } from 'svelte';
+import { updateStatuBarInfo } from '../widgets/StatusBar.svelte';
+
+function formatSeconds(duration) {
+  if (duration == null) return '';
+  const hours = _.padStart(Math.floor(duration / 3600).toString(), 2, '0');
+  const minutes = _.padStart((Math.floor(duration / 60) % 60).toString(), 2, '0');
+  const seconds = _.padStart((duration % 60).toString(), 2, '0');
+  return `${hours}:${minutes}:${seconds}`;
+}
+
+export default function useTimerLabel() {
+  let duration = null;
+  let busy = false;
+  let timerHandle = null;
+  const tabid = getContext('tabid');
+
+  const update = () => {
+    updateStatuBarInfo(tabid, [
+      {
+        text: formatSeconds(duration),
+      },
+    ]);
+  };
+
+  const start = () => {
+    duration = 0;
+    busy = true;
+    update();
+    timerHandle = window.setInterval(() => {
+      duration += 1;
+      update();
+    }, 1000);
+  };
+
+  const stop = () => {
+    busy = false;
+    update();
+    if (timerHandle) {
+      window.clearInterval(timerHandle);
+      timerHandle = null;
+    }
+  };
+
+  onDestroy(() => {
+    if (timerHandle) {
+      window.clearInterval(timerHandle);
+      timerHandle = null;
+    }
+  });
+
+  return {
+    start,
+    stop,
+  };
+}

packages/web/src/widgets/StatusBar.svelte

@@ -1,12 +1,27 @@
+<script lang="ts" context="module">
+  const statusBarTabInfo = writable({});
+
+  export function updateStatuBarInfo(tabid, info) {
+    statusBarTabInfo.update(x => ({
+      ...x,
+      [tabid]: info,
+    }));
+  }
+</script>
+
 <script lang="ts">
+  import { writable } from 'svelte/store';
+
   import FontIcon from '../icons/FontIcon.svelte';
 
-  import { currentDatabase } from '../stores';
+  import { activeTabId, currentDatabase } from '../stores';
   import { useDatabaseStatus } from '../utility/metadataLoaders';
 
   $: databaseName = $currentDatabase && $currentDatabase.name;
   $: connection = $currentDatabase && $currentDatabase.connection;
   $: status = useDatabaseStatus(connection ? { conid: connection._id, database: databaseName } : {});
+
+  $: contextItems = $statusBarTabInfo[$activeTabId] as any[];
 </script>
 
 <div class="main">
@@ -46,6 +61,16 @@
       </div>
     {/if}
   </div>
+  <div class="container">
+    {#each contextItems || [] as item}
+      <div class="item">
+        {#if item.icon}
+          <FontIcon icon={item.icon} />
+        {/if}
+        {item.text}
+      </div>
+    {/each}
+  </div>
 </div>
 
 <style>