From 5dd052645f226fc505f54e8182f28e40b148b381 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Thu, 4 Jan 2024 10:56:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=B2=E5=A1=AB=E5=86=99=E8=BF=87=E7=9A=84?=
 =?UTF-8?q?=E4=B8=8D=E6=98=BE=E7=A4=BA;=20=E5=8F=8D=E9=A6=88=E8=A1=A8?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E9=A1=B5=E9=9D=A2;=20=E9=BB=98=E8=AE=A45?=
 =?UTF-8?q?=E6=98=9F,=20=E5=A2=9E=E5=8A=A0=E5=A1=AB=E5=86=99=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA;=20=E6=98=A0=E5=B0=84=E7=9A=84=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 76 +++++++++++++++++++++++++++++++++---------------------
 utils.js   |  2 +-
 2 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index c3681c5..f923a93 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,8 @@
 #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:200px;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}.city-list li:hover{background-color:#d54e21;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}.expand-list{list-style-type:none;position:fixed;right:20px;bottom:190px;width:200px;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}.expand-list li:last-child{border-bottom:none}.expand-list li.active{color:#d54e21}.expand-list li:hover{background-color:#d54e21;color:#fff}</style>
+  <style>.city-page{display:flex;flex-direction:column;align-items:center}.city-list{list-style-type:none;padding:0;width:200px;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.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}.expand-list{list-style-type:none;position:fixed;right:20px;bottom:190px;width:200px;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>
@@ -55,7 +55,7 @@
         <h4 v-if="!isFilled">Thank you for completing the Feedback Evaluation. Once submitted the tour guide would not be able to view your comments. </h4>
         <div class="city-page">
           <ul class="city-list" v-for="(city, index) in cityList" v-bind:key="city.cii_sn" v-on:click="selectCity(city)">
-            <li>{{city.cityName}}</li>
+            <li v-bind:class="[city.feedback_id ? 'filled' : '']">{{city.cityName}}</li>
           </ul>
         </div>
       </template>
@@ -79,58 +79,65 @@
         </div>
         <hr>
         <p >Thank you for completing the Feedback Evaluation. Once submitted the tour guide would not be able to view your comments. </p>
+        <p v-if="!isWideScreen">Please rate by clicking the stars below.</p>
 
-        <form class="form-container" id="myForm" action="/sub" method="post">
+        <form class="form-container" id="myForm" action="/sub" method="post" disabled>
 
           <div class="question">
             <h4>1. How satisfied were you with your tour guide?</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"></options-item>
-              <options-item-star v-else question="guide" si="1" v-bind:qitem="q" v-bind:qi="qi" v-bind:key="q.id"></options-item-star>
+              <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="isFilled"></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="isFilled"></options-item-star>
             </div>
           </div>
           <div class="question">
             <h4>2. How about the Driver and Car/Van?</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"></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"></options-item>
+              <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="isFilled"></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="isFilled"></options-item>
             </div>
           </div>
           <div class="question" v-if="feedbackItem.experience.length > 0">
             <h4>3. General Experience with:</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"></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"></options-item>
+              <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="isFilled"></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="isFilled"></options-item>
             </div>
           </div>
           <div class="question " v-if="showPhotos">
             <h4>4. Would you give Asia Highlights permission to use photos taken by your tour guide(s) that contain your picture?</h2>
-              <judgment-item question="photo" v-bind:qitem="{id: 'photo_permission', rate: feedbackEvaluation.usePhotos}" si="photo" qi="photo" key="photo"></judgment-item>
+              <judgment-item question="photo" v-bind:qitem="{id: 'photo_permission', rate: feedbackEvaluation.usePhotos}" si="photo" qi="photo" key="photo" v-bind:disabled="isFilled"></judgment-item>
           </div>
           <div class="feedback question">
             <h4>Any other comments that you would like to share with us?</h4>
-            <textarea name="comments" rows="4" v-bind:value="feedbackEvaluation.otherComments"></textarea>
+            <p v-if="isFilled">{{feedbackEvaluation.otherComments ? feedbackEvaluation.otherComments : '--'}}</p>
+            <textarea v-else name="comments" rows="4" v-bind:value="feedbackEvaluation.otherComments" v-bind:disabled="isFilled"></textarea>
           </div>
           <div class="signature">
             <h4>Signature:</h4>
-            <div class="signature-container">
+            <div class="signature-container" v-if="!isFilled">
               <canvas id="signature-pad" class="signature-pad" v-bind:width="drawWidth" height=200 ></canvas>
               <div class="button-container">
                 <button type="button" id="clear" class="button" v-on:click="clearSignature()">Clear</button>
               </div>
             </div>
+            <div v-else>
+              <img id="signature-img" v-bind:src="feedbackEvaluation.signatureDataUrl" v-bind:width="drawWidth" />
+            </div>
           </div>
-          <button type="button" id="submit_a" class="form-btn submit-btn" v-on:click="submitForm">Finish & Submit</button>
-          <button type="button" id="back" class="form-btn cancel-btn" v-on:click="cancel">Cancel</button>
+          <template v-if="!isFilled">
+            <button type="button" id="submit_a" class="form-btn submit-btn" v-on:click="submitForm">Finish & Submit</button>
+            <button type="button" id="back" class="form-btn cancel-btn" v-on:click="cancel">Cancel</button>
+          </template>
         </form>
 
         <span id="currentCity" class="float-text" v-show="!cityListOpen">{{group.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.cii_sn" v-on:click="selectCity(city)" v-bind:class="{'active': city.cii_sn === currentCity.cii_sn}">{{city.cityName}}</li>
+          <li v-for="city in cityList" v-bind:key="city.cii_sn" v-on:click="selectCity(city)" v-bind:class="{'active': city.cii_sn === currentCity.cii_sn, 'filled': (currentCity.feedback_id ? true : false)}">{{city.cityName}}</li>
         </ul>
 
       </template>
@@ -179,19 +186,19 @@
   <script defer>
     // 定义名为 options-item 的新组件
     Vue.component('options-item', {
-      props: ['question', 'si', 'qi', 'qitem'],
+      props: ['question', 'si', 'qi', 'qitem', 'disabled'],
       template: '<div :class="[\'options\', isWideScreen ? \'\': \'options-row-reverse\']">' +
       // template: '<div :class="[\'options\', isWideScreen ? \'\': \'options-row1\']">' +
         '<span class="rate-meaning" v-if="!isWideScreen"><span>{{selectedRatingText}}</span></span>' +
         '<div class="radio-container" v-for="item in rateList">' +
-        '<input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="\'rate-\'+qitem.id" v-bind:value="item.value" v-model="selectItem" >' +
+        '<input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="\'rate-\'+qitem.id" v-bind:value="item.value" v-bind:disabled="disabled" v-model="selectItem" >' +
         '<label v-bind:for="item.value+\'-\' + si + \'-\' + qi" class="radio-label"><span v-html="item.svg"></span> {{isWideScreen ? item.name : ""}}</label>' +
         '</div>' +
         '</div>',
       data() {
         return {
           rateList: rateList,
-          selectItem: String(this.qitem.rate),
+          selectItem: String(this.qitem.rate || 5),
         }
       },
       computed: {
@@ -204,9 +211,9 @@
       },
     });
     Vue.component('options-item-star', {
-        props: ['question', 'si', 'qi', 'qitem'],
+        props: ['question', 'si', 'qi', 'qitem', 'disabled'],
         template: '<div><div class="star-rating">' +
-          '<template v-for="item in rateList"><input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="\'rate-\'+qitem.id" v-bind:value="item.value" v-model="selectItem" >' +
+          '<template v-for="item in rateList"><input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="\'rate-\'+qitem.id" v-bind:value="item.value" v-bind:disabled="disabled" v-model="selectItem" >' +
           '<label v-bind:for="item.value+\'-\' + si + \'-\' + qi" :class="{\'checked\': selectItem>=item.value}">★</label></template>' +
           '</div>' +
           '<span class="rate-meaning"><span id="rate-text">{{selectedRatingText}}</span></span>' +
@@ -214,7 +221,7 @@
         data() {
           return {
             rateList: rateList,
-            selectItem: String(this.qitem.rate),
+            selectItem: String(this.qitem.rate || 5),
           }
         },
         computed: {
@@ -226,10 +233,10 @@
     });
     // yes or no
     Vue.component('judgment-item', {
-      props: ['question', 'si', 'qi', 'qitem'],
+      props: ['question', 'si', 'qi', 'qitem', 'disabled'],
       template: '<div class="options options-row">' +
         '<div class="radio-container" v-for="item in rateList">' +
-        '<input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="qitem.id" v-bind:value="item.value" v-bind:checked="qitem.rate===item.value">' +
+        '<input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="qitem.id" v-bind:value="item.value" v-bind:checked="qitem.rate===item.value" v-bind:disabled="disabled">' +
         '<label v-bind:for="item.value+\'-\' + si + \'-\' + qi" class="radio-label"><span v-html="item.svg"></span> {{item.name}}</label>' +
         '</div>' +
         '</div>',
@@ -262,6 +269,8 @@
           loading: false,
 
           cityListPage: true,
+          resultPage: false,
+
           cityList: [],
           currentCity: {},
           cityListOpen: false,
@@ -291,11 +300,14 @@
           for (const param of urlParams) {
             this.param[param[0]] = param[1];
           }
-          var urlPath = window.location.pathname.replace('/customerfeedback/', '').split('/');
+          this.resultPage = !isEmpty(this.param.r);
+          var urlPath = window.location.pathname.replace('/customerfeedback/', '').split('-').filter(s => s);
+          urlPath = urlPath.length >= 3 ? urlPath : window.location.pathname.replace('/customerfeedback/', '').split('/');
           if (urlPath.length > 0 && isEmpty(this.param.g)) {
             this.param.g = urlPath[0];
             this.param.v = urlPath[1];
             this.param.l = urlPath[2] || 1;
+            this.resultPage = !isEmpty(urlPath[3]);
           }
           if (!(this.param.v && this.param.g)) {
             this.error = true;
@@ -318,6 +330,7 @@
           ).then((res) => {
             that.loading = false;
             that.cityList = res.cityList;
+            console.log(groupBy(res.cityList, 'tourGuideId'));
             that.error = res.cityList.length === 0;
             that.errorMsg = 'No city found';
           });
@@ -333,7 +346,6 @@
           };
           this.currentCity = Object.assign({}, city, _param);
 
-
           this.getData(_param);
           window.scrollTo({ top: 100, behavior: 'smooth' });
           this.cityListOpen = false;
@@ -399,13 +411,17 @@
             that.feedbackEvaluation = res.feedbackEvaluation[0];
             that.group = res.group[0];
 
-            // that.signaturePad.fromDataURL(that.feedbackEvaluation.signatureDataUrl); // debug: -1
+            // 已经填写过了
+            that.isFilled = !isEmpty(res.feedbackEvaluation[0].feedbackId);
+            that.cityListPage = !that.resultPage;
+            if (!isEmpty(res.feedbackEvaluation[0].feedbackId)) {
+              // that.signaturePad.fromDataURL(that.feedbackEvaluation.signatureDataUrl);
+            } else {
+              that.initSignature();
+            }
 
-            // that.isFilled = !isEmpty(res.feedbackEvaluation[0].feedbackId); // 已经填写过了
-            that.isFilled = false;
             that.showPhotos = res.group[0].inTheEnd;
             // alert("Thank you for completing the Feedback Evaluation. Once submitted the tour guide would not be able to view your comments. ");
-            that.initSignature();
 
           });
         },
diff --git a/utils.js b/utils.js
index 3508418..a13dd70 100644
--- a/utils.js
+++ b/utils.js
@@ -93,7 +93,7 @@ function isEmpty(val) {
 }
 function groupBy(array, callback) {
   return array.reduce((groups, item) => {
-    const key = callback(item);
+    const key = typeof callback === 'function' ? callback(item) : item[callback];
 
     if (!groups[key]) {
       groups[key] = [];