From ad35482a6b993e7ca4596e05418245123757902e Mon Sep 17 00:00:00 2001 From: heedaeshin Date: Mon, 7 Oct 2024 10:14:37 +0900 Subject: [PATCH] Add : web ui listen event 'message' --- web/js/scripts.js | 320 ++++++++++++++++++++++++++-------------------- 1 file changed, 181 insertions(+), 139 deletions(-) diff --git a/web/js/scripts.js b/web/js/scripts.js index 0058089..5932dcf 100644 --- a/web/js/scripts.js +++ b/web/js/scripts.js @@ -3,10 +3,15 @@ * Copyright 2013-2023 Start Bootstrap * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE) */ - // +// // Scripts // + + + +// for mc-data-manger + window.addEventListener('DOMContentLoaded', event => { // Toggle the side navigation @@ -35,7 +40,7 @@ window.addEventListener('DOMContentLoaded', event => { if (document.getElementById('restoreForm')) { RestoreFormSubmit(); } - + }); function loadingButtonOn() { @@ -76,31 +81,31 @@ function convertCheckboxParams(obj) { function formDataToObject(formData) { const data = {}; formData.forEach((value, key) => { - const match = key.match(/(\w+)\[(\w+)\]/); - if (match) { - const objName = match[1]; - const paramName = match[2]; - if (!data[objName]) { - data[objName] = {}; + const match = key.match(/(\w+)\[(\w+)\]/); + if (match) { + const objName = match[1]; + const paramName = match[2]; + if (!data[objName]) { + data[objName] = {}; + } + data[objName][paramName] = value; + } else { + data[key] = value; } - data[objName][paramName] = value; - } else { - data[key] = value; - } }); return data; - } +} - function getInputValue(id) { +function getInputValue(id) { const element = document.getElementById(id); if (!element) { - // console.warn(`Element with id '${id}' not found.`); - return null; + // console.warn(`Element with id '${id}' not found.`); + return null; } - + const value = element.value.trim(); return value !== "" ? value : null; - } +} function generateFormSubmit() { @@ -113,7 +118,7 @@ function generateFormSubmit() { const payload = new FormData(form); let jsonData = Object.fromEntries(payload); - jsonData=convertCheckboxParams(jsonData) + jsonData = convertCheckboxParams(jsonData) jsonData.targetPoint = { ...jsonData }; @@ -121,11 +126,11 @@ function generateFormSubmit() { jsonData.targetPoint.provider = document.getElementById('provider').value; const target = document.getElementById('genTarget').value; jsonData.dummy = jsonData.targetPoint - if ( (jsonData.targetPoint.provider =="ncp") && (jsonData.targetPoint.endpoint =="") ) { - jsonData.targetPoint.endpoint ="https://kr.object.ncloudstorage.com" + if ((jsonData.targetPoint.provider == "ncp") && (jsonData.targetPoint.endpoint == "")) { + jsonData.targetPoint.endpoint = "https://kr.object.ncloudstorage.com" } const url = "/generate/" + target; - + let req; req = { @@ -137,25 +142,25 @@ function generateFormSubmit() { }; fetch(url, req) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.json(); - }) - .then(json => { - const resultText = document.getElementById('resultText'); - resultText.value = json.Result; - console.log(json); - console.log("Generate done."); - }) - .catch(reason => { - console.error("Error during generate:", reason); - alert(reason.message || reason); - }) - .finally(() => { - loadingButtonOff(); - }); + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(json => { + const resultText = document.getElementById('resultText'); + resultText.value = json.Result; + console.log(json); + console.log("Generate done."); + }) + .catch(reason => { + console.error("Error during generate:", reason); + alert(reason.message || reason); + }) + .finally(() => { + loadingButtonOff(); + }); console.log("Generate progressing..."); }); @@ -170,7 +175,7 @@ function migrationFormSubmit() { resultCollpase(); const payload = new FormData(form); - let jsonData= formDataToObject(payload) + let jsonData = formDataToObject(payload) console.log(jsonData) const dest = document.getElementById('migDest').value; const source = document.getElementById('migSource').value; @@ -181,11 +186,11 @@ function migrationFormSubmit() { let url = "/migrate/" + service; - if ( (jsonData.targetPoint.provider =="ncp") && (jsonData.targetPoint.endpoint =="") ) { - jsonData.targetPoint.endpoint ="https://kr.object.ncloudstorage.com" + if ((jsonData.targetPoint.provider == "ncp") && (jsonData.targetPoint.endpoint == "")) { + jsonData.targetPoint.endpoint = "https://kr.object.ncloudstorage.com" } - if ( (jsonData.sourcePoint.provider =="ncp") && (jsonData.sourcePoint.endpoint =="") ) { - jsonData.sourcePoint.endpoint ="https://kr.object.ncloudstorage.com" + if ((jsonData.sourcePoint.provider == "ncp") && (jsonData.sourcePoint.endpoint == "")) { + jsonData.sourcePoint.endpoint = "https://kr.object.ncloudstorage.com" } console.log(url); @@ -201,22 +206,22 @@ function migrationFormSubmit() { }; fetch(url, req) - .then(response => { - return response.json(); - }) - .then(json => { - const resultText = document.getElementById('resultText'); - resultText.value = json.Result; - console.log(json); - console.log("migration done."); - }) - .catch(reason => { - console.log(reason); - alert(reason); - }) - .finally(() => { - loadingButtonOff(); - }); + .then(response => { + return response.json(); + }) + .then(json => { + const resultText = document.getElementById('resultText'); + resultText.value = json.Result; + console.log(json); + console.log("migration done."); + }) + .catch(reason => { + console.log(reason); + alert(reason); + }) + .finally(() => { + loadingButtonOff(); + }); console.log("migration progressing..."); }); @@ -237,18 +242,18 @@ function backUpFormSubmit() { console.log(url); - let jsonData= formDataToObject(payload) + let jsonData = formDataToObject(payload) console.log(jsonData) - if ( (jsonData.targetPoint.provider =="ncp") && (jsonData.targetPoint.endpoint =="") ) { - jsonData.targetPoint.endpoint ="https://kr.object.ncloudstorage.com" + if ((jsonData.targetPoint.provider == "ncp") && (jsonData.targetPoint.endpoint == "")) { + jsonData.targetPoint.endpoint = "https://kr.object.ncloudstorage.com" } - if ( (jsonData.sourcePoint.provider =="ncp") && (jsonData.sourcePoint.endpoint =="") ) { - jsonData.sourcePoint.endpoint ="https://kr.object.ncloudstorage.com" + if ((jsonData.sourcePoint.provider == "ncp") && (jsonData.sourcePoint.endpoint == "")) { + jsonData.sourcePoint.endpoint = "https://kr.object.ncloudstorage.com" } - let req= { + let req = { method: 'POST', headers: { 'Content-Type': 'application/json' @@ -256,23 +261,23 @@ function backUpFormSubmit() { body: JSON.stringify(jsonData) }; - fetch(url, req ) - .then(response => { - return response.json(); - }) - .then(json => { - const resultText = document.getElementById('resultText'); - resultText.value = json.Result; - console.log(json); - console.log("backup done."); - }) - .catch(reason => { - console.log(reason); - alert(reason); - }) - .finally(() => { - loadingButtonOff(); - }); + fetch(url, req) + .then(response => { + return response.json(); + }) + .then(json => { + const resultText = document.getElementById('resultText'); + resultText.value = json.Result; + console.log(json); + console.log("backup done."); + }) + .catch(reason => { + console.log(reason); + alert(reason); + }) + .finally(() => { + loadingButtonOff(); + }); console.log("backup progressing..."); }); @@ -293,18 +298,18 @@ function RestoreFormSubmit() { console.log(url); - let jsonData= formDataToObject(payload) + let jsonData = formDataToObject(payload) console.log(jsonData) - if ( (jsonData.targetPoint.provider =="ncp") && (jsonData.targetPoint.endpoint =="") ) { - jsonData.targetPoint.endpoint ="https://kr.object.ncloudstorage.com" + if ((jsonData.targetPoint.provider == "ncp") && (jsonData.targetPoint.endpoint == "")) { + jsonData.targetPoint.endpoint = "https://kr.object.ncloudstorage.com" } - if ( (jsonData.sourcePoint.provider =="ncp") && (jsonData.sourcePoint.endpoint =="") ) { - jsonData.sourcePoint.endpoint ="https://kr.object.ncloudstorage.com" + if ((jsonData.sourcePoint.provider == "ncp") && (jsonData.sourcePoint.endpoint == "")) { + jsonData.sourcePoint.endpoint = "https://kr.object.ncloudstorage.com" } - let req= { + let req = { method: 'POST', headers: { 'Content-Type': 'application/json' @@ -312,63 +317,100 @@ function RestoreFormSubmit() { body: JSON.stringify(jsonData) }; - fetch(url, req ) - .then(response => { - return response.json(); - }) - .then(json => { - const resultText = document.getElementById('resultText'); - resultText.value = json.Result; - console.log(json); - console.log("restore done."); - }) - .catch(reason => { - console.log(reason); - alert(reason); - }) - .finally(() => { - loadingButtonOff(); - }); + fetch(url, req) + .then(response => { + return response.json(); + }) + .then(json => { + const resultText = document.getElementById('resultText'); + resultText.value = json.Result; + console.log(json); + console.log("restore done."); + }) + .catch(reason => { + console.log(reason); + alert(reason); + }) + .finally(() => { + loadingButtonOff(); + }); console.log("restore progressing..."); }); } -document.addEventListener('DOMContentLoaded', function() { +document.addEventListener('DOMContentLoaded', function () { const clearServiceLink = document.getElementById('clearServiceLink'); - + if (clearServiceLink) { - clearServiceLink.addEventListener('click', function(event) { - event.preventDefault(); - - const userConfirmed = confirm('정말로 서비스를 클리어하시겠습니까?'); - if (!userConfirmed) { - return; - } - - fetch('/service/clearAll', { - method: 'DELETE', - headers: { - 'Content-Type': 'application/json' - } - }) - .then(response => { - if (response.ok) { - alert('서비스가 성공적으로 클리어되었습니다.'); - } else { - return response.json().then(data => { - throw new Error(data.message || '서비스 클리어 중 오류가 발생했습니다.'); - }); - } - }) - .catch(error => { - console.error('Error:', error); - alert(`오류: ${error.message}`); + clearServiceLink.addEventListener('click', function (event) { + event.preventDefault(); + + const userConfirmed = confirm('정말로 서비스를 클리어하시겠습니까?'); + if (!userConfirmed) { + return; + } + + fetch('/service/clearAll', { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json' + } + }) + .then(response => { + if (response.ok) { + alert('서비스가 성공적으로 클리어되었습니다.'); + } else { + return response.json().then(data => { + throw new Error(data.message || '서비스 클리어 중 오류가 발생했습니다.'); + }); + } + }) + .catch(error => { + console.error('Error:', error); + alert(`오류: ${error.message}`); + }); }); - }); } else { - console.error('Clear Service 링크를 찾을 수 없습니다.'); + console.error('Clear Service 링크를 찾을 수 없습니다.'); } - }); +}); + + +// for m-cmp/mc-web-console + + +// message Info +// { +// accessToken: "accesstokenExample", +// workspaceInfo: { +// "id": "8b2df1f9-b937-4861-b5ce-855a41c346bc", +// "name": "workspace2", +// "description": "workspace2 desc", +// "created_at": "2024-06-18T00:10:16.192337Z", +// "updated_at": "2024-06-18T00:10:16.192337Z" +// }, +// projectInfo: { +// "id": "1e88f4ea-d052-4314-80a4-9ac3f6691feb", +// "ns_id": "project1", +// "name": "project1", +// "description": "project1 desc", +// "created_at": "2024-06-18T00:28:57.094105Z", +// "updated_at": "2024-06-18T00:28:57.094105Z" +// }, +// operationId: "abc" +// }; + +window.addEventListener("message", async function (event) { + const data = event.data; + console.log("iframeServer : Message received :", data); + try { + // const nsId = data.projectInfo.ns_id + // business logic + + } catch (error) { + console.error("Error in processing message:", error); + } +}); \ No newline at end of file