statistics #472

src/api/APIGateway.js

@@ -25,6 +25,7 @@ import DonationAPI from 'src/api/models/Donation.js'
 import QuestionApi from 'src/api/models/Question.js'
 import DiscountAPI from 'src/api/models/Discount.js'
 import ClassroomAPI from 'src/api/models/Classroom.js'
+import AggregatorAPI from 'src/api/models/Aggregator.js'
 import AppSettingAPI from 'src/api/models/AppSetting.js'
 import AnswerBookApi from 'src/api/models/AnswerBook.js'
 import InstalmentAPI from 'src/api/models/Instalment.js'
@@ -85,6 +86,7 @@ export const APIGateway = {
   question: new QuestionApi(),
   discount: new DiscountAPI(),
   classroom: new ClassroomAPI(),
+  aggregator: new AggregatorAPI(),
   appSetting: new AppSettingAPI(),
   answerBook: new AnswerBookApi(),
   instalment: new InstalmentAPI(),

src/api/models/Aggregator.js

@@ -0,0 +1,32 @@
+import { appApi } from 'src/boot/axios.js'
+import APIRepository from '../classes/APIRepository.js'
+
+export default class AggregatorAPI extends APIRepository {
+  constructor() {
+    super('aggregator', appApi)
+    this.APIAdresses = {
+      statistics: '/rma/aggregator/statistics'
+    }
+    this.CacheList = {
+      statistics: this.name + this.APIAdresses.statistics
+    }
+  }
+
+  statistics() {
+    return this.sendRequest({
+      apiMethod: 'get',
+      api: this.api,
+      request: this.APIAdresses.statistics,
+      resolveCallback: (response) => {
+        return {
+          users_count: response.data.users_count, // کاربر فعال
+          training_classrooms_count: response.data.training_classrooms_count, // دوره
+          event_classrooms_count: response.data.event_classrooms_count // رویداد
+        }
+      },
+      rejectCallback: (error) => {
+        return error
+      }
+    })
+  }
+}

src/components/Widgets/Statictic/PublicWebStatistic/PublicWebStatistic.vue

@@ -7,48 +7,63 @@
         </q-banner>
       </div>
     </div>
-    <div class="PublicWebStatistic-boxes row">
-      <div class="PublicWebStatistic-boxes row" />
+    <div class="PublicWebStatistic-boxes">
+      <q-linear-progress v-if="loading"
+                         indeterminate />
+      <div v-else
+           class="row q-col-gutter-md">
+        <div class="col-md-4 col-12">
+          <statistic-item :value="statistics.users_count"
+                          title="کاربر فعال"
+                          icon="groups" />
+        </div>
+        <div class="col-md-4 col-12">
+          <statistic-item :value="statistics.training_classrooms_count"
+                          title="دوره"
+                          icon="co_present" />
+        </div>
+        <div class="col-md-4 col-12">
+          <statistic-item :value="statistics.event_classrooms_count"
+                          title="رویداد"
+                          icon="event_note" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { User } from 'src/models/User.js'
-// import ShamsiDate from 'src/assets/ShamsiDate.js'
-// import { APIGateway } from 'src/api/APIGateway.js'
-import { ClassroomList } from 'src/models/Classroom.js'
-import { ClassroomRegistrationList } from 'src/models/ClassroomRegistration.js'
+import { APIGateway } from 'src/api/APIGateway.js'
+import StatisticItem from './components/Item.vue'
 
 export default {
   name: 'PublicWebStatistic',
-  data: () => ({
-    loading: false,
-    user: new User(),
-    classroomsKey: Date.now(),
-    userRegistrations: new ClassroomRegistrationList(),
-    slide: 0,
-    classrooms: new ClassroomList(),
-    breakpoints: {
-      // 1024 and up
-      1024: {
-        itemsToShow: 3,
-        snapAlign: 'start'
-      },
-      // 700px and up
-      700: {
-        itemsToShow: 3.5,
-        snapAlign: 'center'
-      },
-      // 300px and up
-      300: {
-        itemsToShow: 1.5,
-        snapAlign: 'center'
+  components: { StatisticItem },
+  data () {
+    return {
+      loading: false,
+      statistics: {
+        users_count: 0,
+        training_classrooms_count: 0,
+        event_classrooms_count: 0
       }
-    },
-    maximizedToggle: true,
-    dialog: false
-  })
+    }
+  },
+  mounted() {
+    this.getStatistics()
+  },
+  methods: {
+    getStatistics () {
+      this.loading = true
+      APIGateway.aggregator.statistics()
+        .then((statistics) => {
+          this.statistics = statistics
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
 }
 </script>
 

src/components/Widgets/Statictic/PublicWebStatistic/components/Item.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="item">
+    <div class="item-icon">
+      <q-icon :name="icon" />
+    </div>
+    <div class="item-content">
+      <div class="item-title">
+        {{ title }}
+      </div>
+      <div class="item-value">
+        {{ value }}
+        +
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatisticItem',
+  props: {
+    title: {
+      type: String,
+      default: undefined
+    },
+    value: {
+      type: String,
+      default: undefined
+    },
+    icon: {
+      type: String,
+      default: undefined
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+  border-radius: 20px;
+  background: #FBF4EA;
+  padding: 64px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  .item-icon {
+    color: #EAC38A;
+    width: 70px;
+    .q-icon {
+      font-size: 68px;
+    }
+  }
+  .item-content {
+    width: 70px;
+    .item-title {
+      font-size: 18px;
+      color: #212121;
+      margin-bottom: 24px;
+    }
+    .item-value {
+      font-size: 18px;
+      font-weight: bold;
+      color: #212121;
+    }
+  }
+}
+</style>