diff --git a/src/components/Schema.vue b/src/components/Schema.vue index 122889d..844e2c4 100644 --- a/src/components/Schema.vue +++ b/src/components/Schema.vue @@ -57,8 +57,7 @@ export default { components: { TableDescription, TextField }, data () { return { - schemaVisible: true, - worker: this.$store.state.worker + schemaVisible: true } }, computed: { @@ -71,29 +70,7 @@ export default { }, 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) + this.$db.loadDb(this.$refs.dbfile.files[0]) } } } diff --git a/src/components/TabContent.vue b/src/components/TabContent.vue index f5f07a2..e3f17cc 100644 --- a/src/components/TabContent.vue +++ b/src/components/TabContent.vue @@ -89,7 +89,6 @@ export default { result: null, view: 'table', tableViewHeight: 0, - worker: this.$store.state.worker, isUnsaved: !this.name } }, @@ -164,18 +163,10 @@ export default { }, // 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...' + // this.$refs.output.textContent = 'Fetching results...' */ + this.$db.execute(commands) + .then(result => { this.result = result }) + .catch(err => alert(err)) }, execEditorContents () { this.execute(this.query + ';') diff --git a/src/dataBase.js b/src/dataBase.js new file mode 100644 index 0000000..3d1a962 --- /dev/null +++ b/src/dataBase.js @@ -0,0 +1,46 @@ +import store from '@/store' +import router from '@/router' +const worker = new Worker('js/worker.sql-wasm.js') + +export default { + loadDb (file) { + const dbName = file.name + store.commit('saveDbName', dbName) + const f = file + const r = new FileReader() + r.onload = () => { + worker.onmessage = () => { + const getSchemaSql = ` + SELECT name, sql + FROM sqlite_master + WHERE type='table' AND name NOT LIKE 'sqlite_%';` + worker.onmessage = event => { + store.commit('saveSchema', event.data.results[0].values) + if (router.currentRoute.path !== '/editor') { + router.push('/editor') + } + } + worker.postMessage({ action: 'exec', sql: getSchemaSql }) + } + store.commit('saveDbFile', r.result) + try { + worker.postMessage({ action: 'open', buffer: r.result }, [r.result]) + } catch (exception) { + worker.postMessage({ action: 'open', buffer: r.result }) + } + } + r.readAsArrayBuffer(f) + }, + execute (commands) { + return new Promise((resolve, reject) => { + worker.onmessage = (event) => { + if (event.data.error) { + reject(event.data.error) + } + // if it was more than one select - take only the first one + resolve(event.data.results[0]) + } + worker.postMessage({ action: 'exec', sql: commands }) + }) + } +} diff --git a/src/main.js b/src/main.js index 653a6d3..29f890b 100644 --- a/src/main.js +++ b/src/main.js @@ -4,6 +4,7 @@ import router from './router' import store from './store' import { VuePlugin } from 'vuera' import VModal from 'vue-js-modal' +import db from '@/dataBase' import '@/assets/styles/variables.css' import '@/assets/styles/buttons.css' @@ -14,6 +15,7 @@ Vue.use(VuePlugin) Vue.use(VModal) Vue.config.productionTip = false +Vue.prototype.$db = db new Vue({ router, diff --git a/src/store/index.js b/src/store/index.js index e758faa..861071e 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -8,7 +8,6 @@ export default new Vuex.Store({ schema: null, dbFile: null, dbName: null, - worker: new Worker('js/worker.sql-wasm.js'), tabs: [], currentTab: null, currentTabId: null, diff --git a/src/views/DbUpload.vue b/src/views/DbUpload.vue index b5ac536..db8c814 100644 --- a/src/views/DbUpload.vue +++ b/src/views/DbUpload.vue @@ -25,41 +25,13 @@