started reworking books

vue/src/apps/CookbookView/CookbookView.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="app" class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1 offset">
+    <div class="mb-3" v-for="book in cookbooks" v-bind:key="book.id">
+      <div class="row mb-3">
+        <b-card class="d-flex flex-column" v-hover
+                v-on:click="openBook(book.id)">
+          <b-row no-gutters style="height:inherit;">
+            <b-col no-gutters md="3" style="height:inherit;">
+              <b-card-img-lazy style="object-fit: cover; height: 10vh;" :src="item_image"
+                               v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
+            </b-col>
+            <b-col no-gutters md="9" style="height:inherit;">
+              <b-card-body class="m-0 py-0" style="height:inherit;">
+                <b-card-text class=" h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
+                  <h5 class="m-0 mt-1 text-truncate">{{ book.name }}</h5>
+                  <div class="m-0 text-truncate">{{ book.description }}</div>
+                  <div class="mt-auto mb-1 d-flex flex-row justify-content-end">
+                  </div>
+                </b-card-text>
+              </b-card-body>
+            </b-col>
+          </b-row>
+        </b-card>
+      </div>
+
+      <cookbook-slider :recipes="recipes"></cookbook-slider>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import {BootstrapVue} from 'bootstrap-vue'
+
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import {ApiApiFactory} from "../../utils/openapi/api";
+import CookbookSlider from "../../components/CookbookSlider";
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: 'CookbookView',
+  mixins: [],
+  components: {CookbookSlider},
+  data() {
+    return {
+      cookbooks: [],
+      book_background: window.IMAGE_BOOK,
+      recipes: []
+    }
+  },
+  mounted() {
+    this.refreshData()
+    this.$i18n.locale = window.CUSTOM_LOCALE
+  },
+  methods: {
+    refreshData: function () {
+      let apiClient = new ApiApiFactory()
+
+      apiClient.listRecipeBooks().then(result => {
+        this.cookbooks = result.data
+      })
+    },
+    openBook: function (book) {
+      let apiClient = new ApiApiFactory()
+
+      apiClient.listRecipeBookEntrys({options: {book: book.id}}).then(result => {
+        this.recipes = result.data
+      })
+    }
+  },
+  directives: {
+    hover: {
+      inserted: function (el) {
+        el.addEventListener('mouseenter', () => {
+          el.classList.add("shadow")
+        });
+        el.addEventListener('mouseleave', () => {
+          el.classList.remove("shadow")
+        });
+      }
+    }
+  }
+}
+
+</script>
+
+<style>
+
+
+</style>

vue/src/apps/CookbookView/main.js

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

vue/src/components/CookbookSlider.vue

@@ -0,0 +1,54 @@
+<template>
+  <div v-bind:style="{ backgroundImage: 'url(' + book_background + ')' }"
+       style="background-repeat: no-repeat; background-size: cover; padding-top: 76%;position: relative;"
+       class="pb-2 w-100">
+    <div id="book_carousel" class="carousel slide row" data-ride="carousel"
+         style=" position: absolute;top: 0;left: 0;bottom: 0;right: 0;">
+      <div class="row m-0 w-100">
+        <div class="carousel-item m-0 w-100" v-for="(i, index) in Math.ceil(recipes.length / 2)" v-bind:key="index"
+             :class="{ 'active': index === 0 }">
+          <div class="row m-0 w-100">
+            <div class="col-6 pt-5" v-for="recipe in recipes.slice((i - 1) * 2, i * 2)" v-bind:key="recipe.id">
+              <recipe-card :recipe="recipe.recipe_content" class="mt-5 ml-5 mr-5"></recipe-card>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row m-0 pl-4 pr-4 w-100">
+        <div class="col-6 pull-left">
+          <a class="btn btn-primary mb-3 mr-1" href="#book_carousel" role="button" data-slide="prev">
+            <i class="fa fa-arrow-left"></i>
+          </a>
+        </div>
+        <div class="col-6 text-right">
+          <a class="btn btn-primary mb-3 " href="#book_carousel" role="button" data-slide="next">
+          <i class="fa fa-arrow-right"></i>
+        </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import RecipeCard from "./RecipeCard";
+
+export default {
+  name: "CookbookSlider.vue",
+  components: {RecipeCard},
+  props: {
+    recipes: Array
+  },
+  data() {
+    return {
+      cookbooks: [],
+      book_background: window.IMAGE_BOOK
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>