Оплачко Дмитрий

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 `
+            <fieldset class="beverage card mb-3 mx-auto" style="max-width:36rem;" id="Beverage${this.props.number}">
+            <div class="card body p-3">
+            <div class="position-absolute" style="right:0; top:0;">
+            <button class="btn btn-close" id="ButtonDelete${this.props.number}"></button>
+            </div>
+            <h4 class="beverage-count text-center">Напиток №${this.props.number}</h4>
+
+            <label class="field mb-3 form-label">
+            <span class="label-text">Я буду</span>
+            <select class="form-select" name="beverage${this.props.number}">
+                <option value="espresso">Эспрессо</option>
+                <option value="capuccino" selected>Капучино</option>
+                <option value="cacao">Какао</option>
+            </select>
+            </label>
+
+            <div class="field mb-3">
+            <span class="checkbox-label">Сделайте напиток на</span>
+            <label class="checkbox-field form-check">
+                <input class="form-check-input" type="radio" name="milk${this.props.number}" value="usual" checked />
+                <span>обычном молоке</span>
+            </label>
+            <label class="checkbox-field form-check">
+                <input class="form-check-input" type="radio" name="milk${this.props.number}" value="no-fat" />
+                <span>обезжиренном молоке</span>
+            </label>
+            <label class="checkbox-field form-check">
+                <input class="form-check-input" type="radio" name="milk${this.props.number}" value="soy" />
+                <span>соевом молоке</span>
+            </label>
+            <label class="checkbox-field form-check">
+                <input class="form-check-input" type="radio" name="milk${this.props.number}" value="coconut" />
+                <span>кокосовом молоке</span>
+            </label>
+            </div>
+
+            <div class="field mb-3">
+            <span class="checkbox-label">Добавьте к напитку:</span>
+            <label class="checkbox-field form-check form-check-label">
+                <input class="form-check-input" type="checkbox" name="options${this.props.number}" value="whipped cream" />
+                <span>взбитых сливок</span>
+            </label>
+            <label class="checkbox-field form-check form-check-label">
+                <input class="form-check-input" type="checkbox" name="options${this.props.number}" value="marshmallow" />
+                <span>зефирок</span>
+            </label>
+            <label class="checkbox-field form-check form-check-label">
+                <input class="form-check-input" type="checkbox" name="options${this.props.number}" value="chocolate" />
+                <span>шоколад</span>
+            </label>
+            <label class="checkbox-field form-check form-check-label">
+                <input class="form-check-input" type="checkbox" name="options${this.props.number}" value="cinnamon" />
+                <span>корицу</span>
+            </label>
+            </div>
+
+            <div class="">
+                <label for="addInfo" class="form-label">И еще вот что</label>
+                <textarea name="details${this.props.number}" class="form-control" id="addInfo" rows="2"></textarea>
+            </div>
+
+            </div>
+            </fieldset>
+        `
+    }
+}

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();
+            }
+        });
+    }
+}

index.html

@@ -3,67 +3,62 @@
   <head>
     <meta charset="UTF-8" />
     <title>Заказ кофе</title>
-    <link rel="stylesheet" href="styles.css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   </head>
   <body>
+    <div class="container">
     <form>
-      <fieldset class="beverage">
-        <h4 class="beverage-count">Напиток №1</h4>
-        <label class="field">
-          <span class="label-text">Я буду</span>
-          <select>
-            <option value="espresso">Эспрессо</option>
-            <option value="capuccino" selected>Капучино</option>
-            <option value="cacao">Какао</option>
-          </select>
-        </label>
-        <div class="field">
-          <span class="checkbox-label">Сделайте напиток на</span>
-          <label class="checkbox-field">
-            <input type="radio" name="milk" value="usual" checked />
-            <span>обычном молоке</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="radio" name="milk" value="no-fat" />
-            <span>обезжиренном молоке</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="radio" name="milk" value="soy" />
-            <span>соевом молоке</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="radio" name="milk" value="coconut" />
-            <span>кокосовом молоке</span>
-          </label>
-        </div>
-        <div class="field">
-          <span class="checkbox-label">Добавьте к напитку:</span>
-          <label class="checkbox-field">
-            <input type="checkbox" name="options" value="whipped cream" />
-            <span>взбитых сливок</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="checkbox" name="options" value="marshmallow" />
-            <span>зефирок</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="checkbox" name="options" value="chocolate" />
-            <span>шоколад</span>
-          </label>
-          <label class="checkbox-field">
-            <input type="checkbox" name="options" value="cinnamon" />
-            <span>корицу</span>
-          </label>
-        </div>
-      </fieldset>
-      <div>
-        <button type="button" class="add-button">+ Добавить напиток</button>
+      <div id="CoffeeList" class="mt-5">
+
       </div>
-      <div style="margin-top: 30px">
-        <button type="submit" class="submit-button">Готово</button>
+
+      <div class="mx-auto" style="max-width:36rem;">
+
+        <button type="button" class="btn btn-secondary add-button" id="AddButton">+ Добавить напиток</button>
+        <button type="submit" class="btn btn-danger submit-button">Готово</button>
       </div>
     </form>
+    </div>
+
+    <!-- Modal -->
+    <div class="modal fade" id="responseModal" tabindex="-1" aria-labelledby="responseModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="responseModalLabel">Заказ принят!</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body" id="responseModalBody">
+            <table class="table" id="responseTable">
+              <thead>
+                <tr>
+                  <th scope="col">Напиток</th>
+                  <th scope="col">Молоко</th>
+                  <th scope="col">Дополнительно</th>
+                  <th scope="col">Пожелания</th>
+                </tr>
+              </thead>
+              <tbody>
+              </tbody>
+            </table>
+
+            <form id="checkoutForm">
+              <div class="mt-3">
+                <label for="inputTime" class="form-label">Выберите время заказа</label>
+                <input type="time" name="time" class="form-control" id="inputTime">
+                <button type="submit" id="checkoutButton" class="mt-3 btn btn-danger submit-button">Оформить</button>
+              </div>
+            </form>
+          </div>
+          <!--<div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+          </div>-->
+        </div>
+      </div>
+    </div>
 
-    <script src="index.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script type="module" src="index.js"></script>
   </body>
 </html>

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 = "<b>" + 
+        clone.slice(clone.toLowerCase().indexOf(keyword, lastI), clone.toLowerCase().indexOf(keyword, lastI) + keyword.length)
+        + "</b>";
+        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();
+    }
+};