feat: django and vue integration

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

backend/app/admin.py

@@ -1,3 +1,6 @@
 from django.contrib import admin
+from app.models import BhavCopyEquity
 
 # Register your models here.
+admin.site.register(BhavCopyEquity)
+

backend/app/models.py

@@ -20,9 +20,9 @@ class BhavCopyEquity(models.Model):
     no_trades = models.PositiveIntegerField()
     no_of_shrs = models.PositiveIntegerField()
     net_turnov = models.PositiveIntegerField()
-    tdcloindi = models.TextField()
+    tdcloindi = models.TextField(blank=True)
 
     def __str__(self):
-        return f'{self.DATE}-{self.SC_CODE}'
+        return f'{self.date}-{self.sc_code}'
 
 

backend/app/serializers.py

@@ -0,0 +1,8 @@
+from rest_framework import serializers
+from app.models import BhavCopyEquity
+
+class BhavCopyEquitySerializer(serializers.ModelSerializer):
+    class Meta:
+        model = BhavCopyEquity
+        fields = '__all__'
+

backend/app/urls.py

@@ -0,0 +1,6 @@
+from django.urls import path
+from app.views import BhavCopyEquityView
+
+urlpatterns = [
+    path('bhavcopyequity/', BhavCopyEquityView.as_view(), name='bhavcopyequity_view'),
+]

backend/app/views.py

@@ -1,3 +1,15 @@
-from django.shortcuts import render
+from rest_framework.response import Response
+from rest_framework import generics
+
+from app.models import BhavCopyEquity
+from app.serializers import BhavCopyEquitySerializer
 
 # Create your views here.
+class BhavCopyEquityView(generics.RetrieveAPIView):
+    queryset = BhavCopyEquity.objects.all()
+
+    def get(self, request, *args, **kwargs):
+        queryset = self.get_queryset()
+        serializer = BhavCopyEquitySerializer(queryset, many=True)
+        return Response(serializer.data)
+

backend/backend/settings.py

@@ -38,12 +38,14 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'corsheaders',
     'app',
 ]
 
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
@@ -126,6 +128,11 @@ USE_L10N = True
 
 USE_TZ = True
 
+# TODO: fix hardcoded cross allowed origins
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:8080",
+    "http://127.0.0.1:8080",
+]
 
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/3.1/howto/static-files/

backend/backend/urls.py

@@ -14,8 +14,9 @@ Including another URLconf
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path
+from django.urls import path, include
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+    path('', include('app.urls'))
 ]

backend/requirements.txt

@@ -1,11 +1,12 @@
-# req
+# prod
+django-cors-headers==3.7.0
 django-redis==4.12.1
 django-rq==2.4.0
 django==3.1.6
 djangorestframework==3.12.2
+psycopg2==2.8.6
 requests==2.25.1
 rq-scheduler==0.10.0
-psycopg2==2.8.6
 
 # dev
 pip==21.0.1

docker-compose.yml

@@ -44,19 +44,18 @@ services:
     # ports:
     #   - 5432:5432
 
-  pgadmin:
+  # pgadmin:
-    image: dpage/pgadmin4
+  #   image: dpage/pgadmin4
-    restart: unless-stopped
+  #   restart: unless-stopped
-    depends_on:
+  #   depends_on:
-      - db
+  #     - db
-    environment:
+  #   environment:
-      - PGADMIN_LISTEN_PORT=5050
+  #     - PGADMIN_LISTEN_PORT=5050
-      - PGADMIN_DEFAULT_EMAIL=admin@bullish.io
+  #     - PGADMIN_DEFAULT_EMAIL=admin@bullish.io
-      - PGADMIN_DEFAULT_PASSWORD=password
+  #     - PGADMIN_DEFAULT_PASSWORD=password
-    ports:
+  #   ports:
-      - 5050:5050
+  #     - 5050:5050
 
 volumes:
   bullish-db-data:
 
-

frontend/Dockerfile

@@ -4,4 +4,8 @@ MAINTAINER "Ameya Shenoy <shenoy.ameya@gmail.com>"
 
 WORKDIR /code
 
+RUN set -ex \
+  npm i -g npm \
+  npm i
+
 ENTRYPOINT sh /code/entrypoint.sh

frontend/package-lock.json

@@ -5,10 +5,13 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.21.1",
         "core-js": "^3.6.5",
-        "vue": "^2.6.11"
+        "vue": "^2.6.11",
+        "vue-router": "^3.5.1"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -2726,6 +2729,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "dependencies": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -6384,7 +6395,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz",
       "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -13377,6 +13387,11 @@
       "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
       "dev": true
     },
+    "node_modules/vue-router": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
+      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@@ -16263,7 +16278,8 @@
       "version": "4.5.11",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.11.tgz",
       "integrity": "sha512-JBPeZLubiSHbRkEKDj0tnLiU43AJ3vt6JULn4IKWH1XWZ6MFC8vElaP5/AA4O3Zko5caamDDBq3TRyxdA2ncUQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.11",
@@ -16423,7 +16439,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.2.0",
@@ -16638,7 +16655,8 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
       "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -16678,13 +16696,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -16945,6 +16965,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -19920,8 +19948,7 @@
     "follow-redirects": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz",
-      "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==",
+      "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA=="
-      "dev": true
     },
     "for-in": {
       "version": "1.0.2",
@@ -25616,6 +25643,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
+      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

frontend/package.json

@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-router": "^3.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

frontend/src/App.vue

@@ -1,28 +1,24 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
+    <router-view/>
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
   name: 'App',
-  components: {
-    HelloWorld
-  }
 }
 </script>
 
 <style>
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #f8f8f8 !important;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

frontend/src/axios-api.js

@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+// TODO: fix baseurl as per builds
+const getAPI = axios.create({
+  baseURL: 'http://127.0.0.1:8000',
+  timeout: 5000,
+})
+
+export { getAPI }

frontend/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

frontend/src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './routes.js'
 
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

frontend/src/routes.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import BhavCopy from './views/BhavCopy'
+
+// ensure Router added to middleware
+Vue.use(VueRouter)
+
+export default new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'bhavcopy',
+      component: BhavCopy,
+    }
+  ]
+})
+

frontend/src/views/BhavCopy.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="posts">
+    <h1>HelloWorld</h1>
+    <div v-for="stock in APIData" v-bind:key="stock.id">
+      <div>{{ stock.sc_name }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getAPI } from '../axios-api'
+  export default {
+    name: 'Posts',
+    data() {
+      return {
+        APIData: []
+      }
+    },
+    created() {
+      getAPI.get('/bhavcopyequity/',)
+        .then(response => {
+          console.log('BhavCopyEquity API has recieved data')
+          this.APIData = response.data
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    }
+  }
+</script>
+
+<style scoped>
+</style>