56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
class DateIndicator extends HTMLElement{
|
|
constructor(timestamp){
|
|
super();
|
|
this.formattedDate = this.timestampToString(timestamp);
|
|
}
|
|
|
|
dayNumberToName(dayNumber){
|
|
switch(dayNumber){
|
|
case 0:
|
|
return "Sun";
|
|
case 1:
|
|
return "Mon";
|
|
case 2:
|
|
return "Tue";
|
|
case 3:
|
|
return "Wed";
|
|
case 4:
|
|
return "Thu";
|
|
case 5:
|
|
return "Fri";
|
|
case 6:
|
|
return "Sat";
|
|
}
|
|
}
|
|
|
|
timestampToString(timestamp){
|
|
let date = new Date(timestamp);
|
|
let dayName = this.dayNumberToName(date.getDay());
|
|
let day = date.getDate();
|
|
let month = date.getMonth() + 1; //getMonth returns number between 0 and 1
|
|
let year = date.getFullYear();
|
|
|
|
return dayName + ", " + day.toString().padStart(2, "0") + "/" + month.toString().padStart(2, "0") + "/" + year ;
|
|
}
|
|
|
|
update(timestamp){
|
|
this.formattedDate = this.timestampToString(timestamp);
|
|
this.getElementsByClassName("date-indicator")[0].textContent = this.formattedDate;
|
|
}
|
|
|
|
|
|
connectedCallback(){
|
|
this.render();
|
|
}
|
|
|
|
render(){
|
|
this.innerHTML = `
|
|
<link rel="stylesheet" href="components/states_indicator/dates/dates.css">
|
|
<div class="date-indicator">
|
|
${this.formattedDate}
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
customElements.define("sea-date-indicator", DateIndicator) |