Port to nuxtjs

Author: xming13

.env.example

@@ -1,2 +1,3 @@
 GTM_ID=UA-156992619-1
-VUE_APP_API_URL=http://api.coronatracker.com
+API_BASE_URL=http://api.coronatracker.com
+API_PATH=/v1

.gitignore

@@ -1,24 +1,106 @@
-.DS_Store
 node_modules
 /dist
 
 # local env files
 .env.local
 .env.*.local
 
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
 # Editor directories and files
-.idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+*.lock
+
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
 .env
-.env.example
-*.lock
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# Mac OSX
+.DS_Store
+
+# Vim swap files
+*.swp

README.md

@@ -1,24 +1,22 @@
 # corona-tracker
 
-## Project setup
-```
-npm install
-```
+> Corona tracker
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## Build Setup
 
-### Compiles and minifies for production
-```
-npm run build
-```
+``` bash
+# install dependencies
+$ npm run install
 
-### Lints and fixes files
-```
-npm run lint
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

api/analytics.js

@@ -0,0 +1,6 @@
+export default axios => ({
+  fetchTrendByDate: (start_date, end_date) => {
+    return axios.get(`/analytics/trend?start_date=${start_date}&end_date=${end_date}`)
+      .then(res => res.data)
+  },
+});

api/healthcareinstitutions.js

@@ -0,0 +1,6 @@
+export default axios => ({
+  getHealthcareInstitutions: () => {
+    return axios.get(`https://v2-api.sheety.co/3d29e508008ed3f47cc52f6aaf321f51/coronaInfo/hospitalsAndHealthcareProviders`)
+      .then(res => res.data);
+  },
+});

api/index.js

@@ -0,0 +1,13 @@
+import analyticsApiFactory from './analytics';
+import healthCareInstitutionsApiFactory from './healthcareinstitutions'
+import newsApiFactory from './news';
+import statsApiFactory from './stats';
+
+const apiFactory = axios => ({
+  analytics: analyticsApiFactory(axios),
+  healthcareinstitutions: healthCareInstitutionsApiFactory(axios),
+  news: newsApiFactory(axios),
+  stats: statsApiFactory(axios),
+});
+
+export default apiFactory;

api/news.js

@@ -0,0 +1,18 @@
+export default axios => ({
+  getRecentNews: ({ limit = 4, sort = '-publishedAt', country = '' } = {}) => {
+    return axios.get(`/news?sort=${sort}&limit=${limit}&country=${country}`)
+      .then(res => res.data);
+  },
+
+  getTrendingNews: ({ limit, offset, country = '', language = 'en' }) => {
+    return axios.get(`/news/trending?offset=${offset}&limit=${limit}&country=${country}&language=${language}`)
+      .then(res => res.data);
+  },
+
+  searchNews: (q) => {
+    return axios.get(`/news`, {
+      params: { q },
+    })
+      .then(res => res.data);
+  },
+});

api/stats.js

@@ -0,0 +1,6 @@
+export default axios => ({
+  getStats: (country) => {
+    return axios.get(`/stats?country=${country}`)
+      .then(res => res.data);
+  },
+});

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/css/tailwind.css

@@ -0,0 +1,8 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+.container {
+  @apply max-w-5xl !important;
+  @apply mx-auto py-2 px-2;
+}

assets/image/hafeez_nazri.jpg

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <p class="2xl font-bold">Affected countries map chart here</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: null,
+    }
+  },
+
+  data () {
+    return {
+      chart: null,
+    }
+  },
+
+  methods: {
+    renderChart () {
+      //
+    }
+  }
+}
+</script>

assets/image/lau_cher_han.jpg

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <p class="2xl font-bold">Affected region horizontal-stacked bar chart here</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: null,
+    }
+  },
+
+  data () {
+    return {
+      chart: null,
+    }
+  },
+
+  methods: {
+    renderChart () {
+      //
+    }
+  }
+}
+</script>

assets/image/lazy-load-spinner.gif

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <p class="2xl font-bold">Outbreak trend multi-line chart here</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: null,
+    }
+  },
+
+  data () {
+    return {
+      chart: null,
+    }
+  },
+
+  methods: {
+    renderChart () {
+      //
+    }
+  }
+}
+</script>

assets/image/logo.png

@@ -0,0 +1,47 @@
+<template>
+  <div class="w-full h-56 lg:h-full lg:w-1/5 bg-white shadow-md">
+    <div class="relative h-full min-h-screen pl-6">
+      <div class="xl:py-2">
+        <p class="text-2xl font-bold">2019-nCoV Reports</p>
+
+        <div v-for="link in links" :key="link.name" class="hidden lg:block pt-3">
+          <nuxt-link :to="{ name: link.name }">
+            <i :class="'fa fa-' + link.icon" class="mr-2"></i>
+            {{ link.display }}
+          </nuxt-link>
+        </div>
+
+        <div v-for="link in links" :key="'mob-'+link.name" class="lg:hidden pt-3">
+          <nuxt-link :to="{ name: link.name }">
+            <i :class="'fa fa-' + link.icon" class="mr-2"></i>
+            {{ link.display }}
+          </nuxt-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    currentPage: function () {
+      return this.$route.name.replace('page.', '')
+    }
+  },
+
+  data () {
+    return {
+      links: [
+        { name: 'analytics2', display: 'Overview', icon: 'columns' },
+        { name: 'analytics2-virus-comparison', display: 'Virus Comparison', icon: 'search' },
+        { name: 'analytics2-advanced-analysis', display: 'Advanced Analysis', icon: 'chart-line' },
+        { name: 'analytics2-predictive-analysis', display: 'Predictive', icon: 'expand-alt' },
+        { name: 'analytics2-travel-path', display: 'Travel Path', icon: 'route' },
+      ],
+
+      showLinksMobile: false,
+    }
+  }
+}
+</script>

assets/image/shian.jpg

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <div class="bg-primary text-white font-bold p-2">{{ title }}</div>
+        <div class="bg-gray-100">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Card",
+        props: {
+            title: {
+                type: String,
+                required: true
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>