bpd01001 · jjs15102 · Apr 12, 2020 · Apr 26, 2020 · Apr 26, 2020 · Apr 26, 2020
diff --git a/.env b/.env
@@ -1,7 +1,7 @@
-VUE_APP_API_KEY="AIzaSyBi03NBONZ2ncp4PSvjbAplWm6pC5XnjTw"
-VUE_APP_AUTH_DOMAIN="dmd-4470.firebaseapp.com"
-VUE_APP_DATABASE_URL="https://dmd-4470.firebaseio.com"
-VUE_APP_PROJECT_ID="dmd-4470"
-VUE_APP_STORAGE_BUCKET="dmd-4470.appspot.com"
-VUE_APP_MESSAGE_SENDER_ID="159373794744"
-VUE_APP_APP_ID="1:159373794744:web:ca93db7d63c296b472834d"
+VUE_APP_API_KEY="AIzaSyCpmOxx4oge2EIn1VJ6bPECvyfBsyTdTjk"
+VUE_APP_AUTH_DOMAIN="dmd4470-50f92.firebaseapp.com"
+VUE_APP_DATABASE_URL="https://dmd4470-50f92.firebaseio.com"
+VUE_APP_PROJECT_ID="dmd4470-50f92"
+VUE_APP_STORAGE_BUCKET="dmd4470-50f92.appspot.com"
+VUE_APP_MESSAGE_SENDER_ID="855212958962"
+VUE_APP_APP_ID="1:855212958962:web:e183ab5246ec3a27271c6b"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,10 +7,15 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "bootstrap": "^4.4.1",
+    "bootstrap-vue": "^2.13.0",
     "core-js": "^3.6.4",
     "firebase": "^7.13.1",
     "firebaseui": "^4.5.0",
+    "jquery": "^3.5.0",
+    "popper.js": "^1.16.1",
     "vue": "^2.6.11",
+    "vue-resource": "^1.5.1",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },

diff --git a/public/index.html b/public/index.html
@@ -5,12 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,700,900&display=swap" rel="stylesheet">
     <title>web-three-twitter-boilerplate</title>
   </head>
   <body>
-    <noscript>
-      <strong>We're sorry but web-three-twitter-boilerplate doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
+ <script src="main.js"></script>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,27 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link> |
-      <router-link to="/login" v-if="!authenticated">Log in</router-link>
-      <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')">Log out</a>
-    </div>
-    <router-view/>
+      <div class="col-md-3" > 
+          <div id="nav">
+            <router-link to="/">Home</router-link> |
+            <router-link to="/about">About</router-link> |
+            <router-link to="/login" v-if="!authenticated">Log in</router-link>
+            <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')">Log out</a>
+          </div>
+      </div>
+      <div class="col-md-9">
+          <router-view/>
+      </div>
   </div>
+
+
 </template>
 
 <script>
+import Vue from 'vue'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+Vue.use(BootstrapVue)
+Vue.use(IconsPlugin)
+
 
 export default {
   name: 'app',
@@ -26,6 +37,7 @@ export default {
 </script>
 
 <style lang="scss">
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -35,11 +47,13 @@ export default {
 }
 #nav {
   padding: 30px;
+  display:flex;
+  flex-direction: column;
   a {
     font-weight: bold;
     color: #2c3e50;
     &.router-link-exact-active {
-      color: #42b983;
+      color: #0d5c9c;
     }
   }
 }

diff --git a/src/assets/app.scss b/src/assets/app.scss
@@ -0,0 +1,7 @@
+@import 'node_modules/bootstrap/scss/bootstrap';
+@import 'node_modules/bootstrap-vue/src/index.scss';
+
+
+.motherfont {
+    font-family: 'Vollkorn', serif;
+}
diff --git a/src/assets/dog.png b/src/assets/dog.png
diff --git a/src/assets/dogbark.png b/src/assets/dogbark.png
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/main.js b/src/main.js
@@ -1,10 +1,16 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
 
-import firebase from '@/plugins/firebase-init'
-import ui from '@/plugins/firebaseui-init'
+import VueResource from'vue-resource'
+Vue.use(VueResource);
+
+import firebase from '@/plugins/firebase-init';
+import ui from '@/plugins/firebaseui-init';
+
+import 'bootstrap';
+import './assets/app.scss';
 
 Vue.config.productionTip = false;
 

diff --git a/src/views/About.vue b/src/views/About.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1 class="motherfont">Welcome to the Dog Park, Where anyone can Bark!</h1>
+    <b-button variant="outline-primary">Boot</b-button>
+
+
   </div>
 </template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,21 +1,96 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+    <div class="motherfont">
+        <h2>Compose a Bark</h2>
+
+         <img alt="Bark Logo" src="../assets/dog.png" width="200px">
+
+        <form v-if="!submitted">
+            <input type="text" placeholder="Write your Bark here..." v-model.lazy="bark.content" required />
+            <button @click.prevent="post" once>Add Bark</button>
+        </form>
+        <div v-if="submitted">
+            <h3>Thanks for adding your post</h3>
+        </div>
+        <div>
+                 <ul>
+                 <li v-for="(bark, index) in allBarks" :key=index>
+                    {{ bark.content }} by {{ bark.user.displayName }}
+                </li>
+                </ul>
+        </div>
+    </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
+// Imports
 export default {
-  name: 'home',
-  components: {
-    HelloWorld
-  },
-  mounted() {
-    // console.log(db);
-  }
+    data () {
+        return {
+            bark: {
+                content: '',
+            },
+            allBarks: [],
+            submitted: false
+        }
+    },
+    methods: {
+    post(){
+
+        let newBark = {
+          user: this.$store.state.user, // object with: { uid, displayName, photoURL, email, phoneNumber }
+          content:this.bark.content,
+          createdAt: new Date()
+        };
+
+        db.collection('barks').add(newBark)
+        this.content=null;
+
+
+        this.allBarks.unshift(newBark);
+        // Update the list
+        //this.display();
+    },
+        getBarks(){
+            db.collection("barks").get().then(querySnapshot => {
+            querySnapshot.forEach(doc => {
+                // doc.data() is never undefined for query doc snapshots
+                console.log(doc.id, " => ", doc.data());
+                this.allBarks.push(doc.data())
+            });
+        });
+
+        }
+    },
+    mounted(){
+        this.getBarks();
+
+
+    }
 }
+
+    //     post: function(){
+    //         this.$http.post('https://dmd4470-50f92.firebaseio.com/tweets.json',this.bark).then(function(data){
+    //             console.log(data);
+    //             this.submitted = true;
+    //         });
+    //     }
+    // }
 </script>
+
+<style scoped>
+#add-blog *{
+    box-sizing: border-box;
+}
+#add-blog{
+    margin: 20px auto;
+    max-width: 500px;
+}
+label{
+    display: block;
+    margin: 20px 0 10px;
+}
+input[type="text"], textarea{
+    display: block;
+    width: 100%;
+    padding: 8px;
+}