hw_javascript/12/index.js

// graphql tasks

// first

// async function gql(url, query, variables) {
//   let response = await fetch(url, {
//     method: "POST",
//     headers: { "content-type": "application/json" },
//     body: JSON.stringify({ query, variables }),
//   });
//   return await response.json();
// }

// (async () => {
//   let data = await gql(
//     "http://shop-roles.asmer.fs.a-level.com.ua/graphql",
//     `query cats($q:String) {
//     CategoryFind(query:$q) {
//       name
//       goods {
//         name
//         images {
//           url
//         }
//       }
//     }
//   }`,
//     { q: "[{}]" }
//   );
//   return showData(data.data.CategoryFind);
// })();

// function showData(object) {
//   console.log(object);
//   let table = document.createElement("table");
//   table.setAttribute("border", "1");
//   for (let key of Object.keys(object)) {
//     let tr = document.createElement("tr");
//     let th = document.createElement("th");
//     let td = document.createElement("td");
//     th.innerText = object[key].name;
//     if (Array.isArray(object[key].goods)) {
//       let subObj = object[key].goods;
//       let subTable = document.createElement("table");
//       subTable.setAttribute("border", "1");
//       for (let key of Object.keys(subObj)) {
//         let subTr = document.createElement("tr");
//         let subTh = document.createElement("th");
//         let subTd = document.createElement("td");
//         subTh.innerText = subObj[key].name;
//         if (subObj[key].images && Array.isArray(subObj[key].images)) {
//           let imgTr = document.createElement("tr");
//           let imgTh = document.createElement("th");
//           let imgTd = document.createElement("td");
//           subTd.innerHTML = `<img src="http://shop-roles.asmer.fs.a-level.com.ua/${subObj[key].images[0].url}" alt="imgGood" style="height: 200px; width: 400px;">`;
//         } else {
//           subTd.innerText = subObj[key].goods;
//         }
//         subTr.appendChild(subTh);
//         subTr.appendChild(subTd);
//         subTable.appendChild(subTr);
//       }
//       td.appendChild(subTable);
//     } else {
//       td.innerText = object[key].goods;
//     }
//     tr.appendChild(th);
//     tr.appendChild(td);
//     table.appendChild(tr);
//     container.appendChild(table);
//   }
// }

// second

// const getGQL = (url) => (query, variables) =>
//   fetch(url, {
//     method: "POST",
//     headers: {
//       "Content-Type": "application/json",
//     },
//     body: JSON.stringify({ query, variables }),
//   })
//     .then((res) => res.json())
//     .then((data) => {
//       try {
//         return data.data.login;
//       } catch (e) {
//         throw new Error("Something wrong");
//       }
//     });

// const gql = getGQL("http://shop-roles.asmer.fs.a-level.com.ua/graphql");
// (async function () {
//   console.log(
//     await gql(
//       `
//       query log($login:String, $password:String){
//           login(login:$login, password:$password)
//       }
//   `,
//       { login: "tst", password: "123" }
//     )
//   );
// })();

// Async/Await Homework 2

// Светофор

// const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));

// async function trafficLight() {
//   let container = document.createElement("div");
//   while (true) {
//     container.style.background = "green";
//     let green = document.createElement("p");
//     green.innerText = "Зелёный свет включен";
//     container.appendChild(green);
//     lights.appendChild(container);
//     await delay(10000);
//     container.removeChild(container.firstChild);
//     container.style.background = "yellow";
//     let yellow = document.createElement("p");
//     yellow.innerText = "Желтый свет включен";
//     container.appendChild(yellow);
//     lights.appendChild(container);
//     await delay(2000);
//     container.removeChild(container.firstChild);
//     container.style.background = "red";
//     let red = document.createElement("p");
//     red.innerText = "Красный свет включен";
//     container.appendChild(red);
//     lights.appendChild(container);
//     await delay(7000);
//     container.removeChild(container.firstChild);
//   }
// }
// trafficLight();

// Stage 2

// function delay(ms, el) {
//   return new Promise((ok) => {
//     let sec = ms / 1000;
//     (function counter(s) {
//       if (document.getElementById("timer") === null) {
//         let p = document.createElement("p");
//         p.id = "timer";
//         p.innerText = sec;
//         el.appendChild(p);
//       }
//       if (document.getElementById("timer") !== null) {
//         if (sec > 0) {
//           timer.innerText = sec;
//           setTimeout(() => counter(sec--), 1000);
//         } else {
//           el.removeChild(timer);
//           return ok();
//         }
//       }
//     })();
//   });
// }

// async function trafficLightImproved(gms, yms, rms, el) {
//   let container = document.createElement("div");
//   while (true) {
//     container.style.background = "green";
//     let green = document.createElement("p");
//     green.innerText = "Зелёный свет включен";
//     container.appendChild(green);
//     el.appendChild(container);
//     await delay(gms, el);
//     container.removeChild(container.firstChild);
//     container.style.background = "yellow";
//     let yellow = document.createElement("p");
//     yellow.innerText = "Желтый свет включен";
//     container.appendChild(yellow);
//     el.appendChild(container);
//     await delay(yms, el);
//     container.removeChild(container.firstChild);
//     container.style.background = "red";
//     let red = document.createElement("p");
//     red.innerText = "Красный свет включен";
//     container.appendChild(red);
//     el.appendChild(container);
//     await delay(rms, el);
//     container.removeChild(container.firstChild);
//   }
// }
// trafficLightImproved(10000, 2000, 7000, lights);

// domEventPromise

// function domEventPromise(element, eventName) {
//   return new Promise((resolve) => {
//     element.addEventListener(eventName, (event) => {
//       element.disabled = true;
//       element.removeEventListener(eventName, () => {});
//       return resolve(event);
//     });
//   });
// }

// domEventPromise(knopka, "click").then((e) =>
//   console.log(`event ${e.type} happens`, e)
// );

// domEventPromise(knopka, "contextmenu").then((e) =>
//   console.log(`event ${e.type} happens`, e)
// );

// PedestrianTrafficLight

// function domEventPromisePedestrian(element, eventName) {
//   return new Promise((resolve) => {
//     element.addEventListener(eventName, (event) => {
//       console.log("Resolve");
//       return resolve(event);
//     });
//   });
// }

// function delay(ms, el) {
//   return new Promise((ok) => {
//     let sec = ms / 1000;
//     (function counter(s) {
//       if (document.getElementById("timer") === null) {
//         let p = document.createElement("p");
//         p.id = "timer";
//         p.innerText = sec;
//         el.appendChild(p);
//       }
//       if (document.getElementById("timer") !== null) {
//         if (sec > 0) {
//           timer.innerText = sec;
//           if (
//             infoBlock.classList.contains("red") &&
//             document.getElementById("pedestrianBtn") === null
//           ) {
//             let pedestrianBtn = document.createElement("button");
//             pedestrianBtn.id = "pedestrianBtn";
//             pedestrianBtn.innerText = "Turn on green light";
//             el.appendChild(pedestrianBtn);
//             if (+timer.innerText > 4) {
//               (async function () {
//                 async function simpleDelay(ms) {
//                   console.log(`Delay: ${ms / 1000} seconds`);
//                   return new Promise((ok) => setTimeout(() => ok(ms), ms));
//                 }
//                 await simpleDelay(2000);
//                 await Promise.race([
//                   domEventPromisePedestrian(pedestrianBtn, "click").then(() =>
//                     delay(0)
//                   ),
//                   simpleDelay(ms),
//                 ]);
//               })();
//             }
//           }
//           if (
//             infoBlock.classList.contains("green") &&
//             document.getElementById("pedestrianBtn") !== null
//           ) {
//             el.removeChild(pedestrianBtn);
//           }
//           setTimeout(() => counter(sec--), 1000);
//         } else {
//           el.removeChild(timer);
//           return ok();
//         }
//       }
//     })();
//   });
// }

// async function trafficLightPedestrian(gms, rms, el) {
//   let container = document.createElement("div");
//   container.id = "infoBlock";
//   while (true) {
//     container.classList.add("green");
//     let green = document.createElement("p");
//     green.innerText = "Зелёный свет для пешеходов включен";
//     container.appendChild(green);
//     el.appendChild(container);
//     await delay(gms, el);
//     container.classList.remove("green");
//     container.removeChild(container.firstChild);
//     container.classList.add("red");
//     let red = document.createElement("p");
//     red.innerText = "Красный свет для пешеходов включен";
//     container.appendChild(red);
//     el.appendChild(container);
//     await delay(rms, el);

//     container.classList.remove("red");
//     container.removeChild(container.firstChild);
//   }
// }
// trafficLightPedestrian(3000, 10000, pedestrianLights);

// speedtest

// const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));

// async function speedtest(getPromise, count = 1, parallel = 1) {
//   let duration;
//   let querySpeed;
//   let queryDuration;
//   let parallelSpeed;
//   let parallelDuration;
//   let start = performance.now();
//   let queries = [];

//   await (async () => {
//     let getPromises = [];
//     for (let i = 0; i < count; i++) {
//       for (let j = 0; j < parallel; j++) {
//         getPromises.push(getPromise);
//       }
//       let query = performance.now();
//       await Promise.all([...getPromises.map((el) => el())]);
//       queries.push(performance.now() - query);
//     }
//   })();

//   duration = performance.now() - start;
//   querySpeed = (count * parallel) / 100000;
//   queryDuration = queries.reduce((a, b) => a + b) / queries.length;
//   parallelSpeed = duration / (count * parallel) / 10000;
//   parallelDuration = duration / (count * parallel);

//   return {
//     duration, //общая длительность работы цикла
//     querySpeed, //реальная средняя скорость запроса
//     queryDuration, //реальное среднее время запроса
//     parallelSpeed, //скорость в запросах в миллисекунду
//     parallelDuration, //среднее время обработки запроса параллельно
//   };
// }

// speedtest(() => delay(1000), 5, 5).then((result) => console.log(result));