add soting

api-list.php

@@ -61,19 +61,12 @@ if (!isset($_SESSION['loggedin'])) {
 							<div class="inner-toolbar">
 								<ul>
 									<search-bar></search-bar>
-									<filter-bar></filter-bar>									
+									<filter-bar></filter-bar>
 								</ul>
 							</div>
 							<filter-content2></filter-content2>
 							<div class="row mg-files" data-sort-destination="" data-sort-id="media-gallery" id="content" style="position: relative; height: 720.5px;">
-								<isotope-item v-for="item in list" 
-									v-bind:name="item.APIName"
-									v-bind:folder="item.APIID + item.APIName" 
-									v-bind:id="item.id" 
-									v-bind:object="item.object" 
-									v-bind:usage="item.usage" 
-									v-bind:software="item.software"
-									v-bind:detail="item.detail">
+								<isotope-item v-for="item in list" v-bind:name="item.APIName" v-bind:folder="item.APIID + item.APIName" v-bind:id="item.id" v-bind:object="item.object" v-bind:usage="item.usage" v-bind:software="item.software" v-bind:detail="item.detail" v-bind:operate="item.operate" v-bind:source="item.source">
 								</isotope-item>
 
 							</div>
@@ -96,68 +89,56 @@ if (!isset($_SESSION['loggedin'])) {
 			dataType: "json"
 		}).done(function(data) {
 			var table = data.table;
-			
-			for(i=0;i<table.length;i++){
+
+			for (i = 0; i < table.length; i++) {
 				listObj = {};
 				listObj["APIName"] = table[i].APIName;
-				if(table[i].APIID == null)
+				if (table[i].APIID == null)
 					table[i].APIID = '';
 				listObj["APIID"] = table[i].APIID;
 				listObj["id"] = table[i].id;
 				listObj["object"] = table[i].object;
-				listObj["usage"] = table[i].usage;	
+				listObj["usage"] = table[i].usage;
 				listObj["software"] = table[i].software;
 				listObj["detail"] = table[i].detail;
+				listObj["operate"] = table[i].operate;
+				listObj["source"] = table[i].source;
 				list.push(listObj);
 			}
-			var filter = data.objectFilter;			
-			for(i=0;i<filter.length;i++){				
+			var filter = data.objectFilter;
+			for (i = 0; i < filter.length; i++) {
 				objectFilter.push(filter[i].object);
 			}
-			filter = data.usageFilter;			
-			for(i=0;i<filter.length;i++){				
+			filter = data.usageFilter;
+			for (i = 0; i < filter.length; i++) {
 				usageFilter.push(filter[i].usage);
 			}
 
-
 			vm.mount('.body');
-			//$("#filters").append('<li><a class="button" data-filter=".' + 3 + '">' + 33 + '</a></li>');
 		}).error(function(error) {
 			console.log(error);
-		});/*
-		$.ajax({
-			url: "./script/php/getFilter.php",
-			type: "GET",
-			async: false,
-			/*data: {
-				folder: '/Universal/Dynamo',
-			},
-			contentType: "application/json",
-			dataType: "json"
-		}).done(function(data) {
-			console.log(data);
-			for (var i = 0; i < data.length; i++) {
-				$("#filters").append('<li><a class="button" data-filter=".' + data[i].object + '">' + data[i].object + '</a></li>');
-			}
-		}).error(function(error) {
-			console.log("error");
-		});*/
+		});
 	</script>
-	
+
 	<?php include("bim-support-body.html"); ?>
 
 	<script>
-		$(document).ready(function() {
-			$grid = $("#content").isotope({
-				itemSelector: ".isotope-item",
-				layoutMode: 'fitRows'
-			})
+		//	$(document).ready(function() {
+		$grid = $("#content").isotope({
+			itemSelector: ".isotope-item",
+			layoutMode: 'fitRows',
+			getSortData: {
+				name: '.name',
+			}
+		})
 
-			setTimeout(() => {
-				$grid.isotope()
-			}, 100);
+		setTimeout(() => {
+			$grid.isotope({
+				sortBy: 'name'
+			})
+		}, 100);
 
-		});
+		//	});
 	</script>
 
 </body>

bim-support-header.html

@@ -1,47 +1,71 @@
-<meta charset="UTF-8">
-<title>BIM元件庫</title>
-<meta name="keywords" content="HTML5 Admin Template" />
-<meta name="description" content="JSOFT Admin - Responsive HTML5 Template">
-<meta name="author" content="JSOFT.net">
-<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
-<!-- Mobile Metas -->
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-<!-- Unity CSS -->
-<link rel="stylesheet" href="C3Dev/TemplateData/style.css">
-<!-- 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">
-<!-- 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" />
-<link rel="stylesheet" href="assets/vendor/isotope/jquery.isotope.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">
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
-<!-- Icon -->
-<link rel="shortcut icon" href="assets/images/favicon.ico" />
-<!-- BIM支援網CSS -->
-<link rel="stylesheet" type="text/css" href="./script/css/bim-support.css">
-<!-- Head Libs -->
-<script src="assets/vendor/modernizr/modernizr.js"></script>
-<!-- chart.js -->
-<script src="https://cdn.jsdelivr.net/npm/chart.js@3.1.1"></script>
-<!-- DataTable -->
-<script src="assets/vendor/jquery/jquery.js"></script>
-<!--<script src="assets/vendor/vue/vue.js"></script>-->
-<script src="https://unpkg.com/vue@next"></script>
-<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
-<script src="assets/vendor/pnotify/pnotify.custom.js"></script>
-<script src="script/js/getEquipmentJson.js"></script>
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>BIM支援網</title>
+  <meta content="HTML5 Admin Template"
+        name="keywords">
+  <meta content="JSOFT Admin - Responsive HTML5 Template"
+        name="description">
+  <meta content="JSOFT.net"
+        name="author">
+  <meta content="text/html; charset=utf-8"
+        http-equiv="Content-Type"><!-- Mobile Metas -->
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        name="viewport"><!-- Unity CSS -->
+  <link href="C3Dev/TemplateData/style.css"
+        rel="stylesheet"><!-- 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"><!-- Vendor CSS -->
+  <link href="assets/vendor/bootstrap/css/bootstrap.css"
+        rel="stylesheet">
+  <link href="assets/vendor/font-awesome/css/font-awesome.css"
+        rel="stylesheet">
+  <link href="assets/vendor/magnific-popup/magnific-popup.css"
+        rel="stylesheet">
+  <link href="assets/vendor/bootstrap-datepicker/css/datepicker3.css"
+        rel="stylesheet">
+  <link href="assets/vendor/pnotify/pnotify.custom.css"
+        rel="stylesheet"><!-- Specific Page Vendor CSS -->
+  <link href="assets/vendor/jquery-ui/css/ui-lightness/jquery-ui-1.10.4.custom.css"
+        rel="stylesheet">
+  <link href="assets/vendor/bootstrap-multiselect/bootstrap-multiselect.css"
+        rel="stylesheet">
+  <link href="assets/vendor/morris/morris.css"
+        rel="stylesheet">
+  <link href="assets/vendor/bootstrap-fileupload/bootstrap-fileupload.min.css"
+        rel="stylesheet">
+  <link href="assets/vendor/isotope/jquery.isotope.css"
+        rel="stylesheet"><!-- Theme CSS -->
+  <link href="assets/stylesheets/theme.css"
+        rel="stylesheet"><!-- Skin CSS -->
+  <link href="assets/stylesheets/skins/default.css"
+        rel="stylesheet"><!-- Theme Custom CSS -->
+  <link href="assets/stylesheets/theme-custom.css"
+        rel="stylesheet">
+  <link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css"
+        rel="stylesheet"
+        type="text/css"><!-- Icon -->
+  <link href="assets/images/favicon.ico"
+        rel="shortcut icon"><!-- BIM支援網CSS -->
+  <link href="./script/css/bim-support.css"
+        rel="stylesheet"
+        type="text/css"><!-- Head Libs -->
+
+  <script src="assets/vendor/modernizr/modernizr.js"></script><!-- chart.js -->
+
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.1.1"></script><!-- DataTable -->
+
+  <script src="assets/vendor/jquery/jquery.js"></script><!--<script src="assets/vendor/vue/vue.js"></script>-->
+
+  <script src="https://unpkg.com/vue@next"></script>
+  <script charset="utf8"
+        src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"
+        type="text/javascript"></script>
+  <script src="assets/vendor/pnotify/pnotify.custom.js"></script>
+  <script src="script/js/getEquipmentJson.js"></script>
+</head>
+<body>
+</body>
+</html>

home.php

@@ -1,249 +1,250 @@
 <?php
 session_start();
 //Can't come in without logged in
-if (!isset($_SESSION['loggedin']))
-{
-    header('Location: pages-signin.html');
-    exit;
+if (!isset($_SESSION['loggedin'])) {
+	header('Location: pages-signin.html');
+	exit;
 }
 ?>
 <!doctype html>
 <html class="fixed">
 
-	<head>
-		<!-- Basic -->
-		<meta charset="UTF-8">
-		<title>首頁 | BIM資訊系統</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="./script/php/clearData.php"></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">
-		<!-- 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 -->
-		<script src="assets/vendor/jquery/jquery.js"></script>
-		<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" /> </head>
+<head>
+	<!-- Basic -->
+	<meta charset="UTF-8">
+	<title>首頁 | BIM資訊系統</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="./script/php/clearData.php"></script>
+	<!-- Mobile Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-	<body>
-		<section class="body">
-			<!-- start: header -->
-			<header class="header">
-				<div class="logo-container">					
-					<div class="banner-txt">BIM資訊系統</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>
+	<!-- 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">
+	<!-- 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 -->
+	<script src="assets/vendor/jquery/jquery.js"></script>
+	<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" />
+</head>
+
+<body>
+	<section class="body">
+		<!-- start: header -->
+		<header class="header">
+			<div class="logo-container">
+				<div class="banner-txt">BIM資訊系統</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>
-				<!-- start: search & user box -->
-				<div class="header-right">
-				<span class="separator"></span>
-                    <ul class="notifications">
-                        <li>
-                            <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">
-                                <i class="fa fa-bell"></i>
-                                <span id="warning-count" class="badge">0</span>
-                            </a>
-                            <div class="dropdown-menu notification-menu">
-                                <div class="notification-title">
-                                    <span id="warning-count2" class="pull-right label label-default">0</span>
-                                    警告
-                                </div>
-                                <div class="content">
-                                    <ul>
-                                        <li id="warning-style" style="display: none;">
-                                            <a href="warning.php" class="clearfix">
-                                                <div class="image">
-                                                    <i class="fa fa-warning bg-danger"></i>
-                                                </div>
-                                                <span class="title">人員進入危險區域</span>
-                                                <span class="message">現在</span>
-                                            </a>
-                                        </li>
-                                        <div id="warning-none">No warning</div>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
+			</div>
+			<!-- start: search & user box -->
+			<div class="header-right">
 				<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>
+				<ul class="notifications">
+					<li>
+						<a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">
+							<i class="fa fa-bell"></i>
+							<span id="warning-count" class="badge">0</span>
+						</a>
+						<div class="dropdown-menu notification-menu">
+							<div class="notification-title">
+								<span id="warning-count2" class="pull-right label label-default">0</span>
+								警告
+							</div>
+							<div class="content">
+								<ul>
+									<li id="warning-style" style="display: none;">
+										<a href="warning.php" class="clearfix">
+											<div class="image">
+												<i class="fa fa-warning bg-danger"></i>
+											</div>
+											<span class="title">人員進入危險區域</span>
+											<span class="message">現在</span>
+										</a>
+									</li>
+									<div id="warning-none">No warning</div>
+								</ul>
+							</div>
 						</div>
+					</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>
-				<!-- end: search & user box -->
-			</header>
-			<!-- end: header -->
-			<div class="inner-wrapper">
-				<!-- start: sidebar -->
-				<aside id="sidebar-left" class="sidebar-left">
-					<div class="sidebar-header">
-						<div class="sidebar-title"> 導覽 </div>
-						<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle"> <i class="fa fa-bars" aria-label="Toggle sidebar"></i> </div>
-					</div>
-					<div class="nano">
-						<div class="nano-content">
-							<nav id="menu" class="nav-main" role="navigation">
-								<ul class="nav nav-main">
-									<li  class="nav-active">
-										<a href="home.php"> <i class="fa fa-home" aria-hidden="true"></i> <span>首頁</span> </a>
-									</li>									
-									<li class="nav-parent">
-										<a>
-											<i class="fa fa-desktop" aria-hidden="true"></i>
-											<span>BIM監測查詢網</span>
-										</a>
-										<ul class="nav nav-children">
-											<li>
-												<a href="#modalForm" class="modal-with-form"> <i class="fa fa-upload" aria-hidden="true"></i> <span>上傳CSV</span> </a>
-												<!-- Modal Form -->
-												<div id="modalForm" class="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 id="CSVform" class="form-horizontal mb-lg" action="./script/php/upload.php" method="post" enctype="multipart/form-data">
-																<div class="form-group">
-																	<label class="col-md-3 control-label">檔案上傳</label>
-																	<div class="col-md-6">
-																		<div class="fileupload fileupload-new" data-provides="fileupload">
-																			<div class="input-append">
-																				<div class="uneditable-input"> <i class="fa fa-file fileupload-exists"></i> <span class="fileupload-preview"></span> </div> <span class="btn btn-default btn-file">
+			</div>
+			<!-- end: search & user box -->
+		</header>
+		<!-- end: header -->
+		<div class="inner-wrapper">
+			<!-- start: sidebar -->
+			<aside id="sidebar-left" class="sidebar-left">
+				<div class="sidebar-header">
+					<div class="sidebar-title"> 導覽 </div>
+					<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle"> <i class="fa fa-bars" aria-label="Toggle sidebar"></i> </div>
+				</div>
+				<div class="nano">
+					<div class="nano-content">
+						<nav id="menu" class="nav-main" role="navigation">
+							<ul class="nav nav-main">
+								<li class="nav-active">
+									<a href="home.php"> <i class="fa fa-home" aria-hidden="true"></i> <span>首頁</span> </a>
+								</li>
+								<li class="nav-parent">
+									<a>
+										<i class="fa fa-desktop" aria-hidden="true"></i>
+										<span>BIM監測查詢網</span>
+									</a>
+									<ul class="nav nav-children">
+										<li>
+											<a href="#modalForm" class="modal-with-form"> <i class="fa fa-upload" aria-hidden="true"></i> <span>上傳CSV</span> </a>
+											<!-- Modal Form -->
+											<div id="modalForm" class="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 id="CSVform" class="form-horizontal mb-lg" action="./script/php/upload.php" method="post" enctype="multipart/form-data">
+															<div class="form-group">
+																<label class="col-md-3 control-label">檔案上傳</label>
+																<div class="col-md-6">
+																	<div class="fileupload fileupload-new" data-provides="fileupload">
+																		<div class="input-append">
+																			<div class="uneditable-input"> <i class="fa fa-file fileupload-exists"></i> <span class="fileupload-preview"></span> </div> <span class="btn btn-default btn-file">
 																				<span class="fileupload-exists">變更檔案</span> <span class="fileupload-new">選擇檔案</span>
-																				<input type="file" name="fileToUpload" id="fileToUpload" /> </span> <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a> </div>
+																				<input type="file" name="fileToUpload" id="fileToUpload" /> </span> <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
 																		</div>
 																	</div>
 																</div>
-															</form>
-														</div>
-														<footer class="panel-footer">
-															<div class="row">
-																<div class="col-md-12 text-right">
-																	<button class="btn btn-primary modal-confirm" onclick="uploadCSV()">Submit</button>
-																	<button class="btn btn-default modal-dismiss">Cancel</button>
-																</div>
 															</div>
-														</footer>
-													</section>
-												</div>
-											</li>
-											<li class="nav-parent">
-												<a href="C3Index.php">C3工地監測儀器</a>
-												<ul class="nav nav-children">
-												</ul>
-											</li>
-										</ul>
-									</li>									
-									<li class="nav-parent">
-										<a> <i class="fa fa-cloud" aria-hidden="true"></i> <span>BIM支援網</span> </a>
+														</form>
+													</div>
+													<footer class="panel-footer">
+														<div class="row">
+															<div class="col-md-12 text-right">
+																<button class="btn btn-primary modal-confirm" onclick="uploadCSV()">Submit</button>
+																<button class="btn btn-default modal-dismiss">Cancel</button>
+															</div>
+														</div>
+													</footer>
+												</section>
+											</div>
+										</li>
+										<li class="nav-parent">
+											<a href="C3Index.php">C3工地監測儀器</a>
 											<ul class="nav nav-children">
-												<li>
-												<a href="component-list.php">													
-													 <i class="fa fa-briefcase" aria-hidden="true"></i><span>BIM元件庫</span>
-												</a>
-												</li>
 											</ul>
-									</li>
-								</ul>
-							</nav>
-						</div>
+										</li>
+									</ul>
+								</li>
+								<li class="nav-parent">
+									<a> <i class="fa fa-cloud" aria-hidden="true"></i> <span>BIM支援網</span> </a>
+									<ul class="nav nav-children">
+										<li class=""><a href="component-list.php"><i class="fa fa-briefcase" aria-hidden="true"></i><span>BIM元件庫</span></a></li>
+										<li class=""><a href="api-list.php"><i class="fa fa-gear" aria-hidden="true"></i><span>BIM程式庫</span></a></li>
+									</ul>
+								</li>
+							</ul>
+						</nav>
 					</div>
-				</aside>
-				<!-- end: sidebar -->
-				<section role="main" class="content-body">
-							<header class="page-header">
-								<h2>首頁</h2> </header>
+				</div>
+			</aside>
+			<!-- end: sidebar -->
+			<section role="main" class="content-body">
+				<header class="page-header">
+					<h2>首頁</h2>
+				</header>
 				<h1>BIM資訊系統</h1>
 				<h3>本系統統合BIM監測查詢網及BIM支援網：</h3>
 				<h4>
-				1. BIM監測查詢網的目標為監測工地在各開挖階段時的工地安全，以及是否會影響到周遭環境，利用監測儀器回傳的數據以及工地模型，<br>
-				以視覺化的模式回饋儀器回傳的數據，可根據有異數據進行會議討論，提出處理方案。<br>
-				2. BIM支援網提供元件庫、API庫以及樣版庫，使用git管理元件、API以及樣板及其之版本控制，可瀏覽所有元件、API及樣板的內容及其相關屬性，<br>
-				以利下載自己所需之檔案。<br>
+					1. BIM監測查詢網的目標為監測工地在各開挖階段時的工地安全，以及是否會影響到周遭環境，利用監測儀器回傳的數據以及工地模型，<br>
+					以視覺化的模式回饋儀器回傳的數據，可根據有異數據進行會議討論，提出處理方案。<br>
+					2. BIM支援網提供元件庫、API庫以及樣版庫，使用git管理元件、API以及樣板及其之版本控制，可瀏覽所有元件、API及樣板的內容及其相關屬性，<br>
+					以利下載自己所需之檔案。<br>
 				</h4>
-					
-					
-				</div>
-				</section>
-			</div>
-			<!-- Vendor -->
-			<script src="assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
-			<script src="assets/vendor/bootstrap/js/bootstrap.js"></script>
-			<script src="assets/vendor/nanoscroller/nanoscroller.js"></script>
-			<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
-			<script src="assets/vendor/magnific-popup/magnific-popup.js"></script>
-			<script src="assets/vendor/jquery-placeholder/jquery.placeholder.js"></script>
-			<!-- Specific Page Vendor -->
-			<script src="assets/vendor/jquery-ui/js/jquery-ui-1.10.4.custom.js"></script>
-			<script src="assets/vendor/jquery-ui-touch-punch/jquery.ui.touch-punch.js"></script>
-			<script src="assets/vendor/jquery-appear/jquery.appear.js"></script>
-			<script src="assets/vendor/bootstrap-multiselect/bootstrap-multiselect.js"></script>
-			<script src="assets/vendor/jquery-easypiechart/jquery.easypiechart.js"></script>
-			<script src="assets/vendor/flot/jquery.flot.js"></script>
-			<script src="assets/vendor/flot-tooltip/jquery.flot.tooltip.js"></script>
-			<script src="assets/vendor/flot/jquery.flot.pie.js"></script>
-			<script src="assets/vendor/flot/jquery.flot.categories.js"></script>
-			<script src="assets/vendor/flot/jquery.flot.resize.js"></script>
-			<script src="assets/vendor/jquery-sparkline/jquery.sparkline.js"></script>
-			<script src="assets/vendor/raphael/raphael.js"></script>
-			<script src="assets/vendor/morris/morris.js"></script>
-			<script src="assets/vendor/gauge/gauge.js"></script>
-			<script src="assets/vendor/snap-svg/snap.svg.js"></script>
-			<script src="assets/vendor/liquid-meter/liquid.meter.js"></script>
-			<script src="assets/vendor/jqvmap/jquery.vmap.js"></script>
-			<script src="assets/vendor/jqvmap/data/jquery.vmap.sampledata.js"></script>
-			<script src="assets/vendor/bootstrap-fileupload/bootstrap-fileupload.min.js"></script>
-			<script src="assets/vendor/jquery-autosize/jquery.autosize.js"></script>
-			<script src="assets/vendor/pnotify/pnotify.custom.js"></script>
-			<!-- Theme Base, Components and Settings -->
-			<script src="assets/javascripts/theme.js"></script>
-			<!-- Theme Custom -->
-			<script src="assets/javascripts/theme.custom.js"></script>
-			<!-- Theme Initialization Files -->
-			<script src="assets/javascripts/theme.init.js"></script>
-			<!-- Examples -->
-			<script src="assets/javascripts/ui-elements/examples.modals.js"></script>
-			<script src="script/js/notifications.js"></script>
-			<!-- Main-->
-			<script src="script/js/main.js"></script>
-			
-			<script src='script/js/warning.js'></script>
 
-		</section>
-	</body>
+
+		</div>
+	</section>
+	</div>
+	<!-- Vendor -->
+	<script src="assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
+	<script src="assets/vendor/bootstrap/js/bootstrap.js"></script>
+	<script src="assets/vendor/nanoscroller/nanoscroller.js"></script>
+	<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
+	<script src="assets/vendor/magnific-popup/magnific-popup.js"></script>
+	<script src="assets/vendor/jquery-placeholder/jquery.placeholder.js"></script>
+	<!-- Specific Page Vendor -->
+	<script src="assets/vendor/jquery-ui/js/jquery-ui-1.10.4.custom.js"></script>
+	<script src="assets/vendor/jquery-ui-touch-punch/jquery.ui.touch-punch.js"></script>
+	<script src="assets/vendor/jquery-appear/jquery.appear.js"></script>
+	<script src="assets/vendor/bootstrap-multiselect/bootstrap-multiselect.js"></script>
+	<script src="assets/vendor/jquery-easypiechart/jquery.easypiechart.js"></script>
+	<script src="assets/vendor/flot/jquery.flot.js"></script>
+	<script src="assets/vendor/flot-tooltip/jquery.flot.tooltip.js"></script>
+	<script src="assets/vendor/flot/jquery.flot.pie.js"></script>
+	<script src="assets/vendor/flot/jquery.flot.categories.js"></script>
+	<script src="assets/vendor/flot/jquery.flot.resize.js"></script>
+	<script src="assets/vendor/jquery-sparkline/jquery.sparkline.js"></script>
+	<script src="assets/vendor/raphael/raphael.js"></script>
+	<script src="assets/vendor/morris/morris.js"></script>
+	<script src="assets/vendor/gauge/gauge.js"></script>
+	<script src="assets/vendor/snap-svg/snap.svg.js"></script>
+	<script src="assets/vendor/liquid-meter/liquid.meter.js"></script>
+	<script src="assets/vendor/jqvmap/jquery.vmap.js"></script>
+	<script src="assets/vendor/jqvmap/data/jquery.vmap.sampledata.js"></script>
+	<script src="assets/vendor/bootstrap-fileupload/bootstrap-fileupload.min.js"></script>
+	<script src="assets/vendor/jquery-autosize/jquery.autosize.js"></script>
+	<script src="assets/vendor/pnotify/pnotify.custom.js"></script>
+	<!-- Theme Base, Components and Settings -->
+	<script src="assets/javascripts/theme.js"></script>
+	<!-- Theme Custom -->
+	<script src="assets/javascripts/theme.custom.js"></script>
+	<!-- Theme Initialization Files -->
+	<script src="assets/javascripts/theme.init.js"></script>
+	<!-- Examples -->
+	<script src="assets/javascripts/ui-elements/examples.modals.js"></script>
+	<script src="script/js/notifications.js"></script>
+	<!-- Main-->
+	<script src="script/js/main.js"></script>
+
+	<script src='script/js/warning.js'></script>
+
+	</section>
+</body>
 
 </html>

script/js/global.js

@@ -461,7 +461,7 @@ vm.component('api-list', {
             <inner-menu-li href="api-list.php?type=機電" name="機電"></inner-menu-li>
             <inner-menu-li href="api-list.php?type=資訊" name="資訊"></inner-menu-li>
             <inner-menu-li href="api-list.php?type=通用" name="通用"></inner-menu-li>
-            <inner-menu-li href="api-list.php?type=未分類" name="未分類"></inner-menu-li>
+            
         </ul>
     </div>
     <hr class="separator" />
@@ -475,11 +475,12 @@ vm.component('api-list', {
     </div>
     <hr class="separator" />
     <div class="widget-header clearfix">
-        <h6 class="title pull-left mt-xs">全部</h6>                    
+        <h6 class="title pull-left mt-xs">其他</h6>                    
     </div>
     <div class="widget-content">
         <ul class="mg-folders">
-            <inner-menu-li href="api-list.php" name="所有程式清單"></inner-menu-li>                                              
+            <inner-menu-li href="api-list.php" name="所有程式清單"></inner-menu-li>
+            <inner-menu-li href="api-list.php?type=未分類" name="未分類"></inner-menu-li>                                        
         </ul>
     </div>
 </div>`,
@@ -500,10 +501,11 @@ vm.component('isotope-item', {
         usage:String,
         software:String,
         detail:String,
+        source:String,
+        operate:String,
     },
     computed:{
-        addClass(){
-            console.log(this.object);
+        addClass(){            
             return this.filClass + " " + this.object + " " + this.usage + " " + this.software;
         }
     },
@@ -526,8 +528,8 @@ vm.component('isotope-item', {
             <div><img v-bind:href="bindHref(software,name,folder)" v-bind:src="bindHref(software,name,folder)" class="img-responsive" alt="Project" onerror="this.src='assets/images/not-found-image.jpg'" style="transform: scale(1);"></div>
             
         </div>
-        <a v-bind:href="hrefLink(id)">{{name}}</a>
-        <div class="mg-description"><small style="display:none;">{{detail}}</small><small class="pull-right text-muted" >{{software}}</small></div>
+        <a class="name" v-bind:href="hrefLink(id)">{{name}}</a>
+        <div class="mg-description"><small style="display:none;">{{detail}}</small><small class="operate" style="display:none;">{{operate}}</small><small class="source" style="display:none;">{{source}}</small><small class="software" class="pull-right text-muted" >{{software}}</small></div>
     </div>
 </div>`,
 });

script/php/getTree.php

@@ -11,7 +11,7 @@ function FindPath($root,$folder){
     foreach($paths as $path){
         
         if(str_contains($path,'.')){
-            if(!str_contains($path,'.png')){
+            if(!str_contains(strtolower($path),'.png')){
                 echo("<li data-jstree='{ ".'"type" : "file"'." }' >");
                 $path = "<a href='".$rootPath."/".$folder."/".$path."'>".$path."</a>";            
                 echo($path);