diff --git a/04-oop-basic-intro-to-dom/1-column-chart/index.js b/04-oop-basic-intro-to-dom/1-column-chart/index.js
index 3e4cfa2..1e2c5c4 100644
--- a/04-oop-basic-intro-to-dom/1-column-chart/index.js
+++ b/04-oop-basic-intro-to-dom/1-column-chart/index.js
@@ -6,7 +6,7 @@ export default class ColumnChart {
this.label = obj?.label
this.value = obj?.hasOwnProperty('formatHeading') ? obj.formatHeading(obj.value) : obj?.value
this.link = obj?.link
- this.element = this.setElement()
+ this.element = this.createElement()
}
setLink() {
@@ -16,7 +16,7 @@ export default class ColumnChart {
return ''
}
- setElement() {
+ createElement() {
const currentElement = document.createElement('div')
currentElement.innerHTML = `
@@ -56,7 +56,7 @@ export default class ColumnChart {
update(data) {
this.data = data
- this.element.innerHTML = this.setElement()
+ this.element.innerHTML = this.createElement()
}
remove() {
diff --git a/05-dom-document-loading/1-notification/index.js b/05-dom-document-loading/1-notification/index.js
index 1f0c2db..f7ed863 100644
--- a/05-dom-document-loading/1-notification/index.js
+++ b/05-dom-document-loading/1-notification/index.js
@@ -1,3 +1,54 @@
export default class NotificationMessage {
+ element
+ static lastShownElement
+
+ constructor(msg = '', options = {}){
+ this.msg = msg
+ const {
+ duration = 2000,
+ type = 'success'
+ } = options
+ this.duration = duration
+ this.type = type
+ this.element = this.createMessage()
+ }
+
+ createMessage() {
+ const msgElement = document.createElement('div')
+ msgElement.innerHTML = `
+
+ `
+ return msgElement.firstElementChild
+ }
+
+ show(targetElement = document.body) {
+ targetElement.append(this.element)
+
+ if (NotificationMessage.lastShownElement) {
+ NotificationMessage.lastShownElement.destroy()
+ }
+
+ NotificationMessage.lastShownElement = this
+
+ this.timerId = setTimeout(() => this.destroy(), this.duration)
+ }
+
+ destroy() {
+ clearTimeout(this.timerId)
+ this.remove()
+ }
+
+ remove() {
+ this.element.remove()
+ }
+
}
diff --git a/05-dom-document-loading/2-sortable-table-v1/index.js b/05-dom-document-loading/2-sortable-table-v1/index.js
index d40b94b..84f08f6 100644
--- a/05-dom-document-loading/2-sortable-table-v1/index.js
+++ b/05-dom-document-loading/2-sortable-table-v1/index.js
@@ -1,6 +1,108 @@
export default class SortableTable {
+
+ element
+ subElements = {}
+
constructor(headerConfig = [], data = []) {
+ this.headerConfig = headerConfig
+ this.data = data
+ this.element = this.createElement()
+ this.selectSubElements()
+ }
+
+ createElement() {
+ const element = document.createElement('div')
+ element.innerHTML = `
+
+ `
+ element.firstElementChild.append(this.createTable())
+ return element.firstElementChild
+ }
+
+ createTable() {
+ const elementTable = document.createElement('div')
+ elementTable.innerHTML = `
+
+ `
+ elementTable.firstElementChild.append(this.createHeader())
+ elementTable.firstElementChild.append(this.createBody())
+
+ return elementTable.firstElementChild
+ }
+
+ createHeader() {
+ let htmlCode = ``
+ const elementHeader = document.createElement('div')
+ elementHeader.innerHTML = `
+
+ `
+
+ this.headerConfig.forEach(el => {
+ htmlCode += `
+
+ ${el.title}
+
+ `
+ })
+ elementHeader.firstElementChild.innerHTML = htmlCode
+ return elementHeader.firstElementChild
+ }
+
+ createBody(data = this.data) {
+ let htmlCode = ``
+ const elementBody = document.createElement('div')
+ elementBody.innerHTML = `
+
+ `
+
+ data.forEach(el => {
+ htmlCode += `
`
+ this.headerConfig.forEach(header => {
+ if (header.template) {
+ htmlCode += header.template(el[header.id])
+ } else {
+ htmlCode += `${el[header.id]}
`
+ }
+ })
+ htmlCode += ``
+ })
+
+ elementBody.firstElementChild.innerHTML = htmlCode
+ return elementBody.firstElementChild
+ }
+
+ sort(fieldValue, orderValue) {
+ const order = orderValue == 'asc' ? 1 : -1;
+
+ const sortedData = [...this.data].sort((a, b) => {
+ if (typeof a[fieldValue] === 'number') {
+ return order * (a[fieldValue] - b[fieldValue]);
+ } else {
+ return order * a[fieldValue].localeCompare(b[fieldValue], ['ru', 'en'])
+ }
+ });
+
+ this.data = sortedData;
+
+ const currentBody = this.element.querySelector('[data-element="body"]')
+ currentBody.remove()
+
+ const newBody = this.createBody(sortedData)
+
+ const table = this.element.querySelector('[class="sortable-table"]')
+ table.append(newBody)
+
+ this.selectSubElements()
+ }
+
+ destroy() {
+ this.element.remove()
+ }
+ selectSubElements() {
+ this.element.querySelectorAll('[data-element]').forEach(element => {
+ this.subElements[element.dataset.element] = element;
+ });
}
}