codeuniversity · faymarie · Mar 9, 2018 · Mar 9, 2018 · Mar 9, 2018 · Mar 9, 2018
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "s2-move"
+  }
+}
diff --git a/build/logo.png b/build/logo.png
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -52,27 +52,27 @@ module.exports = {
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       },
       {
-        test: /\.(png|jpe?g|gif)(\?.*)?$/,
+        test: /\.(png|svg|jpe?g|gif)(\?.*)?$/,
         loader: 'url-loader',
         options: {
           limit: 10000,
           name: utils.assetsPath('img/[name].[hash:7].[ext]')
         }
       },
-      {
-        test: /\.svg$/,
-        loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
-        options: {
-          // optional [svgo](https://github.com/svg/svgo) options
-          svgo: {
-            plugins: [
-              {removeDoctype: true},
-              {removeComments: true},
-              {cleanupIDs: false}
-            ]
-          }
-        }
-      },
+      // {
+      //   test: /\.svg$/,
+      //   loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
+      //   options: {
+      //     // optional [svgo](https://github.com/svg/svgo) options
+      //     svgo: {
+      //       plugins: [
+      //         {removeDoctype: true},
+      //         {removeComments: true},
+      //         {cleanupIDs: false}
+      //       ]
+      //     }
+      //   }
+      // },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
         loader: 'url-loader',

diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
  <title> Move App</title>
   </head>
 	<body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,9 +21,13 @@
     "style-loader": "^0.20.1",
     "svg-pan-zoom": "^3.5.3",
     "svg-url-loader": "^2.3.1",
+    "v-click-outside": "^1.0.4",
     "vue": "^2.5.2",
+    "vue-js-modal": "^1.3.12",
     "vue-resource": "^1.3.6",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuetify": "^1.0.10",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
@@ -35,7 +39,7 @@
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
+    "babel-preset-stage-2": "^6.24.1",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.9",

diff --git a/src/App.vue b/src/App.vue
@@ -13,14 +13,14 @@ export default {
   components: {
   	"appDashboard": Dashboard
   }
-}  
+}
 </script>
 
 <style>
 
 @font-face {
 font-family: 'MaisonNeue';
-src: url('./assets/fonts/MaisonWEB-Regular.woff2') format('woff2');
+src: url('../static/fonts/maison/MaisonWEB-Regular.woff2') format('woff2');
 font-weight: normal;
 font-style: normal;
 }
@@ -33,11 +33,14 @@ body {
 .body__text {
   font-size: 20px;
 }
+
 .header {
   margin-top: 180px;
 }
+
 h1 {
 font size: 45px;
 }
 
+
 </style>
diff --git a/src/api/desks.js b/src/api/desks.js
@@ -0,0 +1,18 @@
+/* Fetching desks from the API (Firebase) --> to mock client-server processing */
+
+const desks = {}
+
+import axios from "axios";
+export default {
+
+  getDesks(desks, {commit}) {
+      return axios.get("https://s2-move.firebaseio.com/desks.json")
+        .then(res => {
+              this.desks = res.data
+              commit("setDesks", this.desks);
+              // promise to update user
+              commit('updateUser');
+            })
+        	.catch(error => console.log(error))
+  } 
+}  
diff --git a/src/api/users.js b/src/api/users.js
@@ -0,0 +1,23 @@
+/* Fetching users from the API (Firebase) --> to mock client-server processing */
+
+// const users = {}
+const userList = []
+
+import axios from "axios";
+
+export default {
+	getUsers(users, {commit}) {
+	   return axios.get("https://s2-move.firebaseio.com/users.json")
+    .then(res => {
+      let users = res.data
+      for (let key in users) {
+            const user = users[key]
+            user.idRef = key
+            userList.push(user)
+      }
+      commit("setUsers", userList)
+      //promise to update users
+      })
+      .catch(error => console.log(error))
+	   }  
+}
diff --git a/src/assets/icons/account-group.png b/src/assets/icons/account-group.png
diff --git a/src/assets/icons/calendar.png b/src/assets/icons/calendar.png
diff --git a/src/assets/icons/cellphone-iphone.png b/src/assets/icons/cellphone-iphone.png
diff --git a/src/assets/icons/city.png b/src/assets/icons/city.png
diff --git a/src/assets/icons/email-outline.png b/src/assets/icons/email-outline.png
diff --git a/src/assets/icons/lightbulb-on-outline.png b/src/assets/icons/lightbulb-on-outline.png
diff --git a/src/assets/icons/phone-classic.png b/src/assets/icons/phone-classic.png
diff --git a/src/assets/icons/slack.png b/src/assets/icons/slack.png
diff --git a/src/assets/icons/wikipedia.png b/src/assets/icons/wikipedia.png
diff --git a/src/assets/images/S2logo_purple_white.png b/src/assets/images/S2logo_purple_white.png
diff --git a/src/components/Auth.vue b/src/components/Auth.vue
@@ -1,11 +1,14 @@
 <template>
 	<div class="login">
-		<h3> Sign In </h3>
-		<div id="firebaseui-auth-container">
-		</div>		
-		<div id="loader">Loading...</div>
+    <img id="s2-logo" src="../../static/images/s-2-logo.png" alt="Sinnerschrader Logo">
+    <img id="move-logo" src="../../static/images/move-logo.png" alt="Sinnerschrader Logo">
+		<h1 class="login__headline"> Login via Google </h1>
+    <p class="login__text">Are you looking for a colleague, meeting room or space for a new team at SinnerSchrader?</p>
+    <div id="loader">Loading...</div>
+		<div id="firebaseui-auth-container"></div>
+    <h1 class="button__text">Let's go!</h1>
+    <br>
 	</div>	
-
 </template>
 
 <script>
@@ -25,7 +28,10 @@ export default {
         callbacks: {
           signInSuccess: function(currentUser, credential, redirectUrl) {
             // Return type determines whether we continue the redirect automatically or whether we leave that to developer to handle.
+            var user = signInSucces.currentUser;
+            console.log("Successfully logged in.", user)
             return true;
+            // console.log("Hello", currentUser.email)
           },
           signInFailure: function(error) {
             // Some unrecoverable error occurred during sign-in.
@@ -51,44 +57,20 @@ export default {
 	         firebase.auth.GoogleAuthProvider.PROVIDER_ID
 	      ]
       	};
-
-      var ui = new firebaseui.auth.AuthUI(firebase.auth());
-      // The start method will wait until the DOM is loaded.
-      ui.start('#firebaseui-auth-container', uiConfig);
+        let ui = firebaseui.auth.AuthUI.getInstance();
+        if(!ui) {
+          ui = new firebaseui.auth.AuthUI(firebase.auth());
+        }
+        ui.start('#firebaseui-auth-container', uiConfig);
+        //This is what it was like before and it won"t work because it says the AuthUI instance is duplicated
+        // var ui = new firebaseui.auth.AuthUI(firebase.auth());
+        // ui.start('#firebaseui-auth-container', uiConfig);
 	}
 }
-
 </script>
 
-<style>
-
+<style lang="css">
 
-span.firebaseui-idp-text.firebaseui-idp-text-short {
-	display: none;
-}
-li.firebaseui-list-item {
-	list-style-type: none;
-	margin-top: -50px;
-}
-
-button.firebaseui-idp-button.mdl-button.mdl-js-button.mdl-button--raised.firebaseui-idp-google.firebaseui-id-idp-button {
-	margin:0, auto;
-}
-
-ul.firebaseui-idp-list {
-
-}
-
-div#firebaseui-auth-container {
-	width: 300px;
-	margin-left: 500px;
-	margin-top: 100px;
-}
-
-h3 {
-	width: 300px;
-	margin-left: 615px;
-	margin-top: 30px;
-}
-</style> 
+@import "../../styles/css/auth.component.css"
 
+</style>
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
@@ -1,24 +1,52 @@
 <template>
-	<div>
-		<div>
+		<div class="dashboard">
+      <!-- App menu -->
+      <app-menu :class="{'menu-visible':hideMenu}"></app-menu>
 			<app-header></app-header>
-		</div>
-			<app-profile></app-profile>
-	</div>
+      <app-hamburg-ottensen></app-hamburg-ottensen>
+<!--       <img src="/static/images/mapedited.svg"/>
+ -->		</div>
+
 </template>
 
 <script>
 
 import Header from "./Header.vue"
-import Profile from "./Profile.vue"
-
+import HamburgOttensen from "./maps/HamburgOttensen"
+import Menu from "./Menu.vue"
+import { mapActions } from 'vuex';
 
 export default {
 	name: "appDashboard",
 	components: {
 		"appHeader": Header,
-		"appProfile": Profile
-	}
-}
+		"appHamburgOttensen": HamburgOttensen,
+    "appMenu": Menu
+	},
+   computed: {
+    // refers to global state of menu
+    hideMenu() { 
+      return this.$store.state.hideMenu;
+    }
+  },
+  methods: {
+    ...mapActions([
+      "fetchUsers", 
+      "fetchDesks", 
+      "checkUserStatus",
+    ]),
+  },
+  mounted() {
+    this.fetchUsers();
+    this.fetchDesks();
+    this.checkUserStatus();
+  }
+}  
 
 </script>
+
+<style lang="css" scoped>
+
+@import "../../styles/css/dashboard.component.css"
+
+</style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ @@
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title> Move App</title>
       </head>
     	<body>
@@ Expand Down @@