Add article part page content. Some small refactoring

src/components/AppFooter.vue

@@ -2,7 +2,7 @@
     <div>
         <v-footer :fixed="true" app>
             <span>
-                Ich Lerne Deutsch &copy;2018
+                Ich Lerne Deutsch &copy;2018-{{ year }}
             </span>
         </v-footer>
     </div>
@@ -11,5 +11,8 @@
 
 <script>
     export default {
+        computed: {
+            year: () => new Date().getFullYear(),
+        },
     };
 </script>

src/components/AppHeader.vue

@@ -90,7 +90,7 @@
                         route: '/sign_up',
                     },
                 ];
-            }
+            },
         },
     };
 </script>

src/components/Article/Part/Content.vue

@@ -0,0 +1,140 @@
+<template>
+   <v-card class="pa-2">
+       <div>
+            <div class="display-1">
+               {{ part.articleTitle }}
+            </div>
+            <div class="headline">
+               {{ part.partTitle }}
+            </div>
+            <v-divider class="black"></v-divider>
+            <div class="text-xs-center mt-2 mb-2 primary">
+                <youtube
+                    :video-id="part.youtubeId"
+                    :player-width="playerWidth"
+                    :player-height="playerHeight"
+                >
+                </youtube>
+            </div>
+
+            <div class="mt-2">
+                <v-slider
+                    v-model="fontSize"
+                    :label="'Размер шрифта'"
+                    step="1"
+                    max="30"
+                    min="10"
+                    tick-size="5"
+                >
+                </v-slider>
+                <v-tabs v-model="tabMode" color="accent" dark fixed-tabs slider-color="success">
+                    <v-tab :key="'german'" ripple>
+                        Текст с подсказками
+                    </v-tab>
+                    <v-tab :key="'side_by_side'" ripple>
+                        Параллельно
+                    </v-tab>
+
+                    <v-tab-item :key="'german'">
+                        <div v-for="(paragraph, i) in part.content" :key="`paragraph1-${i}`">
+                            <span>&nbsp;&nbsp;</span>
+                            <span v-for="(sentence, y) in paragraph.sentences" :key="`paragraph1-sentence${y}`" :style="textStyle">
+                                <span>
+                                    {{ sentence.origText }}
+                                </span>
+                                <v-icon :size="fontSize" @click.prevent="toggleVisibility(i, y)">help</v-icon>
+                                <span class="success--text" style="font-weight:bold;" v-if="getVisibilityFlag(i, y).value">
+                                    {{ sentence.transText }}
+                                </span>
+                            </span>
+                        </div>
+                    </v-tab-item>
+
+                    <v-tab-item  :key="'side_by_side'">
+                        <v-container>
+                            <v-layout row wrap v-for="(paragraph, i) in part.content" :key="`paragraph2-${i}`">
+                                <v-flex xs6>
+                                    <span>&nbsp;&nbsp;</span>
+                                    <span v-for="(sentence, y) in paragraph.sentences" :key="`paragraph2-sentence-orig${y}`" :style="textStyle">
+                                        <span>
+                                            {{ sentence.origText }}
+                                        </span>
+                                    </span>
+                                </v-flex>
+
+                                <v-flex xs6>
+                                    <span>&nbsp;&nbsp;</span>
+                                    <span v-for="(sentence, y) in paragraph.sentences" :key="`paragraph2-sentence-trans${y}`" :style="textStyle">
+                                        <span>
+                                            {{ sentence.transText }}
+                                        </span>
+                                    </span>
+                                </v-flex>
+                            </v-layout>
+                        </v-container>
+                    </v-tab-item>
+                </v-tabs>
+            </div>
+       </div>
+   </v-card> 
+</template>
+
+<script>
+    export default {
+        props: {
+            part: {
+                type: Object,
+                required: true,
+            },
+        },
+        data: () => ({
+            tabMode: 'german',
+            visibillityKeys: [],
+            fontSize: 18,
+        }),
+        created() {
+            for (let i = 0; i < this.part.content.length; i++) {
+                for (let y = 0; y < this.part.content[i].sentences.length; y++) {
+                    this.visibillityKeys.push({
+                        key: `${i}${y}`,
+                        value: false,
+                    });
+                }
+            }
+        },
+        computed: {
+            playerWidth() {
+                if (this.$vuetify.breakpoint.mdAndUp) {
+                    return '640px';
+                }
+
+                return '250px';
+            },
+            playerHeight() {
+                if (this.$vuetify.breakpoint.mdAndUp) {
+                    return '390px';
+                }
+
+                return '190px';
+            },
+            textStyle() {
+                return {
+                    fontSize: `${this.fontSize}px`,
+                };
+            },
+        },
+        methods: {
+            getVisibilityFlag(i, y) {
+                return this.visibillityKeys.find(v => v.key === `${i}${y}`);
+            },
+            toggleVisibility(i, y) {
+                let flag = this.getVisibilityFlag(i, y);
+                flag.value = !flag.value;
+            },
+        }
+    };
+</script>
+
+<style>
+
+</style>

src/components/Article/Words.vue

@@ -0,0 +1,52 @@
+<template>
+    <v-container fluid>
+        <span class="display-1">Слова</span>
+        <v-data-iterator
+            :items="words"
+            :hide-actions="true"
+            content-tag="v-layout"
+            row
+            wrap
+        >
+            <v-flex
+                slot="item"
+                slot-scope="props"
+                xs12
+                sm6
+                md4
+                lg3
+            >
+                <v-card>
+                    <v-card-title>
+                        <h4>{{ props.item.origWord }}</h4>
+                    </v-card-title>
+                    <v-divider></v-divider>
+                    <v-card-text>
+                        {{ props.item.transWord }}
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn fab dark small color="primary">
+                            <v-icon class="d-flex" dark>add</v-icon>
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-flex>
+        </v-data-iterator>
+    </v-container>
+</template>
+
+<script>
+    export default {
+        props: {
+            words: {
+                type: Array,
+                required: true,
+            },
+        },
+    }
+</script>
+
+<style>
+
+</style>

src/components/ArticlesList.vue

@@ -26,14 +26,11 @@
     import ListItem from '@/components/Article/Details';
 
     export default {
-        data() {
+        data: () => ({
-            return {
+            levels: ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'],
-                levels: ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'],
+            searchTerm: null,
-
+            levelTerm: [],
-                searchTerm: null,
+        }),
-                levelTerm: [],
-            };
-        },
         computed: {
             articles() {
                 return this.$store.getters.getArticles;

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Vuetify from 'vuetify';
 import firebase from 'firebase/app';
 import VuetifyConfirm from 'vuetify-confirm';
+import VueYouTubeEmbed from 'vue-youtube-embed';
 import 'firebase/auth';
 
 import 'vuetify/dist/vuetify.min.css';
@@ -21,6 +22,7 @@ Vue.use(VuetifyConfirm, {
   buttonFalseText: 'Нет',
   width: 400,
 });
+Vue.use(VueYouTubeEmbed);
 
 new Vue({
   router,

src/store/articles.js

@@ -95,15 +95,39 @@ export default {
                 articlePartId: 'asdasdad123',
                 articleTitle: 'Harry Potter und Stein der Weisen - 1',
                 partTitle: 'kapitel 1',
-                youtubeId: 'asdasdad1',
+                youtubeId: 'hHW1oY26kxQ',
                 content: [
                     {
                         sentences: [
                             {
-                                origText: 'Bla',
+                                origText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                                 transText: 'Бла',
                             },
-                        ]
+                            {
+                                origText: 'Praesent ligula odio, interdum pretium ligula eu, vehicula consequat nulla. Etiam a massa iaculis, aliquet metus sit amet, varius odio',
+                                transText: 'Бла2',
+                            },
+                            {
+                                origText: 'Suspendisse quis mi eget nisl accumsan molestie in vel lorem. Duis ipsum massa, pharetra nec arcu sed, mattis ultricies neque.',
+                                transText: 'Бла3',
+                            },
+                            {
+                                origText: 'Sed lacinia sed justo sit amet porttitor. Etiam nec nisi nibh. Donec dolor lacus, volutpat in pellentesque vel, accumsan ac nisi.',
+                                transText: 'Бла4',
+                            },
+                        ],
+                    },
+                    {
+                        sentences: [
+                            {
+                                origText: 'Etiam magna dui, pulvinar quis finibus malesuada, vulputate non sem. In hendrerit dui sem, a cursus ipsum interdum non.',
+                                transText: 'Фу1',
+                            },
+                            {
+                                origText: 'Curabitur porta sagittis lacus.',
+                                transText: 'Фу2',
+                            },
+                        ],
                     }
                 ],
                 words: [
@@ -111,6 +135,22 @@ export default {
                         origWord: 'Hallo',
                         transWord: 'Привет',
                     },
+                    {
+                        origWord: 'Hallo',
+                        transWord: 'Привет',
+                    },
+                    {
+                        origWord: 'Hallo',
+                        transWord: 'Привет',
+                    },
+                    {
+                        origWord: 'Hallo',
+                        transWord: 'Привет',
+                    },
+                    {
+                        origWord: 'Hallo',
+                        transWord: 'Привет',
+                    },
                 ],
             },
         ],

src/views/ArticlePart.vue

@@ -2,16 +2,19 @@
     <v-container grid-list-md v-if="part">
         <v-layout row wrap>
             <v-flex xs12 sm10 offset-sm1>
-                <!-- content -->
+                <book-part-content :part="part"></book-part-content>
             </v-flex>
             <v-flex xs12 sm10 offset-sm1>
-                <!-- words -->
+                <book-part-words :words="part.words"></book-part-words>
             </v-flex>
         </v-layout>
     </v-container>
 </template>
 
 <script>
+    import BookPartContent from '@/components/Article/Part/Content';
+    import BookPartWords from '@/components/Article/Words';
+
     export default {
         props: {
             articleId: {
@@ -28,6 +31,10 @@
                 return this.$store.getters.getParts.find(part => part.articleId === this.articleId
                     && part.articlePartId === this.partId);
             }
-        }
+        },
+        components: {
+            BookPartContent,
+            BookPartWords,
+        },
     };
 </script>