-
-
-
Results will be displayed here
-
+
+
+
+ />
@@ -82,6 +82,7 @@ export default {
},
result: null,
view: 'table',
+ tableViewHeight: 0,
worker: this.$store.state.worker
}
},
@@ -106,6 +107,10 @@ export default {
}))
}
},
+ mounted () {
+ new ResizeObserver(this.calculateTableHeight).observe(document.getElementById('bottomPane'))
+ this.calculateTableHeight()
+ },
methods: {
update (data, layout, frames) {
this.state = { data, layout, frames }
@@ -137,22 +142,36 @@ export default {
this.result = event.data.results[0]
if (!this.result) {
console.log(event.data.error)
- return
+ // return
}
- this.$refs.output.innerHTML = ''
+ // this.$refs.output.innerHTML = ''
}
this.worker.postMessage({ action: 'exec', sql: commands })
- this.$refs.output.textContent = 'Fetching results...'
+ // this.$refs.output.textContent = 'Fetching results...'
},
execEditorContents () {
this.execute(this.code + ';')
+ },
+ calculateTableHeight () {
+ const bottomPane = document.getElementById('bottomPane')
+ // 88 - view swittcher height
+ // 42 - table footer width
+ // 30 - desirable space after the table
+ // 5 - padding-bottom of rounded table container
+ // 40 - height of table header
+ const freeSpace = bottomPane.offsetHeight - 88 - 42 - 30 - 5 - 40
+ this.tableViewHeight = freeSpace - (freeSpace % 40)
}
}
}
diff --git a/src/components/ViewSwitcher.vue b/src/components/ViewSwitcher.vue
index b71452b..e999160 100644
--- a/src/components/ViewSwitcher.vue
+++ b/src/components/ViewSwitcher.vue
@@ -26,7 +26,8 @@ export default {
.view-switcher {
height: 28px;
display: flex;
- margin: 12px;
+ padding: 30px;
+ justify-content: center;
}
.view-switcher div {
height: 100%;