steve07s
/
DataBase


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786
							<?php
session_start();
//Can't come in without logged in
if (!isset($_SESSION['loggedin'])) {
	header('Location: 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>
	<!-- 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>

	<!-- vue3 -->
	<script src="https://unpkg.com/vue@next"></script>
	<script src="./script/js/vue-search-block.js"></script>

	<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

	<style>
		.row {
			margin-top: -15px;
		}

		.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%;
		}
	</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() {

			});


		});
	</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 searchURL = window.location.search;
			searchURL = searchURL.substring(1, searchURL.length);
			if (searchURL.includes("=")) {
				projectId = decodeURIComponent(searchURL.split("&")[0].split("=")[1]);
				var projectNode = $(".jstree-anchor").filter(function() {
					return $(this).text().includes(projectId);
				});
				var projectId = projectNode[0].attributes.id.value;
				$('#treeAjaxHTML').jstree("select_node", projectId);
				$("#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="/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">administrator</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">
							<div class="input-group input-search" style="table-layout: auto;"><input type="text" class="form-control" name="search" id="search" placeholder="Search..."><span class="input-group-btn"><button class="btn btn-default" id="btn-search"><i class="fa fa-search"></i></button></span></div>
						</li>
					</ul>
				</header>
				<div class="row">

					<search-block></search-block>

					<div class="col-md-6">
						<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>vm.mount('.body');</script>

	<script>
		var $isotope_project = $('.project_button').isotope({
			itemSelector: '.project'
		});

		var filters = {};

		$('.filter_for_project').on( 'click', '.button', function() {
			var $this = $(this);
			// get group key
			var $buttonGroup = $this.parents('.button-group');
			var filterGroup = $buttonGroup.attr('data-filter-group');
			// set filter for group
			filters[ filterGroup ] = $this.attr('data-filter');
			// combine filters
			var filterValue = concatValues( filters );
			// set filter for Isotope
			$isotope_project.isotope({ filter: filterValue });
		});

		function concatValues( obj ) {
			var value = '';
			for ( var prop in obj ) {
				value += obj[ prop ];
			}
			return value;
		}
	</script>

</body>

</html>