steve07s
/
DataBase


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<?php
if(!isset($_FILES['excel']['error'])){
    header("Location: /DataBase/upload.html");
}
if (0 < $_FILES['excel']['error']) {
    echo 'Error: ' . $_FILES['excel']['error'] . '<br>';
} else {
    $filepath = 'uploads/' . $_FILES['excel']['name'];
    move_uploaded_file($_FILES['excel']['tmp_name'], $filepath);    
    $project_id = $_POST['projectId'];
    $project_name = $_POST['projectName'];
    $category_id = $_POST['category'];
    $file = $_FILES['excel']['name'];
} ?>

<!DOCTYPE html>
<html>

<head>
    <title>設計群匯入工具</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/Database/assets/images/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/DataBase/assets/vendor/jquery/jquery.js"></script>
    <script src="/DataBase/script/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/DataBase/assets/vendor/font-awesome/css/font-awesome.css" />
    <style>
        .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: left;
            background-color: #004B7C;
            color: white;
        }

        .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;
        }
    </style>
</head>

<body>
    <ul id="tabs" class="nav nav-tabs">
    </ul>
    <div id="tab-content" class="tab-content">

    </div>
    

    <script type="text/javascript">
        // TODO: 1.頁籤依據選擇變色 2.偵測null欄位資料
        $(document).ready(function() {
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            var file = '<?= $file ?>';
            var categoryId = '<?= $category_id ?>';
            var projectId = '<?= $project_id ?>';
            var projectName = '<?= $project_name ?>';
            getExcel(file, projectId,projectName,categoryId);

        });

        function getExcel(file, projectId,projectName,categoryId) {

            $.ajax({
                    url: "./getExcel.php",
                    data: {
                        file: file,
                        projectId: projectId,
                        categoryId: categoryId,
                    },
                    async: false,
                    contentType: "application/json",
                    dataType: "json",
                    type: "GET",
                })
                .success(function(response) {
                    var table = response.table;
                    var info = response.info;
                    let i = 0;
                    for (var tab in table) {
                        if (i == 0) {
                            active = 'class="active"';
                        } else {
                            active = '';
                        }
                        $('#tabs').append(`<li ${active}><a data-toggle="tab" href="#page${i}">${tab}</a></li>`);
                        $("#tab-content").append(`<div id="page${i}" class="tab-pane fade"></div>`);

                        appendTable(table[tab], `#page${i}`);
                        i++;
                    }
                    $(`#page${0}`).append("<form id='form' method='post' action='./insertExcel.php'></form>");
                    appendTable(info, "#form");
                    // TODO: add confirm message
                    $("#form").append(`<div class='center'><input class='submit' type='submit' value='開始匯入'><button type='button' class='submit' onClick=\"location.href='/DataBase/upload.html'\" >重新選擇檔案</button></div>`);
                    $("#form").append(`<input id='projectId' name='projectId' type='hidden' value='${projectId}'><input id='projectName' name='projectName' type='hidden' value='${projectName}'><input id='file' name='file' type='hidden' value='${file}'><input id='categoryId' name='categoryId' style='display:none;' value='${categoryId}'>`);
                })
                .error(function(error) {
                    console.log(error);
                })
                .complete(function() {
                    $('#page0').addClass('in active')
                });
        }

        function appendTable(data, id) {
            let i = 0;
            table = "<table class='excel'>";
            for (var tab in data) {
                table += "<tr>";

                for (j = 0; j < data[tab].length; j++) {
                    if (i == 0)
                        table += `<th style="width:33%;">${data[tab][j]}</th>`
                    else
                        table += `<td>${data[tab][j]}</td>`
                }
                i++;
                table += "</tr>";
            }


            table += "</table>";

            $(id).append(table);
        }
    </script>
</body>

</html>