TT#32750 Implement startpage with feature overview

Change-Id: I7a0c3ae8b48774ea708f9f95e454ea991d345c8b

src/components/layouts/Default.vue

@@ -23,6 +23,11 @@
             </q-btn>
         </q-toolbar>
         <q-list id="main-menu" slot="left" no-border link inset-delimiter>
+            <q-side-link item to="/user/home">
+                <q-item-side icon="home"></q-item-side>
+                <q-item-main :label="$t('navigation.home.title')"
+                             :sublabel="$t('navigation.home.subTitle')"/>
+            </q-side-link>
             <q-side-link item to="/user/conversations">
                 <q-item-side icon="question answer"></q-item-side>
                 <q-item-main :label="$t('navigation.conversations.title')"

src/components/pages/Home.vue

@@ -0,0 +1,170 @@
+<template>
+    <csc-page :title="$t('pages.home.title')">
+        <div class="row md-gutter">
+            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
+                <div @click="call()">
+                    <q-card :class="{ 'home-card-inactive': !isCallAvailable,
+                        'home-card-active': isCallAvailable }"
+                        class="no-margin"
+                        flat>
+                        <q-card-main align="center">
+                            <q-icon name="call" class="home-icons" />
+                        </q-card-main>
+                        <q-card-actions align="center">
+                            {{ $t('pages.home.cards.voiceCall') }}
+                        </q-card-actions>
+                    </q-card>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
+                <div @click="call()">
+                    <q-card :class="{ 'home-card-inactive': !isCallAvailable,
+                        'home-card-active': isCallAvailable }"
+                        class="no-margin"
+                        flat>
+                        <q-card-main align="center">
+                            <q-icon name="video call" class="home-icons" />
+                        </q-card-main>
+                        <q-card-actions align="center">
+                            {{ $t('pages.home.cards.videoCall') }}
+                        </q-card-actions>
+                    </q-card>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
+                <div @click="call()">
+                    <q-card :class="{ 'home-card-inactive': !isCallAvailable,
+                        'home-card-active': isCallAvailable }"
+                        class="no-margin"
+                        flat>
+                        <q-card-main align="center">
+                            <q-icon name="screen share" class="home-icons" />
+                        </q-card-main>
+                        <q-card-actions align="center">
+                            {{ $t('pages.home.cards.screenShare') }}
+                        </q-card-actions>
+                    </q-card>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
+                <router-link to="/user/call-forward/always">
+                    <q-card class="home-card-active no-margin" flat>
+                        <q-card-main align="center">
+                            <q-icon name="phone forwarded" class="home-icons" />
+                        </q-card-main>
+                        <q-card-actions align="center">
+                            {{ $t('pages.home.cards.callForward') }}
+                        </q-card-actions>
+                    </q-card>
+                </router-link>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
+                <router-link to="/user/call-blocking/incoming">
+                    <q-card class="home-card-active no-margin" flat>
+                        <q-card-main align="center">
+                            <q-icon name="block" class="home-icons" />
+                        </q-card-main>
+                        <q-card-actions align="center">
+                            {{ $t('pages.home.cards.callBlocking') }}
+                        </q-card-actions>
+                    </q-card>
+                </router-link>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
+                <router-link to="/user/reminder">
+                    <q-card class="home-card-active no-margin" flat>
+                        <q-card-main align="center">
+                            <q-icon name="alarm" class="home-icons" />
+                        </q-card-main>
+                        <q-card-actions align="center">
+                            {{ $t('pages.home.cards.reminder') }}
+                        </q-card-actions>
+                    </q-card>
+                </router-link>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
+                <q-card @click="buddyList()" class="home-card-inactive no-margin" flat>
+                    <q-card-main align="center">
+                        <q-icon name="contacts" class="home-icons" />
+                    </q-card-main>
+                    <q-card-actions align="center">
+                        {{ $t('pages.home.cards.buddyList') }}
+                    </q-card-actions>
+                </q-card>
+            </div>
+        </div>
+    </csc-page>
+</template>
+
+<script>
+    import CscPage from '../CscPage'
+    import CscCall from '../CscCall'
+    import { mapGetters } from 'vuex'
+    import { QCard, QCardMain, QCardActions, QIcon } from 'quasar-framework'
+    import { showGlobalWarning } from '../../helpers/ui'
+
+    export default {
+        data() {
+            return {
+            }
+        },
+        components: {
+            CscPage,
+            CscCall,
+            QCard,
+            QCardMain,
+            QCardActions,
+            QIcon
+        },
+        computed: {
+            ...mapGetters('call', [
+                'isCallAvailable'
+            ])
+        },
+        methods: {
+            call() {
+                if(this.isCallAvailable) {
+                    this.$store.commit('layout/showRight');
+                } else {
+                    showGlobalWarning(this.$i18n.t('pages.home.featureNotAvailable'));
+                }
+            },
+            buddyList() {
+                showGlobalWarning(this.$i18n.t('pages.home.featureNotAvailable'));
+            }
+        }
+    }
+</script>
+
+<style lang="stylus">
+@import '~variables'
+    .q-card-actions
+        font-size 22px
+        padding 0 10px 35px 10px
+    .home-card-active
+        cursor pointer
+        border solid 2px $primary
+        .home-icons
+            font-size 6rem
+            color $primary
+        .q-card-actions
+            color $primary
+    .home-card-inactive
+        cursor not-allowed
+        border solid 2px $grey
+        .home-icons
+            font-size 6rem
+            color $grey
+        .q-card-actions
+            color $grey
+    @media (max-width: $breakpoint-sm)
+        .q-card-actions
+            font-size 16px
+            padding 0 10px 25px 10px
+        .home-card-active
+            .home-icons
+                font-size 3rem
+        .home-card-inactive
+            .home-icons
+                font-size 3rem
+</style>

src/locales/en.json

@@ -17,6 +17,10 @@
         "callNotAvailable": "Could not initialize call functionality properly"
     },
     "navigation": {
+        "home": {
+            "title": "Home",
+            "subTitle": "Access to main features"
+        },
         "conversations": {
             "title": "Conversations",
             "subTitle": "Calls, SMS, VoiceMails"
@@ -146,6 +150,20 @@
             "addInputError": "Input a valid number or subscriber name",
             "timeout": "Timeout",
             "destination": "Destination"
+        },
+        "home": {
+            "title": "Home",
+            "cards": {
+                "voiceCall": "Voice Call",
+                "videoCall": "Video Call",
+                "screenShare": "Screen Share",
+                "callForward": "Call Forward",
+                "callBlocking": "Call Blocking",
+                "reminder": "Reminder",
+                "buddyList": "Buddy List",
+                "welcome": "Welcome"
+            },
+            "featureNotAvailable": "This feature is currently not available"
         }
     },
     "call": {

src/routes.js

@@ -4,6 +4,10 @@ export default [
         path: '/user',
         component: require('./components/layouts/Default').default,
         children: [
+            {
+                path: 'home',
+                component: require('./components/pages/Home').default,
+            },
             {
                 path: 'conversations',
                 component: require('./components/pages/Conversations').default,
@@ -55,7 +59,7 @@ export default [
     },
     {
         path: '/',
-        redirect: {path:'/user/conversations'}
+        redirect: {path:'/user/home'}
     },
     {
         path: '*',