InnovationLab/public/js/searchRecipe.js

import getParams from './getParams.js';

searchRecipe = function () {
	//private menbers
	const kolUrl = "./json/kolData.json";
	const ordinaryUrl_left = "./json/ordinaryData_left.json";
	const ordinaryUrl_right = "./json/ordinaryData_right.json";
	const tagUrl = "./json/tagData.json"
	let tagData;
	let kolData; // kol資料
	let ordinaryData_left; // 素人資料
	let ordinaryData_right; // 素人資料
	let allData = []; //kol+素人資料
	let searchTarget = []; // 搜尋標籤
	let searchData; // 搜尋後資料
	let groupNum = 5; // 一組幾個
	let groupData=[]; //一組的資料
	let pageActive = 1 //正在第幾頁
	let pageItemNum = 5; //一次秀幾頁
	let $searchList = $(".search__result__list") // 菜單容器
	let $searchPagination = $(".search__result__pagination") // 頁碼容器

	//private methods
	function init() {
		console.log('searchRecipe is loaded.');
		// 網址搜尋的tag
		if (getParams('search') != null) {
			searchTarget.push(getParams('search'))
			// 滑至推薦食譜
			srollToRecommend();
		} else {
			searchTarget = [] // 預設tag;
		}
		// console.log(searchTarget)

		// 取得所有食譜資料
		getAllrecipeData();

	}

	// 取得所有食譜資料
	function getAllrecipeData() {
		// get kolData
		fetch(kolUrl)
			.then(res => res.json())
			.then(data => {
				kolData = data.map(item => (
					{
						sort: 1,
						category: "kol",
						id: item.kol.id,
						index: item.kol.index,
						name: item.name + item.text,
						tag: item.tag.split(",")
					}
				));
				// console.log(kolData)
				allData = kolData.concat([...allData])
				// console.log(allData)
			})
			.then(() => {
				// get ordinaryData_left
				fetch(ordinaryUrl_left)
					.then(res => res.json())
					.then(data => {
						ordinaryData_left = data.map(item => {
							let tag = []
							let tag_1 = item.tag_1.split(",")
							let tag_2 = item.tag_2.split(",")
							let tag_3 = item.tag_3.split(",")
							let tag_4 = item.tag_4.split(",")
							if (tag_1.length > 1) {
								for (let i = 0; i < tag_1.length; i++) {
									tag.push(tag_1[i])
								}
							} else {
								tag.push(item.tag_1)
							}
							if (tag_2.length > 1) {
								for (let i = 0; i < tag_2.length; i++) {
									tag.push(tag_2[i])
								}
							} else {
								tag.push(item.tag_2)
							}
							if (tag_3.length > 1) {
								for (let i = 0; i < tag_3.length; i++) {
									tag.push(tag_3[i])
								}
							} else {
								tag.push(item.tag_3)
							}
							if (tag_4.length > 1) {
								for (let i = 0; i < tag_4.length; i++) {
									tag.push(tag_4[i])
								}
							} else {
								tag.push(item.tag_4)
							}
							return (
								{
									sort: 2,
									category: "ordinary",
									id: item.id,
									index: item.index,
									name: item.text,
									tag: tag
								}
							)
						});
						// console.log(ordinaryData_left)
						allData = ordinaryData_left.concat([...allData])
						// console.log(allData)
					})
					.then(() => {
						fetch(ordinaryUrl_right)
							.then(res => res.json())
							.then(data => {
								ordinaryData_right = data.map(item => {
									let tag = []
									let tag_1 = item.tag_1.split(",")
									let tag_2 = item.tag_1.split(",")
									let tag_3 = item.tag_1.split(",")
									let tag_4 = item.tag_4.split(",")
									if (tag_1.length > 1) {
										for (let i = 0; i < tag_1.length; i++) {
											tag.push(tag_1[i])
										}
									} else {
										tag.push(item.tag_1)
									}
									if (tag_2.length > 1) {
										for (let i = 0; i < tag_2.length; i++) {
											tag.push(tag_2[i])
										}
									} else {
										tag.push(item.tag_2)
									}
									if (tag_3.length > 1) {
										for (let i = 0; i < tag_3.length; i++) {
											tag.push(tag_3[i])
										}
									} else {
										tag.push(item.tag_3)
									}
									if (tag_4.length > 1) {
										for (let i = 0; i < tag_4.length; i++) {
											tag.push(tag_4[i])
										}
									} else {
										tag.push(tag_4)
									}
									return (
										{
											sort: 3,
											category: "ordinary",
											id: item.id,
											index: item.index,
											name: item.text,
											tag: tag
										}
									)
								});
								// console.log(ordinaryData_right)
								allData = ordinaryData_right.concat([...allData])
								// console.log(allData)
							})
							.then(() => {
								initHandler();
							})
							.then(() => {
								updatePage();
								srollToTop();
							});
					});
			});

		// get tagData
		fetch(tagUrl)
			.then(res => res.json())
			.then(data => {
				tagData = {
					fast: [],
					main: [],
					style: [],
					ingredient: []
				}
				data.forEach((item) => {
					if (item.tag_1 != "") {
						tagData.fast.push(item.tag_1);
					}
					if (item.tag_2 != "") {
						tagData.main.push(item.tag_2);
					}
					if (item.tag_3 != "") {
						tagData.style.push(item.tag_3);
					}
					if (item.tag_4 != "") {
						tagData.ingredient.push(item.tag_4);
					}
				});
				console.log(tagData)
			})
			.then(() => {
				createTagHtml();
			})
			.then(() => {
				$(".search__form__item[data-tag='" + getParams('search') + "']").addClass("active");
				searchTagOption();
				searchTagSubmit();
				searchFormClear();
			})
	}

	async function initHandler(){
		const sortDataBuild = await sortData();
		const searchDataBuild = await searchFilter(allData, searchTarget);
		const groupDataBuild = await getGroupData();
	}

	// 排序
	function sortData(){
		allData.sort(function(a,b){
			// console.log(a.index,b.index)
			return a.sort - b.sort
		})
		// console.log(allData)
	}

	// 找tag
	function searchFilter(data,tag){
		searchData = data.filter(function(item){
			
			let tagItems = item.tag;
			// console.log(item)
			return tagItems.filter(function(tagItem){
				return tag.indexOf(tagItem)>-1
			}).length === tag.length
		})
		// console.log(tag)
		console.log(searchData)
	}

	// 多少筆資料為一組
	function getGroupData(){
		groupData = [];
		for (let i = 0; i < searchData.length; i += groupNum) {
			groupData.push(searchData.slice(i, i + groupNum))
		}
		// console.log(searchData.length)
		console.log(groupData)

		if (groupData.length>0) {
			createResultHtml();
		}else {
			$searchList.html("目前無推薦料理<br>搜尋其他靈感吧");
			$searchPagination.html("");
		}
	}

	// 更新該頁碼內容
	function updatePage(){
		$(".search__result__pagination").on("click",".search__result__pageitem",function(){
			let activeNum = $(this).data("page");
			if (activeNum == "back") {
				pageActive--
			} else if (activeNum == "next") {
				pageActive++
			}else {
				pageActive = activeNum;
			}
			updatePageHandler();
		});
	}

	// 更新頁碼內容程序
	async function updatePageHandler(){
		const RecipeDataBuild = await createResultHtml();
	}

	// 標籤選項點擊
	function searchTagOption(){
		$(".search__form__list").on("click",".search__form__item",function(e){
			let tagCategory = $(this).parent(".search__form__list").data("category");
			if(!$(this).hasClass("active")) {
				$(".search__form__list[data-category='" + tagCategory + "']").find(".search__form__item").removeClass("active");
				$(this).addClass("active");
			}else {
				$(this).removeClass("active");
			}
		});
	}

	// 搜尋菜色
	function searchTagSubmit(){
		$(".search__form__cta").click(function(e){
			e.preventDefault();
			
			searchTagHandler();
		});
	}

	// 收集被選中的tag
	function tagAssemble() {
		searchTarget = [];
		$(".search__form__item").each(function () {
			let tagName = $(this).data("tag");
			if ($(this).hasClass("active")) {
				searchTarget.push(tagName)
			}
		});
		console.log(searchTarget)
	}

	// 點擊清除全部
	function searchFormClear(){
		$(".search__form__clear").click(function(){
			tagClear();
			pageActive = 1
		});
	}

	//  清除標籤
	function tagClear(){
		$(".search__form__item").removeClass("active")
	}

	function clearToInit(){
		pageActive = 1
	}

	async function searchTagHandler(){
		const tagAssembleBuild = await tagAssemble();
		const searchDataBuild = await searchFilter(allData, searchTarget);
		const clearToInitBuild = await clearToInit();
		const groupDataBuild = await getGroupData();
		const srollToRecommendBuild = await srollToRecommend();
	}

	// 產生標籤 tag HTML
	function createTagHtml(){
		for (let i = 0; i < tagData.fast.length ; i++) {
			$(".search__form__list-fast").append(`
				<div class="search__form__item" data-tag="${tagData.fast[i]}">
					${tagData.fast[i]}
				</div>
			`);
		}
		for (let i = 0; i < tagData.main.length; i++) {
			$(".search__form__list-main").append(`
				<div class="search__form__item" data-tag="${tagData.main[i]}">
					${tagData.main[i]}
				</div>
			`);
		}
		for (let i = 0; i < tagData.style.length; i++) {
			$(".search__form__list-style").append(`
				<div class="search__form__item" data-tag="${tagData.style[i]}">
					${tagData.style[i]}
				</div>
			`);
		}
		for (let i = 0; i < tagData.ingredient.length; i++) {
			$(".search__form__list-ingredient").append(`
				<div class="search__form__item" data-tag="${tagData.ingredient[i]}">
					${tagData.ingredient[i]}
				</div>
			`);
		}
		
	}

	// 滑至推薦食譜
	function srollToRecommend(){
		$("html,body").animate({
			scrollTop: $(".search__result").offset().top - 55
		});
	}

	// 滑至頂端
	function srollToTop() {
		$(".goTop").click(function(){
			$("html,body").animate({
				scrollTop: 0
			});
		});

	}

	// 產生推薦食譜
	function createResultHtml(){
		$searchList.html("");
		$searchPagination.html("");
		// 推薦菜單內容
		for (let i = 0; i < groupData[pageActive-1].length;i++){
			let item = groupData[pageActive-1][i]
			// console.log(item.name)
			if (item.category == 'kol') {
				$searchList.append(`
					<li class="search__result__item">
						<a href="./recipe.html?kol=${item.id}">${item.name}</a>
					</li>
				`)
			}else {
				$searchList.append(`
					<li class="search__result__item">
						<a href="./recipe_ordinary.html?ordinary=${item.id}">${item.name}</a>
					</li>
				`)
			}
			
		}
		//頁碼
		let elsePageNum = Math.ceil(pageItemNum / 2)
		// console.log("pageActive: " + pageActive)
		// console.log("groupData.length: " + groupData.length)
		// console.log("elsePageNum: " + elsePageNum)
		
		$searchPagination.append(`
			<li class="search__result__pageitem" data-page="back"><img src="./images/searchPage/pageitem-back.png"></li>
		`)
		
		if (pageActive >= elsePageNum && pageActive <= (groupData.length - elsePageNum)) {
			// 頁數於中間
			for (let i = (pageActive - (elsePageNum-1)); i < pageActive ;i++) {
				$searchPagination.append(`
					<li class="search__result__pageitem" data-page="${i}">${i}</li>
				`)
			}
			$searchPagination.append(`
				<li class="search__result__pageitem active" data-page="${pageActive}">${pageActive}</li>
			`)
			for (let i = (pageActive+1); i < (pageActive + (elsePageNum)); i++) {
				$searchPagination.append(`
					<li class="search__result__pageitem" data-page="${i}">${i}</li>
				`)
			}
			// console.log("pageActive >= elsePageNum && pageActive <= (groupData.length - elsePageNum)")
		}
		else if (pageActive >= (groupData.length - elsePageNum) && (groupData.length - elsePageNum)>0) {
			// 頁數於最後
			for (let i = (groupData.length - (pageItemNum - 1)); i < pageActive; i++) {
				$searchPagination.append(`
					<li class="search__result__pageitem" data-page="${i}">${i}</li>
				`)
			}
			$searchPagination.append(`
				<li class="search__result__pageitem active" data-page="${pageActive}">${pageActive}</li>
			`)
			for (let i = (pageActive+1); i <= groupData.length; i++) {
				$searchPagination.append(`
					<li class="search__result__pageitem" data-page="${i}">${i}</li>
				`)
			}
			// console.log("pageActive >= (groupData.length - elsePageNum)")
		}
		else if (pageActive <= (pageItemNum - (elsePageNum - 1)) && groupData.length > pageItemNum){
			// 頁數於最前
			for (let i = 1; i < pageActive; i++) {
				$searchPagination.append(`
					<li class="search__result__pageitem" data-page="${i}">${i}</li>
				`)
			}
			$searchPagination.append(`
				<li class="search__result__pageitem active" data-page="${pageActive}">${pageActive}</li>
			`)
			for (let i = (pageActive+1); i <= pageItemNum; i++) {
				$searchPagination.append(`
					<li class="search__result__pageitem" data-page="${i}">${i}</li>
				`)
			}
			// console.log("pageActive <= (pageItemNum - (elsePageNum-1)")
		}
		else {
			for (let i = 1; i < pageActive; i++) {
				$searchPagination.append(`
					<li class="search__result__pageitem" data-page="${i}">${i}</li>
				`)
			}
			$searchPagination.append(`
				<li class="search__result__pageitem active" data-page="${pageActive}">${pageActive}</li>
			`)
			for (let i = (pageActive + 1); i <= groupData.length; i++) {
				$searchPagination.append(`
					<li class="search__result__pageitem" data-page="${i}">${i}</li>
				`)
			}
			// console.log("else")
		}

		$searchPagination.append(`
			<li class="search__result__pageitem" data-page="next"><img src="./images/searchPage/pageitem-next.png"></li>
		`)

		if ($(".search__result__pageitem[data-page='back']").hasClass("disabled")) {
			$(".search__result__pageitem[data-page='back']").removeClass("disabled");
		}
		if ($(".search__result__pageitem[data-page='next']").hasClass("disabled")) {
			$(".search__result__pageitem[data-page='next']").removeClass("disabled");
		}

		if(pageActive == 1 ) {
			if (!$(".search__result__pageitem[data-page='back']").hasClass("disabled")) {
				$(".search__result__pageitem[data-page='back']").addClass("disabled");
			}
		}
		if(pageActive == groupData.length) {
			if (!$(".search__result__pageitem[data-page='next']").hasClass("disabled")) {
				$(".search__result__pageitem[data-page='next']").addClass("disabled");
			}
		}
	}

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

	//public
	return {
		intoPage: function(){
			intoPage();
		},
	};
};

var searchRecipe = new searchRecipe();