|
|
@@ -11,188 +11,27 @@ if (isset($_POST["id"])) {
|
|
|
<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">
|
|
|
+ <?php include("bim-support-header.html"); ?>
|
|
|
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet">
|
|
|
- <!-- 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>
|
|
|
+ <script src="./script/js/global.js"></script>
|
|
|
<script src="./script/js/jquery.redirect.js"></script>
|
|
|
- <!-- Icon -->
|
|
|
- <link rel="shortcut icon" href="assets/images/favicon.ico" />
|
|
|
- <style>
|
|
|
- .video {
|
|
|
- color: #0088CC;
|
|
|
- }
|
|
|
- </style>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ var userName = '<?php echo $_SESSION['name']; ?>';
|
|
|
+
|
|
|
+ pageHeader = "BIM影音庫";
|
|
|
+ </script>
|
|
|
</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>
|
|
|
- </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>
|
|
|
- <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>
|
|
|
- </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>
|
|
|
- </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>
|
|
|
- <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>
|
|
|
- <li class=""><a href="video-list.php"><i class="fa fa-video-camera" aria-hidden="true"></i><span>BIM影音庫</span></a></li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </nav>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </aside>
|
|
|
- <!-- end: sidebar -->
|
|
|
+<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 id="header">BIM影音網 - </h2>
|
|
|
@@ -223,167 +62,17 @@ if (isset($_POST["id"])) {
|
|
|
</section>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
|
|
|
<script>
|
|
|
- const fileType = {
|
|
|
- "pptx": "fa-file-powerpoint-o",
|
|
|
- "ppt": "fa-file-powerpoint-o",
|
|
|
- "docx": "fa-file-word-o",
|
|
|
- "doc": "fa-file-word-o",
|
|
|
- "xls": "fa-file-excel-o",
|
|
|
- "xlsx": "fa-file-excel-o",
|
|
|
- "pdf": "fa-file-pdf-o",
|
|
|
- "zip": "fa-file-archive-o",
|
|
|
- "rar": "fa-file-archive-o",
|
|
|
- }
|
|
|
+ vm.mount('.body');
|
|
|
|
|
|
var id = '<?php echo ($id); ?>';
|
|
|
- $(document).ready(function() {
|
|
|
-
|
|
|
- getVideoInfo();
|
|
|
- getVideoFile();
|
|
|
- $('#video').bind('contextmenu', function() {
|
|
|
- return false;
|
|
|
- });
|
|
|
- setListHeight();
|
|
|
- });
|
|
|
- $(window).resize(function() {
|
|
|
- setListHeight();
|
|
|
- });
|
|
|
- $(".sidebar-toggle").click(function() {
|
|
|
- setTimeout(function() {
|
|
|
- setListHeight();
|
|
|
- }, 10);
|
|
|
- });
|
|
|
-
|
|
|
- function getVideoInfo() {
|
|
|
- $.ajax({
|
|
|
- url: "./script/php/video/getInfo.php",
|
|
|
- type: "POST",
|
|
|
- data: {
|
|
|
- id: id,
|
|
|
- },
|
|
|
- dataType: "json"
|
|
|
- }).done(function(result) {
|
|
|
- $("#header").append(result[0].title);
|
|
|
- getVideoList(result[0].dir_name);
|
|
|
- }).error(function(error) {
|
|
|
- console.log(error);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function getVideoList(dir) {
|
|
|
- $.ajax({
|
|
|
- url: "./script/php/video/getList.php",
|
|
|
- type: "POST",
|
|
|
- data: {
|
|
|
- dir: dir,
|
|
|
- },
|
|
|
- dataType: "json"
|
|
|
- }).done(function(result) {
|
|
|
- let videos = result["Video_Table"];
|
|
|
- let files = result["File_Table"];
|
|
|
- $("#video-list").empty();
|
|
|
- for (j = 0; j < videos.length; j++) {
|
|
|
- if (videos[j].id == id)
|
|
|
- $("#video-list").append("<li><a style='color:#0088CC;background-color:#21262d' href = '#' onclick='getVideo(" + videos[j].id + ")'><i class = 'fa fa-video-camera'></i><span>" + videos[j].title + '</span></a></li>');
|
|
|
- else
|
|
|
- $("#video-list").append("<li><a style='color:#0088CC;' href = '#' onclick='getVideo(" + videos[j].id + ")'><i class = 'fa fa-video-camera'></i><span>" + videos[j].title + '</span></a></li>');
|
|
|
- }
|
|
|
- for (j = 0; j < files.length; j++) {
|
|
|
- $("#file-list").append("<li><a style='color:#0088CC;' class='video' href = '#' onclick='getFile(" + files[j].id + ")'><i class = 'fa " + fileType[files[j].type] + "'></i><span>" + files[j].title + "." + files[j].type + '</span></a></li>');
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }).error(function(error) {
|
|
|
- console.log(error);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function setListHeight() {
|
|
|
- $("#video-list-panel").height($("#video-body").height() * 0.7);
|
|
|
- $("#file-list-panel").height($("#video-body").height() * 0.3);
|
|
|
- }
|
|
|
-
|
|
|
- function getVideoFile() {
|
|
|
- $.ajax({
|
|
|
- url: "./script/php/video/access2.php",
|
|
|
- type: "POST",
|
|
|
- data: {
|
|
|
- id: id,
|
|
|
- },
|
|
|
- }).done(function(result) {
|
|
|
- var video = videojs("video");
|
|
|
- video.src({
|
|
|
- src: result,
|
|
|
- });
|
|
|
- video.on("canplay", function() {
|
|
|
- video.poster(result.replace("m3u8", "jpg"));
|
|
|
- });
|
|
|
-
|
|
|
- }).error(function(error) {
|
|
|
- console.log("e:" + error);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function getFile(id) {
|
|
|
- window.location.href = "./script/php/video/getFile.php?id=" + id;
|
|
|
- }
|
|
|
-
|
|
|
- function getVideo(id) {
|
|
|
- $.redirect('./video-play.php', {
|
|
|
- 'id': id
|
|
|
- });
|
|
|
- }
|
|
|
</script>
|
|
|
- <!-- 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/video-play.js"></script>
|
|
|
+ <?php include("bim-support-body.html"); ?>
|
|
|
</section>
|
|
|
</body>
|
|
|
|
