Added Badges and Contributor Tracking

Improved contributor tracking Added Predefined Badges Added Special Badges Added a /badge route and tooltips
codeuino · shivamluthra · Dec 28, 2019 · Dec 22, 2019 · Dec 27, 2019 · 1844e9fa6d711ef8e93b9dda48eecd6d7b76fccf
commit 1844e9fa6d711ef8e93b9dda48eecd6d7b76fccf
diff --git a/.gitignore b/.gitignore
@@ -91,3 +91,6 @@ backend/__pycache__/
 
 # Config files
 .prettierrc.js
+
+# Visual Studio
+/.vs
diff --git a/public/assets/badges/predefined/babysteps.png b/public/assets/badges/predefined/babysteps.png
diff --git a/public/assets/badges/special/topcommits.png b/public/assets/badges/special/topcommits.png
diff --git a/public/assets/badges/special/topmonthcommits.png b/public/assets/badges/special/topmonthcommits.png
diff --git a/public/assets/badges/special/topweekcommits.png b/public/assets/badges/special/topweekcommits.png
diff --git a/public/assets/badges/special/topyearcommits.png b/public/assets/badges/special/topyearcommits.png
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
   <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
   <title>CodeBadge</title>
   <link 
@@ -19,6 +19,9 @@
     href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" 
     rel="stylesheet"
   />
+  <link 
+    href="https://fonts.googleapis.com/css?family=Raleway&display=swap" 
+    rel="stylesheet">
   <link
     href="https://fonts.googleapis.com/css?family=Material+Icons" 
     rel="stylesheet" 

diff --git a/src/assets/badges/predefined/badges.json b/src/assets/badges/predefined/badges.json
@@ -0,0 +1,13 @@
+[
+  {
+    "name": "Baby Steps",
+    "min_commits": 0,
+    "max_commits": 10000,
+    "badge": "babysteps.png",
+    "tooltip": "10000 commits or less",
+    "information": {
+      "title": "Baby Steps",
+      "description": "Assigned to all beginners."
+    }
+  }
+]
diff --git a/src/assets/badges/predefined/predefinedBadges.js b/src/assets/badges/predefined/predefinedBadges.js
@@ -0,0 +1,42 @@
+import rawdata from "./badges";
+
+const json = JSON.parse(JSON.stringify(rawdata));
+const badgeURLPrefix = "/assets/badges/predefined/";
+
+export default class PredefinedBadges {
+  getBadge(commits) {
+    let url = "";
+    let tooltip = "";
+    json.forEach(function(badge) {
+      if (commits >= badge.min_commits && commits <= badge.max_commits) {
+        url = badgeURLPrefix + badge.badge;
+        tooltip = badge.tooltip;
+      }
+    });
+    return {url: url, tooltip: tooltip};
+  }
+
+  getBadgeFromName(name) {
+    let data = {};
+    json.forEach(function(badge) {
+      if(badge.name === name)
+      {
+        data = badge;
+      }
+    });
+    return data;
+  }
+
+  getBadgeURLPrefix()
+  {
+    return badgeURLPrefix;
+  }
+
+  getAllBadgeIDs()
+  {
+    let keys = [];
+    for(let i in json)
+      keys.push(json[i].name);
+    return keys;
+  }
+}
diff --git a/src/assets/badges/special/badges.json b/src/assets/badges/special/badges.json
@@ -0,0 +1,34 @@
+{
+  "topContributor": {
+    "badge": "topcommits.png",
+    "tooltip": "Awarded to the top contributor of your organization!",
+    "information": {
+      "title": "Top Contributor of All Time",
+      "description": "Assigned to the person who has the highest commits in your organization!"
+    }
+  },
+  "topWeekContributor": {
+    "badge": "topweekcommits.png",
+    "tooltip": "Awarded to the one with with highest commits last week!",
+    "information": {
+      "title": "Top Contributor this Week",
+      "description": "Assigned to the person who had the highest commits last week in your organization!"
+    }
+  },
+  "topMonthContributor": {
+    "badge": "topmonthcommits.png",
+    "tooltip": "Awarded to the one with with highest commits this month!",
+    "information": {
+      "title": "Top Contributor this Month",
+      "description": "Assigned to the person who has the highest commits this month in your organization!"
+    }
+  },
+  "topYearContributor": {
+    "badge": "topyearcommits.png",
+    "tooltip": "Awarded to the one with with highest commits this year!",
+    "information": {
+      "title": "Top Contributor this Year",
+      "description": "Assigned to the person who has the highest commits this year in your organization!"
+    }
+  }
+}
diff --git a/src/assets/badges/special/specialBadges.js b/src/assets/badges/special/specialBadges.js
@@ -0,0 +1,83 @@
+import store from "../../../store";
+import rawdata from "./badges";
+
+const json = JSON.parse(JSON.stringify(rawdata));
+const badgeURLPrefix = "/assets/badges/special/";
+
+export default class SpecialBadges {
+  getBadges(name, orgName) {
+    let badges = [];
+
+    const topCommits = store.getters.getTopCommits(orgName);
+    const topWeekCommits = store.getters.getTopWeekCommits(orgName);
+    const topMonthCommits = store.getters.getTopMonthCommits(orgName);
+    const topYearCommits = store.getters.getTopYearCommits(orgName);
+
+    //Make sure to sort in descending order of priority of display
+
+    if (topCommits[0].name === name) {
+      badges.push({
+        url: badgeURLPrefix + json["topContributor"].badge,
+        tooltip: json["topContributor"].tooltip
+      });
+    }
+
+    if (topWeekCommits[0].name === name) {
+      if (topWeekCommits[0].weeks[topWeekCommits[0].weeks.length - 1].c > 0) {
+        badges.push({
+          url: badgeURLPrefix + json["topWeekContributor"].badge,
+          tooltip: json["topWeekContributor"].tooltip
+        });
+      }
+    }
+
+    if (topMonthCommits[0].name === name) {
+      let actuallyHasCommited = false;
+      for (let week in topMonthCommits[0].weeks) {
+        if (week.c > 0) {
+          actuallyHasCommited = true;
+          break;
+        }
+      }
+      if (topMonthCommits[0].weeks.length < 4) actuallyHasCommited = false;
+      if (actuallyHasCommited)
+        badges.push({
+          url: badgeURLPrefix + json["topMonthContributor"].badge,
+          tooltip: json["topMonthContributor"].tooltip
+        });
+    }
+
+    if (topYearCommits[0].name === name) {
+      let actuallyHasCommited = false;
+      for (let week in topYearCommits[0].weeks) {
+        if (week.c > 0) {
+          actuallyHasCommited = true;
+          break;
+        }
+      }
+      if (topYearCommits[0].weeks.length < 52) actuallyHasCommited = false;
+      if (actuallyHasCommited)
+        badges.push({
+          url: badgeURLPrefix + json["topYearContributor"].badge,
+          tooltip: json["topYearContributor"].tooltip
+        });
+    }
+
+    return badges;
+  }
+
+  getBadgeFromName(name) {
+    return json[name];
+  }
+
+  getBadgePrefixURL() {
+    return badgeURLPrefix;
+  }
+
+  getAllBadgeIDs() {
+    let keys = [];
+    for(let key in json)
+      keys.push(key);
+    return keys;
+  }
+}
diff --git a/src/components/auth/Login.vue b/src/components/auth/Login.vue
@@ -35,7 +35,6 @@ export default {
     const code = window.location.href.match(/\?code=(.*)/);
     if (code) {
       this.isLoading = true;
-      console.log(this.isLoading);
       axios({
         method: `post`,
         url: `${AxiosHelper.gatekeeperUrl}?client_id=${

diff --git a/src/components/badgeList/BadgeListItem.vue b/src/components/badgeList/BadgeListItem.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <v-card outline class="mx-auto org">
+      <v-card-title>
+        <v-avatar size="60">
+          <v-img class="elevation-6" :src="avatar" />
+        </v-avatar>
+        <span class="title">{{ title }}</span>
+      </v-card-title>
+      <div class="description">
+        {{ description }}
+      </div>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import PredefinedBadges from "../../assets/badges/predefined/predefinedBadges";
+import SpecialBadges from "../../assets/badges/special/specialBadges";
+
+let predefinedBadges = new PredefinedBadges();
+let specialBadges = new SpecialBadges();
+export default {
+  name: "BadgeListItem",
+  props: {
+    name: {
+      type: String
+    },
+    isSpecial: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      badgeData: {}
+    };
+  },
+  computed: {
+    avatar() {
+      let prefixURL = predefinedBadges.getBadgeURLPrefix();
+      if(this.isSpecial)
+        prefixURL = specialBadges.getBadgePrefixURL();
+      return prefixURL + this.badgeData.badge;
+    },
+    title() {
+      return this.badgeData['information'].title;
+    },
+    description() {
+      return this.badgeData['information'].description;
+    }
+  },
+  created() {
+    if(this.isSpecial)
+      this.badgeData = specialBadges.getBadgeFromName(this.name);
+    else
+      this.badgeData = predefinedBadges.getBadgeFromName(this.name);
+  }
+};
+</script>
+
+<style>
+.description {
+  margin-left: 100px;
+  padding-bottom: 15px;
+  font-size: 15px;
+}
+</style>
diff --git a/src/components/general/Toolbar.vue b/src/components/general/Toolbar.vue
@@ -1,6 +1,6 @@
 <template>
   <v-toolbar color="white" app>
-    <v-toolbar-title style="font-size: 30px; font-family: Raleway; padding-right: 20px">
+    <v-toolbar-title class="toolbar">
       <span>Codebadge</span>
     </v-toolbar-title>
     <v-spacer />
@@ -15,6 +15,7 @@
 <script>
 import AxiosHelper from "../../config/AxiosHelper";
 import AuthService from "../../services/authService";
+import axios from 'axios';
 
 const authService = new AuthService();
 
@@ -39,6 +40,12 @@ export default {
 </script>
 
 <style lang="scss" >
+.toolbar {
+  font-size: 30px;
+  font-family: 'Raleway';
+  padding-right: 20px
+}
+
 .toolbar-button {
   padding-top: 5px;
 }

diff --git a/src/components/home/OrgList.vue b/src/components/home/OrgList.vue
@@ -1,42 +1,56 @@
 <template>
   <div>
     <v-card flat>
-      <v-list>
-        <v-list-tile
-          v-for="org in orgsData"
-          :key="org.name"
-          @click="viewOrg(org.name)"
-          avatar
-          ripple
-        >
+      <v-card
+        v-for="org in orgsData"
+        :key="org.name"
+        @click="viewOrg(org.name)"
+        hover
+        flat
+        ripple
+        class="mx-auto org"
+      >
+        <v-card-title>
           <v-list-tile-avatar>
-            <img :src="org.avatar">
+            <v-img class="elevation-6" :src="org.avatar" />
           </v-list-tile-avatar>
-
-          <v-list-tile-content>
-            <v-list-tile-title v-html="org.name"></v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-      </v-list>
+          <span class="title font-weight-light">{{ org.name }}</span>
+        </v-card-title>
+        <OrgContributors :orgName="org.name" />
+      </v-card>
     </v-card>
   </div>
 </template>
 
 <script>
+import OrgContributors from "../org/OrgContributors";
+
 export default {
-  name: 'OrgList',
+  name: "OrgList",
+  components: {
+    OrgContributors
+  },
+  data() {
+    return {
+      contributors: []
+    };
+  },
   computed: {
     orgsData() {
       return this.$store.getters.orgsData;
     }
   },
   methods: {
     viewOrg(name) {
-      this.$router.push({ name: 'orgView', params: { name: name } });
+      if(this.$store.state.isOrgLoaded[name])
+        this.$router.push({ name: "orgView", params: { name: name } });
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-</style>
+.org {
+  margin-bottom: 8px;
+}
+</style>
diff --git a/src/components/home/UserDetails.vue b/src/components/home/UserDetails.vue
@@ -2,11 +2,9 @@
   <div>
     <v-card flat ripple>
       <v-layout justify-center row>
-        <v-flex>
           <v-avatar size="80">
             <img :src="userData.dp">
           </v-avatar>
-        </v-flex>
         <v-flex>
           <div class="username ml-3">{{userData.username}}</div>
           <div class="github-name ml-3">{{userData.githubName}}</div>