aida_front/src/views/feedbackSurvey.vue

<template>
    <div class="feedbackSurvey">
        <main id="main">
            <h1 id="title">AiDA 3.0 Feedback Survey</h1>
            <p id="description">Please take the survey</p>
            <div id="survey-form">
                <h2 class="section-title">Personal Information</h2>
                <div class="section w40">
                    <label for="name"
                        >Name:<span class="fontColor">*</span></label
                    >
                    <input
                        type="text"
						v-model="userName"
                        placeholder="Enter your name"
                    />
                </div>
                <div class="section w40">
                    <label for="gender"
                        >Gender:<span class="fontColor">*</span></label
                    >
					<select name="dropdown" id="dropdown" v-model="gender">
                        <option selected value='Female'>Female</option>
                        <option value='Male'>Male</option>
                    </select>
                    <!-- <input
                        type="text"
						v-model="gender"
                        placeholder="Enter your gender"
                        required
                    /> -->
                </div>
                <div class="section w40">
                    <label for="occupation"
                        >Occupation:<span class="fontColor">*</span></label
                    >
					
                    <input
                        type="text"
						v-model="occupation"
                        placeholder="Enter your occupation"
                        required
                    />
                </div>
                <!-- <div class="section w40">
                    <label for="country"
                        >Country of Origin:<span class="fontColor" >*</span
                        ></label
                    >
                    <input
                        type="text"
                        id="country"
                        name="country"
                        placeholder="Enter your country of origin"
                        required
                    />
                </div> -->
				<div class="section w40">
                    <label for="dropdown">Country of Origin:<span class="fontColor" >*</span></label>
                    <select name="dropdown" id="dropdown" v-model="country" required>
                        <option disabled selected value> Select an option </option>
						<option v-for="item in CountryList" :key="item" :value="item">{{ item }}</option>
                    </select>
                </div>
                <div class="section">
                    <label for="email"
                        >Email:<span class="fontColor">*</span></label
                    >
                    <input
                        type="email"
						v-model="email"
                        placeholder="Enter your email"
                        required
                    />
                </div>
                <div class="section">
                    <p>Age Group:<span class="fontColor">*</span></p>
                    <label>
                        <input
                            type="radio"
                            value="below20"
                            name="age"
							v-model="age"
                            
                        />
                        Below 20
                    </label>
                    <label>
                        <input checked type="radio" value="20-30" v-model="age" name="age" />
                        20-30
                    </label>
                    <label>
                        <input type="radio" value="30-40" v-model="age" name="age" />
                        30-40
                    </label>
                    <label>
                        <input type="radio" value="40+" v-model="age" name="age" />
                        40+
                    </label>
                </div>
                <h2 class="section-title">Survey Questions</h2>
                
                <!-- <div class="section">
                    <p>Do you like this survey?</p>
                    <label>
                        <input
                            type="radio"
                            value="yes"
                            name="radio-question"
                            checked
                        />
                        Yes
                    </label>
                    <label>
                        <input type="radio" value="no" name="radio-question" />
                        No
                    </label>
                    <label>
                        <input
                            type="radio"
                            value="maybe"
                            name="radio-question"
                        />
                        Maybe
                    </label>
                </div> -->
                <div class="section">
                    <p>
                        1. How has AiDA been helpful to you? (You can choose
                        more than one answer):<span class="fontColor">*</span>
                    </p>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="1"
							v-model="helpful"
                        />
                        Easy to learn and use
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="2"
							v-model="helpful"
                        />
                        Easy to get trend information
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="3"
							v-model="helpful"
                        />
                        Lots of creative design proposals
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="4"
							v-model="helpful"
                        />
                        The AIGC functions for moodboard is helpful
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="5"
							v-model="helpful"
                        />
                        The AIGC functions for design sketches is helpful
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="6"
							v-model="helpful"
                        />
                        Easy to select the right color
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="7"
							v-model="helpful"
                        />
                        The Chatbot function is helpful
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="8"
							v-model="helpful"
                        />
                        The print position function is helpful
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="9"
							v-model="helpful"
                        />
                        The drawing function is helpful
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="10"
							v-model="helpful"
                        />
                        The export function is useful
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="11"
							v-model="helpful"
                        />
                        Easy to edit the design
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            class="marTop1"
							ref="helpfulOthers"
                        />
                        <span> Others:</span>
                        <textarea
                            name="comments"
                            id="text-area"
                            placeholder="Please enter..."
							v-model="othersHelpful"
							@input="()=>helpfulOthers.checked = true"
                        ></textarea>
                    </label>
                </div>
                <div class="section">
                    <p>
                        2. What do you think AiDA should improve? (you could choose
                        more than one answer):<span class="fontColor">*</span>
                    </p>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="1"
							v-model="improve"
                        />
                        Proposed designs are boring, need more interesting
                        designs
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="2"
							v-model="improve"
                        />
                        Difficult to make changes on design
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="3"
							v-model="improve"
                        />
                        Only 2D output, no 3D results
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="4"
							v-model="improve"
                        />
                        Difficult to apply keywords for AIGC generation
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="5"
							v-model="improve"
                        />
                        Clothing is not in the right proportion
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="6"
							v-model="improve"
                        />
                        Not compatible with pattern making solutions
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="7"
							v-model="improve"
                        />
                        Improved user interface for better navigation
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="8"
							v-model="improve"
                        />
                        Lack of responsive customer support
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="9"
							v-model="improve"
                        />
                        Insufficient tutorial or guidance for new users
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="10"
							v-model="improve"
                        />
                        Limited personalization options for designs
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            class="marTop1"
							ref="improvelOthers"
                        />
                        <span> Others:</span>
                        <!-- <input
							class="others-input"
							type="text"
						/> -->
                        <textarea
                            name="comments"
                            id="text-area"
							v-model="othersImprovel"
                            placeholder="Please enter..."
							@input="()=>improvelOthers.checked = true"
                        ></textarea>
                    </label>
                </div>
                <div class="section">
                    <p>3. Will you subscribe to AiDA 3.0?<span class="fontColor">*</span></p>
                    <label>
                        <input
                            type="radio"
                            value="yes"
							v-model="isSubscribe"
                            name="radio-question"
                        />
                        Yes
                    </label>
                    <label>
                        <input v-model="isSubscribe" type="radio" value="no" name="radio-question" />
                        No
                    </label>
                </div>
                <div class="section" v-show="isSubscribe == 'no'">
                    <p>If NO, please share why:<span class="fontColor">*</span></p>
                    <label>
                        <input
                            type="checkbox"
							value="Not useful"
                            name="reasonForNotSubscribe"
							v-model="reasonForNotSubscribe"
                        />
                        Not useful
                    </label>
                    <label>
                        <input type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
                        Too expensive
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="reasonForNotSubscribe"
							ref="isSubscribeCauseOthers"
                            class="marTop1"
                        />
                        <span> Others:</span>
                        <textarea
                            name="comments"
                            id="text-area"
							v-model="othersIsSubscribeCause"
                            placeholder="Please enter..."
							@input="()=>isSubscribeCauseOthers.checked = true"
                        ></textarea>
                    </label>
                </div>
                <div class="section">
                    <p>
                        Are you currently using any design tools? Please
                        list:
                    </p>
                    <textarea
                        name="comments"
                        id="text-area"
						v-model="designTools"
                        placeholder="Please enter..."
                    ></textarea>
                </div>
                <div class="section">
                    <button id="submit" @click="setSubmit">Submit</button>
                </div>
            </div>
        </main>
    </div>
</template>

<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
export default defineComponent({
    setup() {
        const feedbackData:any = reactive({
			userName:'',
			gender:'Female',
			occupation:'',
			country:'',
			email:'',
			age:'20-30',
			helpful:[],
			improve:[],
			isSubscribe:'',
			reasonForNotSubscribe:[],
			designTools:'',
		});
		let refList:any = reactive({
			helpfulOthers:{},
			improvelOthers:{},
			isSubscribeCauseOthers:{},
		})
		let othersHelpful = ref('')
		let othersImprovel = ref('')
		let othersIsSubscribeCause = ref()
		let CountryList = [
			"Albania",
			"Algeria",
			"Andorra",
			"Angola",
			"Antigua and Barbuda",
			"Argentina",
			"Armenia",
			"Australia",
			"Austria",
			"Azerbaijan",
			"Bahamas",
			"Bangladesh",
			"Barbados",
			"Belgium",
			"Belize",
			"Benin",
			"Bhutan",
			"Bolivia",
			"Bosnia and Herzegovina",
			"Botswana",
			"Brazil",
			"Brunei",
			"Bulgaria",
			"Burkina Faso",
			"Cabo Verde",
			"Canada",
			"China",
			"Chile",
			"Colombia",
			"Comoros",
			"Congo",
			"Costa Rica",
			"Côte d'Ivoire",
			"Croatia",
			"Cyprus",
			"Czech Republic",
			"Denmark",
			"Djibouti",
			"Dominica",
			"Dominican Republic",
			"Ecuador",
			"El Salvador",
			"Estonia",
			"Fiji",
			"Finland",
			"France",
			"Gabon",
			"Gambia",
			"Georgia",
			"Germany",
			"Ghana",
			"Greece",
			"Grenada",
			"Guatemala",
			"Guinea",
			"Guinea-Bissau",
			"Guyana",
			"Haiti",
			"Holy See",
			"Honduras",
			"Hong Kong, China",
			"Hungary",
			"Iceland",
			"India",
			"Indonesia",
			"Iraq",
			"Ireland",
			"Israel",
			"Italy",
			"Jamaica",
			"Japan",
			"Jordan",
			"Kazakhstan",
			"Kenya",
			"Kiribati",
			"Kuwait",
			"Kyrgyzstan",
			"Latvia",
			"Lebanon",
			"Lesotho",
			"Liberia",
			"Liechtenstein",
			"Lithuania",
			"Luxembourg",
			"Madagascar",
			"Malawi",
			"Malaysia",
			"Maldives",
			"Mali",
			"Malta",
			"Marshall Islands",
			"Mauritania",
			"Mauritius",
			"Mexico",
			"Micronesia",
			"Moldova",
			"Monaco",
			"Mongolia",
			"Montenegro",
			"Morocco",
			"Mozambique",
			"Myanmar",
			"Namibia",
			"Nauru",
			"Nepal",
			"Netherlands",
			"New Zealand",
			"Nicaragua",
			"Niger",
			"Nigeria",
			"North Macedonia",
			"Norway",
			"Oman",
			"Pakistan",
			"Palau",
			"Palestine",
			"Panama",
			"Papua New Guinea",
			"Paraguay",
			"Peru",
			"Philippines",
			"Poland",
			"Portugal",
			"Qatar",
			"Romania",
			"Rwanda",
			"Saint Kitts and Nevis",
			"Saint Lucia",
			"Saint Vincent and the Grenadines",
			"Samoa",
			"San Marino",
			"Sao Tome and Principe",
			"Senegal",
			"Serbia",
			"Seychelles",
			"Sierra Leone",
			"Singapore",
			"Slovakia",
			"Slovenia",
			"Solomon Islands",
			"South Africa",
			"South Korea",
			"Spain",
			"Sri Lanka",
			"Suriname",
			"Sweden",
			"Switzerland",
			"Taiwan, China",
			"Tanzania",
			"Thailand",
			"Timor-Leste",
			"Togo",
			"Tonga",
			"Trinidad and Tobago",
			"Tunisia",
			"Turkey",
			"Tuvalu",
			"Uganda",
			"Ukraine",
			"United Arab Emirates",
			"United Kingdom",
			"United States of America",
			"Uruguay",
			"Vanuatu",
			"Zambia"
		]
        let setSubmit = () => {
			let state = false
			let skipList = ['designTools','reasonForNotSubscribe']
			let data = JSON.parse(JSON.stringify(feedbackData))
			if(refList.helpfulOthers.checked && othersHelpful.value){
				data.helpful.push(othersHelpful.value)
			}
			if(refList.improvelOthers.checked && othersImprovel.value){
				data.improve.push(othersImprovel.value)
			}
			if(refList.isSubscribeCauseOthers.checked && othersIsSubscribeCause.value){
				data.reasonForNotSubscribe.push(othersIsSubscribeCause.value)
			}
			for (const key in data) {
				if(skipList.indexOf(key) > -1){
					continue
				}
				let keyList = ['helpful','improve']
				if(keyList.indexOf(key) > -1){
					if(data[key].length == 0){
						state = true
						break
					}
				}else if(data.isSubscribe == 'no' && data.reasonForNotSubscribe.length == 0){
					state = true
					break
				}else{
					if(data[key] == ''){
						state = true
						break
					}
				}
			}

			if(state){
				message.info('Please check that all the * numbers have been filled in')
				return
			}
            Modal.confirm({
                title: `Please confirm your email address to ensure it is correct. ${data.email}`,
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					data.language = 'EN'
					submit(JSON.stringify(data))
                }
            });
        };
		let submit = (value:any)=>{
			Https.axiosPost(Https.httpUrls.questionnaire, value).then(
				(rv) => {
					alert('Submit Successfully!')
				}
			).catch(res=>{
			});
		}
	
        return {
            ...toRefs(feedbackData),
            ...toRefs(refList),
			othersHelpful,
			othersImprovel,
			othersIsSubscribeCause,
			CountryList,
            setSubmit,
        };
    },

    data() {
        return {
            // moodTemplateId: "", //模板id
        };
    },
    mounted() {},
    methods: {},
});
</script>

<style lang="less" scoped>
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
.feedbackSurvey {
    font-family: "Quicksand", sans-serif;
    text-align: center;
    line-height: 1.5;
    // background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
    margin: 1rem;
	height: 100%;
	overflow-y: auto;
	#main{
		background: linear-gradient(45deg, #eee4f3, #f3f4e6);

	}
    #title {
        font-size: 6rem;
        margin: 0;
		font-weight: 900;
    }

    #description {
        font-size: 2.8rem;
        font-style: italic;
    }

    #survey-form {
        position: relative;
        background: rgba(255, 255, 255, 0.2);
        width: 60%;
        left: 50%;
        transform: translateX(-50%);
        text-align: left;
        border-radius: 15px;
        padding: 3rem;
        box-shadow: -1px 1px 5px 0.5px;
        font-size: 2.4rem;
        transition: width 1s ease;
        display: flex;
        flex-wrap: wrap;
		justify-content: space-between;
    }

    @media (max-width: 760px) {
        form {
            width: 75%;
        }
    }
    h2 {
        width: 100%;
		font-weight: 900;
    }
    .section {
        display: flex;
        flex-direction: column;
        margin: 1rem;
        width: 100%;
    }
    .w40 {
        width: 40%;
    }
	.fontColor{
		color: rgb(255, 2, 2);
	}
	p{
		font-size: 2.8rem;
	}
    p,
    label {
        font-weight: bold;
        margin: 0;
        margin-left: 5px;
    }
	
    input,
    #dropdown {
        border: none;
        border-radius: 5px;
        padding: 10px;
        outline: 0;
    }

    input:focus,
    #dropdown:focus {
        border: 2px solid rgb(173, 173, 173);
    }
	input,select{
		height: 7rem;	
	}
    input,
    button,
    select,
    textarea {
		cursor: pointer;
        font-family: inherit;
        font-size: inherit;
    }

    input[type="radio"],
    input[type="checkbox"] {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        vertical-align: middle;
        margin: 0;
    }
	label{
		vertical-align: baseline;
		cursor: pointer;
		.others-input{
			background: rgba(255, 255, 255, 0);
			border-top: none;
			border-right: none;
			border-left: none;
			border-radius: 0;
			border-bottom: 2px solid;
		}
		.others-input:focus{
			border: none;
			border-bottom: 2px solid;
		}
		span{
			vertical-align: top;
		}
		textarea{
			width: 80%;
			vertical-align: top;
			margin-left: 1rem;

		}
	}
    textarea {
        min-height: 75%;
		max-height: 250px;
        width: 100%;
        resize: vertical;
        border: none;
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
    }

    #submit {
        background: green;
		background: #39215b;

        border: none;
        border-radius: 10px;
        color: white;
        font-size: 3rem;
        transition: all 0.3s ease-in;
    }

    #submit:hover {
        background: darkgreen;
		background: #543087;
    }
}
</style>