nocodb/packages/nc-gui/components/apiOverlay.vue

<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-row class="text-center">-->
          <!--                      <v-col cols="12">-->
          <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-col>-->
          <!--                    </v-row>-->
          <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/>.
 *
 */
-->