Merge remote-tracking branch 'origin/develop' into Give-user-admin-cr…

…edentials-#7

package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^2.0.0",
     "bootstrap": "^4.5.3",

src/App.vue

@@ -1,9 +1,31 @@
 <template>
-  <div id="app" class="container">
+  <div id="app">
+    <sitenav />
+    <div class="container" :class="{'main-container': showNavbar}">
     <router-view/>
     <notifications group="error" position="top center"/>
+    </div>
   </div>
 </template>
 
 <script>
+import sitenav from '@/components/base/Sitenav'
+
+export default {
+  components: {
+    sitenav
+  },
+  computed: {
+    showNavbar () {
+      return this.$route.meta.displayNavbar ?? true
+    }
+  }
+}
 </script>
+
+<style lang="sass" scoped>
+@import 'assets/variables'
+.main-container
+  margin-left: $sitenav-size
+  width: auto
+</style>

src/assets/app.sass

@@ -5,9 +5,7 @@
 @import 'node_modules/bootstrap/scss/bootstrap.scss'
 @import 'node_modules/bootstrap-vue/src/index.scss'
 @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap')
-
-
-$primary: #b51683
+@import 'variables'
 
 
 body

src/assets/variables.sass

@@ -0,0 +1,5 @@
+// colors:
+$primary: #b51683
+
+//layout
+$sitenav-size: 200px

src/components/base/DashboardCard.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+  <b-card
+    :img-src="this.imgLink"
+    img-alt="Card Image"
+    img-height="200"
+    :title="this.title"
+    class="card my-4"
+    @click="router()"
+  >
+    <b-card-text>
+      {{text}}
+    </b-card-text>
+  </b-card>
+</div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: 'title'
+    },
+    text: {
+      type: String,
+      default: 'text'
+    },
+    link: {
+      type: String,
+      default: 'link'
+    },
+    imgLink: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    router () {
+      this.$router.push(this.link)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card {
+transition: box-shadow .2s ;
+transition: all .2s ease;
+}
+.card:hover {
+  transform: scale(1.03);
+  transition: all .2s ease;
+  box-shadow: 0 0 30px rgba(33,33,33,.2);
+  cursor: pointer;
+}
+</style>

src/components/base/Sitenav.vue

@@ -0,0 +1,81 @@
+<template>
+  <div v-if="showNavbar" class="sitenav">
+    <div class="sidenav-content">
+      <h4 class="sidenav-headline">Rooms-Admin</h4>
+      <hr/>
+      <div class="sidenav-links" v-for="links in link" :key="links.id">
+        <sitenavLink :title="links.title" :link="links.link" :icon="links.icon"></sitenavLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import sitenavLink from '@/components/sitenav/sitenav-link'
+export default {
+  name: 'sitenav',
+  data: function () {
+    return {
+      link: {
+        create: {
+          title: 'Create',
+          link: 'create',
+          icon: 'user-secret'
+        },
+        edit: {
+          title: 'Edit',
+          link: 'edit',
+          icon: 'chevron-left'
+        },
+        manage: {
+          title: 'Manage',
+          link: 'manage',
+          icon: 'border-all'
+        }
+      }
+
+    }
+  },
+  computed: {
+    showNavbar () {
+      return this.$route.meta.displayNavbar ?? true
+    }
+  },
+  components: {
+    sitenavLink
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+@import '../../assets/variables'
+.sitenav
+  position: fixed
+  width: $sitenav-size
+  height: 100%
+  background: linear-gradient( rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) ), url("../../assets/img/sitenav-bg.jpg")
+  background-position: center
+  background-size: cover
+  background-repeat: no-repeat
+  box-shadow: 2px 0px 10px gray
+  border-top-right-radius: 8px
+  border-bottom-right-radius: 8px
+  color: white
+
+.sidenav-content
+  padding: 16px
+
+.sidenav-links
+  margin-top: 16px
+
+.sidenav-headline
+  font-weight: 600
+  margin-bottom: 16px
+  font-size: 24px
+
+hr
+  color: white
+  display: block
+  height: 1px
+  border-top: 1px solid white
+</style>

src/components/sitenav/sitenav-link.vue

@@ -0,0 +1,43 @@
+<template>
+  <b-row @click="router()">
+    <b-col cols="2" class="link-icon">
+      <font-awesome-icon :icon="['fas', icon]" />
+    </b-col>
+    <b-col cols="10" class="link-text align-self-center">
+      <h5>
+        {{title}}
+      </h5>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String
+    },
+    link: {
+      type: String
+    },
+    icon: {
+      type: String
+    }
+  },
+  methods: {
+    router () {
+      this.$router.push(this.link)
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+h5
+  font-size: 16px
+  margin: 0
+
+h5:hover
+  cursor: pointer
+  transform: scale(1.03)
+</style>

src/main.js

@@ -8,6 +8,14 @@ import Notifications from 'vue-notification'
 import firebase from 'firebase/app'
 import * as fbService from './services/firebase.service'
 
+//  Fontawesome
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faUserSecret, faChevronLeft, faBorderAll } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(faUserSecret, faChevronLeft, faBorderAll)
+Vue.component('font-awesome-icon', FontAwesomeIcon)
+
 Vue.use(BootstrapVue)
 
 Vue.prototype.$firebase = firebase

src/router/index.js

@@ -18,6 +18,7 @@ const routes = [
     path: '/signin',
     name: 'SignIn',
     component: SignIn,
+    meta: { displayNavbar: false },
     beforeEnter: (to, from, next) => {
       if (userService.isLoggedIn()) {
         next({ name: 'Home' })

src/views/Home.vue

@@ -1,3 +1,62 @@
 <template>
-  <h1>Login works!</h1>
+<b-container>
+  <b-row>
+    <b-col v-for="cards in card" :key="cards.id" :cols="cards.col" >
+      <dashboardCard :title="cards.title" :text="cards.text" :link="cards.link" :imgLink="cards.imgLink"></dashboardCard>
+    </b-col>
+  </b-row>
+  </b-container>
 </template>
+<script>
+import dashboardCard from '@/components/base/DashboardCard'
+export default {
+  data: function () {
+    return {
+      card: {
+        createRoom: {
+          title: 'create Room',
+          text: 'Here you can create a room',
+          link: 'test1',
+          imgLink: 'https://images.unsplash.com/photo-1524989899036-b1c54afba1c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
+          col: '4'
+        },
+        manageRoom: {
+          title: 'manage Room',
+          text: 'Here you can manage a room',
+          link: 'test2',
+          imgLink: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80',
+          col: '4'
+        },
+        roomList: {
+          title: 'List of rooms',
+          text: 'Here you can see a list of rooms',
+          link: 'test3',
+          imgLink: 'https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+          col: '4'
+        },
+        userList: {
+          title: 'List of employees',
+          text: 'Here you can see a list of employees',
+          link: 'test3',
+          imgLink: 'https://wallpapercave.com/wp/wp2231069.jpg',
+          col: '7'
+        },
+        userRoom: {
+          title: 'Trends of rooms',
+          text: 'Here you can see the trends relating to the rooms',
+          link: 'test3',
+          imgLink: 'https://images.unsplash.com/photo-1541194577687-8c63bf9e7ee3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+          col: '5'
+        }
+      }
+    }
+  },
+  components: {
+    dashboardCard
+  }
+}
+</script>
+
+<style>
+
+</style>