I am trying to creating a dashboard with panels of different sizes and re-arrange able according to the users will also the panel have different formData inside the same panel Form.
Expected : to get the formData from the first panelform and i have stored it in a hidden input element inside the first formData and likewise for n number of panel i want to achieve this, then for saving the panels i want to iterate over the each panels and get the formData that is stored in each panels.
Dashboard 1
- panel 1 {“type”:”1″,”chartType”:”bar”,”panellogsource”:”19″,”fieldSelected”:[“dst_as”,”dst_mask”],”timeWindow”:”Last 15 Minutes”}
- panel 2 {“type”:”2″,”aggregateType”:”count”,”panellogsource”:”19″,”fieldSelected”:[“dst_port”,”dst_tos”],”timeWindow”:”Last 15 Minutes”}
Actual : i am able to set the data for the first panel but after populating the second panel the form is retrieving the previous(first) panel data. i want to separate the panels formData for each panel.
Dashboard 1
- panel 1 {“type”:”1″,”chartType”:”bar”,”panellogsource”:”19″,”fieldSelected”:[“dst_as”,”dst_mask”],”timeWindow”:”Last 15 Minutes”}
- panel 2 {“type”:”1″,”chartType”:”bar”,”panellogsource”:”19″,”fieldSelected”:[“dst_as”,”dst_mask”],”timeWindow”:”Last 15 Minutes”} (same content for the second panel)
<div class="panel-container col-lg-${layoutSize}">
<div class="card">
<div class="panel card-body ibox">
<div class="panel-heading card-title ibox-title">
<h5>Drag&Drop ${layoutSize}</h5>
<div class="ibox-tools d-flex">
<a class="collapse-link" onclick="return collapseIbox(event, this);">
<i class="fa fa-chevron-up"></i>
</a>
<div class="dropdown options ms-auto">
<a class="dropdown-toggle" data-bs-toggle="dropdown">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="#" onclick="editPanel()" class="dropdown-item"
>Edit Content</a
>
</li>
<li>
<a href="#" class="dropdown-item">
Size:
<button
class="btn btn-l btn-primary"
onclick="changeSize(this, 'lg');"
title="Full Row"
>
<i class="fa fa-square-o fs-6"></i>
</button>
<button
class="btn btn-m btn-primary"
onclick="changeSize(this, 'md');"
title="2 Column Row"
>
<i class="fa fa-square-o fs-5"></i>
</button>
<button
class="btn btn-s btn-primary"
onclick="changeSize(this, 'sm');"
title="3 Column Row "
>
<i class="fa fa-square-o fs-4"></i>
</button>
<button
class="btn btn-xs btn-primary"
onclick="changeSize(this, 'xs');"
title="4 Column Row"
>
<i class="fa fa-square-o fs-3"></i>
</button>
</a>
</li>
</ul>
</div>
<a class="close-link" onclick="return closeIbox(event, this);">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<!-- add new content to the panel -->
<button type="button" class="btn btn-light ms-2" onclick="editPanel()">
Edit Panel
</button>
</div>
</div>
</div>
</div>
<!-- Panel Loading Modal -->
<div class="modal fade" id="panelCreateModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Panel Data</h5>
<button
id="icon-modal-close"
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
>
<i class="bx bx-x text-white font"></i>
</button>
</div>
<div class="modal-body">
<%@ include file="../dashboard/panel_create.jsp"%>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
panel_create.jsp
<div class="panel">
<form class="row g-3" id="PanelCreationForm" onsubmit="return false;">
<!-- TYPE-> CHART,AGGREGATION -->
<div class="col-md-6">
<label for="type" class="form-label">Type<span style="color: red;">*</span></label> <select name="type" id="type" class="form-control" required
onchange="toggleType(this.value)">
<option value="select" selected disabled>Select</option>
<option value="1" ${panel ne null and panel.type eq '1' ? 'selected' : ''}>Chart</option>
<option value="2" ${panel ne null and panel.type eq '2' ? 'selected' : ''}>Aggregation</option>
</select>
</div>
<!-- CHART OPTION / AGGREGATE OPTION -->
<div class="col-md-6">
<label for="type" class="form-label">Chart / Aggregate<span style="color: red;">*</span></label><select name="chartType" id="chartType"
class="form-control" required>
<option value="select" selected disabled>Select Chart</option>
<c:forEach var="option" items="${chartOptions}">
<option value="${option.value}" <c:if test="${option.value == panel.typeData}">selected</c:if>>${option.displayText}</option>
</c:forEach>
</select> <select name="aggregateType" id="aggregateType" class="form-control" required>
<option value="select" selected disabled>Select Aggregate</option>
<c:forEach var="option" items="${aggregateOptions}">
<option value="${option.value}" <c:if test="${option.value == panel.typeData}">selected</c:if>>${option.displayText}</option>
</c:forEach>
</select>
</div>
<div class="col-md-2">
<!-- LogSource -->
<label for="logsource" class="form-label">Log Source<span style="color: red;">*</span></label> <select name="panellogsource" id="panellogsource"
class="form-control" required>
<option value="select" selected disabled>Select</option>
<c:forEach var="logSource" items="${LogSource.sources()}">
<option value="${logSource.logId}" <c:if test="${logSource.logId eq panel.logSource}">selected</c:if>>${logSource.name}</option>
</c:forEach>
</select>
</div>
<!-- FIELD -->
<div class="col-md-10">
<!-- Field Multi Select -->
<label class="form-label">Field<span style="color: red;">*</span></label>
<div id="fieldSelectDiv">
<select multiple name="fieldSelected" class="form-control form-control-cust" id="fieldSelect" required>
</select>
</div>
</div>
<div class="col-md-2">
<!-- Time Window -->
<button type="button" style="margin-left: 4px" data-popover-content="#pop-time-window-content" data-toggle="popover" tabindex="0"
class="btn btn-sm btn-light btn-icon-custom time-window-pop" id="wTimeWindowCalendar" title="Time Window">
<i class="bx bx-calendar font-20"></i>
</button>
<input style="min-width: 300px !important; max-width: 300px !important;" type="text" name="timeWindow" id="timeWindow"
class="form-control form-control-cust timeWindowInput" placeholder="Time Window" data-time-window="last-1-year"
value="${panel ne null ? panel.timeWindow: ''}" readonly>
<!-- Time Window End -->
</div>
<div class="col-md-12">
<!-- Panel Data type="hidden" -->
<input type="text" class="form-control" id="panelData" value=" ">
</div>
<div class="col-12" style="padding-top: 25px; display: flex; justify-content: center;">
<c:if test="${page eq 'new'}">
<button type="submit" onclick="javascript:addPanelData()" class="btn btn-light px-5" id="btnSubmit">Add</button>
</c:if>
<c:if test="${page eq 'edit'}">
<button type="submit" onclick="javascript:updatePanelData()" class="btn btn-light px-5" id="btnSubmit">Update</button>
</c:if>
</div>
</form>
</div>
js function to add the formData to each panel
function addPanelData() {
console.log("addPanelData");
// Iterate over each panel container
$('.panel').each(function(index) {
var formDataObject = {};
// Serialize the form data for the current panel
var formData = $(this).find('form').serializeArray();
console.log("formData: ", formData);
$.each(formData, function(i, field) {
if(field.name==='fieldSelected'){
if(!formDataObject[field.name]){
formDataObject[field.name]=[];
}
formDataObject[field.name].push(field.value);
}else{
formDataObject[field.name] = field.value;
}
});
console.log(`Form Data for Panel ${index}:`, formDataObject);
// Convert formDataObject to JSON string and store it in the hidden input field panelData
$(this).find('input[id="panelData"]').val(JSON.stringify(formDataObject));
$(this).find('form')[0].reset();
});
}