mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 18:18:53 +08:00
0.0.1
This commit is contained in:
lana-k
@@ -1,3 +0,0 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
@@ -1,5 +0,0 @@
|
||||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
28
.eslintrc.js
28
.eslintrc.js
@@ -1,28 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/essential',
|
||||
'@vue/standard'
|
||||
],
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: [
|
||||
'**/__tests__/*.{j,t}s?(x)',
|
||||
'**/tests/unit/**/*.spec.{j,t}s?(x)'
|
||||
],
|
||||
env: {
|
||||
mocha: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
22
.gitignore
vendored
22
.gitignore
vendored
@@ -1,22 +0,0 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"git.ignoreLimitWarning": true
|
||||
}
|
||||
21
README.md
21
README.md
@@ -1,21 +0,0 @@
|
||||
# sqliteviz
|
||||
|
||||
**Note: This is a work-in-progress project.**
|
||||
|
||||
Sqliteviz is a single-page application for fully client-side visualisation of SQLite databases.
|
||||
It's a kind of middleground between [Plotly Falcon][1] and [Redash][2].
|
||||
It is built on top of [react-chart-editor][3] and [sql.js][4] in [Vue.js][5].
|
||||
|
||||
## Features
|
||||
|
||||
1. Ad-hoc and prepared visualisation of a SQLite database using flexibility
|
||||
of SQL and richness of Plotly's `react-chart-editor`
|
||||
2. Visualisation pallete, SQL and chart definitions, kept in local
|
||||
storage with import/export
|
||||
3. Integration-side provided pallete
|
||||
|
||||
[1]: https://github.com/plotly/falcon
|
||||
[2]: https://github.com/getredash/redash
|
||||
[3]: https://github.com/plotly/react-chart-editor
|
||||
[4]: https://github.com/sql-js/sql.js
|
||||
[5]: https://github.com/vuejs/vue
|
||||
@@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 243 B After Width: | Height: | Size: 243 B |
16869
package-lock.json
generated
16869
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
46
package.json
46
package.json
@@ -1,46 +0,0 @@
|
||||
{
|
||||
"name": "sqliteviz",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"test:unit": "vue-cli-service test:unit",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"codemirror": "^5.57.0",
|
||||
"core-js": "^3.6.5",
|
||||
"plotly.js": "^1.54.6",
|
||||
"react": "^16.13.1",
|
||||
"react-chart-editor": "^0.41.7",
|
||||
"react-dom": "^16.13.1",
|
||||
"sql.js": "^1.3.0",
|
||||
"sqlite-parser": "^1.0.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-codemirror": "^4.0.6",
|
||||
"vue-react": "^1.2.0",
|
||||
"vue-router": "^3.2.0",
|
||||
"vuejs-paginate": "^2.1.0",
|
||||
"vuex": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.4.0",
|
||||
"@vue/cli-plugin-eslint": "^4.4.0",
|
||||
"@vue/cli-plugin-router": "^4.4.0",
|
||||
"@vue/cli-plugin-unit-mocha": "^4.4.0",
|
||||
"@vue/cli-plugin-vuex": "^4.4.0",
|
||||
"@vue/cli-service": "^4.4.0",
|
||||
"@vue/eslint-config-standard": "^5.1.2",
|
||||
"@vue/test-utils": "^1.0.3",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"chai": "^4.1.2",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-import": "^2.20.2",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-standard": "^4.0.0",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
16
src/App.vue
16
src/App.vue
@@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#app, * {
|
||||
font-family: Open-Sans, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992 5.79997L1.99992 11.2L0.721924 9.93097Z" fill="#506784"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 243 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 232 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.25 15.75H6V5.25H14.25V15.75ZM14.25 3.75H6C5.60218 3.75 5.22064 3.90804 4.93934 4.18934C4.65804 4.47064 4.5 4.85218 4.5 5.25V15.75C4.5 16.1478 4.65804 16.5294 4.93934 16.8107C5.22064 17.092 5.60218 17.25 6 17.25H14.25C14.6478 17.25 15.0294 17.092 15.3107 16.8107C15.592 16.5294 15.75 16.1478 15.75 15.75V5.25C15.75 4.85218 15.592 4.47064 15.3107 4.18934C15.0294 3.90804 14.6478 3.75 14.25 3.75ZM12 0.75H3C2.60218 0.75 2.22064 0.908035 1.93934 1.18934C1.65804 1.47064 1.5 1.85218 1.5 2.25V12.75H3V2.25H12V0.75Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 643 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 10.5V12.75C3 14.25 5.2875 15.54 8.25 15.75V13.5825L8.3475 13.5C5.34 13.32 3 12.045 3 10.5ZM9 9.75C5.685 9.75 3 8.4075 3 6.75V9C3 10.6575 5.685 12 9 12C9.2925 12 9.5775 12 9.87 12L12.75 9.09C11.55 9.54 10.2825 9.75 9 9.75ZM9 2.25C5.685 2.25 3 3.5925 3 5.25C3 6.9075 5.685 8.25 9 8.25C12.315 8.25 15 6.9075 15 5.25C15 3.5925 12.315 2.25 9 2.25ZM15.75 8.3475C15.6375 8.3475 15.5325 8.3925 15.4575 8.475L14.7075 9.225L16.245 10.725L16.995 9.975C17.1525 9.825 17.16 9.57 16.995 9.3975L16.065 8.475C15.99 8.3925 15.885 8.3475 15.78 8.3475H15.75ZM14.28 9.66L9.75 14.205V15.75H11.295L15.84 11.1975L14.28 9.66Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 735 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.75 2.25V3H3V4.5H3.75V14.25C3.75 14.6478 3.90804 15.0294 4.18934 15.3107C4.47064 15.592 4.85218 15.75 5.25 15.75H12.75C13.1478 15.75 13.5294 15.592 13.8107 15.3107C14.092 15.0294 14.25 14.6478 14.25 14.25V4.5H15V3H11.25V2.25H6.75ZM5.25 4.5H12.75V14.25H5.25V4.5ZM6.75 6V12.75H8.25V6H6.75ZM9.75 6V12.75H11.25V6H9.75Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 447 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.675 16.5 4.5 16.5H13.5C14.325 16.5 15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15ZM12 8.25V13.575L10.425 12L8.325 14.1L6.225 12L8.325 9.9L6.675 8.25H12Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 346 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.545 6.75L11.25 7.455L4.44 14.25H3.75V13.56L10.545 6.75ZM13.245 2.25C13.0575 2.25 12.8625 2.325 12.72 2.4675L11.3475 3.84L14.16 6.6525L15.5325 5.28C15.825 4.9875 15.825 4.5 15.5325 4.2225L13.7775 2.4675C13.6275 2.3175 13.44 2.25 13.245 2.25ZM10.545 4.6425L2.25 12.9375V15.75H5.0625L13.3575 7.455L10.545 4.6425Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 444 B |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@@ -1,54 +0,0 @@
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--color-accent);
|
||||
border: 1px solid var(--color-accent-shade);
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--border-radius-big);
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
min-width: 83px;
|
||||
color: var(--color-text-light);
|
||||
text-shadow: var(--shadow);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.primary:hover {
|
||||
background: var(--color-accent-shade);
|
||||
border: 1px solid var(--color-accent-shade);
|
||||
color: var(--color-text-light);
|
||||
text-shadow: var(--shadow);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button.primary:disabled {
|
||||
background: var(--color-bg-light-2);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-light-2);
|
||||
text-shadow: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
button.toolbar {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
color: var(--color-text-base);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.toolbar:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-accent);
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
.rounded-bg {
|
||||
padding: 40px 5px 5px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
border: 1px solid var(--color-border-light);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.header-container {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -1px;;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
padding-left: 7px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-bg-dark);
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.header-container > div {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
table {
|
||||
min-width: 100%;
|
||||
margin-top: -40px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
thead th, .fixed-header {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-bg-dark);
|
||||
color: var(--color-text-light);
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
}
|
||||
tbody td {
|
||||
font-size: 13px;
|
||||
background-color:white;
|
||||
color: var(--color-text-base);
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
}
|
||||
td, th, .fixed-header {
|
||||
padding: 12px 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tbody tr td:last-child,
|
||||
thead tr th:last-child,
|
||||
.header-container div .fixed-header:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
td > div.cell-data {
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.table-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
.table-footer-count {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-base);
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
input[type="text"] {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-base);
|
||||
border-radius: var(--border-radius-medium-2);
|
||||
height: 36px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
input[type="text"]::placeholder {
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
:root {
|
||||
--color-white: #ffffff;
|
||||
--color-gray-light: #F3F6FA;
|
||||
--color-gray-light-2: #DFE8F3;
|
||||
--color-gray-light-3: #C8D4E3;
|
||||
--color-gray-light-4:#EBF0F8;
|
||||
--color-gray-light-5:#f8f8f9;
|
||||
--color-gray-medium: #A2B1C6;
|
||||
--color-gray-dark: #506784;
|
||||
--color-blue-medium: #119DFF;
|
||||
--color-blue-dark: #0D76BF;
|
||||
--color-blue-dark-2: #2A3F5F;
|
||||
|
||||
|
||||
|
||||
--color-bg-light: var(--color-gray-light);
|
||||
--color-bg-light-2: var(--color-gray-light-2);
|
||||
--color-bg-light-3: var(--color-gray-light-5);
|
||||
--color-bg-dark: var(--color-gray-dark);
|
||||
--color-accent: var(--color-blue-medium);
|
||||
--color-accent-shade: var(--color-blue-dark);
|
||||
--color-border-light: var(--color-gray-light-2);
|
||||
--color-border: var(--color-gray-light-3);
|
||||
--color-text-light: var(--color-white);
|
||||
--color-text-light-2: var(--color-gray-medium);
|
||||
--color-text-base: var(--color-gray-dark);
|
||||
--color-text-active: var(--color-blue-dark-2);
|
||||
|
||||
--shadow: 0 1px 2px rgba(42, 63, 95, 0.7);
|
||||
|
||||
--border-radius-big: 5px;
|
||||
--border-radius-medium: 3px;
|
||||
--border-radius-medium-2: 4px;
|
||||
--border-radius-small: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<nav>
|
||||
<div>
|
||||
<router-link to="/editor">Editor</router-link>
|
||||
<router-link to="/my-queries">My queries</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
v-if="$store.state.tabs.length > 0"
|
||||
class="primary"
|
||||
:disabled="!$store.state.currentTab.isUnsaved"
|
||||
@click="saveQuery"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button class="primary" @click="createNewQuery">Create</button>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MainMenu',
|
||||
methods: {
|
||||
createNewQuery () {
|
||||
const tab = {
|
||||
id: Number(new Date()),
|
||||
name: null,
|
||||
tempName: this.$store.state.untitledLastIndex
|
||||
? `Untitled ${this.$store.state.untitledLastIndex}`
|
||||
: 'Untitled',
|
||||
isUnsaved: true
|
||||
}
|
||||
this.$store.commit('addTab', tab)
|
||||
this.$store.commit('setCurrentTabId', tab.id)
|
||||
this.$store.commit('updateUntitledLastIndex')
|
||||
},
|
||||
saveQuery () {
|
||||
const currentQuery = this.$store.state.currentTab
|
||||
const isFromScratch = !this.$store.state.currentTab.initName
|
||||
const value = {
|
||||
id: currentQuery.id,
|
||||
query: currentQuery.query
|
||||
// TODO: save plotly settings
|
||||
}
|
||||
|
||||
if (isFromScratch) {
|
||||
value.name = prompt('query name')
|
||||
// TODO: create dialog
|
||||
this.$store.commit('updateTabName', { index: currentQuery.tabIndex, newName: value.name })
|
||||
value.createdAt = new Date()
|
||||
} else {
|
||||
value.name = currentQuery.initName
|
||||
}
|
||||
|
||||
let myQueries = JSON.parse(localStorage.getItem('myQueries'))
|
||||
if (!myQueries) {
|
||||
myQueries = [value]
|
||||
} else if (isFromScratch) {
|
||||
myQueries.push(value)
|
||||
} else {
|
||||
const queryIndex = myQueries.findIndex(query => query.id === currentQuery.id)
|
||||
value.createdAt = myQueries[queryIndex].createdAt
|
||||
myQueries[queryIndex] = value
|
||||
}
|
||||
localStorage.setItem('myQueries', JSON.stringify(myQueries))
|
||||
currentQuery.isUnsaved = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
nav {
|
||||
height: 68px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--color-bg-light);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
padding: 0 52px;
|
||||
}
|
||||
a {
|
||||
font-size: 18px;
|
||||
color: var(--color-text-base);
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
margin-right: 28px;
|
||||
}
|
||||
a.router-link-active {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<paginate
|
||||
:page-count="pageCount"
|
||||
:page-range="5"
|
||||
:margin-pages="1"
|
||||
:prev-text="chevron"
|
||||
:next-text="chevron"
|
||||
:no-li-surround="true"
|
||||
container-class="paginator-continer"
|
||||
page-link-class="paginator-page-link"
|
||||
active-class="paginator-active-page"
|
||||
break-view-link-class="paginator-break"
|
||||
next-link-class="paginator-next"
|
||||
prev-link-class="paginator-prev"
|
||||
disabled-class="paginator-disabled"
|
||||
v-model="page"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Paginate from 'vuejs-paginate'
|
||||
|
||||
export default {
|
||||
name: 'Pager',
|
||||
components: { Paginate },
|
||||
props: ['pageCount', 'value'],
|
||||
data () {
|
||||
return {
|
||||
page: this.value,
|
||||
chevron: `
|
||||
<svg width="9" height="9" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992 5.79997L1.99992 11.2L0.721924 9.93097Z" fill="#506784"/>
|
||||
</svg>
|
||||
`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
page () {
|
||||
this.$emit('input', this.page)
|
||||
},
|
||||
value () {
|
||||
this.page = this.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.paginator-continer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
>>> .paginator-page-link {
|
||||
padding: 2px 3px;
|
||||
margin: 0 5px;
|
||||
display: block;
|
||||
color: var(--color-text-base);
|
||||
font-size: 11px;
|
||||
}
|
||||
>>> .paginator-page-link:hover {
|
||||
color: var(--color-text-active);
|
||||
}
|
||||
>>> .paginator-page-link:active,
|
||||
>>> .paginator-page-link:visited,
|
||||
>>> .paginator-page-link:focus,
|
||||
>>> .paginator-next:active,
|
||||
>>> .paginator-next:visited,
|
||||
>>> .paginator-next:focus,
|
||||
>>> .paginator-prev:active,
|
||||
>>> .paginator-prev:visited,
|
||||
>>> .paginator-prev:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
>>> .paginator-active-page,
|
||||
>>> .paginator-active-page:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
>>> .paginator-break:hover,
|
||||
>>> .paginator-disabled:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
>>> .paginator-prev svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
>>> .paginator-next:hover path,
|
||||
>>> .paginator-prev:hover path {
|
||||
fill: var(--color-text-active);
|
||||
}
|
||||
>>> .paginator-disabled path,
|
||||
>>> .paginator-disabled:hover path {
|
||||
fill: var(--color-text-light-2);
|
||||
}
|
||||
</style>
|
||||
@@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<input type="text" placeholder="Search table"/>
|
||||
<div id="db">
|
||||
<div @click="schemaVisible = !schemaVisible" class="db-name">
|
||||
<svg
|
||||
:style="{transform: schemaVisible ? 'rotate(90deg)' : 'rotate(0)'}"
|
||||
class="chevron-icon"
|
||||
width="9"
|
||||
height="9"
|
||||
viewBox="0 0 8 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992 5.79997L1.99992 11.2L0.721924 9.93097Z"
|
||||
:fill="schemaVisible ? '#506784' : 'rgba(80, 103, 132, 0.5)'"
|
||||
/>
|
||||
</svg>
|
||||
{{ dbName }}
|
||||
</div>
|
||||
<div class="db-edit">
|
||||
<input type="file" id="actual-btn" ref="dbfile" hidden @change="changeDb"/>
|
||||
<label for="actual-btn">
|
||||
<svg
|
||||
class="db-edit-icon"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M3 10.5V12.75C3 14.25 5.2875 15.54 8.25 15.75V13.5825L8.3475 13.5C5.34 13.32 3 12.045 3 10.5ZM9 9.75C5.685 9.75 3 8.4075 3 6.75V9C3 10.6575 5.685 12 9 12C9.2925 12 9.5775 12 9.87 12L12.75 9.09C11.55 9.54 10.2825 9.75 9 9.75ZM9 2.25C5.685 2.25 3 3.5925 3 5.25C3 6.9075 5.685 8.25 9 8.25C12.315 8.25 15 6.9075 15 5.25C15 3.5925 12.315 2.25 9 2.25ZM15.75 8.3475C15.6375 8.3475 15.5325 8.3925 15.4575 8.475L14.7075 9.225L16.245 10.725L16.995 9.975C17.1525 9.825 17.16 9.57 16.995 9.3975L16.065 8.475C15.99 8.3925 15.885 8.3475 15.78 8.3475H15.75ZM14.28 9.66L9.75 14.205V15.75H11.295L15.84 11.1975L14.28 9.66Z"
|
||||
fill="#A2B1C6"/>
|
||||
</svg>
|
||||
</label>
|
||||
<span class="db-edit-tooltip">Change database</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="schemaVisible" class="schema">
|
||||
<table-description
|
||||
v-for="(table, index) in schema"
|
||||
:key="index"
|
||||
:name="table[0]"
|
||||
:sql="table[1]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableDescription from '@/components/TableDescription'
|
||||
|
||||
export default {
|
||||
name: 'Schema',
|
||||
components: { TableDescription },
|
||||
data () {
|
||||
return {
|
||||
schemaVisible: true,
|
||||
worker: this.$store.state.worker
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
schema () {
|
||||
return this.$store.state.schema
|
||||
},
|
||||
dbName () {
|
||||
return this.$store.state.dbName
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeDb () {
|
||||
const dbName = this.$refs.dbfile.value.substr(this.$refs.dbfile.value.lastIndexOf('\\') + 1)
|
||||
this.$store.commit('saveDbName', dbName)
|
||||
const f = this.$refs.dbfile.files[0]
|
||||
const r = new FileReader()
|
||||
r.onload = () => {
|
||||
this.worker.onmessage = () => {
|
||||
const getSchemaSql = `
|
||||
SELECT name, sql
|
||||
FROM sqlite_master
|
||||
WHERE type='table' AND name NOT LIKE 'sqlite_%';`
|
||||
this.worker.onmessage = event => {
|
||||
this.$store.commit('saveSchema', event.data.results[0].values)
|
||||
}
|
||||
this.worker.postMessage({ action: 'exec', sql: getSchemaSql })
|
||||
}
|
||||
this.$store.commit('saveDbFile', r.result)
|
||||
try {
|
||||
this.worker.postMessage({ action: 'open', buffer: r.result }, [r.result])
|
||||
} catch (exception) {
|
||||
this.worker.postMessage({ action: 'open', buffer: r.result })
|
||||
}
|
||||
}
|
||||
r.readAsArrayBuffer(f)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.schema {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.schema, .db-name {
|
||||
color: var(--color-text-base);
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#db {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.db-name {
|
||||
cursor: pointer;
|
||||
}
|
||||
>>> .chevron-icon {
|
||||
-webkit-transition: transform .15s ease-in-out;
|
||||
transition: transform .15s ease-in-out;
|
||||
}
|
||||
.db-name:hover .chevron-icon path,
|
||||
>>> .table-name:hover .chevron-icon path {
|
||||
fill: #506784;
|
||||
}
|
||||
|
||||
.db-edit {
|
||||
position: relative;
|
||||
}
|
||||
.db-edit-icon {
|
||||
display: block;
|
||||
}
|
||||
.db-edit-icon:hover path{
|
||||
fill: var(--color-accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.db-edit-tooltip {
|
||||
visibility: hidden;
|
||||
background-color: rgba(80, 103, 132, 0.75);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
padding: 0 6px;
|
||||
line-height: 19px;;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
height: 19px;
|
||||
left: 24px;
|
||||
top: -12px;
|
||||
border-radius: var(--border-radius-medium);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.db-edit:hover .db-edit-tooltip {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="rounded-bg">
|
||||
<div class="header-container" ref="header-container">
|
||||
<div>
|
||||
<div
|
||||
v-for="(th, index) in header"
|
||||
class="fixed-header"
|
||||
:style="{ width: `${th.width}px` }"
|
||||
:key="index"
|
||||
>
|
||||
{{ th.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-container"
|
||||
ref="table-container"
|
||||
@scroll="onScrollTable"
|
||||
:style="{height: `${height}px`}"
|
||||
>
|
||||
<table ref="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(th,index) in data.columns" :key="index" ref="th">
|
||||
<div class="cell-data" :style="cellStyle">{{ th }}</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row,index) in currentPageData" :key="index">
|
||||
<td v-for="(value, valIndex) in row" :key="valIndex">
|
||||
<div class="cell-data" :style="cellStyle">{{ value }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-footer">
|
||||
<div class="table-footer-count">
|
||||
{{ data.values.length}} {{data.values.length === 1 ? 'row' : 'rows'}} retrieved
|
||||
</div>
|
||||
<pager v-show="pageCount > 1" :page-count="pageCount" v-model="currentPage" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pager from '@/components/Pager'
|
||||
|
||||
export default {
|
||||
name: 'SqlTable',
|
||||
components: { Pager },
|
||||
props: ['data', 'height'],
|
||||
data () {
|
||||
return {
|
||||
header: null,
|
||||
tableWidth: null,
|
||||
currentPage: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cellStyle () {
|
||||
const eq = this.tableWidth / this.data.columns.length
|
||||
|
||||
return { maxWidth: `${Math.max(eq, 100)}px` }
|
||||
},
|
||||
pageSize () {
|
||||
return Math.max(Math.floor(this.height / 40), 20)
|
||||
},
|
||||
pageCount () {
|
||||
return Math.ceil(this.data.values.length / this.pageSize)
|
||||
},
|
||||
currentPageData () {
|
||||
const start = (this.currentPage - 1) * this.pageSize
|
||||
return this.data.values.slice(start, start + this.pageSize)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calculateHeadersWidth () {
|
||||
this.tableWidth = this.$refs['table-container'].offsetWidth
|
||||
this.$nextTick(() => {
|
||||
this.header = this.$refs.th.map(th => {
|
||||
return { name: th.innerText, width: th.offsetWidth }
|
||||
})
|
||||
})
|
||||
},
|
||||
onScrollTable () {
|
||||
this.$refs['header-container'].scrollLeft = this.$refs['table-container'].scrollLeft
|
||||
},
|
||||
functionName () {
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
new ResizeObserver(this.calculateHeadersWidth).observe(this.$refs.table)
|
||||
this.calculateHeadersWidth()
|
||||
},
|
||||
watch: {
|
||||
currentPageData: 'calculateHeadersWidth',
|
||||
data () {
|
||||
this.currentPage = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,247 +0,0 @@
|
||||
<template>
|
||||
<div class="tab-content-container" v-show="isActive">
|
||||
<splitpanes
|
||||
class="query-results-splitter"
|
||||
horizontal
|
||||
:before="{ size: 50, max: 50 }"
|
||||
:after="{ size: 50, max: 100 }"
|
||||
>
|
||||
<div slot="left-pane" class="query-editor">
|
||||
<div class="codemirror-container">
|
||||
<codemirror v-model="query" :options="cmOptions" @changes="onCmChange" ref="codemirror" />
|
||||
</div>
|
||||
<div class="run-btn-container">
|
||||
<button class="primary run-btn" @click="execEditorContents">Run</button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="right-pane" id="bottomPane" ref="bottomPane">
|
||||
<view-switcher :view.sync="view" />
|
||||
<div v-show="view === 'table'" class="table-view">
|
||||
<!-- <div id="error" class="error"></div>
|
||||
<pre ref="output" id="output">Results will be displayed here</pre> -->
|
||||
<sql-table v-if="result" :data="result" :height="tableViewHeight" />
|
||||
</div>
|
||||
<PlotlyEditor
|
||||
v-show="view === 'chart'"
|
||||
:data="state.data"
|
||||
:layout="state.layout"
|
||||
:frames="state.frames"
|
||||
:config="{ editable: true }"
|
||||
:dataSources="dataSources"
|
||||
:dataSourceOptions="dataSourceOptions"
|
||||
:plotly="plotly"
|
||||
@onUpdate="update"
|
||||
:useResizeHandler="true"
|
||||
:debug="true"
|
||||
:advancedTraceTypeSelector="true"
|
||||
/>
|
||||
</div>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SqlTable from '@/components/SqlTable'
|
||||
import Splitpanes from '@/components/splitpanes'
|
||||
import ViewSwitcher from '@/components/ViewSwitcher'
|
||||
|
||||
import plotly from 'plotly.js/dist/plotly'
|
||||
import 'react-chart-editor/lib/react-chart-editor.min.css'
|
||||
|
||||
import CM from 'codemirror'
|
||||
import { codemirror } from 'vue-codemirror'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import 'codemirror/mode/sql/sql.js'
|
||||
import 'codemirror/theme/neo.css'
|
||||
import 'codemirror/addon/hint/show-hint.js'
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
import 'codemirror/addon/hint/sql-hint.js'
|
||||
|
||||
export default {
|
||||
name: 'TabContent',
|
||||
props: ['id', 'initName', 'initQuery', 'initPlotly', 'tabIndex'],
|
||||
components: {
|
||||
codemirror,
|
||||
SqlTable,
|
||||
Splitpanes,
|
||||
ViewSwitcher
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
plotly: plotly,
|
||||
state: {
|
||||
data: [],
|
||||
layout: {},
|
||||
frames: []
|
||||
},
|
||||
query: 'select * from albums',
|
||||
cmOptions: {
|
||||
// codemirror options
|
||||
tabSize: 4,
|
||||
mode: 'text/x-mysql',
|
||||
theme: 'neo',
|
||||
lineNumbers: true,
|
||||
line: true
|
||||
},
|
||||
result: null,
|
||||
view: 'table',
|
||||
tableViewHeight: 0,
|
||||
worker: this.$store.state.worker,
|
||||
isUnsaved: !this.name
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isActive () {
|
||||
return this.id === this.$store.state.currentTabId
|
||||
},
|
||||
dataSources () {
|
||||
if (!this.result) {
|
||||
return {}
|
||||
}
|
||||
const dataSorces = {}
|
||||
const matrix = this.result.values
|
||||
const [row] = matrix
|
||||
const transposedMatrix = row.map((value, column) => matrix.map(row => row[column]))
|
||||
this.result.columns.forEach((column, index) => {
|
||||
dataSorces[column] = transposedMatrix[index]
|
||||
})
|
||||
return dataSorces
|
||||
},
|
||||
dataSourceOptions () {
|
||||
return Object.keys(this.dataSources).map(name => ({
|
||||
value: name,
|
||||
label: name
|
||||
}))
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$store.commit('setCurrentTab', this)
|
||||
},
|
||||
mounted () {
|
||||
new ResizeObserver(this.calculateTableHeight).observe(this.$refs.bottomPane)
|
||||
this.calculateTableHeight()
|
||||
},
|
||||
watch: {
|
||||
isActive () {
|
||||
if (this.isActive) {
|
||||
this.$store.commit('setCurrentTab', this)
|
||||
}
|
||||
},
|
||||
query () {
|
||||
this.isUnsaved = true
|
||||
},
|
||||
isUnsaved () {
|
||||
this.$store.commit('updateTabState', { index: this.tabIndex, newValue: this.isUnsaved })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update (data, layout, frames) {
|
||||
this.state = { data, layout, frames }
|
||||
this.isUnsaved = true
|
||||
console.log(this.state)
|
||||
},
|
||||
onCmChange (editor) {
|
||||
// Don't show autocomplete after a space or semicolon
|
||||
const ch = editor.getTokenAt(editor.getCursor()).string.slice(-1)
|
||||
if (!ch || ch === ' ' || ch === ';') {
|
||||
return
|
||||
}
|
||||
|
||||
const hintOptions = {
|
||||
// tables: this.state.tables,
|
||||
completeSingle: false,
|
||||
completeOnSingleClick: true
|
||||
}
|
||||
|
||||
// editor.hint.sql is defined when importing codemirror/addon/hint/sql-hint
|
||||
// (this is mentioned in codemirror addon documentation)
|
||||
// Reference the hint function imported here when including other hint addons
|
||||
// or supply your own
|
||||
CM.showHint(editor, CM.hint.sql, hintOptions)
|
||||
},
|
||||
// Run a command in the database
|
||||
execute (commands) {
|
||||
this.worker.onmessage = (event) => {
|
||||
// if it was more than one select - take only the first one
|
||||
this.result = event.data.results[0]
|
||||
if (!this.result) {
|
||||
console.log(event.data.error)
|
||||
// return
|
||||
}
|
||||
|
||||
// this.$refs.output.innerHTML = ''
|
||||
}
|
||||
this.worker.postMessage({ action: 'exec', sql: commands })
|
||||
// this.$refs.output.textContent = 'Fetching results...'
|
||||
},
|
||||
execEditorContents () {
|
||||
this.execute(this.query + ';')
|
||||
},
|
||||
calculateTableHeight () {
|
||||
const bottomPane = this.$refs.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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab-content-container {
|
||||
padding-top: 6px;
|
||||
background-color: var(--color-bg-light);
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
#bottomPane {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.query-results-splitter {
|
||||
height: calc(100vh - 110px);
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.run-btn {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.query-editor {
|
||||
padding: 52px 52px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
box-sizing: border-box;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.codemirror-container {
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.run-btn-container {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
>>> .vue-codemirror {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
>>> .CodeMirror {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-big);
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.table-view {
|
||||
margin: 0 52px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div @click="colVisible = !colVisible" class="table-name">
|
||||
<svg
|
||||
:style="{transform: colVisible ? 'rotate(90deg)' : 'rotate(0)'}"
|
||||
class="chevron-icon"
|
||||
width="9"
|
||||
height="9"
|
||||
viewBox="0 0 8 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992 5.79997L1.99992 11.2L0.721924 9.93097Z"
|
||||
:fill="colVisible ? '#506784' : 'rgba(80, 103, 132, 0.5)'"
|
||||
/>
|
||||
</svg>
|
||||
{{ name }}
|
||||
</div>
|
||||
<div v-show="colVisible" class="columns">
|
||||
<div v-for="(col, index) in columns" :key="index" class="column">
|
||||
{{ col.name }}
|
||||
<span class="column-type">{{ col.type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sqliteParser from 'sqlite-parser'
|
||||
|
||||
export default {
|
||||
name: 'TableDescription',
|
||||
props: ['name', 'sql'],
|
||||
data () {
|
||||
return {
|
||||
colVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ast () {
|
||||
return sqliteParser(this.sql)
|
||||
},
|
||||
columns () {
|
||||
const columns = []
|
||||
this.ast.statement[0].definition.forEach(item => {
|
||||
if (item.variant === 'column') {
|
||||
let type = item.datatype.variant
|
||||
if (item.datatype.args) {
|
||||
type = type + '(' + item.datatype.args.expression[0].value
|
||||
if (item.datatype.args.expression.length === 2) {
|
||||
type = type + ', ' + item.datatype.args.expression[1].value
|
||||
}
|
||||
type = type + ')'
|
||||
}
|
||||
columns.push({ name: item.name, type: type })
|
||||
}
|
||||
})
|
||||
return columns
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.table-name, .column {
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
.table-name:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.columns {
|
||||
margin-left: 24px;
|
||||
}
|
||||
.column-type {
|
||||
display: inline-block;
|
||||
background-color: var(--color-gray-light-4);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
@@ -1,132 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="tabs__header">
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="tab.id"
|
||||
@click="selectTab(tab.id)"
|
||||
:class="[{'tab__selected': (tab.id === selectedIndex)}, 'tab']"
|
||||
>
|
||||
<div class="tab-name">
|
||||
<span v-show="tab.isUnsaved">*</span>
|
||||
<span v-if="tab.name">{{ tab.name }}</span>
|
||||
<span v-else class="tab-untitled">{{ tab.tempName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<svg
|
||||
class="close-icon"
|
||||
@click.stop="closeTab(index)"
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
|
||||
fill="#A2B1C6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<tab-content
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="tab.id"
|
||||
:id="tab.id"
|
||||
:init-name="tab.name"
|
||||
:tab-index="index"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TabContent from '@/components/TabContent'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TabContent
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs () {
|
||||
return this.$store.state.tabs
|
||||
},
|
||||
selectedIndex () {
|
||||
return this.$store.state.currentTabId
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectTab (id) {
|
||||
this.$store.commit('setCurrentTabId', id)
|
||||
},
|
||||
closeTab (index) {
|
||||
this.$store.commit('deleteTab', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#tabs__header {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#tabs__header .tab {
|
||||
height: 36px;
|
||||
background-color: var(--color-bg-light);
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-base);
|
||||
padding: 0 12px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
max-width: 200px;
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
#tabs__header .tab-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#tabs__header div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tabs__header .tab__selected {
|
||||
color: var(--color-text-active);
|
||||
font-weight: 600;
|
||||
border-bottom: none;
|
||||
}
|
||||
#tabs__header .tab__selected:hover {
|
||||
cursor: default;
|
||||
}
|
||||
#tabs__header .tab__selected:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background-color: var(--color-accent);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.close-icon:hover path {
|
||||
fill: var(--color-text-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="view-switcher">
|
||||
<div
|
||||
:class="['table-mode', {'active-mode': view === 'table'}]"
|
||||
@click="$emit('update:view','table')"
|
||||
>
|
||||
Table
|
||||
</div>
|
||||
<div
|
||||
:class="['chart-mode', {'active-mode': view === 'chart'}]"
|
||||
@click="$emit('update:view','chart')"
|
||||
>
|
||||
Chart
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ViewSwitcher',
|
||||
props: ['view']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.view-switcher {
|
||||
height: 28px;
|
||||
display: flex;
|
||||
padding: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
.view-switcher div {
|
||||
height: 100%;
|
||||
width: 136px;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-base);
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
.view-switcher div:hover {
|
||||
background-color: var(--color-bg-light);
|
||||
color: var(--color-text-active);
|
||||
}
|
||||
.view-switcher div.active-mode {
|
||||
background: var(--color-accent);
|
||||
border: 1px solid var(--color-accent-shade);
|
||||
color: var(--color-text-light);
|
||||
text-shadow: var(--shadow);
|
||||
z-index: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
.view-switcher div.active-mode:hover {
|
||||
background: var(--color-accent-shade);
|
||||
}
|
||||
.table-mode {
|
||||
border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
|
||||
}
|
||||
.chart-mode {
|
||||
margin-left: -1px;
|
||||
border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="container"
|
||||
:class="['splitpanes', `splitpanes--${horizontal ? 'horizontal' : 'vertical'}`, { 'splitpanes--dragging': touch.dragging }]"
|
||||
>
|
||||
<div
|
||||
class="splitpanes__pane"
|
||||
ref="left"
|
||||
:size="paneBefore.size"
|
||||
max-size="30"
|
||||
:style="styles[0]"
|
||||
>
|
||||
<slot name="left-pane" />
|
||||
</div>
|
||||
|
||||
<splitter
|
||||
@mousedown="onMouseDown"
|
||||
@toggle="toggleFirstPane"
|
||||
:expanded="paneBefore.size !== 0"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="splitpanes__pane"
|
||||
ref="right"
|
||||
:style="styles[1]"
|
||||
>
|
||||
<slot name="right-pane" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Splitter from '@/components/splitter'
|
||||
|
||||
export default {
|
||||
name: 'splitpanes',
|
||||
components: { Splitter },
|
||||
props: {
|
||||
horizontal: { type: Boolean, default: false },
|
||||
before: { type: Object },
|
||||
after: { type: Object }
|
||||
},
|
||||
data: () => ({
|
||||
container: null,
|
||||
paneBefore: null,
|
||||
paneAfter: null,
|
||||
beforeMinimising: 20,
|
||||
touch: {
|
||||
mouseDown: false,
|
||||
dragging: false
|
||||
}
|
||||
}),
|
||||
|
||||
computed: {
|
||||
styles () {
|
||||
return [
|
||||
{ [this.horizontal ? 'height' : 'width']: `${this.paneBefore.size}%` },
|
||||
{ [this.horizontal ? 'height' : 'width']: `${this.paneAfter.size}%` }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
bindEvents () {
|
||||
document.addEventListener('mousemove', this.onMouseMove, { passive: false })
|
||||
document.addEventListener('mouseup', this.onMouseUp)
|
||||
|
||||
// Passive: false to prevent scrolling while touch dragging.
|
||||
if ('ontouchstart' in window) {
|
||||
document.addEventListener('touchmove', this.onMouseMove, { passive: false })
|
||||
document.addEventListener('touchend', this.onMouseUp)
|
||||
}
|
||||
},
|
||||
|
||||
unbindEvents () {
|
||||
document.removeEventListener('mousemove', this.onMouseMove, { passive: false })
|
||||
document.removeEventListener('mouseup', this.onMouseUp)
|
||||
|
||||
if ('ontouchstart' in window) {
|
||||
document.removeEventListener('touchmove', this.onMouseMove, { passive: false })
|
||||
document.removeEventListener('touchend', this.onMouseUp)
|
||||
}
|
||||
},
|
||||
|
||||
onMouseDown () {
|
||||
this.bindEvents()
|
||||
this.touch.mouseDown = true
|
||||
},
|
||||
|
||||
onMouseMove (event) {
|
||||
if (this.touch.mouseDown) {
|
||||
// Prevent scrolling while touch dragging (only works with an active event, eg. passive: false).
|
||||
event.preventDefault()
|
||||
this.touch.dragging = true
|
||||
this.calculatePanesSize(this.getCurrentMouseDrag(event))
|
||||
}
|
||||
},
|
||||
|
||||
onMouseUp () {
|
||||
this.touch.mouseDown = false
|
||||
// Keep dragging flag until click event is finished (click happens immediately after mouseup)
|
||||
// in order to prevent emitting `splitter-click` event if splitter was dragged.
|
||||
setTimeout(() => {
|
||||
this.touch.dragging = false
|
||||
this.unbindEvents()
|
||||
}, 100)
|
||||
},
|
||||
|
||||
// Get the cursor position relative to the splitpane container.
|
||||
getCurrentMouseDrag (event) {
|
||||
const rect = this.container.getBoundingClientRect()
|
||||
const { clientX, clientY } = ('ontouchstart' in window && event.touches) ? event.touches[0] : event
|
||||
|
||||
return {
|
||||
x: clientX - rect.left,
|
||||
y: clientY - rect.top
|
||||
}
|
||||
},
|
||||
|
||||
// Returns the drag percentage of the splitter relative to the 2 panes it's inbetween.
|
||||
// if the sum of size of the 2 cells is 60%, the dragPercentage range will be 0 to 100% of this 60%.
|
||||
getCurrentDragPercentage (drag) {
|
||||
drag = drag[this.horizontal ? 'y' : 'x']
|
||||
// In the code bellow 'size' refers to 'width' for vertical and 'height' for horizontal layout.
|
||||
const containerSize = this.container[this.horizontal ? 'clientHeight' : 'clientWidth']
|
||||
return drag * 100 / containerSize
|
||||
},
|
||||
|
||||
calculatePanesSize (drag) {
|
||||
const dragPercentage = this.getCurrentDragPercentage(drag)
|
||||
// If not pushing other panes, panes to resize are right before and right after splitter.
|
||||
const paneBefore = this.paneBefore
|
||||
const paneAfter = this.paneAfter
|
||||
|
||||
const paneBeforeMaxReached = paneBefore.max < 100 && (dragPercentage >= paneBefore.max)
|
||||
const paneAfterMaxReached = paneAfter.max < 100 && (dragPercentage <= 100 - paneAfter.max)
|
||||
// Prevent dragging beyond pane max.
|
||||
if (paneBeforeMaxReached || paneAfterMaxReached) {
|
||||
if (paneBeforeMaxReached) {
|
||||
paneBefore.size = paneBefore.max
|
||||
paneAfter.size = Math.max(100 - paneBefore.max, 0)
|
||||
} else {
|
||||
paneBefore.size = Math.max(100 - paneAfter.max, 0)
|
||||
paneAfter.size = paneAfter.max
|
||||
}
|
||||
return
|
||||
}
|
||||
paneBefore.size = Math.min(Math.max(dragPercentage, 0), paneBefore.max)
|
||||
paneAfter.size = Math.min(Math.max(100 - dragPercentage, 0), paneAfter.max)
|
||||
},
|
||||
toggleFirstPane () {
|
||||
if (this.paneBefore.size > 0) {
|
||||
this.beforeMinimising = this.paneBefore.size
|
||||
this.paneBefore.size = 0
|
||||
} else {
|
||||
this.paneBefore.size = this.beforeMinimising
|
||||
}
|
||||
this.paneAfter.size = 100 - this.paneBefore.size
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.container = this.$refs.container
|
||||
},
|
||||
created () {
|
||||
this.paneBefore = this.before
|
||||
this.paneAfter = this.after
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.splitpanes {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.splitpanes--vertical {flex-direction: row;}
|
||||
.splitpanes--horizontal {flex-direction: column;}
|
||||
.splitpanes--dragging * {user-select: none;}
|
||||
|
||||
.splitpanes__pane {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="splitpanes__splitter"
|
||||
@mousedown="$emit('mousedown')"
|
||||
@touchstart="$emit('mousedown')"
|
||||
>
|
||||
<div class="toggle-btn" @click="$emit('toggle')">
|
||||
<img
|
||||
class="direction-icon"
|
||||
:src="require('@/assets/images/chevron.svg')"
|
||||
:style="directionIconStyle"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'splitter',
|
||||
props: ['expanded'],
|
||||
computed: {
|
||||
directionIconStyle () {
|
||||
const translation = 'translate(-50%, -50%)'
|
||||
if (this.$parent.horizontal) {
|
||||
return {
|
||||
transform: `${translation} ${this.expanded ? 'rotate(-90deg)' : 'rotate(90deg)'}`
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
transform: `${translation} ${this.expanded ? 'rotate(180deg)' : ''}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.splitpanes--vertical > .splitpanes__splitter {min-width: 1px;cursor: col-resize;}
|
||||
.splitpanes--horizontal > .splitpanes__splitter {min-height: 1px; cursor: row-resize;}
|
||||
.splitpanes__splitter {
|
||||
touch-action: none;
|
||||
background-color: var(--color-bg-light-2);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.splitpanes--vertical > .splitpanes__splitter {
|
||||
width: 3px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.splitpanes--horizontal > .splitpanes__splitter {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
.splitpanes__splitter .toggle-btn {
|
||||
background-color: var(--color-bg-light-2);
|
||||
border-radius: var(--border-radius-small);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.splitpanes__splitter .toggle-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.splitpanes--vertical .toggle-btn {
|
||||
height: 68px;
|
||||
width: 15px;
|
||||
}
|
||||
.splitpanes--horizontal .toggle-btn {
|
||||
width: 68px;
|
||||
height: 15px;
|
||||
}
|
||||
.splitpanes__splitter .toggle-btn .direction-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<svg class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.25 15.75H6V5.25H14.25V15.75ZM14.25 3.75H6C5.60218 3.75 5.22064 3.90804 4.93934 4.18934C4.65804 4.47064 4.5 4.85218 4.5 5.25V15.75C4.5 16.1478 4.65804 16.5294 4.93934 16.8107C5.22064 17.092 5.60218 17.25 6 17.25H14.25C14.6478 17.25 15.0294 17.092 15.3107 16.8107C15.592 16.5294 15.75 16.1478 15.75 15.75V5.25C15.75 4.85218 15.592 4.47064 15.3107 4.18934C15.0294 3.90804 14.6478 3.75 14.25 3.75ZM12 0.75H3C2.60218 0.75 2.22064 0.908035 1.93934 1.18934C1.65804 1.47064 1.5 1.85218 1.5 2.25V12.75H3V2.25H12V0.75Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CopyIcon'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<svg class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.75 2.25V3H3V4.5H3.75V14.25C3.75 14.6478 3.90804 15.0294 4.18934 15.3107C4.47064 15.592 4.85218 15.75 5.25 15.75H12.75C13.1478 15.75 13.5294 15.592 13.8107 15.3107C14.092 15.0294 14.25 14.6478 14.25 14.25V4.5H15V3H11.25V2.25H6.75ZM5.25 4.5H12.75V14.25H5.25V4.5ZM6.75 6V12.75H8.25V6H6.75ZM9.75 6V12.75H11.25V6H9.75Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeleteIcon'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<svg class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.675 16.5 4.5 16.5H13.5C14.325 16.5 15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15ZM12 8.25V13.575L10.425 12L8.325 14.1L6.225 12L8.325 9.9L6.675 8.25H12Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ExportIcon'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<svg class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.545 6.75L11.25 7.455L4.44 14.25H3.75V13.56L10.545 6.75ZM13.245 2.25C13.0575 2.25 12.8625 2.325 12.72 2.4675L11.3475 3.84L14.16 6.6525L15.5325 5.28C15.825 4.9875 15.825 4.5 15.5325 4.2225L13.7775 2.4675C13.6275 2.3175 13.44 2.25 13.245 2.25ZM10.545 4.6425L2.25 12.9375V15.75H5.0625L13.3575 7.455L10.545 4.6425Z" fill="#A2B1C6"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RenameIcon'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin: 0 12px 0 6px;
|
||||
}
|
||||
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
22
src/main.js
22
src/main.js
@@ -1,22 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import VueReact from 'vue-react'
|
||||
import PlotlyEditor from 'react-chart-editor'
|
||||
|
||||
import '@/assets/styles/variables.css'
|
||||
import '@/assets/styles/buttons.css'
|
||||
import '@/assets/styles/textFields.css'
|
||||
import '@/assets/styles/tables.css'
|
||||
|
||||
Vue.use(VueReact)
|
||||
Vue.react('PlotlyEditor', PlotlyEditor)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
@@ -1,39 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Editor from '../views/Editor'
|
||||
import MyQueries from '../views/MyQueries'
|
||||
import DbUpload from '../views/DbUpload'
|
||||
import MainView from '../views/MainView'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Welcome',
|
||||
component: DbUpload
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'MainView',
|
||||
component: MainView,
|
||||
children: [
|
||||
{
|
||||
path: '/editor',
|
||||
name: 'Editor',
|
||||
component: Editor
|
||||
},
|
||||
{
|
||||
path: '/my-queries',
|
||||
name: 'MyQueries',
|
||||
component: MyQueries
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -1,67 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
schema: null,
|
||||
dbFile: null,
|
||||
dbName: null,
|
||||
worker: new Worker('/js/worker.sql-wasm.js'),
|
||||
tabs: [],
|
||||
currentTab: null,
|
||||
currentTabId: null,
|
||||
untitledLastIndex: 0
|
||||
},
|
||||
mutations: {
|
||||
saveSchema (state, schema) {
|
||||
state.schema = schema
|
||||
},
|
||||
saveDbFile (state, file) {
|
||||
state.dbFile = file
|
||||
},
|
||||
saveDbName (state, name) {
|
||||
state.dbName = name
|
||||
},
|
||||
addTab (state, tab) {
|
||||
state.tabs.push(tab)
|
||||
},
|
||||
updateTabName (state, { index, newName }) {
|
||||
const tab = state.tabs[index]
|
||||
tab.name = newName
|
||||
Vue.set(state.tabs, index, tab)
|
||||
},
|
||||
updateTabState (state, { index, newValue }) {
|
||||
console.log(index, newValue)
|
||||
const tab = state.tabs[index]
|
||||
tab.isUnsaved = newValue
|
||||
Vue.set(state.tabs, index, tab)
|
||||
},
|
||||
deleteTab (state, index) {
|
||||
if (state.tabs[index].id !== state.currentTabId) {
|
||||
} else if (index < state.tabs.length - 1) {
|
||||
state.currentTabId = state.tabs[index + 1].id
|
||||
} else if (index > 0) {
|
||||
state.currentTabId = state.tabs[index - 1].id
|
||||
} else {
|
||||
state.currentTabId = null
|
||||
state.untitledLastIndex = 0
|
||||
}
|
||||
state.tabs.splice(index, 1)
|
||||
},
|
||||
setCurrentTabId (state, id) {
|
||||
state.currentTabId = id
|
||||
},
|
||||
setCurrentTab (state, tab) {
|
||||
state.currentTab = tab
|
||||
},
|
||||
updateUntitledLastIndex (state) {
|
||||
state.untitledLastIndex += 1
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
@@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<div id="dbloader-container">
|
||||
<h1>Sqliteviz</h1>
|
||||
<label for="assetsFieldHandle">
|
||||
<div id="drop-area" @dragover="dragover" @dragleave="dragleave" @drop="drop">
|
||||
<input
|
||||
type="file"
|
||||
id="assetsFieldHandle"
|
||||
@change="loadDb"
|
||||
ref="file"
|
||||
accept=".db"
|
||||
/>
|
||||
<div>
|
||||
Drop the database file to upload here or click to choose a file from your computer.
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<div id="error" class="error"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DbUpload',
|
||||
data () {
|
||||
return {
|
||||
worker: this.$store.state.worker
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadDb () {
|
||||
const dbName = this.$refs.file.value.substr(this.$refs.file.value.lastIndexOf('\\') + 1)
|
||||
this.$store.commit('saveDbName', dbName)
|
||||
const f = this.$refs.file.files[0]
|
||||
const r = new FileReader()
|
||||
r.onload = () => {
|
||||
this.worker.onmessage = () => {
|
||||
const getSchemaSql = `
|
||||
SELECT name, sql
|
||||
FROM sqlite_master
|
||||
WHERE type='table' AND name NOT LIKE 'sqlite_%';`
|
||||
this.worker.onmessage = event => {
|
||||
this.$store.commit('saveSchema', event.data.results[0].values)
|
||||
this.$router.push('/editor')
|
||||
}
|
||||
this.worker.postMessage({ action: 'exec', sql: getSchemaSql })
|
||||
}
|
||||
this.$store.commit('saveDbFile', r.result)
|
||||
try {
|
||||
this.worker.postMessage({ action: 'open', buffer: r.result }, [r.result])
|
||||
} catch (exception) {
|
||||
this.worker.postMessage({ action: 'open', buffer: r.result })
|
||||
}
|
||||
}
|
||||
r.readAsArrayBuffer(f)
|
||||
},
|
||||
dragover (event) {
|
||||
event.preventDefault()
|
||||
// TODO: Add some visual fluff to show the user can drop its files
|
||||
if (!event.currentTarget.classList.contains('bg-green-300')) {
|
||||
event.currentTarget.classList.remove('bg-gray-100')
|
||||
event.currentTarget.classList.add('bg-green-300')
|
||||
}
|
||||
},
|
||||
dragleave (event) {
|
||||
// Clean up
|
||||
event.currentTarget.classList.add('bg-gray-100')
|
||||
event.currentTarget.classList.remove('bg-green-300')
|
||||
},
|
||||
drop (event) {
|
||||
event.preventDefault()
|
||||
this.$refs.file.files = event.dataTransfer.files
|
||||
this.loadDb()
|
||||
// Clean up
|
||||
event.currentTarget.classList.add('bg-gray-100')
|
||||
event.currentTarget.classList.remove('bg-green-300')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#dbloader-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
h1 {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
border: 1px dashed var(--color-border);
|
||||
padding: 8px;
|
||||
border-radius: var(--border-radius-big);
|
||||
}
|
||||
#drop-area {
|
||||
width: 231px;
|
||||
height: 153px;
|
||||
background-color: var(--color-bg-light-3);
|
||||
border-radius: var(--border-radius-big);
|
||||
color: var(--color-text-base);
|
||||
font-size: 13px;
|
||||
padding: 44px 15px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<splitpanes
|
||||
class="schema-tabs-splitter"
|
||||
:before="{ size: 20, max: 30 }"
|
||||
:after="{ size: 80, max: 100 }"
|
||||
>
|
||||
<div slot="left-pane">
|
||||
<schema />
|
||||
</div>
|
||||
<div slot="right-pane">
|
||||
<tabs />
|
||||
</div>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Splitpanes from '@/components/splitpanes'
|
||||
import Schema from '@/components/Schema'
|
||||
import Tabs from '@/components/Tabs'
|
||||
|
||||
export default {
|
||||
name: 'Editor',
|
||||
components: {
|
||||
Schema,
|
||||
Splitpanes,
|
||||
Tabs
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.schema-tabs-splitter {
|
||||
height: 100%;
|
||||
margin-left: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<main-menu />
|
||||
<keep-alive include="Editor">
|
||||
<router-view id="main-view" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainMenu from '@/components/MainMenu'
|
||||
import '@/assets/styles/scrollbars.css'
|
||||
|
||||
export default {
|
||||
name: 'MainView',
|
||||
components: { MainMenu }
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#main-view {
|
||||
margin-top: 68px;
|
||||
height: calc(100vh - 68px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,175 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="my-queries-content">
|
||||
<div id="my-queries-toolbar">
|
||||
<div id="toolbar-buttons">
|
||||
<button class="toolbar">Import</button>
|
||||
<button class="toolbar">Export</button>
|
||||
<button class="toolbar">Delete</button>
|
||||
</div>
|
||||
<div id="toolbar-search">
|
||||
<input type="text" placeholder="Search query by name"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-bg">
|
||||
<div class="header-container">
|
||||
<div>
|
||||
<div class="fixed-header" ref="name-th">
|
||||
Name
|
||||
</div>
|
||||
<div class="fixed-header">
|
||||
Created at
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-container"
|
||||
ref="table-container"
|
||||
>
|
||||
<table ref="table">
|
||||
<tbody>
|
||||
<tr v-for="(query, index) in queries" :key="query.id" @click="openQuery(index)">
|
||||
<td ref="name-td">
|
||||
{{ query.name }}
|
||||
</td>
|
||||
<td>
|
||||
<div class="second-column">
|
||||
<div class="date-container">{{ query.createdAt | date }}</div>
|
||||
<div class="icons-container">
|
||||
<rename-icon />
|
||||
<copy-icon />
|
||||
<export-icon />
|
||||
<delete-icon />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RenameIcon from '@/components/svg/rename.vue'
|
||||
import CopyIcon from '@/components/svg/copy.vue'
|
||||
import ExportIcon from '@/components/svg/export.vue'
|
||||
import DeleteIcon from '@/components/svg/delete.vue'
|
||||
|
||||
export default {
|
||||
name: 'MyQueries',
|
||||
components: {
|
||||
RenameIcon,
|
||||
CopyIcon,
|
||||
ExportIcon,
|
||||
DeleteIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
queries: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.queries = JSON.parse(localStorage.getItem('myQueries'))
|
||||
},
|
||||
mounted () {
|
||||
new ResizeObserver(this.calcNameWidth).observe(this.$refs.table)
|
||||
this.calcNameWidth()
|
||||
},
|
||||
filters: {
|
||||
date (value) {
|
||||
if (!value) {
|
||||
return ''
|
||||
}
|
||||
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' }
|
||||
const timeOptions = {
|
||||
hour12: false,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
}
|
||||
return new Date(value).toLocaleDateString('en-GB', dateOptions) + ' ' +
|
||||
new Date(value).toLocaleTimeString('en-GB', timeOptions)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcNameWidth () {
|
||||
this.$refs['name-th'].style = `width: ${this.$refs['name-td'][0].offsetWidth}px`
|
||||
},
|
||||
openQuery (index) {
|
||||
const tab = this.queries[index]
|
||||
tab.isUnsaved = false
|
||||
this.$store.commit('addTab', tab)
|
||||
this.$store.commit('setCurrentTabId', tab.id)
|
||||
this.$router.push('/editor')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#my-queries-content {
|
||||
padding: 52px;
|
||||
}
|
||||
|
||||
#my-queries-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rounded-bg,
|
||||
#my-queries-toolbar {
|
||||
margin: 0 auto;
|
||||
max-width: 1500px;
|
||||
width: 100%;
|
||||
}
|
||||
table {
|
||||
margin-top: 0;
|
||||
}
|
||||
tbody tr td {
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 24px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
tbody tr td:first-child {
|
||||
width: 70%;
|
||||
max-width: 0;
|
||||
}
|
||||
tbody tr td:last-child {
|
||||
width: 30%;
|
||||
max-width: 0;
|
||||
}
|
||||
|
||||
tbody tr:hover td {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tbody tr:hover td {
|
||||
color: var(--color-text-active);
|
||||
}
|
||||
|
||||
.second-column {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.icons-container {
|
||||
display: none;
|
||||
}
|
||||
.date-container {
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
tbody tr:hover .icons-container {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +0,0 @@
|
||||
import { expect } from 'chai'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
describe('HelloWorld.vue', () => {
|
||||
it('renders props.msg when passed', () => {
|
||||
const msg = 'new message'
|
||||
const wrapper = shallowMount(HelloWorld, {
|
||||
propsData: { msg }
|
||||
})
|
||||
expect(wrapper.text()).to.include(msg)
|
||||
})
|
||||
})
|
||||
@@ -1,14 +0,0 @@
|
||||
const CopyPlugin = require('copy-webpack-plugin')
|
||||
|
||||
module.exports = {
|
||||
configureWebpack: {
|
||||
plugins: [
|
||||
new CopyPlugin([
|
||||
// This wasm file will be fetched dynamically when we initialize sql.js
|
||||
// It is important that we do not change its name, and that it is in the same folder as the js
|
||||
{ from: 'node_modules/sql.js/dist/sql-wasm.wasm', to: 'js/' },
|
||||
{ from: 'node_modules/sql.js/dist/worker.sql-wasm.js', to: 'js/' }
|
||||
])
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user