From d80a7c737c9f78f0956cccd4d10e2d3d740d05ef Mon Sep 17 00:00:00 2001 From: Igori4 Date: Fri, 5 Apr 2019 02:14:15 +0300 Subject: [PATCH 01/14] renamed js file --- js/main.js | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 js/main.js diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..eb109ab --- /dev/null +++ b/js/main.js @@ -0,0 +1,2 @@ +'use strict'; + From 059927c2d58fa8149e06303ee5367a05b4e49ae6 Mon Sep 17 00:00:00 2001 From: Igori4 Date: Fri, 5 Apr 2019 02:19:18 +0300 Subject: [PATCH 02/14] files --- index.html | 2 +- js/app.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) delete mode 100644 js/app.js diff --git a/index.html b/index.html index 80e9751..38b39cf 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> - +
diff --git a/js/app.js b/js/app.js deleted file mode 100644 index eb109ab..0000000 --- a/js/app.js +++ /dev/null @@ -1,2 +0,0 @@ -'use strict'; - From 2c97821abe633d21cda9b1af996e3e55f2d0bc8c Mon Sep 17 00:00:00 2001 From: Igori4 Date: Fri, 5 Apr 2019 02:24:41 +0300 Subject: [PATCH 03/14] rename title --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 38b39cf..5ebb535 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
-

Phones App

+

Phones App fe_19

From 3878f227bc2a551af03384636d8675a54f703de2 Mon Sep 17 00:00:00 2001 From: Igori4 Date: Fri, 5 Apr 2019 02:28:40 +0300 Subject: [PATCH 04/14] rename again --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5ebb535..8a6640c 100644 --- a/index.html +++ b/index.html @@ -16,8 +16,8 @@

Phones App fe_19

-
-

Content will be here

+
+
From a7531ff31492a1d867c14f6cca8142068aa3f070 Mon Sep 17 00:00:00 2001 From: Igori4 Date: Fri, 5 Apr 2019 14:52:57 +0300 Subject: [PATCH 05/14] create first module --- index.html | 6 +- js/main.js | 5 +- js/phones/phones-page.js | 200 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 207 insertions(+), 4 deletions(-) create mode 100644 js/phones/phones-page.js diff --git a/index.html b/index.html index 8a6640c..ec23d27 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> - +
@@ -16,8 +16,8 @@

Phones App fe_19

-
- +
+
diff --git a/js/main.js b/js/main.js index eb109ab..2d9f8a9 100644 --- a/js/main.js +++ b/js/main.js @@ -1,2 +1,5 @@ -'use strict'; +import PhonesPage from './phones/phones-page.js' +const phonesPage = new PhonesPage ({ + element: document.querySelector('[data-page-container') +}) diff --git a/js/phones/phones-page.js b/js/phones/phones-page.js new file mode 100644 index 0000000..4122593 --- /dev/null +++ b/js/phones/phones-page.js @@ -0,0 +1,200 @@ +'use strict' + +export default class PhonesPage { + constructor({ element }) { + this._element = element; + this._render(); + } + + _render() { + this._element.innerHTML = ` +
+ + +
+
+

+ Search: + +

+ +

+ Sort by: + +

+
+ +
+

Shopping Cart

+
    +
  • Phone 1
    • +
  • Phone 2
    • +
  • Phone 3
    • +
+
+
+ + +
+
    +
  • + + Motorola XOOM™ with Wi-Fi + + +
    + + Add + +
    + + Motorola XOOM™ with Wi-Fi +

    The Next, Next Generation + + Experience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb).

    +
    • +
  • + + MOTOROLA XOOM™ + + MOTOROLA XOOM™ +

    The Next, Next Generation + + Experience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb).

    +
    • +
  • + + MOTOROLA ATRIX™ 4G + + MOTOROLA ATRIX™ 4G +

    MOTOROLA ATRIX 4G the world's most powerful smartphone.

    +
    • +
  • + + Dell Streak 7 + + Dell Streak 7 +

    Introducing Dell™ Streak 7. Share photos, videos and movies together. It’s small enough to carry around, big enough to gather around.

    +
    • +
  • + + Samsung Gem™ + + Samsung Gem™ +

    The Samsung Gem™ brings you everything that you would expect and more from a touch display smart phone – more apps, more features and a more affordable price.

    +
    • +
  • + + Dell Venue + + Dell Venue +

    The Dell Venue; Your Personal Express Lane to Everything

    +
    • +
  • + + Nexus S + + Nexus S +

    Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet.

    +
    • +
  • + + LG Axis + + LG Axis +

    Android Powered, Google Maps Navigation, 5 Customizable Home Screens

    +
    • +
  • + + Samsung Galaxy Tab™ + + Samsung Galaxy Tab™ +

    Feel Free to Tab™. The Samsung Galaxy Tab™ brings you an ultra-mobile entertainment experience through its 7” display, high-power processor and Adobe® Flash® Player compatibility.

    +
    • +
  • + + Samsung Showcase™ a Galaxy S™ phone + + Samsung Showcase™ a Galaxy S™ phone +

    The Samsung Showcase™ delivers a cinema quality experience like you’ve never seen before. Its innovative 4” touch display technology provides rich picture brilliance, even outdoors

    +
    • +
  • + + DROID™ 2 Global by Motorola + + DROID™ 2 Global by Motorola +

    The first smartphone with a 1.2 GHz processor and global capabilities.

    +
    • +
  • + + DROID™ Pro by Motorola + + DROID™ Pro by Motorola +

    The next generation of DOES.

    +
    • +
  • + + MOTOROLA BRAVO™ with MOTOBLUR™ + + MOTOROLA BRAVO™ with MOTOBLUR™ +

    An experience to cheer about.

    +
    • +
  • + + Motorola DEFY™ with MOTOBLUR™ + + Motorola DEFY™ with MOTOBLUR™ +

    Are you ready for everything life throws your way?

    +
    • +
  • + + T-Mobile myTouch 4G + + T-Mobile myTouch 4G +

    The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi.

    +
    • +
  • + + Samsung Mesmerize™ a Galaxy S™ phone + + Samsung Mesmerize™ a Galaxy S™ phone +

    The Samsung Mesmerize™ delivers a cinema quality experience like you’ve never seen before. Its innovative 4” touch display technology provides rich picture brilliance,even outdoors

    +
    • +
  • + + SANYO ZIO + + SANYO ZIO +

    The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value.

    +
    • +
  • + + Samsung Transform™ + + Samsung Transform™ +

    The Samsung Transform™ brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed “Sprint ID Service Pack”.

    +
    • +
  • + + T-Mobile G2 + + T-Mobile G2 +

    The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible.

    +
    • +
  • + + Motorola CHARM™ with MOTOBLUR™ + + Motorola CHARM™ with MOTOBLUR™ +

    Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service.

    +
    • +
+ +
+
+ ` + } +} \ No newline at end of file From adda53c752883be1751e94ccb7db3e443de23ed4 Mon Sep 17 00:00:00 2001 From: Igori4 Date: Sat, 6 Apr 2019 00:22:19 +0300 Subject: [PATCH 06/14] create phones component --- js/phones/components/phones-catalog.js | 38 ++++++ js/phones/phones-page.js | 162 ++--------------------- js/phones/service/phones-service.js | 171 +++++++++++++++++++++++++ 3 files changed, 217 insertions(+), 154 deletions(-) create mode 100644 js/phones/components/phones-catalog.js create mode 100644 js/phones/service/phones-service.js diff --git a/js/phones/components/phones-catalog.js b/js/phones/components/phones-catalog.js new file mode 100644 index 0000000..7c0f301 --- /dev/null +++ b/js/phones/components/phones-catalog.js @@ -0,0 +1,38 @@ + +export default class PhonesCatalog { + constructor({element, phones = []}) { + this._element = element; + this._phones = phones; + this._render(); + } + + _render() { + console.log(this._phones) + this._element.innerHTML = ` + + ` + } +} \ No newline at end of file diff --git a/js/phones/phones-page.js b/js/phones/phones-page.js index 4122593..8cf6628 100644 --- a/js/phones/phones-page.js +++ b/js/phones/phones-page.js @@ -1,9 +1,16 @@ 'use strict' +import PhonesCatalog from './components/phones-catalog.js'; +import PhoneService from './service/phones-service.js'; export default class PhonesPage { constructor({ element }) { this._element = element; this._render(); + + this._catalog = new PhonesCatalog({ + element: this._element.querySelector('[data-phone-catalog'), + phones: PhoneService.getAll() + }) } _render() { @@ -39,160 +46,7 @@ export default class PhonesPage {
-
    -
  • - - Motorola XOOM™ with Wi-Fi - - -
    - - Add - -
    - - Motorola XOOM™ with Wi-Fi -

    The Next, Next Generation - - Experience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb).

    -
    • -
  • - - MOTOROLA XOOM™ - - MOTOROLA XOOM™ -

    The Next, Next Generation - - Experience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb).

    -
    • -
  • - - MOTOROLA ATRIX™ 4G - - MOTOROLA ATRIX™ 4G -

    MOTOROLA ATRIX 4G the world's most powerful smartphone.

    -
    • -
  • - - Dell Streak 7 - - Dell Streak 7 -

    Introducing Dell™ Streak 7. Share photos, videos and movies together. It’s small enough to carry around, big enough to gather around.

    -
    • -
  • - - Samsung Gem™ - - Samsung Gem™ -

    The Samsung Gem™ brings you everything that you would expect and more from a touch display smart phone – more apps, more features and a more affordable price.

    -
    • -
  • - - Dell Venue - - Dell Venue -

    The Dell Venue; Your Personal Express Lane to Everything

    -
    • -
  • - - Nexus S - - Nexus S -

    Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet.

    -
    • -
  • - - LG Axis - - LG Axis -

    Android Powered, Google Maps Navigation, 5 Customizable Home Screens

    -
    • -
  • - - Samsung Galaxy Tab™ - - Samsung Galaxy Tab™ -

    Feel Free to Tab™. The Samsung Galaxy Tab™ brings you an ultra-mobile entertainment experience through its 7” display, high-power processor and Adobe® Flash® Player compatibility.

    -
    • -
  • - - Samsung Showcase™ a Galaxy S™ phone - - Samsung Showcase™ a Galaxy S™ phone -

    The Samsung Showcase™ delivers a cinema quality experience like you’ve never seen before. Its innovative 4” touch display technology provides rich picture brilliance, even outdoors

    -
    • -
  • - - DROID™ 2 Global by Motorola - - DROID™ 2 Global by Motorola -

    The first smartphone with a 1.2 GHz processor and global capabilities.

    -
    • -
  • - - DROID™ Pro by Motorola - - DROID™ Pro by Motorola -

    The next generation of DOES.

    -
    • -
  • - - MOTOROLA BRAVO™ with MOTOBLUR™ - - MOTOROLA BRAVO™ with MOTOBLUR™ -

    An experience to cheer about.

    -
    • -
  • - - Motorola DEFY™ with MOTOBLUR™ - - Motorola DEFY™ with MOTOBLUR™ -

    Are you ready for everything life throws your way?

    -
    • -
  • - - T-Mobile myTouch 4G - - T-Mobile myTouch 4G -

    The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi.

    -
    • -
  • - - Samsung Mesmerize™ a Galaxy S™ phone - - Samsung Mesmerize™ a Galaxy S™ phone -

    The Samsung Mesmerize™ delivers a cinema quality experience like you’ve never seen before. Its innovative 4” touch display technology provides rich picture brilliance,even outdoors

    -
    • -
  • - - SANYO ZIO - - SANYO ZIO -

    The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value.

    -
    • -
  • - - Samsung Transform™ - - Samsung Transform™ -

    The Samsung Transform™ brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed “Sprint ID Service Pack”.

    -
    • -
  • - - T-Mobile G2 - - T-Mobile G2 -

    The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible.

    -
    • -
  • - - Motorola CHARM™ with MOTOBLUR™ - - Motorola CHARM™ with MOTOBLUR™ -

    Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service.

    -
    • -
- +
` diff --git a/js/phones/service/phones-service.js b/js/phones/service/phones-service.js new file mode 100644 index 0000000..128e820 --- /dev/null +++ b/js/phones/service/phones-service.js @@ -0,0 +1,171 @@ +const phonesFromServer = [ + { + "age": 0, + "id": "motorola-xoom-with-wi-fi", + "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", + "name": "Motorola XOOM\u2122 with Wi-Fi", + "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)." + }, + { + "age": 1, + "id": "motorola-xoom", + "imageUrl": "img/phones/motorola-xoom.0.jpg", + "name": "MOTOROLA XOOM\u2122", + "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)." + }, + { + "age": 2, + "carrier": "AT&T", + "id": "motorola-atrix-4g", + "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", + "name": "MOTOROLA ATRIX\u2122 4G", + "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone." + }, + { + "age": 3, + "id": "dell-streak-7", + "imageUrl": "img/phones/dell-streak-7.0.jpg", + "name": "Dell Streak 7", + "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around." + }, + { + "age": 4, + "carrier": "Cellular South", + "id": "samsung-gem", + "imageUrl": "img/phones/samsung-gem.0.jpg", + "name": "Samsung Gem\u2122", + "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price." + }, + { + "age": 5, + "carrier": "Dell", + "id": "dell-venue", + "imageUrl": "img/phones/dell-venue.0.jpg", + "name": "Dell Venue", + "snippet": "The Dell Venue; Your Personal Express Lane to Everything" + }, + { + "age": 6, + "carrier": "Best Buy", + "id": "nexus-s", + "imageUrl": "img/phones/nexus-s.0.jpg", + "name": "Nexus S", + "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet." + }, + { + "age": 7, + "carrier": "Cellular South", + "id": "lg-axis", + "imageUrl": "img/phones/lg-axis.0.jpg", + "name": "LG Axis", + "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens" + }, + { + "age": 8, + "id": "samsung-galaxy-tab", + "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", + "name": "Samsung Galaxy Tab\u2122", + "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility." + }, + { + "age": 9, + "carrier": "Cellular South", + "id": "samsung-showcase-a-galaxy-s-phone", + "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", + "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", + "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors" + }, + { + "age": 10, + "carrier": "Verizon", + "id": "droid-2-global-by-motorola", + "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", + "name": "DROID\u2122 2 Global by Motorola", + "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities." + }, + { + "age": 11, + "carrier": "Verizon", + "id": "droid-pro-by-motorola", + "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", + "name": "DROID\u2122 Pro by Motorola", + "snippet": "The next generation of DOES." + }, + { + "age": 12, + "carrier": "AT&T", + "id": "motorola-bravo-with-motoblur", + "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", + "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", + "snippet": "An experience to cheer about." + }, + { + "age": 13, + "carrier": "T-Mobile", + "id": "motorola-defy-with-motoblur", + "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", + "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", + "snippet": "Are you ready for everything life throws your way?" + }, + { + "age": 14, + "carrier": "T-Mobile", + "id": "t-mobile-mytouch-4g", + "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", + "name": "T-Mobile myTouch 4G", + "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi." + }, + { + "age": 15, + "carrier": "US Cellular", + "id": "samsung-mesmerize-a-galaxy-s-phone", + "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", + "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", + "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors" + }, + { + "age": 16, + "carrier": "Sprint", + "id": "sanyo-zio", + "imageUrl": "img/phones/sanyo-zio.0.jpg", + "name": "SANYO ZIO", + "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value." + }, + { + "age": 17, + "id": "samsung-transform", + "imageUrl": "img/phones/samsung-transform.0.jpg", + "name": "Samsung Transform\u2122", + "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d." + }, + { + "age": 18, + "id": "t-mobile-g2", + "imageUrl": "img/phones/t-mobile-g2.0.jpg", + "name": "T-Mobile G2", + "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible." + }, + { + "age": 19, + "id": "motorola-charm-with-motoblur", + "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", + "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", + "snippet": "Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service." + } +]; +// export default class PhoneService { +// constructor() { + +// } +// getAll() { +// return phonesFromServer; +// } +// } + +const PhoneService = { + getAll() { + return phonesFromServer; + } +} + +export default PhoneService; \ No newline at end of file From 12ee5d14cdff982cf0bc65b797c58a450713befb Mon Sep 17 00:00:00 2001 From: Igori4 Date: Sun, 7 Apr 2019 23:50:45 +0300 Subject: [PATCH 07/14] phoneViewer componentExtender Hide Show Logic --- js/phones/components/component.js | 13 +++++ js/phones/components/phone-viewer.js | 46 +++++++++++++++ js/phones/components/phones-catalog.js | 28 +++++++-- js/phones/phones-page.js | 19 ++++-- js/phones/service/phones-service.js | 81 +++++++++++++++++++++++--- 5 files changed, 170 insertions(+), 17 deletions(-) create mode 100644 js/phones/components/component.js create mode 100644 js/phones/components/phone-viewer.js diff --git a/js/phones/components/component.js b/js/phones/components/component.js new file mode 100644 index 0000000..1aed928 --- /dev/null +++ b/js/phones/components/component.js @@ -0,0 +1,13 @@ +export default class Component { + constructor({ element }) { + this._element = element; + } + + hide() { + this._element.hidden = true; + } + + show() { + this._element.hidden = false; + } +} \ No newline at end of file diff --git a/js/phones/components/phone-viewer.js b/js/phones/components/phone-viewer.js new file mode 100644 index 0000000..cd48eb5 --- /dev/null +++ b/js/phones/components/phone-viewer.js @@ -0,0 +1,46 @@ +import Component from './component.js' + +export default class PhoneViewer extends Component{ + + + show(phoneDetails) { + super.show(); + this._phoneDetaild = phoneDetails; + this._render(); + } + + _render() { + this._element.innerHTML = ` + + + + + + +

${this._phoneDetaild.name}

+ +

Motorola XOOM with Wi-Fi has a super-powerful dual-core processor and Android™ 3.0 (Honeycomb) — the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you’ll enjoy HD video in a thin, light, powerful and upgradeable tablet.

+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ ` + } +} \ No newline at end of file diff --git a/js/phones/components/phones-catalog.js b/js/phones/components/phones-catalog.js index 7c0f301..55d2543 100644 --- a/js/phones/components/phones-catalog.js +++ b/js/phones/components/phones-catalog.js @@ -1,19 +1,37 @@ +import Component from './component.js' -export default class PhonesCatalog { - constructor({element, phones = []}) { +export default class PhonesCatalog extends Component{ + constructor({ + element, + phones = [], + onPhonesSelected = () => {} + }) { + super({ element }); this._element = element; this._phones = phones; + this._onPhonesSelected = onPhonesSelected; this._render(); + this._element.addEventListener('click', (event) => { + const phoneEl = event.target.closest('[data-element="phone-elnment"]'); + if (!phoneEl) { + return; + } + const phoneId = phoneEl.dataset.phoneId; + this._onPhonesSelected(phoneId); + }) } - + _render() { - console.log(this._phones) this._element.innerHTML = `
    ${ this._phones.map(phone => ` -
  • +
  • Motorola XOOM™ with Wi-Fi diff --git a/js/phones/phones-page.js b/js/phones/phones-page.js index 8cf6628..5bfaa43 100644 --- a/js/phones/phones-page.js +++ b/js/phones/phones-page.js @@ -1,15 +1,25 @@ 'use strict' import PhonesCatalog from './components/phones-catalog.js'; import PhoneService from './service/phones-service.js'; +import PhoneVieWer from './components/phone-viewer.js' -export default class PhonesPage { +export default class PhonesPage{ constructor({ element }) { this._element = element; this._render(); this._catalog = new PhonesCatalog({ - element: this._element.querySelector('[data-phone-catalog'), - phones: PhoneService.getAll() + element: this._element.querySelector('[data-component = "phone-catalog"]'), + phones: PhoneService.getAll(), + onPhonesSelected: (id) =>{ + const phoneDetails = PhoneService.getById(id); + this._catalog.hide(); + this._viewer.show(phoneDetails) + } + }) + + this._viewer = new PhoneVieWer({ + element: this._element.querySelector('[data-component = "phone-viewer"]') }) } @@ -46,7 +56,8 @@ export default class PhonesPage {
    -
    +
    +
` diff --git a/js/phones/service/phones-service.js b/js/phones/service/phones-service.js index 128e820..bcc6318 100644 --- a/js/phones/service/phones-service.js +++ b/js/phones/service/phones-service.js @@ -153,18 +153,83 @@ const phonesFromServer = [ "snippet": "Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service." } ]; -// export default class PhoneService { -// constructor() { - -// } -// getAll() { -// return phonesFromServer; -// } -// } +const phoneByIdDetails = { + "additionalFeatures": "Adobe\u00ae Flash\u00ae Player compatible; 1.3MP front-facing camera for video chat; eReader pre-loaded; Swype text input technology\r\n", + "android": { + "os": "Android 2.2", + "ui": "TouchWiz" + }, + "availability": [ + "AT&T,", + "Sprint,", + "T-Mobile,", + "Verizon" + ], + "battery": { + "standbyTime": "780 hours", + "talkTime": "", + "type": "Lithium Ion (Li-Ion) (4000 mAH)" + }, + "camera": { + "features": [ + "Flash", + "Video" + ], + "primary": "3.0 megapixels" + }, + "connectivity": { + "bluetooth": "Bluetooth 3.0", + "cell": "AT&T: GSM/EDGE : 850/900/1800/1900; 3G : 850/1900/2100\r\n\r\nSprint: CDMA : 850/1900MHz\r\n\r\nT-Mobile: GSM/EDGE : 850/900/1800/1900; 3G : 1700/1900\r\n\r\nVerizon: CDMA : 800MHz/1900MHz", + "gps": true, + "infrared": false, + "wifi": "802.11 b/g/n" + }, + "description": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122, the tablet device that delivers enhanced capabilities with advanced mobility, has a large, perfectly sized, 7.0\" screen that offers plenty of room for the thousands of interactive games and apps available for the Android\u2122 platform, and its slim design makes it perfect for travel and one-handed grip. Use the Galaxy Tab to relax and enjoy an e-book, watch rich video or full web content with its Adobe\u00ae Flash\u00ae Player compatibility, video chat using the front-facing camera, or send user-generated content wirelessly to other devices like your TV via AllShare\u2122. With so many options for customization and interactivity, the Galaxy Tab gives you everything you want, anywhere you go\u2026Feel Free to Tab\u2122.", + "display": { + "screenResolution": "WSVGA (1024 x 600)", + "screenSize": "7.0 inches", + "touchScreen": true + }, + "hardware": { + "accelerometer": true, + "audioJack": "3.5mm", + "cpu": "1GHz", + "fmRadio": false, + "physicalKeyboard": false, + "usb": "USB 2.0" + }, + "id": "samsung-galaxy-tab", + "images": [ + "img/phones/samsung-galaxy-tab.0.jpg", + "img/phones/samsung-galaxy-tab.1.jpg", + "img/phones/samsung-galaxy-tab.2.jpg", + "img/phones/samsung-galaxy-tab.3.jpg", + "img/phones/samsung-galaxy-tab.4.jpg", + "img/phones/samsung-galaxy-tab.5.jpg", + "img/phones/samsung-galaxy-tab.6.jpg" + ], + "name": "Samsung Galaxy Tab\u2122", + "sizeAndWeight": { + "dimensions": [ + "120.39 mm (w)", + "189.99 mm (h)", + "11.9 mm (d)" + ], + "weight": "379.88 grams" + }, + "storage": { + "flash": "16384MB", + "ram": "640MB" + } + }; const PhoneService = { getAll() { return phonesFromServer; + }, + + getById(id) { + return phoneByIdDetails; } } From f1cbd4b5c1d875fa931718458227230195b5347a Mon Sep 17 00:00:00 2001 From: Igori4 Date: Mon, 8 Apr 2019 00:49:21 +0300 Subject: [PATCH 08/14] back button --- js/phones/components/phone-viewer.js | 17 +++++++++++++++-- js/phones/phones-page.js | 6 +++++- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/js/phones/components/phone-viewer.js b/js/phones/components/phone-viewer.js index cd48eb5..ae3b393 100644 --- a/js/phones/components/phone-viewer.js +++ b/js/phones/components/phone-viewer.js @@ -1,7 +1,20 @@ import Component from './component.js' export default class PhoneViewer extends Component{ - + constructor({ + element, + onBack = () => {} + }) { + super({element}), + this._onBack = onBack; + this._element.addEventListener('click', (event) => { + const backButton = event.target.closest('[data-batton="back-button"]'); + if(!backButton) { + return; + } + this._onBack(); + }) + } show(phoneDetails) { super.show(); @@ -13,7 +26,7 @@ export default class PhoneViewer extends Component{ this._element.innerHTML = ` - + diff --git a/js/phones/phones-page.js b/js/phones/phones-page.js index 5bfaa43..baacd8d 100644 --- a/js/phones/phones-page.js +++ b/js/phones/phones-page.js @@ -19,7 +19,11 @@ export default class PhonesPage{ }) this._viewer = new PhoneVieWer({ - element: this._element.querySelector('[data-component = "phone-viewer"]') + element: this._element.querySelector('[data-component = "phone-viewer"]'), + onBack: () => { + this._catalog.show(); + this._viewer.hide(); + } }) } From daa4ad69502c81b3bcc4ca9282cf02ad19e204b9 Mon Sep 17 00:00:00 2001 From: Igori4 Date: Wed, 10 Apr 2019 02:09:46 +0300 Subject: [PATCH 09/14] subscribe emit gallery --- js/phones/components/component.js | 24 +++++++++++++ js/phones/components/phone-viewer.js | 47 +++++++++++--------------- js/phones/components/phones-catalog.js | 26 ++++++++------ js/phones/phones-page.js | 44 +++++++++++++++--------- 4 files changed, 88 insertions(+), 53 deletions(-) diff --git a/js/phones/components/component.js b/js/phones/components/component.js index 1aed928..47baabd 100644 --- a/js/phones/components/component.js +++ b/js/phones/components/component.js @@ -1,8 +1,32 @@ export default class Component { constructor({ element }) { + this._callbackMap = {}; this._element = element; } + on(eventName, selector, callback) { + this._element.addEventListener(eventName, (event) => { + const deligatedTarget = event.target.closest(selector); + if (!deligatedTarget) { + return; + } + callback(event); + + }) + } + emit(eventName, data) { + const callback = this._callbackMap[eventName]; + if(!callback) { + return; + } + callback(data); + } + + subscribe(eventName, callback) { + this._callbackMap[eventName] = callback; + + } + hide() { this._element.hidden = true; } diff --git a/js/phones/components/phone-viewer.js b/js/phones/components/phone-viewer.js index ae3b393..0d2450b 100644 --- a/js/phones/components/phone-viewer.js +++ b/js/phones/components/phone-viewer.js @@ -3,16 +3,15 @@ import Component from './component.js' export default class PhoneViewer extends Component{ constructor({ element, - onBack = () => {} }) { super({element}), - this._onBack = onBack; - this._element.addEventListener('click', (event) => { - const backButton = event.target.closest('[data-batton="back-button"]'); - if(!backButton) { - return; - } - this._onBack(); + + this.on('click', '[data-batton="back-button"]', () => { + this.emit('back'); + }) + this.on('click', '[data-element="small-preview"]', (event) =>{ + this.bigImg = this._element.querySelector('[data-element="big-preview"]'); + this.bigImg.src = event.target.src; }) } @@ -24,7 +23,11 @@ export default class PhoneViewer extends Component{ _render() { this._element.innerHTML = ` - + @@ -35,24 +38,14 @@ export default class PhoneViewer extends Component{

Motorola XOOM with Wi-Fi has a super-powerful dual-core processor and Android™ 3.0 (Honeycomb) — the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you’ll enjoy HD video in a thin, light, powerful and upgradeable tablet.

    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • + ${ + this._phoneDetaild.images.map( src => ` +
  • + +
    • + ` + ).join('') + }
` } diff --git a/js/phones/components/phones-catalog.js b/js/phones/components/phones-catalog.js index 55d2543..5a3e671 100644 --- a/js/phones/components/phones-catalog.js +++ b/js/phones/components/phones-catalog.js @@ -3,23 +3,22 @@ import Component from './component.js' export default class PhonesCatalog extends Component{ constructor({ element, - phones = [], - onPhonesSelected = () => {} + phones = [] }) { super({ element }); this._element = element; this._phones = phones; - this._onPhonesSelected = onPhonesSelected; this._render(); - this._element.addEventListener('click', (event) => { + + this.on('click', '[data-element="details-link"]', () => { + const phoneEl = event.target.closest('[data-element="phone-elnment"]'); - if (!phoneEl) { - return; - } const phoneId = phoneEl.dataset.phoneId; - this._onPhonesSelected(phoneId); + this.emit('phone-selected', phoneId); }) + } + _render() { this._element.innerHTML = ` @@ -32,7 +31,11 @@ export default class PhonesCatalog extends Component{ data-element="phone-elnment" data-phone-id="${phone.id} "> - + Motorola XOOM™ with Wi-Fi @@ -42,7 +45,10 @@ export default class PhonesCatalog extends Component{ - ${phone.name} + ${phone.name}

${phone.snippet}

` diff --git a/js/phones/phones-page.js b/js/phones/phones-page.js index baacd8d..b4a680b 100644 --- a/js/phones/phones-page.js +++ b/js/phones/phones-page.js @@ -8,25 +8,37 @@ export default class PhonesPage{ this._element = element; this._render(); - this._catalog = new PhonesCatalog({ - element: this._element.querySelector('[data-component = "phone-catalog"]'), - phones: PhoneService.getAll(), - onPhonesSelected: (id) =>{ - const phoneDetails = PhoneService.getById(id); - this._catalog.hide(); - this._viewer.show(phoneDetails) - } - }) + this._initCatalog(); + this._initVeiwer(); - this._viewer = new PhoneVieWer({ - element: this._element.querySelector('[data-component = "phone-viewer"]'), - onBack: () => { - this._catalog.show(); - this._viewer.hide(); - } - }) } + _initCatalog() { + this._catalog = new PhonesCatalog({ + element: this._element.querySelector('[data-component = "phone-catalog"]'), + phones: PhoneService.getAll(), + }) + + this._catalog.subscribe('phone-selected', (id) =>{ + console.log('selected ' + id) + const phoneDetails = PhoneService.getById(id); + this._catalog.hide(); + this._viewer.show(phoneDetails) + }); + }; + + _initVeiwer() { + this._viewer = new PhoneVieWer({ + element: this._element.querySelector('[data-component = "phone-viewer"]'), + }); + + this._viewer.subscribe('back', () => { + this._catalog.show(); + this._viewer.hide(); + }) + } + + _render() { this._element.innerHTML = `
From 71c2b9db942db98cab454c4fa650a49c2ca98316 Mon Sep 17 00:00:00 2001 From: Igori4 Date: Fri, 12 Apr 2019 00:28:42 +0300 Subject: [PATCH 10/14] trying to create shopping cart --- js/phones/components/component.js | 23 +++++++++++++++++++--- js/phones/components/phone-viewer.js | 4 +++- js/phones/components/phones-catalog.js | 17 +++++++++++++++- js/phones/components/shoping-cart.js | 27 ++++++++++++++++++++++++++ js/phones/phones-page.js | 20 +++++++++++++------ js/phones/service/phones-service.js | 1 + 6 files changed, 81 insertions(+), 11 deletions(-) create mode 100644 js/phones/components/shoping-cart.js diff --git a/js/phones/components/component.js b/js/phones/components/component.js index 47baabd..35b0231 100644 --- a/js/phones/components/component.js +++ b/js/phones/components/component.js @@ -14,19 +14,35 @@ export default class Component { }) } + emit(eventName, data) { - const callback = this._callbackMap[eventName]; + const callback = this._callbackMap[eventName]; if(!callback) { return; } - callback(data); + this._callbackMap[eventName].forEach(callback => { + callback(data) + }); } subscribe(eventName, callback) { - this._callbackMap[eventName] = callback; + if(!this._callbackMap[eventName]) { + this._callbackMap[eventName] = []; + } + + this._callbackMap[eventName].push(callback); } + unsubscribe(eventName, callbackToRemove) { + const callback = this._callbackMap[eventName]; + if(callback) { + this._callbackMap[eventName] = callback + .filter( cb => cb !== callbackToRemove + ) + } + } + hide() { this._element.hidden = true; } @@ -34,4 +50,5 @@ export default class Component { show() { this._element.hidden = false; } + } \ No newline at end of file diff --git a/js/phones/components/phone-viewer.js b/js/phones/components/phone-viewer.js index 0d2450b..4aef356 100644 --- a/js/phones/components/phone-viewer.js +++ b/js/phones/components/phone-viewer.js @@ -9,10 +9,12 @@ export default class PhoneViewer extends Component{ this.on('click', '[data-batton="back-button"]', () => { this.emit('back'); }) + this.on('click', '[data-element="small-preview"]', (event) =>{ this.bigImg = this._element.querySelector('[data-element="big-preview"]'); this.bigImg.src = event.target.src; }) + } show(phoneDetails) { @@ -30,7 +32,7 @@ export default class PhoneViewer extends Component{ > - +

${this._phoneDetaild.name}

diff --git a/js/phones/components/phones-catalog.js b/js/phones/components/phones-catalog.js index 5a3e671..9ec5a9c 100644 --- a/js/phones/components/phones-catalog.js +++ b/js/phones/components/phones-catalog.js @@ -16,6 +16,18 @@ export default class PhonesCatalog extends Component{ const phoneId = phoneEl.dataset.phoneId; this.emit('phone-selected', phoneId); }) + + this.on('click', '[data-element="add-phone-to-basket"]', () => { + // const phoneEl = event.target.closest('[data-element="phone-elnment"]'); + // const phoneId = phoneEl.dataset.phoneId; + // let selectedPhone; + // this._phones.forEach(phone => { + // if( phone.id.trim() === phoneId.trim() ) { + // selectedPhone = phone; + // } + // }) + this.emit('add-to-basket'); + }) } @@ -40,7 +52,10 @@ export default class PhonesCatalog extends Component{
- + Add
diff --git a/js/phones/components/shoping-cart.js b/js/phones/components/shoping-cart.js new file mode 100644 index 0000000..3ae9e5c --- /dev/null +++ b/js/phones/components/shoping-cart.js @@ -0,0 +1,27 @@ +import Component from "./component.js"; + +export default class ShoppingCart extends Component { + constructor( {element} ) { + super( {element} ) + this._render(); + this.allPhoneInBasket = []; + } + + _addToBasket() { + console.log('phone') + // this.allPhoneInBasket.push(phone); + // const namePhone = phone.name; + // const ourBasket = this._element.querySelector('[data-element="phone-in-basket"]'); + // ourBasket.innerHTML += ` + //
  • ${namePhone}
    • + // ` + } + + _render() { + this._element.innerHTML = ` +

    Shopping Cart

    +
      +
    + ` + } +} \ No newline at end of file diff --git a/js/phones/phones-page.js b/js/phones/phones-page.js index b4a680b..40924d6 100644 --- a/js/phones/phones-page.js +++ b/js/phones/phones-page.js @@ -2,6 +2,7 @@ import PhonesCatalog from './components/phones-catalog.js'; import PhoneService from './service/phones-service.js'; import PhoneVieWer from './components/phone-viewer.js' +import ShoppingCart from './components/shoping-cart.js'; export default class PhonesPage{ constructor({ element }) { @@ -10,6 +11,7 @@ export default class PhonesPage{ this._initCatalog(); this._initVeiwer(); + this._initCart(); } @@ -36,6 +38,17 @@ export default class PhonesPage{ this._catalog.show(); this._viewer.hide(); }) + + } + + _initCart() { + this._cart = new ShoppingCart({ + element: this._element.querySelector('[data-component = "shoping-cart"]') + }); + + this._cart.subscribe('add-to-basket', () => { + console.log('hello'); + }) } @@ -61,12 +74,7 @@ export default class PhonesPage{
    -

    Shopping Cart

    -
      -
    • Phone 1
      • -
    • Phone 2
      • -
    • Phone 3
      • -
    +
    diff --git a/js/phones/service/phones-service.js b/js/phones/service/phones-service.js index bcc6318..9da3520 100644 --- a/js/phones/service/phones-service.js +++ b/js/phones/service/phones-service.js @@ -231,6 +231,7 @@ const PhoneService = { getById(id) { return phoneByIdDetails; } + } export default PhoneService; \ No newline at end of file From 970f9d5e5f8ff24506f1dc0b0a591ea8685beafb Mon Sep 17 00:00:00 2001 From: Igori4 Date: Fri, 12 Apr 2019 01:15:25 +0300 Subject: [PATCH 11/14] add to basket was implemented --- js/phones/components/phone-viewer.js | 6 +++++- js/phones/components/phones-catalog.js | 18 +++++++++--------- js/phones/components/shoping-cart.js | 18 +++++++++--------- js/phones/phones-page.js | 13 +++++++++---- 4 files changed, 32 insertions(+), 23 deletions(-) diff --git a/js/phones/components/phone-viewer.js b/js/phones/components/phone-viewer.js index 4aef356..3bd5b57 100644 --- a/js/phones/components/phone-viewer.js +++ b/js/phones/components/phone-viewer.js @@ -2,7 +2,7 @@ import Component from './component.js' export default class PhoneViewer extends Component{ constructor({ - element, + element }) { super({element}), @@ -15,6 +15,10 @@ export default class PhoneViewer extends Component{ this.bigImg.src = event.target.src; }) + this.on('click', '[data-batton="add-to-basket"]', () => { + this.emit('add-to-basket',this._phoneDetaild); + }) + } show(phoneDetails) { diff --git a/js/phones/components/phones-catalog.js b/js/phones/components/phones-catalog.js index 9ec5a9c..784bb4c 100644 --- a/js/phones/components/phones-catalog.js +++ b/js/phones/components/phones-catalog.js @@ -18,15 +18,15 @@ export default class PhonesCatalog extends Component{ }) this.on('click', '[data-element="add-phone-to-basket"]', () => { - // const phoneEl = event.target.closest('[data-element="phone-elnment"]'); - // const phoneId = phoneEl.dataset.phoneId; - // let selectedPhone; - // this._phones.forEach(phone => { - // if( phone.id.trim() === phoneId.trim() ) { - // selectedPhone = phone; - // } - // }) - this.emit('add-to-basket'); + const phoneEl = event.target.closest('[data-element="phone-elnment"]'); + const phoneId = phoneEl.dataset.phoneId; + let selectedPhone; + this._phones.forEach(phone => { + if( phone.id.trim() === phoneId.trim() ) { + selectedPhone = phone; + } + }) + this.emit('add-to-basket',selectedPhone); }) } diff --git a/js/phones/components/shoping-cart.js b/js/phones/components/shoping-cart.js index 3ae9e5c..92db070 100644 --- a/js/phones/components/shoping-cart.js +++ b/js/phones/components/shoping-cart.js @@ -1,4 +1,4 @@ -import Component from "./component.js"; +import Component from "./component.js" export default class ShoppingCart extends Component { constructor( {element} ) { @@ -7,14 +7,14 @@ export default class ShoppingCart extends Component { this.allPhoneInBasket = []; } - _addToBasket() { - console.log('phone') - // this.allPhoneInBasket.push(phone); - // const namePhone = phone.name; - // const ourBasket = this._element.querySelector('[data-element="phone-in-basket"]'); - // ourBasket.innerHTML += ` - //
  • ${namePhone}
    • - // ` + + _addToBasket(selectedPhone) { + this.allPhoneInBasket.push(selectedPhone); + const namePhone = selectedPhone.name; + const ourBasket = this._element.querySelector('[data-element="phone-in-basket"]'); + ourBasket.innerHTML += ` +
  • ${namePhone}
    • + ` } _render() { diff --git a/js/phones/phones-page.js b/js/phones/phones-page.js index 40924d6..d0129f6 100644 --- a/js/phones/phones-page.js +++ b/js/phones/phones-page.js @@ -27,6 +27,10 @@ export default class PhonesPage{ this._catalog.hide(); this._viewer.show(phoneDetails) }); + + this._catalog.subscribe('add-to-basket',(selectedPhone) => { + this._cart._addToBasket(selectedPhone); + }) }; _initVeiwer() { @@ -39,16 +43,17 @@ export default class PhonesPage{ this._viewer.hide(); }) + this._viewer.subscribe('add-to-basket',(selectedPhone) => { + this._cart._addToBasket(selectedPhone); + }) + } _initCart() { this._cart = new ShoppingCart({ element: this._element.querySelector('[data-component = "shoping-cart"]') }); - - this._cart.subscribe('add-to-basket', () => { - console.log('hello'); - }) + } From 8c51df8f95ad1af911086426a2233119db193ed6 Mon Sep 17 00:00:00 2001 From: Igori4 Date: Tue, 16 Apr 2019 22:38:42 +0300 Subject: [PATCH 12/14] shoping card improve with remove-button --- js/phones/components/phone-viewer.js | 2 +- js/phones/components/phones-catalog.js | 8 +---- js/phones/components/shoping-cart.js | 43 +++++++++++++++++++++----- js/phones/phones-page.js | 4 +-- 4 files changed, 39 insertions(+), 18 deletions(-) diff --git a/js/phones/components/phone-viewer.js b/js/phones/components/phone-viewer.js index 3bd5b57..233bd3c 100644 --- a/js/phones/components/phone-viewer.js +++ b/js/phones/components/phone-viewer.js @@ -16,7 +16,7 @@ export default class PhoneViewer extends Component{ }) this.on('click', '[data-batton="add-to-basket"]', () => { - this.emit('add-to-basket',this._phoneDetaild); + this.emit('add-to-basket',this._phoneDetaild.id); }) } diff --git a/js/phones/components/phones-catalog.js b/js/phones/components/phones-catalog.js index 784bb4c..9de37ca 100644 --- a/js/phones/components/phones-catalog.js +++ b/js/phones/components/phones-catalog.js @@ -20,13 +20,7 @@ export default class PhonesCatalog extends Component{ this.on('click', '[data-element="add-phone-to-basket"]', () => { const phoneEl = event.target.closest('[data-element="phone-elnment"]'); const phoneId = phoneEl.dataset.phoneId; - let selectedPhone; - this._phones.forEach(phone => { - if( phone.id.trim() === phoneId.trim() ) { - selectedPhone = phone; - } - }) - this.emit('add-to-basket',selectedPhone); + this.emit('add-to-basket', phoneId); }) } diff --git a/js/phones/components/shoping-cart.js b/js/phones/components/shoping-cart.js index 92db070..df72dbc 100644 --- a/js/phones/components/shoping-cart.js +++ b/js/phones/components/shoping-cart.js @@ -3,24 +3,51 @@ import Component from "./component.js" export default class ShoppingCart extends Component { constructor( {element} ) { super( {element} ) + this.allPhoneInBasket = {}; this._render(); - this.allPhoneInBasket = []; + this.on('click', '[data-element ="remove-button"]', (event) => { + const phone = event.target.closest('li'); + this.remove(phone.dataset.elementId); + }) } - _addToBasket(selectedPhone) { - this.allPhoneInBasket.push(selectedPhone); - const namePhone = selectedPhone.name; - const ourBasket = this._element.querySelector('[data-element="phone-in-basket"]'); - ourBasket.innerHTML += ` -
  • ${namePhone}
    • - ` + addToBasket(selectedPhone) { + if(!this.allPhoneInBasket.hasOwnProperty(selectedPhone)) { + this.allPhoneInBasket[selectedPhone] = 0; + } + this.allPhoneInBasket[selectedPhone] += 1; + this._render(); + + } + + remove(phone) { + if(this.allPhoneInBasket.hasOwnProperty(phone)) { + this.allPhoneInBasket[phone] -= 1; + } + + if(this.allPhoneInBasket[phone] === 0) { + delete this.allPhoneInBasket[phone] + } + this._render() + } _render() { this._element.innerHTML = `

    Shopping Cart

      + ${ + Object.entries(this.allPhoneInBasket) + .map(([name, quantity]) => ` +
    • + ${name} - ${quantity} + +
      • `) + .join('') + }
    ` } diff --git a/js/phones/phones-page.js b/js/phones/phones-page.js index d0129f6..2f71879 100644 --- a/js/phones/phones-page.js +++ b/js/phones/phones-page.js @@ -29,7 +29,7 @@ export default class PhonesPage{ }); this._catalog.subscribe('add-to-basket',(selectedPhone) => { - this._cart._addToBasket(selectedPhone); + this._cart.addToBasket(selectedPhone); }) }; @@ -44,7 +44,7 @@ export default class PhonesPage{ }) this._viewer.subscribe('add-to-basket',(selectedPhone) => { - this._cart._addToBasket(selectedPhone); + this._cart.addToBasket(selectedPhone); }) } From d76dd949800286e2960a2fdc28188e1ff5df67ec Mon Sep 17 00:00:00 2001 From: Igori4 Date: Mon, 22 Apr 2019 01:49:38 +0300 Subject: [PATCH 13/14] filter was implemented --- js/phones/components/filter.js | 48 ++++++++++++++++++++++++++ js/phones/components/phones-catalog.js | 16 +++++---- js/phones/phones-page.js | 42 ++++++++++++++-------- js/phones/service/phones-service.js | 8 +++-- js/utils.js | 15 ++++++++ 5 files changed, 106 insertions(+), 23 deletions(-) create mode 100644 js/phones/components/filter.js create mode 100644 js/utils.js diff --git a/js/phones/components/filter.js b/js/phones/components/filter.js new file mode 100644 index 0000000..5c1b714 --- /dev/null +++ b/js/phones/components/filter.js @@ -0,0 +1,48 @@ +import Component from "./component.js"; +import utils from "../../utils.js"; + +export default class Filter extends Component { + constructor({ element }) { + super({ element }); + + this._render(); + + this._queryField = this._element.querySelector('[data-element="query-fild"]'); + this._orderField = this._element.querySelector('[data-element="order-fild"]'); + + const debounceOnInput = utils.debounce(() => { + this.emit('query-change') + } ,500) + + this.on('input', '[data-element="query-fild"]', debounceOnInput); + + this.on('change', '[data-element="order-fild"]',() => { + this.emit('order-change') + }); + } + + getCurrent() { + return { + query: this._queryField.value, + order: this._orderField.value + } + } + + _render() { + this._element.innerHTML = ` +

    + Search: + +

    + +

    + Sort by: + +

    + ` + } +} + diff --git a/js/phones/components/phones-catalog.js b/js/phones/components/phones-catalog.js index 9de37ca..741016f 100644 --- a/js/phones/components/phones-catalog.js +++ b/js/phones/components/phones-catalog.js @@ -1,13 +1,11 @@ import Component from './component.js' export default class PhonesCatalog extends Component{ - constructor({ - element, - phones = [] - }) { + constructor({element}) { + super({ element }); - this._element = element; - this._phones = phones; + + this._phones = []; this._render(); this.on('click', '[data-element="details-link"]', () => { @@ -25,6 +23,12 @@ export default class PhonesCatalog extends Component{ } + show(phones) { + this._phones = phones; + super.show(); + this._render(); + } + _render() { this._element.innerHTML = ` diff --git a/js/phones/phones-page.js b/js/phones/phones-page.js index 2f71879..3d5f8b4 100644 --- a/js/phones/phones-page.js +++ b/js/phones/phones-page.js @@ -3,12 +3,14 @@ import PhonesCatalog from './components/phones-catalog.js'; import PhoneService from './service/phones-service.js'; import PhoneVieWer from './components/phone-viewer.js' import ShoppingCart from './components/shoping-cart.js'; +import Filter from './components/filter.js'; export default class PhonesPage{ constructor({ element }) { this._element = element; this._render(); + this._initFilter(); this._initCatalog(); this._initVeiwer(); this._initCart(); @@ -17,10 +19,10 @@ export default class PhonesPage{ _initCatalog() { this._catalog = new PhonesCatalog({ - element: this._element.querySelector('[data-component = "phone-catalog"]'), - phones: PhoneService.getAll(), + element: this._element.querySelector('[data-component = "phone-catalog"]') }) + this._showPhones(); this._catalog.subscribe('phone-selected', (id) =>{ console.log('selected ' + id) const phoneDetails = PhoneService.getById(id); @@ -39,7 +41,7 @@ export default class PhonesPage{ }); this._viewer.subscribe('back', () => { - this._catalog.show(); + this._showPhones(); this._viewer.hide(); }) @@ -56,6 +58,27 @@ export default class PhonesPage{ } + _initFilter() { + this._filter = new Filter({ + element: this._element.querySelector('[data-component="filter"]') + }) + + this._filter.subscribe('query-change', (eventData) => { + this._showPhones(); + }) + + this._filter.subscribe('order-change', (eventData) => { + this._showPhones(); + }) + } + + _showPhones() { + this._currentFiltering = this._filter.getCurrent(); + const phones = PhoneService.getAll(this._currentFiltering); + console.log(this._currentFiltering) + this._catalog.show(phones); + } + _render() { this._element.innerHTML = ` @@ -64,18 +87,7 @@ export default class PhonesPage{
    -

    - Search: - -

    - -

    - Sort by: - -

    +
    diff --git a/js/phones/service/phones-service.js b/js/phones/service/phones-service.js index 9da3520..4dfbd77 100644 --- a/js/phones/service/phones-service.js +++ b/js/phones/service/phones-service.js @@ -224,8 +224,12 @@ const phoneByIdDetails = { }; const PhoneService = { - getAll() { - return phonesFromServer; + getAll({query = '', order = ''} = {}) { + const firltredPhones = phonesFromServer.filter((phone) => { + return phone.name.toLowerCase().includes(query.toLowerCase()); + }) + const sortedPhones = firltredPhones; // mast be soreted + return sortedPhones; }, getById(id) { diff --git a/js/utils.js b/js/utils.js new file mode 100644 index 0000000..f789fa0 --- /dev/null +++ b/js/utils.js @@ -0,0 +1,15 @@ +const utils = { + debounce +} + +export default utils; + +function debounce(f, delay) { + let timer = null; + return function(...args){ + clearTimeout(timer); + timer = setTimeout(() =>{ + f.call(this, ...args) + },delay) + } +} \ No newline at end of file From 3663d4edf466d757f9ba31b227d946434eb6cd07 Mon Sep 17 00:00:00 2001 From: Igori4 Date: Tue, 30 Apr 2019 13:01:33 +0300 Subject: [PATCH 14/14] fix filter with promis --- js/phones/phones-page.js | 8 +- js/phones/service/phones-service.js | 184 ++++------------------------ js/utils.js | 26 +++- 3 files changed, 53 insertions(+), 165 deletions(-) diff --git a/js/phones/phones-page.js b/js/phones/phones-page.js index 3d5f8b4..f650164 100644 --- a/js/phones/phones-page.js +++ b/js/phones/phones-page.js @@ -74,9 +74,11 @@ export default class PhonesPage{ _showPhones() { this._currentFiltering = this._filter.getCurrent(); - const phones = PhoneService.getAll(this._currentFiltering); - console.log(this._currentFiltering) - this._catalog.show(phones); + PhoneService.getAll(this._currentFiltering).then((phones) => { + console.log(this._currentFiltering) + this._catalog.show(phones); + }); + } diff --git a/js/phones/service/phones-service.js b/js/phones/service/phones-service.js index 4dfbd77..598ff6e 100644 --- a/js/phones/service/phones-service.js +++ b/js/phones/service/phones-service.js @@ -1,158 +1,6 @@ -const phonesFromServer = [ - { - "age": 0, - "id": "motorola-xoom-with-wi-fi", - "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", - "name": "Motorola XOOM\u2122 with Wi-Fi", - "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)." - }, - { - "age": 1, - "id": "motorola-xoom", - "imageUrl": "img/phones/motorola-xoom.0.jpg", - "name": "MOTOROLA XOOM\u2122", - "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)." - }, - { - "age": 2, - "carrier": "AT&T", - "id": "motorola-atrix-4g", - "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", - "name": "MOTOROLA ATRIX\u2122 4G", - "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone." - }, - { - "age": 3, - "id": "dell-streak-7", - "imageUrl": "img/phones/dell-streak-7.0.jpg", - "name": "Dell Streak 7", - "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around." - }, - { - "age": 4, - "carrier": "Cellular South", - "id": "samsung-gem", - "imageUrl": "img/phones/samsung-gem.0.jpg", - "name": "Samsung Gem\u2122", - "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price." - }, - { - "age": 5, - "carrier": "Dell", - "id": "dell-venue", - "imageUrl": "img/phones/dell-venue.0.jpg", - "name": "Dell Venue", - "snippet": "The Dell Venue; Your Personal Express Lane to Everything" - }, - { - "age": 6, - "carrier": "Best Buy", - "id": "nexus-s", - "imageUrl": "img/phones/nexus-s.0.jpg", - "name": "Nexus S", - "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet." - }, - { - "age": 7, - "carrier": "Cellular South", - "id": "lg-axis", - "imageUrl": "img/phones/lg-axis.0.jpg", - "name": "LG Axis", - "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens" - }, - { - "age": 8, - "id": "samsung-galaxy-tab", - "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", - "name": "Samsung Galaxy Tab\u2122", - "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility." - }, - { - "age": 9, - "carrier": "Cellular South", - "id": "samsung-showcase-a-galaxy-s-phone", - "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", - "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", - "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors" - }, - { - "age": 10, - "carrier": "Verizon", - "id": "droid-2-global-by-motorola", - "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", - "name": "DROID\u2122 2 Global by Motorola", - "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities." - }, - { - "age": 11, - "carrier": "Verizon", - "id": "droid-pro-by-motorola", - "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", - "name": "DROID\u2122 Pro by Motorola", - "snippet": "The next generation of DOES." - }, - { - "age": 12, - "carrier": "AT&T", - "id": "motorola-bravo-with-motoblur", - "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", - "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", - "snippet": "An experience to cheer about." - }, - { - "age": 13, - "carrier": "T-Mobile", - "id": "motorola-defy-with-motoblur", - "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", - "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", - "snippet": "Are you ready for everything life throws your way?" - }, - { - "age": 14, - "carrier": "T-Mobile", - "id": "t-mobile-mytouch-4g", - "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", - "name": "T-Mobile myTouch 4G", - "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi." - }, - { - "age": 15, - "carrier": "US Cellular", - "id": "samsung-mesmerize-a-galaxy-s-phone", - "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", - "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", - "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors" - }, - { - "age": 16, - "carrier": "Sprint", - "id": "sanyo-zio", - "imageUrl": "img/phones/sanyo-zio.0.jpg", - "name": "SANYO ZIO", - "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value." - }, - { - "age": 17, - "id": "samsung-transform", - "imageUrl": "img/phones/samsung-transform.0.jpg", - "name": "Samsung Transform\u2122", - "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d." - }, - { - "age": 18, - "id": "t-mobile-g2", - "imageUrl": "img/phones/t-mobile-g2.0.jpg", - "name": "T-Mobile G2", - "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible." - }, - { - "age": 19, - "id": "motorola-charm-with-motoblur", - "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", - "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", - "snippet": "Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service." - } -]; +import utils from "../../utils.js"; + +let phonesFromServer; const phoneByIdDetails = { "additionalFeatures": "Adobe\u00ae Flash\u00ae Player compatible; 1.3MP front-facing camera for video chat; eReader pre-loaded; Swype text input technology\r\n", "android": { @@ -223,13 +71,31 @@ const phoneByIdDetails = { } }; +const API_URL ='https://mate-academy.github.io/phone-catalogue-static/api'; + const PhoneService = { getAll({query = '', order = ''} = {}) { - const firltredPhones = phonesFromServer.filter((phone) => { - return phone.name.toLowerCase().includes(query.toLowerCase()); + + return fetch(API_URL + '/phones.json') + .then((response) => response.json()) + .then((phones) => { + phonesFromServer = phones; }) - const sortedPhones = firltredPhones; // mast be soreted - return sortedPhones; + .then(() => { + const firltredPhones = phonesFromServer.filter((phone) => { + return phone.name.toLowerCase().includes(query.toLowerCase()); + }) + const sortedPhones = firltredPhones; + + if(order === 'age') { + utils.sortFromAge(sortedPhones); + } else { + utils.sortFromName(sortedPhones); + } + + return sortedPhones; + }) + }, getById(id) { diff --git a/js/utils.js b/js/utils.js index f789fa0..a151a24 100644 --- a/js/utils.js +++ b/js/utils.js @@ -1,5 +1,7 @@ const utils = { - debounce + debounce, + sortFromAge, + sortFromName } export default utils; @@ -8,8 +10,26 @@ function debounce(f, delay) { let timer = null; return function(...args){ clearTimeout(timer); - timer = setTimeout(() =>{ + timer = setTimeout(() => { f.call(this, ...args) },delay) } -} \ No newline at end of file +} + +function sortFromAge(arr) { + arr.sort((a,b) => { + if(a.age > b.age) return 1; + if(a.age < b.age) return -1; + return 0 + }) +} + +function sortFromName(arr) { + arr.sort((a,b) => { + if(a.name > b.name) return 1; + if(a.name < b.name) return -1; + return 0 + }) +} + +