HW18 almost

homework18/loginForm.js

@@ -0,0 +1,198 @@
+function Password(parent, open){
+    this.textBox = document.createElement("input");
+    this.textBox.setAttribute("type", "password");
+    this.textBox.id = "password";
+    parent.appendChild(this.textBox);
+
+    this.checkBox = document.createElement("input")
+    this.checkBox.setAttribute("type", "checkbox")
+    parent.appendChild(this.checkBox)
+
+    this.isChecked = function(checkBox, textBox) {
+        if(open === false){
+            this.textBox.setAttribute("type", "password") 
+          open = true;
+        } else { 
+            this.textBox.setAttribute("type", "text")
+            open = false;
+        }
+    }
+    this.getValue = function(arg = this.textBox) {
+        return arg.value
+    }
+    this.setValue = function(inner) {
+        this.textBox.value = inner;
+    }
+    this.getOpen = function() {
+        let str;
+        open == true ? str = "closed" : str = "opened";
+        return str;
+    }
+
+    this.onChange = function(arg) {
+        let data = this.getValue(arg);
+        return data;
+        
+    }
+    this.onOpenChange = function(arg) {
+        console.log(arg)
+        return arg
+    }
+    this.checkBox.onchange = () =>  {
+        this.isChecked(this.checkBox, this.textBox)
+        this.onOpenChange(this.getOpen())
+    };
+    this.textBox.oninput = () => this.onChange(this.getValue(this.textBox));
+    this.setOpen = function(arg) {
+        if(!arg == true){
+            this.checkBox.checked = "checked"
+        } else {
+            this.checkBox.checked = ""
+        }
+        this.isChecked()
+    }
+
+}
+
+
+function login(parent) {
+    this.loginBox = document.createElement("input");
+    this.loginBox.setAttribute("type", "text");
+    this.loginBox.setAttribute("value", "login")
+    this.loginBox.id = "login";
+    parent.appendChild(this.loginBox);
+}
+    
+
+function send(parent) {
+    this.sendBottom = document.createElement("button");
+    this.sendBottom.setAttribute("disabled", true);
+    this.sendBottom.innerText = "send";
+    this.sendBottom.id = "send";
+    parent.appendChild(this.sendBottom)
+}
+
+function loginForm(parent) {
+    this.login = new login(parent);
+    this.login.loginBox.oninput = () => this.sendOnChange();
+
+
+    this.password = new Password(parent);
+    this.password.textBox.oninput = () => { this.sendOnChange()  
+    }
+    
+
+    this.sendBottom = new send(parent)
+
+    this.sendOnChange = function() {
+        if(this.login.loginBox.value != "" && this.password.textBox.value != "") {
+            return this.sendBottom.sendBottom.removeAttribute("disabled");
+        }  return this.sendBottom.sendBottom.setAttribute("disabled", true);
+    }  
+
+    this.setValue = function(inner, box = this.password.textBox) {
+        box.value = inner;
+    }
+    this.setValue("qwerty")
+    this.sendOnChange()
+
+}
+
+
+
+
+
+// let j = new loginForm(document.body)
+
+// j.setValue("Вооот")
+
+
+function passwordVerify(parent) {
+    this.login = new login(parent);
+    this.login.loginBox.oninput = () => this.sendOnChange();
+
+
+    this.checkPasswordBox = document.createElement("span");
+    parent.appendChild(this.checkPasswordBox);
+
+    this.password = new Password(this.checkPasswordBox);
+    this.password.checkBox.onchange = () =>  {
+        if(this.password.checkBox.checked) {
+            this.checkPassword.remove()
+        } else {
+            this.checkPassword = document.createElement("input");
+            this.checkPassword.setAttribute("type", "password");
+            this.checkPasswordBox.appendChild(this.checkPassword);
+            this.checkPassword.oninput = () => this.sendOnChange();
+        }
+        this.sendOnChange()
+    }
+    
+    this.password.textBox.oninput = () => this.sendOnChange();
+
+    this.checkPassword = document.createElement("input");
+    this.checkPassword.setAttribute("type", "password");
+    this.checkPassword.id = "checkPassword";
+    this.checkPasswordBox.appendChild(this.checkPassword);
+    this.checkPassword.oninput = () => this.sendOnChange();
+
+    this.sendBottom = new send(parent);
+
+    this.setValue = function(inner, box = this.password.textBox) {
+        box.value = inner;
+    }
+    this.setValue("qwerty")
+
+    this.sendOnChange = function() {
+
+        if(this.password.checkBox.checked &&
+            this.login.loginBox.value != "" && 
+            this.password.textBox.value != "") {
+                return this.sendBottom.sendBottom.removeAttribute("disabled");
+            }
+        else {
+            if(this.login.loginBox.value != "" && 
+            this.password.textBox.value != "" &&
+            this.password.textBox.value === this.checkPassword.value) {
+                return this.sendBottom.sendBottom.removeAttribute("disabled");
+            }
+        }
+
+        return this.sendBottom.sendBottom.setAttribute("disabled", true);
+    }  
+
+}
+
+let loginFormDiv = document.getElementById("loginForm");
+let thisWriteLog = loginForm(loginFormDiv);
+sendClick = document.getElementById("send");
+let log = document.getElementById("login");
+let password = document.getElementById("password");
+
+
+
+sendClick.onclick = () => {
+    console.log(`login: ${log.value} \n password: ${password.value}`)
+
+    getGQL(gqlUrl)(`
+    query login($login:String, $password:String) {
+        login(login:$login, password:$password)
+      }`,{login: log.value, password: password.value}).then(res => {
+            localStorage.authtoken = res.data.login;
+            if(localStorage.authtoken) {
+                loginFormDiv.innerHTML = ""
+                let sayHi = document.createElement("h2");
+
+                sayHi.setAttribute("style", "margin-bottom: 0px")
+                sayHi.innerText = `Hi, user!`;
+                loginFormDiv.appendChild(sayHi);
+            }
+    });
+}
+
+
+
+
+
+
+

homework18/script.js

@@ -0,0 +1,214 @@
+const gqlUrl = "http://shop-roles.asmer.fs.a-level.com.ua/graphql";
+
+const  yourDiv = document.getElementById("categories");
+
+const goodsDiv = document.getElementById("goodsBox");
+goodsDiv.style = "display:flex"
+
+if(localStorage.authtoken) {
+    loginFormDiv.innerHTML = ""
+    let sayHi = document.createElement("h2");
+    sayHi.setAttribute("style", "margin-bottom: 0px")
+    sayHi.innerText = `Hi, user!`;
+    loginFormDiv.appendChild(sayHi);
+}
+
+
+const getGQL = url => (query, variables = {}) => 
+        fetch(url, {
+                method: 'POST', 
+                headers: {
+                  'Accept': 'application/json',
+                  'Content-Type': 'application/json',
+                  ...(localStorage.authToken ? {Authorization: `Bearer ${localStorage.authToken}`} : {})
+                },
+                body: JSON.stringify({query, variables})
+        }).then(res => res.json())
+
+
+
+getGQL(gqlUrl)(`
+query categories {
+    CategoryFind(query:"[{}]") {
+      _id name 
+      goods {name, price _id, images {url}}
+      image {
+        _id
+        createdAt
+        text
+        
+        originalFileName
+      }
+    }
+  }
+`).then(res => categories(res, yourDiv));
+
+
+
+
+function categories(data, parentEl) {
+    var list = document.createElement("ul");
+    parentEl.appendChild(list);
+    for(let i = 0; i < data.data.CategoryFind.length; i++) {
+        let oneCat = document.createElement("li");
+        if(data.data.CategoryFind[i].subCategories) {
+            oneCat.innerText = `${data.data.CategoryFind[i].name} >`;
+        } else {
+            oneCat.innerText = data.data.CategoryFind[i].name;
+        }
+
+        let thisSubcat = false;
+        oneCat.onclick = () =>  getGQL(gqlUrl) (
+            `query categoryFind($query: String) {
+                CategoryFindOne(query: $query) {
+                  name,
+                  goods {
+                    _id
+                  },
+                  subCategories {name, _id}
+                }
+              }
+        `,{query: JSON.stringify([{_id: `${data.data.CategoryFind[i]._id}` }]) }
+        ).then((res) =>  {
+
+
+            if(thisSubcat == false) {
+
+
+                if(res.data.CategoryFindOne.subCategories) {
+
+                    let subArray = res.data.CategoryFindOne.subCategories;
+                    oneCategory(subArray, oneCat)
+                    thisSubcat = true;
+
+                } else {
+
+                    goodsOnPage(goodsDiv, data.data.CategoryFind[i].goods)
+                }
+
+
+
+            } else {
+                let lastChild = oneCat.lastChild;
+                oneCat.removeChild(lastChild);
+                thisSubcat = false;
+            }
+
+        }) 
+        list.appendChild(oneCat);
+    }
+}
+
+
+
+
+function oneCategory(dataArr, parentEl) {
+    
+    var list = document.createElement("ul");
+    parentEl.appendChild(list);
+    
+    for(let i = 0; i < dataArr.length; i++) {
+
+        let oneCat = document.createElement("li");
+        oneCat.innerText = dataArr[i].name;
+
+        oneCat.onclick = function(event) {  
+            event.stopPropagation();
+
+            getGQL(gqlUrl) (
+            `query goods($query: String) {
+                GoodFind(query: $query)  {
+                  name, price,
+                  images{url}, _id
+                  categories {
+                    _id
+                    createdAt
+                    name
+                  }
+                }
+              }`,{query: JSON.stringify([{
+                  "categories._id": `${dataArr[i]._id}`
+                }]) }).then(res =>(goodsOnPage(goodsDiv, res.data.GoodFind)));
+        }
+
+
+
+        list.appendChild(oneCat);
+    }
+}
+
+
+function goodsOnPage(parentEl, goodsArr = null) {
+    debugger
+    parentEl.innerHTML = "";
+    parentEl.style = "justify-content: spase-around;"
+    if(goodsArr == null||goodsArr.length == 0) {
+        parentEl.innerHTML = "К сожалению нет таких товаров. Попробуйте, пожалуйста, другую категорию";
+        return
+    }
+    for(let key of goodsArr) {
+
+
+        let icon = document.createElement("div");
+        parentEl.appendChild(icon);
+
+        let iconImg = document.createElement("img");
+        iconImg.setAttribute("src", `http://shop-roles.asmer.fs.a-level.com.ua/${key.images[0].url}`);
+        iconImg.style = "width: 60%; height: 60%"
+        icon.appendChild(iconImg);
+
+        let iconName = document.createElement("h5");
+        iconName.innerText = key.name;
+        icon.appendChild(iconName);
+
+        let iconprice = document.createElement("span");
+        iconprice.innerText = `${key.price}грн`
+        icon.appendChild(iconprice);
+        icon.onclick = () =>  getGQL(gqlUrl) (
+            `query oneGood($query: String) {
+                GoodFindOne(query: $query) {
+                    _id
+                    createdAt
+                    name
+                    description
+                    price
+                    images{url}
+                }
+              }
+        `,{query: JSON.stringify([{_id: `${key._id}` }]) }
+        ).then((res) => oneGoodDescription(res.data.GoodFindOne, goodsDiv));
+
+    }
+}
+
+
+function oneGoodDescription(data, parentEl) {
+    parentEl.innerHTML = ""
+    parentEl.style = "justify-content: center;"
+
+    var icon = document.createElement("div");
+    icon.style = "display: flex; justify-content: center; flex-direction: column";
+
+    let iconImg = document.createElement("img");
+    iconImg.setAttribute("src", `http://shop-roles.asmer.fs.a-level.com.ua/${data.images[0].url}`);
+    iconImg.style = "width: 100%; height: 100%";
+    icon.appendChild(iconImg);
+
+    let iconName = document.createElement("h5");
+    iconName.innerText = data.name;
+    icon.appendChild(iconName);
+
+    let iconDescrip = document.createElement("p");
+    iconDescrip.innerText = data.description;
+    icon.appendChild(iconDescrip)
+
+    let iconprice = document.createElement("span");
+    iconprice.innerText = `${data.price}грн`
+    icon.appendChild(iconprice);
+
+    parentEl.appendChild(icon);
+
+
+}
+
+

homework18/shop.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>ShopGL</title>
+</head>
+<body>
+    <header id="header">
+        <div id="loginForm"></div>
+    </header>
+
+    <main>
+        <div id="categories">
+        </div>
+
+        <div id="goodsBox">
+            Выберите, пожалуйста, категорию.
+        </div>
+    </main>
+    <script src="./loginForm.js"></script>
+    <script src="./script.js"></script>
+</body>
+</html>

homework18/style.css

@@ -0,0 +1,23 @@
+#categories {
+    background-color: olivedrab;
+    /* position: absolute; */
+    padding-right: 20px;
+    width: 40%;
+}
+
+main {
+    display: flex;
+    position: relative;
+    ;
+}
+
+#goodsBox {
+    width: 60%;
+    background-color: orange;
+    display: flex;
+    flex-wrap: wrap;
+}
+#loginForm {
+    background-color: orangered;
+    margin: 0%;
+}