From b4521456916f8999f1406407547398c30ac2b868 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Wed, 10 Jul 2019 16:20:36 +0100
Subject: [PATCH] fix bugs and preparing to make server settings.

---
 public/index.html                             |   4 +-
 src/components/app/MessagePanel.vue           |   5 +-
 src/components/app/Popouts/Popouts.vue        |   5 +-
 .../ServerSettingsPanels/DeleteServer.vue     |  59 ++++++++
 .../Popouts/ServerSettingsPanels/General.vue  |  47 ++++++
 .../ServerSettingsPanels/ManageChannels.vue   | 104 +++++++++++++
 .../ServerSettingsPanels/ServerSettings.vue   | 139 ++++++++++++++++++
 .../app/ServerTemplate/ChannelsList.vue       |   2 +-
 .../app/ServerTemplate/ServerTemplate.vue     |  11 +-
 src/components/app/Tabs/Servers.vue           |   2 +
 src/services/ServerService.js                 |   3 +
 .../modules/popoutsModule/popoutsModule.js    |  11 ++
 src/utils/changelog.js                        |   3 +-
 src/views/App.vue                             |   4 +
 14 files changed, 390 insertions(+), 9 deletions(-)
 create mode 100644 src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
 create mode 100644 src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
 create mode 100644 src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
 create mode 100644 src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue

diff --git a/public/index.html b/public/index.html
index 0cd3ad2..519a81a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,7 +29,7 @@
   <!-- FB Open Graph data -->
   <meta property="og:title" content="Nertivia - Chat Client">
   <meta property="og:type" content="website">
-  <meta property="og:image" content="https://nertivia.supertiger.tk/img/logo.b5afe32f.png">
+  <meta property="og:image" content="https://nertivia.supertiger.tk/img/logo.0ca2df64.png">
   <meta property="og:description" content="The best chat client that wont restrict you from important and fun features.">
   <meta property="og:url" content="https://nertivia.tk/">
 
@@ -37,7 +37,7 @@
   <meta name="twitter:card" content="app">
   <meta name="twitter:title" content="Nertivia - Chat Client">
   <meta name="twitter:description" content="The best chat client that wont restrict you from important and fun features.">
-  <meta name="twitter:image" content="https://nertivia.supertiger.tk/img/logo.b5afe32f.png">
+  <meta name="twitter:image" content="https://nertivia.supertiger.tk/img/logo.0ca2df64.png">
   <meta name="twitter:url" content="https://nertivia.tk/">
 
   <!-- Preview meta tags -->
diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index 8d2a090..73ebeef 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -490,6 +490,7 @@ export default {
     userStatusColor() {
       const selectedChannel = this.$store.getters.selectedChannelID;
       const channel = this.$store.getters.channels[selectedChannel];
+      const presences = this.$store.getters['members/presences'];
 
       let status = 0;
       if (!channel || !channel.recipients || !channel.recipients.length) {
@@ -497,9 +498,7 @@ export default {
       } else if (
         this.$store.getters.user.friends[channel.recipients[0].uniqueID]
       ) {
-        status =
-          this.$store.getters.user.friends[channel.recipients[0].uniqueID]
-            .recipient.status || 0;
+        status = presences[channel.recipients[0].uniqueID] || 0;
       }
       return statuses[status].color;
     }
diff --git a/src/components/app/Popouts/Popouts.vue b/src/components/app/Popouts/Popouts.vue
index 76afa20..94b3400 100644
--- a/src/components/app/Popouts/Popouts.vue
+++ b/src/components/app/Popouts/Popouts.vue
@@ -10,6 +10,7 @@
       <take-survey-popout key="tsp" v-if="popouts.surveyPopout"/>
       <add-server key="as" v-if="popouts.addServer"/>
       <server-invite key="sip" v-if="popouts.showServerInviteMenu" />
+      <server-settings key="ss" v-if="popouts.serverSettings.serverID"/>
     </transition-group>
   </div>
 </template>
@@ -26,6 +27,7 @@
   const imageLargePreview = () => import('./Popouts/imageLargePreview.vue');
   const DragDropFileUploadDialog = () => import('./Popouts/DragDropFileUploadDialog.vue');
   const ServerInvitePopout = () => import('./Popouts/ServerInvitePopout.vue');
+  const ServerSettings = () => import('./Popouts/ServerSettingsPanels/ServerSettings.vue');
 
 
 
@@ -39,7 +41,8 @@ export default {
     imageLargePreview,
     TakeSurveyPopout,
     AddServer,
-    ServerInvite: ServerInvitePopout
+    ServerInvite: ServerInvitePopout,
+    ServerSettings
   },
   data() {
     return {
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
new file mode 100644
index 0000000..4a81db0
--- /dev/null
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="content-inner">
+      <div class="warning">Are you sure you want to delete <strong>{{server.name}}</strong>? This cannot be <strong>UNDONE!</strong></div>
+      <div class="button" @click="deleteServer()">DELETE <strong>{{server.name}}</strong></div>
+    </div>
+</template>
+
+<script>
+import config from "@/config.js";
+import { bus } from "@/main";
+import Spinner from "@/components/Spinner.vue";
+import ServerService from "@/services/ServerService";
+import { mapState } from "vuex";
+
+export default {
+  components: {Spinner},
+  methods: {
+    async deleteServer(){
+      const {ok, error, result} = await ServerService.leaveServer(this.server.server_id);
+      if (ok) {
+        this.$store.dispatch('setServerSettings', {serverID: null})
+      }
+    }
+  },
+  computed: {
+    server() {
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID
+      return this.$store.getters['servers/servers'][serverID]
+    }
+  }
+};
+</script>
+
+
+<style scoped>
+.content-inner {
+  display: flex;
+  flex-direction: column;
+}
+.warning {
+  background: red;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px;
+}
+.button {
+  padding: 10px;
+  background: rgba(255, 0, 0, 0.719);
+  margin: auto;
+  border-radius: 10px;
+  transition: 0.3s;
+  user-select: none;
+}
+.button:hover {
+  background: rgb(255, 0, 0);
+}
+</style>
+
+
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
new file mode 100644
index 0000000..b3d01e0
--- /dev/null
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="content-inner">
+      <div class="top">
+        <div class="server-avatar"></div>
+        <div class="server-name">{{server.name}}</div>
+      </div>
+    </div>
+</template>
+
+<script>
+import config from "@/config.js";
+import { bus } from "@/main";
+import Spinner from "@/components/Spinner.vue";
+import ServerService from "@/services/ServerService";
+import { mapState } from "vuex";
+
+export default {
+  components: {Spinner},
+  computed: {
+    server() {
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID
+      return this.$store.getters['servers/servers'][serverID]
+    }
+  }
+};
+</script>
+
+<style scoped>
+.server-avatar {
+  background: grey;
+  height: 90px;
+  width: 90px;
+  border-radius: 50%;
+}
+.top {
+  margin: 10px;
+  display: flex;
+}
+.server-name {
+  align-self: center;
+  margin-left: 10px;
+
+}
+</style>
+
+
+
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
new file mode 100644
index 0000000..ec34307
--- /dev/null
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="content-inner">
+      <div class="channels-list">
+        <div class="channel" v-for="(channel, index) in channels" :key="channel.channelID" :class="{selected: index === selectedChannelIndex}" @click="selectedChannelIndex = index">{{channel.name}}</div>
+        <div class="channel" @click="createChannel()">Create Channel</div>
+      </div>
+      <div class="details">
+        <div class="input">
+        <div class="input-title">Server Name</div>
+          <input type="text" placeholder="Channel Name" :value="channels[selectedChannelIndex].name">
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import config from "@/config.js";
+import { bus } from "@/main";
+import Spinner from "@/components/Spinner.vue";
+import ServerService from "@/services/ServerService";
+import { mapState } from "vuex";
+
+export default {
+  components: {Spinner},
+  data() {
+    return {
+      selectedChannelIndex: 0
+    }
+  },
+  methods: {
+    async createChannel() {
+      const {ok, error, result} = await ServerService.createChannel(this.server.server_id, "New Channel");
+      console.log(ok, error, result) 
+    }
+  },
+  computed: {
+    server() {
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID
+      return this.$store.getters['servers/servers'][serverID]
+    },
+    channels() {
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID
+      const channels = this.$store.getters.channels;
+      const channelIDs = this.$store.getters['servers/channelsIDs'][serverID];
+      return channelIDs.map(c => {
+        return channels[c];
+      })
+    }
+  }
+};
+</script>
+
+<style scoped>
+.server-avatar {
+  background: grey;
+  height: 90px;
+  width: 90px;
+  border-radius: 50%;
+}
+.content-inner {
+  display: flex;
+  height: 100%;
+}
+.channels-list {
+  background: #161616e5;
+  height: 100%;
+  width: 150px;
+  flex-shrink: 0;
+}
+.channel {
+  border-radius: 5px;
+  padding: 5px;
+  margin: 5px;
+  user-select: none;
+  cursor: default;
+  transition: 0.3s;
+}
+.channel:hover {
+  background: rgba(58, 58, 58, 0.849);
+}
+.channel.selected {
+  background: rgb(58, 58, 58);
+}
+.details {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.input {
+  display: flex;
+  flex-direction: column;
+  background: rgba(22, 22, 22, 0.87);
+  border-radius: 10px;
+  padding: 5px;
+  margin: 5px;
+}
+.input input {
+  border-radius: 5px;
+  width: initial;
+}
+</style>
+
+
+
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
new file mode 100644
index 0000000..9b1f021
--- /dev/null
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="dark-background" @mousedown="backgroundClick">
+    <div class="inner">
+      <div class="tabs">
+        <div class="tab" v-for="(tab, _index) in tabs" :key="_index" :class="{selected: index === _index, critical: tab.critical}" @click="index = _index"><div class="material-icons">{{tab.icon}}</div><div>{{tab.title}}</div></div>
+      </div>
+      <div class="content">
+        <div class="header" :class="{critical: tabs[index].critical}"><div class="material-icons">{{tabs[index].icon}}</div><div>{{tabs[index].title}}</div></div>
+        <!-- <general v-if="index === 0"/> -->
+        <manage-channels v-if="index === 0"/>
+        <delete-server v-if="index === 1"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import config from "@/config.js";
+import { bus } from "@/main";
+import Spinner from "@/components/Spinner.vue";
+import ServerService from "@/services/ServerService";
+import { mapState } from "vuex";
+
+// panels
+import General from './General.vue'
+import DeleteServer from './DeleteServer.vue'
+import ManageChannels from './ManageChannels.vue'
+
+export default {
+  components: {Spinner, General, DeleteServer, ManageChannels},
+  data() {
+    return {
+      index: 0,
+      tabs: [
+        // {title: "General", icon: "info"},
+        {title: "Manage Channels", icon: "storage"},
+        // {title: "Manage Invites", icon: "local_post_office"},
+        {title: "Delete Server", icon: "warning", critical: true},
+      ]
+    }
+  },
+
+  methods: {
+    closeMenu() {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "showServerInviteMenu",
+        visibility: false
+      });
+    },
+    backgroundClick(e) {
+      if (e.target.classList.contains("dark-background")) {
+        this.closeMenu();
+      }
+    },
+  },
+  computed: {
+    server() {
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID
+      return this.$store.getters['servers/servers'][serverID]
+    }
+  }
+};
+</script>
+
+
+<style scoped>
+.dark-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.541);
+  z-index: 111111;
+  display: flex;
+}
+.inner {
+  margin: auto;
+  height: 400px;
+  width: 600px;
+  background: rgba(32, 32, 32, 0.87);
+  display: flex;
+  color: white;
+  overflow: hidden;
+  border-radius: 10px;
+}
+
+
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.tabs {
+  background: rgba(26, 26, 26, 0.897);
+  height: 100%;
+  width: 180px;
+  flex-shrink: 0;
+}
+.tab {
+  border-radius: 5px;
+  margin: 5px;
+  padding: 5px;
+  transition: 0.2s;
+  cursor: default;
+  user-select: none;
+  display: flex;
+  align-content: center;
+}
+.tab .material-icons {
+  margin-right: 3px;
+}
+.tab div {
+  align-self: center;
+}
+.tab:hover {
+  background: rgb(39, 39, 39);
+}
+.critical {
+  color: red;
+}
+.tab.selected {
+  background: rgb(59, 59, 59);
+}
+.header{
+  background: rgb(75, 75, 75);
+  display: flex;
+  height: 50px;
+  flex-shrink: 0;
+  width: 100%;
+  user-select: none;
+  cursor: default;
+}
+.header div {
+  align-self: center;
+  margin-left: 10px;
+}
+</style>
diff --git a/src/components/app/ServerTemplate/ChannelsList.vue b/src/components/app/ServerTemplate/ChannelsList.vue
index 635dc86..3628da0 100644
--- a/src/components/app/ServerTemplate/ChannelsList.vue
+++ b/src/components/app/ServerTemplate/ChannelsList.vue
@@ -2,7 +2,7 @@
   <div class="channels-list">
     <spinner v-if="channels === undefined" size="40"/>
     <div class="wrapper" v-if="channels">
-      <ChannelTemplate v-for="channel in channels" :key="channel.name" :channel-data="channel" @click.native="openChannel(channel)"/>
+      <ChannelTemplate v-for="channel in channels" :key="channel.channelID" :channel-data="channel" @click.native="openChannel(channel)"/>
     </div>
   </div>
 </template>
diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue
index 70ec5a8..e2da7aa 100644
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/src/components/app/ServerTemplate/ServerTemplate.vue
@@ -22,10 +22,15 @@
           v-if="ServerData.creator.uniqueID !== user.uniqueID"
         >Leave Server</div>
         <div
+          class="menu-button"
+          @click="showSettings()"
+          v-if="ServerData.creator.uniqueID === user.uniqueID"
+        >Server Settings</div>
+        <!-- <div
           class="menu-button warn"
           @click="leaveServer(ServerData.server_id)"
           v-if="ServerData.creator.uniqueID === user.uniqueID"
-        >Delete Server</div>
+        >Delete Server</div> -->
       </div>
     </div>
     <div ref="container">
@@ -53,6 +58,10 @@ export default {
     };
   },
   methods: {
+    showSettings() {
+      this.showContextMenu = false;
+      this.$store.dispatch('setServerSettings', {serverID: this.ServerData.server_id})
+    },
     createInvite(serverID) {
       this.showContextMenu = false;
       this.$store.dispatch("setServerIDContextMenu", serverID);
diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue
index 3963b72..f0bc833 100644
--- a/src/components/app/Tabs/Servers.vue
+++ b/src/components/app/Tabs/Servers.vue
@@ -94,6 +94,8 @@ export default {
     position: absolute;
     background-color: rgba(39, 39, 39, 0.97);
     right: 0;
+    bottom: 0;
+    height: calc(100% - 40px);
   }
 }
 
diff --git a/src/services/ServerService.js b/src/services/ServerService.js
index 04a1a78..0fc3319 100644
--- a/src/services/ServerService.js
+++ b/src/services/ServerService.js
@@ -7,6 +7,9 @@ export default {
   getChannels(serverID) {
     return wrapper(instance().get(`/server/channels/${serverID}`));
   },
+  createChannel(serverID, name) {
+    return wrapper(instance().put(`/server/${serverID}/channel`, {name}));
+  },
   postInvite (serverID) {
     return wrapper (instance().post(`/server/${serverID}/invite`))
   },
diff --git a/src/store/modules/popoutsModule/popoutsModule.js b/src/store/modules/popoutsModule/popoutsModule.js
index b481acf..58abb5c 100644
--- a/src/store/modules/popoutsModule/popoutsModule.js
+++ b/src/store/modules/popoutsModule/popoutsModule.js
@@ -21,6 +21,11 @@ const state = {
   settings: false,
   GDLinkMenu: false,
   addServer: false,
+
+  serverSettings:{
+    serverID: null,
+    index: null
+   } 
 }
 
 const getters = {
@@ -30,6 +35,9 @@ const getters = {
 }
 
 const actions = {
+  setServerSettings({commit}, {serverID, index}){
+    commit('setServerSettings', {serverID, index})
+  },
   setUserInformationPopout({commit}, id){
     commit('setUserInformationPopout', id)
   },
@@ -48,6 +56,9 @@ const actions = {
 }
 
 const mutations = {
+  setServerSettings(state, {serverID, index}){
+    Vue.set(state, 'serverSettings', {serverID, index});
+  },
   setUserInformationPopout(state, id) {
     Vue.set(state, 'userInformationPopoutID', id)
   },
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index 47da6fd..acca08d 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -17,13 +17,14 @@ const config = [
     version: 4.8,
     title: "Server Members Status and new Logo!",
     shortTitle: "",
-    date: "1/06/2019",
+    date: "08/07/2019",
     headColor: "rgba(0, 156, 170, 0.77)",
     new: [
       "Nertivia has a new cat logo! (Thanks to Fullipsp for the design!)",
       "You can now see online status of server members!",
       "You can now click on links that start with 'http'",
     ],
+    fix: ['Fixed a bug where when creating a server, a reload is required to show yourself in the server members list.'],
     next: ["Create multiple channels in a server."],
     msg: `You might be wondering, where did the official Nertivia server go? Well, I accidentally deleted it :/ sorry. Here's the new one though! <a style="color: #00b6ff;" href="http://nertivia.supertiger.tk/invites/Db3p5n">http://nertivia.supertiger.tk/invites/Db3p5n</a>`
   },
diff --git a/src/views/App.vue b/src/views/App.vue
index 7e0266c..af01749 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -25,6 +25,10 @@
               <i class="material-icons">rss_feed</i>
               Server Browser
             </div>
+            <!-- <div :class="`tab ${currentTab === 4 ? 'selected' : ''}`" @click="switchTab(4)">
+              <i class="material-icons">info</i>
+              Ad
+            </div> -->
           </div>
           <div class="drag-area" v-if="isElectron"></div>
           <electron-frame-buttons v-if="isElectron"/>