多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

241 lines
7.2 KiB

<template>
<v-overlay
absolute
color="grey"
opacity="0.4"
class="create-project-overlay"
>
<div>
<v-card dark style="width: 100%; max-height:100%;overflow: auto">
<v-container v-if="databaseCount" fluid style="min-height:200px;">
<v-card class="pa-2 text-center elevation-10" dark>
<h3 class="title mb-3 mt-4">
APIs Generated
</h3>
<p>
<span class="display-3 font-weight-bold">{{ apisCount }}</span><br>
<span class="subtitle grey--text text--lighten-1">within {{ timeTaken }} seconds</span>
</p>
</v-card>
<v-row>
<v-col>
<v-card dark class=" elevation-10">
<v-card-text class="pb-0 font-weight-bold">
# Databases
</v-card-text>
<v-card-text class="display-1 white--text">
<v-icon class="mt-n2 mr-1" color="info">
mdi-database-sync
</v-icon>
{{ upCount }} / {{ databaseCount }}
</v-card-text>
</v-card>
</v-col>
<v-col>
<v-card dark class=" elevation-10">
<v-card-text class="pb-0 font-weight-bold">
# Tables
</v-card-text>
<v-card-text class="display-1 white--text">
<v-icon class="mr-1 mt-n1 " color="info">
mdi-table-large
</v-icon>
{{ tablesCount }}
</v-card-text>
</v-card>
</v-col>
<v-col>
<v-card dark class=" elevation-10">
<v-card-text class="pb-0 font-weight-bold">
Time Saved in Dev Hours
</v-card-text>
<v-card-text class="display-1 white--text">
<v-icon class="mr-1 mt-n1" color="secondary">
mdi-clock-fast
</v-icon>
{{ hoursSaved }}
</v-card-text>
</v-card>
</v-col>
<v-col>
<v-card dark class=" elevation-10">
<v-card-text class="pb-0 font-weight-bold">
Cost Saved
</v-card-text>
<v-card-text class="display-1 white--text">
<v-icon color="success" class="mt-n2 mr-1">
mdi-currency-usd-circle-outline
</v-icon>
{{ cost }}
</v-card-text>
</v-card>
</v-col>
</v-row>
<!-- <v-divider class="my-3 "></v-divider>-->
<div class="text-center">
<v-btn v-if="completed" class="my-2 mx-auto" color="primary" x-large to="/xc">
Goto Dashboard
</v-btn>
</div>
<v-card dark class=" elevation-10">
<p class="title text-center pt-2">
List of Databases
</p>
<v-simple-table v-if="rowsCount" style="width: 100%">
<tr v-for="(_,i) in new Array(rowsCount)" :key="i">
<td v-for="db in databaseList.slice(i * 5 , (i + 1) * 5)" :key="db" class="py-2 px-3">
<div class="d-flex">
<v-icon :color="db in data ?'green' : 'orange'" x-small class="mr-2">
mdi-moon-full
</v-icon>
<span class="caption">{{ db }}</span>
<v-spacer />
</div>
</td>
</tr>
</v-simple-table>
</v-card>
</v-container>
</v-card>
</div>
</v-overlay>
</template>
<script>
export default {
name: 'ApiOverlay',
props: {
projectCreated: Boolean
},
data: () => ({
client: null,
data: {},
databaseList: null,
upCount: 0,
tablesCount: 0,
apisCount: 0,
timeTaken: 0,
completed: false,
perHourCost: 35,
apisPerHour: 2,
apis: 0
}),
computed: {
rowsCount() {
return this.databaseList ? Math.ceil(this.databaseList.length / 5) : 0
},
databaseCount() {
return this.databaseList ? this.databaseList.length : 0
},
cost() {
if (!this.apis) { return 0 }
const cost = Math.round(this.perHourCost * (this.apis / this.apisPerHour))
return (cost + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')
},
hoursSaved() {
if (!this.apis) { return 0 }
const hours = Math.round(this.apis / this.apisPerHour)
return (hours + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')
}
},
created() {
this.initSocketClient()
},
beforeDestroy() {
if (this.client) {
this.client.disconnect()
}
},
methods: {
initSocketClient() {
try {
this.client = require('socket.io-client')(`ws://${window.location.hostname}:8083`)
const self = this
let toast
this.client.on('server-to-client', (data) => {
// console.log('=========== server-to-client ========', data);
self.$set(self.data, data.data.info.databaseName, data.data.info)
self.upCount = data.data.startedBuildersCount
self.tablesCount = (data.data.aggregatedInfo[1] + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')
self.apis = data.data.aggregatedInfo[4]
self.apisCount = (data.data.aggregatedInfo[4] + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')
self.timeTaken = data.data.aggregatedInfo[5]
if ((!self.databaseList || !self.databaseList.length) && data.databaseList) {
self.databaseList = data.databaseList
}
if (!toast) {
toast = self.$toast.info('', {
position: 'bottom-center'
})
}
toast.text(`APIs created for ${data.data.info.databaseName}`)
this.completed = self.databaseList.length === data.data.startedBuildersCount
})
} catch (e) { console.log('demo-error') }
}
}
}
</script>
<style scoped>
/deep/ .v-overlay__content {
height: 100%;
width: 100%;
padding: 10px;
}
/deep/ .v-overlay__content > div {
overflow: auto;
height: 100%;
}
/deep/ .v-overlay__content table tr,
/deep/ .v-overlay__content table td {
border: 1px solid #7f828b33;
}
/deep/ .v-overlay__content table {
border-collapse: collapse;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->