slowly looking somewhat decently

cookbook/templates/test.html

@@ -1,10 +1,36 @@
 {% extends "base.html" %}
 {% load render_bundle from webpack_loader %}
 {% load static %}
+{% load i18n %}
+{% load l10n %}
+{% load custom_tags %}
 
 {% block title %}{{ recipe.name }}{% endblock %}
 
 {% block content %}
+    {% recipe_rating recipe request.user as rating %}
+    <!--
+    <div class="row">
+        <div class="col-md-12">
+            <h3>{{ recipe.name }} {{ rating|safe }}</h3>
+
+            {% if recipe.storage %}
+                <small>{% trans 'in' %} <a
+                        href="{% url 'edit_storage' recipe.storage.pk %}">{{ recipe.storage.name }}</a></small><br/>
+            {% endif %}
+
+            {% if recipe.internal %}
+                <small>{% trans 'by' %} {{ recipe.created_by.get_user_name }}<br/></small>
+            {% endif %}
+
+            {% if recipe.keywords %}
+                {% for x in recipe.keywords.all %}
+                    <span class="badge badge-pill badge-light">{{ x }}</span>
+                {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+-->
 
     <div id="app">
         <recipe-view recipe_id="5"></recipe-view>
@@ -24,7 +50,7 @@
 
 
     <script type="application/javascript">
-        window.RECIPE_ID = {{pk}};
+        window.RECIPE_ID = {{recipe.pk}};
         window.USER_PREF = {
             'use_fractions': {% if request.user.userpreference.use_fractions %} true {% else %} false {% endif %},
             'ingredient_decimals': {{ request.user.userpreference.ingredient_decimals }},

cookbook/views/views.py

@@ -497,4 +497,6 @@ def test(request, pk):
     if not settings.DEBUG:
         return HttpResponseRedirect(reverse('index'))
 
-    return render(request, 'test.html', {'pk': pk})
+    recipe = Recipe.objects.get(pk=pk)
+
+    return render(request, 'test.html', {'recipe': recipe})

vue/src/apps/RecipeView/RecipeView.vue

@@ -1,35 +1,61 @@
 <template>
   <div id="app" v-if="!loading">
-
     <div class="row">
-      <div class="col col-md-8">
+      <div class="col-12" style="text-align: center">
         <h3>{{ recipe.name }}</h3>
-        <!--TODO rating -->
-        <!--TODO username -->
-        <!--TODO storage -->
-      </div>
-      <div class="col col-md-4 d-print-none" style="text-align: right">
-        <recipe-context-menu v-bind:recipe="recipe"></recipe-context-menu>
       </div>
     </div>
 
-    <!--TODO keywords -->
-    <span class="badge badge-secondary"><i class="fas fa-user-clock"></i>
-      {{ _('Preparation time ~') }} {{ recipe.working_time }} {{ _('min') }}
-    </span>
-    <span class="badge badge-secondary"><i class="far fa-clock"></i>
-      {{ _('Waiting time ~') }} {{ recipe.waiting_time }} {{ _('min') }}
-    </span>
-
-
     <div class="row">
+      <div class="col-12" style="text-align: center">
+        <i>Hier könnte ihre Rezeptbeschreibung stehen</i>
+      </div>
+    </div>
+
+    <hr/>
+    <div class="row">
+      <div class="col-3">
+        <table>
+          <tr>
+            <td rowspan="2"><i class="fas fa-user-clock fa-2x text-primary"></i></td>
+            <td><span class="text-primary"><b>{{ _('Preparation') }}</b></span></td>
+          </tr>
+          <tr>
+            <td> {{ recipe.working_time }} {{ _('min') }}</td>
+          </tr>
+        </table>
+      </div>
+
+      <div class="col-3">
+        <table>
+          <tr>
+            <td rowspan="2"><i class="far fa-clock fa-2x text-primary"></i></td>
+            <td><span class="text-primary"><b>{{ _('Waiting') }}</b></span></td>
+          </tr>
+          <tr>
+            <td>{{ recipe.waiting_time }} {{ _('min') }}</td>
+          </tr>
+        </table>
+      </div>
+
+      <div class="col-3">
+        Hier kann noch text stehen
+      </div>
+
+      <div class="col-3" style="text-align: right">
+        <recipe-context-menu v-bind:recipe="recipe"></recipe-context-menu>
+      </div>
+    </div>
+    <hr/>
+
+    <div class="row" style="margin-top: 2vh">
       <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && ingredient_count > 0">
 
         <div class="card border-primary">
           <div class="card-body">
             <div class="row">
               <div class="col col-md-8">
-                <h4 class="card-title">{{ _('Ingredients') }}</h4>
+                <h4 class="card-title"><i class="fas fa-pepper-hot"></i> {{ _('Ingredients') }}</h4>
               </div>
               <div class="col col-md-4">
                 <div class="input-group d-print-none">
@@ -57,16 +83,32 @@
         </div>
       </div>
 
-      <div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2" style="text-align: center">
+      <div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2">
-        <img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh;"
+        <div class="row">
-             :alt="_( 'Recipe Image')" v-if="recipe.image !== null">
+          <div class="col-12">
+
+            <img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh;"
+                 :alt="_( 'Recipe Image')" v-if="recipe.image !== null">
+          </div>
+        </div>
+
+        <div class="row" style="margin-top: 2vh">
+          <div class="col-12">
+            <Nutrition :recipe="recipe" :servings="servings"></Nutrition>
+          </div>
+        </div>
       </div>
+
+
     </div>
 
+    <!--TODO Nutritions -->
+
     <div v-if="recipe.file_path.includes('.pdf')">
       <PdfViewer :recipe="recipe"></PdfViewer>
     </div>
-    <div v-if="recipe.file_path.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg')">
+    <div
+        v-if="recipe.file_path.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg')">
       <ImageViewer :recipe="recipe"></ImageViewer>
     </div>
 
@@ -94,9 +136,9 @@ import RecipeContextMenu from "@/components/RecipeContextMenu";
 import {GettextMixin, ToastMixin} from "@/utils/utils";
 import Ingredient from "@/components/Ingredient";
 
-import ScalableNumber from "@/components/ScalableNumber";
 import PdfViewer from "@/components/PdfViewer";
 import ImageViewer from "@/components/ImageViewer";
+import Nutrition from "@/components/Nutrition";
 
 Vue.use(BootstrapVue)
 
@@ -112,7 +154,7 @@ export default {
     Ingredient,
     Step,
     RecipeContextMenu,
-    ScalableNumber, // eslint-disable-line
+    Nutrition,
   },
   data() {
     return {

vue/src/components/Nutrition.vue

@@ -0,0 +1,69 @@
+<template>
+
+  <div>
+    <div class="card border-success">
+
+      <div class="card-body">
+        <div class="row">
+          <div class="col-12">
+            <h5><i class="fas fa-carrot"></i> {{ _('Nutrition') }}</h5>
+          </div>
+        </div>
+
+
+        <div class="row">
+          <div class="col-12">
+            {{ _('Calories') }}
+            {{ calculateAmount(recipe.nutrition.calories) }} kcal
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-12">
+            {{ _('Carbohydrates') }}
+            {{ calculateAmount(recipe.nutrition.carbohydrates) }} g
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-12">
+            {{ _('Fats') }}
+            {{ calculateAmount(recipe.nutrition.fats) }} g
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-12">
+            {{ _('Proteins') }}
+            {{ calculateAmount(recipe.nutrition.proteins) }} g
+          </div>
+        </div>
+
+
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+
+import {GettextMixin} from "@/utils/utils";
+import {calculateAmount} from "@/utils/utils";
+
+export default {
+  name: 'Nutrition',
+  mixins: [
+    GettextMixin,
+  ],
+  props: {
+    recipe: Object,
+    servings: Number,
+  },
+  methods: {
+    calculateAmount: function (x) {
+      return calculateAmount(x, this.servings)
+    }
+  }
+}
+</script>

vue/src/components/ScalableNumber.vue

@@ -18,7 +18,6 @@ export default {
   },
   methods: {
     calculateAmount: function (x) {
-      console.log("calculated amount")
       return calculateAmount(x, this.factor)
     }
   }

vue/webpack-stats.json

@@ -1 +1 @@
-{"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"},{"name":"recipe_view.c7f91f91728c11ba84da.hot-update.js","publicPath":"http://localhost:8080/recipe_view.c7f91f91728c11ba84da.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.c7f91f91728c11ba84da.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\ImageViewer.vue\n  25:50  error  'resolveDjangoUrl' is not defined  no-undef\n\n✖ 1 problem (1 error, 0 warnings)\n"}
+{"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"},{"name":"recipe_view.33bad90b2fb6debcf069.hot-update.js","publicPath":"http://localhost:8080/recipe_view.33bad90b2fb6debcf069.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.33bad90b2fb6debcf069.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\ImageViewer.vue\n  25:50  error  'resolveDjangoUrl' is not defined  no-undef\n\n✖ 1 problem (1 error, 0 warnings)\n"}