From 5c2123fe552d0c3b5084aa9e2b4c8cb9f8673f7e Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Thu, 4 Jan 2024 15:11:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E8=AF=86=E6=98=AF=E5=90=A6=E5=B7=B2?=
 =?UTF-8?q?=E5=A1=AB=E5=86=99;=20=E7=9B=B8=E5=90=8C=E5=AF=BC=E6=B8=B8?=
 =?UTF-8?q?=E7=9A=84=E5=9F=8E=E5=B8=82=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 157 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 92 insertions(+), 65 deletions(-)

diff --git a/index.html b/index.html
index f923a93..f7cfb69 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;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>.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.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>
@@ -54,7 +54,7 @@
       <template v-if="cityListPage">
         <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)">
+          <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_id ? 'filled' : '']">{{city.cityName}}</li>
           </ul>
         </div>
@@ -134,10 +134,10 @@
           </template>
         </form>
 
-        <span id="currentCity" class="float-text" v-show="!cityListOpen">{{group.cityName}}</span>
+        <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.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>
+          <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': (currentCity.feedback_id ? true : false)}">{{city.cityName}}</li>
         </ul>
 
       </template>
@@ -191,7 +191,7 @@
       // 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-bind:disabled="disabled" v-model="selectItem" >' +
+        '<input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="\'rate-\'+qitem.type+\'-\'+qitem.syc_sn+\'-\'+qitem.sn" 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>',
@@ -213,7 +213,7 @@
     Vue.component('options-item-star', {
         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-bind:disabled="disabled" v-model="selectItem" >' +
+          '<template v-for="item in rateList"><input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="\'rate-\'+qitem.type+\'-\'+qitem.syc_sn+\'-\'+qitem.sn" 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>' +
@@ -275,9 +275,11 @@
           currentCity: {},
           cityListOpen: false,
 
+          feedbackCity: {},
+
           isFilled: false,
           feedbackItemList: [],
-          feedbackItem: { guide: [], driver: [], experience: [] },
+          feedbackItem: { guide: [], driver: [], experience: [], hotel: [] },
           tourGuideList: [],
           feedbackEvaluation: {},
           group: {},
@@ -324,32 +326,53 @@
           const that = this;
           get(
             `${HOST}/get_feedback_city`,
-            // g=338947&v=30008&e=245176&c=1186
             { GRI_SN: that.param.g, VEI_SN: that.param.v, lgc: this.param.l },
             { headers: { ...{} } }
           ).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';
+
+            const mergeCity = groupBy(res.cityList, ele => isEmpty(ele.tourGuideId) ? 'unknown' : ele.tourGuideId);
+            const mergeCityA = Object.keys(mergeCity).reduce((r, tgid) => {
+              if (  (tgid !== 'unknown')) {
+                return r.concat(mergeCity[tgid].length > 1 ? [{
+                  ...mergeCity[tgid][0],
+                  cii_sn: mergeCity[tgid].map(v => v.cii_sn).join('_'),
+                  cii_sn_arr: mergeCity[tgid].map(v => v.cii_sn),
+                  cityName: mergeCity[tgid].map((v) => v.cityName).join(' & '),
+                  cities: mergeCity[tgid],
+                }] : mergeCity[tgid][0] );
+              }
+              return r.concat(mergeCity[tgid]);
+            }, []);
+            that.cityList = mergeCityA;
           });
         },
         selectCity(city) {
+          window.scrollTo({ top: 100, behavior: 'smooth' });
+          this.cityListOpen = false;
+          if (this.currentCity.cii_sn === city.cii_sn) {
+            return false;
+          }
           this.cityListPage = false;
           this.loading = true;
           const _param = {
             GRI_SN: this.param.g,
             VEI_SN: this.param.v,
-            CITY_SN: city.cii_sn,
+            // CITY_SN: city.cii_sn,
             lgc: this.param.l
           };
-          this.currentCity = Object.assign({}, city, _param);
-
-          this.getData(_param);
-          window.scrollTo({ top: 100, behavior: 'smooth' });
-          this.cityListOpen = false;
-
+          const selectedCity = Object.assign({}, city, _param);
+          // console.log(selectedCity);
+          this.currentCity = selectedCity;
+          if (selectedCity.cii_sn_arr) {
+            for (const iterator of selectedCity.cii_sn_arr) {
+              this.getData(Object.assign({}, _param, { CITY_SN: iterator }), true);
+            }
+          } else {
+            this.getData(Object.assign({}, _param, { CITY_SN: selectedCity.cii_sn }));
+          }
         },
         initSignature() {
           var canvas = document.getElementById('signature-pad');
@@ -362,16 +385,11 @@
           // console.log(data);
           this.signaturePad.clear();
         },
-        getData(param) {
+        getData(param, continually = false) {
           const that = this;
           get(
-            // `${HOST}/feedback/customer_feedback`,
             `${HOST}/get_feedback_service_item`,
-            // {group_id: 69291, tour_guide_id: 730},
-            // { group_id: that.param.g, tour_guide_id: that.param.tg },
-            // g=338947&v=30008&e=245176&c=1186
             param,
-            // { GRI_SN: that.param.g, VEI_SN: that.param.v, EOI_SN: that.param.e, CITY_SN: that.param.c, lgc: 1 },
             { headers: { ...{} } }
           ).then((res) => {
             that.loading = false;
@@ -380,13 +398,11 @@
               that.errorMsg = 'Data error.';
               return false;
             }
+            that.feedbackCity[`city_${res.feedbackEvaluation[0].feedback_cii_sn}`] = res;
+
             const itemGroup = groupBy(res.feedbackItemList, ele => ele.type);
             that.feedbackItem.guide = itemGroup.W ? itemGroup.W : [];
             that.feedbackItem.driver = itemGroup.Y ? itemGroup.Y : [];
-            // that.feedbackItem.experience = [
-            //   ...(itemGroup['7'] || []),
-            //   ...(itemGroup.C || []),
-            //   ...(itemGroup.A || []).map(ele => ({ ...ele, Describe: 'Hotel\n' + ele.name })),];
             let experience = [];
             if (itemGroup['7']) {
               experience = experience.concat(itemGroup['7']);
@@ -397,14 +413,22 @@
             if (itemGroup.G) {
               experience = experience.concat(itemGroup.G);
             }
+            let hotel = [];
             if (itemGroup.A) {
-              experience = experience.concat(itemGroup.A.map(function (ele) {
+              hotel = hotel.concat(itemGroup.A.map(function (ele) {
                 var newEle = Object.assign({}, ele);
                 newEle.Describe = 'Hotel\n' + ele.name;
                 return newEle;
               }));
+              that.currentCity[`city_${res.feedbackEvaluation[0].feedback_cii_sn}`] = hotel;
+            }
+            if (continually) {
+              const mergeHotel = [].concat(that.feedbackItem.hotel, hotel);
+              that.feedbackItem.experience = [].concat(experience, mergeHotel);
+              that.feedbackItem.hotel = mergeHotel;
+            } else {
+              that.feedbackItem.experience = [].concat(experience, hotel);
             }
-            that.feedbackItem.experience = experience;
 
             that.feedbackItemList = res.feedbackItemList;
             that.tourGuideList = res.tourGuideList;
@@ -428,9 +452,9 @@
         submitForm() {
           const that = this;
 
-          if (that.signaturePad.isEmpty()) {
-            alert("Please provide a signature first.");
-            event.preventDefault();
+          event.preventDefault();
+          if (that.signaturePad?.isEmpty()) {
+            // alert("Please provide a signature first.");
           } else {
             that.loading = true;
             // var data = that.signaturePad.toDataURL(); // default: image/png
@@ -446,38 +470,41 @@
               return obj;
             }, {});
 
-            // Print the form values to the console
-            var rateArr = that.feedbackItemList.map(ele => {
-              return { id: ele.id, sn: ele.sn, rate: formValues[`rate-${ele.id}`] || 0, };
-            });
-            // Send data to server along with the form data...
-            // Submit the form manually
-            // form.submit();
-            // console.log(formValues); return;
-            postForm(
-              `${HOST}/save_feedback`,
-              {
-                EOI_SN: that.group.EOI_SN,
-                GRI_SN: that.currentCity.GRI_SN,
-                VEI_SN: that.currentCity.VEI_SN,
-                // country_id:,
-                city_sn: that.currentCity.cii_sn,
-                tour_guide_id: that.currentCity.tourGuideId,
-                use_the_photos: formValues.photo_permission || -1,
-                other_comments: formValues.comments,
-                service_item_answer: JSON.stringify(rateArr),
-                signature_data_url: formValues.signature,
-                feedback_id: that.feedbackEvaluation.feedbackId || undefined,
-              },
-              { headers: { ...{} } }
-            ).then(res => {
-              that.loading = false;
-              if (res.errcode == 0) {
-                that.isFilled = true;
-                that.cityListPage = true;
-                that.currentCity = {};
-              } else { }
-            });
+            const citySNList = that.currentCity.cii_sn_arr || [that.currentCity.cii_sn]
+            for (const iterator of citySNList) {
+              const rateArr = that.feedbackCity[`city_${iterator}`].feedbackItemList.map(ele => {
+                return { id: ele.id, rate: formValues[`rate-${ele.type}-${ele.syc_sn}-${ele.sn}`] || 0, };
+              });
+              // Submit the form manually
+              // console.log(formValues, rateArr);
+              // continue;
+              postForm(
+                `${HOST}/save_feedback`,
+                {
+                  EOI_SN: that.group.EOI_SN,
+                  GRI_SN: that.currentCity.GRI_SN,
+                  VEI_SN: that.currentCity.VEI_SN,
+                  // country_id:,
+                  // tour_guide_id: that.currentCity.tourGuideId,
+                  tour_guide_id: that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0]?.tourGuideId || undefined,
+                  city_sn: iterator,
+                  use_the_photos: formValues.photo_permission || -1,
+                  other_comments: formValues.comments,
+                  feedback_id: that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0]?.feedbackId || undefined,
+                  service_item_answer: JSON.stringify(rateArr),
+                  signature_data_url: formValues.signature,
+                },
+                { headers: { ...{} } }
+              ).then(res => {
+                that.loading = false;
+                if (res.errcode == 0) {
+                  that.isFilled = true;
+                  that.cityListPage = true;
+                  that.currentCity = {};
+                } else { }
+              });
+            }
+
 
           }
         },