Added export popup (only UI)
This commit is contained in:
l_samenv
94
client/components/export_popup/export_popup.css
Normal file
94
client/components/export_popup/export_popup.css
Normal file
@ -0,0 +1,94 @@
|
||||
#export-popup{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 53;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
margin-top: 30px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
#export-popup-container{
|
||||
width: 380px;
|
||||
height: 100%;
|
||||
border: 2px solid black;
|
||||
margin: auto;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#export-popup-header{
|
||||
height: 40px;
|
||||
display: flex;
|
||||
border-bottom: 2px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#export-popup-header span{
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#export-popup-header img{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: auto;
|
||||
margin-right: 10px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#export-popup-content{
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.export-section-container{
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid gray;
|
||||
box-sizing: border-box;
|
||||
row-gap: 5px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#texport-times-section{
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.time-label{
|
||||
float: left; /* Used to be able to set a width*/
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
#export-curves-section{
|
||||
height: calc(100% - 150px);
|
||||
}
|
||||
|
||||
#export-button-container{
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.export-button{
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.export-curves-container{
|
||||
padding: 5px;
|
||||
border: 2px solid gray;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
189
client/components/export_popup/export_popup.js
Normal file
189
client/components/export_popup/export_popup.js
Normal file
@ -0,0 +1,189 @@
|
||||
class ExportPopup extends HTMLElement{
|
||||
|
||||
constructor(exportCallback){
|
||||
super();
|
||||
this.exportCallback = exportCallback;
|
||||
}
|
||||
|
||||
updateValuesOnOpen(blocks, startDateTimeMs, endDateTimeMs){
|
||||
|
||||
this.setDateTimeInputs(startDateTimeMs, "start");
|
||||
this.setDateTimeInputs(endDateTimeMs, "end");
|
||||
|
||||
let defaultBinningValue = Math.ceil(((endDateTimeMs - startDateTimeMs)/1000)/1000);
|
||||
let binningInput = this.getElementsByClassName("binning-input")[0];
|
||||
binningInput.value = defaultBinningValue;
|
||||
|
||||
this.getElementsByClassName("export-select-all-checkbox")[0].checked = false;
|
||||
|
||||
let exportCurvesContainer = this.getElementsByClassName("export-curves-container")[0]
|
||||
exportCurvesContainer.innerHTML = ""
|
||||
for (let block of blocks){
|
||||
for(let curve of block["curves"]){
|
||||
let exportCurveContainer = document.createElement("div");
|
||||
exportCurveContainer.classList.add("export-curve-container");
|
||||
let exportCheckboxCurve = document.createElement("input");
|
||||
exportCheckboxCurve.type = "checkbox"
|
||||
exportCheckboxCurve.value = curve["name"]
|
||||
let exportCurveLabel = document.createElement("span");
|
||||
exportCurveLabel.innerHTML = curve["label"]
|
||||
exportCurveContainer.appendChild(exportCheckboxCurve);
|
||||
exportCurveContainer.appendChild(exportCurveLabel);
|
||||
exportCurvesContainer.appendChild(exportCurveContainer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toggleAllCurves(){
|
||||
let exportCurvesContainer = this.getElementsByClassName("export-curves-container")[0];
|
||||
let checked = this.getElementsByClassName("export-select-all-checkbox")[0].checked;
|
||||
for(let node of exportCurvesContainer.childNodes){
|
||||
node.getElementsByTagName("input")[0].checked = checked;
|
||||
}
|
||||
}
|
||||
|
||||
setDateTimeInputs(timestamp, type){
|
||||
let date = new Date(timestamp)
|
||||
let truncatedDate = new Date(timestamp);
|
||||
truncatedDate.setHours(0,0,0,0);
|
||||
let time = new Date(date - truncatedDate);
|
||||
time.setMilliseconds(0);
|
||||
|
||||
let exportTypeDate = this.getElementsByClassName(`export-${type}-date`)[0];
|
||||
exportTypeDate.valueAsNumber = timestamp;
|
||||
let exportTypeTime = this.getElementsByClassName(`export-${type}-time`)[0];
|
||||
exportTypeTime.valueAsDate = time;
|
||||
|
||||
}
|
||||
|
||||
getDateTimeTimestampMsInput(type){
|
||||
let dateInputValue = this.getElementsByClassName(`export-${type}-date`)[0].valueAsDate;
|
||||
dateInputValue.setHours(0,0,0,0);
|
||||
let timeInputValue = this.getElementsByClassName(`export-${type}-time`)[0].valueAsNumber;
|
||||
|
||||
return dateInputValue.getTime() + timeInputValue;
|
||||
}
|
||||
|
||||
getSelectedVariables(){
|
||||
let selectedVariables = []
|
||||
let exportCurvesContainer = this.getElementsByClassName("export-curves-container")[0];
|
||||
|
||||
for(let node of exportCurvesContainer.childNodes){
|
||||
let input = node.getElementsByTagName("input")[0]
|
||||
if(input.checked){
|
||||
selectedVariables.push(input.value)
|
||||
}
|
||||
}
|
||||
return selectedVariables;
|
||||
}
|
||||
|
||||
|
||||
doExportCallback(){
|
||||
|
||||
let startDateTimeMs = this.getDateTimeTimestampMsInput("start");
|
||||
let endDateTimeMs = this.getDateTimeTimestampMsInput("end");
|
||||
|
||||
if (endDateTimeMs <= startDateTimeMs){
|
||||
alertify.error("End date is below or equal to start date.");
|
||||
return
|
||||
}
|
||||
|
||||
let binningCheckbox = this.getElementsByClassName("binning-checkbox")[0];
|
||||
let binningValue = null;
|
||||
if(binningCheckbox.checked){
|
||||
let binningInput = this.getElementsByClassName("binning-input")[0];
|
||||
binningValue = binningInput.value;
|
||||
if (binningValue <= 0){
|
||||
alertify.error("Binning is negative or 0");
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
let selectedVariables = this.getSelectedVariables();
|
||||
|
||||
if(selectedVariables.length == 0){
|
||||
alertify.error("No curves selected");
|
||||
}
|
||||
else
|
||||
{
|
||||
this.hide();
|
||||
this.exportCallback(selectedVariables, startDateTimeMs, endDateTimeMs, binningValue);
|
||||
}
|
||||
}
|
||||
|
||||
hide(){
|
||||
this.style.visibility = "hidden";
|
||||
}
|
||||
|
||||
show(variables, startTime, endTime){
|
||||
this.style.visibility = "visible";
|
||||
this.updateValuesOnOpen(variables, startTime, endTime);
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
this.render();
|
||||
this.hide();
|
||||
this.getElementsByTagName("img")[0].onclick = () => {this.hide();};
|
||||
this.getElementsByClassName("export-select-all-checkbox")[0].onclick = () => {this.toggleAllCurves();};
|
||||
this.getElementsByClassName("export-button")[0].onclick = () => {this.doExportCallback();};
|
||||
|
||||
}
|
||||
|
||||
render(){
|
||||
this.innerHTML = `
|
||||
<link rel="stylesheet" href="components/export_popup/export_popup.css"/>
|
||||
<div id="export-popup">
|
||||
<div id="export-popup-container">
|
||||
|
||||
<div id="export-popup-header">
|
||||
<span>Export</span>
|
||||
<img src="res/close.png"/>
|
||||
</div>
|
||||
|
||||
<div id="export-popup-content">
|
||||
<div class="export-section-container" id="export-times-section">
|
||||
<div class="time-container">
|
||||
<span class="time-label">Start : </span>
|
||||
<input type=date class="export-start-date">
|
||||
<input type=time class="export-start-time" step="1">
|
||||
</div>
|
||||
|
||||
<div class="time-container">
|
||||
<span class="time-label">End : </span>
|
||||
<input type=date class="export-end-date">
|
||||
<input type=time class="export-end-time" step="1">
|
||||
</div>
|
||||
|
||||
<div class="binning-container">
|
||||
<input type=checkbox class="binning-checkbox">
|
||||
<span class="binning-label">Binning (s) : </span>
|
||||
<input type=number class="binning-input" min=1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="export-button-container">
|
||||
<button class="export-button">Export</button>
|
||||
</div>
|
||||
|
||||
<div class="export-section-container" id="export-curves-section">
|
||||
|
||||
<span>Curves to export</span>
|
||||
<div>
|
||||
<input type=checkbox class="export-select-all-checkbox">
|
||||
<span>Select all curves</span>
|
||||
</div>
|
||||
<div class="export-curves-container">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("sea-export-popup", ExportPopup);
|
||||
Reference in New Issue
Block a user