|
@@ -6,19 +6,8 @@
|
|
</header>
|
|
</header>
|
|
<div id='mainContainer'>
|
|
<div id='mainContainer'>
|
|
<aside id='aside'>
|
|
<aside id='aside'>
|
|
- Категории
|
|
|
|
- Сюда надо воткнуть список корневых категорий интернет-магазина
|
|
|
|
- <a href="#/people/1">Luke</a>
|
|
|
|
- <a href="#/people/2">C-3PO</a>
|
|
|
|
- <a href="#/people/3">R2-D2</a>
|
|
|
|
- <a href="#/people/4">Dart Vader</a>
|
|
|
|
-
|
|
|
|
- <a href="#/films/4">new hope</a>
|
|
|
|
- <a href="#/films/5">пятая часть</a>
|
|
|
|
- <a href="#/films/3">шестая часть</a>
|
|
|
|
</aside>
|
|
</aside>
|
|
<main id='main'>
|
|
<main id='main'>
|
|
- Контент
|
|
|
|
</main>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -247,10 +236,10 @@
|
|
const gqlCategoryFindOne = (id) => {
|
|
const gqlCategoryFindOne = (id) => {
|
|
const catQuery = `query CategoryFindOne($q: String) {
|
|
const catQuery = `query CategoryFindOne($q: String) {
|
|
CategoryFindOne(query: $q) {
|
|
CategoryFindOne(query: $q) {
|
|
- _id name
|
|
|
|
- parent { _id name }
|
|
|
|
- subCategories { _id name }
|
|
|
|
- goods { _id name price description
|
|
|
|
|
|
+ _id name
|
|
|
|
+ parent { _id name }
|
|
|
|
+ subCategories { _id name }
|
|
|
|
+ goods { _id name price description
|
|
images { url }
|
|
images { url }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -273,7 +262,7 @@
|
|
return gql(catQuery, { q: `[{\"_id\": \"${id}\"}]` });
|
|
return gql(catQuery, { q: `[{\"_id\": \"${id}\"}]` });
|
|
}
|
|
}
|
|
const actionGoodFindOne = (id) =>
|
|
const actionGoodFindOne = (id) =>
|
|
- actionPromise('goodsFindOne', gqlGoodFindOne(id));
|
|
|
|
|
|
+ actionPromise('goodFindOne', gqlGoodFindOne(id));
|
|
//////////////////////////////////
|
|
//////////////////////////////////
|
|
const actionLogin = (login, password) => {
|
|
const actionLogin = (login, password) => {
|
|
const upsertQuery = `query login($login:String, $password:String){
|
|
const upsertQuery = `query login($login:String, $password:String){
|
|
@@ -369,76 +358,117 @@
|
|
action();
|
|
action();
|
|
ok(ms);
|
|
ok(ms);
|
|
}, ms));
|
|
}, ms));
|
|
- store.subscribe(() => {
|
|
|
|
|
|
+ /*store.subscribe(() => {
|
|
console.log({ state: store.getState() });
|
|
console.log({ state: store.getState() });
|
|
- });
|
|
|
|
|
|
+ });*/
|
|
//////////////////////////////////////////////
|
|
//////////////////////////////////////////////
|
|
- store.subscribe(() => {
|
|
|
|
- console.log(store.getState());
|
|
|
|
- });
|
|
|
|
|
|
|
|
- const fillRootCategories = (categories) => {
|
|
|
|
- aside.innerText = '';
|
|
|
|
|
|
+ const fillRootCategories = (categories, htmlEl) => {
|
|
|
|
+ htmlEl.innerText = '';
|
|
if (!categories)
|
|
if (!categories)
|
|
return;
|
|
return;
|
|
for (category of categories) {
|
|
for (category of categories) {
|
|
let el = document.createElement('a');
|
|
let el = document.createElement('a');
|
|
el.innerText = `${category.name}`;
|
|
el.innerText = `${category.name}`;
|
|
- el.href = `"#/category/${category._id}`;
|
|
|
|
- aside.appendChild(el);
|
|
|
|
|
|
+ el.href = `#/categories/${category._id}`;
|
|
|
|
+ htmlEl.appendChild(el);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ store.subscribe(() =>
|
|
|
|
+ subscribePromiseItem("rootCats", aside, [], fillRootCategories));
|
|
|
|
|
|
- store.subscribe(() => {
|
|
|
|
- let state = store.getState();
|
|
|
|
- let rootCatsPromisRes = state.promiseReducer?.rootCats;
|
|
|
|
- if (rootCatsPromisRes?.status == "FULFILLED") {
|
|
|
|
- let rootCats = rootCatsPromisRes.payload;
|
|
|
|
- fillRootCategories(rootCats);
|
|
|
|
|
|
+ const fillCurrentCategoryContent = (category, htmlEl) => {
|
|
|
|
+ htmlEl.innerHTML = '';
|
|
|
|
+ const { name, parent, subCategories, goods } = category;
|
|
|
|
+ htmlEl.innerHTML = `<h1>Category: ${name}</h1>
|
|
|
|
+ <section>Parent: <a href="#/subCategories/${parent?._id}">${parent?.name ?? 'Empty'}</a></section>
|
|
|
|
+ `
|
|
|
|
+ htmlEl.innerHTML += `<section>Sub Categories:</section><br>`
|
|
|
|
+ for (const subCategory of subCategories) {
|
|
|
|
+ htmlEl.innerHTML += `<a href="#/subCategories/${subCategory._id}">${subCategory.name}</a><br>`
|
|
}
|
|
}
|
|
- else
|
|
|
|
- fillRootCategories(undefined);
|
|
|
|
- });
|
|
|
|
- /*
|
|
|
|
- window.onhashchange = () => {
|
|
|
|
- const [, route, _id] = location.hash.split('/')
|
|
|
|
-
|
|
|
|
- const routes = {
|
|
|
|
- people() {
|
|
|
|
- console.log('People', _id)
|
|
|
|
- store.dispatch(actionGetPeople(_id))
|
|
|
|
- },
|
|
|
|
- films() {
|
|
|
|
- store.dispatch(actionGetFilm(_id))
|
|
|
|
- },
|
|
|
|
- //category() {
|
|
|
|
- //store.dispatch(actionCategoryById(_id))
|
|
|
|
- //},
|
|
|
|
- //good(){
|
|
|
|
- ////тут был store.dispatch goodById
|
|
|
|
- //console.log('good', _id)
|
|
|
|
- //},
|
|
|
|
- login() {
|
|
|
|
- console.log('А ТУТ ЩА ДОЛЖНА БЫТЬ ФОРМА ЛОГИНА')
|
|
|
|
- //нарисовать форму логина, которая по нажатию кнопки Login делает store.dispatch(actionFullLogin(login, password))
|
|
|
|
- },
|
|
|
|
- //register(){
|
|
|
|
- ////нарисовать форму регистрации, которая по нажатию кнопки Login делает store.dispatch(actionFullRegister(login, password))
|
|
|
|
- //},
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if (route in routes) {
|
|
|
|
- routes[route]()
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- window.onhashchange()
|
|
|
|
- */
|
|
|
|
|
|
+ htmlEl.innerHTML += `<section>Sub Categories:</section><br>`
|
|
|
|
+ for (const good of goods) {
|
|
|
|
+ htmlEl.innerHTML += `<a href="#/goods/${good._id}">${good.name}</a><br>`//вставить css display block
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ store.subscribe(() =>
|
|
|
|
+ subscribePromiseItem(
|
|
|
|
+ "catFindOne", main, ["categories", "subCategories"], fillCurrentCategoryContent));
|
|
|
|
+
|
|
|
|
+ const fillCurrentGoodContent = (good, htmlEl) => {
|
|
|
|
+ htmlEl.innerHTML = '';
|
|
|
|
+ const { name, _id, price, description, images } = good;
|
|
|
|
+ htmlEl.innerHTML = `<h1>Good: ${name}</h1>
|
|
|
|
+ <section>Description: ${description}</section>
|
|
|
|
+ <section>Price: ${price}</section>
|
|
|
|
+ `
|
|
|
|
+ htmlEl.innerHTML += `<section>Images:</section><br>` //вставить css display block
|
|
|
|
+ for (const image of images) {
|
|
|
|
+ htmlEl.innerHTML += `<img src="http://shop-roles.node.ed.asmer.org.ua/${image.url}"</img><br>`//вставить css display block
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ store.subscribe(() =>
|
|
|
|
+ subscribePromiseItem(
|
|
|
|
+ "goodFindOne", main, ["goods"], fillCurrentGoodContent));
|
|
|
|
+
|
|
|
|
+ const subscribePromiseItem = (promiseName, htmlEl, subscrNames, execFunc) => {
|
|
|
|
+ const [, route, _id] = location.hash.split('/');
|
|
|
|
+ if ((subscrNames.length > 0 && (!route || !subscrNames.some(v => v == route)))/* || !_id*/)
|
|
|
|
+ return;
|
|
|
|
+ const { status, payload, error } = store.getState().promiseReducer[promiseName];
|
|
|
|
+ if (status === 'PENDING') {
|
|
|
|
+ htmlEl.innerHTML = `<img src='https://cdn.dribbble.com/users/63485/screenshots/1309731/infinite-gif-preloader.gif' />`
|
|
|
|
+ }
|
|
|
|
+ if (status == "FULFILLED") {
|
|
|
|
+ execFunc(payload, htmlEl);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
|
|
+ window.onhashchange = () => {
|
|
|
|
+ const [, route, _id] = location.hash.split('/')
|
|
|
|
|
|
|
|
+ const routes = {
|
|
|
|
+ categories() {
|
|
|
|
+ console.log('Category', _id)
|
|
|
|
+ store.dispatch(actionCategoryFindOne(_id))
|
|
|
|
+ },
|
|
|
|
+ subCategories() {
|
|
|
|
+ console.log('subCategory', _id)
|
|
|
|
+ store.dispatch(actionCategoryFindOne(_id))
|
|
|
|
+ },
|
|
|
|
+ goods() {
|
|
|
|
+ console.log('good', _id)
|
|
|
|
+ store.dispatch(actionGoodFindOne(_id))
|
|
|
|
+ },
|
|
|
|
+ //category() {
|
|
|
|
+ //store.dispatch(actionCategoryById(_id))
|
|
|
|
+ //},
|
|
|
|
+ //good(){
|
|
|
|
+ ////тут был store.dispatch goodById
|
|
|
|
+ //console.log('good', _id)
|
|
|
|
+ //},
|
|
|
|
+ login() {
|
|
|
|
+ console.log('А ТУТ ЩА ДОЛЖНА БЫТЬ ФОРМА ЛОГИНА')
|
|
|
|
+ //нарисовать форму логина, которая по нажатию кнопки Login делает store.dispatch(actionFullLogin(login, password))
|
|
|
|
+ },
|
|
|
|
+ //register(){
|
|
|
|
+ ////нарисовать форму регистрации, которая по нажатию кнопки Login делает store.dispatch(actionFullRegister(login, password))
|
|
|
|
+ //},
|
|
|
|
+ }
|
|
|
|
|
|
|
|
+ if (route in routes) {
|
|
|
|
+ routes[route]()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ window.onhashchange()
|
|
|
|
|
|
store.dispatch(actionRootCats());
|
|
store.dispatch(actionRootCats());
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
/*store.dispatch(actionCategoryFindOne("6262ca7dbf8b206433f5b3d1"));
|
|
/*store.dispatch(actionCategoryFindOne("6262ca7dbf8b206433f5b3d1"));
|
|
store.dispatch(actionGoodFindOne("62d3099ab74e1f5f2ec1a125"));
|
|
store.dispatch(actionGoodFindOne("62d3099ab74e1f5f2ec1a125"));
|
|
store.dispatch(actionFullLogin("Berg", "123456789"));
|
|
store.dispatch(actionFullLogin("Berg", "123456789"));
|