From 1a2887929969bfdb9068e984d9910a2dc068bd07 Mon Sep 17 00:00:00 2001
From: techcrafter <ben.hamann@adb.sh>
Date: Sun, 8 Nov 2020 16:05:09 +0100
Subject: [PATCH] Home V0.1

---
 src/components/chatInformation.vue | 63 ++++++++++++++++++++
 src/components/room.vue            | 94 ++++++++++++++++++++++++++++++
 src/components/topBanner.vue       |  2 +-
 src/components/topBannerHome.vue   | 71 ++++++++++++++++++++++
 src/main.js                        |  6 ++
 src/views/chat.vue                 |  4 +-
 src/views/home.vue                 | 27 +++++++++
 7 files changed, 264 insertions(+), 3 deletions(-)
 create mode 100644 src/components/room.vue
 create mode 100644 src/components/topBannerHome.vue
 create mode 100644 src/views/home.vue

diff --git a/src/components/chatInformation.vue b/src/components/chatInformation.vue
index 2cb299f..04ad9ac 100644
--- a/src/components/chatInformation.vue
+++ b/src/components/chatInformation.vue
@@ -25,6 +25,69 @@
           <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>
   </div>
 </template>
diff --git a/src/components/room.vue b/src/components/room.vue
new file mode 100644
index 0000000..11f8188
--- /dev/null
+++ b/src/components/room.vue
@@ -0,0 +1,94 @@
+<template>
+  <div id="chatInformation">
+    <div class="box">
+    <div class="contentBox">
+      <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
+      <div class="information">
+        <div class="roomName">{{roomName}}</div>
+        <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>
+<script>
+
+export default {
+  name: "room",
+  props: {
+    roomName: String,
+    onlineUsers: String
+  },
+  methods:{
+    showChatInfo(){
+      document.getElementById("chatInformation").style.display = 'block';
+    }
+  },
+  data(){
+    return {
+      roomInfo: {
+        name: "open chat",
+        user: []
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+#chatInformation{
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+  top: 3rem;
+  width: 100%;
+  height: calc(100% - 3rem);
+  background-color: #1d1d1d;
+  box-shadow: 6px 6px 20px #111;
+  text-align: center;
+}
+.box{
+  position: relative;
+  background-color: #2d2d2d;
+  overflow: auto;
+  max-height: 100%;
+}
+.contentBox{
+  margin-top: 0.2rem;
+  height: 3.2rem;
+  border-bottom: 2px solid #9c9c9c ;
+  padding: 0.2rem;
+  max-height: 48px;
+}
+.picBox{
+  text-align: center;
+  background-color: #00BCD4;
+  width: 3rem;
+  height:3rem;
+  border-radius: 2rem;
+}
+.picPlaceholder{
+  padding-top: 0.001rem;
+  margin-bottom: 1rem;
+}
+.information{
+  position: relative;
+  text-align: left;
+  margin-top: -2.4rem;
+  margin-left: 3.7rem;
+}
+.roomName{
+  color: white;
+}
+.status{
+  font-size: 0.8rem;
+  color: #9c9c9c;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/topBanner.vue b/src/components/topBanner.vue
index 98005f0..fa700f6 100644
--- a/src/components/topBanner.vue
+++ b/src/components/topBanner.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="topBanner">
     <div>
-      <icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
+      <router-link to="/login"><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>
diff --git a/src/components/topBannerHome.vue b/src/components/topBannerHome.vue
new file mode 100644
index 0000000..2c2f9cc
--- /dev/null
+++ b/src/components/topBannerHome.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="topBannerHome">
+    <div>
+      <router-link to="/login"><icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" /></router-link>
+      <div id="container">
+        <div id="chatName">{{roomInfo.name}}</div>
+      </div>
+      <icon v-on:click.native="showChatInfo()" class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
+    </div>
+  </div>
+</template>
+<script>
+import icon from '@/components/icon.vue';
+
+export default {
+  name: "topBannerHome",
+  components:{
+    icon
+  },
+  methods:{
+    showChatInfo(){
+      document.getElementById("chatInformation").style.display = 'block';
+    }
+  },
+  data(){
+    return {
+      roomInfo: {
+        name: "open chat",
+        user: []
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.topBannerHome{
+  position: absolute;
+  width: 100%;
+  height: 3rem;
+  background-color: #1d1d1d;
+  box-shadow: 0 3px 10px #111;
+}
+.smallIcon{
+  top: 0.25rem;
+  background-color: #2d2d2d;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+#icon-arrow{
+  position: absolute;
+  left: 1rem;
+}
+#icon-menu{
+  position: absolute;
+  right: 1rem;
+  background-color: #2d2d2d;
+}
+#container{
+  position: absolute;
+  top: 0.5rem;
+  left: 4.2rem;
+  background-color: #2d2d2d;
+  border-radius: 2rem;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+}
+#chatName{
+  font-size: 1.8rem;
+  color: #ededed;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index a49b5c3..2a85110 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import App from './App.vue'
 import login from './views/login.vue'
 import chat from './views/chat.vue'
+import home from './views/home.vue'
 
 Vue.config.productionTip = false
 Vue.use(VueRouter)
@@ -23,6 +24,11 @@ const router = new VueRouter({
       path: '/chat',
       name: 'chat',
       component: chat
+    },
+    {
+      path: '/room',
+      name: 'room',
+      component: home
     }
   ]
 })
diff --git a/src/views/chat.vue b/src/views/chat.vue
index c510341..77ca5a1 100644
--- a/src/views/chat.vue
+++ b/src/views/chat.vue
@@ -35,8 +35,8 @@
 import message from '@/components/message.vue';
 import messageReceive from '@/components/messageReceive.vue';
 import newMessage from '@/components/newMessage.vue';
-import topBanner from "@/components/topBanner";
-import chatInformation from "@/components/chatInformation";
+import topBanner from "@/components/topBanner.vue";
+import chatInformation from "@/components/chatInformation.vue";
 
 export default {
   name: 'chat',
diff --git a/src/views/home.vue b/src/views/home.vue
new file mode 100644
index 0000000..0c60076
--- /dev/null
+++ b/src/views/home.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <topBannerHome />
+    <room roomName="Test" onlineUsers="5" />
+    <room roomName="Test2" onlineUsers="5" />
+  </div>
+</template>
+<script>
+import topBannerHome from '@/components/topBannerHome'
+import room from '@/components/room'
+
+export default {
+  name: 'home',
+  components: {
+    topBannerHome,
+    room
+  },
+  props:{
+    roomName: String,
+    onlineUsers: String
+  }
+}
+</script>
+
+<style scoped>
+
+</style>