completed leaderboard

Author: RamanSharma100

src/components/core/Views.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container
     fluid
-    class="pa-0 ma-0"
+    class="pa-0 mb-5 pb-5"
     :class="this.$vuetify.theme.dark == true ? 'black' : 'white'"
   >
     <v-slide-y-reverse-transition>
@@ -21,7 +21,6 @@ export default {
   created() {
     this.show = true;
   },
-  methods: {
-  },
+  methods: {},
 };
 </script>

src/components/home/StartScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container fluid class="h-100 mb-5 pb-5">
     <v-row align="center" justify="center">
       <v-col cols="12" md="12" lg="12" class="text-center h-100">
         <h1>{{ mainData.LeaderBoardName || "" }}</h1>
@@ -8,11 +8,17 @@
     <v-row align="center" class="mt-5" justify="center">
       <LeaderBoardFilters @searchData="filterData" />
     </v-row>
-    {{ isLoading }}
-    {{ leaderBoardData }}
-    <v-row align="center" class="mt-5" justify="center">
+    <v-row
+      align="center"
+      v-if="!isLoading"
+      class="mt-5 mb-5 pb-5"
+      justify="center"
+    >
       <LeaderBoardDataTable :searchTerm="searchTerm" :data="leaderBoardData" />
     </v-row>
+    <v-row align="center" v-else class="mt-5" justify="center">
+      <v-progress-circular indeterminate color="black"></v-progress-circular>
+    </v-row>
   </v-container>
 </template>
 
@@ -36,56 +42,12 @@ export default {
       leaderBoardData: [],
     };
   },
-  mounted() {
-    const ref = storage().ref(`test_folder`);
-
-    ref
-      .child("test_file.csv")
-      .getDownloadURL()
-      .then((url) => {
-        // `url` is the download URL
-        console.log(url);
-        // This can be downloaded directly:
-        const xhr = new XMLHttpRequest();
-        xhr.responseType = "blob";
-        xhr.onload = function() {
-          const blob = xhr.response;
-          const myReader = new FileReader();
-          myReader.onload = (e) => {
-            const csv = e.target.result;
-            const allTextLines = csv.split(/\r\n|\n/);
-            const lines = [];
-            for (let i = 0; i < allTextLines.length; i++) {
-              const data = allTextLines[i].split(";");
-              const tarr = [];
-              for (let j = 0; j < data.length; j++) {
-                tarr.push(data[j]);
-              }
-              lines.push(tarr);
-            }
-            const allData = lines.splice(1, lines.length);
-            const studentData = [];
-            allData.forEach((data) => {
-              const dt = data[0].split(",");
-              const obj = {
-                name: dt[0],
-                badges: {
-                  track1: dt[1],
-                  track2: dt[2],
-                },
-              };
-              studentData.push(obj);
-            });
-            this.leaderBoardData = studentData;
-            this.leaderBoardFilteredData = studentData;
-            this.isLoading = false;
-          };
-
-          myReader.readAsText(blob);
-        };
-        xhr.open("GET", url);
-        xhr.send();
-      });
+  async mounted() {
+    const Data = await this.getDataFromCSVFirebase();
+    const sortedData = this.sortByRemainingTracks(Data);
+    this.leaderBoardData = sortedData.slice(1, sortedData.length);
+    this.leaderBoardFilteredData = sortedData.slice(1, sortedData.length);
+    this.isLoading = false;
   },
   methods: {
     filterData($value) {
@@ -100,6 +62,56 @@ export default {
       });
       return dta;
     },
+    async getDataFromCSVFirebase() {
+      const ref = storage().ref(`test_folder`);
+
+      const data = await new Promise((resolve, reject) => {
+        ref
+          .child("test_file.csv")
+          .getDownloadURL()
+          .then((url) => {
+            // requesting to csv file and get data from that
+            const xhr = new XMLHttpRequest();
+            xhr.responseType = "blob";
+            xhr.onload = function() {
+              const blob = xhr.response;
+              const myReader = new FileReader();
+              myReader.onload = (e) => {
+                const csv = e.target.result;
+                const allTextLines = csv.split(/\r\n|\n/);
+                const lines = [];
+                for (let i = 0; i < allTextLines.length; i++) {
+                  const data = allTextLines[i].split(";");
+                  const tarr = [];
+                  for (let j = 0; j < data.length; j++) {
+                    tarr.push(data[j]);
+                  }
+                  lines.push(tarr);
+                }
+                const allData = lines.splice(1, lines.length);
+                const studentData = [];
+                allData.forEach((data) => {
+                  const dt = data[0].split(",");
+                  const obj = {
+                    name: dt[0],
+                    badges: {
+                      track1: dt[1],
+                      track2: dt[2],
+                    },
+                  };
+                  studentData.push(obj);
+                });
+                resolve(studentData);
+              };
+
+              myReader.readAsText(blob);
+            };
+            xhr.open("GET", url);
+            xhr.send();
+          });
+      });
+      return data;
+    },
   },
 };
 </script>