|
|
@@ -0,0 +1,576 @@
|
|
|
+//********REDUX*********
|
|
|
+function createStore(reducer){
|
|
|
+ let state = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
|
|
|
+ let cbs = [] //массив подписчиков
|
|
|
+
|
|
|
+ const getState = () => state //функция, возвращающая переменную из замыкания
|
|
|
+ const subscribe = cb => (cbs.push(cb), //запоминаем подписчиков в массиве
|
|
|
+ () => cbs = cbs.filter(c => c !== cb)) //возвращаем функцию unsubscribe, которая удаляет подписчика из списка
|
|
|
+
|
|
|
+ const dispatch = action => {
|
|
|
+ if (typeof action === 'function'){ //если action - не объект, а функция
|
|
|
+ return action(dispatch, getState) //запускаем эту функцию и даем ей dispatch и getState для работы
|
|
|
+ }
|
|
|
+ const newState = reducer(state, action) //пробуем запустить редьюсер
|
|
|
+ if (newState !== state){ //проверяем, смог ли редьюсер обработать action
|
|
|
+ state = newState //если смог, то обновляем state
|
|
|
+ for (let cb of cbs) cb() //и запускаем подписчиков
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ getState, //добавление функции getState в результирующий объект
|
|
|
+ dispatch,
|
|
|
+ subscribe //добавление subscribe в объект
|
|
|
+ }
|
|
|
+}
|
|
|
+const jwtDecode = token => {
|
|
|
+ console.log(token)
|
|
|
+ try {
|
|
|
+ return JSON.parse(atob(token.split('.')[1]))
|
|
|
+ }
|
|
|
+ catch (e){
|
|
|
+ console.log("ERROR" , e.message)
|
|
|
+ }
|
|
|
+}
|
|
|
+function authReducer(state, {type, token}) {
|
|
|
+ if (!state){
|
|
|
+ if (localStorage.authToken) {
|
|
|
+ type = 'AUTH_LOGIN'
|
|
|
+ token = localStorage.authToken
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type === 'AUTH_LOGIN'){
|
|
|
+ let payload = jwtDecode(token)
|
|
|
+ if(payload){
|
|
|
+ localStorage.authToken = token
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ token,
|
|
|
+ payload
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ if (type === 'AUTH_LOGOUT'){
|
|
|
+ delete localStorage.authToken
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ return state
|
|
|
+}
|
|
|
+const actionAuthLogin = token => ({type: 'AUTH_LOGIN', token})
|
|
|
+const actionAuthLogout = () => ({type: 'AUTH_LOGOUT'})
|
|
|
+
|
|
|
+function promiseReducer(state={}, {type, status, payload, error, name}){
|
|
|
+ if (type === 'PROMISE'){
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ [name]:{status, payload, error}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return state;
|
|
|
+}
|
|
|
+const actionPending = name => ({type: 'PROMISE', status: 'PENDING', name})
|
|
|
+const actionResolved = (name, payload) => ({type: 'PROMISE', status: 'RESOLVED', name, payload})
|
|
|
+const actionRejected = (name, error) => ({type: 'PROMISE', status: 'REJECTED', name, error})
|
|
|
+const actionPromise = (name, promise) =>
|
|
|
+ async dispatch => {
|
|
|
+ dispatch(actionPending(name))
|
|
|
+ try {
|
|
|
+ let data = await promise
|
|
|
+ dispatch(actionResolved(name, data))
|
|
|
+ return data
|
|
|
+ }
|
|
|
+ catch(error){
|
|
|
+ dispatch(actionRejected(name, error))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+function combineReducers(reducers) {
|
|
|
+ return (state={}, action) => {
|
|
|
+ const newState = {}
|
|
|
+ for (const [reducerName, reducer] of Object.entries(reducers)) {
|
|
|
+ const newSubState = reducer(state[reducerName], action)
|
|
|
+ if(newSubState !== state[reducerName]) {
|
|
|
+ newState[reducerName] = newSubState
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (Object.entries(newState).length !== 0){
|
|
|
+ return {...state, ...newState}
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return state
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+const combinedReducer = combineReducers({promise: promiseReducer, auth: authReducer, card: cardReducer})
|
|
|
+
|
|
|
+const store = createStore(combinedReducer)
|
|
|
+store.subscribe(() => console.log(store.getState()))
|
|
|
+//const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));
|
|
|
+//store.dispatch(actionPromise('delay1000', delay(1000)))
|
|
|
+//store.dispatch(actionAuthLogin(token))
|
|
|
+//*****************************************************************************
|
|
|
+
|
|
|
+
|
|
|
+const getGQL = url =>
|
|
|
+ async (query, variables={}) => {
|
|
|
+ let obj = await fetch(url, {
|
|
|
+ method: 'POST',
|
|
|
+ headers: localStorage.authToken ? {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ "Authorization": "Bearer " + localStorage.authToken
|
|
|
+ } : {"Content-Type": "application/json"},
|
|
|
+ body: JSON.stringify({ query, variables })
|
|
|
+ })
|
|
|
+ let a = await obj.json()
|
|
|
+ if (!a.data && a.errors)
|
|
|
+ throw new Error(JSON.stringify(a.errors))
|
|
|
+ return a.data[Object.keys(a.data)[0]]
|
|
|
+ }
|
|
|
+const backURL = 'http://shop-roles.asmer.fs.a-level.com.ua'
|
|
|
+const gql = getGQL(backURL + '/graphql');
|
|
|
+
|
|
|
+// Отрисовка страницы с категориями и товарами
|
|
|
+const actionRootCats = () =>
|
|
|
+ actionPromise('rootCats', gql(`query {
|
|
|
+ CategoryFind(query: "[{\\"parent\\":null}]"){
|
|
|
+ _id name
|
|
|
+ }
|
|
|
+ }`))
|
|
|
+
|
|
|
+const actionCatById = (_id) => //добавить подкатегории
|
|
|
+ actionPromise('catById', gql(`query catById($q: String){
|
|
|
+ CategoryFindOne(query: $q){
|
|
|
+ _id name,
|
|
|
+ goods{
|
|
|
+ _id name price images {
|
|
|
+ url
|
|
|
+ }
|
|
|
+ },
|
|
|
+ subCategories{
|
|
|
+ _id name, subCategories{
|
|
|
+ name
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }`, {q: JSON.stringify([{_id}])}))
|
|
|
+
|
|
|
+const actionGoodById = (_id) =>
|
|
|
+ actionPromise('goodById', gql(`query goodById($q: String){
|
|
|
+ GoodFindOne(query: $q){
|
|
|
+ _id name description price images{
|
|
|
+ url
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }`, {q: JSON.stringify([{_id}])}))
|
|
|
+
|
|
|
+// отрисовка заказов
|
|
|
+const actionOrderFindOne = () =>
|
|
|
+ actionPromise('orderfind', gql(`query orderfind{
|
|
|
+ OrderFindOne(query:"[{}]"){
|
|
|
+ _id createdAt total orderGoods{
|
|
|
+ _id createdAt price count good{
|
|
|
+ _id name description images{
|
|
|
+ _id url
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }`))
|
|
|
+
|
|
|
+store.dispatch(actionRootCats())
|
|
|
+store.subscribe(() => {
|
|
|
+ const {promise} = store.getState()
|
|
|
+ if (promise?.rootCats?.payload){
|
|
|
+ aside.innerHTML = ''
|
|
|
+ for (const {_id, name} of promise?.rootCats?.payload){
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = `#/category/${_id}`
|
|
|
+ link.innerText = name
|
|
|
+ aside.append(link)
|
|
|
+ }
|
|
|
+ // отрисовка заказов
|
|
|
+ get.innerHTML = ''
|
|
|
+ let btnGet = document.createElement('a');
|
|
|
+ btnGet.textContent = 'order find'
|
|
|
+ btnGet.href = '#/orders/'
|
|
|
+ get.append(btnGet)
|
|
|
+ }
|
|
|
+})
|
|
|
+store.subscribe(() => {
|
|
|
+ const {promise} = store.getState()
|
|
|
+ const [,route, _id] = location.hash.split('/')
|
|
|
+ if (promise?.catById?.payload && route === 'category'){
|
|
|
+ const {name} = promise.catById.payload
|
|
|
+ main.innerHTML = `<h1>${name}</h1>`
|
|
|
+ if(promise.catById.payload?.subCategories){
|
|
|
+ for (const {_id , name} of promise.catById.payload.subCategories) {
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = `#/category/${_id}`
|
|
|
+ link.textContent = name
|
|
|
+ main.append(link)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (const {_id, name, price, images} of promise.catById.payload.goods){
|
|
|
+ const card = document.createElement('div')
|
|
|
+ card.className = 'item--main'
|
|
|
+ card.innerHTML = `<h2>${name}</h2>
|
|
|
+ <img src="${backURL}/${images[0].url}" />
|
|
|
+ <strong>Цена: ${price} USD</strong><br>
|
|
|
+ <a href="#/good/${_id}">Ссылка на страницу товара: #/good/${_id}</a>`
|
|
|
+ let btn = document.createElement('button')
|
|
|
+ btn.textContent = 'Buy now'
|
|
|
+ btn.onclick = () => {
|
|
|
+ store.dispatch(actionCardAdd({_id, name, price, images}, 1))
|
|
|
+ }
|
|
|
+ card.append(btn)
|
|
|
+ main.append(card)
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+store.subscribe(() => {
|
|
|
+ const {promise} = store.getState()
|
|
|
+ const [,route, _id] = location.hash.split('/')
|
|
|
+ if (promise?.goodById?.payload && route === 'good' && window.location.href.includes(`#/good/${_id}`)){
|
|
|
+ const {_id ,name, images, price, description } = promise.goodById.payload
|
|
|
+ main.innerHTML = ''
|
|
|
+ let div = document.createElement('div')
|
|
|
+ div.className = 'item--main'
|
|
|
+ div.innerHTML = `<h1>${name}</h1>
|
|
|
+ <img src="${backURL}/${images[0].url}" />
|
|
|
+ <p><strong>Описание:</strong> <br> ${description}</p>
|
|
|
+ <p><strong>ID:</strong> ${_id}</p>
|
|
|
+ <strong>Цена: ${price} USD</strong>`
|
|
|
+ main.append(div);
|
|
|
+ }
|
|
|
+})
|
|
|
+//*****************************************************************************
|
|
|
+
|
|
|
+//Отрисовка страницы с формой авторизации
|
|
|
+//const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOnsiaWQiOiI2MWE0ZGFjZGM3NTBjMTJiYTZiYTQwMTUiLCJsb2dpbiI6ImFsZXhyZXpuaWNoZW5rbyIsImFjbCI6WyI2MWE0ZGFjZGM3NTBjMTJiYTZiYTQwMTUiLCJ1c2VyIl19LCJpYXQiOjE2MzgxOTQxMDN9.HCRoXBSLYcswzfYk5kPmtN9cx-7XYBRZzi-WDt_kNQk';
|
|
|
+//const login = "alexreznichenko"
|
|
|
+//const password = "alexreznichenko"
|
|
|
+
|
|
|
+const actionLogin = (login, password) =>
|
|
|
+ actionPromise('login', gql(`query login($login: String, $password: String){
|
|
|
+ login(login: $login, password: $password)
|
|
|
+ }`, {login: login, password: password}))
|
|
|
+const actionFullLogin = (login, password) =>
|
|
|
+ async dispatch => {
|
|
|
+ let token = await dispatch(actionLogin(login, password))
|
|
|
+ if (token){
|
|
|
+ dispatch(actionAuthLogin(token))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+const actionRegister = (login, password) =>
|
|
|
+ actionPromise('register', gql(`mutation register($login:String, $password: String){
|
|
|
+ UserUpsert(user:{
|
|
|
+ login: $login,
|
|
|
+ password: $password,
|
|
|
+ nick: $login}){
|
|
|
+ _id login
|
|
|
+ }
|
|
|
+ }`, {login: login, password: password}))
|
|
|
+const actionFullRegister = (login, password) =>
|
|
|
+ async dispatch => {
|
|
|
+ let allow = await dispatch(actionRegister(login, password))
|
|
|
+ if (allow) {
|
|
|
+ let token = await dispatch(actionLogin(login, password))
|
|
|
+ if (token){
|
|
|
+ console.log('okay')
|
|
|
+ dispatch(actionAuthLogin(token))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+// создание кнопок авторизации
|
|
|
+store.subscribe(() => {
|
|
|
+ const {auth} = store.getState()
|
|
|
+ if (!auth?.payload){
|
|
|
+ wrapper.innerHTML = '';
|
|
|
+ let signIn = document.createElement('a');
|
|
|
+ let signUp = document.createElement('a');
|
|
|
+ signIn.textContent = 'Sign in'
|
|
|
+ signUp.textContent = 'Sign up'
|
|
|
+ signIn.onclick = () => {
|
|
|
+ signIn.style.display = 'none'
|
|
|
+ signUp.style.display = 'none'
|
|
|
+ let form = document.createElement('from')
|
|
|
+ let logInp = document.createElement('input')
|
|
|
+ let passInp = document.createElement('input')
|
|
|
+ let btnReg = document.createElement('a')
|
|
|
+ logInp.placeholder = 'login'
|
|
|
+ logInp.type = 'text'
|
|
|
+ passInp.placeholder = 'password'
|
|
|
+ passInp.type = 'password'
|
|
|
+ btnReg.textContent = 'Log In'
|
|
|
+ btnReg.onclick = () => {
|
|
|
+ if (logInp.value !== '' && passInp.value !== '') {
|
|
|
+ btnReg.href = `#/login/${logInp.value}*${passInp.value}`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ form.append(logInp, passInp, btnReg)
|
|
|
+ wrapper.append(form)
|
|
|
+ }
|
|
|
+ signUp.onclick = () => {
|
|
|
+ signIn.style.display = 'none'
|
|
|
+ signUp.style.display = 'none'
|
|
|
+ let form = document.createElement('from')
|
|
|
+ let logInp = document.createElement('input')
|
|
|
+ let passInp = document.createElement('input')
|
|
|
+ let btnReg = document.createElement('a')
|
|
|
+ logInp.placeholder = 'login'
|
|
|
+ logInp.type = 'text'
|
|
|
+ passInp.placeholder = 'password'
|
|
|
+ passInp.type = 'password'
|
|
|
+ btnReg.textContent = 'Registration'
|
|
|
+ btnReg.onclick = () => {
|
|
|
+ if (logInp.value !== '' && passInp.value !== '') {
|
|
|
+ btnReg.href = `#/register/${logInp.value}*${passInp.value}`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ form.append(logInp, passInp, btnReg)
|
|
|
+ wrapper.append(form)
|
|
|
+ }
|
|
|
+ wrapper.append(signIn, signUp)
|
|
|
+ }
|
|
|
+})
|
|
|
+// отрисовка пользователя
|
|
|
+store.subscribe(() => {
|
|
|
+ const {auth} = store.getState()
|
|
|
+ if (auth?.payload){
|
|
|
+ wrapper.innerHTML = ''
|
|
|
+ let {iat} = auth.payload
|
|
|
+ let {id, login} = auth.payload.sub
|
|
|
+ let date = new Date(iat * 1000);
|
|
|
+ let hours = date.getHours();
|
|
|
+ let minutes = "0" + date.getMinutes();
|
|
|
+ let seconds = "0" + date.getSeconds();
|
|
|
+ let formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
|
|
|
+
|
|
|
+ let allow = document.createElement('div');
|
|
|
+ allow.style.display = 'flex'
|
|
|
+ allow.style.flexDirection = 'column'
|
|
|
+ allow.innerHTML = `<strong>Вы успешно авторизированны</strong>
|
|
|
+ <strong>Ваш логин: ${login}</strong>
|
|
|
+ <strong>Ваш ID: ${id}</strong>
|
|
|
+ <strong>Время авторизации: ${formattedTime}</strong>`
|
|
|
+ let btnLogout = document.createElement('button')
|
|
|
+ btnLogout.textContent = 'LOGOUT'
|
|
|
+ btnLogout.onclick = () => {
|
|
|
+ wrapper.innerHTML = ''
|
|
|
+ store.dispatch(actionAuthLogout());
|
|
|
+ }
|
|
|
+ wrapper.append(allow, btnLogout)
|
|
|
+ }
|
|
|
+})
|
|
|
+// отрисовка всех заказов
|
|
|
+store.subscribe(() => {
|
|
|
+ const {promise} = store.getState()
|
|
|
+ const [,route, _id] = location.hash.split('/')
|
|
|
+ if (promise?.orderfind?.payload && route === 'orders'){
|
|
|
+ let counts = 0
|
|
|
+ let amound = 0
|
|
|
+ main.innerHTML = ''
|
|
|
+ const {createdAt, total, orderGoods} = promise.orderfind.payload
|
|
|
+ let h = document.createElement('h1')
|
|
|
+ h.textContent = 'Your orders';
|
|
|
+ let table = document.createElement('table')
|
|
|
+ let tr = document.createElement('thead')
|
|
|
+ tr.innerHTML = `<th>Номер заказа</th><th>Время добавления заказа</th><th>Количество</th><th>Товар</th><th>Цена</th>`
|
|
|
+ table.append(tr)
|
|
|
+ for (let {createdAt, count, good, price} of orderGoods){
|
|
|
+ amound += count;
|
|
|
+ let date = new Date(+createdAt);
|
|
|
+ let hours = date.getHours();
|
|
|
+ let minutes = "0" + date.getMinutes();
|
|
|
+ let seconds = "0" + date.getSeconds();
|
|
|
+ let formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
|
|
|
+ let tr = document.createElement('tr')
|
|
|
+ let td = document.createElement('td')
|
|
|
+
|
|
|
+ tr.innerHTML = `<td>${counts++}</td><td>${formattedTime}</td><td>${count}</td>
|
|
|
+ <td class="table-order-td"><span>${good.name}</span><img src="${backURL}/${good.images[0].url}"></td><td>${price}</td>`
|
|
|
+ table.append(tr)
|
|
|
+ }
|
|
|
+ let tr2 = document.createElement('tr')
|
|
|
+ let date = new Date(+createdAt);
|
|
|
+ let hours = date.getHours();
|
|
|
+ let minutes = "0" + date.getMinutes();
|
|
|
+ let seconds = "0" + date.getSeconds();
|
|
|
+ let formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
|
|
|
+ tr2.innerHTML = `<th></th><th>${formattedTime}</th><th>${amound}</th><th></th><th>${total}</th>`
|
|
|
+ table.append(tr2)
|
|
|
+ main.append(h, table)
|
|
|
+ }
|
|
|
+ else if (!promise?.orderfind?.payload && route === 'orders'){
|
|
|
+ main.innerHTML = ''
|
|
|
+ let h = document.createElement('h1')
|
|
|
+ h.textContent = 'У вас ещё нет заказов';
|
|
|
+ main.append(h)
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+//*****************************************************************************
|
|
|
+function cardReducer(state={}, {type, good={}, count=1}){
|
|
|
+ const {_id} = good
|
|
|
+ const types = {
|
|
|
+ CART_ADD() {
|
|
|
+ count = +count;
|
|
|
+ if (!count){
|
|
|
+ return state
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ [_id]: {good, count: count + (state[_id]?.count || 0)}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ CART_CHANGE() {
|
|
|
+ count = +count;
|
|
|
+ if (!count){
|
|
|
+ return state
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ [_id]: {good, count}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ CART_REMOVE() {
|
|
|
+ let {[_id]: lol, ...newState} = state
|
|
|
+ return newState
|
|
|
+ },
|
|
|
+ CART_CLEAR() {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type in types) {
|
|
|
+ return types[type]()
|
|
|
+ }
|
|
|
+ return state;
|
|
|
+}
|
|
|
+const actionCardAdd = (good, count) => ({type: 'CART_ADD', good, count})
|
|
|
+const actionCardChange = (good, count) => ({type: 'CART_CHANGE', good, count})
|
|
|
+const actionCardRemove = (good) => ({type: 'CART_REMOVE', good})
|
|
|
+const actionCardClear = () => ({type: 'CART_CLEAR'})
|
|
|
+
|
|
|
+const actionOrder = () =>
|
|
|
+ async (dispatch, state) => {
|
|
|
+ let {card} = store.getState()
|
|
|
+ let orderGoods = Object.entries(card).map(([_id, {good ,count}]) => ({good: {_id}, count}))
|
|
|
+ console.log(orderGoods)
|
|
|
+ let res = await dispatch(actionPromise('order', gql(`
|
|
|
+ mutation order($order:OrderInput){
|
|
|
+ OrderUpsert(order:$order)
|
|
|
+ { _id total }
|
|
|
+ }
|
|
|
+ `, {order: {orderGoods}})))
|
|
|
+ console.log(res)
|
|
|
+ if (res){
|
|
|
+ let {_id, total} = res
|
|
|
+ main.innerHTML = `<h1>Заказ выполнен успешно!</h1>
|
|
|
+ <h2>ID заказа: ${_id}</h2>
|
|
|
+ <h2>На сумму: ${total}</h2>`
|
|
|
+ store.dispatch(actionCardClear())
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+// количество товаров в корзине
|
|
|
+store.subscribe(() => {
|
|
|
+ const {card} = store.getState()
|
|
|
+ if (card){
|
|
|
+ orderCount.textContent = ''
|
|
|
+ let summ = 0
|
|
|
+ for (const cardKey in card) {
|
|
|
+ summ += card[cardKey].count
|
|
|
+ }
|
|
|
+ orderCount.textContent = summ
|
|
|
+ }
|
|
|
+})
|
|
|
+// отрисовка корзины
|
|
|
+function createOrder(){
|
|
|
+ const {card} = store.getState()
|
|
|
+ if (Object.entries(card).length !== 0){
|
|
|
+ let counts = 1
|
|
|
+ main.innerHTML = ''
|
|
|
+ let table = document.createElement('table')
|
|
|
+ let thead = document.createElement('thead')
|
|
|
+ thead.innerHTML = `<th>Номер заказа</th><th>Название товара</th><th>Изображение</th><th>Цена</th><th>Количество</th><th>Убрать</th>`
|
|
|
+ table.append(thead)
|
|
|
+ for (const id in card) {
|
|
|
+ let tr = document.createElement('tr')
|
|
|
+ let tdInpChange = document.createElement('td')
|
|
|
+ let tdBtnRemove = document.createElement('td')
|
|
|
+ let btnRemove = document.createElement('button')
|
|
|
+ let inpChange = document.createElement('input')
|
|
|
+ const {good, count} = card[id]
|
|
|
+ btnRemove.textContent = 'Remove'
|
|
|
+ inpChange.type = 'number'
|
|
|
+ inpChange.min = 0
|
|
|
+ inpChange.max = 100
|
|
|
+ inpChange.value = count
|
|
|
+
|
|
|
+ inpChange.oninput = () => store.dispatch(actionCardChange(good, inpChange.value))
|
|
|
+ btnRemove.onclick = () => {
|
|
|
+ tr.remove()
|
|
|
+ store.dispatch(actionCardRemove(good))
|
|
|
+ }
|
|
|
+
|
|
|
+ tr.innerHTML = `<td>${counts++}</td><td>${good.name}</td>
|
|
|
+ <td><img src="${backURL}/${good.images[0].url}"></td><td>${good.price}</td>`
|
|
|
+ tdInpChange.append(inpChange)
|
|
|
+ tdBtnRemove.append(btnRemove)
|
|
|
+ tr.append(tdInpChange, tdBtnRemove)
|
|
|
+ table.append(tr)
|
|
|
+ }
|
|
|
+ let btnClear = document.createElement('button')
|
|
|
+ btnClear.textContent = 'Очистить корзину'
|
|
|
+ btnClear.onclick = () => {
|
|
|
+ main.innerHTML = `<h1>Корзина пуста</h1>`
|
|
|
+ store.dispatch(actionCardClear())
|
|
|
+ }
|
|
|
+ let btnZakaz = document.createElement('button')
|
|
|
+ btnZakaz.textContent = 'Заказать'
|
|
|
+ btnZakaz.disabled = localStorage.authToken ? false : true
|
|
|
+ btnZakaz.onclick = () => {
|
|
|
+ store.dispatch(actionOrder())
|
|
|
+ }
|
|
|
+ main.append(table, btnClear, btnZakaz)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ main.innerHTML = '<h1>Вы ещё ничего не добавили в корзину</h1>'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+window.onhashchange = () => {
|
|
|
+ const [,route, _id] = location.hash.split('/')
|
|
|
+ const routes = {
|
|
|
+ category(){
|
|
|
+ store.dispatch(actionCatById(_id))
|
|
|
+ },
|
|
|
+ good(){
|
|
|
+ store.dispatch(actionGoodById(_id))
|
|
|
+ },
|
|
|
+ login(){
|
|
|
+ let data = _id.split('*')
|
|
|
+ store.dispatch(actionFullLogin(data[0], data[1]))
|
|
|
+ },
|
|
|
+ register(){
|
|
|
+ let data = _id.split('*')
|
|
|
+ store.dispatch(actionFullRegister(data[0], data[1]))
|
|
|
+ },
|
|
|
+ orders(){
|
|
|
+ store.dispatch(actionOrderFindOne())
|
|
|
+ },
|
|
|
+ card(){
|
|
|
+ createOrder()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (route in routes)
|
|
|
+ routes[route]()
|
|
|
+}
|
|
|
+window.onhashchange()
|
Alex
