新增 教育訓練平台搜尋功能

script/js/global.js

@@ -627,6 +627,9 @@ vm.component('isotope-item', {
     },
     template: `<div  v-bind:class="addClass">
     <div class="thumbnail">
+
+        <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="pull-right text-muted software" >{{software}}</small></div>
         <div class="thumb-preview">
             <div class="thumb-image"></div>
             <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>

script/js/video-list.js

@@ -111,4 +111,56 @@
         }).error(function (error) {
             console.log(error);
         });
+    }
+
+    function search_video(search_word) {
+        $.ajax({
+            url: "./script/php/video/get_video_search.php",
+            type: "POST",
+            data: {
+                search: search_word,
+            },
+            dataType: "json"
+        }).done(function (result) {
+            file_tables = result["file_tables"];
+
+            if(!file_tables.length) {
+                $("#video-list").append('<h2 align="center">無符合選項</h2>')
+                return
+            }
+
+            for (j = 0; j < file_tables.length; j++) {
+                if (file_tables[j]["file_path"].includes(".m3u8")) {
+                    $("#video-list").append('<div class="col-md-3">' +
+                        '<section class="panel">' +
+                        "<a href='#' onclick='getVideo(" + file_tables[j]["id"] + ",\"" + file_tables[j]["file_path"].split("/")[file_tables[j]["file_path"].split("/").length - 2] + "\")'>" +
+                        '<img style="aspect-ratio: 4/3;" class="video-static" src="' + file_tables[j]["file_path"].replace("m3u8", "jpg") + '">' +
+                        '<img style="aspect-ratio: 4/3;" class="video-active" src="' + file_tables[j]["file_path"].replace("m3u8", "gif") +
+                        '">' +
+                        '</a>' +
+                        '<div class="panel-body" id="">' +
+                        '<div class="video-text">' +
+                        "<p style='font-size: 20px;'><i class='fa fa-video-camera'></i><a class='video-font' href='#' onclick='getVideo(" + file_tables[j]["id"] + ",\"" + file_tables[j]["file_path"].split("/")[file_tables[j]["file_path"].split("/").length - 2] + "\")'>" + file_tables[j]["title"] + "</a></p>" +
+                        '</div>' +
+                        '</div>' +
+                        '</section>' +
+                        '</div>');
+                } else if (file_tables[j]["file_path"].includes(".pdf")) {
+                    $("#video-list").append('<div class="col-md-3">' +
+                        '<section class="panel">' +
+                        "<a target='_blank' href='" + file_tables[j]["file_path"] + "'>" +
+                        '<img style="aspect-ratio: 4/3;" class="video-active" src="' + file_tables[j]["file_path"].replace("pdf", "jpg") + '">' +
+                        '</a>' +
+                        '<div class="panel-body" id="">' +
+                        '<div class="video-text">' +
+                        "<p style='font-size: 20px;'><i class='fa fa-file-pdf-o'></i><a class='video-font' target='_blank' href='" + file_tables[j]["file_path"] + "'>" + file_tables[j]["title"] + "</a></p>" +
+                        '</div>' +
+                        '</div>' +
+                        '</section>' +
+                        '</div>');
+                }
+            }
+        }).error(function (error) {
+            console.log(error);
+        });
     }

script/php/video/get_video_search.php

@@ -0,0 +1,21 @@
+<?php
+if (isset($_POST["search"])) {
+    include("../connectSQL_Component.php");
+
+    $search = $_POST["search"];
+    $file_tables = [];
+    $array = [];
+    $sql = "SELECT [id],[title], [file_path] FROM [BIMComponents].[dbo].[Video_Table] 
+        WHERE [title] like '%".$search."%';";
+
+    $fetchResult = sqlsrv_query($conn, $sql);
+    while ($row = sqlsrv_fetch_array($fetchResult, SQLSRV_FETCH_ASSOC)) {
+        array_push($file_tables, $row);
+    }
+
+    $array["file_tables"] = $file_tables;
+
+    echo json_encode($array);
+
+    sqlsrv_close($conn);
+}

video-list.php

@@ -37,9 +37,22 @@ if (isset($_POST["folder"])) {
 			<section role="main" class="content-body">
 				<header class="page-header">
 					<h2>{{pageHeader}}</h2>
-					<button class="mb-xs mt-xs mr-xs btn btn-default right" type="button" style="float: right;" onclick="initList(parent)">回上層</button>
 				</header>
-				<div class="row" id="video-list">
+				<div class="inner-body mg-main" style="margin-left: 0px;">
+					<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;">
+									<a class="btn btn-primary" href="video-list.php" id="resetbtn" data-toggle="tooltip" data-original-title="" title="">
+										<i class="fa fa-undo"></i>
+									</a>
+								</div>
+							</li>
+							<button class="mb-xs mt-xs mr-xs btn btn-default right" type="button" style="float: right;" onclick="initList(parent)">回上層</button>
+						</ul>
+					</div>
+					<div class="row" id="video-list"></div>
 				</div>
 			</section>
 		</div>
@@ -50,6 +63,22 @@ if (isset($_POST["folder"])) {
 	</script>
 	<script src="./script/js/video-list.js"></script>
 	<?php include("bim-support-body.html"); ?>
+
+	<script>
+		$(".input-search .btn").on("click", function() {
+			// alert($("#quicksearch").val());
+			$("#video-list").empty();
+			search_video($("#quicksearch").val());
+		});
+
+		$('.input-search input').on('keyup', function(e) {
+			if (e.key === 'Enter' || e.keyCode === 13) {
+				$('#video-list').empty();
+				search_video($("#quicksearch").val());
+			}
+		});
+	</script>
+
 	</section>
 </body>