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

perspective loading indicator

Browse Source
This commit is contained in:
Jan Prochazka
2022-07-31 10:12:22 +02:00
parent 37d5c6fbf9
commit 7694864fe7
5 changed files with 124 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/web/src/appobj/DatabaseObjectAppObject.svelte
View File

@@ -44,6 +44,15 @@
tab: 'TableStructureTab',
icon: 'img table-structure',
},
{
label: 'Open perspective',
tab: 'PerspectiveTab',
forceNewTab: true,
icon: 'img perspective',
},
{
divider: true,
},
{
label: 'Drop table',
isDrop: true,
@@ -121,12 +130,6 @@
insert: true,
},
},
{
label: 'Create perspective',
tab: 'PerspectiveTab',
forceNewTab: true,
icon: 'img perspective',
},
],
views: [
{

9
packages/web/src/datagrid/CellValue.svelte
View File

@@ -35,14 +35,9 @@
</script>
<script lang="ts">
import _, { isPlainObject, join } from 'lodash';
import ShowFormButton from '../formview/ShowFormButton.svelte';
import _ from 'lodash';
import { getBoolSettingsValue } from '../settings/settingsTools';
import { arrayToHexString, isJsonLikeLongString, safeJsonParse } from 'dbgate-tools';
import { showModal } from '../modals/modalTools';
import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
import { openJsonDocument } from '../tabs/JsonTab.svelte';
import openNewTab from '../utility/openNewTab';
import { arrayToHexString } from 'dbgate-tools';
export let rowData;
export let value;

7
packages/web/src/datagrid/DataGridCell.svelte
View File

@@ -1,10 +1,7 @@
<script lang="ts">
import _, { isPlainObject, join } from 'lodash';
import _ from 'lodash';
import ShowFormButton from '../formview/ShowFormButton.svelte';
import { getBoolSettingsValue } from '../settings/settingsTools';
import { arrayToHexString, isJsonLikeLongString, safeJsonParse } from 'dbgate-tools';
import { showModal } from '../modals/modalTools';
import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
import { isJsonLikeLongString, safeJsonParse } from 'dbgate-tools';
import { openJsonDocument } from '../tabs/JsonTab.svelte';
import openNewTab from '../utility/openNewTab';
import CellValue from './CellValue.svelte';

95
packages/web/src/perspectives/PerspectiveLoadingIndicator.svelte Normal file
View File

@@ -0,0 +1,95 @@
<div class="lds-spinner">
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
<div />
</div>
<style>
.lds-spinner {
color: official;
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-spinner div {
transform-origin: 40px 40px;
animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
content: ' ';
display: block;
position: absolute;
top: 3px;
left: 37px;
width: 6px;
height: 18px;
border-radius: 20%;
background: var(--theme-font-2);
}
.lds-spinner div:nth-child(1) {
transform: rotate(0deg);
animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
transform: rotate(30deg);
animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
transform: rotate(60deg);
animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
transform: rotate(90deg);
animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
transform: rotate(120deg);
animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
transform: rotate(150deg);
animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
transform: rotate(180deg);
animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
transform: rotate(210deg);
animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
transform: rotate(240deg);
animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
transform: rotate(270deg);
animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
transform: rotate(300deg);
animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
transform: rotate(330deg);
animation-delay: 0s;
}
@keyframes lds-spinner {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>

16
packages/web/src/perspectives/PerspectiveTable.svelte
View File

@@ -27,6 +27,7 @@
import { openJsonDocument } from '../tabs/JsonTab.svelte';
import PerspectiveCell from './PerspectiveCell.svelte';
import DataGridCell from '../datagrid/DataGridCell.svelte';
import PerspectiveLoadingIndicator from './PerspectiveLoadingIndicator.svelte';
const dbg = debug('dbgate:PerspectivaTable');
export const activator = createActivator('PerspectiveTable', true);
@@ -38,6 +39,7 @@
let dataRows;
let domWrapper;
let errorMessage;
let isLoading = false;
async function loadLevelData(node: PerspectiveTreeNode, parentRows: any[], counts) {
dbg('load level data', counts);
@@ -103,6 +105,7 @@
// console.log('LOADING', node);
if (!node) return;
const rows = [];
isLoading = true;
try {
await loadLevelData(node, rows, counts);
dataRows = rows;
@@ -113,6 +116,7 @@
errorMessage = err.message;
dataRows = null;
}
isLoading = false;
// console.log('DISPLAY ROWS', rows);
// const rows = await node.loadLevelData();
// for (const child of node.childNodes) {
@@ -228,6 +232,12 @@
)}
/>
{/if}
{#if isLoading}
<div class="loader">
<PerspectiveLoadingIndicator />
</div>
{/if}
</div>
<style>
@@ -293,4 +303,10 @@
th {
border: 1px solid;
} */
.loader {
position: absolute;
right: 0;
bottom: 0;
}
</style>