loads roster info

src/App.vue

@@ -4,9 +4,9 @@
       <h1>Hyphen-Hacks</h1>
     </nav>
     <nav id="nav--side">
-      <img class="nav__profileImage" src="https://via.placeholder.com/150" alt="">
-      <h1 class="nav__username">Sam Sam The Triangle Man</h1>
-      <button class="nav__signout">Sign Out</button>
+      <img class="nav__profileImage" :src="user.photoURL" alt="">
+      <h1 class="nav__username">{{user.displayName}}</h1>
+      <button @click="signOut" class="nav__signout">Sign Out</button>
       <hr>
       <router-link class="nav__link" to="/">Home</router-link>
       <router-link class="nav__link" to="/about">About</router-link>
@@ -19,6 +19,33 @@
   import '@/assets/css/global.scss'
 
   export default {
-    name: 'appContainer'
+    name: 'appContainer',
+    computed: {
+      user() {
+        return this.$store.getters.getUser
+      }
+    },
+    mounted() {
+
+      this.$firebase.auth().onAuthStateChanged((user) => {
+        if (user) {
+          // User is signed in.
+         // console.log('user')
+          this.$store.dispatch('updateUser')
+        } else {
+          this.$store.dispatch('updateUser')
+          // No user is signed in.
+          //console.log('no user')
+          const google = new this.$firebase.auth.GoogleAuthProvider();
+          this.$firebase.auth().signInWithRedirect(google);
+        }
+      });
+    },
+    methods: {
+      signOut() {
+        this.$firebase.auth().signOut()
+      }
+
+    }
   }
 </script>

src/assets/css/global.scss

@@ -6,7 +6,7 @@ body, #app {
   font-family: sans-serif;
   height: 100vh;
   width: 100vw;
-  overflow: hidden;
+ overflow: hidden;
 }
 
 a {
@@ -16,8 +16,9 @@ a {
 
 #app {
   display: grid;
-  grid-template-rows: 8vh auto;
-  grid-template-columns: 20vw 90vw;
+  grid-template-rows: 8vh 92vh;
+  grid-template-columns: 20vw 80vw;
+  grid-gap: 0;
 }
 
 #nav--top {
@@ -26,13 +27,18 @@ a {
   display: flex;
   align-items: center;
   padding: 0 2%;
+
+  h1 {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
 }
 
 #nav--side {
   grid-column: 1/2;
   grid-row: 2/3;
   background-image: linear-gradient(120deg, $yellow 0%, $orange 100%);
-  margin: 0 10% 5% 10%;
+  margin: 0 2vh 2vh 5%;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
@@ -41,8 +47,8 @@ a {
   flex-direction: column;
 
   .nav__profileImage {
-    width: 7vw;
-    height: 7vw;
+    width: 5vw;
+    height: 5vw;
     justify-self: center;
     display: block;
     margin-left: auto;
@@ -57,7 +63,7 @@ a {
     text-align: center;
     margin: 10% auto 5% auto;
     font-weight: bold;
-    font-size: 1rem;
+    font-size: 1.3rem;
   }
 
   .nav__signout {
@@ -73,6 +79,10 @@ a {
     background: white;
   }
 
+  .nav__link {
+    margin: 3% 0;
+    font-size: 1.2rem;
+  }
 
 }
 

src/assets/css/roster.scss

@@ -0,0 +1,128 @@
+@import "vars";
+
+.roster {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 8vh auto;
+  padding-bottom: 2vh;
+  padding-right: 2vh;
+
+
+}
+
+.roster__roster {
+  background: $dark--background;
+  -webkit-border-radius: $rounding;
+  -moz-border-radius: $rounding;
+  border-radius: $rounding;
+  overflow-y: scroll;
+  padding: 2%;
+
+}
+
+.roster__buttonRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.buttonRow__addPerson {
+  @include button;
+  background: $orange;
+  justify-self: flex-end;
+  padding: 1% 2%;
+  color: white;
+  font-size: 1rem;
+  display: inline!important;
+}
+
+.buttonRow__checkbox {
+
+  padding: 0.5%;
+  font-size: 1rem;
+  display: inline-flex;
+  min-width: 15vw;
+
+  align-items: center;
+  background: $dark--background;
+  color: white;
+  border: none;
+  -webkit-border-radius: $rounding;
+  -moz-border-radius: $rounding;
+  border-radius: $rounding;
+
+  .buttonRow__checkbox__box {
+    background: $dark;
+    width: 2vw;
+    height: 2vw;
+    -webkit-border-radius: $rounding;
+    -moz-border-radius: $rounding;
+    border-radius: $rounding;
+
+  }
+
+  p {
+    margin-left: 1vw;
+  }
+
+  text-align: left;
+
+  &:focus {
+    outline: none;
+  }
+}
+.roster__person {
+  display: flex;
+  align-items: center;
+  height: 5vh;
+  border: $grey 1px none;
+  border-top-style: solid;
+}
+@mixin person__info {
+  overflow: hidden;
+  display: block;
+  margin: 0 0.5%;
+  font-size: 0.9rem;
+}
+.person__info--name {
+  @include person__info;
+  font-weight: bold;
+  font-size: 1rem;
+  width: 16rem;
+
+
+}
+.person__info--role {
+  @include person__info;
+  width: 4rem;
+}
+.person__info--gender {
+  @include person__info;
+  width: 3rem;
+}
+
+.person__info--school {
+  @include person__info;
+  width: 13rem;
+  font-size: 0.8rem;
+}
+.person__info--waiverStatus {
+  @include person__info;
+  width: 10.5rem;
+
+
+}
+.roster__person {
+  .orange {
+    color: $orange;
+  }
+  .blue {
+    color: $blue;
+  }
+  .yellow {
+    color:$yellow;
+  }
+  .red {
+    color: $red;
+  }
+}

src/assets/css/vars.scss

@@ -1,16 +1,18 @@
-$dark: #27293D;
+$dark: #1D1D2E;
 $dark--background: #27293D;
 $orange: #FDA085;
 $yellow: #F6D365;
 $grey: #4F5160;
-
+$rounding: 10px;
+$blue: #4281A4;
+$red: #ff4d4d;
 
 @mixin button {
   padding: 4% 5%;
   border: none;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
+  -webkit-border-radius: $rounding;
+  -moz-border-radius: $rounding;
+  border-radius: $rounding;
   font-weight: bold;
   font-size: 0.8rem;
 }

src/main.js

@@ -4,6 +4,7 @@ import router from './router'
 import store from './store'
 import './registerServiceWorker'
 import firebase from 'firebase'
+const startInit = performance.now();
 const firebaseConfig = {
   apiKey: "AIzaSyDCnWcOvTFf5P4mWeSl0KDxnGOEDRJTVwg",
   authDomain: "hyphen-hacks-2019.firebaseapp.com",
@@ -12,14 +13,23 @@ const firebaseConfig = {
   storageBucket: "hyphen-hacks-2019.appspot.com",
   messagingSenderId: "496171471834"
 };
-
+let app
 // Initialize Firebase
 firebase.initializeApp(firebaseConfig);
-
+Vue.prototype.$firebase = firebase
 Vue.config.productionTip = false
 
-new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')
+//console.log('vue init')
+firebase.auth().onAuthStateChanged(() => {
+
+  if (!app) {
+   // console.log('firebase init app')
+    app = new Vue({
+      router,
+      store,
+      render: h => h(App)
+    }).$mount('#app')
+    const endInit = performance.now();
+    console.log(`Init took ${(endInit - startInit)/1000}s`)
+  }
+})

src/store.js

@@ -1,16 +1,48 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import firebase from 'firebase'
 
 Vue.use(Vuex)
-
 export default new Vuex.Store({
   state: {
-
+    user: {},
+    roster: false
   },
   mutations: {
+    updateUser(state) {
+      state.user = firebase.auth().currentUser
+    },
+    updateRoster(state, data) {
+      state.roster = data
 
+    }
   },
   actions: {
+    updateUser(context) {
+      context.commit('updateUser')
+    },
+    updateRoster(context) {
+      firebase.firestore().collection('people').get().then(e => {
+        let docs = {}
+         e.forEach((doc) => {
+           // doc.data() is never undefined for query doc snapshots
+           //console.log(doc.id, " => ", doc.data());
+           docs[doc.id] = doc.data()
+         });
+          context.commit('updateRoster', docs)
+        }
+      )
+
+    }
+
+  },
+  getters: {
+    getUser(state) {
+      return state.user
+    },
+    getRoster(state) {
+      return state.roster
 
+    }
   }
 })