T207 save confirmation implemented

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;
 }

src/main/resources/static/html/mock.html

@@ -180,7 +180,9 @@
             <button>No</button>
         </div>
     </div>
+    <script type="text/javascript" src="/js/modal.js"></script>
     <script type="text/javascript" src="/js/uianimation.js"></script>
     <script type="text/javascript" src="/js/datatransfer.js"></script>
+    
 </body>
 </html>

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',

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);
+

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;
 }

target/classes/static/html/mock.html

@@ -180,7 +180,9 @@
             <button>No</button>
         </div>
     </div>
+    <script type="text/javascript" src="/js/modal.js"></script>
     <script type="text/javascript" src="/js/uianimation.js"></script>
     <script type="text/javascript" src="/js/datatransfer.js"></script>
+    
 </body>
 </html>

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',

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);
+