steve07s
/
DataBase


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173
							<?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="./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%;
		}
	</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;
			const webscene = new WebScene({
				portalItem: {
					id: "6b4e83dd94c4410db4bece82262b2573"

				},
				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
			});
			featureLayer.listMode = "hide";
			webscene.add(featureLayer);

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


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

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

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

				}
				/*else{
									type = data.node.text;
									console.log(type);
									featureLayer.definitionExpression = "工程類別 = '"+ type + "'";
									zoomToLayer(featureLayer);
								}*/
			});
			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;
						}
					}
				});

			});


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