Home V1.0

src/components/chatInformation.vue

@@ -14,78 +14,10 @@
       <div class="contentBox">
         <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
         <div class="information">
-          <div class="userName">TechCrafter07</div>
-          <div class="status">Online</div>
+          <div class="userName">{{name}}</div>
+          <div class="status">{{status}}</div>
         </div>
       </div>
-      <div class="contentBox">
-        <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-        <div class="information">
-          <div class="userName">Alban</div>
-          <div class="status">Online</div>
-        </div>
-      </div>
-      <div class="contentBox">
-        <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-        <div class="information">
-          <div class="userName">Alban</div>
-          <div class="status">Online</div>
-        </div>
-      </div>
-      <div class="contentBox">
-        <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-        <div class="information">
-          <div class="userName">Alban</div>
-          <div class="status">Online</div>
-        </div>
-      </div>
-      <div class="contentBox">
-        <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-        <div class="information">
-          <div class="userName">Alban</div>
-          <div class="status">Online</div>
-        </div>
-      </div>
-      <div class="contentBox">
-        <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-        <div class="information">
-          <div class="userName">Alban</div>
-          <div class="status">Online</div>
-        </div>
-      </div>
-      <div class="contentBox">
-        <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-        <div class="information">
-          <div class="userName">Alban</div>
-          <div class="status">Online</div>
-        </div>
-      </div><div class="contentBox">
-      <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-      <div class="information">
-        <div class="userName">Alban</div>
-        <div class="status">Online</div>
-      </div>
-    </div><div class="contentBox">
-      <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-      <div class="information">
-        <div class="userName">Alban</div>
-        <div class="status">Online</div>
-      </div>
-    </div><div class="contentBox">
-      <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-      <div class="information">
-        <div class="userName">Alban</div>
-        <div class="status">Online</div>
-      </div>
-    </div><div class="contentBox">
-      <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-      <div class="information">
-        <div class="userName">Alban</div>
-        <div class="status">Online</div>
-      </div>
-    </div>
-
-
 
 
     </div>
@@ -98,6 +30,10 @@ export default {
   name: "chatInformation",
   components:{
     icon
+  },
+  props:{
+    name: String,
+    status: String
   }
 }
 

src/components/room.vue

@@ -8,13 +8,6 @@
         <div class="status">{{onlineUsers}} Online</div>
       </div>
     </div>
-    <div class="contentBox">
-      <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
-      <div class="information">
-        <div class="roomName">Open Chatroom 2</div>
-        <div class="status">3 Online</div>
-      </div>
-    </div>
     </div>
   </div>
 </template>

src/components/topBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="topBanner">
     <div>
-      <router-link to="/login"><icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" /></router-link>
+      <router-link to="/room"><icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" /></router-link>
       <icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
       <div id="container">
         <div id="chatName">{{roomInfo.name}}</div>

src/views/chat.vue

@@ -27,7 +27,7 @@
     </div>
     <newMessage />
     <topBanner />
-    <chatInformation />
+    <chatInformation name="TechCrafter07" status="Online" />
   </div>
 </template>
 
@@ -46,6 +46,10 @@ export default {
     newMessage,
     topBanner,
     chatInformation
+  },
+  props:{
+    name: String,
+    status: String
   }
 }
 </script>

src/views/home.vue

@@ -1,8 +1,7 @@
 <template>
   <div>
     <topBannerHome />
-    <room roomName="Test" onlineUsers="5" />
-    <room roomName="Test2" onlineUsers="5" />
+    <router-link to="/chat"><room roomName="Test" onlineUsers="5" /></router-link>
   </div>
 </template>
 <script>