cook log

vue/package.json

@@ -11,6 +11,7 @@
     "axios": "^0.21.1",
     "bootstrap-vue": "^2.21.2",
     "core-js": "^3.6.5",
+    "moment": "^2.29.1",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.12",
     "vuex": "^3.6.0"

vue/src/apps/RecipeView/RecipeView.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="app" v-if="!loading">
+
     <div class="row">
       <div class="col-12" style="text-align: center">
         <h3>{{ recipe.name }}</h3>
@@ -179,6 +180,9 @@ export default {
     this.loadRecipe(this.recipe_id)
   },
   methods: {
+    openCookLogModal: function () {
+      this.$bvModal.show('id_modal_cook_log')
+    },
     loadRecipe: function (recipe_id) {
       apiLoadRecipe(recipe_id).then(recipe => {
         this.recipe = recipe

vue/src/components/CookLog.vue

@@ -0,0 +1,68 @@
+<template>
+
+  <div>
+
+    <b-modal class="modal" id="id_modal_cook_log" :title="_('Log Recipe Cooking')" :ok-title="_('Save')"
+             :cancel-title="_('Close')" @ok="logCook()">
+
+      <p>{{ _('All fields are optional and can be left empty.') }}</p>
+      <form>
+
+        <label for="id_log_servings">{{ _('Servings') }}</label>
+        <input class="form-control" type="number" id="id_log_servings" v-model="logObject.servings">
+        <label style="margin-top: 2vh" for="id_log_rating">{{ _('Rating') }} - <span
+            id="id_rating_show">{{ logObject.rating }}/5</span></label>
+        <input type="range" class="custom-range" min="0" max="5" id="id_log_rating" name="log_rating"
+               value="0" v-model="logObject.rating">
+
+        <label for="id_date" style="margin-top: 2vh">{{ _('Date') }}</label>
+        <input type="datetime-local" id="id_date" class="form-control" v-model="logObject.created_at">
+      </form>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+
+import {GettextMixin} from "@/utils/utils";
+
+import moment from 'moment'
+
+Vue.prototype.moment = moment
+
+import Vue from "vue";
+import {BootstrapVue} from "bootstrap-vue";
+import {apiLogCooking} from "@/utils/api";
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: 'CookLog',
+  mixins: [
+    GettextMixin,
+  ],
+  props: {
+    recipe: Object,
+  },
+  data() {
+    return {
+      logObject: {
+        recipe: this.recipe.id,
+        servings: 0,
+        rating: 0,
+        created_at: moment().format('yyyy-MM-DDTHH:MM')
+      }
+    }
+  },
+  methods: {
+    logCook: function () {
+
+      let obj = JSON.parse(JSON.stringify(this.logObject))
+
+      obj.created_at = moment(obj.created_at, 'yyyy-MM-DDTHH:MM').format('yyyy-MM-DD HH:MM')
+      console.log('updating: ', obj)
+      apiLogCooking(this.logObject)
+    },
+  }
+}
+</script>

vue/src/components/Nutrition.vue

@@ -12,7 +12,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-fire fa-fw"></i> {{ _('Calories') }}
+            <i class="fas fa-fire fa-fw text-primary"></i> {{ _('Calories') }}
           </div>
           <div class="col-6">
             {{ calculateAmount(recipe.nutrition.calories) }} kcal
@@ -21,7 +21,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-bread-slice fa-fw"></i> {{ _('Carbohydrates') }}
+            <i class="fas fa-bread-slice fa-fw text-primary"></i> {{ _('Carbohydrates') }}
           </div>
           <div class="col-6">
 
@@ -31,7 +31,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-cheese fa-fw"></i> {{ _('Fats') }}
+            <i class="fas fa-cheese fa-fw text-primary"></i> {{ _('Fats') }}
           </div>
           <div class="col-6">
             {{ calculateAmount(recipe.nutrition.fats) }} g
@@ -40,7 +40,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-drumstick-bite fa-fw"></i> {{ _('Proteins') }}
+            <i class="fas fa-drumstick-bite fa-fw text-primary"></i> {{ _('Proteins') }}
           </div>
           <div class="col-6">
             {{ calculateAmount(recipe.nutrition.proteins) }} g

vue/src/components/RecipeContextMenu.vue

@@ -1,53 +1,54 @@
 <template>
   <div>
 
-      <div class="dropdown">
-        <a class="btn shadow-none" href="#" role="button" id="dropdownMenuLink"
-           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <i class="fas fa-ellipsis-v"></i>
-        </a>
+    <div class="dropdown">
+      <a class="btn shadow-none" href="#" role="button" id="dropdownMenuLink"
+         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <i class="fas fa-ellipsis-v"></i>
+      </a>
 
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
-          <a class="dropdown-item" :href="resolveDjangoUrl('edit_recipe', recipe.id)"><i
-              class="fas fa-pencil-alt fa-fw"></i> {{ _('Edit') }}</a>
-          <button class="dropdown-item" onclick="$('#bookmarkModal').modal({'show':true})">
-            <i class="fas fa-bookmark fa-fw"></i> {{ _('Add to Book') }}
-          </button>
+      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+        <a class="dropdown-item" :href="resolveDjangoUrl('edit_recipe', recipe.id)"><i
+            class="fas fa-pencil-alt fa-fw"></i> {{ _('Edit') }}</a>
+        <button class="dropdown-item" onclick="$('#bookmarkModal').modal({'show':true})">
+          <i class="fas fa-bookmark fa-fw"></i> {{ _('Add to Book') }}
+        </button>
 
-          <a class="dropdown-item" :href="recipe.name" v-if="true"> <!--TODO implement -->
-            <i class="fas fa-shopping-cart fa-fw"></i> {{ _('Add to Shopping') }} </a>
+        <a class="dropdown-item" :href="recipe.name" v-if="true"> <!--TODO implement -->
+          <i class="fas fa-shopping-cart fa-fw"></i> {{ _('Add to Shopping') }} </a>
 
-          <a class="dropdown-item" :href="resolveDjangoUrl('new_meal_plan', recipe.id)"><i
-              class="fas fa-calendar fa-fw"></i> {{ _('Add to Plan') }}</a>
+        <a class="dropdown-item" :href="resolveDjangoUrl('new_meal_plan', recipe.id)"><i
+            class="fas fa-calendar fa-fw"></i> {{ _('Add to Plan') }}</a>
 
-          <!--
-          <button class="dropdown-item" :onclick="openCookLogModal(recipe.id)"><i
-              class="fas fa-clipboard-list fa-fw"></i> {{ _('Log Cooking') }}
-          </button>
-  -->
-          <button class="dropdown-item" onclick="window.print()"><i
-              class="fas fa-print fa-fw"></i> {{ _('Print') }}
-          </button>
 
-          <a class="dropdown-item" :href="resolveDjangoUrl('view_export', recipe.id)" target="_blank"
-             rel="noopener noreferrer"><i class="fas fa-file-export fa-fw"></i> {{ _('Export') }}</a>
+        <button class="dropdown-item"  @click="$bvModal.show('id_modal_cook_log')"><i
+            class="fas fa-clipboard-list fa-fw"></i> {{ _('Log Cooking') }}
+        </button>
 
-          <a class="dropdown-item" :href="resolveDjangoUrl('new_share_link', recipe.id)" target="_blank"
-             rel="noopener noreferrer" v-if="recipe.internal"><i class="fas fa-share-alt fa-fw"></i> {{
-              _('Share')
-            }}</a>
-        </div>
+        <button class="dropdown-item" onclick="window.print()"><i
+            class="fas fa-print fa-fw"></i> {{ _('Print') }}
+        </button>
 
+        <a class="dropdown-item" :href="resolveDjangoUrl('view_export', recipe.id)" target="_blank"
+           rel="noopener noreferrer"><i class="fas fa-file-export fa-fw"></i> {{ _('Export') }}</a>
+
+        <a class="dropdown-item" :href="resolveDjangoUrl('new_share_link', recipe.id)" target="_blank"
+           rel="noopener noreferrer" v-if="recipe.internal"><i class="fas fa-share-alt fa-fw"></i> {{
+            _('Share')
+          }}</a>
+      </div>
 
 
     </div>
 
+    <cook-log :recipe="recipe"></cook-log>
   </div>
 </template>
 
 <script>
 
 import {GettextMixin, ResolveUrlMixin} from "@/utils/utils";
+import CookLog from "@/components/CookLog";
 
 export default {
   name: 'RecipeContextMenu',
@@ -55,6 +56,9 @@ export default {
     ResolveUrlMixin,
     GettextMixin
   ],
+  components: {
+    CookLog
+  },
   props: {
     recipe: Object,
   }

vue/src/utils/api.js

@@ -1,12 +1,37 @@
 import axios from "axios";
-import {makeToast} from "@/utils/utils";
+import {djangoGettext as _, makeToast} from "@/utils/utils";
 import {resolveDjangoUrl} from "@/utils/utils";
 
+axios.defaults.xsrfCookieName = 'csrftoken'
+axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
+
 export function apiLoadRecipe(recipe_id) {
     return axios.get(resolveDjangoUrl('api:recipe-detail', recipe_id)).then((response) => {
         return response.data
     }).catch((err) => {
-        console.log(err)
+        console.log(err.response)
         makeToast('Error', 'There was an error loading a resource!', 'danger')
     })
 }
+
+
+export function apiLogCooking(cook_log) {
+    return axios.post(resolveDjangoUrl('api:cooklog-list',), cook_log).then((response) => {
+        console.log(response)
+        makeToast('Saved', 'Cook Log entry saved!', 'success')
+    }).catch((err) => {
+        handleError(err, 'There was an error creating a resource!', 'danger')
+    })
+}
+
+function handleError(error, message) {
+    if ('response' in error) {
+        console.log(error.response)
+        let title = (('statusText' in error.response) ? error.response.statusText : _('Error'))
+        message += '\n\n' + JSON.stringify(error.response.data);
+        makeToast(title, message, 'danger')
+    } else {
+        makeToast('Error', message, 'danger')
+        console.log(error)
+    }
+}

vue/src/utils/utils.js

@@ -59,8 +59,12 @@ export const ResolveUrlMixin = {
     }
 }
 
-export function resolveDjangoUrl(url, params) {
-    return window.Urls[url](params)
+export function resolveDjangoUrl(url, params=null) {
+    if (params !== null) {
+        return window.Urls[url](params)
+    } else {
+        return window.Urls[url]()
+    }
 }
 
 /*

vue/webpack-stats.json

@@ -1 +1 @@
-{"status":"compiling","publicPath":"http://localhost:8080/"}
+{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\utils\\utils.js\n  63:8  error  Parsing error: Unexpected token, expected \"(\"\n\n  61 | \n  62 | export function resolveDjangoUrl(url, params=null) {\n> 63 |     if params !== null\n     |        ^\n  64 |         return window.Urls[url](params)\n  65 |     else:\n  66 |         return window.Urls[url]\n\n✖ 1 problem (1 error, 0 warnings)\n"}

vue/yarn.lock

@@ -3179,11 +3179,6 @@ dir-glob@^2.0.0, dir-glob@^2.2.2:
   dependencies:
     path-type "^3.0.0"
 
-django-js-reverse@^0.10.1-a.0:
-  version "0.10.1-a.0"
-  resolved "https://registry.yarnpkg.com/django-js-reverse/-/django-js-reverse-0.10.1-a.0.tgz#ff915561930d3292c7e33c8b4d6f10ae8cecc8a0"
-  integrity sha512-t0lHG4LMjkpXBtRL6oQwBX1S5aygZgddQ4IEhTX9icRvRcGv2sx5zyrf1sKj6e8xtO7boibzWI94bSphoG6llw==
-
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/dns-equal/download/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -5549,6 +5544,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"