2020-04-30 17:48:53 +02:00
|
|
|
<template>
|
2020-05-07 17:45:04 +02:00
|
|
|
<div id="wrapper">
|
2020-06-02 19:13:57 +02:00
|
|
|
<TheTitleBar />
|
|
|
|
<div id="window-content">
|
|
|
|
<TheSettingBar />
|
|
|
|
<div id="main-content" class="container">
|
|
|
|
<TheAppWelcome v-if="!connections.length" @newConn="showNewConnModal" />
|
|
|
|
<div v-else class="columns col-gapless">
|
2020-06-03 20:56:44 +02:00
|
|
|
<Workspace
|
2020-06-02 19:13:57 +02:00
|
|
|
v-for="connection in connections"
|
|
|
|
:key="connection.uid"
|
|
|
|
:connection="connection"
|
|
|
|
/>
|
|
|
|
</div>
|
2020-05-14 15:21:57 +02:00
|
|
|
</div>
|
2020-06-02 19:13:57 +02:00
|
|
|
<TheFooter />
|
|
|
|
<TheNotificationsBoard />
|
|
|
|
<ModalNewConnection v-if="isNewConnModal" />
|
|
|
|
<ModalEditConnection v-if="isEditModal" />
|
|
|
|
<ModalSettings v-if="isSettingModal" />
|
2020-05-07 17:45:04 +02:00
|
|
|
</div>
|
2020-04-30 17:48:53 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-05-12 18:27:31 +02:00
|
|
|
import { mapActions, mapGetters } from 'vuex';
|
2020-06-02 19:13:57 +02:00
|
|
|
import TheTitleBar from '@/components/TheTitleBar';
|
2020-05-08 18:02:18 +02:00
|
|
|
import TheSettingBar from '@/components/TheSettingBar';
|
|
|
|
import TheFooter from '@/components/TheFooter';
|
2020-05-15 17:52:59 +02:00
|
|
|
import TheNotificationsBoard from '@/components/TheNotificationsBoard';
|
2020-05-08 18:02:18 +02:00
|
|
|
import TheAppWelcome from '@/components/TheAppWelcome';
|
2020-06-03 20:56:44 +02:00
|
|
|
import Workspace from '@/components/Workspace';
|
2020-05-12 18:27:31 +02:00
|
|
|
import ModalNewConnection from '@/components/ModalNewConnection';
|
2020-05-23 22:02:09 +02:00
|
|
|
import ModalEditConnection from '@/components/ModalEditConnection';
|
2020-05-30 12:54:05 +02:00
|
|
|
import ModalSettings from '@/components/ModalSettings';
|
2020-04-30 17:48:53 +02:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'App',
|
|
|
|
components: {
|
2020-06-02 19:13:57 +02:00
|
|
|
TheTitleBar,
|
2020-05-08 18:02:18 +02:00
|
|
|
TheSettingBar,
|
|
|
|
TheFooter,
|
2020-05-15 17:52:59 +02:00
|
|
|
TheNotificationsBoard,
|
2020-05-08 18:02:18 +02:00
|
|
|
TheAppWelcome,
|
2020-06-03 20:56:44 +02:00
|
|
|
Workspace,
|
2020-05-23 22:02:09 +02:00
|
|
|
ModalNewConnection,
|
2020-05-30 12:54:05 +02:00
|
|
|
ModalEditConnection,
|
|
|
|
ModalSettings
|
2020-05-07 17:45:04 +02:00
|
|
|
},
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
2020-05-12 18:27:31 +02:00
|
|
|
...mapGetters({
|
|
|
|
isLoading: 'application/isLoading',
|
2020-05-30 12:54:05 +02:00
|
|
|
isNewConnModal: 'application/isNewModal',
|
|
|
|
isEditModal: 'application/isEditModal',
|
|
|
|
isSettingModal: 'application/isSettingModal',
|
2020-05-13 18:40:49 +02:00
|
|
|
connections: 'connections/getConnections'
|
2020-05-08 18:02:18 +02:00
|
|
|
})
|
2020-05-07 17:45:04 +02:00
|
|
|
},
|
|
|
|
methods: {
|
2020-05-08 18:02:18 +02:00
|
|
|
...mapActions({
|
2020-05-30 12:54:05 +02:00
|
|
|
showNewConnModal: 'application/showNewConnModal'
|
2020-05-08 18:02:18 +02:00
|
|
|
})
|
2020-04-30 17:48:53 +02:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
2020-05-14 15:21:57 +02:00
|
|
|
<style lang="scss">
|
2020-05-07 17:45:04 +02:00
|
|
|
html,
|
|
|
|
body{
|
|
|
|
height: 100%;
|
2020-05-08 18:02:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#wrapper{
|
|
|
|
height: 100vh;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
2020-06-02 19:13:57 +02:00
|
|
|
#window-content{
|
|
|
|
display: flex;
|
|
|
|
position: relative;
|
2020-06-05 21:00:15 +02:00
|
|
|
overflow: hidden;
|
2020-06-02 19:13:57 +02:00
|
|
|
}
|
|
|
|
|
2020-05-14 15:21:57 +02:00
|
|
|
#main-content {
|
|
|
|
padding: 0;
|
|
|
|
justify-content: flex-start;
|
2020-06-02 19:13:57 +02:00
|
|
|
height: calc(100vh - #{$excluding-size});
|
2020-06-06 16:27:42 +02:00
|
|
|
width: calc(100% - #{$settingbar-width});
|
2020-05-14 15:21:57 +02:00
|
|
|
|
|
|
|
> .columns{
|
2020-06-02 19:13:57 +02:00
|
|
|
height: calc(100vh - #{$footer-height});
|
2020-05-14 15:21:57 +02:00
|
|
|
}
|
|
|
|
}
|
2020-04-30 17:48:53 +02:00
|
|
|
</style>
|