新增 vue-search-block

index.php

@@ -59,6 +59,11 @@ if (!isset($_SESSION['loggedin'])) {
 	<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>
+
 	<style>
 		.row {
 			margin-top: -15px;
@@ -565,7 +570,7 @@ if (!isset($_SESSION['loggedin'])) {
 			var searchURL = window.location.search;
 			searchURL = searchURL.substring(1, searchURL.length);
 			if (searchURL.includes("=")) {
-				projectId = decodeURIComponent(searchURL.split("&")[1].split("=")[1]);
+				projectId = decodeURIComponent(searchURL.split("&")[0].split("=")[1]);
 				var projectNode = $(".jstree-anchor").filter(function() {
 					return $(this).text().includes(projectId);
 				});
@@ -643,6 +648,9 @@ if (!isset($_SESSION['loggedin'])) {
 					</ul>
 				</header>
 				<div class="row">
+
+					<search-block></search-block>
+
 					<div class="col-md-6">
 						<section class="panel">
 							<div class="panel-body">
@@ -730,6 +738,7 @@ if (!isset($_SESSION['loggedin'])) {
 
 					</div>
 				</div>
+			</section>
 
 
 
@@ -739,12 +748,7 @@ if (!isset($_SESSION['loggedin'])) {
 	</section>
 	</div>
 
-
-
-
-
-
-	</section>
+	<script>vm.mount('.body');</script>
 
 	<script>
 

script/js/jstreeAJAX.js

@@ -143,7 +143,7 @@ $(document).ready(function () {
         var searchURL = window.location.search;
         searchURL = searchURL.substring(1, searchURL.length);
         if (searchURL.includes("=")) {
-            type = decodeURIComponent(searchURL.split("&")[0].split("=")[1]);
+            type = decodeURIComponent(searchURL.split("&")[1].split("=")[1]);
             $(this).jstree("open_all");
         }
 

script/js/vue-search-block.js

@@ -0,0 +1,160 @@
+var category_list = [];
+var project_list = [];
+var type_list = [];
+
+$.ajax({
+    url: "./script/php/get_category_list.php",
+    type: "GET",
+    async: false,
+    contentType: "application/json",
+    dataType: "json"
+}).done(function(data) {
+    category_list = data;
+}).error(function(error) {
+    console.log(error);
+});
+
+$.ajax({
+    url: "./script/php/get_project_list.php",
+    data: {
+        category_id: get_object_value_to_list(category_list, 'category_id'),
+    },
+    type: "GET",
+    async: false,
+    contentType: "application/json",
+    dataType: "json"
+}).done(function(data) {
+    project_list = data;
+}).error(function(error) {
+    console.log(error);
+});
+
+$.ajax({
+    url: "./script/php/get_type_list.php",
+    type: "GET",
+    async: false,
+    contentType: "application/json",
+    dataType: "json"
+}).done(function(data) {
+    type_list = data;
+}).error(function(error) {
+    console.log(error);
+});
+
+const vm = Vue.createApp({});
+
+vm.component('search-block', {
+    data() {
+        return {
+            category_list: category_list,
+            project_list: project_list,
+            type_list: type_list
+        }
+    },
+    template: `<section class="panel">
+            <div class="panel-body">
+                <div class="filter_for_project">
+                    <div class="ui-group">
+                        <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="category">
+                            <li style="padding: 10px 15px;">
+                                <label>工程類別:</label>
+                            </li>
+                            <li class="active">
+                                <a class="button" data-filter="">any</a>
+                            </li>
+                            <filter-button v-for="item in category_list" v-bind:object="item.category_name"></filter-button>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="filter_for_search">
+                    <div class="ui-group">
+                        <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="project">
+                            <li style="padding: 10px 15px;">
+                                <label>專案類別:</label>
+                            </li>
+                            <li class="active">
+                                <a class="button" data-filter="">any</a>
+                            </li>
+                            <filter-project-button v-for="item in project_list" v-bind:category_id="item.category_id" v-bind:object="item.project_name"></filter-project-button>
+                        </ul>
+                    </div>
+
+                    <div class="ui-group">
+                        <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="type">
+                            <li style="padding: 10px 15px;">
+                                <label>文件類別:</label>
+                            </li>
+                            <li class="active">
+                                <a class="button" data-filter="">any</a>               
+                            </li>
+                            <filter-button v-for="item in type_list" v-bind:object="item.type_name"></filter-button>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>`
+});
+
+vm.component('filter-button', {
+    template: `<li><a class="button" v-bind:data-filter="addDot">{{object}}</a></li>`,
+    props: {
+        object: String,
+    },
+    computed: {
+        addDot() {
+            return "." + this.object;
+        }
+    },
+
+});
+
+vm.component('filter-project-button', {
+    template: `<li><a class="button" v-bind:data-filter="addDot">{{object}}</a></li>`,
+    props: ["category_id", "object"],
+    methods: {
+        addClass(class_name) {
+            return class_name + " " + this.category_id;
+        }
+    },
+    computed: {
+        addDot() {
+            return "." + this.object;
+        }
+    },
+});
+
+// var $isotope_project = $('.filter_for_search').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;
+// }
+
+function get_object_value_to_list(obj, key) {
+    value_list = [];
+    for(i=0; i<obj.length; i++){
+        value_list.push(obj[i][key]);
+    }
+    return value_list
+}

script/php/get_category_list.php

@@ -0,0 +1,20 @@
+<?php
+
+include("sql.php");
+$array = [];
+
+$connectionInfo = array("Database" => "$dbname", "UID" => "$username", "PWD" => "$password", "CharacterSet" => "UTF-8");
+$conn = sqlsrv_connect($hostname, $connectionInfo);
+if ($conn === false) {
+    die(print_r(sqlsrv_errors(), true));
+}
+
+$sql = "SELECT DISTINCT [category_id], [category_name] FROM [21000X].[dbo].[Construction_Category];";
+
+$fetchResult = sqlsrv_query($conn, $sql);
+while ($row = sqlsrv_fetch_array($fetchResult, SQLSRV_FETCH_ASSOC)) {
+    array_push($array ,$row);
+}
+echo json_encode($array,JSON_UNESCAPED_UNICODE);
+
+?>

script/php/get_project_list.php

@@ -0,0 +1,26 @@
+<?php
+
+if (isset($_GET['category_id'])) {
+
+    include("sql.php");
+    $category_id = implode(', ', $_GET['category_id']);
+    $array = [];
+
+    $connectionInfo = array("Database" => "$dbname", "UID" => "$username", "PWD" => "$password", "CharacterSet" => "UTF-8");
+    $conn = sqlsrv_connect($hostname, $connectionInfo);
+    if ($conn === false) {
+        die(print_r(sqlsrv_errors(), true));
+    }
+    
+    $sql = "SELECT DISTINCT [project_id], [project_name],[category_id] FROM [21000X].[dbo].[Project_Table] WHERE [category_id] IN (".$category_id.");";
+    
+    $fetchResult = sqlsrv_query($conn, $sql);
+    while ($row = sqlsrv_fetch_array($fetchResult, SQLSRV_FETCH_ASSOC)) {
+        array_push($array ,$row);
+    }
+    echo json_encode($array,JSON_UNESCAPED_UNICODE);
+} else {
+    die("post error!");
+}
+
+?>

script/php/get_search_list.php

@@ -0,0 +1,32 @@
+<?php
+
+if (isset($_GET['project_id'])) {
+
+    include("sql.php");
+    $project_id = $_GET['project_id'];
+    $type_id = $_GET['type_id'];
+    // $search = $_GET['search'];
+    $array = [];
+
+    $connectionInfo = array("Database" => "$dbname", "UID" => "$username", "PWD" => "$password", "CharacterSet" => "UTF-8");
+    $conn = sqlsrv_connect($hostname, $connectionInfo);
+    if ($conn === false) {
+        die(print_r(sqlsrv_errors(), true));
+    }
+    
+    $sql = "SELECT DISTINCT [id], [original_name] FROM [21000X].[dbo].[File_Table]
+        WHERE [project_id] IN ($project_id) AND [type_id] IN ($type_id)
+        UNION
+        SELECT DISTINCT [id], [original_name] FROM [21000X].[dbo].[Blueprint]
+        WHERE [project_id] IN ($project_id) AND [type_id] IN ($type_id);";
+    
+    $fetchResult = sqlsrv_query($conn, $sql);
+    while ($row = sqlsrv_fetch_array($fetchResult, SQLSRV_FETCH_ASSOC)) {
+        array_push($array ,$row);
+    }
+    echo json_encode($array,JSON_UNESCAPED_UNICODE);
+} else {
+    die("post error!");
+}
+
+?>

script/php/get_type_list.php

@@ -0,0 +1,20 @@
+<?php
+
+include("sql.php");
+$array = [];
+
+$connectionInfo = array("Database" => "$dbname", "UID" => "$username", "PWD" => "$password", "CharacterSet" => "UTF-8");
+$conn = sqlsrv_connect($hostname, $connectionInfo);
+if ($conn === false) {
+    die(print_r(sqlsrv_errors(), true));
+}
+
+$sql = "SELECT DISTINCT [type_id], [type_name] FROM [21000X].[dbo].[File_Category];";
+
+$fetchResult = sqlsrv_query($conn, $sql);
+while ($row = sqlsrv_fetch_array($fetchResult, SQLSRV_FETCH_ASSOC)) {
+    array_push($array ,$row);
+}
+echo json_encode($array,JSON_UNESCAPED_UNICODE);
+
+?>