finished survey and profile panel

package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.5",
     "@vue/cli-plugin-eslint": "^3.0.5",
-    "@vue/cli-service": "^3.5.1",
+    "@vue/cli-service": "^3.6.0",
     "@vue/eslint-plugin": "^4.2.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",

src/components/app/MyMiniInformation.vue

@@ -13,7 +13,7 @@
         </transition>
       </div>
     </div>
-    <div class="setting-icon survay-button" @click="openSettings">
+    <div class="setting-icon survay-button" v-if="!user.survey_completed || user.survey_completed === false" @click="openSurvey">
       <div class="survay-inner">
         <i class="material-icons">error</i>
       </div>
@@ -44,10 +44,15 @@ export default {
     }
   },
   methods: {
-
     closeMenus() {
       this.status.isPoppedOut = false;
     },
+    openSurvey(){
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "surveyPopout",
+        visibility: true
+      });
+    },
     async changeStatus (status){
       // emit to server to change their status.
       console.log(status)

src/components/app/Popouts.vue

@@ -7,15 +7,17 @@
       <image-large-preview key="ilp" v-if="popouts.ImagePreviewURL"/>
       <drag-drop-file-upload-dialog key="ddfud" v-if="showUploadDrapDrop"/>
       <user-information-popout key="uip" v-if="popouts.userInformationPopoutID"/>
+      <take-survey-popout key="tsp" v-if="popouts.surveyPopout"/>
     </transition-group>
   </div>
 </template>
 
 <script>
-import { bus } from "@/main";
+
 //popouts
 import userInformationPopout from "@/components/app/userInformationPopout.vue";
 import Settings from "@/components/app/Settings.vue";
+import TakeSurveyPopout from "@/components/app/TakeSurveyPopout.vue";
 import uploadDialog from "@/components/app/uploadDialog.vue";
 import GDriveLinkMenu from "@/components/app/GDriveLinkMenu.vue";
 import imageLargePreview from "@/components/app/imageLargePreview.vue";
@@ -28,7 +30,8 @@ export default {
     GDriveLinkMenu,
     userInformationPopout,
     DragDropFileUploadDialog,
-    imageLargePreview
+    imageLargePreview,
+    TakeSurveyPopout
   },
   data() {
     return {

src/components/app/SettingsPanels/DropDownTemplate.vue

@@ -49,6 +49,9 @@ export default {
   watch: {
     updateItems() {
 			this.selected = null;
+    },
+    itemSelected(){
+      this.selected = this.itemSelected;
     }
   },
   computed: {

src/components/app/SettingsPanels/survey.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="survey">
+  <div class="survey" v-show="previousLoaded">
     <div class="title">
       <i class="material-icons">error</i>
       Take Survey
@@ -64,9 +64,10 @@ export default {
   components: { DropDown },
   data() {
     return {
-      surveyItems,
+      surveyItems: Object.assign({},surveyItems),
       surveyErrorMessage: null,
       surveyValidMessage: null,
+      previousLoaded: false,
       selected: {
         name: "",
         gender: null,
@@ -79,12 +80,11 @@ export default {
   },
   methods: {
     async surveySubmitButton() {
-
       this.surveyValidMessage = null;
       this.surveyErrorMessage = null;
       //checks if all drop boxes are not null.
       for (let item in this.selected) {
-        if (this.selected[item] === null) {
+        if (this.selected[item] === null && item !== "country") {
           this.surveyErrorMessage =
             "Make sure you select / fill in all fields!";
           return;
@@ -96,10 +96,12 @@ export default {
         return;
       }
       this.surveyValidMessage = "Saving..."
-			//gets the country index after unfiltering.
+      //gets the country index after unfiltering.
-      const selectedCountryName = this.filterCountry[this.selected.country].name;
+      let countryIndex = undefined;
-      const countryIndex = this.surveyItems.countries.findIndex(el => el.name == selectedCountryName);
+      if (this.filterCountry[this.selected.country]) {
-
+        const selectedCountryName = this.filterCountry[this.selected.country].name;
+        countryIndex = this.surveyItems.countries.findIndex(el => el.name == selectedCountryName);
+      }
 
       const { ok, error, result } = await userService.setSurvey({
         name: this.selected.name,
@@ -117,6 +119,26 @@ export default {
 			}
     }
   },
+  async mounted(){
+    const {ok, error, result} = await userService.getSurvey();
+    if (ok) {
+      this.selected.continent = result.data.result.continent
+        this.selected.age = result.data.result.age
+        this.selected.name = result.data.result.name
+        this.selected.about_me = result.data.result.about_me
+        this.selected.gender = result.data.result.gender
+        //filter the country
+        if(result.data.result.country) {
+          setTimeout(() => {
+            const continentCode = surveyItems.continents[this.selected.continent].code;
+            const filter = surveyItems.countries.filter(e => e.code === continentCode);
+            const countryName = surveyItems.countries[result.data.result.country].name;
+            this.selected.country = filter.findIndex(e => e.name === countryName);
+          }, 500);
+        }
+    }
+    this.previousLoaded = true;
+  },
   computed: {
     filterCountry() {
       const selectedContinentIndex = this.selected.continent;
@@ -124,8 +146,9 @@ export default {
         selectedContinentIndex
       ];
       const code = selectedContinent.code;
+      
       return this.surveyItems.countries.filter(element => {
-        return element.code == code;
+        return element.code == code || !element.code;
       });
     }
   }

src/components/app/TakeSurveyPopout.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="darken-background">
+    <div class="box">
+      <div class="survay-icon">
+        <i class="material-icons">error</i>
+      </div>
+      <div class="text">There is a survey you can complete about yourself. Would you like to take it?</div>
+      <div class="text">You can always take the survey again by going to settings.</div>
+      <div class="buttons">
+        <div class="button warning" @click="laterButtonClickEvent">Later</div>
+        <div class="button valid" @click="TakeThereClickEvent">Take Me There</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import userService from "@/services/userService.js";
+
+export default {
+  methods: {
+    close() {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "surveyPopout",
+        visibility: false
+      });
+    },
+    laterButtonClickEvent(){
+      userService.skipSurvey()
+      this.$store.dispatch('surveyCompleted')
+      this.close();
+    },
+    TakeThereClickEvent(){
+      this.close();
+      this.$store.dispatch('surveyCompleted')
+      this.$store.dispatch('setPopoutVisibility', {name: 'settings', visibility: true})
+    }
+  }
+};
+</script>
+
+
+<style scoped>
+.darken-background {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.541);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  display: flex;
+  color: white;
+}
+.box {
+  height: 330px;
+  width: 400px;
+  display: flex;
+  margin: auto;
+  background-color: rgba(43, 43, 43, 0.959);
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.507);
+  padding: 10px;
+  border-radius: 20px;
+}
+.survay-icon .material-icons{
+  color: cyan;
+  font-size: 120px;
+}
+.survay-icon {
+  margin: auto;
+  margin-top: 5px;
+}
+
+.text {
+  margin: auto;
+  text-align: center;
+}
+.buttons {
+  display: flex;
+  margin: auto;
+}
+.button {
+  padding: 10px;
+  margin: 3px;
+  background: rgb(27, 133, 255);
+  border-radius: 5px;
+  transition: 0.3s;
+  user-select: none;
+  cursor: default;
+}
+.valid {
+  background: rgba(27, 133, 255, 0.767);
+}
+.valid:hover{
+  background: rgb(27, 133, 255);
+}
+.warning {
+  background: rgba(255, 27, 27, 0.589)
+}
+.warning:hover{
+  background: rgb(255, 27, 27)
+}
+</style>
+

src/components/app/relationships/FriendsTemplate.vue

@@ -75,6 +75,11 @@ export default {
 
 
 <style scoped>
+.username{
+  width: 201px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .friend {
   color: white;
   background-color: rgba(0, 0, 0, 0.137);
@@ -135,6 +140,7 @@ export default {
   background-size: cover;
   background-repeat: no-repeat;
   transition: 0.3s;
+  flex-shrink: 0;
 }
 .information{
   margin: auto;

src/components/app/relationships/PendingTemplate.vue

@@ -50,6 +50,11 @@ export default {
 
 
 <style scoped>
+.username{
+  width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .pending-friend {
   color: white;
   background-color: rgba(0, 0, 0, 0.137);
@@ -75,6 +80,7 @@ export default {
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
+  flex-shrink: 0;
 }
 .information{
   margin: auto;

src/components/app/userInformationPopout.vue

@@ -42,10 +42,74 @@
             <div class="material-icons">block</div>Block
           </div>
         </div>
+        <div v-else class="cross"><i class="material-icons">close</i></div>
       </div>
-      <div class="about-me-box">
+      <div class="about-me-box" v-if="user && user.about_me">
-        <spinner v-if="!user"/>
+        <div class="title">About {{user.username}}</div>
-        <div class="title" v-else>About {{user.username}}</div>
+        <div class="about-me-inner">
+          <div class="about-me-detail" v-if="user.about_me.name">
+            <div class="about-me-title">
+              <div class="main-title-about-me">Name:</div>
+              <div class="emoji-about-me"></div>
+              {{user.about_me.name}}
+            </div>
+          </div>
+
+          <div class="about-me-detail" v-if="user.about_me.gender == 0 || user.about_me.gender">
+            <div class="about-me-title">
+              <div class="main-title-about-me">Gender:</div>
+              <div
+                class="emoji-about-me"
+                v-html="emojiParse(surveyItems.gender[user.about_me.gender].emoji)"
+              ></div>
+              {{surveyItems.gender[user.about_me.gender].name}}
+            </div>
+          </div>
+
+          <div class="about-me-detail" v-if="user.about_me.age == 0 || user.about_me.age">
+            <div class="about-me-title">
+              <div class="main-title-about-me">Age:</div>
+              <div
+                class="emoji-about-me"
+                v-html="emojiParse(surveyItems.age[user.about_me.age].emoji)"
+              ></div>
+              {{surveyItems.age[user.about_me.age].name}}
+            </div>
+          </div>
+
+          <div
+            class="about-me-detail"
+            v-if="user.about_me.continent == 0 || user.about_me.continent"
+          >
+            <div class="about-me-title">
+              <div class="main-title-about-me">Continent:</div>
+              <div
+                class="emoji-about-me"
+                v-html="emojiParse(surveyItems.continents[user.about_me.continent].emoji)"
+              ></div>
+              {{surveyItems.continents[user.about_me.continent].name}}
+            </div>
+          </div>
+
+          <div class="about-me-detail" v-if="user.about_me.country == 0 || user.about_me.country">
+            <div class="about-me-title">
+              <div class="main-title-about-me">Country:</div>
+              <div
+                class="emoji-about-me"
+                v-html="emojiParse(surveyItems.countries[user.about_me.country].emoji)"
+              ></div>
+              {{surveyItems.countries[user.about_me.country].name}}
+            </div>
+          </div>
+
+          <div class="about-me-detail" v-if="user.about_me.about_me">
+            <div class="about-me-title about_me">
+              <div class="main-title-about-me">About Me:</div>
+              <div class="emoji-about-me"></div>
+              <div class="about-me-format" v-html="formatAboutMe(user.about_me.about_me)"></div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -56,10 +120,14 @@ import Spinner from "@/components/Spinner.vue";
 import profilePicture from "@/components/ProfilePictureTemplate.vue";
 import userService from "@/services/userService.js";
 import relationshipService from "@/services/RelationshipService.js";
+import surveyItems from "@/utils/surveyItems.js";
+import emojiParser from "@/utils/emojiParser.js";
+import messageFormatter from "@/utils/messageFormatter.js";
 export default {
   components: { Spinner, profilePicture },
   data() {
     return {
+      surveyItems: Object.assign({}, surveyItems),
       user: null,
       avatarDomain: config.domain + "/avatars/"
     };
@@ -92,6 +160,13 @@ export default {
         uniqueID: this.uniqueID,
         channelName: this.user.username
       });
+    },
+    emojiParse(emoji) {
+      if (emoji.startsWith("<img")) return emoji;
+      return emojiParser.replaceEmojis(emoji);
+    },
+    formatAboutMe(string) {
+      return messageFormatter(string);
     }
   },
   async mounted() {
@@ -117,8 +192,19 @@ export default {
 };
 </script>
 <style scoped>
-
+.cross {
-.about-me-box{
+  margin: auto;
+  opacity: 0.1;
+}
+.cross .material-icons {
+  font-size: 150px;
+}
+.about_me {
+  flex-direction: column;
+  align-items: initial !important;
+  font-size: 15px;
+}
+.about-me-box {
   display: flex;
   flex-direction: column;
   background: rgba(31, 31, 31, 0.704);
@@ -126,6 +212,30 @@ export default {
   border-radius: 10px;
   overflow: hidden;
   margin-left: 10px;
+  overflow: auto;
+  padding-bottom: 10px;
+}
+.about-me-detail {
+  margin-top: 10px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.about-me-title {
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+.about-me-format {
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.emoji-about-me {
+  margin-left: 5px;
+  margin-right: 10px;
+}
+.main-title-about-me {
+  color: rgb(179, 179, 179);
 }
 
 .title {
@@ -229,4 +339,42 @@ export default {
 .tag {
   color: grey;
 }
+@media (max-width: 815px) {
+  .box {
+    flex-direction: column;
+    max-width: 500px;
+    width: 100%;
+    overflow: auto;
+  }
+  .about-me-box {
+    width: 100%;
+    margin-left: 0;
+    margin-top: 10px;
+    flex-shrink: 0;
+    overflow: initial;
+  }
+  .inner {
+    width: 100%;
+    flex-shrink: 0;
+    height: initial;
+  }
+  .bottom {
+    flex-shrink: 0;
+    height: initial;
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+  .bottom .button {
+    margin: 2px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    height: 100px;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    -webkit-box-flex: 0;
+    -ms-flex: none;
+    flex: 1;
+    font-size: 10px;
+  }
+}
 </style>

src/services/userService.js

@@ -4,7 +4,13 @@ export default {
   get (uniqueID) {
     return wrapper(instance().get(`user/${uniqueID}`))
   },
+  getSurvey() {
+    return wrapper(instance().get('/user/survey'));
+  },
   setSurvey(data) {
     return wrapper(instance().put('/user/survey', data));
+  },
+  skipSurvey() {
+    return wrapper(instance().delete('/user/survey/skip'));
   }
 }

src/store/modules/popoutsModule.js

@@ -13,6 +13,7 @@ const state = {
 
   userInformationPopoutID: null,
 
+  surveyPopout: false,
   dragDropFileUploadDialog: false,
   settings: false,
   GDLinkMenu: false,

src/store/modules/socketIOModule.js

@@ -118,6 +118,9 @@ const actions = {
   },
   ['socket_customEmoji:rename'](context, emoji) {
     context.dispatch('settingsModule/renameCustomEmoji', emoji)
+  },
+  ['socket_survey:completed'](context) {
+    context.dispatch('surveyCompleted');
   }
 }
 

src/store/modules/userModule.js

@@ -34,10 +34,16 @@ const actions = {
   },
   changeStatus(context, status) {
     context.commit('changeStatus', status)
+  },
+  surveyCompleted(context) {
+    context.commit('surveyCompleted')
   }
 }
 
 const mutations = {
+  surveyCompleted(context) {
+    Vue.set(state.user, "survey_completed", true)
+  },
   changeAvatar(state, avatar) {
     //changes my avatar
     Vue.set(state.user, "avatar", avatar)

src/utils/changelog.js

@@ -1,19 +1,19 @@
 const config = [
   {
     version: 1,
-    title: 'Make your own guild',
+    title: 'Profile Panel',
-    shortTitle: 'Make your guild',
+    shortTitle: 'Profile Panel',
-    date: '31/03/2019',
+    date: '21/04/2019',
     headColor: "rgba(39, 14, 204, 0.77)",
     new: [
-      'You can now make your own guild.',
       "Tabs have been added at the top of the screen.",
       "Added an option to display your messages on the right and other messages to the left.",
-      "Added users information page which allows you to block, End friendship, message someone and view their information.",
+      "Added users information page which allows you to block (Block not implemented yet), End friendship, message someone and view their information.",
-      "Replaced 'Sending' and 'Sent' with icons."
+      "Replaced 'Sending' and 'Sent' with icons.",
+      "Added a survey option to display your hobbies and age in your profile page."
     ],
     fix: ["Some formatting issues with custom emojis have been fixed."],
-    next: ['link previews.']
+    next: ['Make your own servers']
   },
   {
     title: 'Custom emojis!',

src/utils/surveyItems.js

@@ -237,6 +237,7 @@ export default {
     { name: "Mayotte", emoji: "🇾🇹", code: "AF" },
     { name: "South Africa", emoji: "🇿🇦", code: "AF" },
     { name: "Zambia", emoji: "🇿🇲", code: "AF" },
-    { name: "Zimbabwe", emoji: "🇿🇼", code: "AF" }
+    { name: "Zimbabwe", emoji: "🇿🇼", code: "AF" },
+    { emoji: "😶", name: "Rather not say" }
   ]
 };

src/views/App.vue

@@ -38,6 +38,10 @@
             </transition>
             <RightPanel/>
           </span>
+          <div class="coming-soon" v-if="currentTab > 1">
+            <div class="icon"><i class="material-icons">cached</i></div>
+            <div class="text">Coming soon!</div>
+          </div>
         </div>
       </div>
     </transition>
@@ -115,6 +119,23 @@ export default {
 
 <style scoped>
 
+.coming-soon{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.39);
+  color: white;
+}
+.coming-soon .icon{
+
+}
+.coming-soon .material-icons {
+  font-size: 100px;
+}
+
 .direct-message-tab{
   display: flex;
   width: 100%;
@@ -124,9 +145,16 @@ export default {
 
 .tabs {
   display: flex;
+  overflow-y: hidden;
+  overflow-x: auto;
+  margin-top: 5px;
+}
+.tabs::-webkit-scrollbar {
+  height: 5px;
 }
 
 .tab {
+  flex-shrink: 0;
   margin: auto;
   margin-right: 1px;
   margin-left: 1px;