Moderna-Survey/src/fe/js/passport.js

passport = function () {
	//private menbers
	let tagData = null;
	let convertData = {}




	//private methods
	function init() {

		console.log('passport init')

		getTagData();

		$(".photo__icon-2").on("click", function(){
			$("#fileInput2").click();
		});

		$(".passport__toggle__head").on("click", function(){
			if(!$(this).parent(".passport__toggle").hasClass("toggleClose")) {
				$(this).parent(".passport__toggle").addClass("toggleClose");
			}else {
				$(this).parent(".passport__toggle").removeClass("toggleClose");
			}
		});

		
	}

	function getTagData(){
		$.ajax('./js/tagData.json').then(res => {
			tagData = res;
			// console.log(res)
		})
	}

	function buildPassportHandler(_data){
		let data = _data;
		console.log(data);

		setTimeout(()=>{

			let getHealthAction = convertMultipleTag('healthAction', data.healthAction);
			let gethealthTopic = convertMultipleTag('healthTopic', data.healthTopic);
			let getHealthAge = convertSingleTag('healthAge', data.healthAge);
			let getHealthGender= convertSingleTag('healthGender', data.healthGender);
			convertData.headSticker = data.headSticker;
			convertData.healthNickname = data.healthNickname;
			
			Promise.all([getHealthAction ,gethealthTopic, getHealthAge, getHealthGender]).then((res) => {
				console.log(convertData); // [3, 1337, "foo"]
				buildTagHtml();
			});
		}, 200);

	}

	function convertMultipleTag(_name, _arr) {
		return new Promise(resolve => {
			// 篩出特定問題資料
			let tags = tagData.filter(quesItem => {
				// console.log(item)
				return quesItem.questionName == _name
			}).map(quesItem => {
				return quesItem.tags
			})
			// console.log(tags)

			// 轉換回傳資料
			let convertArr = [];
			_arr.forEach(element => {
				// console.log("element: "+element)
				tags[0].forEach((_tagItem) => {
					// console.log("tagId: "+_tagItem.tagId)
					if(_tagItem.tagId == element) {
						convertArr.push(_tagItem.answer)
						// console.log("tagId: "+_tagItem.answer)
					}
				});
			});
			
			// console.log(convertArr)

			if(_name == "healthAction") {
				convertData.healthAction = convertArr;
			}
			if(_name == "healthTopic") {
				convertData.healthTopic = convertArr;
			}

			resolve(_name + " convertMultipleTag success");

			return convertArr;
		});
	}

	function convertSingleTag(_name, _value) {
		return new Promise(resolve => {
			// 篩出特定問題資料
			let tags = tagData.filter(quesItem => {
				// console.log(item)
				return quesItem.questionName == _name
			}).map(quesItem => {
				return quesItem.tags
			})
			// console.log(tags)

			let converValue = "";
			tags[0].forEach((_tagItem) => {
				// console.log("tagId: "+_tagItem.tagId)
				if(_tagItem.tagId == _value) {
					converValue = _tagItem.answer
					// console.log("tagId: "+_tagItem.answer)
				}
			});
			
			if(_name == "healthAge") {
				convertData.healthAge =  converValue;
			}

			if(_name == "healthGender") {
				convertData.healthGender =  converValue;
			}

			// console.log(converValue)

			resolve(_name + " convertMultipleTag success");

			return converValue;
		});
	}

	function buildTagHtml() {
		$(".passport__toggle-healthTopic .tags").html("");
		$(".passport__toggle-healthAction .tags").html("");
		$(".passport__intro .photo__img").html("");
		$(".passport__intro__nickname h2").html("");
		$(".passport__intro__info .introAge").html("");
		$(".passport__intro__info .introGender").html("");

		convertData.healthTopic.forEach(_tagName => {
			$(".passport__toggle-healthTopic .tags").append(
				`
				<div class="tags__item tags__item-md checked">
					<p>${_tagName}</p>
				</div>	
				`
			);
		});

		convertData.healthAction.forEach(_tagName => {
			$(".passport__toggle-healthAction .tags").append(
				`
				<div class="tags__item tags__item-md checked">
					<p>${_tagName}</p>
				</div>	
				`
			);
		});
		
		$(".passport__intro .photo__img").append(
			`
				<img src="${convertData.headSticker}" />
			`
		);

		$(".passport__intro__nickname h2").text(convertData.healthNickname);
		
		$(".passport__intro__info .introAge").text(convertData.healthAge);
		$(".passport__intro__info .introGender").text(convertData.healthGender);
	}

	{
		$(document).ready(function () {
			init();
		});
	}

	//public
	return {
		buildPassportHandler: function(data) {
			buildPassportHandler(data)
		}
	};
};

var passport = new passport();