Skip to content

Commit

Permalink
Fixed everything on RIA project
Browse files Browse the repository at this point in the history
  • Loading branch information
jonelrelucio committed May 28, 2023
1 parent e2c684e commit 71feb64
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 67 deletions.
2 changes: 2 additions & 0 deletions TIW-RIA-project-taxonomy/src/main/webapp/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ <h1 class="title">Satellite Images</h1>


<div class="center saveChanges">
<p id="id_saveChangesAlert"></p>
<input class="saveChanges" type="button" id="id_saveChanges" value="Save Changes">

</div>


Expand Down
125 changes: 68 additions & 57 deletions TIW-RIA-project-taxonomy/src/main/webapp/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -253,90 +253,101 @@ ul li::after {
top: 12px;
}


.dialog {
height: 300px;
width: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
visibility: hidden;
z-index: 9999;
/* Set a high z-index to ensure the dialog appears on top */
height: 300px;
width: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
visibility: hidden;
z-index: 9999;
/* Set a high z-index to ensure the dialog appears on top */
}

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
/* Semi-transparent black overlay */
visibility: hidden;
z-index: 9998;
/* Set a z-index lower than the dialog */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
/* Semi-transparent black overlay */
visibility: hidden;
z-index: 9998;
/* Set a z-index lower than the dialog */
}

input.confirm {
margin-top: 50px;
width: 200px;
border-radius: 5px;
border: 3px solid #337ab7;

background-color: #337ab7;
margin-top: 50px;
width: 200px;
border-radius: 5px;
border: 3px solid #337ab7;
background-color: #337ab7;
}

input.cancel {
margin-top: 50px;
border: 3px solid #337ab7;
border-radius: 8px;
color: #337ab7;
font-weight: 600;
background-color: white;
width: 200px;
margin-top: 50px;
border: 3px solid #337ab7;
border-radius: 8px;
color: #337ab7;
font-weight: 600;
background-color: white;
width: 200px;
}


input.saveChanges {
border-radius: 8px;
font-weight: 600;
background-color:#e1493b;
width: 200px;
visibility:hidden
border-radius: 8px;
font-weight: 600;
background-color: #e1493b;
width: 200px;
visibility: hidden;
}

div.saveChanges {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, 550%);
z-index: 10;
position: fixed;
bottom: 90px;
left: 50%;
transform: translate(-50%, 50%);
z-index: 10;
visibility: hidden;
}

#id_noCategoriesAlert {
color : #e1493b;
visibility:hidden
#id_saveChangesAlert {
position: fixed;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 1000px;
color: #e1493b;
visibility: visible;
}


#id_errorBox {
position: fixed;
top: 0;
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, -10%);
transform: translate(-50%, -10%);
width: 600px;
background-color: white;
border-radius: 10px;
border: 1px solid black;
padding-top: 50px;
padding-bottom: 17px;
z-index: 11;
visibility: hidden
z-index: 11;
visibility: hidden
}

div.droppable {
max-width: 250px;
}

div.notDroppable {
max-width: 250px;
}
48 changes: 38 additions & 10 deletions TIW-RIA-project-taxonomy/src/main/webapp/taxonomyManagement.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,16 +62,24 @@
subcategories.forEach(function(subCategory) {

var categoryBox = document.createElement("div");
categoryBox.classList.add("draggable");
categoryBox.draggable = true;
//______//
// categoryBox.classList.add("draggable"); // MUST MOVE
// categoryBox.draggable = true; // MUST MOVE
//__//
var subCategoryItem = document.createElement("li");
var subCategoryDroppable = document.createElement("div");
subCategoryDroppable.classList.add("droppable");


var subCategoryId = document.createElement("span");
subCategoryId.classList.add("id");
subCategoryId.textContent = subCategory.id;
var subCategoryName = document.createElement("span");
subCategoryName.classList.add("category");
//_____// moved
subCategoryName.classList.add("draggable");
subCategoryName.draggable = true;
//____///
subCategoryName.textContent = subCategory.name;

subCategoryItem.appendChild(categoryBox);
Expand Down Expand Up @@ -185,8 +193,18 @@
var onDragStart = function(newDraggableCategory) {
var function1 = function(event) {
event.stopPropagation(); //invoking this method prevents the event from reaching any objects other than the current object
var newClonedTree = newDraggableCategory.cloneNode(true);
self.getCategoriesToBePasted(event.target, newClonedTree);


// ____ CHANGE THIS
//var newClonedTree = newDraggableCategory.cloneNode(true);
//________


// Changed THIS
var newClonedTree = newDraggableCategory.parentNode.parentNode.cloneNode(true);
// CHANGED

self.getCategoriesToBePasted(event.target.parentNode.parentNode, newClonedTree);
};
return function1;
}
Expand Down Expand Up @@ -225,7 +243,7 @@

}

this.changeClickable = function() {
this.changeClickable = function(saveChangesForm) {
var self = this;
var categories = document.querySelectorAll('.category');

Expand All @@ -236,7 +254,7 @@

var alertCantChangeName = function(category) {
function1 = function(event) {
console.log('cant change name, save changes first');
saveChangesForm.showChangesAlert();
}
return function1;
}
Expand Down Expand Up @@ -374,8 +392,7 @@
var function1 = function(event) {
event.stopPropagation();
self.updateDraggableCategories();
self.changeClickable();
self.dialog.showConfirm(draggedCategory, droppableCategory);
self.dialog.showConfirm(draggedCategory, droppableCategory, self);
};

return function1;
Expand Down Expand Up @@ -536,7 +553,7 @@
this.alertMessage = _alertMessage;
this.saveChangesForm = _saveChangesForm;

this.showConfirm = function(draggedCategory, droppedCategory) {
this.showConfirm = function(draggedCategory, droppedCategory, taxonomy) {
var self = this;
self.alertTitle.firstChild.textContent = "Confirm Copy?";
self.alertMessage.textContent = "Changes are only saved locally."
Expand All @@ -550,6 +567,7 @@
self.dialog.style.visibility = 'hidden';
self.overlay.style.visibility = 'hidden';

taxonomy.changeClickable(self.saveChangesForm);/////////////////////////////////////////////////////////
// show the save changes form and pass the draggedtree
self.saveChangesForm.show(draggedCategory, droppedCategory);

Expand Down Expand Up @@ -627,8 +645,9 @@

}

function SaveChangesForm(_saveChangesButton, _pageOrchestrator, _errorBox) {
function SaveChangesForm(_saveChangesButton, _saveChangesAlert, _pageOrchestrator, _errorBox) {
this.saveChangesButton = _saveChangesButton;
this.saveChangesAlert = _saveChangesAlert;
this.pageOrchestrator = _pageOrchestrator;
this.errorBox = _errorBox;
this.taxonomyChanges = [];
Expand Down Expand Up @@ -676,10 +695,18 @@
}

}

this.showChangesAlert = function() {
console.log("save changes before changing the category name")
this.saveChangesAlert.textContent = "save changes before changing the category name";
this.saveChangesAlert.style.visibility = 'visible';
}


this.update = function() {
this.saveChangesAlert.textContent = '';
this.saveChangesButton.style.visibility = 'hidden';
this.saveChangesAlert.style.visibility = 'hidden';
}
}

Expand Down Expand Up @@ -715,6 +742,7 @@

saveChangesForm = new SaveChangesForm(
document.getElementById("id_saveChanges"),
document.getElementById("id_saveChangesAlert"),
thisPageOrchestrator, errorBox
);
dialog = new Dialog(
Expand Down

0 comments on commit 71feb64

Please sign in to comment.