Home Explore Help
Sign In
Vladimir-Grabarev
/
A-level_homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

HW store done

Vladimir 2 years ago
parent
d5b67fcb31
commit
ed671b4866
3 changed files with 554 additions and 0 deletions
Unified View Show Diff Stats
  1. 34 0
      HW Мой МАГАЗЫН/index.html
  2. 473 0
      HW Мой МАГАЗЫН/main.js
  3. 47 0
      HW Мой МАГАЗЫН/style.css

+ 34 - 0
HW Мой МАГАЗЫН/index.html
View File 

@@ -0,0 +1,34 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link rel="stylesheet" href="style.css">
 
+    <title>Document</title>
 
+</head>
 
+<body class="body">
 
+    <header class="header">
 
+        <h1>Название магазина</h1>
 
+        <ul>
 
+            <li>
 
+                <button class="header__registration">Регистрация</button>
 
+            </li>
 
+            <li>
 
+                <button class="header__sign-in">Вход</button>
 
+            </li>
 
+            <li>
 
+                <button class="header__cart">Корзина</button>
 
+            </li>
 
+            <li>
 
+                <button class="header__dashboard">История заказов</button>
 
+            </li>
 
+        </ul>
 
+    </header>
 
+    <main class="main">
 
+        <aside class="aside"></aside>
 
+        <div class="main__main-content"></div>
 
+    </main>
 
+    <script src="main.js"></script>
 
+</body>
 
+</html>

+ 473 - 0
HW Мой МАГАЗЫН/main.js
View File 

@@ -0,0 +1,473 @@
 
+let aside              = document.querySelector(".aside");
 
+let content            = document.querySelector(".main__main-content");
 
+let registration = document.querySelector(".header__registration");
 
+let signIn       = document.querySelector(".header__sign-in");
 
+let cart         = document.querySelector(".imaginary-shopping-cart--content");
 
+let cartButton   = document.querySelector(".header__cart");
 
+let dasboard     = document.querySelector(".header__dashboard");
 
+
 
+registration.addEventListener("click", function() {
 
+    location.href = "#/register";
 
+});
 
+
 
+signIn.addEventListener("click", function() {
 
+    location.href = "#/login";
 
+});
 
+
 
+cartButton.addEventListener("click", function() {
 
+    location.href = "#/cart";
 
+});
 
+
 
+dasboard.addEventListener("click", function() {
 
+    location.href = "#/dasboard";
 
+});
 
+
 
+let createStore = function(reducer) {
 
+    let state = reducer(undefined, {});
 
+    let cbs = [];
 
+
 
+    let getState = () => state;
 
+    let subscribe = function(cb) {
 
+        cbs.push(cb);
 
+        return () => cbs = cbs.filter(c => c !== cb);
 
+    };
 
+    let dispatch = function(action) {
 
+        if(typeof(action) == "function") {
 
+            return action(dispatch, getState);
 
+        };
 
+
 
+        let newState = reducer(state, action);
 
+
 
+        if (newState !== state){
 
+            state = newState;
 
+
 
+            for (let cb of cbs) {
 
+                cb();
 
+            };
 
+        };
 
+    };
 
+
 
+    return {
 
+        getState,
 
+        subscribe,
 
+        dispatch
 
+    };
 
+};
 
+
 
+const promiseReducer = function(state={}, {type, name, status, payload, error}) {
 
+    if (type == 'PROMISE'){
 
+        return {
 
+            ...state,
 
+            [name]:{status, payload, error}
 
+        }
 
+    }
 
+
 
+    return state;
 
+};
 
+
 
+const actionPending             = name => ({type: "PROMISE", name, status: 'PENDING'});
 
+const actionFulfilled = (name,payload) => ({type: "PROMISE", name, status: 'FULFILLED', payload});
 
+const actionRejected  = (name,error)   => ({type: "PROMISE", name, status: 'REJECTED', error});
 
+const actionPromise = function(name, promise) {
 
+    return async dispatch => {
 
+        dispatch(actionPending(name));
 
+        try {
 
+            let payload = await promise
 
+            dispatch(actionFulfilled(name, payload))
 
+            return payload
 
+        }
 
+        catch(error){
 
+            dispatch(actionRejected(name, error))
 
+        };
 
+    };
 
+};
 
+
 
+let jwtDecode = function(token) {
 
+    let payloadInBase64;
 
+    let payloadInJson;
 
+    let payload;
 
+
 
+    try {
 
+        payloadInBase64 = token.split(".")[1];
 
+        payloadInJson = atob(payloadInBase64);
 
+        payload = JSON.parse(payloadInJson);
 
+
 
+        return payload;
 
+    }
 
+    catch(err) {
 
+
 
+    }
 
+};
 
+
 
+const authReducer = function(state = {}, {type, token}) {
 
+    let payload;
 
+
 
+    if (state == undefined) {
 
+        if(localStorage.authToken) {
 
+            type = "AUTH_LOGIN";
 
+            token = localStorage.authToken;
 
+        } else {
 
+            type = "AUTH_LOGOUT";
 
+        };
 
+    };
 
+    if (type == "AUTH_LOGIN") {
 
+        payload = jwtDecode(token);
 
+
 
+        if(payload) {
 
+            localStorage.authToken = token;
 
+        }
 
+
 
+        return {
 
+            token: token,
 
+            payload: payload
 
+        }
 
+    };
 
+    if (type == "AUTH_LOGOUT") {
 
+        localStorage.removeItem("authToken");
 
+
 
+        return {};
 
+    };
 
+
 
+    return state || {};
 
+};
 
+
 
+const actionAuthLogin  = token => ({type: "AUTH_LOGIN", token});
 
+const actionAuthLogout = () => ({type: "AUTH_LOGOUT"});
 
+
 
+let cartReducer = function(state={}, {type, good, count=1}) {
 
+    if(type == "CART_ADD") {
 
+        let newState = {...state};
 
+
 
+        if(good["_id"] in state) {
 
+            newState[good._id].count = newState[good._id].count + count;
 
+        }
 
+        else {
 
+            newState = {
 
+                ...state,
 
+                [good._id]: {count, good} 
+            };
 
+        };
 
+
 
+        return newState;
 
+    };
 
+    if(type == "CART_CHANGE") {
 
+        let newState = {...state,
 
+            [good._id]: {count, good}
 
+        };
 
+
 
+        return newState;
 
+    };
 
+    if(type == "CART_DELETE") {
 
+        let newState = {...state};
 
+
 
+        delete newState[good._id];
 
+
 
+        return newState;
 
+    };
 
+    if(type == "CART_CLEAR") {
 
+        return {};
 
+    };
 
+
 
+    return state;
 
+};
 
+
 
+const actionCartAdd    = (good, count=1) => ({type: 'CART_ADD', good, count})
 
+const actionCartChange = (good, count=1) => ({type: 'CART_CHANGE', good, count})
 
+const actionCartDelete = (good)          => ({type: 'CART_DELETE', good})
 
+const actionCartClear  = ()              => ({type: 'CART_CLEAR'})
 
+
 
+const combineReducers = function(reducers) {
 
+    return function (state={}, action) {
 
+        const newState = {};
 
+        
+        for(let [reducerName, reducer] of Object.entries(reducers)) {
 
+            let checkState = reducer(state[reducerName], action);
 
+
 
+            if(state[reducerName] != checkState) {
 
+                newState[reducerName] = checkState;
 
+            };
 
+        };
 
+
 
+        if(Object.keys(newState).length == 0) {
 
+            return state;
 
+        };
 
+
 
+        return {...Object.assign(state, newState)};
 
+    };
 
+};
 
+
 
+const store = createStore(combineReducers({promise: promiseReducer, auth: authReducer, cart: cartReducer}));
 
+store.subscribe(() => console.log(store.getState()));
 
+
 
+const getGQL = function(url) {
 
+    return async function(query, variables) {
 
+        const res = await fetch(url, {
 
+            method: "POST",
 
+            headers: {
 
+                "Content-Type": "application/json",
 
+                ...(localStorage.authToken ? { "Authorization": "Bearer " + localStorage.authToken } : {})
 
+            },
 
+            body: JSON.stringify({ query, variables })
 
+        });
 
+        const data = await res.json();
 
+        if (data.data) {
 
+            return Object.values(data.data)[0];
 
+        }
 
+        else {
 
+            throw new Error(JSON.stringify(data.errors));
 
+        };
 
+    };
 
+};
 
+
 
+const backendURL = 'http://shop-roles.asmer.fs.a-level.com.ua';
 
+
 
+const gql = getGQL(backendURL + '/graphql');
 
+
 
+let actionRootCats = function() {
 
+    return actionPromise("rootCats", gql(`query {
 
+        CategoryFind(query: "[{\\"parent\\":null}]"){
 
+            _id name
 
+      }
 
+    }`));
 
+};
 
+
 
+store.dispatch(actionRootCats());
 
+
 
+let actionCatById = function(_id) {
 
+    return actionPromise("catById", gql(`query catById($q: String){
 
+        CategoryFindOne(query: $q){
 
+            _id name goods {
 
+                _id name price images {
 
+                    url
 
+                }
 
+            }
 
+        }
 
+    }`,
 
+    {q: JSON.stringify([{_id}])}
 
+    ));
 
+};
 
+
 
+let actionGoodById = function(_id) {
 
+    return actionPromise("goodById", gql(`query findGood($goodQuery: String) {
 
+        GoodFindOne(query:$goodQuery) {
 
+            _id name price images {
 
+                url
 
+            }
 
+        }
 
+    }`,
 
+    {goodQuery: JSON.stringify([{"_id": _id}])}
 
+    ));
 
+};
 
+
 
+let actionFullLogin = async function(login, password) {
 
+    let token = await gql("query userLogin($login: String, $password: String) {login(login: $login, password: $password)}", {"login": login, "password": password});
 
+
 
+    store.dispatch(actionAuthLogin(token));
 
+};
 
+
 
+let actionFullRegister = function(login, password, nick) {
 
+    return actionPromise("userRegister", gql(`mutation userRegister($login:String, $password:String, $nick:String) {
 
+        UserUpsert(user: {login:$login, password:$password, nick:$nick}) {
 
+          _id login nick
 
+        }
 
+      }`,
 
+      {
 
+        "login": login,
 
+        "password": password,
 
+        "nick": nick
 
+      }))
 
+};
 
+
 
+let actionOrders = async function() {
 
+    let order = await gql(`mutation makeOrder($order:OrderInput){
 
+        OrderUpsert(order: $order){
 
+          _id
 
+        }
 
+      }`, {
 
+          "order": {
 
+              orderGoods: Object.entries(store.getState().cart).map(([_id, count]) =>({"count": count.count, "good": {_id}}))
 
+            }
 
+      });
 
+
 
+    store.dispatch(actionCartClear());
 
+}
 
+
 
+let createCart = function() {
 
+    const [,route, _id] = location.hash.split('/');
 
+
 
+    if(route == "cart") {
 
+        let str = "<h2>Корзина</h2><table id='table'>";
 
+
 
+        for(let goodId of Object.entries(store.getState().cart)) {
 
+            str += `<tr>
 
+                        <td class="visually-hidden">${goodId[0]}</td>
 
+                        <td>${goodId[1].good.name}</td>
 
+                        <td><img src="${backendURL}/${goodId[1].good.images[0].url}"/></td>
 
+                        <td>Цена: <span id="price">${goodId[1].good.price}</span></td>
 
+                        <td>Кол-во: <input id="count" type="number" value="${goodId[1].count}"></td>
 
+                        <td><button id="clear">Удалить товар</button></td>
 
+                    </tr>`;
 
+        };
 
+        str += "</table><button id='order'>Сделать заказ</button>";
 
+
 
+        content.innerHTML = str;
 
+
 
+        table.addEventListener("click", function(evt) {
 
+            if(evt.target.tagName == "BUTTON") {
 
+                store.dispatch(actionCartDelete(store.getState().cart[evt.path[2].firstElementChild.textContent]?.good))
 
+            };
 
+        });
 
+
 
+        order.addEventListener("click", function() {
 
+            actionOrders();
 
+        });
 
+    }
 
+};
 
+
 
+let createDashbord = async function() {
 
+    const [,route, _id] = location.hash.split('/');
 
+
 
+    if(route == "dasboard") {
 
+        let orders = await gql(`query ordersFind($query:String) {
 
+            OrderFind(query: $query) {
 
+              createdAt orderGoods {
 
+                count good {
 
+                  name price images {
 
+                    url
 
+                  }
 
+                }
 
+              }
 
+            }
 
+          }`,
 
+            {
 
+            "query": JSON.stringify([{}])
 
+            });
 
+        let str = "<h2>История заказов</h2><table>";
 
+    
+        for(let order of orders) {
 
+            str += "<tr>";
 
+            str += `<td>${(new Date(+order.createdAt)).toLocaleString()}</td>`;
 
+            str += "<td>"
 
+            for(let orderGood of order.orderGoods) {
 
+                str += `<ul>
 
+                            <li>${orderGood.good.name}</li>
 
+                            <li><img src="${backendURL}/${orderGood.good.images[0].url}"/></li>
 
+                            <li>Цена: ${orderGood.good.price}</li>
 
+                        </ul>`;
 
+            }
 
+            str += "</td>"
 
+            str += "</tr>";
 
+        };
 
+
 
+        str += "</table>";
 
+
 
+        content.innerHTML = str;
 
+    }
 
+};
 
+
 
+window.onhashchange = () => {
 
+    const [, route, _id] = location.hash.split('/');
 
+
 
+    const routes = {
 
+        category(){
 
+            store.dispatch(actionCatById(_id));
 
+        },
 
+        good(){
 
+            store.dispatch(actionGoodById(_id));
 
+        },
 
+        login(){
 
+            content.innerHTML = `<h2>Вход на сайт</h2>
 
+                                 <input id="login" type="text" name="login" placeholder="Введите ваш логин">
 
+                                 <input id="password" type="password" name="password" placeholder="Введите ваш пароль">
 
+                                 <button id="sign_in">Войти</button>`;
 
+            sign_in.addEventListener("click", function() {
 
+                actionFullLogin(login.value, password.value);
 
+                // store.dispatch(actionFullLogin(login.value, password.value));
 
+            });
 
+        },
 
+        register(){
 
+            content.innerHTML = `<h2>Регистрация</h2>
 
+                                 <input id="login" type="text" name="reg-login" placeholder="Введите ваш будущий логин">
 
+                                 <input id="password" type="text" name="reg-password" placeholder="Введите ваш будущий пароль">
 
+                                 <input id="nick" type="text" name="reg-nick" placeholder="Введите ваш nick">
 
+                                 <button id="registr">Зарегистрироваться</button>`;
 
+            registr.addEventListener("click", function() {
 
+                store.dispatch(actionFullRegister(login.value, password.value, nick.value));
 
+            });
 
+        },
 
+        cart() {
 
+            createCart();        
+        },
 
+        dasboard() {
 
+            createDashbord();
 
+        }
 
+    };
 
+
 
+    if (route in routes) {
 
+        routes[route]();
 
+    };
 
+};
 
+
 
+window.onhashchange();
 
+
 
+store.subscribe(() => {
 
+    const {rootCats} = store.getState().promise;
 
+    if (rootCats?.payload){
 
+        let ul = document.createElement("ul");
 
+
 
+        aside.innerHTML = '';
 
+
 
+        for (const {_id, name} of rootCats?.payload){
 
+            let li = document.createElement("li");
 
+            let link = document.createElement('a');
 
+            link.href       = `#/category/${_id}`;
 
+            link.innerText  = name;
 
+
 
+            li.append(link);
 
+            ul.append(li);
 
+        }
 
+
 
+        aside.append(ul);
 
+    };
 
+});
 
+
 
+store.subscribe(() => {
 
+    const {catById} = store.getState().promise;
 
+    const [,route, _id] = location.hash.split('/')
 
+    if (catById?.payload && route === 'category'){
 
+        const {name} = catById.payload 
+        content.innerHTML = `<h1>${name}</h1> ТУТ ДОЛЖНЫ БЫТЬ ПОДКАТЕГОРИИ`
 
+        for (const {_id, name, price, images} of catById.payload.goods){
 
+            const card      = document.createElement('div')
 
+            card.innerHTML = `<h2>${name}</h2>
 
+                              <img src="${backendURL}/${images[0].url}" />
 
+                              <strong>${price}</strong>
 
+                              <a href="#/good/${_id}">ССЫЛКА НА СТРАНИЦУ ТОВАРА</a>`
 
+            content.append(card);
 
+        }
 
+    }
 
+});
 
+
 
+store.subscribe(() => {
 
+    const {goodById} = store.getState().promise;
 
+    const [,route, _id] = location.hash.split('/');
 
+
 
+    if (goodById?.payload && route == "good") {
 
+        const {name} = goodById.payload;
 
+
 
+        content.innerHTML = `<h1>${name}</h1>`;
 
+
 
+        const card = document.createElement('div');
 
+
 
+        card.innerHTML = `<h2>${goodById.payload.name}</h2>
 
+                          <img src="${backendURL}/${goodById.payload.images[0].url}" />
 
+                          <strong>${goodById.payload.price}</strong>
 
+                          <button id="goodAdd">Добавить в корзину</button>`;
 
+        content.append(card);
 
+        goodAdd.addEventListener("click", function() {
 
+            store.dispatch(actionCartAdd(goodById.payload));
 
+        });
 
+    };
 
+});
 
+
 
+store.subscribe(createCart);

+ 47 - 0
HW Мой МАГАЗЫН/style.css
View File 

@@ -0,0 +1,47 @@
 
+.body {
 
+    font-family: sans-serif;
 
+    font-size: 18px;
 
+    font-weight: 24px;
 
+}
 
+
 
+.header {
 
+    display: flex;
 
+    flex-wrap: nowrap;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+}
 
+
 
+ul {
 
+    margin: 0;
 
+    padding: 0;
 
+    list-style: none;
 
+}
 
+
 
+.main {
 
+    display: flex;
 
+    flex-wrap: nowrap;
 
+}
 
+
 
+.main__main-content {
 
+    flex-grow: 1;
 
+}
 
+
 
+.main__main-content img {
 
+    width: 100px;
 
+}
 
+
 
+.visually-hidden:not(:focus):not(:active),
 
+input[type=checkbox].visually-hidden,
 
+input[type=radio].visually-hidden {
 
+    position:absolute;
 
+    width:1px;
 
+    height:1px;
 
+    margin:-1px;
 
+    border:0;
 
+    padding:0;
 
+    white-space:nowrap;
 
+    -webkit-clip-path:inset(100%);
 
+    clip-path:inset(100%);
 
+    clip:rect(0 0 0 0);
 
+    overflow:hidden
 
+}