mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
Connection test
This commit is contained in:
78
src/renderer/components/BaseToast.vue
Normal file
78
src/renderer/components/BaseToast.vue
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user