Module<Final vers>

js/Module/pagination.js

@@ -0,0 +1,123 @@
+function Pagination(paginatedList, paginationContainer, paginationLimit = 5, listItemTag = "li") {
+  const createMainPagination = () => {
+    paginationContainer.innerHTML =
+      `
+      <nav aria-label="Page navigation example">
+        <ul class="pagination justify-content-center">
+          <li class="page-item disabled" id="prev-button" tabindex="-1">
+            <a class="page-link" href="${location.hash}" tabindex="-1">Previous</a>
+          </li>
+          <!--<li class="page-item"><a class="page-link" href="${location.hash}">1</a></li>
+          <li class="page-item"><a class="page-link" href="${location.hash}">2</a></li>
+          <li class="page-item"><a class="page-link" href="${location.hash}">3</a></li>-->
+          <li class="page-item" id="next-button">
+            <a class="page-link" href="${location.hash}">Next</a>
+          </li>
+        </ul>
+      </nav>
+      `;
+  }
+  createMainPagination();
+  const listItems = paginatedList.querySelectorAll(listItemTag);
+  const nextButton = paginationContainer.querySelectorAll("#next-button")[0];
+  const prevButton = paginationContainer.querySelectorAll("#prev-button")[0];
+
+  const pageCount = Math.ceil(listItems.length / paginationLimit);
+  let currentPage = 1;
+
+  const disableButton = (button) => {
+    button.classList.add("disabled");
+    button.setAttribute("disabled", true);
+  };
+
+  const enableButton = (button) => {
+    button.classList.remove("disabled");
+    button.removeAttribute("disabled");
+  };
+
+  const handlePageButtonsStatus = () => {
+    if (currentPage === 1) {
+      disableButton(prevButton);
+    } else {
+      enableButton(prevButton);
+    }
+
+    if (pageCount === currentPage) {
+      disableButton(nextButton);
+    } else {
+      enableButton(nextButton);
+    }
+  };
+
+  const handleActivePageNumber = () => {
+    document.querySelectorAll(".page-item").forEach((button) => {
+      button.classList.remove("active");
+      const pageIndex = Number(button.getAttribute("page-index"));
+      if (pageIndex == currentPage) {
+        button.classList.add("active");
+      }
+    });
+  };
+
+  const appendPageNumber = (index) => {
+    const pageNumber = document.createElement("li");
+    pageNumber.classList.add("page-item");
+    pageNumber.innerHTML = `<a class="page-link" href="#${location.hash}">${index}</a>`;
+    pageNumber.setAttribute("page-index", index);
+    pageNumber.setAttribute("aria-label", "Page " + index);
+    nextButton.parentNode.insertBefore(pageNumber, nextButton);
+  };
+
+  const getPaginationNumbers = () => {
+    for (let i = 1; i <= pageCount; i++) {
+      appendPageNumber(i);
+    }
+  };
+
+  const setCurrentPage = (pageNum) => {
+    currentPage = pageNum;
+    if (currentPage < 1 || currentPage > pageCount)
+      return;
+
+    handleActivePageNumber();
+    handlePageButtonsStatus();
+
+    const prevRange = (pageNum - 1) * paginationLimit;
+    const currRange = pageNum * paginationLimit;
+
+    listItems.forEach((item, index) => {
+      item.classList.add("d-none");
+      if (index >= prevRange && index < currRange) {
+        item.classList.remove("d-none");
+      }
+    });
+  };
+
+  function init() {
+    getPaginationNumbers();
+    setCurrentPage(1);
+
+    prevButton.addEventListener("click", (event) => {
+      event.preventDefault();
+      setCurrentPage(currentPage - 1);
+    });
+
+    nextButton.addEventListener("click", (event) => {
+      event.preventDefault();
+      setCurrentPage(currentPage + 1);
+    });
+
+    document.querySelectorAll(".page-item").forEach((button) => {
+      const pageIndex = Number(button.getAttribute("page-index"));
+
+      if (pageIndex) {
+        button.childNodes[0].addEventListener("click", (event) => {
+          event.preventDefault();
+          if (pageIndex && !button.classList.contains('disabled'))
+            setCurrentPage(pageIndex);
+        });
+      }
+    });
+  }
+  init();
+}

js/lesson21_Module/Gql_promis.html

@@ -3,17 +3,17 @@
 <body>
     <header>
         <div>
-            <a href="#/login/">Login</a>
+            <a href="?#/login/">Login</a>
         </div>
         <div>
-            <a href="#/logout/">Logout</a>
+            <a href="?#/logout/">Logout</a>
         </div>
         <div>
-            <a href="#/orders/">Orders History</a>
+            <a href="?#/orders/">Orders History</a>
         </div>
         <div id='cartIcon'></div>
         <div>
-            <a href="#/cart">Cart</a>
+            <a href="?#/cart">Cart</a>
         </div>
     </header>
     <div id='mainContainer'>

js/lesson21_HW/alerts.js

@@ -0,0 +1,60 @@
+function addAlert(
+    addToEl, alertMessage,
+    type = "primary",
+    timeout = 5,
+    info = undefined,
+    onAdd, onClose
+  ) {
+    function setAttributes(el, attrs) {
+      if (!attrs)
+        return;
+      for (var key in attrs) 
+        el.setAttribute(key, attrs[key]);
+    }
+    function addElement({
+      tag = "div", parent = null,
+      classes = [], attrs = {},
+      innerText = null,
+      children = []
+    } = {}) {
+      let result = document.createElement(tag);
+      result.innerText = innerText;
+      result.classList.add(...classes);
+      setAttributes(result, attrs)
+      parent?.appendChild(result);
+      result.append(...(children?.filter(c => c) ?? []));
+      return result;
+    }
+
+    if (!info && ["success", "danger", "warning", "info"].includes(type.toLowerCase()))
+      info = type.charAt(0).toUpperCase() + type.slice(1);
+
+    let alertDiv = null;
+    addElement(
+    { 
+      parent: addToEl, classes: ["container"],
+      children: 
+      [
+        alertDiv = addElement(
+        {
+          classes: ["alert", "alert-" + type, "alert-dismissible", "fade", "show"], role: "alert",
+          children: 
+          [
+            info ? addElement({tag: "strong", innerText: info + " "}) : null,
+            addElement({tag: "a", innerText: alertMessage}),
+            addElement({ tag: "button", classes: ["btn-close"], attrs: {"type": "button", "data-bs-dismiss": "alert", "aria-label": "Close" }})
+          ]
+        })
+      ]
+    });
+
+    if (onClose)
+      alertDiv.addEventListener("closed.bs.alert", onClose);
+    if (onAdd)
+      onAdd();
+    if (timeout > 0)
+    {
+      var bootstrapAlert = new bootstrap.Alert(alertDiv);
+      setTimeout(() => bootstrapAlert.close(), timeout * 1000);
+    }
+  }

js/lesson21_HW/index.css

@@ -0,0 +1,188 @@
+.badge:after {
+    content: attr(value);
+    font-size: 12px;
+    color: #fff;
+    background: red;
+    border-radius: 50%;
+    padding: 0 5px;
+    position: relative;
+    left: -8px;
+    top: -10px;
+    opacity: 0.9;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+    background: #f2f6e9;
+}
+
+.navbar {
+    background: rgb(63, 239, 192);
+}
+
+.nav-link,
+.navbar-brand {
+    color: rgb(39, 34, 34);
+    cursor: pointer;
+}
+
+.nav-link {
+    margin-right: 1em !important;
+}
+
+/*.nav-link:hover {
+    color: #000;
+    }*/
+.navbar-collapse {
+    justify-content: flex-end;
+}
+
+.categories-list {
+    background-color: #333;
+    color: #dedec8;
+}
+
+.header {
+    background-image: url("images/header-background.jpg");
+    background-size: cover;
+    background-position: center;
+    position: relative;
+}
+
+/*.overlay {
+    position: absolute;
+    min-height: 100%;
+    min-width: 100%;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.6);
+    }*/
+.description {
+    left: 50%;
+    position: absolute;
+    top: 45%;
+    transform: translate(-50%, -55%);
+    text-align: center;
+}
+
+.description h1 {
+    color: #6ab446;
+}
+
+.description p {
+    color: #fff;
+    font-size: 1.3rem;
+    line-height: 1.5;
+}
+
+.description button {
+    border: 1px solid #6ab446;
+    background: #6ab446;
+    border-radius: 0;
+    color: #fff;
+}
+
+/*.description button:hover {
+    border: 1px solid #fff;
+    background: #fff;
+    color: #000;
+    }*/
+.features {
+    margin: 4em auto;
+    padding: 1em;
+    position: relative;
+}
+
+.feature-title {
+    color: #333;
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+}
+
+.features img {
+    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
+    margin-bottom: 16px;
+}
+
+.features .form-control,
+.features input {
+    border-radius: 0;
+}
+
+.features .btn {
+    background-color: #589b37;
+    border: 1px solid #589b37;
+    color: #fff;
+    margin-top: 20px;
+}
+
+.features .btn:hover {
+    background-color: #333;
+    border: 1px solid #333;
+}
+
+.background {
+    background: #dedec8;
+    padding: 4em 0;
+}
+
+.team {
+    color: #5e5e55;
+    padding: 0 180px;
+}
+
+.team .card-columns {
+    -webkit-column-count: 4;
+    -moz-column-count: 4;
+    column-count: 4;
+}
+
+.team .card {
+    background: none;
+    border: none;
+}
+
+.team .card-title {
+    font-size: 1.3rem;
+    margin-bottom: 0;
+    text-transform: uppercase;
+}
+
+.page-footer {
+    background-color: #222;
+    color: #ccc;
+    padding: 60px 0 30px;
+}
+
+.footer-copyright {
+    color: #666;
+    padding: 40px 0;
+}
+
+@media (max-width: 575.98px) {
+    .description {
+        left: 0;
+        padding: 0 15px;
+        position: absolute;
+        top: 10%;
+        transform: none;
+        text-align: center;
+    }
+
+    .description h1 {
+        font-size: 2em;
+    }
+
+    .description p {
+        font-size: 1.2rem;
+    }
+
+    .features {
+        margin: 0;
+    }
+}

js/lesson21_Module/index.html

@@ -29,16 +29,16 @@
             <div class="collapse navbar-collapse" id="main-navigation">
                 <ul class="navbar-nav  align-items-center">
                     <li id="loginLink" class="nav-item  d-none">
-                        <a class="nav-link" href="#/login/">Login</a>
+                        <a class="nav-link" href="?#/login/">Login</a>
                     </li>
                     <li id="regLink" class="nav-item d-none">
-                        <a class="nav-link" href="#/register/">Register</a>
+                        <a class="nav-link" href="?#/register/">Register</a>
                     </li>
                     <li id="logoutLink" class="nav-item d-none">
-                        <a class="nav-link" href="#/logout/">Logout</a>
+                        <a class="nav-link" href="?#/logout/">Logout</a>
                     </li>
                     <li id="cartLink" class="nav-item">
-                        <a class="nav-link" href="#/cart/">
+                        <a class="nav-link" href="?#/cart/">
                             <i class="fa badge fa-lg" id="cartCountBadge" value=0>
                                 <img src="./Img/корзина.png" width="60px">
                                 <!--<span class="badge badge-light" id="cartCountBadge">0</span>-->

js/lesson21_HW/login.js

@@ -0,0 +1,83 @@
+function LoginForm(parent, open) {
+    function Login(parent) {
+        this.input = document.createElement("input");
+        parent.append(this.input);
+        this.setValue = function (value) {
+            this.input.value = value;
+        }
+        this.getValue = function () {
+            return this.input.value;
+        }
+        this.input.oninput = this.input.onchange = function () {
+            if (this.onChange)
+                this.onChange(this.getValue());
+        }.bind(this);
+    }
+    function Password(parent, open) {
+        this.input = document.createElement("input");
+        parent.append(this.input);
+        this.setValue = function (value) {
+            this.input.value = value;
+        }
+        this.getValue = function () {
+            return this.input.value;
+        }
+        this.input.oninput = this.input.onchange = function () {
+            if (this.onChange)
+                this.onChange(this.getValue());
+        }.bind(this);
+
+
+        this.setOpen = function (open) {
+            this.input.type = open ? "text" : "password";
+        }
+        this.getOpen = function () {
+            return this.input.type == "text";
+        }
+        let check = document.createElement("input");
+        parent.append(check);
+        check.onchange = function () {
+            this.setOpen(check.checked);
+            if (this.onOpenChange)
+                this.onOpenChange(this.getOpen());
+        }.bind(this);
+
+        check.checked = open;
+        check.value = "open";
+        check.type = "checkbox";
+        this.setOpen(open);
+    }
+
+    let form = document.createElement("form");
+    parent.append(form);
+    this.login = new Login(form);
+    this.password = new Password(form, open);
+    this.button = document.createElement("button");
+    this.button.innerText = "OK";
+    this.button.classList.add('btn');
+    this.button.classList.add('ref-button');
+    form.append(this.button);
+
+    let setButtonStateCallback = function setButtonState() {
+        this.button.disabled = !this.login.getValue() || !this.password.getValue();
+    }.bind(this);
+    this.login.onChange = setButtonStateCallback;
+    this.password.onChange = setButtonStateCallback;
+    this.button.disabled = true;
+    this.button.onclick = function () {
+        if (this.onLogin)
+            this.onLogin(this.login.getValue(), this.password.getValue());
+    }.bind(this);
+}
+
+function loginPromise(parent) {
+    function executor(fulfill, reject) {
+        const form = new LoginForm(parent);
+        form.onLogin = (login, password) => {
+            fulfill({ 'login': login, 'password': password })
+        }
+    }
+    return new Promise(executor);
+}
+/*loginPromise(document.body)
+   .then(({ login, password }) => console.log(`Вы ввели ${login} и ${password}`));*/