import { h } from "@stencil/core"; export class ListGroupNotification { constructor() { this.titleText = ""; this.isFlush = false; this.creationTime = undefined; this.postTime = undefined; this.shownTime = undefined; } setDisplayTime(seconds, minutes, hours, days) { if (seconds <= 60) { this.shownTime = `Just now`; } else if (minutes <= 60) { this.shownTime = `${minutes} min. ago`; } else if (hours <= 24) { this.shownTime = hours > 1 ? `${hours} hr. ago` : `${hours} hrs. ago`; } else if (days) { this.shownTime = hours < 48 ? `1 day ago` : `${days} days ago`; if (hours > 168) { this.shownTime = `${new Date().getDay()}.${new Date().getMonth()}.${new Date().getFullYear()}`; } } } stringToDate(dataString) { if (!dataString) return null; let dateParts = dataString.split("/"); if (dateParts[2]) { if (dateParts[2].split(" ")[1]) { let timeParts = dateParts[2].split(" ")[1].split(":"); dateParts[2] = dateParts[2].split(" ")[0]; return new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0], timeParts[0], timeParts[1], timeParts[2]); } } } getElapsedTime(time) { let date = this.stringToDate(time); if (date) { let miliseconds = Date.now() - date.getTime(); let seconds = Math.floor(miliseconds / 1000); let minutes = Math.floor(miliseconds / 60000); let hours = Math.floor(minutes / 60); let days = Math.floor(hours / 24); this.setDisplayTime(seconds, minutes, hours, days); } } setTimeInterval(time) { this.postTime = window.setInterval(() => { this.getElapsedTime(time); }, 1000); } ; componentWillLoad() { this.getElapsedTime(this.creationTime); this.setTimeInterval(this.creationTime); //if time update on refresh, delete this & clear interval const ifxListGroup = this.el.closest('ifx-list-group'); if (ifxListGroup.flush) { this.isFlush = true; } else this.isFlush = false; } disconnectedCallback() { window.clearInterval(this.postTime); } render() { return (h("div", { class: `list-group-notification ${this.isFlush ? 'flush' : ""}` }, h("div", { class: "heading__section" }, h("h6", { class: "heading__section-title" }, this.titleText), h("div", { class: "heading__section-time" }, this.shownTime)), h("div", { class: "description__section" }, h("slot", null)))); } static get is() { return "ifx-list-notification"; } static get encapsulation() { return "shadow"; } static get originalStyleUrls() { return { "$": ["list-group-notification.scss"] }; } static get styleUrls() { return { "$": ["list-group-notification.css"] }; } static get properties() { return { "titleText": { "type": "string", "mutable": false, "complexType": { "original": "string", "resolved": "string", "references": {} }, "required": false, "optional": false, "docs": { "tags": [], "text": "" }, "attribute": "title-text", "reflect": false, "defaultValue": "\"\"" }, "isFlush": { "type": "boolean", "mutable": false, "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "required": false, "optional": false, "docs": { "tags": [], "text": "" }, "attribute": "is-flush", "reflect": false, "defaultValue": "false" }, "creationTime": { "type": "any", "mutable": false, "complexType": { "original": "any", "resolved": "any", "references": {} }, "required": false, "optional": false, "docs": { "tags": [], "text": "" }, "attribute": "creation-time", "reflect": false } }; } static get states() { return { "postTime": {}, "shownTime": {} }; } static get elementRef() { return "el"; } } //# sourceMappingURL=list-group-notification.js.map