From 07117763bfb1944df09c7ddb719c39cd589c3b57 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Mon, 9 Nov 2020 00:23:54 +0100
Subject: [PATCH] integrate master

---
 public/sym/placeholder.png         | Bin 4355 -> 0 bytes
 src/components/chatInformation.vue |  53 +++++++++++++----------------
 src/views/chat.vue                 |   3 ++
 3 files changed, 26 insertions(+), 30 deletions(-)
 delete mode 100644 public/sym/placeholder.png

diff --git a/public/sym/placeholder.png b/public/sym/placeholder.png
deleted file mode 100644
index 750b84c6be54d0bccb7cda486d3ea3feb06d1fb0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4355
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=Lg@u)cg^iV!m5q&!os*A~lY@g(h?kd(
zPgF=uOjJljL|jTyMqEN(Qba^nT~=O6Syfe4Oh!{jLq%IrMOEeh0S0akrqwJ!V+9%h
zA7PLNG9Z8f23VO`*q9kPfRg3{K#Q3e*}0jSSwYSK0!AigRu(}a!{CVrg+)XajRS*1
z3X3L*IVPGkK2%aRa@xqY=>IJS4v=blhJOuUJ)^{E2#kinXb8|c1Q>Ve#O{`Su{}2M
zzQBFsQ)cGoGUqjJ+__V1vpBi9@XV*)-m}Na7Cu^*7xkaPx-|GT4<3IoZ{|6vd1~F+
z&|_5^*JVHL{A&_Cd)16)zkX5cvsN}C?@eBO4Bm5j@ln6eBnqi%?({iwB-CfYBTJQ(
z?T?-RX!m^l@yF5uw_8|i_&4r;|Bxs7<5JhIv~;($wB)_=6Bh4yqVdj>%ev30?=c}x
z)PZC(|DrjcXKBCcd$%H8_G<FAb({&fZDiWVek1n#hc?5zVYXQhrmdg&(8Sd+E>J4e
z|JUDz*Dcw+4QEeST$C5zRwQ!vw&k;q>pp)cA7B8wa|76&yVg`)J*b1*c!ux;zq$AQ
z6F6qQ>iF6inHjl)#k$*tR~cX3`GRRh*P^6k8~@<b*Zo>gz5H<1;1A>X<w|?Q{LLTD
zf7!qNUh>`#jPcBG^nU+vmUy>XZfk)z9(zPT*d2Pmzs0cc)yCK1EPrPGXD~aJdw2fF
z&a>f5_Uf9t28sq-KB{_@Q1fZ_my~N+yJMbpCD-h^;&XN0%IhJ|Cx{rlv7SC-cbRc?
zZ{VYUVo6HMChkFgs%<Zx?@hDXdex_PzrhTyAM%Oi_YX-NFOB%Rx+wyWW7ao*6R-WF
z*i#<bAGJgEOnU977-x+Wi{0j2*Zq<8yUKf2{TI=+S0~l&pRHTY7dSQkw076}P$|Pz
z9anjn+GN{{K8xoa|MobfVt?z5j*hdk0h|`oWEao-I^)&#P{VJ34ke(P-+<dCXihd4
z%ky2iTg0!$FLN3zk2T-ZXL@)0-yU1>v7XydP;i#j0!DSA!zIP{H~WX}TG_w-nJ{Xo
zZoq93T13fKvN?u@$4!lVbR~P<e}+R(%~mYCuP$<|E$8OG6Fb`EEltjzE}VDeKf|Yc
zSiH-?Z`%><E17#Mv!kQ4Z^f7L2eqyD>p7B1P0X)P7;$ad^<~w0vBfdp|0$MrX>Ruk
zba4rmS|q>ZNT{%|prL)H5-_Gq9T@oSJL~p+fBT<7_6AvzY_UmO<f)~v*{Ycx^LC#3
zViM@PE2&FKX~tE7zYGlQ^N;M0um1L*q3;cO+2)4->zCh7ePE#2nQDP$Z)ZJvI%`XI
z-<qGB_w7~fsO<RRcqyWNMt_Se*&OHZOE&Tw%5&6Y?<{&-T=X_7^y<3ev@qnHFLVHR
z+F`Zf`{Ej&bLQ*0ti_++oi@@kI+fY=EOS=6jgRFnp=;OnUMNvryS9443-9Qt?~WIy
zZQJ^;d7*A@_FZ<Ts9V=}@wIH-y1qn~Gdnx(g%x4tvXN?@Zti&*i_(hERnGJ~_C7fD
zb=acfvx3I<JumUNl2JHRG&pwGvRN-*ceZjzd_9$Uwp#ttykF{O^*8sgP(F3%r{h<a
z%INtTb_@Eoi=VPz5qz3gv*1^g&D!%*<OAHN?)=pJisRFEyMS6pxv=M__=(cee(s%h
z*{+hD8y9B&XUJM^mw(g#*Rr%#uV$@URea|B-Cwu^byQ|F1V%$(Gz91v0{s7P0s!fv
B9_|1D

diff --git a/src/components/chatInformation.vue b/src/components/chatInformation.vue
index 78e74d0..ae8a1dd 100644
--- a/src/components/chatInformation.vue
+++ b/src/components/chatInformation.vue
@@ -1,28 +1,23 @@
 <template>
-  <div class="chatInformation">
+  <div id="chatInformation">
     <h1>open chat</h1>
     <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
     <div id="box">
       <div class="informationBox">
-      <div class="picBoxBig"><div class="placeholderBig"><p>O P</p></div></div>
+      <div class="picBoxBig"><div class="placeholderBig"><p>{{chatroom.name.substr(0,2)}}</p></div></div>
       <div class="roomInformation">
-        <div class="roomName">Open Chat room</div>
-        <div class="users">2 members</div>
+        <div class="roomName">{{chatroom.name}}</div>
+        <div class="users">{{chatroom.user.length}} members</div>
       </div>
       </div>
-      <div id="textMembers">Members</div>
-      <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>
-      </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>
+      <h2 v-if="chatroom.user.length !== 0">members</h2>
+      <div v-for="user in chatroom.user" :key="user">
+        <div class="contentBox">
+          <div class="picBox"><div class="picPlaceholder"><p>{{user.substr(0,2)}}</p></div></div>
+          <div class="information">
+            <div class="userName">{{user}}</div>
+            <div class="status">online</div>
+          </div>
         </div>
       </div>
     </div>
@@ -30,30 +25,38 @@
 </template>
 <script>
 import icon from './icon.vue';
+import main from '@/main.js'
 
 export default {
   name: "chatInformation",
   components:{
     icon
+  },
+  data(){
+    return {
+      chatroom: main.data().chatroom
+    }
   }
 }
 
 </script>
 <style scoped>
-.chatInformation{
+#chatInformation{
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0);
   top: 5rem;
   width: calc(100% - 8rem);
+  max-width: 30rem;
   height: calc(100% - 10rem);
   background-color: #1d1d1d;
   box-shadow: 6px 6px 20px #111;
   border-radius: 1rem;
   text-align: center;
+  display: none;
 }
 @media (max-width: 30rem) {
-  .chatInformation{
+  #chatInformation{
     transform: unset;
     top: 0;
     left: 0;
@@ -71,16 +74,14 @@ export default {
 #box{
   position: relative;
   width: calc(100% - 2rem);
-  background-color: #2d2d2d;
   padding: 0.001rem 1rem 1rem;
-  overflow: auto;
+  overflow-y: auto;
   max-height: calc(100% - 8rem);
 }
 .informationBox{
   margin-top: 0.2rem;
   height: 5rem;
   padding: 0.2rem;
-  border-bottom: 2px solid #9c9c9c;
 }
 .picBoxBig{
   text-align: center;
@@ -107,17 +108,9 @@ export default {
   font-size: 1.2rem;
   color: #9c9c9c;
 }
-#textMembers{
-  font-size: 1.5rem;
-  text-align: left;
-  margin-left: 0.2rem;
-  margin-top: 0.3rem;
-  margin-bottom: 0.2rem;
-}
 .contentBox{
   margin-top: 0.2rem;
   height: 3.2rem;
-  border-bottom: 2px solid #9c9c9c ;
   padding: 0.2rem;
   max-height: 48px;
 }
diff --git a/src/views/chat.vue b/src/views/chat.vue
index 304e35f..91c31f9 100644
--- a/src/views/chat.vue
+++ b/src/views/chat.vue
@@ -15,6 +15,7 @@
     </div>
     <newMessage />
     <topBanner />
+    <chatInformation />
   </div>
 </template>
 
@@ -24,10 +25,12 @@ import messageReceive from '@/components/messageReceive.vue';
 import newMessage from '@/components/newMessage.vue';
 import topBanner from '@/components/topBanner.vue';
 import main from '@/main.js';
+import ChatInformation from "@/components/chatInformation";
 
 export default {
   name: 'chat',
   components: {
+    ChatInformation,
     message,
     messageReceive,
     newMessage,