Merge pull request #35 from aabanaag/develop

v0.5.0

.travis.yml

@@ -12,4 +12,5 @@ deploy:
  github_token: $GITHUB_TOKEN
  local_dir: dist
  on:
-   branch: master
+   branch: master
+   tags: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covid-vue",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,6 +18,7 @@
     "vuex": "^3.1.3"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.13.0",
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
     "@vue/cli-plugin-router": "~4.3.0",

src/App.vue

@@ -1,9 +1,19 @@
 <template>
-  <div id="app">
-    <router-view />
-  </div>
+  <v-app>
+    <Header />
+    <v-content>
+      <router-view />
+    </v-content>
+  </v-app>
 </template>
-
+<script>
+import Header from '@/components/Header.vue'
+export default {
+  components: {
+    Header
+  }
+}
+</script>
 <style>
 html {
   -webkit-text-size-adjust: 100%;
@@ -16,11 +26,6 @@ body {
   font-size: 16px;
   line-height: 1.5;
 }
-#app {
-  box-sizing: border-box;
-  padding: 0 20px 20px;
-  margin: 0 auto;
-}
 hr {
   box-sizing: content-box;
   height: 0;

src/components/CountriesList.vue

@@ -2,9 +2,10 @@
   <v-data-table
     :headers="headers"
     :items="countries"
-    hide-default-footer
-    disable-pagination
+    :hide-default-footer="paginated"
+    :disable-pagination="paginated"
     class="elevation-1"
+    @click:row="getSelected"
   ></v-data-table>
 </template>
 
@@ -31,6 +32,15 @@ export default {
     countries: {
       type: Array,
       required: true
+    },
+    paginated: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    getSelected(data) {
+      this.$emit('setSelected', data)
     }
   }
 }

src/components/CountryInfo.vue

@@ -0,0 +1,166 @@
+<template>
+  <v-container>
+    <div class="d-flex align-md-center">
+      <v-img :src="flag" max-width="30" max-height="20"></v-img>
+      <h3>{{ country.country }}</h3>
+    </div>
+    <v-spacer />
+    <v-container fluid>
+      <v-row>
+        <v-col cols="12" md="4">
+          <v-text-field
+            label="Total Cases"
+            :value="cases"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Total Recoveries"
+            :value="recoveries"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Total Deaths"
+            :value="deaths"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-text-field
+            label="New Cases"
+            :value="newCases"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="New Deaths"
+            :value="newDeaths"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Critical"
+            :value="critical"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Active"
+            :value="active"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-text-field
+            label="Cases per Million"
+            :value="casesPerMillion"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Deaths per Million"
+            :value="deathsPerMillion"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-text-field
+            label="Tests"
+            :value="tests"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Tests per Million"
+            v-model="testPerMillion"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-container>
+</template>
+
+<script>
+import { formatNumber } from '@/common/helper.js'
+export default {
+  props: {
+    country: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    cases() {
+      return formatNumber(this.country.cases)
+    },
+    recoveries() {
+      return formatNumber(this.country.recovered)
+    },
+    deaths() {
+      return formatNumber(this.country.deaths)
+    },
+    newCases() {
+      return formatNumber(this.country.todayCases)
+    },
+    newDeaths() {
+      return formatNumber(this.country.todayDeaths)
+    },
+    critical() {
+      return formatNumber(this.country.critical)
+    },
+    active() {
+      return formatNumber(this.country.active)
+    },
+    tests() {
+      return formatNumber(this.country.tests)
+    },
+    casesPerMillion() {
+      return formatNumber(this.country.casesPerMillion)
+    },
+    deathsPerMillion() {
+      return formatNumber(this.country.deathsPerMillion)
+    },
+    testPerMillion() {
+      return formatNumber(this.country.testPerMillion)
+    },
+    flag() {
+      return this.country.countryInfo.flag ?? ''
+    }
+  },
+  mounted() {
+    console.log(this.country)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h3 {
+  margin-left: 10px;
+}
+</style>

src/components/Header.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-app-bar dark>
+    <v-toolbar-title>COVIDvue</v-toolbar-title>
+    <v-spacer />
+    <v-btn icon to="/">
+      <v-icon small>fas fa-home</v-icon>
+    </v-btn>
+    <v-btn icon to="/countries">
+      <v-icon small>fas fa-flag</v-icon>
+    </v-btn>
+  </v-app-bar>
+</template>

src/plugins/vuetify.js

@@ -1,6 +1,11 @@
+import '@fortawesome/fontawesome-free/css/all.css'
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
 
 Vue.use(Vuetify)
 
-export default new Vuetify({})
+export default new Vuetify({
+  icons: {
+    iconfont: 'fa'
+  }
+})

src/store/index.js

@@ -1,37 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import CovidService from '@/services/covid.services'
+import * as countries from './modules/countries'
+import * as stats from './modules/stats'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-    countries: [],
-    overviewStats: {}
-  },
-  mutations: {
-    SET_COUNTRIES(state, data) {
-      state.countries = data
-    },
-    SET_OVERVIEW_STATS(state, data) {
-      state.overviewStats = data
-    }
-  },
-  actions: {
-    async fetchCountries({ commit }, filter) {
-      const { data } = await CovidService.fetchCountries(filter)
-
-      if (data != null) {
-        commit('SET_COUNTRIES', data)
-      }
-    },
-    async fetchOverviewStats({ commit }) {
-      const { data } = await CovidService.fetchWorldWide()
-
-      if (data != null) {
-        commit('SET_OVERVIEW_STATS', data)
-      }
-    }
-  },
-  modules: {}
+  modules: {
+    countries,
+    stats
+  }
 })

src/store/modules/countries.js

@@ -0,0 +1,37 @@
+import CovidService from '@/services/covid.services'
+
+export const namespaced = true
+
+export const state = {
+  countries: [],
+  selected: null
+}
+
+export const mutations = {
+  SET_COUNTRIES(state, data) {
+    state.countries = data
+  },
+  SET_SELECTED_COUNTRY(state, data) {
+    state.selected = data
+  }
+}
+
+export const actions = {
+  async fetchCountries({ commit }, filter) {
+    const { data } = await CovidService.fetchCountries(filter)
+
+    if (data != null) {
+      commit('SET_COUNTRIES', data)
+    }
+  },
+  async fetchByCountry({ commit }, code) {
+    const { data } = await CovidService.fetchByCountry(code)
+
+    if (data != null) {
+      commit('SET_SELECTED_COUNTRY', data)
+    }
+  },
+  setSelectedCountry({ commit }, country) {
+    commit('SET_SELECTED_COUNTRY', country)
+  }
+}

src/store/modules/stats.js

@@ -0,0 +1,23 @@
+import CovidService from '@/services/covid.services'
+
+export const namespaced = true
+
+export const state = {
+  overview: {}
+}
+
+export const mutations = {
+  SET_OVERVIEW_STATS(state, data) {
+    state.overview = data
+  }
+}
+
+export const actions = {
+  async fetchOverviewStats({ commit }) {
+    const { data } = await CovidService.fetchWorldWide()
+
+    if (data != null) {
+      commit('SET_OVERVIEW_STATS', data)
+    }
+  }
+}