dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-19 11:56:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

web-svelte => web

Browse Source
This commit is contained in:
Jan Prochazka
2021-02-20 19:16:05 +01:00
parent daf9e9d18b
commit 321eedefea
38 changed files with 2 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/web/src/widgets/ConnectionList.svelte Normal file
View File

@@ -0,0 +1,29 @@
<script lang="ts">
import _ from 'lodash';
import InlineButton from './InlineButton.svelte';
import SearchInput from './SearchInput.svelte';
import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
import { useConnectionList, useServerStatus } from '../utility/metadataLoaders';
import SearchBoxWrapper from './SearchBoxWrapper.svelte';
import AppObjectList from '../appobj/AppObjectList.svelte';
import ConnectionAppObject from '../appobj/ConnectionAppObject.svelte';
const connections = useConnectionList();
const serverStatus = useServerStatus();
$: connectionsWithStatus =
$connections && $serverStatus
? $connections.map(conn => ({ ...conn, status: $serverStatus[conn._id] }))
: $connections;
</script>
<SearchBoxWrapper>
<SearchInput placeholder="Search connection" />
<InlineButton>Refresh</InlineButton>
</SearchBoxWrapper>
<WidgetsInnerContainer>
<AppObjectList
list={_.sortBy(connectionsWithStatus, ({ displayName, server }) => (displayName || server || '').toUpperCase())}
component={ConnectionAppObject}
/>
</WidgetsInnerContainer>

16
packages/web/src/widgets/DatabaseWidget.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import ConnectionList from './ConnectionList.svelte';
import WidgetColumnBar from './WidgetColumnBar.svelte';
import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
</script>
<WidgetColumnBar>
<WidgetColumnBarItem title="Connections" name="connections" height="50%">
<ConnectionList />
</WidgetColumnBarItem>
<WidgetColumnBarItem title="Tables, views, functions" name="dbObjects">
TABLES
<!-- <SqlObjectListWrapper /> -->
</WidgetColumnBarItem>
</WidgetColumnBar>

47
packages/web/src/widgets/InlineButton.svelte Normal file
View File

@@ -0,0 +1,47 @@
<script lang="ts">
export let disabled;
export let square;
</script>
<div class="outer buttonLike" class:disabled class:square>
<div class="inner">
<slot />
</div>
</div>
<style>
.outer {
background: linear-gradient(to bottom, var(--theme-bg-2) 5%, var(--theme-bg-3) 100%);
background-color: var(--theme-bg-2);
border: 1px solid var(--theme-bg-3);
display: inline-block;
cursor: pointer;
vertical-align: middle;
color: var(--theme-font-1);
font-size: 12px;
padding: 3px;
margin: 0;
text-decoration: none;
display: flex;
}
.outer.disabled {
color: var(--theme-font-3);
}
.outer:hover:not(.disabled) {
border: 1px solid var(--theme-bg-2);
background: linear-gradient(to bottom, var(--theme-bg-3) 5%, var(--theme-bg-2) 100%);
background-color: var(--theme-bg-3);
}
.inner {
margin: auto;
flex: 1;
text-align: center;
}
.square {
width: 18px;
}
</style>

8
packages/web/src/widgets/SearchBoxWrapper.svelte Normal file
View File

@@ -0,0 +1,8 @@
<div><slot /></div>
<style>
div {
display: flex;
margin-bottom: 5px;
}
</style>

14
packages/web/src/widgets/SearchInput.svelte Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
export let placeholder;
</script>
<input type="text" {placeholder} />
<style>
input {
flex: 1;
min-width: 10px;
width: 10px;
border: none;
}
</style>

21
packages/web/src/widgets/SqlObjectList.svelte Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts">
import InlineButton from './InlineButton.svelte';
import SearchInput from './SearchInput.svelte';
import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
import { useDatabaseInfo, useDatabaseStatus } from '../utility/metadataLoaders';
import SearchBoxWrapper from './SearchBoxWrapper.svelte';
export let conid;
export let database;
$: objects = useDatabaseInfo({ conid, database });
$: status = useDatabaseStatus({ conid, database });
$: console.log('objects', $objects);
</script>
<SearchBoxWrapper>
<SearchInput placeholder="Search connection" />
<InlineButton>Refresh</InlineButton>
</SearchBoxWrapper>
<WidgetsInnerContainer>CONNECTIONS</WidgetsInnerContainer>

13
packages/web/src/widgets/WidgetColumnBar.svelte Normal file
View File

@@ -0,0 +1,13 @@
<div class="main-container">
<slot></slot>
</div>
<style>
.main-container {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
user-select: none;
}
</style>

25
packages/web/src/widgets/WidgetColumnBarItem.svelte Normal file
View File

@@ -0,0 +1,25 @@
<script lang="ts">
export let title;
export let name;
export let height = null;
export let visible = true;
</script>
<div class="title" on:click={() => (visible = !visible)}>{title}</div>
{#if visible}
<slot />
{/if}
<style>
.title {
padding: 5px;
font-weight: bold;
text-transform: uppercase;
background-color: var(--theme-bg-4);
border: 1px solid var(--theme-border);
}
.title:hover {
background-color: var(--theme-bg-3);
}
</style>

10
packages/web/src/widgets/WidgetContainer.svelte Normal file
View File

@@ -0,0 +1,10 @@
<script lang="ts">
import { selectedWidget } from '../stores';
import DatabaseWidget from './DatabaseWidget.svelte';
</script>
{#if $selectedWidget == 'database'}
<DatabaseWidget />
{/if}

73
packages/web/src/widgets/WidgetIconPanel.svelte Normal file
View File

@@ -0,0 +1,73 @@
<script lang="ts">
import FontIcon from '../icons/FontIcon.svelte';
import { selectedWidget } from '../stores';
const widgets = [
{
icon: 'icon database',
name: 'database',
title: 'Database connections',
},
// {
// icon: 'fa-table',
// name: 'table',
// },
{
icon: 'icon file',
name: 'file',
title: 'Closed tabs & Saved SQL files',
},
{
icon: 'icon archive',
name: 'archive',
title: 'Archive (saved tabular data)',
},
{
icon: 'icon plugin',
name: 'plugins',
title: 'Extensions & Plugins',
},
{
icon: 'icon favorite',
name: 'favorites',
title: 'Favorites',
},
// {
// icon: 'fa-cog',
// name: 'settings',
// },
// {
// icon: 'fa-check',
// name: 'settings',
// },
];
function handleChangeWidget(name) {
$selectedWidget = name == $selectedWidget ? null : name;
}
//const handleChangeWidget= e => (selectedWidget.set(item.name))
</script>
{#each widgets as item}
<div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
<FontIcon icon={item.icon} />
</div>
{/each}
<style>
.wrapper {
font-size: 23pt;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-font-inv-2);
}
.wrapper:hover {
color: var(--theme-font-inv-1);
}
.wrapper.selected {
color: var(--theme-font-inv-1);
background: var(--theme-bg-inv-3);
}
</style>

10
packages/web/src/widgets/WidgetsInnerContainer.svelte Normal file
View File

@@ -0,0 +1,10 @@
<div><slot /></div>
<style>
div {
flex: 1 1;
overflow-x: auto;
overflow-y: auto;
width: var(--dim-left-panel-width);
}
</style>