diff --git a/index.html b/index.html
index ea7a9a1..401ce01 100644
--- a/index.html
+++ b/index.html
@@ -265,330 +265,11 @@
}
},
});
- const defaultHeaders = { mode: 'no-cors', 'Sec-Fetch-Mode': 'no-cors' };
- // const HOST = `http://202.103.68.144:890/service-CooperateSOA`; // debug: 0
- const HOST = `https://p9axztuwd7x8a7.mycht.cn/service-CooperateSOA`;
- const index = new Vue({
- el: '#app',
- computed: {
- isWideScreen() {
- return window.innerWidth >= 768; // Adjust the threshold as needed
- },
- drawWidth() {
- return window.innerWidth < 768 ? Math.floor(window.innerWidth-40) : 760; // Adjust the threshold as needed
- },
- isEmptyData() {
- return this.feedbackItem.guide.length === 0
- && this.feedbackItem.driver.length === 0
- && this.feedbackItem.experience.length === 0
- && this.feedbackItem.hotel.length === 0;
- },
- },
- data() {
- return {
- timer: null,
- error: false,
- errorMsg: '',
- webcode: 'ah',
-
- param: {},
- loading: false,
-
- cityListPage: true,
- resultPage: false,
-
- cityList: [],
- currentCity: {},
- cityListOpen: false,
-
- feedbackCity: {},
-
- isFilled: false,
- feedbackItemList: [],
- feedbackItem: { guide: [], driver: [], experience: [], hotel: [] },
- tourGuideList: [],
- feedbackEvaluation: [],
- group: {},
-
- showPhotos: false,
-
- signaturePad: null,
- debug: false,
- };
- },
- created() {
- console.clear();
- console.log('invoke vue', typeof this);
- this.initData();
- },
- methods: {
- initData() {
- var hostname = window.location.hostname.toLowerCase();
- this.webcode = webList[hostname] || webList.default;
-
- var urlParams = new URLSearchParams(window.location.search);
- for (const param of urlParams) {
- this.param[param[0]] = param[1];
- }
- this.debug = this.param.debug || false;
- 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]);
-
- this.debug = !isEmpty(urlPath[4]);
- this.resultPage = !isEmpty(urlPath[4]) ? false : !isEmpty(urlPath[3]);
- }
- console.log(this.param, 'debug', this.debug);
- if (!(this.param.v && this.param.g)) {
- this.error = true;
- this.errorMsg = 'Invalid URL';
- return false;
- }
- this.loading = true;
- console.log('resultPage', this.resultPage);
- this.getCityList();
- },
- getCityList() {
- if (!(this.param.v && this.param.g)) {
- return false;
- }
- const that = this;
- get(
- `${HOST}/get_feedback_city`,
- { GRI_SN: that.param.g, VEI_SN: that.param.v, lgc: this.param.l },
- { headers: { ...{} } }
- ).then((res) => {
- that.loading = false;
- 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')) {
- const uniqueCII_SN = mergeCity[tgid].map(v => v.cii_sn).filter((v, i, a) => a.indexOf(v) === i);
- const uniqueCII_Name = mergeCity[tgid].map(v => v.cityName).filter((v, i, a) => a.indexOf(v) === i);
- return r.concat(mergeCity[tgid].length > 1 ? [{
- ...mergeCity[tgid][0],
- cii_sn: uniqueCII_SN.join('_'),
- cii_sn_arr: uniqueCII_SN,
- cityName: uniqueCII_Name.join(' & '),
- feedback_Filled: mergeCity[tgid].reduce((r, v) => r+v.feedback_Filled, 0) > 0,
- // cities: mergeCity[tgid],
- }] : mergeCity[tgid][0] );
- }
- return r.concat(mergeCity[tgid]);
- }, []);
- // console.log(mergeCityA, that.error);
- that.cityList = mergeCityA;
- if (mergeCityA.length === 1) {
- that.selectCity(mergeCityA[0]);
- }
- });
- },
- 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.feedbackEvaluation = [];
- this.loading = true;
- const _param = {
- GRI_SN: this.param.g,
- VEI_SN: this.param.v,
- // CITY_SN: city.cii_sn,
- lgc: this.param.l
- };
- const selectedCity = Object.assign({}, city, _param);
- // console.log(selectedCity);
- this.currentCity = selectedCity;
- this.feedbackItem.hotel = [];
- 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 }));
- }
- // setTimeout(() => {
- // if (this.feedbackItem.guide.length === 0
- // && this.feedbackItem.driver.length === 0
- // && this.feedbackItem.experience.length === 0
- // && this.feedbackItem.hotel.length === 0
- // ) {
- // this.error = true;
- // this.errorMsg = 'Data error.';
- // return false;
- // }
- // }, 1000);
- },
- initSignature() {
- var canvas = document.getElementById('signature-pad');
- this.signaturePad = new SignaturePad(canvas, {
- backgroundColor: '#f8f8f8',
- penColor: "rgb(50, 50, 50)",
- });
- const ratio = Math.max(window.devicePixelRatio || 1, 1);
- canvas.width = canvas.offsetWidth * ratio;
- canvas.height = canvas.offsetHeight * ratio;
- canvas.getContext("2d").scale(ratio, ratio);
- this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
- },
- clearSignature() {
- var data = this.signaturePad.toDataURL("image/svg+xml");
- console.log(data);
- this.signaturePad.clear();
- },
- getData(param, continually = false) {
- const that = this;
- get(
- `${HOST}/get_feedback_service_item`,
- param,
- { headers: { ...{} } }
- ).then((res) => {
- that.loading = false;
- if (res.errcode !== 0) {
- if (continually === false) {
- that.error = true;
- 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 : [];
- let experience = [];
- if (itemGroup['7']) {
- experience = experience.concat(itemGroup['7']);
- }
- if (itemGroup.C) {
- experience = experience.concat(itemGroup.C);
- }
- if (itemGroup.G) {
- experience = experience.concat(itemGroup.G);
- }
- let hotel = [];
- if (itemGroup.A) {
- hotel = hotel.concat(itemGroup.A.map(function (ele) {
- var newEle = Object.assign({}, ele);
- newEle.Describe = `${ele.name} ${res.group[0].cityName}`;
- 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.feedbackItemList = res.feedbackItemList;
- that.tourGuideList = res.tourGuideList;
- that.feedbackEvaluation = [].concat(that.feedbackEvaluation, res.feedbackEvaluation);
- that.group = res.group[0];
-
- // 已经填写过了
- // that.isFilled = !isEmpty(res.feedbackEvaluation[0].signatureDataUrl);
- that.isFilled = that.currentCity.feedback_Filled || !isEmpty(res.feedbackEvaluation[0].signatureDataUrl);
- that.cityListPage = (that.debug) ? false : (that.resultPage ? false : that.isFilled);
- if (that.resultPage || that.isFilled) {
- // that.signaturePad.fromDataURL(that.feedbackEvaluation.signatureDataUrl);
- } else {
- setTimeout(() => {
- that.initSignature();
- }, 100);
- }
- if (that.debug) {
- setTimeout(() => {
- that.initSignature();
- }, 100);
- }
-
- 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. ");
-
- });
- },
- submitForm() {
- const that = this;
-
- event.preventDefault();
- if (that.signaturePad && that.signaturePad.isEmpty()) {
- alert("Please provide a signature first.");
- } else {
- that.loading = true;
- // var data = that.signaturePad.toDataURL(); // default: image/png
- var data = that.signaturePad.toDataURL("image/svg+xml");
- var form = document.getElementById('myForm');
- // Create a FormData instance
- var formData = new FormData(form);
- formData.append('signature', data);
-
- // Convert the FormData to a plain object
- var formValues = Array.from(formData.entries()).reduce((obj, [key, value]) => {
- obj[key] = value;
- return obj;
- }, {});
-
- 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] ? that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0].tourGuideId : undefined,
- city_sn: iterator,
- use_the_photos: formValues.photo_permission || -1,
- other_comments: formValues.comments,
- desired_next: formValues.desired_next,
- feedback_id: that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0] ? 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 { }
- });
- }
-
-
- }
- },
- cancel() {
- this.cityListPage = true;
- this.currentCity = {};
- },
- toggleCityList() {
- this.cityListOpen = !this.cityListOpen;
- },
- },
- });
-
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..bcf3d50
--- /dev/null
+++ b/index.js
@@ -0,0 +1,318 @@
+const defaultHeaders = { mode: 'no-cors', 'Sec-Fetch-Mode': 'no-cors' };
+// const HOST = `http://202.103.68.144:890/service-CooperateSOA`; // debug: 0
+const HOST = `https://p9axztuwd7x8a7.mycht.cn/service-CooperateSOA`;
+const index = new Vue({
+ el: '#app',
+ computed: {
+ isWideScreen() {
+ return window.innerWidth >= 768; // Adjust the threshold as needed
+ },
+ drawWidth() {
+ return window.innerWidth < 768 ? Math.floor(window.innerWidth - 40) : 760; // Adjust the threshold as needed
+ },
+ isEmptyData() {
+ return this.feedbackItem.guide.length === 0 && this.feedbackItem.driver.length === 0 && this.feedbackItem.experience.length === 0 && this.feedbackItem.hotel.length === 0;
+ },
+ },
+ data() {
+ return {
+ timer: null,
+ error: false,
+ errorMsg: '',
+ webcode: 'ah',
+
+ param: {},
+ loading: false,
+
+ cityListPage: true,
+ resultPage: false,
+
+ cityList: [],
+ currentCity: {},
+ cityListOpen: false,
+
+ feedbackCity: {},
+
+ isFilled: false,
+ feedbackItemList: [],
+ feedbackItem: { guide: [], driver: [], experience: [], hotel: [] },
+ tourGuideList: [],
+ feedbackEvaluation: [],
+ group: {},
+
+ showPhotos: false,
+
+ signaturePad: null,
+ debug: false,
+ };
+ },
+ created() {
+ console.clear();
+ console.log('invoke vue', typeof this);
+ this.initData();
+ },
+ methods: {
+ initData() {
+ var hostname = window.location.hostname.toLowerCase();
+ this.webcode = webList[hostname] || webList.default;
+
+ var urlParams = new URLSearchParams(window.location.search);
+ for (const param of urlParams) {
+ this.param[param[0]] = param[1];
+ }
+ this.debug = this.param.debug || false;
+ 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]);
+
+ this.debug = !isEmpty(urlPath[4]);
+ this.resultPage = !isEmpty(urlPath[4]) ? false : !isEmpty(urlPath[3]);
+ }
+ console.log(this.param, 'debug', this.debug);
+ if (!(this.param.v && this.param.g)) {
+ this.error = true;
+ this.errorMsg = 'Invalid URL';
+ return false;
+ }
+ this.loading = true;
+ console.log('resultPage', this.resultPage);
+ this.getCityList();
+ },
+ getCityList() {
+ if (!(this.param.v && this.param.g)) {
+ return false;
+ }
+ const that = this;
+ get(`${HOST}/get_feedback_city`, { GRI_SN: that.param.g, VEI_SN: that.param.v, lgc: this.param.l }, { headers: { ...{} } }).then((res) => {
+ that.loading = false;
+ 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') {
+ const uniqueCII_SN = mergeCity[tgid].map((v) => v.cii_sn).filter((v, i, a) => a.indexOf(v) === i);
+ const uniqueCII_Name = mergeCity[tgid].map((v) => v.cityName).filter((v, i, a) => a.indexOf(v) === i);
+ return r.concat(
+ mergeCity[tgid].length > 1
+ ? [
+ {
+ ...mergeCity[tgid][0],
+ cii_sn: uniqueCII_SN.join('_'),
+ cii_sn_arr: uniqueCII_SN,
+ cityName: uniqueCII_Name.join(' & '),
+ feedback_Filled: mergeCity[tgid].reduce((r, v) => r + v.feedback_Filled, 0) > 0,
+ // cities: mergeCity[tgid],
+ },
+ ]
+ : mergeCity[tgid][0]
+ );
+ }
+ return r.concat(mergeCity[tgid]);
+ }, []);
+ // console.log(mergeCityA, that.error);
+ that.cityList = mergeCityA;
+ if (mergeCityA.length === 1) {
+ that.selectCity(mergeCityA[0]);
+ }
+ });
+ },
+ 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.feedbackEvaluation = [];
+ this.loading = true;
+ const _param = {
+ GRI_SN: this.param.g,
+ VEI_SN: this.param.v,
+ // CITY_SN: city.cii_sn,
+ lgc: this.param.l,
+ };
+ const selectedCity = Object.assign({}, city, _param);
+ // console.log(selectedCity);
+ this.currentCity = selectedCity;
+ this.feedbackItem.hotel = [];
+ 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 }));
+ }
+ // setTimeout(() => {
+ // if (this.feedbackItem.guide.length === 0
+ // && this.feedbackItem.driver.length === 0
+ // && this.feedbackItem.experience.length === 0
+ // && this.feedbackItem.hotel.length === 0
+ // ) {
+ // this.error = true;
+ // this.errorMsg = 'Data error.';
+ // return false;
+ // }
+ // }, 1000);
+ },
+ initSignature() {
+ var canvas = document.getElementById('signature-pad');
+ this.signaturePad = new SignaturePad(canvas, {
+ backgroundColor: '#f8f8f8',
+ penColor: 'rgb(50, 50, 50)',
+ });
+ const ratio = Math.max(window.devicePixelRatio || 1, 1);
+ canvas.width = canvas.offsetWidth * ratio;
+ canvas.height = canvas.offsetHeight * ratio;
+ canvas.getContext('2d').scale(ratio, ratio);
+ this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
+ },
+ clearSignature() {
+ var data = this.signaturePad.toDataURL('image/svg+xml');
+ console.log(data);
+ this.signaturePad.clear();
+ },
+ getData(param, continually = false) {
+ const that = this;
+ get(`${HOST}/get_feedback_service_item`, param, { headers: { ...{} } }).then((res) => {
+ that.loading = false;
+ if (res.errcode !== 0) {
+ if (continually === false) {
+ that.error = true;
+ 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 : [];
+ let experience = [];
+ if (itemGroup['7']) {
+ experience = experience.concat(itemGroup['7']);
+ }
+ if (itemGroup.C) {
+ experience = experience.concat(itemGroup.C);
+ }
+ if (itemGroup.G) {
+ experience = experience.concat(itemGroup.G);
+ }
+ let hotel = [];
+ if (itemGroup.A) {
+ hotel = hotel.concat(
+ itemGroup.A.map(function (ele) {
+ var newEle = Object.assign({}, ele);
+ newEle.Describe = `${ele.name} ${res.group[0].cityName}`;
+ 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.feedbackItemList = res.feedbackItemList;
+ that.tourGuideList = res.tourGuideList;
+ that.feedbackEvaluation = [].concat(that.feedbackEvaluation, res.feedbackEvaluation);
+ that.group = res.group[0];
+
+ // 已经填写过了
+ // that.isFilled = !isEmpty(res.feedbackEvaluation[0].signatureDataUrl);
+ that.isFilled = that.currentCity.feedback_Filled || !isEmpty(res.feedbackEvaluation[0].signatureDataUrl);
+ that.cityListPage = that.debug ? false : that.resultPage ? false : that.isFilled;
+ if (that.resultPage || that.isFilled) {
+ // that.signaturePad.fromDataURL(that.feedbackEvaluation.signatureDataUrl);
+ } else {
+ setTimeout(() => {
+ that.initSignature();
+ }, 100);
+ }
+ if (that.debug) {
+ setTimeout(() => {
+ that.initSignature();
+ }, 100);
+ }
+
+ 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. ");
+ });
+ },
+ submitForm() {
+ const that = this;
+
+ event.preventDefault();
+ if (that.signaturePad && that.signaturePad.isEmpty()) {
+ alert('Please provide a signature first.');
+ } else {
+ that.loading = true;
+ // var data = that.signaturePad.toDataURL(); // default: image/png
+ var data = that.signaturePad.toDataURL('image/svg+xml');
+ var form = document.getElementById('myForm');
+ // Create a FormData instance
+ var formData = new FormData(form);
+ formData.append('signature', data);
+
+ // Convert the FormData to a plain object
+ var formValues = Array.from(formData.entries()).reduce((obj, [key, value]) => {
+ obj[key] = value;
+ return obj;
+ }, {});
+
+ 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] ? that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0].tourGuideId : undefined,
+ city_sn: iterator,
+ use_the_photos: formValues.photo_permission || -1,
+ other_comments: formValues.comments,
+ desired_next: formValues.desired_next,
+ feedback_id: that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0] ? 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 {
+ }
+ });
+ }
+ }
+ },
+ cancel() {
+ this.cityListPage = true;
+ this.currentCity = {};
+ },
+ toggleCityList() {
+ this.cityListOpen = !this.cityListOpen;
+ },
+ },
+});