Index: arms/js/analysisCost.js =================================================================== diff -u -rf99437953d6bb12d24e7a99bfdbdad5d2b5bbdc1 -r88049a15d4c6361a24dd120b0fd9b55b19f0ce81 --- arms/js/analysisCost.js (.../analysisCost.js) (revision f99437953d6bb12d24e7a99bfdbdad5d2b5bbdc1) +++ arms/js/analysisCost.js (.../analysisCost.js) (revision 88049a15d4c6361a24dd120b0fd9b55b19f0ce81) @@ -1481,130 +1481,190 @@ window.addEventListener('resize', myChart.resize); } -///////////////////////////////////////////////////// +///////////////////////////////////////////////// // 엑셀 그리기 -///////////////////////////////////////////////////// -function drawExcel(targetId, data) { - console.log("analysisCost :: drawExcel"); - console.log(data); - let $targetId = "#" + targetId; - - if($($targetId)[0].jexcel) { - console.log($($targetId)[0].jexcel); - $($targetId)[0].jexcel.destroy(); - } - - var excelWidth=$($targetId).width() - 50; +///////////////////////////////////////////////// +function drawExcel(target, data) { var columnList = [ { type: "text", title: "이름", wRatio: 0.25, readOnly: true }, { type: "text", title: "키", wRatio: 0.25, readOnly: true }, { type: "text", title: "연봉", wRatio: 0.5 } ]; - - SpreadSheetFunctions.setColumns(columnList); - SpreadSheetFunctions.setColumnWidth(excelWidth); - - var customOptions = { - pagination:10, - contextMenu: [], - updateTable: function(instace, cell, col, row, val, id) { + var customOption = { + search: true, + allowInsertRow: false, + allowInsertColumn: false, + updateTable: function(instance, cell, col, row, val, id) { + cell.style.textAlign = "left"; cell.style.whiteSpace = "normal"; - if(col === 2) { - cell.style.textAlign = "right"; - cell.style.color = "#a4c6ff"; - } else { - cell.style.textAlign = "left"; - } - }, - onchange: function(instance, cell, x, y, value) { - var cellName = jspreadsheet.getColumnNameFromId([x,y]); - console.log('onchange :: ' + cell + " :; x :: " + x + " :: y :: " + y +" :: cellName ::" + cellName + ' to: ' + value + '\n'); - if (x == 2) { - var key = instance.jexcel.getValueFromCoords(1, y); - if (!modifiedRows[key]) { - modifiedRows[key] = {}; - } - modifiedRows[key].이름 = instance.jexcel.getValueFromCoords(0, y); - modifiedRows[key].키 = instance.jexcel.getValueFromCoords(1, y); - modifiedRows[key].연봉 = value; - } } }; - SpreadSheetFunctions.setExcelData(data); - SpreadSheetFunctions.setOptions(customOptions); + SpreadsheetFunctions.setTargetId(target); + SpreadsheetFunctions.setDefaultTargetRect(); - $($targetId).spreadsheet($.extend({}, { - columns: SpreadSheetFunctions.getColumns(), - data: SpreadSheetFunctions.getExcelData() - }, SpreadSheetFunctions.getOptions())); - + SpreadsheetFunctions.setColumns(columnList); + SpreadsheetFunctions.setColumnWidth(SpreadsheetFunctions.getTargetRect("width")); + SpreadsheetFunctions.setOptions(customOption); + SpreadsheetFunctions.startObserver(); + SpreadsheetFunctions.setExcelData(data); + SpreadsheetFunctions.drawExcel(SpreadsheetFunctions.getTargetId()); } -var SpreadSheetFunctions = ( function () { - let $tabFunction_data; // 엑셀 데이터 - let $tabFunction_columns;// 엑셀 컬럼 - let $tabFunction_options;// 엑셀 (커스텀)옵션 :: 정의 안할 경우 default - let $sheetInstance; - var setESheet = function(obj) { - $sheetInstance = obj; +var SpreadsheetFunctions = (function () { + let targetId = { "v" : "", "jq" : ""}; + let targetRect = {"width" : 0, "height" : 0}; + let excelData; // 엑셀 데이터 + let excelColumns; // 엑셀 컬럼 + let customOptions;// 엑셀 커스텀 옵션들 :: 정의 안할 경우 default + + + var setDefaultTargetRect = function () { + let defaultWidth = $(getTargetId("jq")).width(); + let defaultHeight = $(getTargetId("jq")).height(); + setTargetRect(defaultWidth, defaultHeight); }; + var setTargetRect = function(width, height) { + targetRect.width = width; + targetRect.height = height; + }; + + var getTargetRect = function (type) { + if (type === "width") { + return targetRect.width; + } else if (type === "height") { + return targetRect.height; + } else { + return targetRect; + } + }; + + var setTargetId = function (target) { + targetId.v = target; + targetId.jq = "#"+target; + }; + + var getTargetId = function (type) { + if (type === "jq") { + return targetId.jq; + } else { + return targetId.v; + } + }; + var setExcelData = function(data) { - $tabFunction_data = data; + excelData = data; }; var getExcelData = function () { - return $tabFunction_data; + return excelData; }; var setColumns = function(columns) { - console.log("setColumns"); - $tabFunction_columns = columns; + excelColumns = columns; }; var getColumns = function () { - return $tabFunction_columns; + return excelColumns; }; + + var setColumnWidth = function (width) { + if (excelColumns) { + excelColumns = excelColumns.map(column => ({ + ...column, width: (width * column.wRatio) -1 + })); + } + }; + + function setColumnWidthAsync(width) { + return new Promise((resolve) => { + if (excelColumns) { + excelColumns = excelColumns.map(column => ({ + ...column, width: (width * column.wRatio) - 1 + })); + } + resolve(); // 컬럼 너비 설정이 완료된 후 resolve 호출 + }); + } + var setOptions = function(options) { - $tabFunction_options = options; + customOptions = options; }; var getOptions = function() { - return $tabFunction_options ? $tabFunction_options : null; + return customOptions ? customOptions : null; }; - var setColumnWidth = function (width) { - $tabFunction_columns = $tabFunction_columns.map(column => ({ - ...column, width: width * column.wRatio - })); - }; var resizeObserver = new ResizeObserver(function(entries) { for (let entry of entries) { - var width = entry.contentRect.width; - var height = entry.contentRect.height; - handleResize(entry.target.id, width, height); + setTargetRect(entry.contentRect.width, entry.contentRect.height); + handleResize(entry.target.id, getTargetRect("width"), getTargetRect("height")); } }); - // 모달요소 크기 변화 관찰 - resizeObserver.observe(document.getElementById('spreadsheet')); + // 모달요소 크기 변화 관찰(Observer) + function startObserver() { + resizeObserver.observe($(getTargetId("jq"))[0]); + } - function handleResize(id,width, height) { - if (id ==="spreadsheet" && height !== 0) { - if (Object.keys(인력별_연봉정보).length > 0) { - drawExcel("spreadsheet", 인력별_연봉정보); + function handleResize(id, width, height) { + if (id === getTargetId() && height !== 0) { + if (excelData) { + drawResizedExcel(getTargetId()); } else { - console.log("인력별_연봉정보 데이터가 없습니다."); + console.log("Spreadsheet.handleResize :: 엑셀 데이터 없음"); } + + } else { + console.log("Spreadsheet.handleResize :: id 불일치 또는 height 가 0 입니다."); } } + function drawResizedExcel(target) { + let $targetId = "#"+target; + + if($($targetId).length > 0 && $($targetId)[0].jexcel) { + $($targetId)[0].jexcel.destroy(); + } + + setColumnWidthAsync(getTargetRect("width") - 50).then(() => { + $($targetId).spreadsheet($.extend({}, { + columns: getColumns(), + data: getExcelData() + }, getOptions())); + + let jexcel_content_height = getTargetRect("height") - 40 - 30 - 35 - 34; + $($targetId + " .jexcel_content").css("max-height", jexcel_content_height); + $($targetId + " .jexcel_content").css("width", "100%"); + }); + } + + function drawExcel(target) { + let $targetId = "#"+target; + + if($($targetId).length > 0 && $($targetId)[0].jexcel) { + $($targetId)[0].jexcel.destroy(); + } + + $($targetId).spreadsheet($.extend({}, { + columns: getColumns(), + data: getExcelData() + }, getOptions())); + + let jexcel_content_height = getTargetRect("height") - 40 - 30 - 35 - 34; + $($targetId + " .jexcel_content").css("max-height", jexcel_content_height); + $($targetId + " .jexcel_content").css("width", "100%"); + + } + return { - setExcelData, getExcelData, - setColumns, getColumns, - setOptions, getOptions, - setColumnWidth + setTargetId, getTargetId, + setTargetRect, getTargetRect, setDefaultTargetRect, + setExcelData, getExcelData, + setColumns, getColumns, setColumnWidth, + setOptions, getOptions, + + startObserver, drawExcel }; })(); - $(document).ready(function() { $("#cost-excel-batch-update").on('click', function() { Index: backoffice/js/scheduleConfig.js =================================================================== diff -u -rdbf19cc7591664231e531456f7fbb9f756ddbcd3 -r88049a15d4c6361a24dd120b0fd9b55b19f0ce81 --- backoffice/js/scheduleConfig.js (.../scheduleConfig.js) (revision dbf19cc7591664231e531456f7fbb9f756ddbcd3) +++ backoffice/js/scheduleConfig.js (.../scheduleConfig.js) (revision 88049a15d4c6361a24dd120b0fd9b55b19f0ce81) @@ -302,103 +302,194 @@ ///////////////////////////////////////////////// // 엑셀 그리기 ///////////////////////////////////////////////// -function drawExcel(targetId) { - console.log("generalConfig :: drawExcel"); - let $targetId = "#"+targetId; - - if($($targetId)[0].jexcel) { - $($targetId)[0].jexcel.destroy(); - } - - var excel_width = $($targetId).width() - 50; - +function drawExcel(target) { // 컬럼 설정 var columnList = [ { type: "text", title: "Start Time", wRatio: 0.3}, { type: "text", title: "End Time", wRatio: 0.3}, { type: "text", title: "Duration", wRatio: 0.2}, { type: "text", title: "Status", wRatio: 0.2} ]; - - SpreadSheetFunctions.setColumns(columnList); - SpreadSheetFunctions.setColumnWidth(excel_width); - + // 옵션 설정 var customOption = { search: true, + allowInsertRow: false, + allowInsertColumn: false, updateTable: function(instance, cell, col, row, val, id) { cell.style.textAlign = "left"; cell.style.whiteSpace = "normal"; } }; - SpreadSheetFunctions.setOptions(customOption); - let data; - $.getJSON('./mock/scheduleConfig_excel.json', function(jsonData) { - data = jsonData.map(arr => arr.slice(0,-1)); + SpreadsheetFunctions.setTargetId(target); + SpreadsheetFunctions.setDefaultTargetRect(); - $($targetId).spreadsheet($.extend({}, { - columns: SpreadSheetFunctions.getColumns(), - data: data - }, SpreadSheetFunctions.getOptions())); - SpreadSheetFunctions.setExcelData(data); - $("#modal_excel .jexcel_content").css("width","100%"); - $("#modal_excel .jexcel_content").css("max-height","420px"); - }).fail(function(jqxhr, textStatus, error) { - console.error("Error loading JSON file: " + textStatus + ", " + error); - }); + SpreadsheetFunctions.setColumns(columnList); + SpreadsheetFunctions.setColumnWidth(SpreadsheetFunctions.getTargetRect("width")); + SpreadsheetFunctions.setOptions(customOption); + SpreadsheetFunctions.startObserver(); + $.getJSON('./mock/scheduleConfig_excel.json') + .done(function(jsonData) { + let fetchedExcelData = jsonData.map(arr => arr.slice(0, -1)); // map() 은 동기함수 + SpreadsheetFunctions.setExcelData(fetchedExcelData); + SpreadsheetFunctions.drawExcel(SpreadsheetFunctions.getTargetId()); + }) + .fail(function(jqxhr, textStatus, error) { + console.error("Error loading JSON file: " + textStatus + ", " + error); + }); } -var SpreadSheetFunctions = (function () { +var SpreadsheetFunctions = (function () { + let targetId = { "v" : "", "jq" : ""}; + let targetRect = {"width" : 0, "height" : 0}; + let excelData; // 엑셀 데이터 + let excelColumns; // 엑셀 컬럼 + let customOptions;// 엑셀 커스텀 옵션들 :: 정의 안할 경우 default - let $tabFunction_data; // 엑셀 데이터 - let $tabFunction_columns;// 엑셀 컬럼 - let $tabFunction_options;// 엑셀 (커스텀)옵션 :: 정의 안할 경우 default + var setDefaultTargetRect = function () { + let defaultWidth = $(getTargetId("jq")).width(); + let defaultHeight = $(getTargetId("jq")).height(); + setTargetRect(defaultWidth, defaultHeight); + }; + var setTargetRect = function(width, height) { + targetRect.width = width; + targetRect.height = height; + }; + + var getTargetRect = function (type) { + if (type === "width") { + return targetRect.width; + } else if (type === "height") { + return targetRect.height; + } else { + return targetRect; + } + }; + + var setTargetId = function (target) { + targetId.v = target; + targetId.jq = "#"+target; + }; + + var getTargetId = function (type) { + if (type === "jq") { + return targetId.jq; + } else { + return targetId.v; + } + }; + var setExcelData = function(data) { - $tabFunction_data = data; + excelData = data; }; var getExcelData = function () { - return $tabFunction_data; + return excelData; }; var setColumns = function(columns) { - console.log("setColumns start"); - $tabFunction_columns = columns; - console.log("setColumns fin"); + excelColumns = columns; }; var getColumns = function () { - return $tabFunction_columns; + return excelColumns; }; + + var setColumnWidth = function (width) { + if (excelColumns) { + excelColumns = excelColumns.map(column => ({ + ...column, width: (width * column.wRatio) -1 + })); + } + }; + + function setColumnWidthAsync(width) { + return new Promise((resolve) => { + if (excelColumns) { + excelColumns = excelColumns.map(column => ({ + ...column, width: (width * column.wRatio) - 1 + })); + } + resolve(); // 컬럼 너비 설정이 완료된 후 resolve 호출 + }); + } + var setOptions = function(options) { - $tabFunction_options = options; + customOptions = options; }; var getOptions = function() { - return $tabFunction_options ? $tabFunction_options : null; + return customOptions ? customOptions : null; }; - var setColumnWidth = function (width) { - console.log("setColumnWidth start"); - if ($tabFunction_columns) { - $tabFunction_columns = $tabFunction_columns.map(column => ({ - ...column, width: width * column.wRatio - })); + + + var resizeObserver = new ResizeObserver(function(entries) { + for (let entry of entries) { + setTargetRect(entry.contentRect.width, entry.contentRect.height); + handleResize(entry.target.id, getTargetRect("width"), getTargetRect("height")); } - console.log("setColumnWidth end"); - }; + }); - function handleResize(id,width, height) { - if (id ==="modal_excel" && height !== 0) { - if ($tabFunction_data) { - drawExcel("modal_excel"); + // 모달요소 크기 변화 관찰(Observer) + function startObserver() { + resizeObserver.observe($(getTargetId("jq"))[0]); + } + + function handleResize(id, width, height) { + if (id === getTargetId() && height !== 0) { + if (excelData) { + drawResizedExcel(getTargetId()); } else { - console.log("엑셀 데이터 없음"); + console.log("Spreadsheet.handleResize :: 엑셀 데이터 없음"); } + + } else { + console.log("Spreadsheet.handleResize :: id 불일치 또는 height 가 0 입니다."); } } + function drawResizedExcel(target) { + let $targetId = "#"+target; + + if($($targetId).length > 0 && $($targetId)[0].jexcel) { + $($targetId)[0].jexcel.destroy(); + } + + setColumnWidthAsync(getTargetRect("width") - 50).then(() => { + $($targetId).spreadsheet($.extend({}, { + columns: getColumns(), + data: getExcelData() + }, getOptions())); + + let jexcel_content_height = getTargetRect("height") - 40 - 30 - 35 - 34; + $($targetId + " .jexcel_content").css("max-height", jexcel_content_height); + $($targetId + " .jexcel_content").css("width", "100%"); + }); + } + + function drawExcel(target) { + let $targetId = "#"+target; + + if($($targetId).length > 0 && $($targetId)[0].jexcel) { + $($targetId)[0].jexcel.destroy(); + } + + $($targetId).spreadsheet($.extend({}, { + columns: getColumns(), + data: getExcelData() + }, getOptions())); + + let jexcel_content_height = getTargetRect("height") - 40 - 30 - 35 - 34; + $($targetId + " .jexcel_content").css("max-height", jexcel_content_height); + $($targetId + " .jexcel_content").css("width", "100%"); + + } + return { - setExcelData, getExcelData, - setColumns, getColumns, - setOptions, getOptions, - setColumnWidth, + setTargetId, getTargetId, + setTargetRect, getTargetRect, setDefaultTargetRect, + setExcelData, getExcelData, + setColumns, getColumns, setColumnWidth, + setOptions, getOptions, + + startObserver, drawExcel }; })(); \ No newline at end of file