136 lines
3.7 KiB
JavaScript
136 lines
3.7 KiB
JavaScript
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('rtime', (unixTimestamp) => ({
|
|
targetDate: new Date(unixTimestamp * 1000),
|
|
timeString: '',
|
|
timer: null,
|
|
interval: 1000,
|
|
|
|
colorClasses: {
|
|
green: 't-green',
|
|
yellow: 't-yellow',
|
|
orange: 't-orange',
|
|
red: 't-red'
|
|
},
|
|
|
|
currentColor: 'green',
|
|
|
|
get textColorClass() {
|
|
return this.colorClasses[this.currentColor];
|
|
},
|
|
|
|
init() {
|
|
this.updateTime();
|
|
this.timer = setInterval(() => this.updateTime(), this.interval);
|
|
|
|
this.$el.addEventListener('alpine:removing', () => {
|
|
if (this.interval) clearInterval(this.interval);
|
|
});
|
|
},
|
|
|
|
updateTime() {
|
|
const now = new Date();
|
|
const diffInSeconds = Math.floor((now - this.targetDate) / 1000);
|
|
const diffInMinutes = Math.floor(diffInSeconds / 60);
|
|
const diffInHours = Math.floor(diffInSeconds / 3600);
|
|
const diffInDays = Math.floor(diffInSeconds / 86400);
|
|
|
|
let newInterval = this.interval;
|
|
|
|
if (diffInSeconds < 60) {
|
|
this.timeString = 'a moment ago';
|
|
} else if (diffInMinutes < 60) {
|
|
this.timeString = `${diffInMinutes} m ago`;
|
|
newInterval = 10000;
|
|
} else if (diffInHours < 24) {
|
|
this.timeString = `${diffInHours} h ago`;
|
|
newInterval = 60000;
|
|
} else {
|
|
this.timeString = `${diffInDays} d ago`;
|
|
clearInterval(this.timer);
|
|
}
|
|
|
|
if (diffInMinutes <= 15) {
|
|
this.currentColor = 'green';
|
|
} else if (diffInHours < 1) {
|
|
this.currentColor = 'yellow';
|
|
} else if (diffInDays < 1) {
|
|
this.currentColor = 'orange';
|
|
} else {
|
|
this.currentColor = 'red';
|
|
}
|
|
|
|
if (this.interval != newInterval) {
|
|
clearInterval(this.timer)
|
|
this.timer = setInterval(() => this.updateTime(), newInterval);
|
|
}
|
|
},
|
|
}));
|
|
|
|
Alpine.data('steam_rtime', (unixTimestamp) => ({
|
|
targetDate: new Date(unixTimestamp * 1000),
|
|
timeString: '',
|
|
timer: null,
|
|
interval: 1000,
|
|
|
|
colorClasses: {
|
|
green: 't-green',
|
|
yellow: 't-yellow',
|
|
orange: 't-orange',
|
|
red: 't-red'
|
|
},
|
|
|
|
currentColor: 'green',
|
|
|
|
get textColorClass() {
|
|
return this.colorClasses[this.currentColor];
|
|
},
|
|
|
|
init() {
|
|
this.updateTime();
|
|
this.timer = setInterval(() => this.updateTime(), this.interval);
|
|
|
|
this.$el.addEventListener('alpine:removing', () => {
|
|
if (this.interval) clearInterval(this.interval);
|
|
});
|
|
},
|
|
|
|
updateTime() {
|
|
const now = new Date();
|
|
const diffInMinutes = Math.floor((now - this.targetDate) / 60000);
|
|
const diffInHours = Math.floor(diffInMinutes / 60);
|
|
const diffInDays = Math.floor(diffInHours / 24);
|
|
const diffInMonths = Math.floor(diffInDays / 30);
|
|
|
|
let newInterval = this.interval;
|
|
|
|
if (diffInMinutes < 60) {
|
|
this.timeString = `${diffInMinutes} m ago`;
|
|
newInterval = 10000;
|
|
} else if (diffInHours < 24) {
|
|
this.timeString = `${diffInHours} h ago`;
|
|
newInterval = 60000;
|
|
} else if (diffInDays < 30) {
|
|
this.timeString = `${diffInDays} d ago`;
|
|
clearInterval(this.timer);
|
|
} else {
|
|
this.timeString = `${diffInMonths} mth ago`;
|
|
clearInterval(this.timer);
|
|
}
|
|
|
|
if (diffInHours < 12) {
|
|
this.currentColor = 'green';
|
|
} else if (diffInDays < 1) {
|
|
this.currentColor = 'yellow';
|
|
} else if (diffInMonths < 6) {
|
|
this.currentColor = 'orange'
|
|
} else {
|
|
this.currentColor = 'red';
|
|
}
|
|
|
|
if (this.interval != newInterval) {
|
|
clearInterval(this.timer)
|
|
this.timer = setInterval(() => this.updateTime(), newInterval);
|
|
}
|
|
},
|
|
}));
|
|
}); |