HW16 done

hw11/main.js

@@ -214,105 +214,154 @@
 
 //password verify 
 
-function Password (parent , open) {
-  let passwordContent = document.createElement('div')
-  let passwordContent2 = document.createElement('div')
-  let btnContent = document.createElement('div')
-  let h = document.createElement('h1')
-  h.innerHTML = "Password Verify"
-  let passwordInput = document.createElement ('input')
-  let passwordInput2 = document.createElement ('input')
-  passwordInput2.value = 'qwerty'
-  passwordInput2.type = 'password'
-  let passwordCheckbox = document.createElement('input')
-  let passwordSpan = document.createElement('span')
-  let btn = document.createElement('button')
-  btn.innerHTML = 'Log in'
-  btn.style.marginTop = '10px'
-  btn.style.marginLeft = '120px'
+// function Password (parent , open) {
+//   let passwordContent = document.createElement('div')
+//   let passwordContent2 = document.createElement('div')
+//   let btnContent = document.createElement('div')
+//   let h = document.createElement('h1')
+//   h.innerHTML = "Password Verify"
+//   let passwordInput = document.createElement ('input')
+//   let passwordInput2 = document.createElement ('input')
+//   passwordInput2.value = 'qwerty'
+//   passwordInput2.type = 'password'
+//   let passwordCheckbox = document.createElement('input')
+//   let passwordSpan = document.createElement('span')
+//   let btn = document.createElement('button')
+//   btn.innerHTML = 'Log in'
+//   btn.style.marginTop = '10px'
+//   btn.style.marginLeft = '120px'
   
   
-  parent.style.zIndex = 1
-  parent.append(passwordContent)
-  h.style.marginTop = '100px'
-  parent.append(passwordContent2)
-  parent.append(btnContent)
-  passwordContent.append(h)
-  passwordContent.append(passwordInput)
-  passwordContent.append(passwordCheckbox)
-  passwordContent.append(passwordSpan)
-  passwordContent2.append(passwordInput2)
-  passwordContent.style.marginTop = "15px"
-  passwordContent.style.marginBottom = '20px'
-  passwordInput.placeholder = "Enter a password"
-  btnContent.append(btn)
+//   parent.style.zIndex = 1
+//   parent.append(passwordContent)
+//   h.style.marginTop = '100px'
+//   parent.append(passwordContent2)
+//   parent.append(btnContent)
+//   passwordContent.append(h)
+//   passwordContent.append(passwordInput)
+//   passwordContent.append(passwordCheckbox)
+//   passwordContent.append(passwordSpan)
+//   passwordContent2.append(passwordInput2)
+//   passwordContent.style.marginTop = "15px"
+//   passwordContent.style.marginBottom = '20px'
+//   passwordInput.placeholder = "Enter a password"
+//   btnContent.append(btn)
   
   
-  passwordCheckbox.type = 'checkbox'
-  passwordCheckbox.style.marginLeft = '10px'
-  passwordSpan.innerHTML = "Hide password"
-  passwordSpan.style.marginLeft = "10px"
+//   passwordCheckbox.type = 'checkbox'
+//   passwordCheckbox.style.marginLeft = '10px'
+//   passwordSpan.innerHTML = "Hide password"
+//   passwordSpan.style.marginLeft = "10px"
   
-  function showOrHide() {
-    if (passwordCheckbox.checked) {
-      passwordInput.setAttribute('type' , 'password')
-    } else {
-      passwordInput.setAttribute('type','text')
-    }
+//   function showOrHide() {
+//     if (passwordCheckbox.checked) {
+//       passwordInput.setAttribute('type' , 'password')
+//     } else {
+//       passwordInput.setAttribute('type','text')
+//     }
+//   }
+//   passwordCheckbox.addEventListener('change' , showOrHide)
+
+//   this.passwordSetOpen = function(bool){
+//     if(bool === false) {
+//         passwordInput.type = 'password'
+//         passwordCheckbox.checked = false
+//         passwordCheckbox.onchange = function() {
+//             if (passwordInput.type === "password") {
+//                 passwordInput.type = "text";
+//             }
+//             else {
+//                 passwordInput.type = 'password'
+//             }
+//             if(passwordInput.type === 'text'){
+//                 passwordInput2.hidden = true
+//             }
+//             else if (passwordInput.type === 'password') {
+//                 passwordInput2.hidden = false
+//             }
+//         }
+//     }
+//     else if (bool === true){
+//         passwordInput.type = 'text'
+//         passwordCheckbox.checked = true
+//         passwordCheckbox.onchange = function() {
+//             if (passwordInput.type === "password") {
+//                 passwordInput.type = "text";
+//             }
+//             else {
+//                 passwordInput.type = 'password'
+//             }
+//         }
+//     }  
+// }
+
+// this.Verify = function () {
+//   btn.disabled = true
+//   passwordInput.oninput = passwordInput2.oninput = () => {
+//   if (passwordInput.value === passwordInput2.value && passwordInput.value != '') {
+//     btn.disabled = false
+//   }
+//   else {
+//     btn.disabled = true
+//   }
+// }
+// }
+// }
+
+// let p = new Password(document.body, true)
+
+// p.passwordSetOpen(false)
+// p.Verify()
+
+function Form(el, data, okCallback, cancelCallback){
+  let formBody = document.createElement('div')
+  let okButton = document.createElement('button')
+  okButton.innerHTML = 'OK'
+
+  let cancelButton = document.createElement('button')
+  cancelButton.innerHTML = 'Cancel'
+
+  formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
+  if (typeof okCallback === 'function'){
+      formBody.appendChild(okButton);
+      okButton.onclick = (e) => {
+          console.log(this)
+          this.okCallback(e)
+      }
   }
-  passwordCheckbox.addEventListener('change' , showOrHide)
-
-  this.passwordSetOpen = function(bool){
-    if(bool === false) {
-        passwordInput.type = 'password'
-        passwordCheckbox.checked = false
-        passwordCheckbox.onchange = function() {
-            if (passwordInput.type === "password") {
-                passwordInput.type = "text";
-            }
-            else {
-                passwordInput.type = 'password'
-            }
-            if(passwordInput.type === 'text'){
-                passwordInput2.hidden = true
-            }
-            else if (passwordInput.type === 'password') {
-                passwordInput2.hidden = false
-            }
-        }
-    }
-    else if (bool === true){
-        passwordInput.type = 'text'
-        passwordCheckbox.checked = true
-        passwordCheckbox.onchange = function() {
-            if (passwordInput.type === "password") {
-                passwordInput.type = "text";
-            }
-            else {
-                passwordInput.type = 'password'
-            }
-        }
-    }  
-}
 
-this.Verify = function () {
-  btn.disabled = true
-  passwordInput.oninput = passwordInput2.oninput = () => {
-  if (passwordInput.value === passwordInput2.value && passwordInput.value != '') {
-    btn.disabled = false
+  if (typeof cancelCallback === 'function'){
+      formBody.appendChild(cancelButton);
+      cancelButton.onclick = cancelCallback
   }
-  else {
-    btn.disabled = true
+
+  el.appendChild(formBody)
+
+
+  this.okCallback     = okCallback
+  this.cancelCallback = cancelCallback
+
+  this.data           = data
+  let input = document.createElement('input')
+  for (input in data) {
+
   }
-}
-}
+  this.validators     = {}
 }
 
-let p = new Password(document.body, true)
 
-p.passwordSetOpen(false)
-p.Verify()
+// let form = new Form(formContainer, {
+//   name: 'Anakin',
+//   surname: 'Skywalker',
+//   married: true,
+//   birthday: new Date((new Date).getTime() - 86400000 * 30*365)
+// }, () => console.log('ok'),() => console.log('cancel') )
+// form.okCallback = () => console.log('ok2')
 
+// form.validators.surname = (value, key, data, input) => value.length > 2 && 
+//                                                    value[0].toUpperCase() == value[0] &&
+//                                                   !value.includes(' ') ? true : 'Wrong name'
+// console.log(form)
 
 
 

hw16/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script src="main.js"></script>
+</body>
+</html>

hw16/main.js

@@ -0,0 +1,55 @@
+    const getGQL = url => 
+    (query, variables) =>
+        fetch(url, {
+            method: 'POST',
+            headers: {
+                "content-type": "application/json"
+            },
+            body: JSON.stringify({query, variables})
+        }).then(res => res.json())
+
+    let gql = getGQL('http://shop-roles.asmer.fs.a-level.com.ua/graphql')
+
+   async function goodFind() {
+       await gql(`query {
+        GoodFind(query: "[{}]"){
+            _id
+            name
+            price
+            images{
+                url
+            }
+        }
+    }`
+    ).then(res=>console.log(res))}
+
+    goodFind()
+
+    async function categoryFind() {
+        await gql(`query {
+            CategoryFind(query: "[{}]"){
+                _id
+                name
+                goods {
+                    _id name 
+                }
+            }
+        }`).then(result => console.log(result))
+    }
+
+    categoryFind()
+
+//eto mne nel'zya
+// async function orderGood() {
+//     await gql(`query {
+//                     OrderGoodFind(query: "[{}]"){
+//                         _id
+//                         price
+//                         count
+//                         good{
+//                             _id
+//                         }
+//                     }
+//                 }`).then(result => console.log(result))
+//             }
+// orderGood()