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

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)