HomeWork/js14/main.js

// const gql = (url, query, variables={}) =>
//     fetch(url, {
//       method: 'POST',
//       body: JSON.stringify({query,variables}), 
//       headers: {
//        'Content-Type': 'application/json',
//       }
//     }).then((res) => res.json());

//  (async () => {
//     console.log(await gql(`http://shop-roles.asmer.fs.a-level.com.ua/graphql`, `query cats{
//       CategoryFind(query:"[{}]"){
//         name goods{
//           name 
//         }
//       }
//     }`))
// })()





// const getGQL = url =>
//     (query, variables) => fetch(url, {
//         //метод
//         method: 'POST',
//         headers: {
//             //заголовок content-type
//             "Content-Type": "application/json"
//         },
//         body: JSON.stringify({query, variables})
//         //body с ключами query и variables
        
//     }).then(res => res.json()).then(
//         obj => {
//           let login = obj.data.login; 
//           console.log(login);

//           if (!login) {
//             throw new Error('login undefind');
//           }
//           return login;;
//         })
       
//         //расковырять data, если все ок - отдать data.login или data.CategoryFindOne, или шо там еще
//         //если есть errors и нет data, то выбросить исключение и тем самым зареджектить промис
        
//       .catch(console.log)

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


//Task Светофор

// const div = document.createElement('div');
// div.id = 'trafficLights';
// div.style.backgroundColor = 'rgb(59, 52, 52)';
// div.style.width = '200px';
// div.style.height = '350px';

// const divRed = document.createElement('div');
// divRed.id = 'red';
// divRed.style.backgroundColor = 'rgb(232, 235, 209)';
// divRed.style.width = '90px';
// divRed.style.height = '90px';
// divRed.style.marginLeft = "27%";
// divRed.style.marginTop = "7%";
// divRed.style.display = 'inline-block';
// divRed.style.borderRadius  = '50px';

// const divOrange = document.createElement('div');
// divOrange.id = 'orange';
// divOrange.style.backgroundColor = 'rgb(232, 235, 209)';
// divOrange.style.width = '90px';
// divOrange.style.height = '90px';
// divOrange.style.marginLeft = "27%";
// divOrange.style.marginTop = "10%";
// divOrange.style.borderRadius  = '50px';

// const divGreen = document.createElement('div');
// divGreen.id = 'green';
// divGreen.style.backgroundColor = 'rgb(232, 235, 209)';
// divGreen.style.width = '90px';
// divGreen.style.height = '90px';
// divGreen.style.marginLeft = "27%";
// divGreen.style.marginTop = "10%";
// divGreen.style.borderRadius  = '50px';

// document.body.append(div);
// div.append(divRed);
// div.append(divOrange);
// div.append(divGreen);

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

// async function trafficLight(){
//     while (true){
//         divGreen.style.backgroundColor = 'green';//включаем зеленый
//         await delay(6000);
//         divGreen.style.backgroundColor = 'rgb(232, 235, 209)';
//         divOrange.style.backgroundColor = 'rgb(237, 138, 57)';// включаем желтый
//         await delay(2000);
//         divOrange.style.backgroundColor = 'rgb(232, 235, 209)';
//         divRed.style.backgroundColor = 'rgb(235, 12, 23)'; //включаем красный
//         await delay(3500);
//         divRed.style.backgroundColor = 'rgb(232, 235, 209)';
//     }
// }
//  trafficLight();



 //Task domEventPromise


// const button = document.createElement('button');
// document.body.appendChild(button).innerText = "Click";

// function domEventPromise (knopka, eventName) {
//   return new Promise((resolve) => {
//      knopka.addEventListener(eventName, function getEvent(e) {
//       this.removeEventListener(eventName, getEvent);
//         resolve(e);
//     });
//   })
// }

// domEventPromise(button, 'click').then((e) => {
//   console.log('event click happens', e);
// })



// PedestrianTrafficLight


// const div = document.createElement('div');
// div.id = 'trafficLights';
// div.style.backgroundColor = 'rgb(59, 52, 52)';
// div.style.width = '200px';
// div.style.height = '350px';

// const divRed = document.createElement('div');
// divRed.id = 'red';
// divRed.style.backgroundColor = 'rgb(232, 235, 209)';
// divRed.style.width = '90px';
// divRed.style.height = '90px';
// divRed.style.marginLeft = "27%";
// divRed.style.marginTop = "7%";
// divRed.style.display = 'inline-block';
// divRed.style.borderRadius  = '50px';

// const divGreen = document.createElement('div');
// divGreen.id = 'green';
// divGreen.style.backgroundColor = 'rgb(232, 235, 209)';
// divGreen.style.width = '90px';
// divGreen.style.height = '90px';
// divGreen.style.marginLeft = "27%";
// divGreen.style.marginTop = "10%";
// divGreen.style.borderRadius  = '50px';

// document.body.append(div);
// div.append(divRed);
// div.append(divGreen);

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

// const button = document.createElement('button');
// document.body.appendChild(button).innerText = "Click";
// button.style.marginTop = "30px";

// function domEventPromise (knopka, eventName) {
//   return new Promise((resolve) => {
//      knopka.addEventListener(eventName, function getEvent(e) {
//       this.removeEventListener(eventName, getEvent);
//       button.setAttribute('disabled', true);
//       divRed.style.backgroundColor = 'rgb(232, 235, 209)';
//       divGreen.style.backgroundColor = 'green';
//       delay(2000).then(() => button.removeAttribute('disabled'));
//       resolve(e);
//     })
//   })
// }

// async function trafficLight(){
//   while (true){
//     divRed.style.backgroundColor = 'rgb(232, 235, 209)';
//     divGreen.style.backgroundColor = 'green';
//     await Promise.race([delay(2000), domEventPromise(button, 'click')]);
//     divRed.style.backgroundColor = 'rgb(235, 12, 23)';
//     divGreen.style.backgroundColor = 'rgb(232, 235, 209)';
//     await Promise.race([delay(2000), domEventPromise(button, 'click')]);
//   }
// }

// trafficLight();


// Task speedtest

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

async function speedtest(getPromise, count,parallel=1){
  let timedurationStart = performance.now();
  let arrFetch = [];
  for (let q = 0; q < parallel; q++) {
    arrFetch[q] = await getPromise();
  }
const timeBetween = performance.now();
  for (let i = 0; i < count; i++) {
    await Promise.all(arrFetch);
  }
  let timedurationEnd = performance.now();
      return {
          duration: timedurationEnd - timedurationStart,
          querySpeed: count / (timeBetween - timedurationStart), 
          queryDuration: (timeBetween - timedurationStart) / count, 
          parallelSpeed: (count * parallel)/ (timedurationEnd - timedurationStart),
          parallelDuration: (timedurationEnd - timedurationStart) / (count * parallel), 
      }
  }

speedtest(() => delay(1000), 10, 10 ).then(result => console.log(result))
speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5).then(result => console.log(result))