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

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)