ProjectB/projectb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SECTION MOVE & DRAG AND DROP QN -SV

Browse Source
This commit is contained in:
Sharath 2023-10-20 15:00:31 +05:30
parent 40ef91d150
commit b3b83c0eee
2 changed files with 385 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

440
addform.html
View File

@ -342,6 +342,90 @@
</style> </style>
<style>
/* Styles for the overlay background */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0); /* Initial opacity set to 0 */
transition: background-color 0.3s; /* Add a transition effect for smooth opacity change */
z-index: 1;
}
/* Styles for the popup container */
.popup {
display: none;
position: fixed;
background-color: #c8c8cb;
width: 30%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
z-index: 2;
font-size: larger;
}
.popupbox {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 10px;
border-radius: 8px;
background: #fff;
border: 1px solid #e6e6e6;
box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
.popupbox p{margin: 0;}
.popup-save{
display: flex;
justify-content: flex-end;
}
.popup-save button{
border-radius: 5px;
border-color:#eee;
}
.popupbox q{
align-items: center;
margin-bottom: 16px;
padding: 10px;
border-radius: 8px;
background: #fff;
border: 1px solid #e6e6e6;
box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
</style>
<style>
.dropdown {
position: relative;
display: inline-block;
padding:20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 56px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
right:12px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head> </head>
<body> <body>
@ -409,6 +493,8 @@
<!-- QuestionPapper Start --> <!-- QuestionPapper Start -->
<div class="row section QuestionPaperClass" id="QuestionPaper"> <div class="row section QuestionPaperClass" id="QuestionPaper">
<!-- QuestionPapper Title Start--> <!-- QuestionPapper Title Start-->
@ -499,6 +585,21 @@
</div> </div>
<!-- QuestionPapper Container End --> <!-- QuestionPapper Container End -->
</div> </div>
<!-- The overlay background -->
<div class="overlay " id="overlay"></div>
<!-- The popup container -->
<div class="popup " id="popup">
<ul id="output" class="">
<div style="margin-bottom: 9px;">Reorder sections</div>
</ul>
<div class="popup-save">
<button onclick="saveFile()" id="closePopupButton">Save</button>
</div>
<!-- <button id="closePopupButton">Close</button> -->
</div>
<div class="copy-right-area"> <div class="copy-right-area">
@ -574,6 +675,9 @@
<script> <script>
var sidebarWrapper = document.getElementById("questionPaper"); var sidebarWrapper = document.getElementById("questionPaper");
function clearSidebarWrapper() { function clearSidebarWrapper() {
@ -715,7 +819,7 @@ function loadXML(xmlFileName) {
} }
// Function for Save the XML File // Function for Save the XML File
function saveFile() { function saveFile(flag=0) {
html2json(); html2json();
json2xml(); json2xml();
@ -725,8 +829,13 @@ function saveFile() {
}else{ }else{
const newFileName = FileName.split(".")[0]; const newFileName = FileName.split(".")[0];
savexml(newFileName); //if 1 it is used for re-order and redirect to the qn paper itself
if (flag=1){
savexml(newFileName,reorder=true);
//if 0 it is used as nrml save which will redierect to dashboard
}else{
savexml(newFileName);
}
} }
}; };
@ -856,6 +965,7 @@ function addSection(title = false, description = false, random_no = false, secti
i = i + 1; i = i + 1;
addsection += addsection +=
` `
<div id="reorder_${sectionRandomID}">
<div class="section-heading"> <div class="section-heading">
<i class="fa fa-angle-down float-left" id="collapseSection_${random_no == false ? text_field_created_time : random_no}" aria-hidden="true"></i> <i class="fa fa-angle-down float-left" id="collapseSection_${random_no == false ? text_field_created_time : random_no}" aria-hidden="true"></i>
&nbsp; <!-- Add a space character here --> &nbsp; <!-- Add a space character here -->
@ -864,10 +974,21 @@ function addSection(title = false, description = false, random_no = false, secti
<input type="hidden" id="Section_UUID_ID_${random_no == false ? text_field_created_time : random_no}" value="${section_uuid == false ? Section_UUID : section_uuid}"> <input type="hidden" id="Section_UUID_ID_${random_no == false ? text_field_created_time : random_no}" value="${section_uuid == false ? Section_UUID : section_uuid}">
<div class="section restrict-drop" id="section_${sectionRandomID}" > <div class="section restrict-drop" id="section_${sectionRandomID}" >
<div class="sectionTitle" id="section_title_${random_no == false ? text_field_created_time : random_no}"> <div class="sectionTitle" id="section_title_${random_no == false ? text_field_created_time : random_no}">
<div class="nodrop col-lg-12 col-md-12"> <div class="nodrop col-lg-12 col-md-12">
<div class="row question element" style="border-top : 15px solid; margin-right: ;" id="SectionBox_${sectionRandomID}" onmouseover="showButtons(this)" > <div class="row question element" style="border-top : 15px solid; margin-right: ;" id="SectionBox_${sectionRandomID}" onmouseover="showButtons(this)" >
<div class="items align-items-center hideondrag" style="display: block;">
<div class="dropdown " id="toggle-menu">
<i class="fa fa-ellipsis-v" style="font-size:20px" aria-hidden="true"></i>
<div class="dropdown-content">
<button id="popupid_${sectionRandomID}" class="showPopupButton">Move</button>
</div>
</div>
</div>
<div class="row" style="text-align:right; width: 100%"> <div class="row" style="text-align:right; width: 100%">
<div class="col-lg-10 col-md-12"> <div class="col-lg-10 col-md-12">
<div class=" button-group align-items-center"> <div class=" button-group align-items-center">
<div class="addButton buttons" style="display: none;" id="sectionAddButton_${sectionRandomID}"> <div class="addButton buttons" style="display: none;" id="sectionAddButton_${sectionRandomID}">
@ -932,6 +1053,7 @@ function addSection(title = false, description = false, random_no = false, secti
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;
var formContainer = document.getElementById('addNewSection'); var formContainer = document.getElementById('addNewSection');
@ -945,7 +1067,14 @@ function addSection(title = false, description = false, random_no = false, secti
var groupQuestionButtonId = 'groupQuestionButton_' + sectionRandomID; var groupQuestionButtonId = 'groupQuestionButton_' + sectionRandomID;
document.getElementById('popupid_'+sectionRandomID).addEventListener('click', function() {
// alert("dd")
// const popup = document.getElementById('popup');
// popup.style.display = 'block';
executeScriptAndDisplayOutput()
});
$('#'+addNewButtonId).on('click', function() { $('#'+addNewButtonId).on('click', function() {
$('#'+SectionButtonId).toggle(); $('#'+SectionButtonId).toggle();
@ -2532,62 +2661,118 @@ function removeClonedQroupQuestion(index)
let draggedItemGroup = null; let draggedItemGroup = null;
let draggedItemQuestion = null; let draggedItemQuestion = null;
let dropTarget = null; let dropTarget = null;
let richTextElements = null;
let questionLabels = null;
// Event listener for .draggable-group elements // Event listener for .drag-handle elements within questions
document.addEventListener('mousedown', function (e) { document.addEventListener('mousedown', function (e) {
const dragHandle = e.target.closest('.drag-handle'); const dragHandle = e.target.closest('.drag-handle');
if (dragHandle) { if (dragHandle) {
// If the click is inside a drag handle, find the corresponding .draggable-group // If the click is inside a drag handle, find the corresponding .question
const draggableGroup = dragHandle.closest('.draggable-group'); const questionElement = dragHandle.closest('.question');
if (draggableGroup) {
// Initiate the drag operation for the .draggable-group
draggedItemGroup = draggableGroup;
// Add a dragStart event listener to set data if (questionElement) {
draggedItemGroup.addEventListener('dragstart', function (e) { console.log("draggHandle:",dragHandle);
e.dataTransfer.setData('text/plain', draggedItemGroup.id); // Initiate the drag operation for the .question
// console.log(draggedItemGroup.id); draggedItemQuestion = questionElement;
// Hide all elements with class "hideondrag"
richTextElements = document.querySelectorAll('.hideondrag');
richTextElements.forEach((element) => {
element.style.display = 'none';
});
});
}
}
});
// Event listener for .question elements // Add a dragStart event listener to set data
document.addEventListener('mousedown', function (e) { draggedItemQuestion.addEventListener('dragstart', function (e) {
const dragHandle = e.target.closest('.drag-handle'); e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
console.log(draggedItemQuestion.id);
if (dragHandle) {
// If the click is inside a drag handle, find the corresponding .question
const questionElement = dragHandle.closest('.question'); });
}
if (questionElement) { }
// Initiate the drag operation for the .question });
draggedItemQuestion = questionElement;
// Add a dragStart event listener to set data // document.addEventListener('mousedown', function (e) {
draggedItemQuestion.addEventListener('dragstart', function (e) { // const dragHandle = e.target.closest('.drag-handle');
e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
// if (dragHandle) {
// // If the click is inside a drag handle, find the corresponding .question
// const questionElement = dragHandle.closest('.groupsection');
// Hide all elements with class "hideondrag" // if (questionElement) {
richTextElements = document.querySelectorAll('.hideondrag'); // console.log("draggHandle:",dragHandle);
richTextElements.forEach((element) => { // // Initiate the drag operation for the .question
element.style.display = 'none'; // draggedItemQuestion = questionElement;
});
}); // // Add a dragStart event listener to set data
} // draggedItemQuestion.addEventListener('dragstart', function (e) {
} // e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
}); // console.log(draggedItemQuestion.id);
// });
// }
// }
// });
// document.addEventListener('mousedown', function (e) {
// const dragHandle = e.target.closest('.drag-handle');
// if (dragHandle) {
// // If the click is inside a drag handle, find the corresponding .question
// const questionElement = dragHandle.closest('.groupsection>.question');
// if (questionElement) {
// console.log(questionElement);
// console.log("draggHandle:",dragHandle);
// // Initiate the drag operation for the .question
// draggedItemQuestion = questionElement;
// // Add a dragStart event listener to set data
// draggedItemQuestion.addEventListener('dragstart', function (e) {
// e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
// console.log(draggedItemQuestion.id);
// });
// }
// }
// });
// // Event listener for .draggable-group elements
// document.addEventListener('mousedown', function (e) {
// const dragHandle = e.target.closest('.drag-handle');
// if(groupqnornot){
// if (dragHandle) {
// // If the click is inside a drag handle, find the corresponding .draggable-group
// const draggableGroup = dragHandle.closest('.draggable-group');
// console.log("draggableGroup:",draggableGroup);
// if (draggableGroup) {
// console.log("draggHandle:",dragHandle);
// // Initiate the drag operation for the .draggable-group
// draggedItemGroup = draggableGroup;
// // Add a dragStart event listener to set data
// draggedItemGroup.addEventListener('dragstart', function (e) {
// e.dataTransfer.setData('text/plain', draggedItemGroup.id);
// console.log(draggedItemGroup.id);
// // // Hide all elements with class "hideondrag" in the group
// // const richTextElements = document.querySelectorAll('.hideondrag');
// // richTextElements.forEach((element) => {
// // element.style.display = 'none';
// // });
// });
// }
// }
// }
// });
document.addEventListener('dragover', function (e) { document.addEventListener('dragover', function (e) {
// groupqnornot = true;
// Hide all elements with class "hideondrag" in the question
const richTextElements = document.querySelectorAll('.hideondrag');
richTextElements.forEach((element) => {
element.style.display = 'none';
});
e.preventDefault(); e.preventDefault();
// Allow scrolling while dragging // Allow scrolling while dragging
@ -2619,12 +2804,11 @@ function removeClonedQroupQuestion(index)
if (dropTarget) { if (dropTarget) {
dropTarget.classList.remove('highlight'); dropTarget.classList.remove('highlight');
} }
if (dropTarget.classList.contains('nodrop')) { if (dropTarget.classList.contains('nodrop')) {
// Remove the highlight class when leaving the drop target // Remove the highlight class when leaving the drop target
dropTarget.classList.remove('highlight'); dropTarget.classList.remove('highlight');
} }
}); });
document.addEventListener('dragend', function () { document.addEventListener('dragend', function () {
// Remove the highlight class from all .draggable-group and .question elements // Remove the highlight class from all .draggable-group and .question elements
@ -2633,20 +2817,13 @@ function removeClonedQroupQuestion(index)
element.classList.remove('highlight'); element.classList.remove('highlight');
}); });
// Show all elements with class "hideondrag" again for .draggable-group
if (richTextElements) {
richTextElements.forEach((element) => {
element.style.display = '';
});
}
// Show all elements with class "hideondrag" again for .question // Show all elements with class "hideondrag" again for .question
if (richTextElements) { const richTextElements = document.querySelectorAll('.hideondrag');
richTextElements.forEach((element) => { richTextElements.forEach((element) => {
element.style.display = ''; element.style.display = '';
}); });
}
// Reset variables
dropTarget = null; dropTarget = null;
draggedItemGroup = null; draggedItemGroup = null;
draggedItemQuestion = null; draggedItemQuestion = null;
@ -2680,6 +2857,7 @@ function removeClonedQroupQuestion(index)
} else { } else {
console.error('No dragged item or drop target found.'); console.error('No dragged item or drop target found.');
} }
}); });
</script> </script>
@ -2729,6 +2907,128 @@ function removeClonedQroupQuestion(index)
} }
} }
</script> </script>
<script>
// Function to execute the script and display its output in the popup
function executeScriptAndDisplayOutput() {
// Display the popup with the output
const popup = document.getElementById('popup');
popup.style.display = 'block';
// alert('hi');
// Sample JSON data with section names and section IDs
const jsonData = JSON.parse(localStorage.getItem('JSON_FOR_NAV'));
const reorderpop = document.getElementById('output');
const addsection= document.querySelector('#addNewSection'); // Replace with your actual right list ID
console.log("addsection:",addsection);
// Function to add a section name to the left side
function addSectionName(section) {
v=section.section_title;
// // Remove <p> and </p> tags from the HTML content
v = v.replace(/<p>|<\/p>/g, '');
console.log("v",v);
if (v === '<br>') {
// If the innerHTML is empty, add sample text
v = 'untitled'
// console.log("v",v);
}
console.log("v",v);
const reorderpop_item = document.createElement('li');
// Set the inner HTML of the list item to the section title
reorderpop_item.innerHTML = v;
reorderpop_item.classList.add('reorder-item');
reorderpop_item.classList.add('popupbox');
// Set the "id" attribute with the updated value from JSON data
reorderpop_item.id = 'reorder_' + section.section_id;
const buttons = document.createElement('span');
buttons.innerHTML = `
<span class="fa fa-chevron-up up-icon" style="transition: box-shadow 0.3s ease; border-radius: 50%;" onmouseover="this.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';" onmouseout="this.style.boxShadow = 'none';"></span>
<span class="fa fa-chevron-down down-icon" style="transition: box-shadow 0.3s ease; border-radius: 50%;" onmouseover="this.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';" onmouseout="this.style.boxShadow = 'none';"></span>
`;
reorderpop_item.appendChild(buttons);
reorderpop.appendChild(reorderpop_item);
}
// Populate the left side with section names and IDs from JSON data
jsonData.sections.forEach(section => {
addSectionName(section);
});
// Add event listeners to handle reordering
reorderpop.addEventListener('click', (e) => {
if (e.target.classList.contains('up-icon')) {
console.log("up");
const reorderpop_item = e.target.parentElement.parentElement;
const prevItem = reorderpop_item.previousElementSibling;
console.log("reorderpop_item:",reorderpop_item);
console.log("prevItem:",prevItem);
if (prevItem) {
reorderpop.insertBefore(reorderpop_item, prevItem);
// Remove the "reorder_" prefix from the ID
const originalId = reorderpop_item.id;
console.log("originalId",originalId);
const idWithoutPrefix = originalId.replace("reorder_section_title_text_", "");
console.log("idWithoutPrefix",idWithoutPrefix);
// Get the corresponding element in the right list
const item_to_be_reorderd = document.getElementById('reorder_' +idWithoutPrefix);
console.log("item_to_be_reorderd",item_to_be_reorderd);
// Find the previous element in the right list to determine where to insert
const prevItemInRightSide = item_to_be_reorderd.previousElementSibling;
console.log("prevItemInRightSide",prevItemInRightSide);
// Move the element to the right list
addsection.insertBefore(item_to_be_reorderd, prevItemInRightSide);
}
} else if (e.target.classList.contains('down-icon')) {
console.log("down");
const reorderpop_item = e.target.parentElement.parentElement;
const nextItem = reorderpop_item.nextElementSibling;
console.log("reorderpop_item:",reorderpop_item);
console.log("nextItem:",nextItem);
if (nextItem) {
reorderpop.insertBefore(nextItem, reorderpop_item);
// Add code to update the corresponding element in the right list if needed
const originalId = reorderpop_item.id;
console.log("originalId",originalId);
const idWithoutPrefix = originalId.replace("reorder_section_title_text_", "");
console.log("idWithoutPrefix",idWithoutPrefix);
const item_to_be_reorderd = document.getElementById('reorder_' + idWithoutPrefix);
console.log("item_to_be_reorderd",item_to_be_reorderd);
const nextItemInRightSide = item_to_be_reorderd.nextElementSibling;
console.log("nextItemInRightSide",nextItemInRightSide);
addsection.insertBefore(nextItemInRightSide,item_to_be_reorderd);
}
}
});
}
// document.getElementById('showPopupButton').addEventListener('click', executeScriptAndDisplayOutput);
// document.getElementById('1').addEventListener('click', function() {
// const popup = document.getElementById('popup');
// popup.style.display = 'none';
// });
// function Sample()
// {
// alert('hi');
// }
</script>
</body> </body>
</html> </html>

22
savexml.js
View File

@ -8,7 +8,7 @@ require('dotenv').config();
//Get the value from .env //Get the value from .env
const isEncrypted = process.env.ENCRYPTED; const isEncrypted = process.env.ENCRYPTED;
function saveXmlToFile(xmlData, filePath) { function saveXmlToFile(xmlData, filePath,reorder=false) {
console.log(filePath); console.log(filePath);
// Check if the file path is provided // Check if the file path is provided
if (!filePath) { if (!filePath) {
@ -31,13 +31,16 @@ function saveXmlToFile(xmlData, filePath) {
} }
}); });
localStorage.clear(); localStorage.clear();
if(reorder){
// window.location.href = 'dashboard.html'; window.location.reload();
}else{
window.location.href = 'dashboard.html';
}
} }
function savexml(UserFilename) { function savexml(UserFilename,reorder=false) {
// Get the XML string from localStorage // Get the XML string from localStorage
var xmlString = localStorage.getItem("xml"); var xmlString = localStorage.getItem("xml");
@ -67,8 +70,13 @@ function savexml(UserFilename) {
const xmlfilePath = `${xmlPath}` + xmlfilename; const xmlfilePath = `${xmlPath}` + xmlfilename;
// const jsonfilePath = process.cwd() + '/xml/' + jsonfilename; // const jsonfilePath = process.cwd() + '/xml/' + jsonfilename;
// Call the function to save the XML file if(reorder){
saveXmlToFile(enc, xmlfilePath); saveXmlToFile(enc, xmlfilePath,reorder=true);
}else{
// Call the function to save the XML file
saveXmlToFile(enc, xmlfilePath);
}
} }