dbgate/packages/web/src/widgets/StatusBar.svelte

<script lang="ts" context="module">
  const statusBarTabInfo = writable({});

  // export function updateStatuBarInfo(tabid, info) {
  //   statusBarTabInfo.update(x => ({
  //     ...x,
  //     [tabid]: info,
  //   }));
  // }

  export function updateStatuBarInfoItem(tabid, key, item) {
    statusBarTabInfo.update(tabs => {
      const items = tabs[tabid] || [];
      let newItems;
      if (item == null) {
        newItems = items.filter(x => x.key != key);
      } else if (items.find(x => x.key == key)) {
        newItems = items.map(x => (x.key == key ? { ...item, key } : x));
      } else {
        newItems = [...items, { ...item, key }];
      }
      return {
        ...tabs,
        [tabid]: newItems,
      };
    });
  }
</script>

<script lang="ts">
  import _ from 'lodash';
  import { writable } from 'svelte/store';
  import moment from 'moment';
  import { showModal } from '../modals/modalTools';
  import ChooseConnectionColorModal from '../modals/ChooseConnectionColorModal.svelte';

  import FontIcon from '../icons/FontIcon.svelte';

  import { activeTabId, currentDatabase, currentThemeDefinition, visibleCommandPalette } from '../stores';
  import getConnectionLabel from '../utility/getConnectionLabel';
  import { useConnectionList, useDatabaseServerVersion, useDatabaseStatus } from '../utility/metadataLoaders';
  import axiosInstance from '../utility/axiosInstance';
  import { findCommand } from '../commands/runCommand';
  import { useConnectionColor } from '../utility/useConnectionColor';

  $: databaseName = $currentDatabase && $currentDatabase.name;
  $: connection = $currentDatabase && $currentDatabase.connection;
  $: dbid = connection ? { conid: connection._id, database: databaseName } : null;
  $: status = useDatabaseStatus(dbid || {});
  $: serverVersion = useDatabaseServerVersion(dbid || {});

  $: contextItems = $statusBarTabInfo[$activeTabId] as any[];
  $: connectionLabel = getConnectionLabel(connection, { allowExplicitDatabase: false });

  $: connectionBackground = useConnectionColor(dbid, 3, 'dark', true);
  $: connectionButtonBackground = useConnectionColor(dbid ? { conid: dbid.conid } : null, 6, 'dark', true);
  $: databaseButtonBackground = useConnectionColor(dbid, 6, 'dark', true, false);

  let timerValue = 1;

  setInterval(() => {
    timerValue++;
  }, 10000);

  async function handleSyncModel() {
    if (connection && databaseName) {
      await axiosInstance.post('database-connections/sync-model', { conid: connection._id, database: databaseName });
    }
  }
</script>

<div class="main" style={$connectionBackground}>
  <div class="container">
    {#if databaseName}
      <div class="item">
        <FontIcon icon="icon database" padRight />
        {databaseName}
      </div>
      {#if dbid}
        <div
          class="item clickable"
          title="Database color. Overrides connection color"
          on:click={() => {
            showModal(ChooseConnectionColorModal, { ...dbid, header: 'Choose database color' });
          }}
        >
          <div style={$databaseButtonBackground} class="colorbox">
            <FontIcon icon="icon palette" />
          </div>
        </div>
      {/if}
    {/if}
    {#if connectionLabel}
      <div class="item">
        <FontIcon icon="icon server" padRight />
        {connectionLabel}
      </div>
      {#if dbid}
        <div
          class="item clickable"
          title="Connection color. Can be overriden by database color"
          on:click={() => {
            showModal(ChooseConnectionColorModal, { conid: dbid.conid, header: 'Choose connection color' });
          }}
        >
          <div style={$connectionButtonBackground} class="colorbox">
            <FontIcon icon="icon palette" />
          </div>
        </div>
      {/if}
    {/if}
    {#if connection && connection.user}
      <div class="item">
        <FontIcon icon="icon account" padRight />
        {connection.user}
      </div>
    {/if}
    {#if connection && $status}
      <div class="item clickable" on:click={() => visibleCommandPalette.set(findCommand('database.changeState'))}>
        {#if $status.name == 'pending'}
          <FontIcon icon="icon loading" padRight /> Loading
        {:else if $status.name == 'checkStructure'}
          <FontIcon icon="icon loading" padRight /> Checking model
        {:else if $status.name == 'loadStructure'}
          <FontIcon icon="icon loading" padRight /> Loading model
        {:else if $status.name == 'ok'}
          <FontIcon icon="img ok-inv" padRight /> Connected
        {:else if $status.name == 'error'}
          <FontIcon icon="img error-inv" padRight /> Error
        {/if}
      </div>
    {/if}
    {#if !connection}
      <div class="item">
        <FontIcon icon="icon disconnected" padRight /> Not connected
      </div>
    {/if}
    {#if $serverVersion}
      <div class="item flex" title={$serverVersion.version}>
        <FontIcon icon="icon version" padRight />
        <div class="version">
          {$serverVersion.versionText || $serverVersion.version}
        </div>
      </div>
    {/if}
    {#if $status?.analysedTime}
      <div
        class="item flex clickable"
        title={`Last ${databaseName} model refresh: ${moment($status?.analysedTime).format(
          'HH:mm:ss'
        )}\nClick for refresh DB model`}
        on:click={handleSyncModel}
      >
        <FontIcon icon="icon history" padRight />
        <div class="version ml-1">
          {moment($status?.analysedTime).fromNow() + (timerValue ? '' : '')}
        </div>
      </div>
    {/if}
  </div>
  <div class="container">
    {#each contextItems || [] as item}
      <div class="item" class:clickable={item.clickable} on:click={item.onClick}>
        {#if item.icon}
          <FontIcon icon={item.icon} padRight />
        {/if}
        {item.text}
      </div>
    {/each}
  </div>
</div>

<style>
  .main {
    display: flex;
    color: var(--theme-font-inv-15);
    align-items: stretch;
    justify-content: space-between;
    cursor: default;
    flex: 1;
  }
  .container {
    display: flex;
    align-items: stretch;
  }
  .item {
    padding: 0px 10px;
    display: flex;
    align-items: center;
  }

  .version {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .clickable {
    cursor: pointer;
  }
  .clickable:hover {
    background-color: var(--theme-bg-statusbar-inv-hover);
  }

  .colorbox {
    padding: 0px 3px;
    border-radius: 2px;
    color: var(--theme-bg-statusbar-inv-font);
    background: var(--theme-bg-statusbar-inv-bg);
  }
</style>