DataBase/script/js/jstreeAJAX.js

/* 
    0:自動編號         SN項次
    1:類別             圖名
    2:X                關鍵字
    3:X                版次
    4:檔案數            X
    5:計畫編號-計畫名稱  計畫編號
    6:類別ID            計畫名稱
    7:X                 類別ID
    8:X                 工程類別
    9:X                 上一層資料夾
    10:X                檔案路徑
*/
$(document).ready(function () {
    //const types = ["工程概要", "工程計算書", "設計圖", "數量計算書", "工程預算書", "施工規範&特定條款", "設計報告書"];
    var types = [];
    var path = '';
    var category = '';
    var project_id = '';
    var project_name = '';
    var project = '';
    var blueprint_SN = '';
    var blueprint_path = '';
    var notes = [];
    var tempTable = [];
    var tempTable2 = [];
    var tree_data; //save getTree ajax data
    var start = true;
    var folderPath = "";
    var fileNums = [];
    var is_blueprint2 = false;
    PDFObject.embed("./assets/null.pdf", "#pdfFile");

    var table = $('#datatable-ajax').DataTable({

        bProcessing: true,
        responsive: true,
        "pagingType": "full_numbers",
        "bLengthChange": true,
        "lengthMenu": [
            [7, 10, 25, -1],
            [7, 10, 25, "全部"]
        ],
        "searching": false,
        "pageLength": 7,
        "language": {
            "processing": "處理中...",
            "loadingRecords": "載入中...",
            "lengthMenu": "顯示 _MENU_ 項結果",
            "zeroRecords": "沒有符合的結果或是沒有資料",
            "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
            "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
            "infoFiltered": "(從 _MAX_ 項結果中過濾)",
            "infoPostFix": "",
            "search": "搜尋:",
            "paginate": {
                "first": '<i class="fa fa-step-backward"></i>',
                "previous": '<i class="fa fa-backward"></i>',
                "next": '<i class="fa fa-forward"></i>',
                "last": '<i class="fa fa-step-forward"></i>'
            },
            "aria": {
                "sortAscending": ": 升冪排列",
                "sortDescending": ": 降冪排列"
            }
        },
        "columns": [{
                "width": "5%"
            },
            null,
            null,
            {
                "width": "5%"
            }, {
                "width": "5%"
            },

        ],
        data: [
            [
                "　", "", "", "", "",
            ],
            [
                "　", "", "", "", "",
            ],
            [
                "　", "", "", "", "",
            ],
            [
                "　", "", "", "", "",
            ],
            [
                "　", "", "", "", "",
            ],
            [
                "　", "", "", "", "",
            ],
            [
                "　", "", "", "", "",
            ]
        ],

        drawCallback: function () {
            if (!start) {
                var api = this.api();
                var rowCount = api.rows({
                    page: 'current'
                }).count();

                /*for (var i = 0; i < api.page.len() - (rowCount === 0 ? 1 : rowCount); i++) {
                    $('#datatable-ajax tbody').append($("<tr><td>&nbsp;</td><td></td><td></td><td></td></tr>"));
                }*/

            }
            start = false;
        },
    });
    $("#datatable-ajax_length").append($("#reset"))
    $.ajax({
            url: "./script/php/getTree.php",
            contentType: "application/json",
            dataType: "json",
            type: "GET",
            async: false
        })
        .success(function (response) {
            tree_data = response;

        }).error(function (error) {
            console.log(error);
        });

    displayDetail(false, true);



    $('#treeAjaxHTML').jstree({
        'core': {
            'themes': {
                variant: 'large'
            },
            'data': tree_data,
            'multiple': false,
            'animation': 40,
            'expand_selected_onload': true
        },
        'types': {
            'default': {
                'icon': 'fa fa-folder'
            },
            'file': {
                'icon': 'fa fa-file'
            }
        },
        'plugins': ['types', 'search', 'wholerow']
    }).bind("loaded.jstree", function (event, data) {
        var url_href = window.location.href;
        var url = new URL(url_href);
        var projectId = url.searchParams.get("projectId");
        if (projectId != null) {
            $(this).jstree("open_all");
        }

    }).on(
        'select_node.jstree',
        function (event, data) {

            if (data.node.text.includes("-")) {
                $("#reset").prop("disabled", false);
                $("#header").empty();
                displayDetail(false, true);
                project_id = data.node.text.split("-")[0];
                project_name = data.node.text.split("-")[1];
                project = data.node.text;
                $("#project-id").val(project_id)
                $("#header").empty();
                category = $('#treeAjaxHTML').jstree(true).get_node(data.node.parents[0]).text;
                countFiles(project_id, "false");

                var span = $('<span>' + project + ' > </span>');
                span.on("click", function (e) {
                    countFiles(project_id, "false");
                    displayDetail(false, true);
                    is_blueprint2 = false;
                    for (var k = folderPath.length - 1; k > 0; k--) {
                        $("#header").children().eq(k).remove();
                        folderPath.pop();
                    }
                    let i = 1;
                    table.clear().draw();
                    tempTable = [];


                    types.forEach(function (element) {
                        if (fileNums[i - 1] == null) {
                            total = 0;
                        } else {
                            total = fileNums[i - 1].total;
                        }
                        let temp = [
                            i,
                            element.type_name,
                            category,
                            '',
                            total,
                            project,
                            element.type_id
                        ];
                        table.row.add(temp).draw();

                        tempTable.push(temp);
                        i++;

                    });
                    $("#tableDetail td").empty();
                });
                $("#header").append(span);

                let i = 1;
                table.clear().draw();
                tempTable = [];

                types.forEach(function (element) {
                    if (fileNums[i - 1] == null) {
                        total = 0;
                    } else {
                        total = fileNums[i - 1].total;
                    }
                    let temp = [
                        i,
                        element.type_name,
                        category,
                        '',
                        total,
                        project,
                        element.type_id
                    ];
                    table.row.add(temp).draw();
                    tempTable.push(temp);
                    i++;
                });
                $("#tableDetail td").empty();

            } else {
                data.instance.toggle_node(data.node);
            }
            displayDetail(false, true);
        });

    $('#btn-search').click(function () {

        $("#reset").prop("disabled", true);
        $("#header").empty();
        $("#header").append("<span>搜尋結果</span>");
        $.ajax({
                url: "./script/php/search.php",
                data: {
                    search: $("#search").val(),
                },
                async: false,
                contentType: "application/json",
                dataType: "json",
                type: "GET",
            })
            .success(function (response) {
                displayDetail(true, true);
                table.clear().draw();
                $("#tableDetail td").empty();
                response.forEach(function (data) {
                    let temp = [
                        data["SN"],
                        data["original_name"],
                        data["keyword"],
                        '1.0.0',
                        data["project_id"],
                        data["project_name"],
                        data["type_id"],
                        data["category_name"],
                        data["notes"],
                        data["filename"],
                    ];
                    table.row.add(temp).draw();
                    i++;
                });

            })
            .error(function (error) {
                console.log(error);
            })
            .complete(function () {});

    });

    $('#search').keyup(function (e) {
        if (e.keyCode == 13) {
            $('#btn-search').click();
        }
    });

    $('#reset').click(function () {
        if (folderPath.length != 1) {
            folderPath.pop();
            let index = folderPath.length;
            $("#header").children().eq(index).remove();
            table.clear().draw();
            if (is_blueprint2) {
                tempTable2.forEach(function (data) {
                    table.row.add(data).draw();
                });
                is_blueprint2 = false;
            } else {
                tempTable.forEach(function (data) {
                    table.row.add(data).draw();
                });
            }
            $("#tableDetail td").empty();
            displayDetail(false, true);
        }

    });


    $('#datatable-ajax tbody').on('click', 'tr', function () {
        $("#reset").prop("disabled", false);
        $(this).parent().find("tr").css('background-color', '');
        $(this).css("background-color", "#cccccc");
        $("#tableDetail td").empty();
        var data = table.row(this).data();
        console.log(data)
        if (data == null) {
            data = ["", "", "null", "", "", "", "", "", "", ""];
        }
        let project_id = data[5].split("-")[0];
        let SN = data[6] != null ? data[6] : 0;
        let is_blueprint = data[1] == "設計圖" || data[1] == "成果圖" ? true : false;
        let note = notes.includes(data[1]) ? data[1] : '';

        if (data[2] == 'null') {
            $("#tableDetail td").empty();
        } else if (data[3] == '') {

            path = data[1];
            $.ajax({
                    url: "./script/php/getDetail.php",
                    data: {
                        project_id: project_id,
                        type_id: SN,
                        is_blueprint: is_blueprint,
                        note: note
                    },
                    async: false,
                    contentType: "application/json",
                    dataType: "json",
                    type: "GET",
                })
                .success(function (response) {
                    var span = $('<span>' + data[1] + ' > </span>');
                    span.on("click", function (e) {
                        let clicked = $(e.target).text().split(" > ")[0];
                        let index = folderPath.indexOf(clicked);
                        for (k = index + 1; k < folderPath.length; k++) {
                            $("#header").children().eq(k).remove();
                            folderPath.pop();
                        }
                        addTable(data, notes, response, SN, path);
                        is_blueprint2 = false;
                    });
                    $("#header").append(span);
                    folderPath = $("#header").text().split(" > ");
                    folderPath.pop();

                    addTable(data, notes, response, SN, path);

                })
                .error(function (error) {
                    console.log(error);
                })
                .complete(function () {});

        } else {

            let type = types[parseInt(data[7]) - 1];
            let path = '';
            //let category = data[8];

            path = data[8] + "/" + data[5] + "-" + data[6] + data[10];
            $("#plan_code").text(data[5]);
            $("#plan_name").text(data[6]);


            $("#version").text(data[3]);
            $("#fileName").text(data[1]);
            if (path.toLowerCase().includes("pdf")) {
                PDFObject.embed("./assets/建置資料/" + path, "#pdfFile");
                $("#download").append('<img src="./assets/images/' + 'pdf-icon.png" style="height: 30px; display: inline-block;"> ');
            } else {
                PDFObject.embed("./assets/notPDF.pdf", "#pdfFile");

                if (path.toLowerCase().includes("doc")) {
                    $("#download").append('<img src="./assets/images/' + 'word-icon.png" style="height: 30px; display: inline-block;"> ');
                } else if (path.toLowerCase().includes("xls")) {
                    $("#download").append('<img src="./assets/images/' + 'excel-icon.png" style="height: 30px; display: inline-block;"> ');
                }

            }
            console.log(data[10]);
            let fileNames = data[10].split('/');
            let fileName = fileNames[fileNames.length - 1];
            $("#download").append('<a target="_blank" href="./assets/建置資料/' + path + '">' + fileName + '</a>');

        }

    });

    function displayDetail(isFile, isBlueprint) {

        table.column(0).visible(isBlueprint);
        table.column(2).visible(isFile);
        table.column(3).visible(isFile);
        table.column(4).visible(!isFile);
        if (isFile) {
            $(".table-responsive").show();
            $("#SN").text("圖號");
            $("#name").text("圖名");
            $('.nav-tabs a[href="#pdfTab"]').tab('show');
            test = table;
            if (table.rows().count() > 10) {
                table.page.len(10).draw();
            } else {
                table.page.len(-1).draw();
            }
        } else {
            $(".table-responsive").hide();
            $("#SN").text("項次");
            $("#name").text("類別");
            if (isBlueprint) {
                table.page.len(-1).draw();
            } else {
                table.page.len(7).draw();
            }
            $('.nav-tabs a[href="#arcgisTab"]').tab('show');
        }

    }

    function countFiles(project_id, is_blueprint) {
        $.ajax({
                url: "./script/php/get_file_count.php",
                data: {
                    project_id: project_id,
                    is_blueprint: is_blueprint,
                },
                async: false,
                //contentType: "application/json",
                dataType: "json",
                type: "POST",
            })
            .success(function (response) {
                console.log(response);
                fileNums = response;
                types = [];
                response.forEach(function (element) {
                    types.push({
                        type_id: element.type_id,
                        type_name: element.type_name
                    })
                });
            })
            .error(function (error) {
                console.log(error);
            })
            .complete(function () {});
    }

    function addTable(data, notes, response, SN, path) {

        table.clear().draw();
        if (data[1] != "設計圖" && data[1] != "成果圖") {


            for (i = 0; i < response.length; i++) {
                table.row.add([
                    response[i]["SN"],
                    response[i]["original_name"],
                    response[i]["keyword"],
                    '1.0.0',
                    '',
                    response[i]["project_id"],
                    response[i]["project_name"],
                    response[i]["type_id"],
                    response[i]["category_name"],
                    response[i]["notes"],
                    response[i]["filename"],
                ])
                table.draw();
            }
            if (notes.includes(data[1])) {
                is_blueprint2 = true;
                displayDetail(true, true);
            } else {
                displayDetail(true, false);
            }

        } else {
            displayDetail(false, true);
            blueprint_SN = SN;
            blueprint_path = path;
            tempTable2 = [];
            countFiles(project_id, "true");
            for (i = 0; i < response.length; i++) {
                notes[i] = response[i]['notes'];
                if (fileNums[i] == null) {
                    total = 0;
                } else {
                    total = fileNums[i].total;
                }
                let temp = [
                    i + 1,
                    response[i]['notes'],
                    '',
                    '',
                    total,
                    data[5],


                ];
                table.row.add(temp);
                tempTable2.push(temp);

            }
            table.draw();
        }
    }

    var search_output = {};
    var search_word = ""
    $("#advanced-search-button").on("click", function (e) {
        show_progress_bar(true);
        update_progress_bar();
        
        $.ajax({
            url: "./script/php/get_search_list.php",
            data: {
                project_id: [''].concat(search_data["project"]),
                type_id: [''].concat(search_data["type"]),
                notes_name: [''].concat(search_data["notes"].filter(element => {return element !== undefined;})),
                search: $("#search-word").val(),
            },
            type: "GET",
            dataType: "json",
            contentType: "application/json",
            async: false
        }).success(function (response) {
            displayDetail(true);
            search_output = response;
            search_word = $("#search-word").val();
            filter_base_data = search_data;
        }).error(function(error) {
            console.log(error);
        });
        
        setTimeout(() => {
            draw_datatable(search_output);
            e.preventDefault();
            $.magnificPopup.close();

            if($("#search-filter").css("display") != "none") {
                $("#search-filter").slideUp(200);
                $("#filter-slide").toggleClass("fa-sort-desc fa-sort-up");
            }
            $("#search-filter-panel-body .btn-default").toggleClass("btn-primary btn-default");
            show_filter(filter_base_data);
            show_progress_bar(false);
        }, 0);
    });

    function draw_datatable(search_output) {
        table.clear().draw();

        for (i = 0; i < search_output.length; i++) {
            table.row.add([
                search_output[i]["SN"],
                search_output[i]["original_name"],
                search_output[i]["keyword"],
                '1.0.0',
                '',
                search_output[i]["project_id"],
                search_output[i]["project_name"],
                search_output[i]["type_id"],
                search_output[i]["category_name"],
                search_output[i]["notes"],
                search_output[i]["filename"],
            ])
            table.draw();

            // progress_bar_value = (i/search_output.length)*100
            // update_progress_bar();
        }
    }

    function reset_filter_search_output(){
        output_data = [];
        click_option = get_filter_click("btn-primary");

        $.ajax({
            url: "./script/php/get_search_list.php",
            data: {
                project_id: [''].concat(click_option["project"]),
                type_id: [''].concat(click_option["type"]),
                notes_name: [''].concat(click_option["notes"]),
                search: search_word
            },
            type: "GET",
            dataType: "json",
            contentType: "application/json",
            async: false
        }).success(function (response) {
            displayDetail(true);
            search_output = response;
        }).error(function(error) {
            console.log(error);
        });

        draw_datatable(search_output);
    }

    function get_filter_click(click_class){
        click_id_list = {
            "category": [],
            "project": [],
            "type": [],
            "notes": []
        };
        check_notes = false;
        $("#f-category ."+click_class).each(function() {
            if($(this).css("display") == "inline-block") {
                click_id_list["category"].push($(this).attr("id").replace("f-c", ""));
            }
        });
        $("#f-project ."+click_class).each(function() {
            if($(this).css("display") == "inline-block") {
                click_id_list["project"].push($(this).attr("id").replace("f-p", ""));
            }
        });
        $("#f-type ."+click_class).each(function() {
            if($(this).css("display") == "inline-block") {
                click_id_list["type"].push($(this).attr("id").replace("f-t", ""));
                if($(this).attr("id").replace("f-t", "") == "3"){
                    check_notes = true;
                }
            }
        });
        if(check_notes) {
            $("#f-notes ."+click_class).each(function() {
                if($(this).css("display") == "inline-block") {
                    click_id_list["notes"].push($(this).text());
                }
            });
        }
        
        return click_id_list;
    }

    function show_filter(filter_base_data) {
        show_notes = false;
        $("#search-filter button").css("display", "none");
        filter_base_data["category"].forEach(element => {
            id = "f-c" + element;
            $("#" + id).css("display", "inline-block");
        });
        filter_base_data["project"].forEach(element => {
            id = "f-p" + element;
            $("#" + id).css("display", "inline-block");
        });
        filter_base_data["type"].forEach(element => {
            id = "f-t" + element;
            $("#" + id).css("display", "inline-block");
            if(element == "3"){
                show_notes = true;
            }
        });
        if(show_notes) {
            $("#filter_notes").css("display", "block");
            filter_base_data["notes"].forEach(element => {
                $("#f-notes button").each(function() {
                    if($(this).text() == element) {
                        $(this).css("display", "inline-block");
                    }
                });
            });
        } else {
            $("#filter_notes").css("display", "none");
        }
    }

    var progress_bar_value = 0;
    function update_progress_bar() {
        var i=0;
        if (i == 0) {
          i = 1;
          var id = setInterval(frame, 10);
          function frame() {
            if (progress_bar_value >= 100) {
              clearInterval(id);
              i = 0;
            } else {
              $("#progress-bars").css("width", progress_bar_value+"%");
            }
          }
        }
      }

    function show_progress_bar(show) {
        if(show) {
            $("#advanced-search-button-group").css("display", "none");
            $("#loading").css("display", "block");
            // $("#progress-bars").parent().css("display", "block");
        } else {
            $("#advanced-search-button-group").css("display", "block");
            $("#loading").css("display", "none");
            // $("#progress-bars").parent().css("display", "none");
        }
    }

    $("#filter-slide").on("click", function (e) {
        if($("#search-filter").css("display") == "block"){
            $("#search-filter").slideUp(200);
        } else {
            $("#search-filter").slideDown(200);
        }
        $("#filter-slide").toggleClass("fa-sort-desc fa-sort-up")
    });

    $("#search-filter-panel-body button").on("click", function (e) {
        $(this).toggleClass("btn-primary btn-default");

        click_option = get_filter_click("btn-primary");
        if(click_option["category"].length>0 && click_option["project"].length>0 && click_option["type"].length>0) {
            reset_filter_search_output();
        } else {
            table.clear().draw();
        }
    });

    $("#f-category button").on("click", function() {
        c_id = $(this).attr("id").replace("f-c", "");

        sub_project_list = [];
        db_table["project"].forEach(element => {
            if(element["category_id"] == c_id) {
                sub_project_list.push(element["project_id"]);
            }
        });
        sub_project_list.forEach(element => {
            if($(this).hasClass("btn-primary")) {
                if($("#f-p" + element).hasClass("btn-default")){
                    $("#f-p" + element).toggleClass("btn-primary btn-default");
                }
            } else {
                if($("#f-p" + element).hasClass("btn-primary")){
                    $("#f-p" + element).toggleClass("btn-primary btn-default");
                }
            }

            click_option = get_filter_click("btn-primary");
            if(click_option["category"].length == 0) {
                table.clear().draw();
            }
        });

        reset_filter_search_output();
    });

    $("#f-type button").on("click", function() {
        t_id = $(this).attr("id").replace("f-t", "");
        if(t_id == "3") {
            if($(this).hasClass("btn-default")) {
                $("#filter_notes").css("display", "none");
                $("#f-notes .btn-default").toggleClass("btn-primary btn-default");
            } else {
                $("#filter_notes").css("display", "block");
            }
        }
    });
});