ibms-dome/Backend/Views/BuildInfo/Index.cshtml

609 lines
24 KiB
Plaintext
Raw Normal View History

2022-10-14 16:08:54 +08:00
@{
ViewData["MainNum"] = "1";
ViewData["SubNum"] = "2";
ViewData["Title"] = "區域設定";
}
<ol class="breadcrumb page-breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);">區域資料管理</a></li>
<li class="breadcrumb-item active">區域基本資料</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-xl-12">
<div id="panel-5" class="panel">
<div class="panel-container show">
<div class="panel-content">
@*<div class="subheader">
<h1 class="subheader-title">
<img src="img/asus.png" id="company-logo"><span id="company-name">華碩電腦</span>
</h1>
</div>*@
<ul class="nav nav-tabs" id="tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-build-info" role="tab"><span class="hidden-sm-down ml-1">區域基本資料</span></a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-build-floor" role="tab"><span class="hidden-sm-down ml-1">樓層設定</span></a></li>
</ul>
<div class="tab-content p-3">
<div class="tab-pane fade show active" id="tab-build-info" role="tabpanel" aria-labelledby="tab-build-info">
@Html.Partial("_BuildInfo")
</div>
<div class="tab-pane fade" id="tab-build-floor" role="tabpanel" aria-labelledby="tab-build-floor">
@Html.Partial("_BuildFloor")
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@section Scripts {
<script>
var buildInfoTable, buildFloorTable;
var selected_build_guid;
var selected_build_guid_top = "";
var selected_build_guid_top_name;
var selected_floor_guid = "";
//#region 區域基本資料 document ready
$(function () {
//#region 區域基本資料 DataTable
buildInfoTable = $("#buildInfo_table").DataTable({
"rowReorder": {
"dataSrc": "priority"
},
"columns": [
{
"data": "building_guid",
"render": function (data, type, row, meta) {
return meta.row + 1;
}
},
{
"data": "priority",
"className": "reorder",
"visible": false
},
{
"data": "full_name"
},
{
"data": "ip_address"
},
{
"data": "ip_port"
},
{
"data": "floorNum"
},
{
"data": "created_at"
},
{
"data": null,
"defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>'
}
],
//"order": [[2, "desc"]],
'createdRow': function (row, data, dataIndex) {
$(row).attr('data-guid', data.building_guid);
},
"ajax": {
"url": "/BuildInfo/BuildInfoList",
"type": "POST",
"dataSrc": function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
data = rel.data;
if (data == null || data.length == 0) {
this.data = [];
}
//樓層設定上方選單
$("#BuildList").empty();
$.each(data, function (key, value) {
$("#BuildList").append(`<button type="button" class="btn btn-outline-success waves-effect waves-themed ml-2 mb-2 btn-station" id="${value.building_guid}" onclick="clickBuilding('${value.building_guid}')">${value.full_name}</button>`);
@*if (key == 0) {
selected_build_guid_top_name = value.full_name;
$("#BuildList").append(`<button type="button" class="btn btn-success waves-effect waves-themed ml-2 mb-2 btn-station" id="${value.building_guid}" onclick="clickBuilding('${value.building_guid}')">${value.full_name}</button>`);
}
else {
$("#BuildList").append(`<button type="button" class="btn btn-outline-success waves-effect waves-themed ml-2 mb-2 btn-station" id="${value.building_guid}" onclick="clickBuilding('${value.building_guid}')">${value.full_name}</button>`);
}*@
});
return data;
}
}
});
//#endregion
buildInfoTable.on("row-reorder", function (e, diff, edit) {
var exchangeList = [];
for (var i = 0, len = diff.length; i < len; i++) {
var rowData = buildInfoTable.row(diff[i].node).data();
var obj = {
building_guid: rowData.building_guid,
priority: diff[i].newData
}
exchangeList.push(obj);
}
var url = "/BuildInfo/ChangeBuildInfoPriority";
var send_data = {
BuildInfoPriorities: exchangeList
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
buildInfoTable.ajax.reload(null, false);
}
}, "json");
});
//#region 修改區域基本資料
$('#buildInfo_table').on("click", "button.edit-btn", function () {
selected_build_guid = $(this).parents('tr').attr('data-guid');
$('#build-modal .modal-title').html("區域基本資料 - 修改");
$('#build_name_modal').val($(this).parents('tr')[0].children[1].innerText);
$('#ip_address_modal').val($(this).parents('tr')[0].children[2].innerText);
$('#ip_port_modal').val($(this).parents('tr')[0].children[3].innerText);
$('#build-modal').modal();
});
//#endregion
//#region 刪除區域基本資料
$('#buildInfo_table').on("click", "button.del-btn", function () {
selected_build_guid = $(this).parents('tr').attr('data-guid');
Swal.fire(
{
title: "刪除",
text: "你確定是否刪除此筆資料?",
type: "warning",
icon: 'warning',
showCancelButton: true,
confirmButtonText: "是",
cancelButtonText: "否"
}).then(function (result) {
if (result.value) {
var url = "/BuildInfo/DeleteOneBuild/";
var send_data = {
guid: selected_build_guid
}
$.post(url, send_data, function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else if (rel.code == "9997") {
var htnl = rel.msg + "<br>"
Swal.fire(
{
title: "刪除失敗",
icon: 'warning',
html: htnl,
});
}
else {
toast_ok(rel.msg);
buildInfoTable.ajax.reload(null, false);
}
}, 'json');
}
});
});
//#endregion
});
//#endregion
//#region 新增區域基本資料
function AddBuild() {
selected_build_guid = "0";
BuildInfoValidate.resetForm();
$("#build-modal .modal-title").html("區域基本資料 - 新增");
$("#build-form").trigger("reset");
$("#build-modal").modal();
}
//#endregion
//#region 區域表單驗證
var BuildInfoValidate = $("#build-form").validate({
rules: {
build_name_modal: {
required: true,
maxlength: 50,
filterspace: true
},
ip_address_modal: {
required: true,
maxlength: 50,
filterspace: true
},
ip_port_modal: {
required: true,
maxlength: 50,
filterspace: true
}
}
});
//#endregion
//#region 儲存區域基本資料
function SaveBuild() {
if ($("#build-form").valid()) {
$("#save-building-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true);
var url = "/BuildInfo/SaveBuildInfo";
var send_data = {
Building_guid: selected_build_guid,
Full_name: $('#build_name_modal').val(),
Ip_address: $('#ip_address_modal').val(),
Ip_port: $('#ip_port_modal').val()
}
$.post(url, send_data, function (rel) {
$("#save-building-btn").html('確定').attr("disabled", false);
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
buildInfoTable.ajax.reload(null, false);
$('#build-modal').modal('hide');
return;
}
}, 'json')
.fail(function (xhr, status, error) {
$("#save-building-btn").html('確定').attr("disabled", false);
});
}
}
//#endregion
</script>
<script>
//#region 樓層設定 document ready
$(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
if (target == "#tab-build-floor") {
$("#BuildList").find("button").first().click();
}
});
//#region 樓層設定 DataTable
buildFloorTable = $("#buildFloor_table").DataTable({
"rowReorder": {
"dataSrc": "priority"
},
"pageLength": 50,
"columns": [
{
"data": null,
"render": function (data, type, row, meta) {
return meta.row + 1;
}
},
{
"data": "priority",
"className": "reorder",
"visible": false
},
{
"data": null,
"render": function (data, type, row, meta) {
return selected_build_guid_top_name;
}
},
{
"data": "full_name"
},
{
"data": "initMapName"
},
{
"data": "created_at"
},
{
"data": null,
"defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>'
}
],
@*"order": [[1, "desc"]],*@
'createdRow': function (row, data, dataIndex) {
$(row).attr('data-guid', data.floor_guid);
},
"ajax": {
"url": "/BuildInfo/BuildFloorList",
"type": "POST",
"data": function (d) {
d.BuildGuid = selected_build_guid_top;
},
"dataSrc": function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
data = rel.data;
if (data == null || data.length == 0) {
this.data = [];
}
return data;
}
}
});
//#endregion
//#region 修改樓層排序
buildFloorTable.on("row-reorder", function (e, diff, edit) {
var exchangeList = [];
for (var i = 0, len = diff.length; i < len; i++) {
var rowData = buildFloorTable.row(diff[i].node).data();
var obj = {
floor_guid: rowData.floor_guid,
priority: diff[i].newData
}
exchangeList.push(obj);
}
var url = "/BuildInfo/ChangeFloorPriority";
var send_data = {
FloorPriorities: exchangeList
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
buildFloorTable.ajax.reload(null, false);
}
}, "json");
});
//#endregion
//#region 修改樓層設定
$('#buildFloor_table').on("click", "button.edit-btn", function () {
selected_floor_guid = $(this).parents('tr').attr('data-guid');
$('#floor-modal .modal-title').html("樓層設定 - 修改");
//取得單一樓層設定
var url = "/BuildInfo/GetOneBuildFloor";
var send_data = {
guid: selected_floor_guid
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
$("#BuildName").html(selected_build_guid_top_name);
$("#floor_name_modal").val(rel.data.full_name);
@*$("#map_file_preview_modal").attr("data-original", rel.data.mapUrl);*@
$('#floor-modal').modal();
}
}, 'json');
});
//#endregion
//#region 刪除樓層設定
$('#buildFloor_table').on("click", "button.del-btn", function () {
selected_floor_guid = $(this).parents('tr').attr('data-guid');
Swal.fire(
{
title: "刪除",
text: "你確定是否刪除此筆資料?",
type: "warning",
icon: 'warning',
showCancelButton: true,
confirmButtonText: "是",
cancelButtonText: "否"
}).then(function (result) {
if (result.value) {
//取得單一系統管理員
var url = "/BuildInfo/DeleteOneFloor/";
var send_data = {
guid: selected_floor_guid
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else if (rel.code == "9997") {
var htnl = rel.msg + "<br>" + rel.data
Swal.fire(
{
title: "刪除失敗",
icon: 'warning',
html: htnl,
});
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
floorTableReload();
return;
}
}, 'json');
}
});
});
//#endregion
});
//#endregion
//#region 樓層DataTable Reload
function floorTableReload() {
buildFloorTable.ajax.reload(null, false);
}
//#endregion
//#region 樓層設定 - 選擇區域
function clickBuilding(guid) {
selected_build_guid_top = guid;
selected_build_guid_top_name = $(`#${guid}`).text();
if ($('#BuildList').find('.btn-station').hasClass("btn-success")) {
$('#BuildList').find('.btn-station').removeClass("btn-success").addClass("btn-outline-success");
}
$(`#${guid}`).removeClass("btn-outline-success").addClass("btn-success");
floorTableReload();
}
//#endregion
//#region 新增樓層設定
function AddFloor() {
selected_floor_guid = "";
FloorValidate.resetForm();
$("#floor-modal .modal-title").html("樓層設定 - 新增");
$("#floor-form").trigger("reset");
$("#BuildName").html(selected_build_guid_top_name);
$("#floor-modal").modal();
}
//#endregion
//#region 樓層設定表單驗證
var FloorValidate = $("#floor-form").validate({
rules: {
floor_name_modal: {
required: true,
maxlength: 50,
filterspace: true
},
map_file_modal: {
accept: "image/svg+xml"
}
}
});
//驗證是否有上傳
jQuery.validator.addMethod("fileUpload", function (value, element) {
var str = value;
var result = false;
if ($("#map_file_modal")[0].files.length > 0) {
result = true;
}
else {
result = false;
}
return result;
}, "請選擇檔案");
//#endregion
//#region 儲存樓層設定
function SaveFloor() {
if ($("#floor-form").valid()) {
$("#save-floor-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true);
var url = "/BuildInfo/SaveBuildFloor";
var formData = new FormData();
maps = $('#map_file_modal')[0].files
formData.append("Floor_guid", selected_floor_guid);
formData.append("Building_guid", selected_build_guid_top);
formData.append("Full_name", $('#floor_name_modal').val());
if (maps.length > 0) {
var file_names = maps[0].name.split(".")
formData.append("MapFile", maps[0])
formData.append("InitMapName", maps[0].name.replace("." + file_names[file_names.length - 1], ""));
}
$.ajax({
type: "POST",
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (rel) {
$("#save-floor-btn").html('確定').attr("disabled", false);
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_warning(rel.msg);
}
return;
}
else {
toast_ok(rel.msg);
floorTableReload();
$('#floor-modal').modal('hide');
return;
}
},
fail: function (jqXHR, textStatus, errorThrown) {
$("#save-floor-btn").html('確定').attr("disabled", false);
}
});
}
}
//#endregion
//#region 變更樓層平面圖
function changeImage(input) {
$(`#map_file_preview_modal`).attr("data-src", window.URL.createObjectURL(input.files[0]));
}
//#endregion
</script>
}