PdxCodeGuild · radmosley · Oct 26, 2022 · Oct 26, 2022 · Nov 13, 2022
diff --git a/code/Ronnie/docker_django_vue/.dockerignore b/code/Ronnie/docker_django_vue/.dockerignore
@@ -0,0 +1 @@
+*/node_modules
diff --git a/code/Ronnie/docker_django_vue/backend/api/admin.py b/code/Ronnie/docker_django_vue/backend/api/admin.py
@@ -1,3 +1,5 @@
 from django.contrib import admin
+from .models import ToDo
 
 # Register your models here.
+admin.site.register(ToDo)
diff --git a/code/Ronnie/docker_django_vue/backend/api/migrations/__init__.py b/code/Ronnie/docker_django_vue/backend/api/migrations/__init__.py
diff --git a/code/Ronnie/docker_django_vue/backend/api/models.py b/code/Ronnie/docker_django_vue/backend/api/models.py
@@ -1,3 +1,9 @@
 from django.db import models
 
 # Create your models here.
+class ToDo(models.Model):
+    title = models.CharField(max_length=200)
+    status = models.BooleanField(default=False)
+
+    def __str__(self):
+        return self.title
diff --git a/code/Ronnie/docker_django_vue/backend/api/serializers.py b/code/Ronnie/docker_django_vue/backend/api/serializers.py
@@ -0,0 +1,7 @@
+from rest_framework import serializers
+from .models import ToDo
+
+class ToDoSerializer(serializers.ModelSerializer):
+    class Meta:
+        fields = ('title', 'status')
+        model = ToDo
diff --git a/code/Ronnie/docker_django_vue/backend/api/urls.py b/code/Ronnie/docker_django_vue/backend/api/urls.py
@@ -0,0 +1,10 @@
+from rest_framework.routers import DefaultRouter
+from django.urls import path
+from .views import ToDoViewSet
+
+router = DefaultRouter()
+router.register('todo', ToDoViewSet, basename='ToDo')
+
+urlpatterns = router.urls + [
+
+]
diff --git a/code/Ronnie/docker_django_vue/backend/api/views.py b/code/Ronnie/docker_django_vue/backend/api/views.py
@@ -1,3 +1,9 @@
-from django.shortcuts import render
-
+from rest_framework import viewsets
+from .models import ToDo
+from .serializers import ToDoSerializer
 # Create your views here.
+class ToDoViewSet(viewsets.ModelViewSet):
+    queryset = ToDo.objects.all()
+    serializer_class = ToDoSerializer
+    # Api methods
+    http_method_names = ["get", "post", "head", "delete", "put"]
diff --git a/code/Ronnie/docker_django_vue/backend/project/settings.py b/code/Ronnie/docker_django_vue/backend/project/settings.py
@@ -9,7 +9,7 @@
 For the full list of settings and their values, see
 https://docs.djangoproject.com/en/4.1/ref/settings/
 """
-
+import os
 from pathlib import Path
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
@@ -37,9 +37,13 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'rest_framework',
+    # 'corsheaders',
+    'api',
 ]
 
 MIDDLEWARE = [
+    'django.middleware.common.CommonMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -54,7 +58,7 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -121,3 +125,9 @@
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+REST_FRAMEWORK = {
+    'DEFAULT_PERMISSION_CLASSES': [
+        'rest_framework.permissions.AllowAny',
+    ]
+}
diff --git a/code/Ronnie/docker_django_vue/backend/project/urls.py b/code/Ronnie/docker_django_vue/backend/project/urls.py
@@ -14,8 +14,11 @@
     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
+from django.views.generic import TemplateView
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+    path('api/', include('api.urls')),
+    path('', TemplateView.as_view(template_name='index.html'), name='index'),
 ]
diff --git a/code/Ronnie/docker_django_vue/backend/requirements.txt b/code/Ronnie/docker_django_vue/backend/requirements.txt
@@ -1,4 +1,12 @@
+asgiref==3.5.2
+certifi==2022.9.14
+charset-normalizer==2.1.1
 Django==4.1
+django-cors-headers==3.13.0
 djangorestframework==3.14.0
+idna==3.4
 Pillow==9.2.0
+pytz==2022.2.1
 requests==2.28.1
+sqlparse==0.4.2
+urllib3==1.26.12
diff --git a/code/Ronnie/docker_django_vue/backend/templates/index.html b/code/Ronnie/docker_django_vue/backend/templates/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<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">
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <title>ToDo Items</title>
+</head>
+<body>
+<div id="app">
+    <form>
+
+    </form>
+    <ul>
+        <li v-for="task in tasks">
+            ${ task.title }
+        </li>
+    </ul>
+</div>
+<script>
+    let form = document.getElementById('form'); // selecting the form
+
+    form.addEventListener('submit', function(event) { // 1
+        event.preventDefault()
+
+        let data = new FormData(); // 2
+
+        data.append("title", document.getElementById('title').value)  
+        data.append("status", document.getElementById('status').value)
+        data.append("csrfmiddlewaretoken", '{{csrf_token}}') // 3
+
+        axios.post('create_item/', data) // 4
+         .then(res => alert("Form Submitted")) // 5
+         .catch(errors => console.log(errors)) // 6
+
+    })
+
+    </script>
+    <script>
+        const app = new Vue({
+            el: '#app',
+            delimiters: ['${', '}'],
+            data: {
+                tasks: [],
+            },
+            methods: {
+                loadTask: function() {
+                    axios({
+                        methods: 'get',
+                        url: 'api/todo',
+                    }).then(response => {
+                    this.tasks = response.data
+                    console.log(this.tasks)
+                    })
+                },
+                newTask: function() {
+
+                }
+            },
+            mounted: function(){
+                console.log('mounting')
+                this.loadTask()
+            }
+        })
+
+    </script>
+</body>
+</html>
diff --git a/code/Ronnie/docker_django_vue/docker-compose.yml b/code/Ronnie/docker_django_vue/docker-compose.yml
@@ -2,14 +2,14 @@ version: '3.9'
 
 services:
 # Dockerfile
-  frontend:
-    build: .
-    volumes:
-      - './frontend/:/usr/src/app'
-      - '/app/node_modules'
-    ports:
-      - '8081:8080'
-    command: "sh -c 'yarn serve'"
+  # frontend:
+  #   build: .
+  #   volumes:
+  #     - './frontend/:/usr/src/app'
+  #     - '/app/node_modules'
+  #   ports:
+  #     - '8081:8080'
+  #   command: "sh -c 'yarn serve'"
 
 # Official Image
   db:

diff --git a/code/Ronnie/heroku b/code/Ronnie/heroku