프로젝트 26일차

그래프 라이브러리를 찾았다!
billboard morrisjs 두개중 billboard를 쓰기로 했다. 일단 깃을 보니 지금 까지고 꾸준히 업데이트 되고 있다.
더 찾아보니 네이버에 만든 라이브러리였다. 그래프를 설정하는기 쉽고 다양한 그래프가 많다.

아래는 자바스크립트로 페이지네이션을 만들어 봤는데
역시 conroller에서 paginationUtil로 설정해서 pagination 값을 넘기는게 편하고 가독성이 좋은 방법 같다.
일단 지우기 아까워서 여기에다 남겨본다.

    		// 처음 설정
		if ($(".page-item:visible").eq(1).text() == 1) {
			$("[aria-label=Previous]").css('color', 'gray')
		}
		if($("li:has(.page)").length <= 3) {
			$("[aria-label=Next]").css('color', 'gray')
		}
		
		let searchUser = function(no, type) {
			$("#tbody-user").empty()
			let deleted = $("[name=delete]:checked").val()
			let email = $("[name=email]:checked").val()
			let sms = $("[name=sms]:checked").val()
			let option = $(":selected").val()
			let keyword = $("[name=keyword]").val()
			let countNo;
			$.getJSON('/rest/admin/userSearch.do',
				{option: option, keyword: keyword, email: email, sms:sms, deleted:deleted, pageNo:no},	
				function(response){
					if (response.items.length == 0) {
						$("[aria-label]").hide()
						let userNone;
						userNone = '<tr>'
						userNone += '<td colspan="9">사용자 정보가 존재하지 않습니다.</td>'
						userNone += '</tr>'
						
						$("#tbody-user").append(userNone)
						
					} else {
						$.each(response.items, function(index, user) {
							$("[aria-label]").show()
							let userList;
							userList = '<tr>'
							userList += '<td style="cursor: pointer; color: #7E5C5E;"><strong>' + user.no + '</strong></td>'
							userList += '<td>' + user.id + '</td>'
							userList += '<td>' + user.name + '</td>'
							userList += '<td>' + user.birth + '</td>'
							userList += '<td>' + user.email + '</td>'
							userList += '<td>' + user.tel + '</td>'
							userList += '<td>' + addCommas(user.point) + '</td>'
							userList += '<td>' + user.createdDate + '</td>'
							if (user.deleteCheck == 'Y') {
								userList += '<td>' + user.deletedDate + '</td>'
							} else {
								userList += '<td> - </td>'
							}
							userList += '</tr>'
							$("#tbody-user").append(userList)
						})
						if (type == 'search') {
							let pageNation = '';
		 					$("li:has(.page)").remove()
							// 검색으로 진행될때 만들어야 될 페이지 네이션
							let totalBlock = response.totalBlock;
							for (var i=1; i<= totalBlock; i++) {
								if (no == 1 && i == 1) {
									pageNation += '<li class="page-item active"><a class="page-link page" href="#">' + 1 + '</a></li>';
								} else if (i > 3) {
									pageNation += '<li class="page-item" style="display: none;"><a class="page-link page" href="#">' + i + '</a></li>';
								} else {
									pageNation += '<li class="page-item"><a class="page-link page" href="#">' + i + '</a></li>';
								}
							}
							$(".page-item").eq(0).after(pageNation) 
							
							if(totalBlock <= 3) {
								$("[aria-label=Next]").css('color', 'gray')
							} else {
								$("[aria-label=Next]").css('color', 'blue')
							}
						}
					}
				}
			)
			
		}
		
		$('ul').on('click', "[aria-label=Next]", function() {
			// visible된 값을 끝값
			// active된 값이 3*n 안에 들때 그 n값이 1이면 next는 n*3 n+1*3 인 것을 visible시킨다.
			// 0, 1, 2, 3, 4, 5, 6  첫번째 숫자는 3*(block-1), 마지막 숫자는 3*block-1 이다.
			// 지금 있는 block의 마지막 page숫자
			let lastBlock = $("li:has(.page):visible").eq(2).text() // 3
			// 지금 있는 block 번호
			let block = Math.ceil($("li:has(.page):visible").eq(0).text()/3) // 1
			// 다음 블록이 있다면 
			if ($("li:has(.page)").eq(block*3).length != 0) {
				// 그 다음다음 블록이 존재하는가?
				if ($("li:has(.page)").eq((block+1)*3).length == 0) {
					$(this).css('color', 'gray')
				}
				$("[aria-label=Previous]").css('color', 'blue')
				$("li:has(.page)").hide()
				$("li:has(.page)").slice(lastBlock, 3*(block+1)).show()
				
				searchUser($("li:has(.page)").eq(lastBlock).text(), 'pageNation')
				$(".page-item").removeClass('active')
				$("li:has(.page)").eq(lastBlock).addClass('active')
			} else {
				$(this).css('color', 'gray')
			}
		})
		
		$('ul').on('click', '[aria-label=Previous]', function() {
			// visible된 값을 첫번째 값
			// 0, 1, 2, 3, 4, 5, 6  첫번째 숫자는 $("li:has(.page)")의 3*(block-1), 마지막 숫자는 3*block-1 이다.
			// block의 첫번째 값
			let firstBlock = $("li:has(.page):visible").eq(0).text() // 4 // 1
			// 현재 block 값
			let block = (Math.ceil($("li:has(.page):visible").eq(0).text()/3)) // 2 // 1
			
			if (block-1 != 0) {
				// 그 다음다음 블록이 존재하는 가? 그 다음다음의 마지막 값 첫번째 값의 -1
				if ($("li:has(.page)").eq((block-2)*3).text() == 1) {
					$(this).css('color', 'gray')
				}
				$("[aria-label=Next]").css('color', 'blue')
				$("li:has(.page)").hide()
				// 그다음 블록의 첫번째 값 ,  지금 블록의 첫번째 값
				$("li:has(.page)").slice(3*(block-2), 3*(block-1)).show()
				// 그 다음 블록의 마지막 값
				searchUser($("li:has(.page)").eq(3*block-4).text(), 'pageNation')
				$(".page-item").removeClass('active')
				$("li:has(.page)").eq(3*block-4).addClass('active')
			} else {
				$(this).css('color', 'gray')
			}
		})
		
		
		$('ul').on('click', 'li:has(.page)', function() {
			searchUser($(this).text(), 'pageNation')
			$(this).siblings().removeClass('active')
			$(this).addClass('active')
		})
		
		// 엔터키를 눌렀을 때 
		$("#form-search-user").keypress(function(e) {
			e.preventDefault();
			if (e.keyCode == 13) {
				searchUser(1, 'search')
			}

		})
		// 검색 버튼을 눌렀을 때
		$(".btn-search").click(function(){
			searchUser(1, 'search')
			
		})