diff --git a/coffeeComponent.js b/coffeeComponent.js new file mode 100644 index 0000000..f38d1b7 --- /dev/null +++ b/coffeeComponent.js @@ -0,0 +1,85 @@ +export default class coffeeComponent { + + props = {} + + constructor(number) { + this.props.number = number; + } + + render() { + if (!this.element) { + var parser = new DOMParser(); + var doc = parser.parseFromString(this.renderString(), 'text/html'); + this.element = doc.body.firstChild; + } + return this.element; + } + + renderString() { + return ` +
+
+
+ +
+

Напиток №${this.props.number}

+ + + +
+ Сделайте напиток на + + + + +
+ +
+ Добавьте к напитку: + + + + +
+ +
+ + +
+ +
+
+ ` + } +} \ No newline at end of file diff --git a/coffeeList.js b/coffeeList.js new file mode 100644 index 0000000..edf137d --- /dev/null +++ b/coffeeList.js @@ -0,0 +1,40 @@ +import coffeeComponent from "./coffeeComponent.js"; + +export default class coffeeList { + _items = [] + _itemsNumbers = [] + _container + + constructor(container) { + this._container = container; + this.addItem(); + this.render(); + } + + addItem() { + this._items.push({id: this._items.length + 1, component: new coffeeComponent(this._items.length + 1)}) + this.render() + } + + removeItem(id) { + this._items.forEach((item, index) => { + if (item.id == id && index != 0) { + this._items.splice(index, 1); + } + }); + this.render() + } + + render() { + this._container.innerHTML = ''; + this._items.forEach(item => { + let node = item.component.render() + this._container.appendChild(node) + + this._container.querySelector(`#ButtonDelete${item.id}`).onclick = (e) => { + this.removeItem(item.id); + e.preventDefault(); + } + }); + } +} \ No newline at end of file diff --git a/index.html b/index.html index ddc8250..211fbff 100644 --- a/index.html +++ b/index.html @@ -3,67 +3,62 @@ Заказ кофе - + +
-
-

Напиток №1

- -
- Сделайте напиток на - - - - -
-
- Добавьте к напитку: - - - - -
-
-
- +
+
-
- + +
+ + +
+
+ + + - + + diff --git a/index.js b/index.js index e69de29..184a80b 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,85 @@ +import CoffeeList from "./coffeeList.js"; + +function readQueryData() { + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + const result = {} + for (let key of urlParams.keys()) { + let data = key.match(/\b([a-zA-Z]+)*(\d*\.?\d+)/); + if (!(data[2] in result)) { + result[data[2]] = {beverage: [""], milk: [""], options: [""], details: [""]}; + } + + result[data[2]][data[1]] = urlParams.getAll(data[0]); + if (data[1] === 'details') { + result[data[2]][data[1]] = [boldMD(urlParams.getAll(data[0])[0])]; + } + } + return result; +} + +function boldMD(str) { + const keywords = ["срочно", "побыстрее", "быстрее", "поскорее", "скорее", "очень нужно"]; + let clone = str + let lastI = 0; + + keywords.forEach(keyword => { + let implace = "" + + clone.slice(clone.toLowerCase().indexOf(keyword, lastI), clone.toLowerCase().indexOf(keyword, lastI) + keyword.length) + + ""; + if (clone.toLowerCase().indexOf(keyword, lastI) != -1) { + clone = clone.slice(0, clone.toLowerCase().indexOf(keyword, lastI)) + implace + + clone.slice(clone.toLowerCase().indexOf(keyword, lastI) + keyword.length); + lastI = clone.toLowerCase().indexOf(implace) + implace.length - 1; + } + + }); + + return clone; +} + +function generateTable(table, data) { + for (let element in data) { + let row = table.insertRow(); + for (let key in data[element]) { + let cell = row.insertCell(); + let text = data[element][key].join(', '); + cell.innerHTML = text; + } + } +} + +function checkoutButtonHandler(e) { + +} + +window.onload = function() { + const coffeeList = new CoffeeList(document.getElementById('CoffeeList')) + document.getElementById('AddButton').onclick = coffeeList.addItem.bind(coffeeList); + + let query = readQueryData(); + + if (Object.entries(query).length != 0) { + const responseModal = new bootstrap.Modal(document.getElementById('responseModal')) + generateTable(document.getElementById('responseTable'), query); + + document.getElementById('checkoutButton').onclick = (e) => { + e.preventDefault(); + let timeString = document.getElementById('inputTime').value + + let now = new Date(); + var datetime = new Date(now.getFullYear(), + now.getMonth(), now.getDate(), + timeString.substr(0, 2), timeString.substr(3, 2)); + if (datetime < new Date()) { + alert('Мы не умеем перемещаться во времени. Выберите время позже, чем текущее'); + } + else { + //document.getElementById("checkoutForm").submit(); + responseModal.hide() + } + } + + responseModal.show(); + } +}; \ No newline at end of file