mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-16 04:51:16 +00:00
survey can now be saved in the database
This commit is contained in:
supertiger1234
parent
d44845ed20
commit
ab94ce30bb
6 changed files with 249 additions and 116 deletions
|
|
@ -46,10 +46,14 @@ export default {
|
|||
this.opened = false;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
updateItems() {
|
||||
this.selected = null;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
updateItems() {
|
||||
this.$emit("change", null);
|
||||
this.selected = null;
|
||||
let newArr = [];
|
||||
for (let index = 0; index < this.items.length; index++) {
|
||||
let element = this.items[index];
|
||||
|
|
@ -91,6 +95,11 @@ export default {
|
|||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.box:hover {
|
||||
background: rgba(73, 73, 73, 0.863);
|
||||
}
|
||||
|
||||
.selected {
|
||||
|
|
@ -105,10 +114,11 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
background: rgba(24, 24, 24, 0.945);
|
||||
background: rgba(49, 49, 49, 0.945);
|
||||
max-height: 200px;
|
||||
width: 220px;
|
||||
overflow: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
|
|
@ -117,7 +127,7 @@ export default {
|
|||
transition: 0.3s;
|
||||
}
|
||||
.item:hover {
|
||||
background: rgba(15, 15, 15, 0.726);
|
||||
background: rgb(65, 65, 65);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
|
|
@ -127,6 +137,7 @@ export default {
|
|||
}
|
||||
.emoji {
|
||||
margin-right: 5px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,57 +33,7 @@
|
|||
<div class="option red" @click="logout">Logout</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<i class="material-icons">error</i>
|
||||
Take Survey
|
||||
</div>
|
||||
<div class="notice">Note: Everyone will be able to see your survey in your profile.</div>
|
||||
|
||||
<div class="survey">
|
||||
<!-- name -->
|
||||
<div>
|
||||
<div class="survey-title">What's your name?</div>
|
||||
<input
|
||||
class="survey-input"
|
||||
v-model="surveySelectedItems.name"
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
>
|
||||
</div>
|
||||
<!-- Gender -->
|
||||
<div class="survey-box">
|
||||
<drop-down
|
||||
name="What is your gender?"
|
||||
v-model="surveySelectedItems.gender"
|
||||
:items="surveyItems.gender"
|
||||
/>
|
||||
</div>
|
||||
<!-- Age -->
|
||||
<div class="survey-box">
|
||||
<drop-down
|
||||
name="What is your age?"
|
||||
v-model="surveySelectedItems.age"
|
||||
:items="surveyItems.age"
|
||||
/>
|
||||
</div>
|
||||
<!-- Continent -->
|
||||
<div class="survey-box">
|
||||
<drop-down
|
||||
name="Pick a continent"
|
||||
v-model="surveySelectedItems.continent"
|
||||
:items="surveyItems.continents"
|
||||
/>
|
||||
</div>
|
||||
<!-- Countries -->
|
||||
<div class="survey-box">
|
||||
<drop-down
|
||||
name="Pick a country"
|
||||
v-if="surveySelectedItems.continent != null"
|
||||
v-model="surveySelectedItems.countries"
|
||||
:items="filterCountry"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<survey />
|
||||
<div class="alert-outer" v-if="alert.show">
|
||||
<div class="alert">
|
||||
<div class="alert-title">Error</div>
|
||||
|
|
@ -97,9 +47,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import surveyItems from "@/utils/surveyItems.js";
|
||||
|
||||
import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
|
||||
import DropDown from "@/components/app/SettingsPanels/DropDownTemplate.vue";
|
||||
import Survey from "@/components/app/SettingsPanels/survey.vue";
|
||||
import AvatarUpload from "@/services/AvatarUpload.js";
|
||||
import config from "@/config.js";
|
||||
import { bus } from "@/main";
|
||||
|
|
@ -109,18 +59,10 @@ import { mapState } from "vuex";
|
|||
export default {
|
||||
components: {
|
||||
ProfilePicture,
|
||||
DropDown
|
||||
Survey
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
surveyItems,
|
||||
surveySelectedItems: {
|
||||
name: "",
|
||||
gender: null,
|
||||
age: null,
|
||||
continent: null,
|
||||
countries: null
|
||||
},
|
||||
alert: {
|
||||
content: "",
|
||||
show: false
|
||||
|
|
@ -128,6 +70,7 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
onProgress(percent) {
|
||||
//update vue
|
||||
console.log("Avatar upload progress: ", percent);
|
||||
|
|
@ -178,16 +121,6 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapState("settingsModule", ["GDriveLinked"]),
|
||||
filterCountry() {
|
||||
const selectedContinentIndex = this.surveySelectedItems.continent;
|
||||
const selectedContinent = this.surveyItems.continents[
|
||||
selectedContinentIndex
|
||||
];
|
||||
const code = selectedContinent.code;
|
||||
return this.surveyItems.countries.filter(element => {
|
||||
return element.code == code;
|
||||
});
|
||||
},
|
||||
user() {
|
||||
return this.$store.getters.user;
|
||||
},
|
||||
|
|
@ -198,44 +131,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.notice {
|
||||
color: grey;
|
||||
font-size: 15px;
|
||||
margin-top: 20px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.survey-title {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.survey {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
margin-top: 10px;
|
||||
flex-flow: row wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.survey-input {
|
||||
height: 24px;
|
||||
padding: 10px;
|
||||
background: rgba(61, 61, 61, 0.863);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin-left: 25px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.title .material-icons {
|
||||
color: cyan;
|
||||
margin-right: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
218
src/components/app/SettingsPanels/survey.vue
Normal file
218
src/components/app/SettingsPanels/survey.vue
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
<template>
|
||||
<div class="survey">
|
||||
<div class="title">
|
||||
<i class="material-icons">error</i>
|
||||
Take Survey
|
||||
</div>
|
||||
<div class="notice">Note: Everyone will be able to see your survey in your profile.</div>
|
||||
<div class="survey-inner">
|
||||
<!-- name -->
|
||||
<div class="survey-box">
|
||||
<div class="survey-title">What's your name?</div>
|
||||
<input class="survey-input" v-model="selected.name" type="text" placeholder="Name">
|
||||
</div>
|
||||
<!-- Gender -->
|
||||
<div class="survey-box">
|
||||
<drop-down
|
||||
name="What is your gender?"
|
||||
v-model="selected.gender"
|
||||
:items="surveyItems.gender"
|
||||
/>
|
||||
</div>
|
||||
<!-- Age -->
|
||||
<div class="survey-box">
|
||||
<drop-down name="What is your age?" v-model="selected.age" :items="surveyItems.age"/>
|
||||
</div>
|
||||
<!-- Continent -->
|
||||
<div class="survey-box">
|
||||
<drop-down
|
||||
name="Pick a continent"
|
||||
v-model="selected.continent"
|
||||
:items="surveyItems.continents"
|
||||
/>
|
||||
</div>
|
||||
<!-- Countries -->
|
||||
<div class="survey-box">
|
||||
<drop-down
|
||||
name="Pick a country"
|
||||
v-if="selected.continent != null"
|
||||
v-model="selected.country"
|
||||
:items="filterCountry"
|
||||
/>
|
||||
</div>
|
||||
<!-- About me -->
|
||||
<div class="survey-box">
|
||||
<div class="survey-title">About me (Formatting allowed)</div>
|
||||
<textarea
|
||||
class="survey-input textarea"
|
||||
v-model="selected.about_me"
|
||||
placeholder="Hobbies, games, animals"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="survey-warning" v-if="surveyErrorMessage">{{surveyErrorMessage}}</div>
|
||||
<div class="survey-valid" v-if="surveyValidMessage">{{surveyValidMessage}}</div>
|
||||
<div class="button" @click="surveySubmitButton">Save</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import surveyItems from "@/utils/surveyItems.js";
|
||||
import DropDown from "@/components/app/SettingsPanels/DropDownTemplate.vue";
|
||||
import userService from "@/services/userService.js";
|
||||
export default {
|
||||
components: { DropDown },
|
||||
data() {
|
||||
return {
|
||||
surveyItems,
|
||||
surveyErrorMessage: null,
|
||||
surveyValidMessage: null,
|
||||
selected: {
|
||||
name: "",
|
||||
gender: null,
|
||||
age: null,
|
||||
continent: null,
|
||||
country: null,
|
||||
about_me: ""
|
||||
}
|
||||
};
|
||||
},
|
||||
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) {
|
||||
this.surveyErrorMessage =
|
||||
"Make sure you select / fill in all fields!";
|
||||
return;
|
||||
}
|
||||
}
|
||||
//checks if all values are not null
|
||||
if ( this.selected.name.trim() === "" || this.selected.about_me.trim() === "") {
|
||||
this.surveyErrorMessage = "Make sure you select / fill in all fields!";
|
||||
return;
|
||||
}
|
||||
this.surveyValidMessage = "Saving..."
|
||||
//gets the country index after unfiltering.
|
||||
const selectedCountryName = this.filterCountry[this.selected.country].name;
|
||||
const countryIndex = this.surveyItems.countries.findIndex(el => el.name == selectedCountryName);
|
||||
|
||||
|
||||
const { ok, error, result } = await userService.setSurvey({
|
||||
name: this.selected.name,
|
||||
gender: this.selected.gender,
|
||||
age: this.selected.age,
|
||||
continent: this.selected.continent,
|
||||
country: countryIndex,
|
||||
about_me: this.selected.about_me
|
||||
});
|
||||
if (ok) {
|
||||
this.surveyValidMessage = "Saved!"
|
||||
} else {
|
||||
this.surveyValidMessage = null;
|
||||
this.surveyErrorMessage = error.response.data.message
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filterCountry() {
|
||||
const selectedContinentIndex = this.selected.continent;
|
||||
const selectedContinent = this.surveyItems.continents[
|
||||
selectedContinentIndex
|
||||
];
|
||||
const code = selectedContinent.code;
|
||||
return this.surveyItems.countries.filter(element => {
|
||||
return element.code == code;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.notice {
|
||||
color: grey;
|
||||
font-size: 15px;
|
||||
margin-top: 20px;
|
||||
margin-left: 30px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.survey-title {
|
||||
margin-top: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
.survey, .survey-inner {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 50px;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.survey-warning {
|
||||
color: red;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.survey-valid{
|
||||
color: green;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.survey .button {
|
||||
color: white;
|
||||
background: rgb(27, 114, 255);
|
||||
border-radius: 5px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
.survey .button:hover {
|
||||
background: rgb(0, 98, 255);
|
||||
}
|
||||
.survey-input {
|
||||
height: 24px;
|
||||
padding: 10px;
|
||||
background: rgba(61, 61, 61, 0.863);
|
||||
margin-top: 5px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.survey-input:hover {
|
||||
background: rgba(73, 73, 73, 0.863);
|
||||
}
|
||||
.survey-input.textarea {
|
||||
resize: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
border: none;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin-left: 25px;
|
||||
font-size: 20px;
|
||||
user-select: none;
|
||||
}
|
||||
.title .material-icons {
|
||||
color: cyan;
|
||||
margin-right: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -401,7 +401,8 @@ export default {
|
|||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 390px;
|
||||
max-width: 390px;
|
||||
width: calc(100% - 50px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 99999;
|
||||
|
|
@ -459,13 +460,13 @@ export default {
|
|||
align-content: center;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
margin-top: 10px;
|
||||
background: rgb(161, 161, 161);
|
||||
border-radius: 5px;
|
||||
transition: 0.3s;
|
||||
overflow: auto;
|
||||
}
|
||||
.tabs img {
|
||||
height: 20px;
|
||||
|
|
@ -489,11 +490,12 @@ export default {
|
|||
flex-direction: column;
|
||||
transition: 0.1s;
|
||||
height: 35px;
|
||||
width: 325px;
|
||||
width: 32px;
|
||||
overflow: hidden;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
|
|
|
|||
|
|
@ -3,5 +3,8 @@ import {instance, wrapper} from './Api';
|
|||
export default {
|
||||
get (uniqueID) {
|
||||
return wrapper(instance().get(`user/${uniqueID}`))
|
||||
}
|
||||
},
|
||||
setSurvey(data) {
|
||||
return wrapper(instance().put('/user/survey', data));
|
||||
}
|
||||
}
|
||||
|
|
@ -208,6 +208,9 @@ body {
|
|||
color: #383838;
|
||||
height: 100%;
|
||||
}
|
||||
textarea {
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
Loading…
Reference in a new issue