linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added date selector popup (only go to now working)

Browse Source
This commit is contained in:
l_samenv
2024-08-12 13:05:41 +02:00
parent faf4abced8
commit 81d9d233a8
8 changed files with 204 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/SEAWebClient.html
View File

@ -12,6 +12,7 @@
<title>SEAWebClient</title>
<!-- Components -->
<script src="components/dates_popup/dates_popup.js"></script>
<script src="components/divider/horizontal_divider.js"></script>
<script src="components/help_entry/help_entry.js"></script>
<script src="components/help_popup/help_popup.js"></script>

62
client/components/dates_popup/dates_popup.css Normal file
View File

@ -0,0 +1,62 @@
#dates-popup{
width: 100%;
z-index: 52;
position: absolute;
top: 0;
left : 0;
box-sizing: border-box;
}
#dates-popup-container{
width: 250px;
height: fit-content;
border: 2px solid black;
margin: auto;
background-color: white;
}
#dates-popup-header{
height: 40px;
display: flex;
border-bottom: 2px solid black;
box-sizing: border-box;
}
#dates-popup-header span{
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
}
#dates-popup-header img{
width: 15px;
height: 15px;
margin-left: auto;
margin-right: 10px;
margin-top: auto;
margin-bottom: auto;
cursor: pointer;
}
#dates-popup-content{
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
}
.jump-container{
padding: 10px;
border-radius: 10px;
border: 2px solid gray;
box-sizing: border-box;
row-gap: 5px;
margin-top: 10px;
}
.jump-container div:not(:first-child){
margin-top: 10px;
}
.jump-button-all, .jump-button-end{
width: 200px;
}

108
client/components/dates_popup/dates_popup.js Normal file
View File

@ -0,0 +1,108 @@
class DatesPopup extends HTMLElement{
static END = 0;
static ALL = 1;
static DAY = new Date(24*60*60*1000);
constructor(goToNowCallback, jumpCallback){
super();
this.goToNowCallback = goToNowCallback;
this.jumpCallback = jumpCallback;
}
getDateTimeInput(){
let dateInputValue = this.getElementsByClassName("input-date")[0].valueAsDate;
dateInputValue.setHours(0,0,0,0);
let formattedHour = this.getElementsByClassName("input-time")[0].value;
let timeMs = this.convertTimeStringToTimestamp(formattedHour);
return [dateInputValue.getTime(), timeMs];
}
doJumpAllCallback(){
let dateTimeInput = this.getDateTimeInput();
this.hide();
this.jumpCallback(dateTimeInput[0], dateTimeInput[1], DatesPopup.ALL);
}
doJumpEndCallback(){
let dateTimeInput = this.getDateTimeInput();
this.hide();
this.jumpCallback(dateTimeInput[0], dateTimeInput[1], DatesPopup.END);
}
convertTimeStringToTimestamp(formattedTime){
let pieces = formattedTime.split(":");
return Number(pieces[0])*60*60*1000 + Number(pieces[1])*60*1000;
}
doGoToNowCallback(){
this.hide();
console.log(this);
this.goToNowCallback();
}
hide(){
this.style.visibility = "hidden";
}
show(){
this.style.visibility = "visible";
}
setInitialDate(){
let currentDate = new Date();
let dateInput = this.getElementsByClassName("input-date")[0];
let dateDayBefore = new Date(currentDate - DatesPopup.DAY);
dateInput.valueAsDate = dateDayBefore;
}
connectedCallback(){
this.render();
this.setInitialDate();
this.hide();
this.getElementsByTagName("img")[0].onclick = () => {this.hide();};
this.getElementsByClassName("go-to-now-button")[0].onclick = () => {this.doGoToNowCallback();};
this.getElementsByClassName("jump-button-end")[0].onclick = () => {this.doJumpEndCallback();};
this.getElementsByClassName("jump-button-all")[0].onclick = () => {this.doJumpAllCallback();};
}
render(){
this.innerHTML = `
<link rel="stylesheet" href="components/dates_popup/dates_popup.css"/>
<div id="dates-popup">
<div id="dates-popup-container">
<div id="dates-popup-header">
<span>Select the date to jump to</span>
<img src="res/close.png"/>
</div>
<div id="dates-popup-content">
<div class="jump-container">
<button class="go-to-now-button">Go to now</button>
</div>
<div class="jump-container">
<div class="datetime-container">
<input type="date" class="input-date">
<input type="time" class="input-time" value="00:00">
</div>
<div>
<button class="jump-button-end">Curves at the end of the day</button>
<!-- <span>Curves at the end of the day</span> -->
</div>
<div>
<button class="jump-button-all">All curves</button>
<!-- <span>All curves</span> -->
</div>
</div>
</div>
</div>
</div>
`;
}
}
customElements.define("sea-dates-popup", DatesPopup);

2
client/components/menu_popup/menu_popup.css
View File

@ -3,7 +3,7 @@
height: fit-content;
background-color: white;
position: absolute;
z-index: 1;
z-index: 51;
border: 2px solid black;
}

4
client/components/states_indicator/dates/dates.css
View File

@ -1,4 +1,4 @@
.dates{
.date-indicator{
height: 30px;
/* For text alignement */
@ -6,7 +6,7 @@
vertical-align: middle;
line-height: 30px;
cursor: default;
cursor: pointer;
color: white;
}

20
client/components/states_indicator/dates/dates.js
View File

@ -1,7 +1,8 @@
class DatesIndicator extends HTMLElement{
constructor(timestamp){
class DateIndicator extends HTMLElement{
constructor(timestamp, goToNowCallback, jumpCallback){
super();
this.formattedDate = this.timestampToString(timestamp);
this.datePopup = new DatesPopup(goToNowCallback, jumpCallback);
}
dayNumberToName(dayNumber){
@ -35,21 +36,28 @@ class DatesIndicator extends HTMLElement{
update(timestamp){
this.formattedDate = this.timestampToString(timestamp);
this.render()
this.getElementsByClassName("date-indicator")[0].textContent = this.formattedDate;
}
showPopup(){
console.log("clicked");
this.datePopup.show();
}
connectedCallback(){
this.render();
this.getElementsByClassName("date-indicator")[0].onclick = () => {this.showPopup();};
}
render(){
this.innerHTML = `
<link rel="stylesheet" href="components/states_indicator/dates/dates.css">
<div class="dates">
<div class="date-indicator">
${this.formattedDate}
</div>
`
`
this.appendChild(this.datePopup);
}
}
customElements.define("sea-dates-indicator", DatesIndicator)
customElements.define("sea-date-indicator", DateIndicator)

27
client/jsFiles/SEAWebClientGraphics.js
View File

@ -197,9 +197,16 @@ let dummyCallback = function(){
console.log("Dummy callback called");
}
// Defining keys for global controls
function dummyJumpCallback(dateTimestampMs, timeValueMs, mode){
console.log("Date is : ");
console.log(dateTimestampMs);
console.log("Time is : ");
console.log(timeValueMs);
console.log("Mode is :");
console.log(mode);
}
let goToNowKey = "go-to-now-control";
// Defining keys for global controls
let xyKey = "xy-control";
@ -211,16 +218,10 @@ let globalControls = (function (){
controlBar.id = "control_bar";
panel.appendChild(controlBar);
let goToNowControl = new Control("res/go_to_now_white.png", "res/go_to_now_blocked.png", "Go to now", graphs.gotoNow);
let xyControl = new Control("res/x_zoom_white.png", "res/y_zoom_white.png", "Time<->Y zoom (one graph)", graphs.toggleZoomMode, graphs.toggleZoomMode);
controlBar.appendChild(goToNowControl)
goToNowControl.changeToAlt();
controlBar.appendChild(new VerticalDivider());
controlBar.appendChild(xyControl);
controlsMap[goToNowKey] = goToNowControl;
controlsMap[xyKey] = xyControl;
}
@ -242,7 +243,7 @@ let globalIndicators = (function (){
function loadIndicators(panel){
let leftDate = Date.now() - 30*60*1000;
let datesIndicator = new DatesIndicator(leftDate);
let datesIndicator = new DateIndicator(leftDate, () => {graphs.gotoNow();}, dummyJumpCallback);
panel.appendChild(datesIndicator);
datesIndicator.style.marginLeft = "auto";
@ -265,7 +266,7 @@ let globalIndicators = (function (){
function loadGraphicsMenu(panel){
let menuGraphicsPopup = new MenuPopup();
let removeCursorHelpEntry = new HelpEntry("How to remove the cursor", "You cam double click/tap on any graph.");
let removeCursorHelpEntry = new HelpEntry("How to remove the cursor", "You can double click/tap on any graph.");
menuGraphicsPopup.addEntry(removeCursorHelpEntry);
let graphicsMenuControl = new Control("res/menu_white.png", "res/menu_white.png", "Menu", () => {menuGraphicsPopup.show()});
@ -402,10 +403,12 @@ let graphs = (function (){
}
if (liveMode && cursorLinePos === null)
// gotoNowElm.innerHTML = '';
globalControls.getControlsMap()[goToNowKey].changeToAlt();
// globalControls.getControlsMap()[goToNowKey].changeToAlt();
console.log("Need to change to nothing");
else
// gotoNowElm.innerHTML = 'go to now';
globalControls.getControlsMap()[goToNowKey].changeToMain();
// globalControls.getControlsMap()[goToNowKey].changeToMain();
console.log("Need to change to seen");
}
/**

1
seaweb.py
View File

@ -149,6 +149,7 @@ def subdir_test_file(file):
resp = flask.send_file("client/test/"+file, mimetype=guess_mimetype(file))
return resp
@app.route('/components/dates_popup/<file>')
@app.route('/components/menu_popup/<file>')
@app.route('/components/help_popup/<file>')
@app.route('/components/help_entry/<file>')