steve07s
/
DataBase


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037
							<?php
session_start();
//Can't come in without logged in
if (!isset($_SESSION['loggedin'])) {
	header('Location: ../Front-Page/pages-signin.html');
	exit;
}
?>
<!doctype html>
<html class="fixed">

<head>
	<!-- Basic -->
	<meta charset="UTF-8">
	<title>設計資料庫查詢系統</title>
	<meta name="keywords" content="HTML5 Admin Template" />
	<meta name="description" content="JSOFT Admin - Responsive HTML5 Template">
	<meta name="author" content="JSOFT.net">

	<script src="assets/vendor/jquery/jquery.js"></script>
	<script src="./assets/vendor/jquery-hoverIntent/jquery.hoverIntent.js"></script>
	<!-- Mobile Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<!-- Web Fonts  -->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
	<!-- jstree CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css">
	<!-- Vendor CSS -->
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css" />
	<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />
	<link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/datepicker3.css" />
	<link rel="stylesheet" href="assets/vendor/pnotify/pnotify.custom.css" />
	<!-- Specific Page Vendor CSS -->
	<link rel="stylesheet" href="assets/vendor/jquery-ui/css/ui-lightness/jquery-ui-1.10.4.custom.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-multiselect/bootstrap-multiselect.css" />
	<link rel="stylesheet" href="assets/vendor/morris/morris.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-fileupload/bootstrap-fileupload.min.css" />
	<!-- Theme CSS -->
	<link rel="stylesheet" href="assets/stylesheets/theme.css" />
	<!-- Skin CSS -->
	<link rel="stylesheet" href="assets/stylesheets/skins/default.css" />
	<!-- Theme Custom CSS -->
	<link rel="stylesheet" href="assets/stylesheets/theme-custom.css">
	<!-- Head Libs -->
	<script src="assets/vendor/modernizr/modernizr.js"></script>
	<!-- chart.js -->
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<!-- DataTable -->
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
	<!-- Icon -->
	<link rel="shortcut icon" href="assets/images/favicon.ico" />
	<link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet">
	<link href="./CustomCSS/main.css" rel="stylesheet">
	<script src="./script/js/bootstrap.js"></script>
	<script src="./script/js/pdfobject.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
	<script src="./script/js/jstreeAJAX.js"></script>
	<script src="https://js.arcgis.com/4.21/"></script>
	
	<style>
		.page-header>ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.page-header>ul>li {
			display: inline-block;
			font-size: 25px;
			color: #FFFFFF;
		}

		.page-header>ul>li.right {
			float: right;
			padding-right: 10px;
		}

		.input-search {
			margin-top: 8px;
		}

		.page-header li>label {
			margin-top: 13px;
			border-bottom: 4px solid #0088cc;
			height: 41px;
		}

		.sidebar-left {
			box-shadow: 0 0 0;
		}

		.jstree-default .jstree-icon {
			color: #ffe693;
		}

		.jqsfield {
			color: white;
			font: 10px arial, san serif;
			text-align: left;
		}

		.jstree-anchor {
			width: 250px;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.jstree-anchor,
		.jstree-anchor:link,
		.jstree-anchor:visited,
		.jstree-anchor:hover,
		.jstree-anchor:active {
			color: #abb4be;
		}

		td,
		th {
			text-align: center;

		}

		th {
			width: 30%;
		}

		.nav-main {
			padding: 15px;
		}

		.node-hidden {
			display: none;
		}

		html.fixed .page-header {
			left: 349px;
		}

		html.fixed .content-body {
			margin-left: 350px;
		}

		.sidebar-left {
			width: 350px;
		}

		#datatable-ajax tr:hover {
			background-color: #e8e8e8;
		}

		#viewDiv {
			height: 100%;
			width: 100%;
		}

		#zoom {
			margin-bottom: 5px;
		}

		#actions {
			padding: 5px;
		}

		.container {
			height: 50%;
			width: 100%;
		}

		#createSlideDiv {
			background-color: white;
			opacity: 0.9;
			color: black;
			padding: 6px;
		}

		#slidesDiv {
			background-color: white;
			opacity: 0.9;
			color: black;
			padding: 10px;
			visibility: hidden;
			bottom: 20px;
			overflow-y: auto;
			text-align: center;
			height: 260px;
		}

		#slidesDiv .slide {
			/* Show cursor as pointer when on a slide */
			cursor: pointer;
			margin-bottom: 6px;
		}

		#slidesDiv .slide .title {
			/* Center the title text */
			text-align: center;
		}

		/* Draw active slide with a nice border around the thumbnail */

		#slidesDiv .slide.active img {
			box-shadow: 0px 0px 12px black;
			border-style: solid;
			border-width: thin;
			border-color: black;
		}

		.pdfobject-container {
			height: 730px;
		}

		#topbar {
			background: #fff;
			padding: 10px;
		}

		#datatable-ajax_length {
			width: 100%;
		}

		.multiselect {
			width: 200px;
		}

		.selectBox {
			position: relative;
			width: 200px;
		}

		.selectBox select {
			width: 100%;
			font-weight: bold;
		}

		.overSelect {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		.checkboxes {
			display: none;
			border: 1px #dadada solid;
			background-color: white;
			z-index: 2;
			position: absolute;
			width: 200px;
			display: none;
		}

		.checkboxes label {
			display: block;
			padding-left: 10px;
			padding-right: 10px;
			padding-top: 5px;
			padding-bottom: 5px;
		}

		.checkboxes label:hover {
			background-color: #1e90ff;
			color: #ffffff;
		}

		.multiselect {
			display: inline-block;
		}

		#filter-slide{
			width: 100%;
		}

	</style>

	<script>
		$(document).ready(function() {
			getToken();
		});
		var token;

		function getToken() {
			var t;
			$.ajax({
				url: "./scripts/PHP/access_token.php",
				type: "GET",
				async: false,
			}).done(function(data) {
				token = data;
				//data = JSON.parse(data);
			}).error(function() {

			});
		}

		require([
			"esri/config",
			"esri/Map",
			"esri/WebScene",
			"esri/views/SceneView",
			"esri/core/urlUtils",
			"esri/identity/OAuthInfo",
			"esri/identity/IdentityManager",
			"esri/widgets/Legend",
			"esri/widgets/Home",
			"esri/widgets/Fullscreen",
			"esri/widgets/Slider",
			"esri/widgets/BasemapGallery",
			"esri/widgets/LayerList",
			"esri/layers/GroupLayer",
			"esri/layers/FeatureLayer",
			"esri/widgets/FeatureTable",
			"esri/tasks/support/Query",
			"esri/layers/SceneLayer",
			"esri/widgets/Zoom",
			"esri/widgets/Compass",
			"esri/widgets/NavigationToggle",
			"esri/widgets/Slice",
			"esri/widgets/Search",
			"esri/geometry/Point",
			"esri/geometry/Polyline",
			"esri/webscene/Slide",
			"esri/symbols/WebStyleSymbol",
			"esri/widgets/DirectLineMeasurement3D",
			"esri/widgets/AreaMeasurement3D",
			"esri/Graphic",
			"esri/widgets/Search/LocatorSearchSource",
			"esri/renderers/UniqueValueRenderer",
			"esri/geometry/geometryEngine",
			"esri/widgets/Expand",
			"esri/layers/GeoJSONLayer",
			"esri/PopupTemplate",
			"esri/renderers/Renderer",
			"esri/geometry/projection"
		], (esriConfig, Map, WebScene, SceneView, urlUtils, OAuthInfo, esriId,
			Legend,
			Home,
			Fullscreen,
			Slider,
			BasemapGallery,
			LayerList,
			GroupLayer,
			FeatureLayer,
			FeatureTable,
			Query,
			SceneLayer,
			Zoom,
			Compass,
			NavigationToggle,
			Slice,
			Search,
			Point,
			Polyline,
			Slide,
			WebStyleSymbol,
			DirectLineMeasurement3D,
			AreaMeasurement3D,
			Graphic,
			LocatorSearchSource,
			UniqueValueRenderer,
			geometryEngine,
			Expand, GeoJsonLayer, PopupTemplate, Renderer, projection) => {
			esriConfig.apiKey = token;
			let activeWidget = null;
			const webscene = new WebScene({
				portalItem: {
					id: "dea6580d8d4547df9915a822fe7f2b9d"

				},
				opacity: .75,
				showAttribution: false,

			});

			var featureLayer = new FeatureLayer({

				url: "https://services3.arcgis.com/W6g8dmWX0ILAHcNd/arcgis/rest/services/%E5%B7%A5%E7%A8%8B%E8%A8%AD%E8%A8%88%E8%B3%87%E6%96%99%E5%BA%AB/FeatureServer",
				outFields: ["*"],
				//renderer: poleRenderer,
				title: "工程設計資料庫",
				elevationInfo: "on-the-ground",
				visible: true
			});
			webscene.add(featureLayer);

			const view = new SceneView({
				container: "viewDiv",
				map: webscene,
				popup: {
					defaultPopupTemplateEnabled: true,
					dockEnabled: true,
					dockOptions: {
						breakpoint: false,
						buttonEnabled: false,
						position: "bottom-right",
					}

				}
			});


			window.view = view;

			view.ui.empty("top-left");
			//view.ui.empty("manual");
			view.ui.add(
				new Expand({
					view: view,
					content: new BasemapGallery({
						view: view
					}),
					autoCollapse: true,
					group: "top-left"
				}),
				"top-left"
			);


			view.ui.add(
				new Expand({
					view: view,
					content: new Legend({
						view: view
					}),
					autoCollapse: true,
					group: "top-left"
				}),
				"top-left"
			);

			view.ui.add(
				new Home({
					view: view,
					group: "top-left"
				}),
				"top-left"
			);

			//新增量測工具			
			view.ui.add("topbar", "bottom-right");

			document
				.getElementById("distanceButton")
				.addEventListener("click", (event) => {
					setActiveWidget(null);
					if (!event.target.classList.contains("active")) {
						setActiveWidget("distance");
					} else {
						setActiveButton(null);
					}
				});

			document
				.getElementById("areaButton")
				.addEventListener("click", (event) => {
					setActiveWidget(null);
					if (!event.target.classList.contains("active")) {
						setActiveWidget("area");
					} else {
						setActiveButton(null);
					}
				});

			document
				.getElementById("clear")
				.addEventListener("click", (event) => {
					setActiveWidget(null);
					setActiveButton(null);
				});

			function setActiveWidget(type) {
				switch (type) {
					case "distance":
						activeWidget = new DirectLineMeasurement3D({
							view: view
						});

						// skip the initial 'new measurement' button
						activeWidget.viewModel.start().catch((error) => {
							if (promiseUtils.isAbortError(error)) {
								return; // don't display abort errors
							}
							throw error; // throw other errors since they are of interest
						});

						view.ui.add(activeWidget, "bottom-left");
						setActiveButton(document.getElementById("distanceButton"));
						break;
					case "area":
						activeWidget = new AreaMeasurement3D({
							view: view
						});

						// skip the initial 'new measurement' button
						activeWidget.viewModel.start().catch((error) => {
							if (promiseUtils.isAbortError(error)) {
								return; // don't display abort errors
							}
							throw error; // throw other errors since they are of interest
						});

						view.ui.add(activeWidget, "bottom-left");
						setActiveButton(document.getElementById("areaButton"));
						break;

					case null:
						if (activeWidget) {
							view.ui.remove(activeWidget);
							activeWidget.destroy();
							activeWidget = null;
						}
						break;
				}
			}

			function setActiveButton(selectedButton) {
				// focus the view to activate keyboard shortcuts for sketching
				view.focus();
				const elements = document.getElementById("topbar").getElementsByClassName("active");
				for (let i = 0; i < elements.length; i++) {
					elements[i].classList.remove("active");
				}
				if (selectedButton) {
					selectedButton.classList.add("active");
				}
			}


			view.ui.add(
				new Fullscreen({
					view: view,
					group: "top-left"
				}),
				"top-right"
			);
			view.ui.add(
				new Zoom({
					view: view
				}),
				"top-right"
			);
			view.ui.add(
				new NavigationToggle({
					view: view
				}),
				"top-right"
			);
			view.ui.add(
				new Compass({
					view: view
				}),
				"top-right"
			);


			$("#measureExpendDiv .esri-widget--button").click(function() {
				if (pMeasureExpand.expanded) {
					activeMeasureWidget.viewModel.newMeasurement();
				} else {
					activeMeasureWidget.viewModel.clearMeasurement();
				}
			});

			function zoomToLayer(layer) {
				return layer.queryExtent().then((response) => {
					view.goTo({
						target: response.extent,
						tilt: 0,
						heading: 0,
					}).catch((error) => {
						console.error(error);
					});
				});
			}

			$('#treeAjaxHTML').on("select_node.jstree", function(e, data) {
				if (data.node.text.includes("-")) {
					project_id = data.node.text.split("-")[0];
					featureLayer.definitionExpression = "計畫編號 = " + project_id;
					zoomToLayer(featureLayer);
				}
				/*else{
									type = data.node.text;
									console.log(type);
									featureLayer.definitionExpression = "工程類別 = '"+ type + "'";
									zoomToLayer(featureLayer);
								}*/
			});
			view.when(function() {

			});


		});
		var db_table = {};
		$.ajax({
			url: "./script/php/get_db_table.php",
			type: "GET",
			async: false,
			contentType: "application/json",
			dataType: "json"
		}).done(function(data) {
			db_table = data;
		}).error(function(error) {
			console.log(error);
		});

		db_table["notes"] = merge_object_by_key(db_table["notes"], "project_id", "notes");
		var notes_button_list = [...new Set([].concat(...Object.values(db_table["notes"])))];

		var search_data = {
			"category": get_value_list_by_key(db_table["category"], null, -1, "category_id").toString().split(","),
			"project": get_value_list_by_key(db_table["project"], null, -1, "project_id"),
			"type": get_value_list_by_key(db_table["type"], null, -1, "type_id").toString().split(","),
			"notes": notes_button_list
		};

		var filter_base_data = search_data;

		function get_value_list_by_key(obj_list, key_search, target_value, key_save) {
			output_list = [];
			obj_list.forEach(element => {
				if (target_value != -1) {
					target_value.forEach(e => {
						if(e.toString() == element[key_search].toString()) {
							output_list.push(element[key_save]);
						}
					});
				} else {
					output_list.push(element[key_save]);
				}
			});
			output_list = [...new Set(output_list)];
			return output_list;
		}

		function merge_object_by_key(obj, key, value) {
			output_object = {};
			while (obj.length > 0) {
				pop_out = obj.pop();
				if (output_object[pop_out[key]] == undefined) {
					output_object[pop_out[key]] = [pop_out[value]];
				} else {
					output_object[pop_out[key]].push(pop_out[value]);
				}
			}
			return output_object
		}
	</script>
</head>

<body>
	<script type="application/javascript">
		var test;
		var i = 0;
		var download;
		var fileName;
		var folder;
		var software;
		var userName = 'maabim';


		jQuery(window).load(function() {			
			var url_href = window.location.href;
			var url = new URL(url_href);
			var type = url.searchParams.get("type");
			var projectId = url.searchParams.get("projectId");
			if (projectId != null) {
				var projectNode = $(".jstree-anchor").filter(function() {
					return $(this).text().includes(projectId);
				});
				let nodeId = projectNode[0].attributes.id.value;
				$('#treeAjaxHTML').jstree("select_node", nodeId);
				$("#treeAjaxHTML").jstree("close_all");
			}
		});

		//var typeId = node[0].attributes.id.value;
	</script>
	<section class="body">
		<!-- start: header -->
		<header class="header">
			<div class="logo-container">
				<div class="banner-txt">設計資料庫查詢系統</div>
				<div class="visible-xs toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
					<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
				</div>
			</div>
			<!-- start: search & user box -->
			<div class="header-right">
				<span class="separator"></span>
				<ul class="notifications">
					<li>
						<a href="./upload.html" class="notification-icon" data-toggle="tooltip" title="匯入工具" data-placement="bottom">
							<i class="fa fa-upload"></i>
						</a>
						<a href="/Front-Page/home.php" class="notification-icon" data-toggle="tooltip" title="綜合登入入口" data-placement="bottom">
							<i class="fa fa-home"></i>
						</a>
					</li>
				</ul>
				<span class="separator"></span>
				<div id="userbox" class="userbox">
					<a href="#" data-toggle="dropdown">
						<figure class="profile-picture"> <img src="assets/images/!logged-user.jpg" alt="Joseph Doe" class="img-circle" data-lock-picture="assets/images/!logged-user.jpg" /> </figure>
						<div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe@JSOFT.com"> <span class="name"><?php echo $_SESSION['name'] ?></span> <span class="role">tester</span> </div> <i class="fa custom-caret"></i>
					</a>
					<div class="dropdown-menu">
						<ul class="list-unstyled">
							<li class="divider"></li>
							<li> <a role="menuitem" tabindex="-1" href="./script/php/Logout.php"><i class="fa fa-power-off"></i> Logout</a> </li>
						</ul>
					</div>
				</div>
			</div>
			<!-- end: search & user box -->
		</header>
		<!-- end: header -->
		<div class="inner-wrapper">
			<!-- start: sidebar -->
			<aside id="sidebar-left" class="sidebar-left">

				<div class="nano">
					<div class="nano-content">
						<nav id="menu" class="nav-main" role="navigation">
							<div class="widget-header clearfix">
								<h6 class="title pull-left mt-xs">資料庫文件</h6>
							</div>
							<div class="widget-content">
								<div class="jstree jstree-1 jstree-default" id="treeAjaxHTML"></div>
							</div>
						</nav>
					</div>
				</div>
			</aside>
			<!-- end: sidebar -->
			<section role="main" class="content-body">
				<header class="page-header">
					<ul>
						<li>
							<label id="header"></label>
						</li>
						<li class="right">
							<a class="mb-xs mt-xs mr-xs modal-with-move-anim btn btn-default" href="#advancedSearch"><i class="fa fa-search"></i> 進階搜尋</a>
						</li>
					</ul>
				</header>
				<div class="row">
					<div id="advancedSearch" class="zoom-anim-dialog modal-block modal-block-primary mfp-hide">
						<section class="panel">
							<header class="panel-heading">
								<h2 class="panel-title">進階搜尋</h2>
							</header>
							<div class="panel-body">
								<form class="form-horizontal form-bordered" method="get">
									<div class="form-group" id="category">
										<label class="col-md-3 control-label">工程類別:</label>
										<div class="multiselect col-md-6">
											<div class="selectBox">
												<select>
													<option>選擇工程</option>
												</select>
												<div class="overSelect"></div>
											</div>
											<div class="checkboxes form-inline" style="display: none; overflow-y:scroll; height:300px">
												<label for="category-any"><input type="checkbox" id="category-any" value="any" checked/> 全選</label>
												<!-- append option -->
											</div>
										</div>
									</div>

									<div class="form-group" id="project">
										<label class="col-md-3 control-label">專案類別:</label>
										<div class="multiselect col-md-6">
											<div class="selectBox">
												<select>
													<option>選擇專案</option>
												</select>
												<div class="overSelect"></div>
											</div>
											<div class="checkboxes form-inline" style="display: none; overflow-y:scroll; height:300px">
												<label for="project-any"><input type="checkbox" id="project-any" value="any" checked/> 全選</label>
												<!-- append option -->
											</div>
										</div>
									</div>

									<div class="form-group" id="type">
										<label class="col-md-3 control-label">文件類別:</label>
										<div class="multiselect col-md-6">
											<div class="selectBox">
												<select>
													<option>選擇文件</option>
												</select>
												<div class="overSelect"></div>
											</div>
											<div class="checkboxes form-inline" style="display: none; overflow-y:scroll; height:300px">
												<label for="type-any"><input type="checkbox" id="type-any" value="any" checked/> 全選</label>
												<!-- append option -->
											</div>
										</div>
									</div>

									<div class="form-group" id="notes" style="display: bllock;" hidden>
										<label class="col-md-3 control-label">設計圖類別:</label>
										<div class="multiselect col-md-6">
											<div class="selectBox">
												<select>
													<option>選擇設計圖</option>
												</select>
												<div class="overSelect"></div>
											</div>
											<div class="checkboxes form-inline" style="display: none; overflow-y:scroll; height:300px">
												<label for="notes-any"><input type="checkbox" id="notes-any" value="any" checked/> 全選</label>
												<!-- append option -->
											</div>
										</div>
									</div>

									<div class="form-group">
										<label class="col-md-3 control-label" for="search-word">文字搜尋:</label>
										<div class="col-md-6">
											<input type="text" class="form-control" placeholder="輸入關鍵字" id="search-word">
										</div>
									</div>
								</form>
								
							</div>
							<footer class="panel-footer">
								<div class="row">
									<div class="col-md-12 text-right">
										<div id="treeAjaxJSON" class="jstree jstree-4 jstree-default" role="tree"  style="display: none;">
											<ul class="jstree-container-ul jstree-children">
												<li class="jstree-initial-node jstree-loading jstree-leaf jstree-last">
													<i class="jstree-icon jstree-ocl"></i>
													<a class="jstree-anchor" href="#"><i class="jstree-icon jstree-themeicon-hidden"></i>Loading ...</a>
												</li>
											</ul>
										</div>
										<div class="progress progress-striped light active m-md" style="display: none;">
											<div class="progress-bar progress-bar-primary" id="progress-bars" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
										</div>
										<div class="jstree jstree-4 jstree-default" id="loading" style="display: none;">
											<ul class="jstree-container-ul">
												<li class="jstree-loading">
													<i class="jstree-icon jstree-ocl"></i>讀取中 ...
												</li>
											</ul>
										</div>
										<div id="advanced-search-button-group" style="display: block;">
											<p id="warning-text" style="display: none; color: red;">警告! 篩選結果多於 1000 筆 </p>
											<button class="btn btn-warning" id="keep-search-button" style="display: none;">仍要搜尋</button>
											<button class="btn btn-primary" id="advanced-search-button" style="display: inline-block;">搜尋</button>
											<button class="btn btn-default modal-dismiss">取消</button>
										</div>
									</div>
								</div>
							</footer>
						</section>
					</div>

					<div class="col-md-6">
						<section class="panel" id="search-filter-panel" style="display: none;">
							<div class="panel-body">
								<form class="form-horizontal form-bordered" id="search-filter" method="get" hidden>
									<div class="form-group">
										<label class="col-md-3 control-label">工程類別:</label>
										<div class="col-md-7" id="f-category">
											<!-- append option -->
										</div>
									</div>

									<div class="form-group">
										<label class="col-md-3 control-label">專案類別:</label>
										<div class="col-md-7" id="f-project">
											<!-- append option -->
										</div>
									</div>

									<div class="form-group">
										<label class="col-md-3 control-label">文件類別:</label>
										<div class="col-md-7" id="f-type">
											<!-- append option -->
										</div>
									</div>

									<div class="form-group" id="filter_notes" style="display: none;">
										<label class="col-md-3 control-label">設計圖類別:</label>
										<div class="col-md-7" id="f-notes">
											<!-- append option -->
										</div>
									</div>
								</form>
								<i class="text-center fa fa-sort-desc" id="filter-slide"></i>
							</div>
						</section>
						<section class="panel">
							<div class="panel-body">

								<button id="reset" type="button" class="mb-xs mr-xs btn btn-default" style="float: right;"><i class="fa fa-reply"></i> 上一層</button>
								<table style="width:99%;" class="table table-bordered table-striped" id="datatable-ajax">

									<thead>
										<tr>
											<th id="SN">項次</th>
											<th id="name">類別</th>
											<th>關鍵字</th>
											<th>版次</th>
											<th>檔案數</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</section>
						<section class="panel">
							<div id="panel" class="panel-body" style="height: 300px;">
								<div class="table-responsive" style="display:none;">
									<table class="table table-bordered mb-none" id="tableDetail">
										<tbody>
											<tr>
												<th>計畫編號</th>
												<td id="plan_code"></td>
											</tr>
											<tr>
												<th>計畫名稱</th>
												<td id="plan_name"></td>
											</tr>
											<tr>
												<th>圖名</th>
												<td id="fileName"></td>
											</tr>
											<tr>
												<th>版次</th>
												<td id="version"></td>
											</tr>
											<tr>
												<th>文件</th>
												<td id="download"></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</section>
					</div>
					<div class="col-md-6">
						<div class="tabs">
							<ul class="nav nav-tabs nav-justified">
								<li class="active">
									<a href="#arcgisTab" data-toggle="tab" class="text-center"><i class="fa fa-map-marker"></i> ArcGIS</a>
								</li>
								<li>
									<a href="#pdfTab" data-toggle="tab" class="text-center"><i class="fa fa-file"></i> Pdf 預覽</a>
								</li>
							</ul>
							<div class="tab-content">
								<div id="arcgisTab" class="tab-pane active">
									<div id="arcgis" class="panel-body" style="height: 730px;">
										<div class="mapok" style="height:100%">
											<div id="topbar" class="esri-component esri-widget">
												<button id="distanceButton" class="action-button esri-icon-measure-line" type="button" title="Measure distance between two points"></button>
												<button id="areaButton" class="action-button esri-icon-measure-area" type="button" title="Measure area"></button>
												<button id="clear" class="action-button esri-icon-trash" title="Clear Measurements"></button>
											</div>
											<div id="viewDiv"></div>
											<div id="measureExpendDiv"></div>
											<div id="measureExpendDiv2"></div>
											<div id="slidesDiv" class="esri-widget"></div>
											<span style="display:none;" id="project-id"></span>
										</div>
									</div>
								</div>
								<div id="pdfTab" class="tab-pane">
									<div id="pdfFile"></div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</section>
		</div>
	</section>
	</div>
	<script>
		db_table["category"].forEach(element => {
			option_id = "c" + element["category_id"] + "-l" + element["list_id"];
			$("#category .checkboxes").append("<label class='category-button' for="+option_id+"><input type='checkbox' class='category-option' value="+element["category_name"]+" id="+option_id+" />"+element["category_name"]+"</label>");
			
			filter_option_id = "f-c" + element["category_id"]
			list_id = element["list_id"];
			$("#f-category").append("<button type='button' class='mb-xs mt-xs mr-xs btn btn-primary' id="+filter_option_id+" list_id="+list_id+" style='display:none;'>"+element["category_name"]+"</button>");
		});

		db_table["project"].forEach(element => {
			option_id = "p" + element["project_id"];
			$("#project .checkboxes").append("<label class='project-button' for="+option_id+"><input type='checkbox' class='project-option' value="+element["project_id"]+" id="+option_id+" />["+element["project_id"]+"] "+element["project_name"]+"</label>");
		
			filter_option_id = "f-" + option_id;
			$("#f-project").append("<button type='button' class='mb-xs mt-xs mr-xs btn btn-primary' id="+filter_option_id+" style='display:none;'>"+element["project_name"]+"</button>");
		});

		db_table["type"].forEach(element => {
			option_id = "t" + element["type_id"];
			$("#type .checkboxes").append("<label class='type-button' for="+option_id+"><input type='checkbox' class='type-option' value="+element["type_name"]+" id="+option_id+" />"+element["type_name"]+"</label>");
		
			filter_option_id = "f-" + option_id;
			$("#f-type").append("<button type='button' class='mb-xs mt-xs mr-xs btn btn-primary' id="+filter_option_id+" style='display:none;'>"+element["type_name"]+"</button>");
		});

		for(i=0;i<notes_button_list.length;i++) {
			option_id = "n" + i;
			$("#notes .checkboxes").append("<label class='notes-button' for="+option_id+"><input type='checkbox' class='notes-option' value="+notes_button_list[i]+" id="+option_id+" />"+notes_button_list[i]+"</label>");
		
			filter_option_id = "f-" + option_id;
			$("#f-notes").append("<button type='button' class='mb-xs mt-xs mr-xs btn btn-primary' id="+filter_option_id+" style='display:none;'>"+notes_button_list[i]+"</button>");
		}
	</script>
	<!-- Vendor -->
	<script src="assets/vendor/magnific-popup/magnific-popup.js"></script>

	<!-- Examples -->
	<script src='./script/js/search.js'></script>
	<script src='./script/js/filter.js'></script>
	<script src="assets/javascripts/ui-elements/examples.modals.js"></script>
	
</body>

</html>