basic vue stuff working

cookbook/templates/meal_plan.html

@@ -1,10 +1,14 @@
 {% extends "base.html" %}
 {% load i18n %}
+{% load static %}
 
 {% block title %}{% trans 'Meal-Plan' %}{% endblock %}
 
 {% block extra_head %}
     {{ form.media }}
+    <script src="{% static 'js/vue.min.js' %}"></script>
+    <script src="{% static 'js/vue-resource.js' %}"></script>
+    <script src="{% static 'js/moment-with-locales.min.js' %}"></script>
 {% endblock %}
 
 {% block content %}
@@ -32,66 +36,35 @@
         {% trans 'Meal-Plan' %} <a href="{% url 'new_meal_plan' %}"><i class="fas fa-plus-circle"></i></a>
     </h3>
 
-    <div class="row">
+    <div id="app">
-        <div class="col-md-12" style="text-align: center">
+        [[plan_entries]]
-            <form action="{% url 'view_plan' %}" method="post">
-                {% csrf_token %}
-                <label>{% trans 'Week' %}
-                    <div class="input-group">
-                        <div class="input-group-prepend">
-                            <button class="btn btn-outline-secondary" id="btn_prev"
-                                    onclick="$('#id_week').val('{{ surrounding_weeks.prev }}'); document.forms[0].submit()">
-                                <i class="fas fa-arrow-left"></i>
-                            </button>
-                        </div>
-                        <input name="week" id="id_week" class="form-control" type="week"
-                               onchange="document.forms[0].submit()" value="{{ js_week }}">
-                        <div class="input-group-append">
-                            <button class="btn btn-outline-secondary" id="btn_next"
-                                    onclick="$('#id_week').val('{{ surrounding_weeks.next }}'); document.forms[0].submit()">
-                                <i class="fas fa-arrow-right"></i>
-                            </button>
-                        </div>
-                    </div>
-                </label>
-            </form>
-        </div>
-    </div>
-    <br/>
-    <div class="row">
-        <div class="col-md-12 table-responsive">
-            <table class="table table-bordered">
-                <tr style="text-align: center">
-                    {% for d in days %}
-                        <th>{{ d | date:"l" }}<br/>{{ d }}</th>
-                    {% endfor %}
-                </tr>
-                {% for plan_key, plan_value in plan.items %}
-                    <tr>
-                        <td colspan="7" style="text-align: center"><h5>{{ plan_value.type_name }}</h5></td>
-                    </tr>
-                    <tr>
-                        {% for day_key, days_value in plan_value.days.items %}
-                            <td class="mealplan-cell">
-                                <a class="mealplan-add-button"
-                                   href="{% url 'new_meal_plan' %}?date={{ day_key|date:'Y-m-d' }}&meal={{ plan_key }}"><i
-                                        class="fas fa-plus"></i></a>
-                                {% for mp in days_value %}
-                                    <a href="{% url 'view_plan_entry' mp.pk %}">
-                                        {% if mp.recipe %}
-                                            {{ mp.recipe }}
-                                        {% else %}
-                                            {{ mp.title }}
-                                        {% endif %}
-                                    </a><br/>
-                                {% endfor %}
-                            </td>
-                        {% endfor %}
-                    </tr>
-                {% endfor %}
-
-            </table>
-        </div>
     </div>
 
+    <script type="application/javascript">
+        var app = new Vue({
+            delimiters: ['[[', ']]'],
+            el: '#app',
+            data: {
+                message: 'Hello Vue!',
+                plan_entries: []
+            },
+            mounted: function () {
+                this.getArticles();
+            },
+            methods: {
+                getArticles: function () {
+                    this.loading = true;
+                    this.$http.get("{% url 'api:mealplan-list' %}?week=" + moment().format('W')).then((response) => {
+                        this.plan_entries = response.data;
+                        this.loading = false;
+                    })
+                        .catch((err) => {
+                            this.loading = false;
+                            console.log(err);
+                        })
+                },
+            }
+        });
+
+    </script>
 {% endblock %}

cookbook/templates/meal_plan_entry.html

@@ -7,7 +7,6 @@
 
 {% block extra_head %}
     <link rel="stylesheet" href="{% static 'custom/css/markdown_blockquote.css' %}">
-    <script type="application/javascript" src="{% static 'js/vue.min.js' %}"></script>
 {% endblock %}
 
 {% block content %}

cookbook/views/api.py

@@ -20,6 +20,13 @@ class MealPlanViewSet(viewsets.ModelViewSet):
     serializer_class = MealPlanSerializer
     permission_classes = [permissions.IsAuthenticated]
 
+    def get_queryset(self):
+        queryset = MealPlan.objects.all()
+        week = self.request.query_params.get('week', None)
+        if week is not None:
+            queryset = queryset.filter(date__week=week)
+        return queryset
+
 
 def get_recipe_provider(recipe):
     if recipe.storage.method == Storage.DROPBOX:

recipes/settings.py

@@ -23,6 +23,8 @@ DEBUG = bool(int(os.getenv('DEBUG', True)))
 
 ALLOWED_HOSTS = os.getenv('ALLOWED_HOSTS').split(',') if os.getenv('ALLOWED_HOSTS') else ['*']
 
+CORS_ORIGIN_ALLOW_ALL = True
+
 LOGIN_REDIRECT_URL = "index"
 LOGOUT_REDIRECT_URL = "index"
 
@@ -52,6 +54,7 @@ INSTALLED_APPS = [
     'django_filters',
     'crispy_forms',
     'emoji_picker',
+    'corsheaders',
     'rest_framework',
     'django_cleanup.apps.CleanupConfig',
     'cookbook.apps.CookbookConfig',
@@ -61,6 +64,7 @@ MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'whitenoise.middleware.WhiteNoiseMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',

requirements.txt

@@ -4,6 +4,7 @@ django-tables2
 django-filter
 django-crispy-forms
 djangorestframework
+django-cors-headers
 django-autocomplete-light
 django-emoji-picker
 django-cleanup