fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-03-29 01:30:10 +01:00
Code Issues Releases Wiki Activity

Additions

Browse Source
This commit is contained in:
Fabio 2020-05-14 15:21:57 +02:00
parent cb9d32d9d2
commit aea94f0325
16 changed files with 247 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -3,4 +3,5 @@ dist/
node_modules/
thumbs.db
.idea/
.vscode
.vscode
TODO.md

10
src/main/index.js
View File

@ -5,7 +5,7 @@ import * as path from 'path';
import { format as formatUrl } from 'url';
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
import ipcApi from './ipc-api';
import ipcHandlers from './ipc-handlers';
const isDevelopment = process.env.NODE_ENV !== 'production';
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true';
@ -15,8 +15,8 @@ let mainWindow;
function createMainWindow () {
const window = new BrowserWindow({
width: 1200,
height: 900,
width: 1600,
height: 1000,
minHeight: 550,
minWidth: 450,
title: 'Antares',
@ -61,8 +61,8 @@ function createMainWindow () {
});
});
// Initialize ipcApi
ipcApi();
// Initialize ipcHandlers
ipcHandlers();
return window;
};

24
src/main/ipc-api/connection.js
View File

@ -1,24 +0,0 @@
import { ipcMain } from 'electron';
import knex from 'knex';
export default () => {
ipcMain.handle('testConnection', async (event, conn) => {
try {
await knex({
client: conn.client,
connection: {
host: conn.host,
port: +conn.port,
user: conn.user,
password: conn.password
}
}).raw('SELECT 1+1 AS result');
return { status: 'success' };
}
catch (err) {
return { status: 'error', response: err };
}
});
};

50
src/main/ipc-handlers/connection.js Normal file
View File

@ -0,0 +1,50 @@
import { ipcMain } from 'electron';
import knex from 'knex';
import InformationSchema from '../models/InformationSchema';
const connections = {};
export default () => {
ipcMain.handle('testConnection', async (event, conn) => {
try {
await knex({
client: conn.client,
connection: {
host: conn.host,
port: +conn.port,
user: conn.user,
password: conn.password
}
}).raw('SELECT 1+1 AS result');
return { status: 'success' };
}
catch (err) {
return { status: 'error', response: err };
}
});
ipcMain.handle('checkConnection', async (event, uid) => {
return uid in connections;
});
ipcMain.handle('connect', async (event, conn) => {
// TODO: make a test before
connections[conn.uid] = knex({
client: conn.client,
connection: {
host: conn.host,
port: +conn.port,
user: conn.user,
password: conn.password
},
pool: {
min: 1,
max: 3
}
});
return await InformationSchema.getStructure(connections[conn.uid]);
});
};

0
src/main/ipc-api/index.js → src/main/ipc-handlers/index.js
View File

10
src/main/models/InformationSchema.js Normal file
View File

@ -0,0 +1,10 @@
'use strict';
export default class {
static getStructure (connection) {
return connection()
.select('*')
.withSchema('information_schema')
.from('TABLES');
}
}

30
src/renderer/App.vue
View File

@ -1,14 +1,15 @@
<template>
<div id="wrapper">
<!-- <TheHeader /> -->
<TheSettingBar />
<TheExploreBar />
<div id="main-content" class="container">
<!-- <BaseLoaderLayer
id="main-loader"
:is-loading="isLoading"
/> -->
<TheAppWelcome v-if="!connections.length" @newConn="showNewConnModal" />
<div v-else class="columns col-gapless">
<DatabaseWorkspace
v-for="connection in connections"
:key="connection.uid"
:connection="connection"
/>
</div>
</div>
<TheFooter />
<ModalNewConnection v-if="isNewConnModal" />
@ -18,18 +19,18 @@
<script>
import { mapActions, mapGetters } from 'vuex';
import TheSettingBar from '@/components/TheSettingBar';
import TheExploreBar from '@/components/TheExploreBar';
import TheFooter from '@/components/TheFooter';
import TheAppWelcome from '@/components/TheAppWelcome';
import DatabaseWorkspace from '@/components/DatabaseWorkspace';
import ModalNewConnection from '@/components/ModalNewConnection';
export default {
name: 'App',
components: {
TheSettingBar,
TheExploreBar,
TheFooter,
TheAppWelcome,
DatabaseWorkspace,
ModalNewConnection
},
data () {
@ -51,7 +52,7 @@ export default {
};
</script>
<style>
<style lang="scss">
html,
body{
height: 100%;
@ -63,7 +64,12 @@ export default {
position: relative;
}
/* #main-content{
background: #232524;
} */
#main-content {
padding: 0;
justify-content: flex-start;
> .columns{
height: 100vh;
}
}
</style>

20
src/renderer/components/TheExploreBar.vue → src/renderer/components/DatabaseExploreBar.vue
View File

@ -1,18 +1,27 @@
<template>
<div id="explorebar" class="container">
<!-- aaa -->
<div class="workspace-explorebar column">
<button
v-if="!isConnected"
class="btn btn-primary mt-4"
@click="$emit('connect')"
>
Connect
</button>
</div>
</template>
<script>
export default {
name: 'TheExploreBar'
name: 'DatabaseExploreBar',
props: {
uid: String,
isConnected: Boolean
}
};
</script>
<style lang="scss">
#explorebar{
.workspace-explorebar{
width: $explorebar-width;
display: flex;
flex-direction: column;
@ -22,5 +31,6 @@ export default {
margin-bottom: $footer-height;
box-shadow: 0 0 1px 0px #000;
z-index: 8;
flex: initial;
}
</style>

57
src/renderer/components/DatabaseWorkspace.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div v-show="selectedConnection === connection.uid" class="workspace column columns">
<DatabaseExploreBar
:uid="connection.uid"
:is-connected="isConnected"
@connect="startConnection"
/>
<div class="workspace-tabs column">
<p>{{ connection.uid }}</p>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import Connection from '@/ipc-api/Connection';
import DatabaseExploreBar from '@/components/DatabaseExploreBar';
export default {
name: 'DatabaseWorkspace',
components: {
DatabaseExploreBar
},
props: {
connection: Object
},
data () {
return {
isConnected: false,
structure: null
};
},
computed: {
...mapGetters({
selectedConnection: 'connections/getSelected'
})
},
async created () {
this.isConnected = await Connection.checkConnection(this.connection.uid);
if (this.isConnected)
this.structure = await Connection.connect(this.connection);// TODO: use refresh
},
methods: {
async startConnection () {
this.structure = await Connection.connect(this.connection);
this.isConnected = true;
}
}
};
</script>
<style lang="scss">
.workspace{
padding: 0;
margin: 0;
}
</style>

41
src/renderer/components/ModalNewConnection.vue
View File

@ -128,7 +128,7 @@
<script>
import { mapActions } from 'vuex';
import { ipcRenderer } from 'electron';
import Connection from '@/ipc-api/Connection';
import ModalAskCredentials from '@/components/ModalAskCredentials';
import BaseToast from '@/components/BaseToast';
@ -177,34 +177,25 @@ export default {
if (this.connection.ask)
this.isAsking = true;
else
await this.invokeTest(this.connection);
else {
try {
const res = await Connection.makeTest(this.connection);
if (res.status === 'error')
this.toast = { status: 'error', message: res.response.message };
else
this.toast = { status: 'success', message: 'Connection successifully made!' };
}
catch (err) {
this.toast = { status: 'error', message: err.stack };
}
this.isTesting = false;
}
},
async continueTest (credentials) { // if "Ask for credentials" is true
this.isAsking = false;
const params = Object.assign({}, this.connection, credentials);
await this.invokeTest(params);
},
invokeTest (params) {
return new Promise((resolve, reject) => {
ipcRenderer.invoke('testConnection', params).then(res => {
if (res.status === 'error') {
this.toast = {
status: 'error',
message: res.response.message
};
}
else {
this.toast = {
status: 'success',
message: 'Connection successifully made!'
};
}
this.isTesting = false;
resolve();
});
});
await Connection.makeTest(params);
},
saveNewConnection () {
this.addConnection(this.connection);

30
src/renderer/components/TheAppWelcome.vue
View File

@ -1,18 +1,20 @@
<template>
<div class="empty text-light">
<div class="empty-icon">
<i class="material-icons md-48">mood</i>
</div>
<p class="empty-title h5">
Welcome to Antares SQL Client!
</p>
<p class="empty-subtitle">
Your first step: create a new database connection.
</p>
<div class="empty-action">
<button class="btn btn-primary" @click="$emit('newConn')">
Create connection
</button>
<div class="columns">
<div class="column col-12 empty text-light">
<div class="empty-icon">
<i class="material-icons md-48">mood</i>
</div>
<p class="empty-title h5">
Welcome to Antares SQL Client!
</p>
<p class="empty-subtitle">
Your first step: create a new database connection.
</p>
<div class="empty-action">
<button class="btn btn-primary" @click="$emit('newConn')">
Create connection
</button>
</div>
</div>
</div>
</template>

41
src/renderer/components/TheSettingBar.vue
View File

@ -1,30 +1,31 @@
<template>
<div id="settingbar" class="container">
<div id="settingbar">
<div class="settingbar-top-elements">
<ul class="settingbar-elements">
<li
v-for="connection in connections"
:key="connection.uid"
class="settingbar-element btn btn-link tooltip tooltip-right p-0"
class="settingbar-element btn btn-link tooltip tooltip-right"
:class="{'selected': connection.uid === selectedConnection}"
:data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
@click="selectConnection(connection.uid)"
>
<i class="dbi" :class="`dbi-${connection.client}`" />
<i class="settingbar-element-icon dbi" :class="`dbi-${connection.client}`" />
</li>
<li
class="settingbar-element btn btn-link tooltip tooltip-right"
class="settingbar-element btn btn-link tooltip tooltip-right pt-3"
data-tooltip="Add connection"
@click="showNewConnModal"
>
<i class="material-icons text-light">add</i>
<i class="settingbar-element-icon material-icons text-light">add</i>
</li>
</ul>
</div>
<div class="settingbar-bottom-elements">
<ul class="settingbar-elements">
<li class="settingbar-element btn btn-link tooltip tooltip-right" data-tooltip="Settings">
<i class="material-icons text-light">settings</i>
<li class="settingbar-element btn btn-link tooltip tooltip-right mb-2" data-tooltip="Settings">
<i class="settingbar-element-icon material-icons text-light">settings</i>
</li>
</ul>
</div>
@ -44,9 +45,9 @@ export default {
},
methods: {
...mapActions({
showNewConnModal: 'connections/showNewConnModal'
}),
isActiveTab: uid => uid === this.selectedConnection
showNewConnModal: 'connections/showNewConnModal',
selectConnection: 'connections/selectConnection'
})
}
};
</script>
@ -59,7 +60,7 @@ export default {
justify-content: space-between;
align-items: center;
background: $bg-color-light;
padding: .5rem 0;
padding: 0;
margin-bottom: $footer-height;
box-shadow: 0 0 1px 0px #000;
z-index: 9;
@ -72,9 +73,25 @@ export default {
.settingbar-element{
height: initial;
width: 100%;
padding: 0;
padding: .3rem 0 0;
margin: 0;
border-left: 3px solid transparent;
opacity: .5;
transition: opacity .2s;
&:hover{
opacity: 1;
}
&.selected{
border-left-color: $body-font-color;
opacity: 1;
}
.settingbar-element-icon{
width: 42px;
margin-left: -3px;
}
}

19
src/renderer/ipc-api/Connection.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
import { ipcRenderer } from 'electron';
export default class {
static makeTest (params) {
return ipcRenderer.invoke('testConnection', params);
}
static checkConnection (params) {
return ipcRenderer.invoke('checkConnection', params);
}
static connect (params) {
return ipcRenderer.invoke('connect', params);
}
// TODO: refresh
// TODO: disconnect
}

4
src/renderer/scss/_variables.scss
View File

@ -7,6 +7,6 @@ $bg-color-light: #3f3f3f;
$bg-color-gray: #272727;
/*Sizes*/
$settingbar-width: 4rem;
$explorebar-width: 16rem;
$settingbar-width: 3rem;
$explorebar-width: 14rem;
$footer-height: 1.5rem;

4
src/renderer/store/index.js
View File

@ -8,10 +8,10 @@ import application from './modules/application.store';
import connections from './modules/connections.store';
const vuexLocalStorage = new VuexPersist({
key: 'vuex', // The key to store the state on in the storage provider.
key: 'application', // The key to store the state on in the storage provider.
storage: window.localStorage,
reducer: state => ({
connections: state.connections.connections
connections: state.connections
})
});

6
src/renderer/store/modules/connections.store.js
View File

@ -26,6 +26,9 @@ export default {
},
HIDE_NEW_CONNECTION_MODAL (state) {
state.is_new_modal = false;
},
SELECT_CONNECTION (state, uid) {
state.connection_selected = uid;
}
},
actions: {
@ -38,6 +41,9 @@ export default {
},
hideNewConnModal ({ commit }) {
commit('HIDE_NEW_CONNECTION_MODAL');
},
selectConnection ({ commit }, uid) {
commit('SELECT_CONNECTION', uid);
}
}
};