Răsfoiți Sursa

新增修改新版選擇檔案頁面

steve07s 3 ani în urmă
părinte
comite
c71a97042d
2 a modificat fișierele cu 585 adăugiri și 50 ștergeri
  1. 584 49
      Upload.html
  2. 1 1
      edit.html

+ 584 - 49
Upload.html

@@ -1,54 +1,571 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html class="fixed">
 
 <head>
-    <title>設計群匯入工具</title>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="./assets/images/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="./script/css/form.css" />
-    <link href='https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700' rel='stylesheet'
-        type='text/css'>
-    <link rel="stylesheet" href="./assets/vendor/font-awesome/css/font-awesome.css" />
-    <script src="./assets/vendor/jquery/jquery.js"></script>
+    <!-- Basic -->
+    <meta charset="UTF-8">
+    <title>設計資料庫匯入工具</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="/DataBase/assets/vendor/jquery/jquery.js"></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">
+    <!-- jstree CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css">
+    <!-- Vendor CSS -->
+    <link rel="stylesheet" href="/DataBase/assets/vendor/bootstrap/css/bootstrap.css" />
+    <link rel="stylesheet" href="/DataBase/assets/vendor/font-awesome/css/font-awesome.css" />
+    <link rel="stylesheet" href="/DataBase/assets/vendor/magnific-popup/magnific-popup.css" />
+    <link rel="stylesheet" href="/DataBase/assets/vendor/bootstrap-datepicker/css/datepicker3.css" />
+    <link rel="stylesheet" href="/DataBase/assets/vendor/pnotify/pnotify.custom.css" />
+    <!-- Specific Page Vendor CSS -->
+    <link rel="stylesheet" href="/DataBase/assets/vendor/jquery-ui/css/ui-lightness/jquery-ui-1.10.4.custom.css" />
+    <link rel="stylesheet" href="/DataBase/assets/vendor/bootstrap-multiselect/bootstrap-multiselect.css" />
+    <link rel="stylesheet" href="/DataBase/assets/vendor/morris/morris.css" />
+    <link rel="stylesheet" href="/DataBase/assets/vendor/bootstrap-fileupload/bootstrap-fileupload.min.css" />
+    <!-- Theme CSS -->
+    <link rel="stylesheet" href="/DataBase/assets/stylesheets/theme.css" />
+    <!-- Skin CSS -->
+    <link rel="stylesheet" href="/DataBase/assets/stylesheets/skins/default.css" />
+    <!-- Theme Custom CSS -->
+    <link rel="stylesheet" href="/DataBase/assets/stylesheets/theme-custom.css">
+    <!-- Head Libs -->
+    <script src="/DataBase/assets/vendor/modernizr/modernizr.js"></script>
+    <!-- chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- DataTable -->
+
+    <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="/DataBase/assets/images/favicon.ico" />
+    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet">
+    <link href="/DataBase/CustomCSS/main.css" rel="stylesheet">
+    <script src="/DataBase/script/js/bootstrap.js"></script>
+    <script src="/DataBase/script/js/pdfobject.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
+
+    <script src="https://js.arcgis.com/4.21/"></script>
+    <style>
+        body {
+            color: #000;
+        }
+
+        .row {
+            margin-top: -15px;
+        }
+
+        .page-header>ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .page-header>ul>li {
+            display: inline-block;
+            font-size: 25px;
+            color: #FFFFFF;
+        }
+
+        .page-header>ul>li.right {
+            float: right;
+            padding-right: 10px;
+        }
+
+        .input-search {
+            margin-top: 8px;
+        }
+
+        .page-header li>label {
+            margin-top: 13px;
+            border-bottom: 4px solid #0088cc;
+            height: 41px;
+            padding-left: 40px;
+        }
+
+        .sidebar-left {
+            box-shadow: 0 0 0;
+        }
+
+        .jstree-default .jstree-icon {
+            color: #ffe693;
+        }
+
+        .jqsfield {
+            color: white;
+            font: 10px arial, san serif;
+            text-align: left;
+        }
+
+        .jstree-anchor {
+            width: 250px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .jstree-anchor,
+        .jstree-anchor:link,
+        .jstree-anchor:visited,
+        .jstree-anchor:hover,
+        .jstree-anchor:active {
+            color: #abb4be;
+        }
+
+        td,
+        th {
+            text-align: center;
+
+        }
+
+        #tablepage匯入資訊>thead>tr>th {
+            width: 25%;
+        }
+
+        #tableform>thead>tr>th {
+            width: 50%;
+        }
+
+        .nav-main {
+            padding: 15px;
+        }
+
+        .node-hidden {
+            display: none;
+        }
+
+        html.fixed .page-header {
+            left: 0px;
+        }
+
+        html.fixed .content-body {
+            margin-left: 0px;
+        }
+
+        .sidebar-left {
+            width: 0px;
+        }
+
+        #viewDiv {
+            height: 100%;
+            width: 100%;
+        }
+
+        #zoom {
+            margin-bottom: 5px;
+        }
+
+        #actions {
+            padding: 5px;
+        }
+
+        .container {
+            height: 50%;
+            width: 100%;
+        }
+
+        #createSlideDiv {
+            background-color: white;
+            opacity: 0.9;
+            color: black;
+            padding: 6px;
+        }
+
+        #slidesDiv {
+            background-color: white;
+            opacity: 0.9;
+            color: black;
+            padding: 10px;
+            visibility: hidden;
+            bottom: 20px;
+            overflow-y: auto;
+            text-align: center;
+            height: 260px;
+        }
+
+        #slidesDiv .slide {
+            /* Show cursor as pointer when on a slide */
+            cursor: pointer;
+            margin-bottom: 6px;
+        }
+
+        #slidesDiv .slide .title {
+            /* Center the title text */
+            text-align: center;
+        }
+
+        /* Draw active slide with a nice border around the thumbnail */
+
+        #slidesDiv .slide.active img {
+            box-shadow: 0px 0px 12px black;
+            border-style: solid;
+            border-width: thin;
+            border-color: black;
+        }
+
+        .pdfobject-container {
+            height: 730px;
+        }
+
+        #topbar {
+            background: #fff;
+            padding: 10px;
+        }
+
+        /* uploadExcel */
+
+        td>label {
+            width: 8em;
+            text-align: left;
+            padding-right: 0.5em;
+            /* display: inline-block; */
+        }
+
+        .excel {
+            font-family: Arial, Helvetica, sans-serif;
+            border-collapse: collapse;
+            width: 100%;
+        }
+
+        .nav-tabs>li.active>a,
+        .nav-tabs>li.active>a:focus,
+        .nav-tabs>li.active>a:hover {
+            border: 1px solid #000;
+        }
+
+        .excel td,
+        .excel th {
+            border: 1px solid #aaa;
+            padding: 8px;
+        }
+
+        .excel tr:nth-child(even) {
+            background-color: #f2f2f2;
+        }
+
+        .excel tr:hover {
+            background-color: #ddd;
+        }
+
+        .excel th {
+            padding-top: 12px;
+            padding-bottom: 12px;
+            text-align: center;
+            background-color: #004B7C;
+            color: white;
+        }
+
+        table.dataTable tbody tr td.NullClass {
+            background-color: #ed9c28;
+        }
+
+        table.dataTable tbody tr td.ErrorClass {
+            background-color: #d2322d;
+        }
+
+        .submit {
+            display: inline-block;
+            margin-left: auto;
+            margin-right: auto;
+            width: 20%;
+            background-color: #004B7C;
+            border: none;
+            color: white;
+            padding: 15px 32px;
+            text-align: center;
+            text-decoration: none;
+            font-size: 16px;
+            margin: 10px;
+        }
+
+        .delete {
+            background-color: red;
+            border: none;
+            color: white;
+            padding: 5px 32px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+        }
+
+        .center {
+            text-align: center;
+        }
+
+        .nav-tabs.nav-justified li.active a.error.text-center,
+        a.error.text-center:hover {
+            border-bottom-color: transparent;
+            border-top: 3px solid #d2322d;
+            box-shadow: none;
+            color: #d2322d;
+        }
+
+        a.error.text-center,
+        i.error,
+        td.error {
+            color: #d2322d;
+        }
+
+        .nav-tabs.nav-justified li.active a.warning.text-center,
+        a.warning.text-center:hover {
+            border-bottom-color: transparent;
+            border-top: 3px solid #ed9c28;
+            box-shadow: none;
+            color: #ed9c28;
+        }
+
+        a.warning.text-center,
+        i.warning,
+        td.warning {
+            color: #ed9c28;
+        }
+
+        .nav-tabs.nav-justified li.active a.info.text-center,
+        a.info.text-center:hover {
+            border-bottom-color: transparent;
+            border-top: 3px solid #0088cc;
+            box-shadow: none;
+            color: #0088cc;
+        }
+
+        a.info.text-center,
+        i.info {
+            color: #0088cc;
+        }
+
+        .nav-tabs.nav-justified li.active a.success.text-center,
+        a.success.text-center:hover {
+            border-bottom-color: transparent;
+            border-top: 3px solid #4a934a;
+            box-shadow: none;
+            color: #4a934a;
+        }
+
+        a.success.text-center,
+        i.success {
+            color: #4a934a;
+        }
+
+        .dataTables_wrapper .dataTables_filter label {
+            width: initial;
+        }
+
+        .dataTables_wrapper .dataTables_filter input {
+            width: initial;
+        }
+
+        .form-group {
+            border-bottom: 1px solid #eff2f7;
+            padding-bottom: 15px;
+        }
+    </style>
+
+
 </head>
-<a href="./edit.html" class="go-to-editor" target="_self">進入至編輯工具</a>
-<form method="post" enctype="multipart/form-data" action="./script/php/importTool/uploadExcel.php">
 
-    <h1><strong>MAA</strong> 設計群匯入工具</h1>
+<body>
+    <section class="body">
+        <!-- start: header -->
+        <header class="header">
+            <div class="logo-container">
+                <div class="banner-txt">設計資料庫匯入工具</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="/DataBase/index.php" class="notification-icon" data-toggle="tooltip" title="設計資料庫查詢"
+                            data-placement="bottom">
+                            <i class="fa fa-database"></i>
+                        </a>
+                        <a href="/Front-Page/home.php" class="notification-icon" data-toggle="tooltip" title="綜合登入入口"
+                            data-placement="bottom">
+                            <i class="fa fa-home"></i>
+                        </a>
+                    </li>
+                </ul>
+                <span class="separator"></span>
+                <div id="userbox" class="userbox">
+                    <a href="#" data-toggle="dropdown">
+                        <figure class="profile-picture"> <img src="/DataBase/assets/images/!logged-user.jpg"
+                                alt="Joseph Doe" class="img-circle"
+                                data-lock-picture="/DataBase/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">tester</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="/DataBase/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 -->
 
-    <div class="form-group">
-        <label for="projectId">計畫編號 </label>
-        <input type="text" name="projectId" id="projectId" class="form-controll" required="required" />
-    </div>
-    <div class="form-group">
-        <label for="projectName">計畫名稱 </label>
-        <input type="text" name="projectName" id="projectName" class="form-controll" required="required" />
-    </div>
-    <div class="form-group">
-        <label for="category">工程類別</label>
-        <select name="category" id="category" class="form-controll" required="required">
-        </select>
-    </div>
+            <section role="main" class="content-body">
+                <header class="page-header">
+                    <ul>
+                        <li>
+                            <label id="header">MAA 設計群匯入工具</label>
+                        </li>
+                    </ul>
+                </header>
+
+                <div class="row">
+                    <div class="col-md-6 col-md-offset-3">
+                        <div class="tabs tabs-primary">
+                            <ul class="nav nav-tabs nav-justified">
+                                <li class="active">
+                                    <a href="#upload" data-toggle="tab" class="text-center"><i
+                                            class="fa fa-upload"></i>上傳工具</a>
+                                </li>
+                                <li>
+                                    <a href="#edit" data-toggle="tab" class="text-center"><i
+                                            class="fa fa-edit"></i>編輯工具</a>
+                                </li>
+                            </ul>
+                            <div class="tab-content">
+                                <div id="upload" class="tab-pane active">
+                                    <form method="post" enctype="multipart/form-data"
+                                        action="./script/php/importTool/uploadExcel.php">
+
+                                        <div class="form-group">
+                                            <label class="col-md-3 control-label" for="projectId">計畫編號 </label>
+                                            <div class="col-md-6">
+                                                <input type="text" name="projectId" class="form-control" id="projectId"
+                                                    class="form-controll"
+                                                    required="required" />
+                                            </div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label class="col-md-3 control-label" for="projectName">計畫名稱 </label>
+                                            <div class="col-md-6">
+                                                <input type="text" name="projectName" class="form-control"
+                                                    id="projectName" class="form-controll"
+                                                    required="required" />
+                                            </div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label class="col-md-3 control-label" for="category">工程類別</label>
+                                            <div class="col-md-6">
+                                                <select class="form-control mb-md" name="category" id="category"
+                                                    required="required">
+                                                </select>
+                                            </div>
+                                        </div>
+
+                                        <div class="form-group" style="border-bottom: 0px;">
+                                            <label class="col-md-3 control-label" for="excel">Excel文件</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="excel" id="excel"
+                                                                required="required"
+                                                                accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+                                                        </span>
+                                                        <a href="#" class="btn btn-default fileupload-exists"
+                                                            data-dismiss="fileupload">移除檔案</a>
+                                                        <span
+                                                            class="help-block"><strong>注意事項:</strong>Excel檔名請用 計畫編號-計畫名稱
+                                                            <br>(例:180024-新北市3D智慧管線查詢及管理系統.xlsx)</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+
+                                        </div>
+
+                                        <footer class="panel-footer">
+                                            <button id="submit" class="btn btn-primary">上傳檔案</button>
+                                            <button id="reset" type="reset" class="btn btn-default">清除表單</button>
+                                        </footer>
+                                    </form>
+                                </div>
+                                <div id="edit" class="tab-pane">
+                                    <form id="formEdit" method="post" enctype="multipart/form-data"
+                                        action="./script/php/importTool/updateProject.php">
+
+                                        <div class="form-group">
+                                            <label class="col-md-3 control-label" for="projectId">計畫編號</label>
+                                            <div class="col-md-6">
+                                                <input type="text" class="form-control" name="projectId"
+                                                    id="projectIdEdit" required="required">
+                                            </div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label class="col-md-3 control-label" for="projectName">計畫名稱</label>
+                                            <div class="col-md-6">
+                                                <input type="text" class="form-control" name="projectName"
+                                                    id="projectNameEdit" required="required">
+                                            </div>
+                                        </div>
+
+                                        <div class="form-group">
+                                            <label class="col-md-3 control-label" for="category">工程類別</label>
+                                            <div class="col-md-6">
+                                                <select class="form-control mb-md" name="category" id="categoryEdit"
+                                                    required="required">
+                                                </select>
+                                            </div>
+                                        </div>
+
+                                        
+                                        <div class="form-group" style="border-bottom: 0px;">
+                                            <label class=" col-md-3 control-label">使用說明</label>
+                                            <div class="col-lg-6">
+                                                <p>輸入計畫編號後,再修改計畫名稱或工程類別。</p>
+                                            </div>
+                                        </div>
 
-    <div class="form-group file-area">
-        <label for="excel">Excel文件</label>
-        <input type="file" name="excel" id="excel" required="required"
-            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
-        <div class="file-dummy">
-            <div class="success">你已經選擇<span id="filename"></span>。 請繼續下一步。</div>
-            <div class="default">選擇Excel文件</div>
+                                        <footer class="panel-footer">
+                                            <button id="submitEdit" class="btn btn-primary">儲存修改</button>
+                                            <button id="resetEdit" type="reset" class="btn btn-default">清除表單</button>
+                                        </footer>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
         </div>
+    </section>
     </div>
 
-    <div class="form-group center">
-        <p><strong>注意事項:</strong>Excel檔名請包含計畫編號。 (例:15032.xlsx)</p>
-        <button type="submit">上傳檔案</button>
-        <button id="reset" type="button">清除表單</button>
-    </div>
 
-</form>
-<a href="./index.php" class="back-to-article" target="_self">返回至查詢工具</a>
+    </section>
+
+
+</body>
+
+
+
 
 <script type="text/javascript">
     var projectTable;
@@ -57,7 +574,7 @@
         var url_href = window.location.href;
         var url = new URL(url_href);
         var status = url.searchParams.get("status");
-        if(status == 'success'){
+        if (status == 'success') {
             alert("匯入成功!");
             window.location.href = "./upload.html"
         }
@@ -83,6 +600,25 @@
             }
 
         });
+        $("#projectIdEdit").change(function () {
+            const find = projectTable.find(element => element[0] == this.value);
+            if (find != null) {
+                projectName = find[1];
+                category = find[2];
+                $("#projectNameEdit").val(projectName);
+                $("#projectNameEdit").css("color", "#000");
+                $('#categoryEdit').val(category);
+                $('#submitEdit').prop('disabled', false);
+                $("#submitEdit").css("cursor", "point");
+            } else {
+                $("#projectNameEdit").val("查無此計畫名稱!");
+                $("#projectNameEdit").css("color", "red");
+                $('#categoryEdit').val(1);
+                $('#submitEdit').prop('disabled', true);
+                $("#submitEdit").css("cursor", "not-allowed");
+            }
+
+        });
     });
     var inputElement = document.getElementById("excel");
     inputElement.addEventListener("change", handleFiles, false);
@@ -96,6 +632,9 @@
         $('form').bind('submit', function () {
             $(this).find(':input').prop('disabled', false);
         });
+        $('formEdit').bind('submit', function () {
+            $(this).find(':input').prop('disabled', false);
+        });
     });
 
     function getCategory() {
@@ -112,6 +651,8 @@
                 for (i = 0; i < response["category"].length; i++) {
                     $('#category').append(
                         `<option value='${response["category"][i][0]}'>${response["category"][i][1]}</option>`);
+                    $('#categoryEdit').append(
+                        `<option value='${response["category"][i][0]}'>${response["category"][i][1]}</option>`);
                 }
             })
             .error(function (error) {
@@ -121,13 +662,7 @@
                 $('#page0').addClass('in active')
             });
     }
-
-    $("#reset").click(function(){
-        $("#projectId").val('')
-        $("#projectName").val('')
-        $('#category').val(1);
-        $("#excel").val('')
-    })
 </script>
+<script src="assets/vendor/bootstrap-fileupload/bootstrap-fileupload.min.js"></script>
 
 </html>

+ 1 - 1
edit.html

@@ -110,7 +110,7 @@
                 console.log(error);
             })
             .complete(function () {
-                $('#page0').addClass('in active')
+                
             });
     }