Nate
/
BIM-Monitor


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
							<?php
include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_right.php");
?>
<!doctype html>
<html class="fixed sidebar-left-collapsed">

<head>
	<!-- jstree CSS -->
	<link rel="stylesheet" href="/Common/assets/vendor/jstree/themes/default/style.css" />	
	<?php include("bim-support-header.html"); ?>
	<script src="./script/js/global.js"></script>
	<script src="./script/js/pdfobject.min.js"></script>
	<script type="application/javascript">
		var url_href = window.location.href;
		var url = new URL(url_href);
		var type = url.searchParams.get("type");
		if (type === null) {
			window.location.href = "other-list.php?type=收費建議";
		}		
		var userName = '<?php echo $_SESSION['name']; ?>';		
		var $grid;
		pageHeader = "BIM相關資源";
	</script>
	<style>
		.menu-item.active {
			color: #0088CC;
		}

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

		th {
			text-align: center;
			width: 30%;
			font-size: 18px;
		}

		td {
			text-align: center;
			font-size: 18px;
		}
	</style>
</head>

<body>
	<canvas id="c"></canvas>
	<section class="body">
		<!-- start: header -->
		<header-menu></header-menu>
		<!-- end: header -->
		<div class="inner-wrapper">
			<!-- start: sidebar -->
			<side-bar></side-bar>
			<!-- end: sidebar -->
			<section role="main" class="content-body">
				<header class="page-header">
					<h2>{{pageHeader}}</h2>
				</header>
				<!-- start: page -->
				<section class="content-with-menu content-with-menu-has-toolbar media-gallery">
					<div class="content-with-menu-container">
						<inner-menu>
							<template v-slot:inner-equipment>
								<other-list></other-list>
							</template>
						</inner-menu>
						<div class="inner-body mg-main">
							<div class="inner-toolbar">
								<ul>
									<search-bar></search-bar>
									<li id="reset" style="padding-top: 10px;">
										<div class="input-group input-search" style="table-layout: auto;">
											<button class="btn btn-primary" type="button" id="resetbtn" data-toggle="tooltip" ><i class="fa fa-undo"></i></button>
										</div>
									</li>
								</ul>
							</div>
							<filter-content2></filter-content2>
							<div class="row">
								<div class="col-md-6">
									<section class="panel">
										<div class="panel-body">
											<h5 class="text-semibold text-dark text-uppercase">檔案下載</h5>
											<div id="treeAjaxHTML" style="height:400px;overflow: auto;"></div>
										</div>
									</section>
									<section class="panel">
										<div class="panel-body">
											<h5 class="text-semibold text-dark text-uppercase">檔案資訊</h5>
											<div id="fileTable" style="height:200px">
												<table class="table table-bordered mb-none" style="height: 100%;">
													<tbody>
														<tr>
															<th>檔案名稱</th>
															<td id="fileName"></td>
														</tr>
														<tr>
															<th>詳細資訊</th>
															<td id="fileDetail">尚未填寫</td>
														</tr>
														<tr>
															<th>檔案日期</th>
															<td id="fileDate"></td>
														</tr>
														<tr>
															<th>下載連結</th>
															<td id="fileLink"><a id="fileHerf" href="#" target="_blank"><i class="fa fa-download">檔案下載</i></a></td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
									</section>
								</div>
								<div class="col-md-6">
									<section class="panel">
										<div class="panel-body">
											<div id="pdfFile" style="height:720px"></div>
										</div>
									</section>
								</div>
							</div>
						</div>
					</div>
				</section>
				<!-- end: page -->
			</section>
		</div>
	</section>
	
	<?php include("bim-support-body.html"); ?>

	<script>
		vm.mount('.body');
		$(document).ready(function() {
			PDFObject.embed("./assets/null.pdf", "#pdfFile"); 

			/*載入jstree */
			$('#treeAjaxHTML').jstree({
				'core': {
					'themes': {
						'responsive': false
					},
					'check_callback': true,
					'data': {
						'url': './script/php/getBIMData.php?folder=' + type, // 使用type獲取檔案目錄
					}
				},
				'search': {
					'show_only_matches': true,
				},
				'types': { //依據檔案類型設定不同icon
					'default': {
						'icon': 'fa fa-folder'
					},
					'file': {
						'icon': 'fa fa-file-o'
					},
					'pdf': {
						'icon': 'fa fa-file-pdf-o'
					},
					'word': {
						'icon': 'fa fa-file-word-o'
					},
					'excel': {
						'icon': 'fa fa-file-excel-o'
					},
					'ppt': {
						'icon': 'fa fa-file-powerpoint-o'
					},
					'f-open': {
						'icon': 'fa fa-folder-open'
					},
					'f-closed': {
						'icon': 'fa fa-folder'
					}
				},
				'plugins': ['types', 'search']
			}).on('select_node.jstree', function(event, data) {
				data.instance.toggle_node(data.node);
				//點選pdf時預覽
				if (data.node.text.includes(".pdf")) {
					PDFObject.embed(data.node.a_attr.href, "#pdfFile");
				} else {
					if (data.node.text.includes(".")) {
						PDFObject.embed("./assets/notPDF.pdf", "#pdfFile");
					}
				}
				//將檔案資訊填入下方表格
				if (data.node.text.includes(".")) {
					$("#fileName").empty();
					$("#fileName").append(data.node.text);
					$("#fileHerf").attr("href", data.node.a_attr.href);
					$("#fileDate").empty();
					$("#fileDate").append(data.node.a_attr.time);
				}
			}).bind('loaded.jstree', function(e, data) {
			});
			$("#treeAjaxHTML").on('open_node.jstree', function(event, data) {
				data.instance.set_type(data.node, 'f-open');
			});
			$("#treeAjaxHTML").on('close_node.jstree', function(event, data) {
				data.instance.set_type(data.node, 'f-closed');
			});
		});
		// 搜尋jstree
		$("#resetbtn").on('click', function(event) {
			$("#treeAjaxHTML").jstree("clear_search");
			$("#quicksearch").val('');
		})
		$("#searchBtn").on('click', function(event) {
			var search = $("#quicksearch").val();
			$("#treeAjaxHTML").jstree("search", search);
		})
		$("#quicksearch").on('keyup', function(e) {
			if (e.key === 'Enter' || e.keyCode === 13) {
				var search = $("#quicksearch").val();
				$("#treeAjaxHTML").jstree("search", search);
			}
		});
		
		$('[data-toggle="tooltip"]').tooltip({container: "body",placement:"right",title:"重置搜尋結果"});
		
	</script>
	<script src="/Common/assets/vendor/jstree/jstree.js"></script>


</body>

</html>