Nate
/
BIM-Resource


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
							<?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" />
	<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet">
	<?php include("bim-support-header.html"); ?>
	<script src="./script/js/global.js"></script>
	<style>
		th {
			width: 10%;
			text-align: center;
		}

		.vjs-tech {
			height: 100%;

		}
	</style>
	<script type="application/javascript">
		var i = 0;
		var api = [];
		var fileName;
		var folder;
		var software;
		var userName = "<?php echo $_SESSION['name'] ?>";
		var role = "<?php echo ($groupName); ?>";
		var right = <?php echo ($right); ?>;
		var webLink;
		var source;
		var searchURL = window.location.search;
		searchURL = searchURL.substring(1, searchURL.length);
		object = decodeURIComponent(searchURL.split("&")[0].split("=")[1]);
		if (object == 'undefined') {
			window.location.href = "./api-list.php";
		}

		$.ajax({
			url: "./script/php/api_group_detail.php",
			type: "GET",
			async: false,
			data: {
				object: object,
			},
			contentType: "application/json",
			dataType: "json"
		}).done(function(data) {
			if (data.APIID == null)
				data.APIID = '';
			folder = data.software + '/' + data.APIID + data.APIName;


			data[1] = data[1] == "Dynamo" ? data.software + " " + data.dynamoVersion : data.software + " " + data.revitVersion;
			for (i = 0; i < 6; i++) {
				if (data[i] != null)
					table.push(data[i]);
				else
					table.push("空");
			}

			webLink = data.webLink;
			source = data.source;
		}).error(function(error) {
			console.log(error);
		});

		$.ajax({
			url: "./script/php/update_popularity.php",
			type: "GET",
			async: false,
			data: {
				api_id: object,
				update_type: "viewTimes",
			},
			contentType: "application/json",
			dataType: "json"
		});

		pageHeader = "BIM程式庫";
	</script>
</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>
								<api-list></api-list>
							</template>
						</inner-menu>
						<div class="inner-body mg-main">
							<div class="inner-toolbar">
								<ul>
									<li class="right">
										<a href="#" onclick="window.history.go(-1); return false;"><i class="fa fa-undo"></i> 返回</a>
									</li>
								</ul>
							</div>
							<div class="row">
								<div class="col-md-8">
									<section class="panel">
										<div class="panel-body">
											<h2 style="color: black;font-weight: bold;">{{table[0]}}</h2>
											<br>
											<h4 style="color: black;">{{table[2]}}</h2>
												<div class="table-responsive">
													<table class="table table-bordered mb-none">
														<tbody>
															<tr>
																<th>開發版本</th>
																<td>{{table[1]}}</td>
															</tr>
															<tr>
																<th>操作方式</th>
																<td>{{table[3]}}</td>
															</tr>
															<tr>
																<th width="5%">開發者</th>
																<td id="webLink"></td>
															</tr>
															<tr>
																<th>備註</th>
																<td>{{table[5]}}</td>
															</tr>
														</tbody>
													</table>
												</div>
										</div>
									</section>
								</div>
								<div class="col-md-4">
									<section class="panel">
										<div class="panel-body">
											<img id="thumbnail" style="width:100%;" src="/Common/assets/images/not-found-image.png" alt="成果縮圖">
										</div>
									</section>
								</div>
							</div>
							<div class="row">
								<div class="col-md-5">
									<section class="panel">
										<div class="panel-body">
											<h4 style="color: black;font-weight: bold;">操作影片</h4>
											<video style="width:100%;height:320px;" id="my-video" class="video-js" autoplay controls preload="auto" data-setup="{}">
												<source id="video-src" src='/Common/assets/images/not-found-video.mp4'>
											</video>
										</div>
									</section>
								</div>
								<div class="col-md-7">
									<section class="panel">
										<div class="panel-body">
											<img v-if="table[1].includes('ynamo')" src="/Common/assets/images/dynamo-icon.png" style="height:80px; display: inline-block; vertical-align: top;"></img>
											<img v-else-if="table[1].includes('Revit')" src="/Common/assets/images/revit-icon.png" style="height:80px; display: inline-block; vertical-align: top;"></img>
											<div class="summary" style="display: inline-block;">
												<div class="title"><strong>程式下載</strong></div>
												<div class="info" id="apiList">
												</div>
											</div>
										</div>
									</section>
									<section class="panel">
										<div class="panel-body">
											<h5 class="text-semibold text-dark text-uppercase">參考檔案下載</h5>
											<div id="treeAjaxHTML"></div>
										</div>
									</section>
									<button type="button" class="mb-xs mt-xs mr-xs btn btn-info col-md-offset-11" onclick="window.history.go(-1); return false;">返回</button>

								</div>

							</div>


						</div>
					</div>
				</section>
				<!-- end: page -->
			</section>
		</div>
	</section>
	<script>
		/*Vue */
		vm.mount('.body');
		addUserImage(userName.charAt(0), role);
		const downloads = ["dll", "dyn", "exe", "msi"];
		const videos = ["mp4", "m3u8", "ts", "avi"];
		const hidden = ["png"];
		if (webLink != null) {
			$("#webLink").append("<a href='" + webLink + "' target='_blank'>" + source + "</a>");
		} else if (webLink == null) {
			$("#webLink").append("<span>" + source + "</span>");
		}

		$(document).ready(function() {
			$("#apiList a").on("click", function() {
				$.ajax({
					url: "./script/php/update_popularity.php",
					type: "GET",
					async: false,
					data: {
						api_id: object,
						update_type: "downloadTimes",
					},
					contentType: "application/json",
					dataType: "json"
				});
			});

			$('#treeAjaxHTML').jstree({
				'core': {
					'themes': {
						'responsive': false
					},
					'check_callback': true,
					'data': {
						'url': './script/php/getTree.php?folder=' + folder,
					}
				},
				'types': {
					'default': {
						'icon': 'fa fa-folder'
					},
					'file': {
						'icon': 'fa fa-file'
					}
				},
				'plugins': ['types']
			}).on("ready.jstree", function(e, data) {

				var jsonNodes = $('#treeAjaxHTML').jstree(true).get_json('#', {
					flat: true
				});

				$.each(jsonNodes, function(i, val) {

					var treeNode = document.getElementById($(val).attr('id'));
					var nodeText = $(val).attr('text');
					var video = videojs("my-video");
					let href = $(val).attr('a_attr').href;
					let exts = href.split('.');
					let ext = exts[exts.length - 1]
					if (downloads.includes(ext)) {
						$("#apiList").append("<a download href='" + href + "' id='api" + 1 + "'>" + nodeText + "</a><br>");
					}
					if (ext.toLowerCase().includes('m3u8')) {
						video.src({
							src: href,
						});
					}
					if (ext.toLowerCase().includes('png')) {
						$("#thumbnail").attr("src", href);
					}
					if (videos.includes(ext.toLowerCase()) || downloads.includes(ext.toLowerCase()) || hidden.includes(ext.toLowerCase())) {
						$(treeNode).hide();
					}


				})
			}).on('select_node.jstree', function(event, data) {

				data.instance.toggle_node(data.node);

				if (data.node.text.includes(".")) {
					console.log(data.node);
					var link = document.createElement("a");
					link.download = data.node.text;
					link.href = data.node.a_attr.href;
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
				}


			});
			var player = videojs("my-video");
			player.on("fullscreenchange", () => {
				$(".vjs-tech").css("height","100%");
			})
		});
	</script>
	<script src="/Common/assets/vendor/jstree/jstree.js"></script>
	<!-- <script src="assets/javascripts/ui-elements/examples.treeview.js"></script> -->
	<?php include("bim-support-body.html"); ?>
	<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>


</body>

</html>