@{ ViewData["MainNum"] = "3"; ViewData["SubNum"] = "4"; ViewData["Title"] = "AED裝置設定"; } <ol class="breadcrumb page-breadcrumb"> <li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></li> <li class="breadcrumb-item active">AED裝置設定</li> <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li> </ol> <div class="row"> <div class="col-12"> <div id="panel-5" class="panel"> <div class="panel-container show"> <div class="panel-content"> <div class="subheader"> <h1 class="subheader-title"> <span>AED裝置設定</span> </h1> </div> <div class="row mb-3 d-flex align-items-center px-3 justify-content-between"> <div class="pr-3 "> <div class="btn-group btn-group-md" id="Buildinglist"> @*<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2 mr-2">123</button>*@ </div> </div> </div> <div class="row mb-3 d-flex align-items-center px-3 justify-content-between"> <div class="pr-3 "> <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="AllFloor()">全選</button> </div> <div class="pr-3 row col"> <div class="frame-wrap" id="floorlist"> </div> </div> </div> <div class="row mb-3 d-flex align-items-center px-3"> <div class="card border mb-g w-100 mb-5" id="menucard"> <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-between"> <div class="card-title font-weight-bold">AED裝置設定</div> <div class="text-right "> <button type="button" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" id="import-file-btn" onclick="$('#import_file_input').click()"><span class="fal fa-plus mr-1"></span>匯入Excel</button> <input id="import_file_input" type="file" name="import_file_input" onchange="importRawDataFile()" style="display:none" multiple accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /> <button type="button" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" onclick="ExportExcel()"><span class="fal fa-file-excel mr-1"></span> 匯出Excel</button> </div> </div> <div class="card-body"> <div class="w-100"> <div class="col-12"> <table id="RescueDeviceTable" class="table table-bordered table-hover m-0 text-center"> <thead class="thead-themed"> <tr> <th>樓層</th> <th>設備編號</th> <th>位置</th> <th>功能</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="FireExtinguisher-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-dialog-centered " role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"> </h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times"></i></span> </button> </div> <div class="modal-body"> <form id="FireExtinguisher-form"> <div class="row"> <div class="form-group col-12"> <label class="form-label" for="FireExtinguisher_location_modal"><span class="text-danger">*</span>位置</label> <input class="form-control" id="FireExtinguisher_location_modal" /> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" onclick="SaveFireExtinguisher()">儲存</button> </div> </div> </div> </div> @section Scripts { <script> var SelectBuild; var SelectFloorList = new Array(0); var AllFloorList = new Array(0); var FireExtinguisherTable; var selectAllFloor = false; var SelectDevice; $(function () { FireExtinguisherTable = $("#RescueDeviceTable").DataTable({ "columns": [ { "data": "floor_name" }, { "data": "rescue_device_id" }, { "data": "location" }, { "data": null, "defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>' } ], 'createdRow': function (row, data, dataIndex) { $(row).attr('guid', data.rescue_device_guid); }, "ajax": { "url": "/RescueDevice/RescueDeviceTable", "type": "POST", "data": function (d) { d.build = SelectBuild, d.floors = SelectFloorList, d.kind = 1 }, "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data.data; if (data == null || data.length == 0) { this.data = []; } return data; } } }); GetBuild(); }); function GetBuild() { var url = "/BuildMenu/BuildInfoList"; var send_data = {}; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { $('#Buildinglist').empty(); var buildstr = ""; $.each(rel.data, function (index, val) { if (index == 0) { SelectBuild = val.value; buildstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\' ,this)">' + val.name + '</button>'; } else { buildstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\',this)" >' + val.name + '</button>'; } }); $('#Buildinglist').append(buildstr); $('#Buildinglist').find('.btn-success').trigger('click'); return; } }, 'json'); } function SelectBulid(build, e) { SelectBuild = build; if ($("#Buildinglist").find('.btn').hasClass("btn-success")) { $("#Buildinglist").find('.btn').removeClass("btn-success").addClass("btn-secondary"); } $(e).removeClass("btn-secondary").addClass("btn-success"); //$('#menucard').find('.card-title').html(e.innerText + "-選單"); GetFloorByBuild(SelectBuild); } function GetFloorByBuild(build) { var url = "/RescueDevice/GetFloorByBuild"; var send_data = { Building: build }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { $('#floorlist').empty(); SelectFloorList = []; AllFloorList = []; var floorstr = ""; $.each(rel.data, function (index, val) { AllFloorList.push(val.value); floorstr += '<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2 mr-2" onclick="SelectFloor(\'' + val.value + '\',this)" >' + val.name + '</button>'; }); $('#floorlist').append(floorstr); AllFloor(); //$('#floorlist').find('.btn-success').trigger('click'); return; } }, 'json'); } function SelectFloor(floorguid, e) { if ($(e).hasClass("btn-outline-success")) { $(e).removeClass("btn-outline-success").addClass("btn-success"); SelectFloorList.push(floorguid); } else if ($(e).hasClass("btn-success")) { $(e).removeClass("btn-success").addClass("btn-outline-success"); var a = SelectFloorList.filter(function (n, i) { if (n === floorguid) { SelectFloorList.splice(i, 1); } }); } FireExtinguisherTable.ajax.reload(); } function AllFloor() { if (selectAllFloor) { SelectFloorList = []; $('#floorlist').find('.btn').removeClass('btn-success').addClass("btn-outline-success"); selectAllFloor = false; } else { SelectFloorList = AllFloorList; $('#floorlist').find('.btn').removeClass('btn-outline-success').addClass("btn-success"); selectAllFloor = true; } FireExtinguisherTable.ajax.reload(); } function importRawDataFile() { import_files = $('#import_file_input')[0].files[0]; Swal.fire( { title: "設備檔案匯入", text: "匯入檔案會將舊有資料完全移除,你確定是否要匯入?", type: "warning", icon: 'warning', showCancelButton: true, confirmButtonText: "是", cancelButtonText: "否" }).then(function (result) { if (result.value) { var url = "/RescueDevice/ImportRescueDevice"; var formData = new FormData(); formData.append("import_file", import_files); formData.append("kind", 1); formData.append("building", SelectBuild); $("#import-file-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true); $.ajax({ type: "POST", url: url, data: formData, cache: false, contentType: false, processData: false, success: function (rel) { $("#import_file_input").val(''); if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); FireExtinguisherTable.ajax.reload(null, false); } $("#import-file-btn").html('<span class="fal fa-plus mr-1"></span>匯入Excel').attr("disabled", false); return; } else { toast_ok(rel.msg); $("#import-file-btn").html('<span class="fal fa-plus mr-1"></span>匯入Excel').attr("disabled", false); FireExtinguisherTable.ajax.reload(null, false); return; } }, }); } }); } $('#RescueDeviceTable').on("click", "button.del-btn", function () { var send_data = { guid: $(this).parents('tr').attr('guid'), }; Swal.fire( { title: "刪除設備", text: "是否刪除該AED?", type: "warning", icon: 'warning', showCancelButton: true, confirmButtonText: "是", cancelButtonText: "否" }).then(function (result) { if (result.value) { var url = "/RescueDevice/DeletedIt"; $.post(url, send_data, function (rel) { if (rel.code != "0000") { toast_error(rel.msg); return; } else { toast_ok(rel.msg); FireExtinguisherTable.ajax.reload(null, false); return; } }); } }) }) $('#RescueDeviceTable').on("click", "button.edit-btn", function () { SelectDevice = $(this).parents('tr').attr('guid'); var send_data = { guid: SelectDevice, }; var url = "/RescueDevice/GetLocation"; $.post(url, send_data, function (rel) { if (rel.code != "0000") { toast_error(rel.msg); return; } else { $('#FireExtinguisher-modal').find('.modal-title').html(rel.data.rescue_device_id + "-" + rel.data.floor_name); $('#FireExtinguisher_location_modal').val(rel.data.location); //toast_ok(rel.msg); FireExtinguisherTable.ajax.reload(null, false); return; } }); $('#FireExtinguisher-modal').modal(); }) function SaveFireExtinguisher() { var send_data = { guid: SelectDevice, location: $('#FireExtinguisher_location_modal').val() }; var url = "/RescueDevice/SaveFireExtinguisher"; $.post(url, send_data, function (rel) { if (rel.code != "0000") { toast_error(rel.msg); return; } else { $('#FireExtinguisher-modal').modal('hide'); toast_ok(rel.msg); FireExtinguisherTable.ajax.reload(); return; } }); } function ExportExcel() { var send_data = { build: SelectBuild, buildname: $('#Buildinglist').find('.btn-success').html(), kind: 1 }; var url = "/RescueDevice/ExportExcel"; window.location = "/RescueDevice/ExportExcel?post=" + JSON.stringify(send_data); return; } </script> }