Chat

frontend/components/Styleguide.vue

@@ -2,8 +2,12 @@
   <div>
     <h1>Styleguide</h1>
     <div class="row">
-        <h2>Playlist-element</h2>
-        <Playlist />
+      <h2>Chat</h2>
+      <Chat />
+    </div>
+    <div class="row">
+      <h2>Playlist-element</h2>
+      <Playlist />
     </div>
   </div>
 </template>
@@ -11,12 +15,14 @@
 
 <script>
 import Playlist from "@/components/playlist/Playlist";
+import Chat from "@/components/chat/Chat";
 
 export default {
-    components: {
-        Playlist
-    }
-}
+  components: {
+    Chat,
+    Playlist
+  },
+};
 </script>
 
 

frontend/components/chat/Chat.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="chat-container">
+    <ul>
+      <li v-for="(message, i) in chat" :key="i">
+        <Name :name="message.name" :icon="message.icon" />
+        <span class="channel-name" v-if="message.channel != null">{{ message.channel }}</span>
+        <span class="channel-message">: {{ message.message }}</span>
+      </li>
+    </ul>
+    <div class="chat-input">
+      <ChatInput @sentMessage="sentMessage" @requestHelp="requestHelp" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Name from "@/components/chat/Name";
+import ChatInput from "@/components/chat/ChatInput";
+
+export default {
+  components: {
+    Name,
+    ChatInput
+  },
+  watch: {
+    chat: function(_chat) {
+      if (_chat.length > 30) {
+        this.chat = _chat
+          .reverse()
+          .splice(0, 30)
+          .reverse();
+      }
+    }
+  },
+  methods: {
+    sentMessage: function(message) {
+      this.chat.push({
+        name: "pepega",
+        icon: null,
+        message: message,
+        channel: "avicii"
+      });
+    },
+    requestHelp: function() {
+
+    }
+  },
+  data() {
+    return {
+      chat: [
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        },
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        },
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        },
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        },
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        },
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        },
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        },
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        },
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        },
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        },
+        {
+          name: "KasperRT",
+          icon: "https://img.youtube.com/vi/fn_amMJehPU/mqdefault.jpg",
+          message: "Hei på deg",
+          channel: "summér"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+ul {
+  list-style: none;
+  padding: 0;
+
+  & li {
+    display: flex;
+    color: white;
+
+    & .channel-name {
+      font-size: 0.75rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: whitesmoke;
+    }
+
+    &:nth-child(even) {
+      background: #00000040;
+    }
+
+    &:nth-child(odd) {
+      background: #00000050;
+    }
+  }
+}
+</style>

frontend/components/chat/ChatInput.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="chat-input">
+        <input v-model="chatInput" type="text" placeholder="Aa.." @keyup.enter="send" />
+        <button @click="send">Send</button>
+        <button @click="requestHelp">Help</button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chatInput: ""
+        }
+    },
+    methods: {
+        send: function() {
+            if(this.chatInput == "") {
+                return;
+            }
+            this.$emit("sentMessage", this.chatInput);
+            this.chatInput = "";
+        },
+        requestHelp: function() {
+            console.log("emit for help here");
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

frontend/components/chat/Name.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="name">
+    <div class="icon-container" v-if="icon != undefined">
+      <img :src="icon" />
+    </div>
+    <div class="name-container">{{ name }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: false
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.name {
+  display: flex;
+  align-items: center;
+
+  img {
+    height: 10px;
+    width: 10px;
+    padding: 0 5px;
+  }
+
+  .name-container {
+    padding: 0 5px 0 5px;
+    color: orange;
+  }
+}
+</style>