From 3ea81e13fe2ec38c7607746ff67a19d3ee4a0fff Mon Sep 17 00:00:00 2001
From: Clark Reilly <clark.reilly@uconn.edu>
Date: Fri, 8 May 2020 15:21:35 -0400
Subject: [PATCH] everything is done except for the stretch goal of having
 other users' profiles as a view

---
 final/package.json                     |   2 +-
 final/src/App.vue                      | 143 ++++++++++++++++++++++---
 final/src/assets/home-icon.png         | Bin 0 -> 3055 bytes
 final/src/assets/logout.png            | Bin 0 -> 2964 bytes
 final/src/assets/profile-page-icon.png | Bin 0 -> 3863 bytes
 final/src/assets/refresh.png           | Bin 0 -> 3910 bytes
 final/src/assets/title.png             | Bin 0 -> 6898 bytes
 final/src/assets/to-top-arrow.png      | Bin 0 -> 4312 bytes
 final/src/router.js                    |   3 +-
 final/src/views/Home.vue               | 109 ++++++++++++++-----
 final/src/views/Profile.vue            |  71 ++++++++++--
 11 files changed, 273 insertions(+), 55 deletions(-)
 create mode 100644 final/src/assets/home-icon.png
 create mode 100644 final/src/assets/logout.png
 create mode 100644 final/src/assets/profile-page-icon.png
 create mode 100644 final/src/assets/refresh.png
 create mode 100644 final/src/assets/title.png
 create mode 100644 final/src/assets/to-top-arrow.png

diff --git a/final/package.json b/final/package.json
index 1834b10..ab30234 100644
--- a/final/package.json
+++ b/final/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "Slice of Life",
+  "name": "Slice-Of-Life",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/final/src/App.vue b/final/src/App.vue
index 6ad0e3e..9a6751b 100644
--- a/final/src/App.vue
+++ b/final/src/App.vue
@@ -13,16 +13,16 @@
 <template>
   <div id="app">
     <div id="nav">
-      <div>
-        <router-link to="/">Home</router-link> |
-        <router-link to="/about"><img class="navImg" src="./assets/prof-link-placeholder.png"></router-link> |
-        <router-link to="/profile">Profile</router-link> |
+      <div v-if="authenticated">
+        <router-link to="/"><img class="navImg" src="./assets/home-icon.png"></router-link> |
+        <router-link to="/profile"><img class="navImg" src="./assets/profile-page-icon.png"></router-link> |
         <router-link to="/login" v-if="!authenticated">Log in</router-link>
-        <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')"><img class="navImg" src="./assets/logout-placeholder.png"></a>
+        <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')"><img class="navImg" src="./assets/logout.png"></a>
       </div>
       <div id="navSidebar">
-        <img id ="logo" src="./assets/slice-o-life-logo.png">
-        <div id="profPreview">
+        <img id="logo" src="./assets/slice-o-life-logo.png"><br>
+        <img id="siteName" src="./assets/title.png">
+        <div v-if="authenticated" id="profPreview">
           <img id="profPreviewPic" v-bind:src="$store.state.user.photoURL">
           <div>
             <span>{{ $store.state.user.displayName }}</span>
@@ -55,6 +55,10 @@ export default {
 </script>
 
 <style lang="scss">
+body {
+  background-color: #c4d4dc;
+}
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -63,8 +67,9 @@ export default {
   color: #2c3e50;
   display: flex;
   justify-content: flex-start;
-  height: 90vh;
+  height: calc(97.2vh - 18px);
 }
+
 #nav {
   padding: 23px;
   width: 30%;
@@ -72,19 +77,26 @@ export default {
   display: flex;
   flex-direction: column;
   a {
-    font-weight: bold;
-    color: #2c3e50;
     &.router-link-exact-active {
-      color: #42b983;
-      filter: brightness(120%);
+      filter: hue-rotate(-108deg) saturate(70%) brightness(180%)
+      drop-shadow(2px 2px 0 #3c6318);
     }
   }
   img.navImg {
     height: 30px;
+    padding-left: 9px;
+    padding-right: 9px;
   }
   
 }
 
+#siteName {
+  width: 53%;
+  margin-top: -10px;
+  margin-bottom: 25px;
+  -webkit-user-drag: none;
+}
+
 #profPreview {
   display: flex;
   justify-content: center;
@@ -93,11 +105,14 @@ export default {
     width: 20%;
     max-width:200px;
     height: auto;
+    border-radius: 10px;
   }
   div {
     padding-left: 5%;
     line-height: 200%;
-    width: 55%;
+    max-width: 55%;
+    font-weight: bolder;
+    font-size: 14pt;
   }
   
 }
@@ -108,7 +123,7 @@ export default {
 }
 
 #navSidebar {
-
+  flex-direction: column;
   width: 100%;
 }
 
@@ -118,25 +133,119 @@ export default {
 .home {
   width: 60%;
   display: flex;
+  height: 100%;
 }
 
 #postList {
   text-align: left;
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  background-color: #ebf0f2;
+  border: solid #1e7daf;
+  border-radius: 3px;
+  border-width: 2px;
+  padding-bottom: 18px;
+}
+
+#toTopArrow {
+  position: absolute;
+  text-align: center;
+  padding-left: 294px;
+  padding-top: 8px;
+  width: 12%;
+  opacity: 50%;
+  visibility: hidden;
+}
+
+#toTopArrow:hover {
+  opacity: 70%;
+}
+
+#postListTop {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 10px;
+  padding-left: 3%;
+  padding-right: 3%;
+  align-items: center;
+  border-bottom-style: solid;
+  border-bottom-color: #1e7daf;
+  padding-bottom: 10px;
+}
+
+#newPost {
+  height: 20px;
+  width: 70%;
+}
+
+#sendButton {
+  height: 54px;
+  width: 80px;
+  background-color: #1e7daf;
+  color: white;
+  border: none;
+  font-size: 140%;
+  font-variant: small-caps;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+#sendButton:hover {
+  filter: brightness(75%);
+}
+
+#updateButton {
+  height: 40px;
+  align-items: flex-end;
+  cursor: pointer;
+  margin-right: 10px;
+  padding: 5px;
+  border-radius: 10px;
 }
 
 .postDiv {
   width: 100%;
+  display: flex;
+  margin-top: 20px;
+  padding-left: 15px;
 }
 
 .postPFP {
   height: 100px;
   width: 100px;
   object-fit: cover;
+  border-radius: 10px;
+  margin-right: 15px;
 }
 
-#updateButton {
-  height: 100px;
-  align-items: flex-end;
+.postUsn {
+  font-weight: bolder;
+  text-decoration: underline;
+  /*cursor: pointer;*/
+  line-height: 150%;
 }
 
+/* ---------- Profile View ---------- */
+
+.profile {
+  width: 60%;
+  height: calc(100% - 80px);
+}
+
+.profBanner {
+
+}
+
+
+
+
+
+
+/*drop-shadow(1.5px 1px 0 black)
+        drop-shadow(-0.5px 1px 0 black)
+        drop-shadow(1px -1px 0 black)
+        drop-shadow(-1px -1px 0 black);*/
 </style>
diff --git a/final/src/assets/home-icon.png b/final/src/assets/home-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..acdc449330ff73ac3c891e4281ab114b58c55cbc
GIT binary patch
literal 3055
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

literal 0
HcmV?d00001

diff --git a/final/src/assets/logout.png b/final/src/assets/logout.png
new file mode 100644
index 0000000000000000000000000000000000000000..da237b396684b319ae5bef59badf11e1a2106de4
GIT binary patch
literal 2964
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
Ab^rhX

literal 0
HcmV?d00001

diff --git a/final/src/assets/profile-page-icon.png b/final/src/assets/profile-page-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..227794962959382635510e7d6ba777250d556c22
GIT binary patch
literal 3863
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

literal 0
HcmV?d00001

diff --git a/final/src/assets/refresh.png b/final/src/assets/refresh.png
new file mode 100644
index 0000000000000000000000000000000000000000..fea14b9a7e6df6691c643c8635cf51a626acd799
GIT binary patch
literal 3910
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

literal 0
HcmV?d00001

diff --git a/final/src/assets/title.png b/final/src/assets/title.png
new file mode 100644
index 0000000000000000000000000000000000000000..80f82160442cb310c3f0008626468ba57f98e01c
GIT binary patch
literal 6898
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
M=W1KGEhy!G00PK;r2qf`

literal 0
HcmV?d00001

diff --git a/final/src/assets/to-top-arrow.png b/final/src/assets/to-top-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb954db79ce6d63035471692226789660ee3ca64
GIT binary patch
literal 4312
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

literal 0
HcmV?d00001

diff --git a/final/src/router.js b/final/src/router.js
index ed904ec..36f4cdc 100644
--- a/final/src/router.js
+++ b/final/src/router.js
@@ -37,7 +37,8 @@ const router = new Router({
       path: '/profile',
       name: 'profile',
       component: Profile
-    }
+    },
+    
   ]
 });
 
diff --git a/final/src/views/Home.vue b/final/src/views/Home.vue
index fd6bf20..b5ac338 100644
--- a/final/src/views/Home.vue
+++ b/final/src/views/Home.vue
@@ -1,19 +1,27 @@
 <template>
   <div class="home">
     <!-- make the post input and refresh divs here -->
-    
-    <div id="postList">
+    <!-- @scroll="checkTopArrow()" -->
+    <div id="postList" @scroll="checkTopArrow()">
+      <img id="toTopArrow" src="../assets/to-top-arrow.png" @click="goToTop()">
+      <div id="postListTop">
+        <img src="../assets/refresh.png" id="updateButton" @click="refreshPosts()">
+        <input type="text" name="newPost" id="newPost" autocomplete="off" @keyup.enter="sendPost()">
+        <button id="sendButton" @click="sendPost()">send</button>
+      </div>
       <div class="postDiv" v-for="(post, name, index) in posts" :key=index>
         <img v-if="post.hasOwnProperty('img')" class="postPFP" v-bind:src="post.img">
         <img v-if="!post.hasOwnProperty('img')" class="postPFP" src="../assets/ph-pfp.png">
-        <span v-if="post.hasOwnProperty('username')">{{ post.username }}</span>
-        <span v-if="!post.hasOwnProperty('username')">[ERROR: USERNAME NOT FOUND]</span>
-        <br>
-        {{ post.message }}
+        <div>
+          <span v-if="post.hasOwnProperty('username')" class="postUsn">{{ post.username }}</span>
+          <span v-if="!post.hasOwnProperty('username')" class="postUsn">[ERROR: USERNAME NOT FOUND]</span>
+          <br>
+          {{ post.message }} 
+        </div>
       </div>
     </div>
    <!-- make a back-to-top button here -->
-    <button id="updateButton" @click="clearPosts()">update</button>
+    
 
   </div>
   
@@ -36,7 +44,7 @@ export default {
 
   methods: {
     getPosts(){
-      db.collection("posts").get().then(querySnapshot => {
+      db.collection("posts").orderBy('dateStamp', 'desc').limit(200).get().then(querySnapshot => {
           querySnapshot.forEach( doc => {
               // doc.data() is never undefined for query doc snapshots
               /*console.log(doc.id, " => ", doc.data());*/
@@ -45,34 +53,55 @@ export default {
       }); 
     },
 
-    getMyPosts(){
-      db.collection("posts").get().then(querySnapshot => {
-          querySnapshot.forEach( doc => {
-              // doc.data() is never undefined for query doc snapshots
-              console.log(doc.id, " => ", doc.data());
-              this.posts.push(doc.data())
-          });
-      }); 
+    goToTop(){
+      document.getElementById('toTopArrow').style.visibility = "hidden";
+      postList.scrollTop = 0;
     },
 
+    checkTopArrow(){
+      if (postList.scrollTop >= 250) {
+        document.getElementById('toTopArrow').style.visibility = "visible";
+      } else if (postList.scrollTop <= 100) {
+        document.getElementById('toTopArrow').style.visibility = "hidden";
+      }
+    },
 
-    // this currently isn't a "clear posts" function, but proves I can grab all posts and do something to them
-    clearPosts(){
-      document.querySelectorAll('.postDiv').forEach( div => {
-        div.style.backgroundColor = "red";
-      })
+
+    refreshPosts(){
+      this.posts = [];
+      this.getPosts();
     },
 
     getPostsTest(){
-      db.collection("posts").onSnapshot((snapshot) => {
-        snapshot.docChanges().forEach( change => {
+      db.collection("posts").onSnapshot(function(snapshot) {
+        snapshot.docChanges().forEach(function(change) {
             if (change.type === "added") {
-                this.posts.push(change.doc.data());
+               /* console.log("New city: ", change.doc.data());*/
             }
         });
     });
-    }
+    },
+
+    savePostToFirebase(post) {
+      db.collection("posts").add(post);
+    },
+
+    sendPost(){
+      var postObj = {
+        dateStamp: Date.now(),
+        message: newPost.value,
+        username: this.$store.state.user.displayName,
+        uid: this.$store.state.user.uid,
+        img: this.$store.state.user.photoURL  
+      }
 
+      if(postObj.message !== "") {
+        this.savePostToFirebase(postObj);
+      }
+      this.refreshPosts();
+      newPost.value = "";
+      newPost.focus();
+    },
   },
 
   // This runs when the page loads
@@ -80,7 +109,35 @@ export default {
     // console.log(db);
 
     this.getPosts();
-    this.getPostsTest();
+    // this.getPostsTest();
+    
   }
 };
 </script>
+
+
+<!-- db.collection("cities").where("state", "==", "CA")
+    .onSnapshot(function(snapshot) {
+        snapshot.docChanges().forEach(function(change) {
+            if (change.type === "added") {
+                console.log("New city: ", change.doc.data());
+            }
+            if (change.type === "modified") {
+                console.log("Modified city: ", change.doc.data());
+            }
+            if (change.type === "removed") {
+                console.log("Removed city: ", change.doc.data());
+            }
+        });
+    }); -->
+
+
+    <!-- getPostsTest(){
+      db.collection("posts").get().then((snapshot) => {
+        snapshot.docChanges().forEach( change => {
+            if (change.type === "added") {
+                this.posts.push(change.doc.data());
+            }
+        });
+    });
+    } -->
\ No newline at end of file
diff --git a/final/src/views/Profile.vue b/final/src/views/Profile.vue
index 484e555..30ad17f 100644
--- a/final/src/views/Profile.vue
+++ b/final/src/views/Profile.vue
@@ -1,14 +1,22 @@
 <template>
-  <div class="about">
-    <h1>This is the profile page</h1>
-     <div id="postList">
+  <div class="profile">
+    <h1>{{ $store.state.user.displayName }}'s Posts</h1>
+     <div id="postList" @scroll="checkTopArrow()">
+      <img id="toTopArrow" src="../assets/to-top-arrow.png" @click="goToTop()">
+      <div id="postListTop">
+        <img src="../assets/refresh.png" id="updateButton" @click="refreshPosts()">
+        <input type="text" name="newPost" id="newPost" autocomplete="off" @keyup.enter="sendPost()">
+        <button id="sendButton" @click="sendPost()">send</button>
+      </div>
       <div class="postDiv" v-for="(post, name, index) in posts" :key=index>
         <img v-if="post.hasOwnProperty('img')" class="postPFP" v-bind:src="post.img">
         <img v-if="!post.hasOwnProperty('img')" class="postPFP" src="../assets/ph-pfp.png">
-        <span v-if="post.hasOwnProperty('username')">{{ post.username }}</span>
-        <span v-if="!post.hasOwnProperty('username')">[ERROR: USERNAME NOT FOUND]</span>
-        <br>
-        {{ post.message }}
+        <div>
+          <span v-if="post.hasOwnProperty('username')" class="postUsn">{{ post.username }}</span>
+          <span v-if="!post.hasOwnProperty('username')" class="postUsn">[ERROR: USERNAME NOT FOUND]</span>
+          <br>
+          {{ post.message }}
+        </div>
       </div>
     </div>
   </div>
@@ -30,21 +38,64 @@ export default {
 
 
   methods: {
+    
     getMyPosts(){
-      db.collection("posts").where("uid", "==", this.$store.state.user.uid).get().then(querySnapshot => {
+      db.collection("posts")
+      .where("uid", "==", this.$store.state.user.uid).get().then(querySnapshot => {
           querySnapshot.forEach( doc => {
               // doc.data() is never undefined for query doc snapshots
               this.posts.push(doc.data())
           });
+          this.posts.sort(function(a, b) { 
+          return b.dateStamp - a.dateStamp;
+})
       }); 
-    }
+    },
+
+    goToTop(){
+      document.getElementById('toTopArrow').style.visibility = "hidden";
+      postList.scrollTop = 0;
+    },
+
+    checkTopArrow(){
+      if (postList.scrollTop >= 250) {
+        document.getElementById('toTopArrow').style.visibility = "visible";
+      } else if (postList.scrollTop <= 100) {
+        document.getElementById('toTopArrow').style.visibility = "hidden";
+      }
+    },
+
+    refreshPosts(){
+      this.posts = [];
+      this.getMyPosts();
+    },
+
+    savePostToFirebase(post) {
+      db.collection("posts").add(post);
+    },
+
+    sendPost(){
+      var postObj = {
+        dateStamp: Date.now(),
+        message: newPost.value,
+        username: this.$store.state.user.displayName,
+        uid: this.$store.state.user.uid,
+        img: this.$store.state.user.photoURL  
+      }
+
+      if(postObj.message !== "") {
+        this.savePostToFirebase(postObj);
+      }
+      this.refreshPosts();
+      newPost.value = "";
+      newPost.focus();
+    },
 
   },
 
   // This runs when the page loads
   mounted() {
     // console.log(db);
-    console.log(this.$store.state.user.photoURL)
     this.getMyPosts();
   }
 };