|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
|
<meta http-equiv="Expires" content="0" />
|
|
|
<title>One Minute Feedback - Help Us Serve You Better！</title>
|
|
|
<style>body{font-family:Arial,sans-serif;color:#333}.text-primary{color:#b43c1a}h3,h5,p{margin:.5em 0}.header-m{background:#ad1818;color:#fff;padding:.5em}.header-pc{height:90px!important;display:flex;align-items:center;justify-content:flex-start;background:#ad1818;color:#fff;padding:0 20px}.header-pc img{position:absolute;top:0;margin-right:20px;height:104px;width:auto;border-radius:0 0 3px 3px;background-color:#fff;box-shadow:1px 1px 10px 1px rgba(77,77,77,.7);-webkit-box-shadow:1px 1px 10px 1px rgba(77,77,77,.7);-moz-box-shadow:1px 1px 10px 1px rgba(77,77,77,.7)}.header-pc h1{margin:0;margin-left:240px}.form-container{width:100%;max-width:768px;margin:0 auto;margin-top:1.5em}form.form-container{counter-reset: hq;}form.form-container h4::before {counter-increment: hq; content: counter(hq) ". ";}.question{display:flex;flex-direction:column;align-items:start;margin-bottom:10px}.question h4{position:sticky;top:0;background-color:#fff;margin-top:0;padding-top:1.33em}.question-items{display:flex;flex-direction:column;align-items:start;margin-bottom: 10px;}.options{display:flex;flex-direction:column;align-items:start;}.options-row{flex-direction:row;justify-content:flex-end;align-items:baseline}.options-row-reverse{flex-direction:row-reverse;justify-content:flex-end;align-items:baseline}.radio-container{display:flex;align-items:center;margin-bottom:5px;margin-top: 5px;max-width: 140px;}.radio-container input[type=radio]{display:none}.radio-container label{margin-left:8px}.radio-container input[type=radio]:checked+.radio-label{background-color:#d54e21;color:#fff}.radio-label{display:inline-block;padding:5px 10px;border:1px solid #d54e21;border-radius:20px;transition:all .3s ease;font-size:14px}label.radio-label svg{vertical-align:text-bottom}.feedback{margin-top:10px}.feedback textarea{width:90%;padding:10px;resize:vertical;border:1px solid #d54e21;border-radius:5px}.form-btn{display:block;width:100%;padding:10px;margin-top:20px;border:none;border-radius:20px;cursor:pointer;transition:all .3s ease;background:0 0;border:1px solid #d54e21;color:#d54e21}.submit-btn{background-color:#d54e21;color:#fff}.submit-btn:hover{background-color:#b43c1a}.cancel-btn:hover{background-color:#00000011}.info-container{display:flex;flex-direction:column;justify-content:space-between;margin-bottom:10px}.info-item{margin-bottom:10px}.info-item p{color:#b43c1a}.signature-pad{border:1px solid #d54e21;border-radius:5px;z-index:10}.signature-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.button-container{margin-left:.5em;display:flex;flex-direction:column;justify-content:flex-start}.button{margin-top:1em;padding:10px;background-color:#d54e21;color:#fff;border:none;border-radius:5px;cursor:pointer}@media (min-width:768px){body{margin-left:0;margin-right:0;margin-top:0;padding-left:0;padding-right:0;padding-top:0}.question-items{width:100%;flex-direction:row;justify-content:space-between;align-items:baseline}.question-items h5{max-width: 8rem;}.question-items .options{flex:1 1 auto}.options{flex-direction:row;justify-content:flex-end;align-items: center;}.info-container{flex-direction:row}.info-item{flex:1;margin-right:10px;margin-bottom:0}.info-item:last-child{margin-right:0}.header-m{display:none}.signature-container{flex-direction:row}}@media (max-width:767px){.header-pc{display:none}}</style>
|
|
|
<style>
|
|
|
#result{text-align:center;padding:20px}.bi-check-circle-fill,.bi-exclamation-circle-fill,.bi-x-circle-fill{fill:#d54e21}.bi-x-circle-fill{fill:#d54e21}
|
|
|
</style>
|
|
|
<style>#loading-mask{width:100vw;height:100vh;background-color:#00000099;position:fixed;left:0;top:0;display:flex}.lds-facebook{display:inline-block;position:relative;width:80px;height:80px;margin:auto}.lds-facebook div{display:inline-block;position:absolute;left:8px;width:16px;background:#fff;animation:lds-facebook 1.2s cubic-bezier(0,.5,.5,1) infinite}.lds-facebook div:nth-child(1){left:8px;animation-delay:-.24s}.lds-facebook div:nth-child(2){left:32px;animation-delay:-.12s}.lds-facebook div:nth-child(3){left:56px;animation-delay:0}@keyframes lds-facebook{0%{top:8px;height:64px}100%,50%{top:24px;height:32px}}</style>
|
|
|
<style>.city-page{display:flex;flex-direction:column;align-items:center}.city-list{list-style-type:none;padding:0;width:260px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1)}.city-list li{padding:20px;border-top:1px solid #d54e21;border-bottom:1px solid #d54e21;transition:background-color .3s;position:relative}.city-list li.active{color:#d54e21}.city-list li.filled::after{content:'✔';position:absolute;right:20px;color:#d54e21;transition:color .3s}.city-list li:hover{background-color:#d54e21;color:#fff}.city-list li.filled:hover::after{color:#fff}</style>
|
|
|
<style>.float-button{position:fixed;right:20px;bottom:120px;background-color:transparent;color:#d54e21;border:1px solid #d54e21;border-radius:50%;width:60px;height:60px;text-align:center;line-height:60px;font-size:24px;cursor:pointer;box-shadow:0 0 10px rgba(0,0,0,.1);z-index:1}.float-button:hover{background-color:#d54e21;color:#fff}.float-text{position:fixed;right:20px;bottom:190px;color:#d54e21;font-size:18px;text-align:right;z-index:-1;width: 100px;}.expand-list{list-style-type:none;position:fixed;right:20px;bottom:190px;width:260px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1);padding:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .5s ease}.expand-list.open{max-height:500px;opacity:1;z-index: 99;}.expand-list li{padding:20px;border-bottom:1px solid #d54e21;transition:background-color .3s;position: relative;}.expand-list li:last-child{border-bottom:none}.expand-list li.active{color:#d54e21}.expand-list li.filled::after{content:'✔';position:absolute;right:20px;color:#d54e21;transition:color .3s}.expand-list li:hover{background-color:#d54e21;color:#fff}.expand-list li.filled:hover::after{color:#fff}</style>
|
|
|
<style>.star-rating{direction:rtl;display:inline-block}.star-rating input[type=radio]{display:none}.star-rating label{font-size:30px;color:#d3d3d3;cursor:pointer}.star-rating input[type=radio]:checked~label,.star-rating input[type=radio]~label.checked,.star-rating label:hover,.star-rating label:hover~label{color:#d54e21}.rate-meaning{display:inline-block;margin-left:15px;vertical-align:middle;color:#d54e21}</style>
|
|
|
<script src="./utils.js"></script>
|
|
|
<script src="./vue@2.js"></script>
|
|
|
<script src="./signature_pad.umd.min.js"></script>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div id="app">
|
|
|
<div class="header-pc">
|
|
|
<a href="https://www.asiahighlights.com/" v-if="webcode=='ah'">
|
|
|
<img src="https://data.asiahighlights.com/pic/logo-ah.png" alt="Logo" width="130" height="104">
|
|
|
</a>
|
|
|
<a href="/" v-if="webcode=='gh'">
|
|
|
<img src="https://data.chinahighlights.com/image/aboutus/logo-gh.png" alt="Logo" width="130" height="104">
|
|
|
</a>
|
|
|
<!-- <h1>{{i18n.title}}</h1> -->
|
|
|
<h1></h1>
|
|
|
</div>
|
|
|
<div class="header-m">
|
|
|
<h1></h1>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-container" id="main">
|
|
|
<div id="result" v-if="error || (!cityListPage && isEmptyData)">
|
|
|
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
|
|
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.5-4.5a.5.5 0 0 0-.707 0L8 7.293 5.207 4.5a.5.5 0 0 0-.707.707L7.293 8l-2.793 2.793a.5.5 0 0 0 .707.707L8 8.707l2.793 2.793a.5.5 0 0 0 .707-.707L8.707 8l2.793-2.793a.5.5 0 0 0 0-.707z" />
|
|
|
</svg> -->
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
|
|
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 10.417 5.384 8.323A.75.75 0 0 0 4.303 9.7l2.693 2.677a.75.75 0 0 0 1.086-.02l5.17-5.85a.75.75 0 0 0-.02-1.107z" />
|
|
|
</svg>
|
|
|
<h2>No evaluation is required!</h2>
|
|
|
<!-- <p>{{errorMsg}}</p> -->
|
|
|
<button type="button" id="back0" class="form-btn cancel-btn" v-on:click="error=false;cityListPage=true;">Go Back</button>
|
|
|
</div>
|
|
|
|
|
|
<template v-else>
|
|
|
<div id="result" v-if="isFilled">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
|
|
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 10.417 5.384 8.323A.75.75 0 0 0 4.303 9.7l2.693 2.677a.75.75 0 0 0 1.086-.02l5.17-5.85a.75.75 0 0 0-.02-1.107z" />
|
|
|
</svg>
|
|
|
<h2>Thank you for your feedback!</h2>
|
|
|
<!-- <p>All actions are done.</p> -->
|
|
|
</div>
|
|
|
|
|
|
<template v-if="cityListPage">
|
|
|
<h4 v-if="!isFilled">{{i18n.tips}}</h4>
|
|
|
<div class="city-page">
|
|
|
<ul class="city-list" v-for="(city, index) in cityList" v-bind:key="city.cityName" v-on:click="selectCity(city)">
|
|
|
<li v-bind:class="[city.feedback_Filled ? 'filled' : '', city.cii_sn === currentCity.cii_sn ? 'active' : '' ]">{{city.cityName}}</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-if="!cityListPage">
|
|
|
<!-- <h1>One Minute Feedback - Help Us Serve You Better！</h1> -->
|
|
|
<!-- <p>Did you enjoy your stay in the <span class="text-primary">{{currentCity.cityName}}</span> area? Your honest feedback is appreciated to help us continually improve our service.</p> -->
|
|
|
<start-eva-text :city="currentCity.cityName" ></start-eva-text>
|
|
|
<div class="info-container">
|
|
|
<div class="info-item">
|
|
|
<h3>{{i18n.reference_no}}</h3>
|
|
|
<p id="referenceNo">{{group.groupNumber}}</p>
|
|
|
</div>
|
|
|
<div class="info-item">
|
|
|
<h3>{{i18n.guide_name}}</h3>
|
|
|
<p id="guideName">{{group.tourGuideName}}</p>
|
|
|
</div>
|
|
|
<div class="info-item">
|
|
|
<h3>{{i18n.city}}</h3>
|
|
|
<p id="city">{{currentCity.cityName}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<hr>
|
|
|
<p >{{i18n.tips}}</p>
|
|
|
<p v-if="!isWideScreen">Please rate by clicking the stars below.</p>
|
|
|
|
|
|
<form class="form-container" id="myForm" action="/sub" method="post" disabled>
|
|
|
|
|
|
<div class="question">
|
|
|
<h4>{{i18n.questions[0]}}</h4>
|
|
|
<div class="question-items" v-for="(q, qi) in feedbackItem.guide" v-bind:key="q.id">
|
|
|
<h5>{{q.Describe}}</h5>
|
|
|
<options-item v-if="isWideScreen" question="guide" si="1" v-bind:qitem="q" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
|
|
|
<options-item-star v-else question="guide" si="1" v-bind:qitem="q" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item-star>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="question">
|
|
|
<h4>{{i18n.questions[1]}}</h4>
|
|
|
<div class="question-items" v-for="(q, qi) in feedbackItem.driver" v-bind:key="q.id">
|
|
|
<h5>{{q.Describe}}</h5>
|
|
|
<options-item v-if="isWideScreen" question="Driver" v-bind:qitem="q" v-bind:si="2" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
|
|
|
<options-item-star v-else question="Driver" v-bind:qitem="q" v-bind:si="2" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="question" v-if="feedbackItem.experience.length > 0">
|
|
|
<h4>{{i18n.questions[2]}}</h4>
|
|
|
<div class="question-items" v-for="(q, qi) in feedbackItem.experience" v-bind:key="q.id">
|
|
|
<h5>{{q.Describe}}</h5>
|
|
|
<options-item v-if="isWideScreen" question="Experience" v-bind:qitem="q" v-bind:si="3" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
|
|
|
<options-item-star v-else question="Experience" v-bind:qitem="q" v-bind:si="3" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="question ">
|
|
|
<h4>{{i18n.questions[3]}}</h4>
|
|
|
<judgment-item question="photo" v-bind:qitem="{id: 'photo_permission', rate: feedbackEvaluation[0].usePhotos}" si="photo" qi="photo" key="photo" v-bind:disabled="resultPage"></judgment-item>
|
|
|
</div>
|
|
|
<div class="feedback question">
|
|
|
<h4>{{i18n.questions[4]}}</h4>
|
|
|
<div v-if="resultPage">
|
|
|
<p v-for="eva in feedbackEvaluation" v-bind:key="eva.feedbackId">
|
|
|
{{eva.otherComments ? eva.otherComments : ''}}
|
|
|
</p>
|
|
|
</div>
|
|
|
<textarea v-else name="comments" rows="4" v-bind:value="feedbackEvaluation[0].otherComments" v-bind:disabled="resultPage"></textarea>
|
|
|
</div>
|
|
|
<div class="feedback question">
|
|
|
<h4>{{i18n.questions[5]}}
|
|
|
</h4>
|
|
|
<div v-if="resultPage">
|
|
|
<p v-for="eva in feedbackEvaluation" v-bind:key="eva.feedbackId">
|
|
|
{{eva.desired_next ? eva.desired_next : ''}}
|
|
|
</p></div>
|
|
|
<textarea v-else name="desired_next" rows="4" v-bind:value="feedbackEvaluation[0].desired_next" v-bind:disabled="resultPage"></textarea>
|
|
|
</div>
|
|
|
<div class="signature">
|
|
|
<h4>{{i18n.questions[6]}}</h4>
|
|
|
<div class="signature-container" v-if="!resultPage">
|
|
|
<canvas id="signature-pad" class="signature-pad" v-bind:style="{'width': drawWidth+'px', 'height':'200px'}" ></canvas>
|
|
|
<div class="button-container">
|
|
|
<button type="button" id="clear" class="button" v-on:click="clearSignature()">{{i18n.btns.clear}}</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<img id="signature-img" v-bind:src="feedbackEvaluation[0].signatureDataUrl" v-bind:width="drawWidth" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<template v-if="!resultPage">
|
|
|
<button type="button" id="submit_a" class="form-btn submit-btn" v-on:click="submitForm">{{i18n.btns.submit}}</button>
|
|
|
<button type="button" id="back" class="form-btn cancel-btn" v-on:click="cancel" v-if="cityList.length > 1">{{i18n.btns.cancel}}</button>
|
|
|
</template>
|
|
|
</form>
|
|
|
|
|
|
<template v-if="cityList.length > 1">
|
|
|
<span id="currentCity" class="float-text" v-show="!cityListOpen">{{currentCity.cityName}}</span>
|
|
|
<button class="float-button" v-on:click="toggleCityList" >≡</button>
|
|
|
<ul v-bind:class="['expand-list', cityListOpen ? 'open' : '']">
|
|
|
<li v-for="city in cityList" v-bind:key="city.cityName" v-on:click="selectCity(city)" v-bind:class="{'active': city.cii_sn === currentCity.cii_sn, 'filled': (city.feedback_Filled ? true : false)}">{{city.cityName}}</li>
|
|
|
</ul>
|
|
|
</template>
|
|
|
|
|
|
</template>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<div id="loading-mask" v-if="loading">
|
|
|
<div class="lds-facebook">
|
|
|
<div></div>
|
|
|
<div></div>
|
|
|
<div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script async>
|
|
|
var rnd = Math.random();
|
|
|
var script0 = document.createElement('script');
|
|
|
script0.src = './components.js?rnd=' + rnd;
|
|
|
document.head.appendChild(script0);
|
|
|
|
|
|
script0.onload = function() {
|
|
|
var script = document.createElement('script');
|
|
|
script.src = './index.js?rnd=' + rnd;
|
|
|
document.head.appendChild(script);
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|