fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

Connection test

This commit is contained in:
Fabio 2020-05-11 18:05:34 +02:00
parent 8ded79017b
commit 1e025cdaf6
13 changed files with 841 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

868
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -4,6 +4,7 @@
"version": "0.0.0",
"description": "A multi-platform easy to use SQL client. ",
"license": "MIT",
"repository": "https://github.com/Fabio286/antares.git",
"scripts": {
"dev": "electron-webpack dev",
"compile": "electron-webpack",
@ -29,6 +30,8 @@
"codemirror": "^5.53.2",
"knex": "^0.21.1",
"material-design-icons": "^3.0.1",
"mssql": "^6.2.0",
"mysql": "^2.18.1",
"source-map-support": "^0.5.16",
"spectre.css": "^0.5.8",
"vue-i18n": "^8.17.4",
@ -49,7 +52,7 @@
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.0",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"vue": "^2.6.11",
"webpack": "^4.43.0"

5
src/main/index.js
View File

@ -5,6 +5,8 @@ import * as path from 'path';
import { format as formatUrl } from 'url';
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
import ipcApi from './ipc-api';
const isDevelopment = process.env.NODE_ENV !== 'production';
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true';
@ -59,6 +61,9 @@ function createMainWindow () {
});
});
// Initialize ipcApi
ipcApi();
return window;
};

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

@ -0,0 +1,24 @@
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 };
}
});
};

5
src/main/ipc-api/index.js Normal file
View File

@ -0,0 +1,5 @@
import connection from './connection';
export default () => {
connection();
};

8
src/renderer/App.vue
View File

@ -11,7 +11,7 @@
<TheAppWelcome @newConn="showNewConnModal" />
</div>
<TheFooter />
<NewConnectionModal :is-opened="isNewConnModal" />
<NewConnectionModal v-if="isNewConnModal" />
</div>
</template>
@ -62,7 +62,7 @@ export default {
position: relative;
}
#main-content{
/* background: #232524; */
}
/* #main-content{
background: #232524;
} */
</style>

78
src/renderer/components/BaseToast.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<div
:style="{display: isVisible ? 'flex' : 'none'}"
class="toast mt-2"
:class="toastStatus.className"
>
<span class="p-vcentered text-left" v-html="`${toastStatus.iconTag} ${message}`" />
<button class="btn btn-clear" @click="hideToast" />
</div>
</template>
<script>
export default {
name: 'BaseToast',
props: {
message: {
type: String,
default: ''
},
status: {
type: String,
default: ''
}
},
data () {
return {
isVisible: false
};
},
computed: {
toastStatus () {
let className = '';
let iconTag = '';
switch (this.status) {
case 'success':
className = 'toast-success';
iconTag = '<i class="material-icons mr-1">done</i>';
break;
case 'error':
className = 'toast-error';
iconTag = '<i class="material-icons mr-1">error</i>';
break;
case 'warning':
className = 'toast-warning';
iconTag = '<i class="material-icons mr-1">warning</i>';
break;
case 'primary':
className = 'toast-primary';
iconTag = '<i class="material-icons mr-1">info_outline</i>';
break;
}
return { className, iconTag };
}
},
watch: {
message: function () {
if (this.message)
this.isVisible = true;
else
this.isVisible = false;
}
},
methods: {
hideToast () {
this.isVisible = false;
}
}
};
</script>
<style scoped>
.toast{
display: flex;
justify-content: space-between;
user-select: text;
word-break: break-all;
}
</style>

163
src/renderer/components/NewConnectionModal.vue
View File

@ -1,20 +1,119 @@
<template>
<div class="modal" :class="{'active': isOpened}">
<div class="modal active">
<a class="modal-overlay c-hand" @click="closeModal" />
<div class="modal-container">
<div class="modal-header">
<a class="btn btn-clear float-right c-hand" @click="closeModal" />
<div class="modal-title h5">
<div class="modal-header text-light">
<div class="modal-title h6">
Create a new connection
</div>
<a class="btn btn-clear c-hand" @click="closeModal" />
</div>
<div class="modal-body">
<div class="content">
<!-- content here -->
<form class="form-horizontal">
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Client:</label>
</div>
<div class="col-9 col-sm-12">
<select v-model="connection.client" class="form-select">
<option value="mysql">
MySQL/MariaDB
</option>
<option value="mssql">
Microsoft SQL
</option>
<option value="pg">
PostgreSQL
</option>
<option value="oracledb">
Oracle DB
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Host name/IP:</label>
</div>
<div class="col-9 col-sm-12">
<input
v-model="connection.host"
class="form-input"
type="text"
>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Port:</label>
</div>
<div class="col-9 col-sm-12">
<input
v-model="connection.port"
class="form-input"
type="number"
min="1"
max="65535"
>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">User:</label>
</div>
<div class="col-9 col-sm-12">
<input
v-model="connection.user"
class="form-input"
type="text"
:disabled="connection.ask"
>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Password:</label>
</div>
<div class="col-9 col-sm-12">
<input
v-model="connection.password"
class="form-input"
type="password"
:disabled="connection.ask"
>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12" />
<div class="col-9 col-sm-12">
<label class="form-checkbox form-inline">
<input v-model="connection.ask" type="checkbox"><i class="form-icon" /> Ask for credentials
</label>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
...
<div class="modal-footer text-light">
<BaseToast
class="mb-2"
:message="toast.message"
:status="toast.status"
/>
<button
class="btn btn-gray mr-2"
:class="{'loading': isTesting}"
@click="testConnection"
>
Test connection
</button>
<button class="btn btn-primary mr-2">
Save
</button>
<button class="btn btn-link" @click="closeModal">
Close
</button>
</div>
</div>
</div>
@ -22,9 +121,14 @@
<script>
import { mapActions } from 'vuex';
import { ipcRenderer } from 'electron';
import BaseToast from '@/components/BaseToast';
export default {
name: 'NewConnectionModal',
components: {
BaseToast
},
props: {
isOpened: {
type: Boolean,
@ -33,17 +137,54 @@ export default {
},
data () {
return {
connection: {
client: 'mysql',
host: '127.0.0.1',
port: '3306',
user: 'root',
password: '',
ask: false
},
toast: {
status: '',
message: ''
},
isTesting: false
};
},
methods: {
...mapActions({
closeModal: 'connections/hideNewConnModal'
})
}),
testConnection () {
this.isTesting = true;
this.toast = {
status: '',
message: ''
};
ipcRenderer.invoke('testConnection', this.connection).then(res => {
this.isTesting = false;
if (res.status === 'error') {
this.toast = {
status: 'error',
message: res.response.message
};
}
else {
this.toast = {
status: 'success',
message: 'Connection successifully made!'
};
}
});
}
}
};
</script>
<style>
<style scoped>
.modal-container{
max-width: 450px;
}
</style>

2
src/renderer/components/TheExploreBar.vue
View File

@ -18,7 +18,7 @@ export default {
flex-direction: column;
justify-content: flex-start;
align-items: center;
background: #272727;
background: $bg-color-gray;
margin-bottom: $footer-height;
box-shadow: 0 0 1px 0px #000;
z-index: 8;

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

@ -42,7 +42,7 @@ export default {
flex-direction: column;
justify-content: space-between;
align-items: center;
background: #3f3f3f;
background: $bg-color-light;
padding: .5rem 0;
margin-bottom: $footer-height;
box-shadow: 0 0 1px 0px #000;

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

@ -1,7 +1,10 @@
/*Colors*/
$body-bg: #232524;
$body-bg: #1d1d1d;
$body-font-color: #fff;
$primary-color: #e36929;
$bg-color: #232524;
$bg-color: #1d1d1d;
$bg-color-light: #3f3f3f;
$bg-color-gray: #272727;
/*Sizes*/
$settingbar-width: 4rem;

64
src/renderer/scss/main.scss
View File

@ -1,3 +1,65 @@
@import "variables";
@import "mdi-additions";
@import "~spectre.css/src/spectre";
@import "~spectre.css/src/spectre";
body{
user-select: none;
}
/*Additions*/
@include margin-variant(3, $unit-3);
@include margin-variant(4, $unit-4);
@include padding-variant(3, $unit-3);
@include padding-variant(4, $unit-4);
.btn.btn-gray{
color: #fff;
background: $bg-color-gray;
&:hover{
background: $bg-color;
}
}
.p-vcentered{
display: flex!important;
align-items: center;
}
/*Override*/
.modal-overlay,
.modal.active .modal-overlay{
background: rgba(255, 255, 255, 0.15);
}
.modal-container{
box-shadow: 0 0 1px 0px #000;
padding: 0;
background: $bg-color;
.modal-header{
padding: .4rem .8rem;
text-transform: uppercase;
background: $bg-color-gray;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.form-select{
cursor: pointer;
}
.form-select,
.form-select:not([multiple]):not([size]),
.form-input,
.form-checkbox .form-icon,
.form-radio .form-icon{
border-color: $bg-color-light;
background: $bg-color-gray;
}
.form-select:not([multiple]):not([size]):focus{
border-color: $primary-color;
}

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

@ -16,6 +16,7 @@ export default {
}
},
actions: {
// Modals
showNewConnModal ({ commit }) {
commit('showNewConnModal');
},