From 1aca6d63743fb5aa85999b3b0ad74bf7f063cd77 Mon Sep 17 00:00:00 2001 From: modzeleg Date: Wed, 3 Mar 2021 15:47:01 +0100 Subject: [PATCH] T207 save confirmation implemented --- src/main/resources/static/css/modal.css | 6 +-- src/main/resources/static/html/mock.html | 2 + src/main/resources/static/js/datatransfer.js | 8 ++-- src/main/resources/static/js/modal.js | 45 ++++++++++++++++++++ target/classes/static/css/modal.css | 6 +-- target/classes/static/html/mock.html | 2 + target/classes/static/js/datatransfer.js | 8 ++-- target/classes/static/js/modal.js | 45 ++++++++++++++++++++ 8 files changed, 106 insertions(+), 16 deletions(-) create mode 100644 src/main/resources/static/js/modal.js create mode 100644 target/classes/static/js/modal.js diff --git a/src/main/resources/static/css/modal.css b/src/main/resources/static/css/modal.css index 75de6d6..7848a43 100644 --- a/src/main/resources/static/css/modal.css +++ b/src/main/resources/static/css/modal.css @@ -35,7 +35,7 @@ .modal div.header { width: 384px; height: 24px; - background: gray; + background: #2e3133; color: white; font-size: 24px; font-weight: 700; @@ -65,7 +65,7 @@ width: 370px; padding: 10px; background: #f0f0f0; - color: black; + color: #2e3133; min-height: 16px; text-align: justify; font-size: 16px; @@ -99,6 +99,6 @@ .r-exclamation:before { content: '!'; - color: cyan; + color: #3bc4f1; font-style: normal; } diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html index 023e002..b8c41d3 100644 --- a/src/main/resources/static/html/mock.html +++ b/src/main/resources/static/html/mock.html @@ -180,7 +180,9 @@ + + \ No newline at end of file diff --git a/src/main/resources/static/js/datatransfer.js b/src/main/resources/static/js/datatransfer.js index f092e5e..4ea2cb7 100644 --- a/src/main/resources/static/js/datatransfer.js +++ b/src/main/resources/static/js/datatransfer.js @@ -8,6 +8,8 @@ var jsonIndex = 0; var htable_row = 0; var host = getDomain(); var dataModified = false; +var discardChanges = false; + const C_UUID = 'mock-uuid'; const setModified = function(){ setDataModified(); @@ -96,16 +98,12 @@ function getCookie(cname) { return ''; } -function displaySaveConfirmation(){ - alert('message has been saved'); -} - function updateData(){ var updatedJson = generateJson(); const dataSaved = function () { - displaySaveConfirmation(); setDataOrigin(); getData(); + savedModalDisplay(); } var request = $.ajax({ url: host + '/mock/json', diff --git a/src/main/resources/static/js/modal.js b/src/main/resources/static/js/modal.js new file mode 100644 index 0000000..980931f --- /dev/null +++ b/src/main/resources/static/js/modal.js @@ -0,0 +1,45 @@ +var modalDisplayed = false; + +const overlay = $('#overlay'); +const savedModal = $('#modal-confirm'); +const dataLossModal = $('#modal-query'); +const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0); +const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1); +const allModals = $('.modal'); +const btnModalClose = $('.modal button'); +//TODO: Implement in datatransfer +const closeModals = function() { + hideModal(allModals); +} +const savedModalDisplay = function() { + console.log('SavedModal displayed'); + showModal(savedModal); + setTimeout(closeModals, 2000); +} +const dataLossModalDisplay = function(){ + showModal(dataLossModal); +} +const dropChangesAndClose = function(){ + discardChanges = true; + hideModal(dataLossModal); +} + +function showModal(jmodal){ + if(modalDisplayed) return; + overlay.toggleClass('active'); + jmodal.addClass('active'); + modalDisplayed = true; +} + +function hideModal(jmodal){ + if(!modalDisplayed) return; + overlay.toggleClass('active'); + jmodal.removeClass('active'); + modalDisplayed = false; +} + +btnModalClose.click(closeModals); +overlay.click(closeModals); +dataLossModalNo.click(closeModals); +dataLossModalYes.click(dropChangesAndClose); + diff --git a/target/classes/static/css/modal.css b/target/classes/static/css/modal.css index 75de6d6..7848a43 100644 --- a/target/classes/static/css/modal.css +++ b/target/classes/static/css/modal.css @@ -35,7 +35,7 @@ .modal div.header { width: 384px; height: 24px; - background: gray; + background: #2e3133; color: white; font-size: 24px; font-weight: 700; @@ -65,7 +65,7 @@ width: 370px; padding: 10px; background: #f0f0f0; - color: black; + color: #2e3133; min-height: 16px; text-align: justify; font-size: 16px; @@ -99,6 +99,6 @@ .r-exclamation:before { content: '!'; - color: cyan; + color: #3bc4f1; font-style: normal; } diff --git a/target/classes/static/html/mock.html b/target/classes/static/html/mock.html index 023e002..b8c41d3 100644 --- a/target/classes/static/html/mock.html +++ b/target/classes/static/html/mock.html @@ -180,7 +180,9 @@ + + \ No newline at end of file diff --git a/target/classes/static/js/datatransfer.js b/target/classes/static/js/datatransfer.js index f092e5e..4ea2cb7 100644 --- a/target/classes/static/js/datatransfer.js +++ b/target/classes/static/js/datatransfer.js @@ -8,6 +8,8 @@ var jsonIndex = 0; var htable_row = 0; var host = getDomain(); var dataModified = false; +var discardChanges = false; + const C_UUID = 'mock-uuid'; const setModified = function(){ setDataModified(); @@ -96,16 +98,12 @@ function getCookie(cname) { return ''; } -function displaySaveConfirmation(){ - alert('message has been saved'); -} - function updateData(){ var updatedJson = generateJson(); const dataSaved = function () { - displaySaveConfirmation(); setDataOrigin(); getData(); + savedModalDisplay(); } var request = $.ajax({ url: host + '/mock/json', diff --git a/target/classes/static/js/modal.js b/target/classes/static/js/modal.js new file mode 100644 index 0000000..980931f --- /dev/null +++ b/target/classes/static/js/modal.js @@ -0,0 +1,45 @@ +var modalDisplayed = false; + +const overlay = $('#overlay'); +const savedModal = $('#modal-confirm'); +const dataLossModal = $('#modal-query'); +const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0); +const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1); +const allModals = $('.modal'); +const btnModalClose = $('.modal button'); +//TODO: Implement in datatransfer +const closeModals = function() { + hideModal(allModals); +} +const savedModalDisplay = function() { + console.log('SavedModal displayed'); + showModal(savedModal); + setTimeout(closeModals, 2000); +} +const dataLossModalDisplay = function(){ + showModal(dataLossModal); +} +const dropChangesAndClose = function(){ + discardChanges = true; + hideModal(dataLossModal); +} + +function showModal(jmodal){ + if(modalDisplayed) return; + overlay.toggleClass('active'); + jmodal.addClass('active'); + modalDisplayed = true; +} + +function hideModal(jmodal){ + if(!modalDisplayed) return; + overlay.toggleClass('active'); + jmodal.removeClass('active'); + modalDisplayed = false; +} + +btnModalClose.click(closeModals); +overlay.click(closeModals); +dataLossModalNo.click(closeModals); +dataLossModalYes.click(dropChangesAndClose); +