steve07s
/
DataBase


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334
							<?php
include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_right.php");
?>
<!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="/Common/script/js/user-image.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="./assets/project-colors.js"></script>
	<script src="./script/js/jstreeAJAX.js"></script>
	<script src="https://js.arcgis.com/4.21/"></script>


	<style>
		html.no-overflowscrolling .nano>.nano-content {
			overflow: auto;
		}

		.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: #fff;
		}

		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%;
		}

		.jstree-default .jstree-wholerow-hovered {
			background: #223b68;
			background: -webkit-linear-gradient(top, #223b68 0, #223b68 100%);
			background: linear-gradient(to bottom, #223b68 0, #223b68 100%);
		}

		.jstree-default .jstree-wholerow-clicked {
			background: #223b68;
			background: -webkit-linear-gradient(top, #223b68 0, #223b68 100%);
			background: linear-gradient(to bottom, #223b68 0, #223b68 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(e) {
				console.log(e);
			});
		}

		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",
			"esri/layers/WMTSLayer"
		], (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, WMTSLayer) => {
			esriConfig.apiKey = token;
			let activeWidget = null;
			let highlightSelect;
			const webscene = new WebScene({
				portalItem: {
					id: "6b4e83dd94c4410db4bece82262b2573"

				},
				opacity: 1,
				showAttribution: false,

			});

			const simpleMakerRenderer = {
				type: "unique-value",
				legendOptions: {
					title: "工程類別"
				},
				field: "工程類別",
				uniqueValueInfos: getUniqueValueInfos2(),
			};

			const typeRenderer = {
				type: "unique-value",
				legendOptions: {
					title: "工程類別"
				},
				field: "工程類別",
				uniqueValueInfos: getUniqueValueInfos()
			};
			//getUniqueValueInfos()
			function getUniqueValueInfos() {
				var array = [];
				for (const [key, value] of Object.entries(color)) {
					let data = JSON.parse(`{
						"value": "${key}",
						"label": "${key}",
						"symbol": {
							"type": "simple-fill",
							"color": "${value}",
							"width": "6px",
							"style": "solid",
							"outline": {
								"color": "#00FFFF",
								"width": 2
							}
						}
					}`);
					array.push(data);
				}
				return array;
			}
			/* */
			function getUniqueValueInfos2() {
				var array = [];
				for (const [key, value] of Object.entries(color)) {
					let data = JSON.parse(`{
						"value": "${key}",
						"label": "${key}",
						"symbol": {
							"type": "simple-marker",
							"color": "${value}",
							"size": 12,
							"outline": {
								"color": "#00FFFF",
								"width": 2
							}
						}
					}`);
					array.push(data);
				}
				return array;
			}

			const labelClass = {
				// autocasts as new LabelClass()
				symbol: {
					type: "text", // autocasts as new TextSymbol()
					color: "blue",
					font: {
						// autocast as new Font()
						family: "Playfair Display",
						size: 10,
						weight: "bold"
					}
				},
				minScale: 150000,
				labelExpressionInfo: {
					expression: "$feature.計畫名稱"
				},
				// labelPosition:"parallel",
				// labelPlacement: "above-center",
			};

			var projectLayer = 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,
				opacity: 0.8,
				renderer: typeRenderer,
				labelingInfo: [labelClass],
			});
			projectLayer.listMode = "hide";
			webscene.add(projectLayer);

			const projectRenderer = projectLayer.render;

			const wmts1 = new WMTSLayer({
				url: "https://wmts.nlsc.gov.tw/wmts",
				activeLayer: {
					id: "EMAP96"
				},
				visible: false
			});
			const wmts2 = new WMTSLayer({
				url: "https://wmts.nlsc.gov.tw/wmts",
				activeLayer: {
					id: "PHOTO2"
				},
				visible: false
			});
			const wmts3 = new WMTSLayer({
				url: "https://wmts.nlsc.gov.tw/wmts",
				activeLayer: {
					id: "EMAP2"
				},
				visible: true

			});


			const mapGroupLayer = new GroupLayer({
				title: "電子地圖",
				visible: true,
				visibilityMode: "exclusive",
				layers: [wmts1, wmts2, wmts3],
				opacity: 0.75
			});

			webscene.add(mapGroupLayer);

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

				},
				highlightOptions: {
					color: [255, 242, 0],
					fillOpacity: 0.4
				},
			});


			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"
			// );


			var layerList = new LayerList({
				view: view,
				listItemCreatedFunction: defineActions
			});

			view.ui.add(
				new Expand({
					view: view,
					content: layerList,
					autoCollapse: true,
					group: "top-left",
					expandIconClass: "esri-icon-basemap",
					expandTooltip: "選擇底圖"
				}),
				"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 defineActions(event) {
				// The event object contains an item property.
				// is is a ListItem referencing the associated layer
				// and other properties. You can control the visibility of the
				// item, its title, and actions using this object.

				const item = event.item;

				// Adds a slider for updating a group layer's opacity
				if (item.title === "電子地圖") {
					const slider = new Slider({
						min: 0,
						max: 1,
						precision: 2,
						values: [1],
						visibleElements: {
							labels: true,
							rangeLabels: true
						}
					});

					item.panel = {
						content: slider,
						className: "esri-icon-sliders-horizontal",
						title: "修改地圖透明度"
					}

					slider.on("thumb-drag", (event) => {
						const {
							value
						} = event;
						item.layer.opacity = value;
					})
				}
			}

			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 zoomToLayer2(layer) {
				return layer.queryExtent().then((response) => {
					var zoom = (response.extent.height > response.extent.width ? response.extent.height : response.extent.width) / 474;

					view.goTo({
							target: response.extent,
							tilt: 0,
							heading: 0,
							//zoom: zoom
						}
						/*, {
												speedFactor: 6,
												easing: "linear"
											}*/
					).catch((error) => {
						console.log("error");
						console.error(error);
					}).then(() => {
						console.log(view.zoom);
						view.goTo({
							center: view.center,
							zoom: view.zoom - 1
						}, {
							speedFactor: 30,
							easing: "linear"
						});
					});
				});
			}

			view.watch("scale", (newValue) => {
				if (newValue > 30000) {
					projectLayer.labelsVisible = true;
					projectLayer.renderer = simpleMakerRenderer;
				} else {
					projectLayer.labelsVisible = false;
					projectLayer.renderer = typeRenderer;
				}
			});

			view.when(function() {
				layerList.on("trigger-action", (event) => {

					// Capture the action id.
					const id = event.action.id;
					if (id === "increase-opacity") {
						// if the increase-opacity action is triggered, then
						// increase the opacity of the GroupLayer by 0.25

						if (mapGroupLayer.opacity < 1) {
							mapGroupLayer.opacity += 0.25;
						}
					} else if (id === "decrease-opacity") {
						// if the decrease-opacity action is triggered, then
						// decrease the opacity of the GroupLayer by 0.25

						if (mapGroupLayer.opacity > 0) {
							mapGroupLayer.opacity -= 0.25;
						}
					}
				});

			});


			// highlight is set on the layerView, so we need to detect when the layerView is ready
			view.whenLayerView(projectLayer).then((layerView) => {
				// creates the query that will be used to obtain the features needed for the highlight
				const queryStations = projectLayer.createQuery();
				// features that are passed in the highlight function need to have an `objectID`
				// if the query is built using `new Query()` then `queryStations.outFields = ["objectID"]` should be set

				$('#treeAjaxHTML').on("select_node.jstree", function(e, data) {
					if (data.node.text.includes("-")) {
						project_id = data.node.text.split("-")[0];
						projectLayer.definitionExpression = "計畫編號 = '" + project_id + "'";
						zoomToLayer(project_id);
					}
				});

				function zoomToLayer(project_id) {
					queryStations.where = `計畫編號='${project_id}'`;
					projectLayer.queryFeatures(queryStations).then((result) => {
						// if a feature is already highlighted, then remove the highlight
						if (highlightSelect) {
							highlightSelect.remove();
						}

						// the feature to be highlighted
						const feature = result.features[0];

						// use the objectID to highlight the feature
						highlightSelect = layerView.highlight(result.features);
						view.goTo({
								target: feature.geometry,
								tilt: 0,
								heading: 0,
								//zoom: zoom
							}
							/*, {
													speedFactor: 6,
													easing: "linear"
												}*/
						).catch((error) => {
							console.log("error");
							console.error(error);
						})
						/*.then(() => {
													console.log(view.zoom);
													view.goTo({
														center: view.center,
														zoom: view.zoom - 1
													}, {
														speedFactor: 30,
														easing: "linear"
													});
												})*/
						;

					});
				}
			});


		});
		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 id="upload-btn" href="./Upload.php" 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"><?php echo ($groupName); ?></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: 210px;">
								<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>
		var userName = "<?php echo $_SESSION['name'] ?>";
		var role = "<?php echo ($groupName); ?>";
		var right = <?php echo $right; ?>;
		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>");
		}
		if (right < 2) {
			$("#upload-btn").hide();
		}
	</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>