<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<c:set var="prefixName" scope="request">단속장비 관리</c:set>
<div class="content-wrapper" data-doctx="${pageName}">
	<!-- Page Body -->
	<div class="dataTables_wrapper dt-bootstrap5">
		<div class="d-flex flex-row justify-content-between py-3">
			<div class="d-flex flex-grow-1 me-5">
				<div class="input-group me-3 w-px-400">
					<select name="schType"
						onchange="ctrl.find('name', 'schTypeTxt').focus();"
						class="form-select">
						<option value="placeName">단속장소명</option>
						<option value="eqplcCode">장비코드</option>
					</select> 
					<input name="schTypeTxt" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
				</div>
			</div>
			<div>
				<button type="button" name="btnSearch" class="btn btn-search w-px-120" title="검색">검색</button>
				<button type="button" name="btnInsert" class="btn btn-primary w-px-120" title="추가">추가</button>
				<button type="button" name="btnRemove" class="btn btn-primary w-px-120" title="삭제">삭제</button>
			</div>
		</div>
		<div name="table-responsive" class="table-responsive">
			<table class="table dataTable table-bordered">
				<thead name="eqplcThead">
					<tr><th style="width: 70px;">ID</th>
						<th style="width: 70px;">업체코드</th>
						<th style="width: 70px;">장비코드</th>
						<th style="width: 120px;">단속장소명</th>
						<th style="width: 70px;">법정동명</th>
						<th style="width: 150px;">도로명</th>
						<th style="width: 150px;">단속장소</th>
						<th style="width: 40px;">차선번호</th>
						<th style="width: 40px;">차선방향</th>
						<th style="width: 300px;">비고</th>
						<th style="width: 150px;">등록일시</th>
						<th style="width: 100px;">등록자</th>
					</tr>
				</thead>
				<tbody name="eqplcTbody"></tbody>
				<template is="curly-brackets" name="eqplcRow">
                  	<tr data-index="DATA-INDEX">            		
						<td onclick ondblclick class="text-center">{EQPLC_CD}</td>
						<td onclick ondblclick class="text-center">{CMPNY_CD}</td>
						<td onclick ondblclick class="text-center">{EQP_CD}</td>
						<td onclick ondblclick class="text-center">{PLC_NM}</td>
						<td onclick ondblclick class="text-center">{STDG_NM}</td>
						<td onclick ondblclick class="text-center">{ROAD_NM}</td>
						<td onclick ondblclick class="text-center">{PLC}</td>
						<td onclick ondblclick class="text-center">{LANE_NO}</td>
						<td onclick ondblclick class="text-center">{DRCTN_STR}</td>
						<td onclick ondblclick class="text-center">{ETC_INFO}</td>
						<td onclick ondblclick class="text-center">{REG_DT}</td>
						<td onclick ondblclick class="text-center">{RGTR_NM}</td>                   		
                   	</tr>
              	</template>
              	<template name="eqplcNotFound">
              		<tr><td valign="top" colspan="12" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td></tr>
              	</template>				
			</table>
		</div>
		<div class="d-flex flex-row p-3 justify-content-between">
			<label name="eqplcPagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
			<ul name="eqplcPaging" class="pagination pagination-primary">
			</ul>
		</div>
	</div>
</div>
<script>
LoadScript("eqplcScript",wctx.url("/resources/js/fims/eqplc/eqplc.js?${ver}"));

/**************************************************************************
* Global Variable
**************************************************************************/

pageObject["${pageName}"] = newDoctxFinder("${pageName}");

$(document).ready(function(){
	var $P = pageObject["${pageName}"];

	/**************************************************************************
	* DatasetControl, DatasetSupport, FormFields
	**************************************************************************/
	var ctrl = newEqplcControl($P);
	ctrl.defaultFetchSize = FETCH_XS;

	ctrl.dataset.onDatasetChange = (obj, option) => {
		var t = $P.getGridTemplate();
		var trs = Apply.fromDataset.getTbody(ctrl.dataset, t.found, t.notFound, t.replacer);
		$P.renderEqplcList(ctrl.dataset.totalSize = obj["Paging"]?.totalSize, ctrl.dataset.length, trs, option);
		
		$P.pagingSupport.setPagingInfo(obj);
	};

	ctrl.dataset.onCurrentChange = (dataItem) => {
		Apply.fromDataset.currentRow(ctrl.dataset, dataItem, $P.findn("eqplcTbody"));
	}
	ctrl.dataset.onSort = sorter => {
		let t = $P.getGridTemplate(),
			trs = Apply.fromDataset.getTbody(ctrl.dataset, t.found, t.notFound, t.replacer);
		
		if (sorter.by)
			$P.renderEqplcList(ctrl.dataset.totalSize, ctrl.dataset.length, trs);
		
		document.querySelectorAll("div[data-doctx='${pageName}'] table[name='eqplcTable'] th[data-sort]").forEach(th => {
			th.classList.remove(
				TableSupport.cssClass.sortable,
				TableSupport.cssClass.asc,
				TableSupport.cssClass.desc
			);
			if (th.getAttribute("data-sort") == sorter.by)
				th.classList.add(TableSupport.cssClass[sorter.order]);
			else
				th.classList.add(TableSupport.cssClass.sortable);
		});
	};

	$P.pagingSupport = new FimsPagingSupport({
		doq: $P,
        linkContainer: "[name='eqplcPaging']"
	});

	/**************************************************************************
	* pageObject.function
	**************************************************************************/
	/*
	$P.fnReset = () => {
		var searchForm = $P.$findn("frmSearch");
		searchForm.find("input[type='text']").val("");
		searchForm.find("input[type='hidden']").val("");

		ctrl.dataset.setData([]);
	}

	$P.getParams = () => {
		var formFields = new FimsFormFields($P.selectorn("frmSearch"));
		var data = formFields.get();
		data.fetchSize = ctrl.defaultFetchSize;
		return data;
	}
	*/
	$P.searchList = () => {
		ctrl.query = {
			pageNum : 1,
			fetchSize : ctrl.defaultFetchSize,
			schType: ctrl.find("name", "schType").value,
			schTypeTxt: ctrl.find("name", "schTypeTxt").value
		};

	    ctrl.load(1);
	}

	$P.scrollEqplcList = () => {
		ctrl.load(ctrl.query.pageNum + 1);
	}

	$P.refreshList = () => {
    	if (ctrl.query.pageNum == null)
    		ctrl.query.pageNum = 1;
        ctrl.reload({all : true});
    }

	$P.getGridTemplate = () => {
		var notFound = [$P.findn("eqplcNotFound").innerHTML];
		var found = $P.findn("eqplcRow").innerHTML;
		var replacer = (str, dataItem) => str
			.replace(/{onclick}/gi, "pageObject['${pageName}'].clickEqplcList('{DATA-INDEX}');")
        	.replace(/{ondblclick}/gi, "pageObject['${pageName}'].dblclickEqplcList('{EQPLC_CD}');");

		return {
			found : found,
			notFound : notFound,
			replacer : replacer
		};
	}

	$P.renderEqplcList = (total, listLength, trs, option) => {
		let noMore = (listLength >= total);
		let initScroll = (ctrl.query.pageNum < 2);
		if (option != null && option.reloaded){
			initScroll = false;
		}

		$P.findn("table-responsive").changeContent(trs, initScroll, noMore);

	    fn_securityModeToggle($("#securityMode--top").is(":checked"));
	}
	
	$P.clickEqplcList = (dataIndex) => {
		if (!dataIndex) {return;}

		$P.$findn("eqplcTbody").setCurrentRow(dataIndex);

		Apply.toDataset.current(ctrl.dataset, dataIndex);
	}	

	$P.dblclickEqplcList = (dataKey) => {
		if (!dataKey) return;

		let dataItem = ctrl.dataset.getDataset("item").filter(item => item.data.EQPLC_CD == dataKey)[0];
		var data = dataItem.data;
		$P.info({"eqplcCd" : dataKey});
	}

	$P.info = (param) => {
		ajax.get({
			url : ctrl.urls.info,
			data: param,
			success:(resp) => {
				let dialogName = "eqplcDialog";
				let dialogId = dialogName+"-"+uuid();

				dialog.open({
					id: dialogId,
					title: isEmpty(param) ? "단속장비장소 정보 등록" : "단속장비장소 정보 수정",
					content:resp,
					size: "md",
					init:() => {
						$("#"+dialogId).attr("name", dialogName);
						$("#"+dialogId).attr("data-ref-doctx","${pageName}");

						var parentRes = new Object();
						var childReq = pageObject.childReq.pop();

						for(var reqKey in childReq) {
						    if ($P.provide[reqKey]){
						    	parentRes[reqKey] = $P.provide[reqKey];
						    } else {
						    	parentRes[reqKey] = function(){};
						    }
						}

						pageObject.parentRes.push(parentRes);
					}
				});
			}
		});
	};

	$P.fnRemove = () => {
		dialog.alert({
			content:"선택한 ${prefixName} 정보를 제거하시겠습니까?",
			onOK:() => {
				var dataKey = ctrl.dataset.getCurrent()["EQPLC_CD"];
				ajax.post({
					url : ctrl.urls.update,
					data : {
						"eqplcCd" : dataKey,
						"useYN"   : "N"
					},
					success : (resp) => {
						if (resp.saved){
							dialog.alert({
								content : "저장됐습니다.",
								init : function() {
									AppSupport.setDialogZindex();
									AppSupport.focusClose();
								}
							});
							dialog.close($P.selfDlgId());							
							$P.refreshList();
						}
					}
				});
				
			}
		});		
	};
	
	$P.provide = {
		"refreshList" : function(){
    		$P.refreshList();
    	}
	}

	$P.sortEqplcList = e => {
		let col = e.getAttribute("data-sort");
		ctrl.dataset.sort(col);
	};

	/**************************************************************************
	* element.on
	**************************************************************************/
	//$P.$findn("btnReset").on('click', () => $P.fnReset()); 
	$P.$findn("btnSearch").on("click", () => $P.searchList());
	//$P.$findn("btnExcel").on('click', () => $P.fnExcelDown());

	$P.$findn("btnInsert").on('click', () => { $P.info({"eqplcCd" : ""}); });
	$P.$findn("btnRemove").on('click', () => { $P.fnRemove(); });
	document.querySelectorAll("div[data-doctx='${pageName}'] table[name='eqplcTable'] th[data-sort]").forEach(th => {
		th.addEventListener('dblclick', () => $P.sortEqplcList(th));
	});

	Componentization.fnMakeScrollableTable($P.findn("table-responsive"), $P.scrollEqplcList);
	Componentization.fnMakeResizableTable($P.findn("table-responsive"));

    /**************************************************************************
	* 초기화
	**************************************************************************/

	//$P.fnReset();
	//보안모드
    fn_securityModeToggle($("#securityMode--top").is(":checked"));
	
    $P.searchList();
});
//# sourceURL=eqplc-main.jsp
</script>