From 1385812763669721ae4685b3fa9e6d5eba5d61db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D1=81=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=A2=D0=BE=D0=BF=D0=BE=D1=80=D0=BA=D0=BE=D0=B2=D0=B0?= Date: Sun, 14 Apr 2024 11:40:50 +0500 Subject: [PATCH 1/3] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D1=8F?= =?UTF-8?q?=D0=B9=20=D0=B8=20=D0=B2=D0=BB=D0=B0=D1=81=D1=82=D0=B2=D1=83?= =?UTF-8?q?=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 423 ++++++++++++++++++++++++++++++-- package.json | 2 + src/const.js | 74 +++--- src/main.js | 2 +- src/model/offers-model.js | 2 +- src/presenter/trip-presenter.js | 108 +++++--- src/utils.js | 114 ++++----- src/view/edit-point-view.js | 219 +++++++++-------- src/view/filter-view.js | 69 ++---- src/view/point-list-view.js | 26 +- src/view/point-view.js | 143 +++++------ src/view/sort-view.js | 53 ++-- src/view/trip-info-view.js | 36 +-- webpack.config.js | 6 +- 14 files changed, 829 insertions(+), 448 deletions(-) diff --git a/package-lock.json b/package-lock.json index bcab3ec..f9d5e77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,16 +8,18 @@ "name": "big-trip", "version": "19.0.0", "dependencies": { - "dayjs": "^1.11.6" + "dayjs": "1.11.6" }, "devDependencies": { "@babel/core": "7.20.5", "@babel/preset-env": "7.20.2", "babel-loader": "9.1.0", "copy-webpack-plugin": "11.0.0", + "css-loader": "6.7.2", "eslint": "8.28.0", "eslint-config-htmlacademy": "8.0.0", - "html-webpack-plugin": "^5.6.0", + "html-webpack-plugin": "5.6.0", + "style-loader": "^3.3.1", "webpack": "5.75.0", "webpack-cli": "5.0.0", "webpack-dev-server": "4.11.1" @@ -2082,9 +2084,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.11.19", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.19.tgz", - "integrity": "sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==", + "version": "20.11.17", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.17.tgz", + "integrity": "sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -2868,9 +2870,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001588", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz", - "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==", + "version": "1.0.30001587", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz", + "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==", "dev": true, "funding": [ { @@ -3228,6 +3230,65 @@ "node": ">= 8" } }, + "node_modules/css-loader": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.2.tgz", + "integrity": "sha512-oqGbbVcBJkm8QwmnNzrFrWTnudnRZC+1eXikLJl0n4ljcfotgRifpg2a1lKy8jTrc4/d9A/ap1GFq1jDKG7J+Q==", + "dev": true, + "dependencies": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.18", + "postcss-modules-extract-imports": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-scope": "^3.0.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.3.8" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "node_modules/css-loader/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/css-loader/node_modules/semver": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/css-loader/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/css-select": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", @@ -3256,6 +3317,18 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/dayjs": { "version": "1.11.6", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz", @@ -3463,9 +3536,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.677", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.677.tgz", - "integrity": "sha512-erDa3CaDzwJOpyvfKhOiJjBVNnMM0qxHq47RheVVwsSQrgBA9ZSGV9kdaOfZDPXcHzhG7lBxhj6A7KvfLJBd6Q==", + "version": "1.4.670", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.670.tgz", + "integrity": "sha512-hcijYOWjOtjKrKPtNA6tuLlA/bTLO3heFG8pQA6mLpq7dRydSWicXova5lyxDzp1iVJaYhK7J2OQlGE52KYn7A==", "dev": true }, "node_modules/encodeurl": { @@ -4743,6 +4816,18 @@ "node": ">=0.10.0" } }, + "node_modules/icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", @@ -5507,6 +5592,24 @@ "multicast-dns": "cli.js" } }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -6000,6 +6103,112 @@ "node": ">=8" } }, + "node_modules/postcss": { + "version": "8.4.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", + "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-modules-extract-imports": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "dev": true, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-local-by-default": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz", + "integrity": "sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==", + "dev": true, + "dependencies": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-scope": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz", + "integrity": "sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==", + "dev": true, + "dependencies": { + "postcss-selector-parser": "^6.0.4" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "dev": true, + "dependencies": { + "icss-utils": "^5.0.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz", + "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -6739,6 +6948,15 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", @@ -6875,6 +7093,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-loader": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", + "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", + "dev": true, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -6909,9 +7143,9 @@ } }, "node_modules/terser": { - "version": "5.27.2", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.2.tgz", - "integrity": "sha512-sHXmLSkImesJ4p5apTeT63DsV4Obe1s37qT8qvwHRmVxKTBH7Rv9Wr26VcAMmLbmk9UliiwK8z+657NyJHHy/w==", + "version": "5.27.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.0.tgz", + "integrity": "sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==", "dev": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", @@ -9144,9 +9378,9 @@ "dev": true }, "@types/node": { - "version": "20.11.19", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.19.tgz", - "integrity": "sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==", + "version": "20.11.17", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.17.tgz", + "integrity": "sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==", "dev": true, "requires": { "undici-types": "~5.26.4" @@ -9780,9 +10014,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001588", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz", - "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==", + "version": "1.0.30001587", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz", + "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==", "dev": true }, "chalk": { @@ -10054,6 +10288,48 @@ "which": "^2.0.1" } }, + "css-loader": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.2.tgz", + "integrity": "sha512-oqGbbVcBJkm8QwmnNzrFrWTnudnRZC+1eXikLJl0n4ljcfotgRifpg2a1lKy8jTrc4/d9A/ap1GFq1jDKG7J+Q==", + "dev": true, + "requires": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.18", + "postcss-modules-extract-imports": "^3.0.0", + "postcss-modules-local-by-default": "^4.0.0", + "postcss-modules-scope": "^3.0.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.3.8" + }, + "dependencies": { + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, + "semver": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + } + } + }, "css-select": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", @@ -10073,6 +10349,12 @@ "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", "dev": true }, + "cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true + }, "dayjs": { "version": "1.11.6", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz", @@ -10226,9 +10508,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.4.677", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.677.tgz", - "integrity": "sha512-erDa3CaDzwJOpyvfKhOiJjBVNnMM0qxHq47RheVVwsSQrgBA9ZSGV9kdaOfZDPXcHzhG7lBxhj6A7KvfLJBd6Q==", + "version": "1.4.670", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.670.tgz", + "integrity": "sha512-hcijYOWjOtjKrKPtNA6tuLlA/bTLO3heFG8pQA6mLpq7dRydSWicXova5lyxDzp1iVJaYhK7J2OQlGE52KYn7A==", "dev": true }, "encodeurl": { @@ -11177,6 +11459,13 @@ "safer-buffer": ">= 2.1.2 < 3" } }, + "icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true, + "requires": {} + }, "ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", @@ -11717,6 +12006,12 @@ "thunky": "^1.0.2" } }, + "nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true + }, "natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -12083,6 +12378,69 @@ } } }, + "postcss": { + "version": "8.4.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", + "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", + "dev": true, + "requires": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } + }, + "postcss-modules-extract-imports": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "dev": true, + "requires": {} + }, + "postcss-modules-local-by-default": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz", + "integrity": "sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==", + "dev": true, + "requires": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + } + }, + "postcss-modules-scope": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz", + "integrity": "sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==", + "dev": true, + "requires": { + "postcss-selector-parser": "^6.0.4" + } + }, + "postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "dev": true, + "requires": { + "icss-utils": "^5.0.0" + } + }, + "postcss-selector-parser": { + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz", + "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + } + }, + "postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true + }, "prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -12648,6 +13006,12 @@ "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true }, + "source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true + }, "source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", @@ -12757,6 +13121,13 @@ "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true }, + "style-loader": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", + "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", + "dev": true, + "requires": {} + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -12779,9 +13150,9 @@ "dev": true }, "terser": { - "version": "5.27.2", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.2.tgz", - "integrity": "sha512-sHXmLSkImesJ4p5apTeT63DsV4Obe1s37qT8qvwHRmVxKTBH7Rv9Wr26VcAMmLbmk9UliiwK8z+657NyJHHy/w==", + "version": "5.27.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.0.tgz", + "integrity": "sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==", "dev": true, "requires": { "@jridgewell/source-map": "^0.3.3", diff --git a/package.json b/package.json index 8f454d6..2c9d1a4 100644 --- a/package.json +++ b/package.json @@ -20,9 +20,11 @@ "@babel/preset-env": "7.20.2", "babel-loader": "9.1.0", "copy-webpack-plugin": "11.0.0", + "css-loader": "6.7.2", "eslint": "8.28.0", "eslint-config-htmlacademy": "8.0.0", "html-webpack-plugin": "5.6.0", + "style-loader": "^3.3.1", "webpack": "5.75.0", "webpack-cli": "5.0.0", "webpack-dev-server": "4.11.1" diff --git a/src/const.js b/src/const.js index 9e3a7c8..97f9018 100644 --- a/src/const.js +++ b/src/const.js @@ -18,56 +18,56 @@ const CITIES = [ ]; const OFFERS = [ - 'Order Uber', - 'Add luggage', - 'Switch to comfort', - 'Rent a car', - 'Add breakfast', - 'Book tickets', - 'Lunch in city', - 'Upgrade to a business class' + 'Order Uber', + 'Add luggage', + 'Switch to comfort', + 'Rent a car', + 'Add breakfast', + 'Book tickets', + 'Lunch in city', + 'Upgrade to a business class' ]; const DESCRIPTION = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet varius magna, non porta ligula feugiat eget. Fusce tristique felis at fermentum pharetra. Aliquam id orci ut lectus varius viverra.'; const Price = { - MIN: 1, - MAX: 1000 + MIN: 1, + MAX: 1000 }; const TYPES = [ - 'taxi', - 'bus', - 'train', - 'ship', - 'drive', - 'flight', - 'check-in', - 'sightseeing', - 'restaurant' + 'taxi', + 'bus', + 'train', + 'ship', + 'drive', + 'flight', + 'check-in', + 'sightseeing', + 'restaurant' ]; const DEFAULT_TYPE = 'flight'; const POINT_EMPTY = { - basePrice: 0, - dateFrom: null, - dateTo: null, - destination: null, - isFavorite: false, - offers: [], - type: DEFAULT_TYPE + basePrice: 0, + dateFrom: null, + dateTo: null, + destination: null, + isFavorite: false, + offers: [], + type: DEFAULT_TYPE }; export { - OFFER_COUNT, - DESTINATION_COUNT, - POINT_COUNT, - CITIES, - OFFERS, - DESCRIPTION, - Price, - TYPES, - DEFAULT_TYPE, - POINT_EMPTY -}; + OFFER_COUNT, + DESTINATION_COUNT, + POINT_COUNT, + CITIES, + OFFERS, + DESCRIPTION, + Price, + TYPES, + DEFAULT_TYPE, + POINT_EMPTY +} diff --git a/src/main.js b/src/main.js index aeb5082..4bfca32 100644 --- a/src/main.js +++ b/src/main.js @@ -1,11 +1,11 @@ import TripInfoView from './view/trip-info-view.js'; import FilterView from './view/filter-view.js'; -import { render, RenderPosition } from './render.js'; import TripPresenter from './presenter/trip-presenter.js'; import MockService from './service/mock-service.js'; import DestinationsModel from './model/destinations-model.js'; import OffersModel from './model/offers-model.js'; import PointsModel from './model/points-model.js'; +import { render, RenderPosition } from './framework/render.js'; const tripInfoElement = document.querySelector('.trip-main'); const siteMainElement = document.querySelector('.page-main'); diff --git a/src/model/offers-model.js b/src/model/offers-model.js index 2924146..03added 100644 --- a/src/model/offers-model.js +++ b/src/model/offers-model.js @@ -9,6 +9,6 @@ export default class OffersModel { } getByType(type) { - return this.offers.find((offer) => offer.type === type); + return this.offers.find((offer) => offer.type === type).offers; } } diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js index eb05fd3..8a26afc 100644 --- a/src/presenter/trip-presenter.js +++ b/src/presenter/trip-presenter.js @@ -2,40 +2,82 @@ import SortView from '../view/sort-view.js'; import EditPointView from '../view/edit-point-view.js'; import PointView from '../view/point-view.js'; import TripView from '../view/point-list-view.js'; -import { render } from '../render.js'; +import { render, replace } from '../framework/render.js'; export default class TripPresenter { - constructor({tripContainer, destinationsModel, offersModel, pointsModel}) { - this.tripContainer = tripContainer; - this.pointList = new TripView(); - this.destinationsModel = destinationsModel; - this.offersModel = offersModel; - this.pointsModel = pointsModel; - this.points = [...pointsModel.get()]; - } - - init() { - render(new SortView(), this.tripContainer); - render(this.pointList, this.tripContainer); - render( - new EditPointView({ - point: this.points[0], - pointDestination: this.destinationsModel.getById(this.points[0].destination), - pointOffers: this.offersModel.getByType(this.points[0].type), - }), - this.pointList.getElement() - ); - - for (let i = 1; i < this.points.length; i++) { - const point = this.points[i]; - render( - new PointView({ - point, - pointDestination: this.destinationsModel.getById(point.destination), - pointOffers: this.offersModel.getByType(point.type) - }), - this.pointList.getElement() - ); + #tripContainer = null; + #destinationsModel = null; + #offersModel = null; + #pointsModel = null; + #pointListComponent = new TripView(); + #sortComponent = new SortView(); + + #points = []; + + constructor({tripContainer, destinationsModel, offersModel, pointsModel}) { + this.#tripContainer = tripContainer; + this.#destinationsModel = destinationsModel; + this.#offersModel = offersModel; + this.#pointsModel = pointsModel; + this.#points = [...this.#pointsModel.get()]; + } + + init() { + render(this.#sortComponent, this.#tripContainer); + render(this.#pointListComponent, this.#tripContainer); + + this.#points.forEach((point) => { + this.#renderPoint(point); + }); + } + + #renderPoint = (point) => { + const pointComponent = new PointView({ + point, + pointDestination: this.#destinationsModel.getById(point.destination), + pointOffers: this.#offersModel.getByType(point.type), + onEditClick: pointEditClickHandler + }); + + const editPointComponent = new EditPointView({ + point, + pointDestination: this.#destinationsModel.getById(point.destination), + pointOffers: this.#offersModel.getByType(point.type), + onSubmitClick: pointSubmitHandler, + onResetClick: resetButtonClickHandler + }); + + const replacePointToForm = () => { + replace(editPointComponent, pointComponent); + }; + + const replaceFormToPoint = () => { + replace(pointComponent, editPointComponent); + }; + + const escKeyDownHandler = (evt) => { + if (evt.key === 'Escape' || evt.key === 'Esc') { + evt.preventDefault(); + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + } + }; + + function pointEditClickHandler() { + replacePointToForm(); + document.addEventListener('keydown', escKeyDownHandler); + }; + + function resetButtonClickHandler() { + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + }; + + function pointSubmitHandler() { + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + }; + + render(pointComponent, this.#pointListComponent.element); } - } } diff --git a/src/utils.js b/src/utils.js index 286cad7..d64bcd2 100644 --- a/src/utils.js +++ b/src/utils.js @@ -5,87 +5,89 @@ import relativeTime from 'dayjs/plugin/relativeTime'; dayjs.extend(duration); dayjs.extend(relativeTime); -const MSEC_IN_SEC = 1000; -const SEC_IN_MIN = 60; -const MIN_IN_HOUR = 60; -const HOUR_IN_DAY = 24; +const TimePeriods = { + MSEC_IN_SEC: 1000, + SEC_IN_MIN: 60, + MIN_IN_HOUR: 60, + HOUR_IN_DAY: 24 +} -const MSEC_IN_HOUR = MIN_IN_HOUR * SEC_IN_MIN * MSEC_IN_SEC; -const MSEC_IN_DAY = HOUR_IN_DAY * MSEC_IN_HOUR; +const MSEC_IN_HOUR = TimePeriods.MIN_IN_HOUR * TimePeriods.SEC_IN_MIN * TimePeriods.MSEC_IN_SEC; +const MSEC_IN_DAY = TimePeriods.HOUR_IN_DAY * MSEC_IN_HOUR; const Duration = { - HOUR: 5, - DAY: 5, - MIN: 59 + HOUR: 5, + DAY: 5, + MIN: 59 }; let date = dayjs().subtract(getRandomInteger(0, Duration.DAY), 'day').toDate(); -function getDate({ next }) { - const minsGap = getRandomInteger(0, Duration.MIN); - const hoursGap = getRandomInteger(1, Duration.HOUR); - const daysGap = getRandomInteger(0, Duration.DAY); +function getDate({next}) { + const minsGap = getRandomInteger(0, Duration.MIN); + const hoursGap = getRandomInteger(1, Duration.HOUR); + const daysGap = getRandomInteger(0, Duration.DAY); - if (next) { - date = dayjs(date) - .add(minsGap, 'minute') - .add(hoursGap, 'hour') - .add(daysGap, 'day') - .toDate(); - } + if (next) { + date = dayjs(date) + .add(minsGap, 'minute') + .add(hoursGap, 'hour') + .add(daysGap, 'day') + .toDate(); + } - return date; + return date; } function getRandomInteger(a = 0, b = 1) { - const lower = Math.ceil(Math.min(a, b)); - const upper = Math.floor(Math.max(a, b)); + const lower = Math.ceil(Math.min(a,b)); + const upper = Math.floor(Math.max(a,b)); - return Math.floor(lower + Math.random() * (upper - lower + 1)); + return Math.floor(lower + Math.random() * (upper - lower + 1)); } function getRandomValue(items) { - return items[getRandomInteger(0, items.length - 1)]; + return items[getRandomInteger(0, items.length - 1)]; } -function formatStringToDateTime(dateF) { - return dayjs(dateF).format('DD/MM/YY HH:mm'); +function formatStringToDateTime(date) { + return dayjs(date).format('DD/MM/YY HH:mm'); } -function formatStringToShortDate(dateF) { - return dayjs(dateF).format('MMM DD'); +function formatStringToShortDate(date) { + return dayjs(date).format('MMM DD'); } -function formatStringToTime(dateF) { - return dayjs(dateF).format('HH:mm'); +function formatStringToTime(date) { + return dayjs(date).format('HH:mm'); } function getPointDuration(dateFrom, dateTo) { - const timeDiff = dayjs(dateTo).diff(dayjs(dateFrom)); - - let pointDuration = 0; - - switch (true) { - case (timeDiff >= MSEC_IN_DAY): - pointDuration = dayjs.duration(timeDiff).format('DD[D] HH[H] mm[M]'); - break; - case (timeDiff >= MSEC_IN_HOUR): - pointDuration = dayjs.duration(timeDiff).format('HH[H] mm[M]'); - break; - case (timeDiff < MSEC_IN_HOUR): - pointDuration = dayjs.duration(timeDiff).format('mm[M]'); - break; - } - - return pointDuration; + const timeDiff = dayjs(dateTo).diff(dayjs(dateFrom)); + + let pointDuration = 0; + + switch (true) { + case (timeDiff >= MSEC_IN_DAY): + pointDuration = dayjs.duration(timeDiff).format('DD[D] HH[H] mm[M]'); + break; + case (timeDiff >= MSEC_IN_HOUR): + pointDuration = dayjs.duration(timeDiff).format('HH[H] mm[M]'); + break; + case (timeDiff < MSEC_IN_HOUR): + pointDuration = dayjs.duration(timeDiff).format('mm[M]'); + break; + } + + return pointDuration; } export { - getDate, - getRandomInteger, - getRandomValue, - formatStringToDateTime, - formatStringToShortDate, - formatStringToTime, - getPointDuration -}; + getDate, + getRandomInteger, + getRandomValue, + formatStringToDateTime, + formatStringToShortDate, + formatStringToTime, + getPointDuration +} diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index c691019..5e7863b 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -1,140 +1,149 @@ -import { createElement } from '../render.js'; -import { POINT_EMPTY, TYPES, CITIES } from '../const.js'; +import AbstractView from '../framework/view/abstract-view.js'; +import { POINT_EMPTY, TYPES, CITIES } from "../const.js"; import { formatStringToDateTime } from '../utils.js'; -function createPointCitiesOptionsTemplate() { - return ( - ` - ${CITIES.map((city) => ``).join('')} - ` - ); +const createPointCitiesOptionsTemplate = () => { + return ( + ` + ${CITIES.map((city) => ``).join('')} + ` + ); } -function createPointPhotosTemplate(pointDestination) { - return ( - `
- ${pointDestination.pictures.map((picture) => - `${picture.description}`).join('')} -
` - ); +const createPointPhotosTemplate = (pointDestination) => { + return ( + `
+ ${pointDestination.pictures.map((picture) => + `${picture.description}`).join('')} +
` + ); } -function createPointTypesTemplate(currentType) { - return TYPES.map((type) => - `
- - -
`).join(''); +const createPointTypesTemplate = (currentType) => { + return TYPES.map((type) => + `
+ + +
`).join(''); } -function createPointOffersTemplate ({ pointOffers }) { - const offerItems = pointOffers.map((offer) => { - return ( - `
- - -
` - ); - }).join(''); - - return `
${offerItems}
`; +const createPointOffersTemplate = ({pointOffers}) => { + const offerItems = pointOffers.map(offer => { + return ( + `
+ + +
` + ); + }).join(''); + + return `
${offerItems}
`; } -function createEditPointTemplate({ point, pointDestination, pointOffers }) { - const { basePrice, dateFrom, dateTo, type } = point; - return (` -
  • -
    +const createEditPointTemplate = ({point, pointDestination, pointOffers}) => { + const { basePrice, dateFrom, dateTo, offers, type } = point; + + return ( + `
  • +
    -
    +
    -
    -
    - - ${createPointTypesTemplate(type)} -
    +
    + + ${createPointTypesTemplate(type)} +
    -
    - -
    - - - ${createPointCitiesOptionsTemplate()} -
    - -
    +
    +
    + + + ${createPointCitiesOptionsTemplate()} +
    +
    — -
    - -
    +
    +
    -
    - - - +
    + + +
    -
    -

    Offers

    - ${createPointOffersTemplate({ pointOffers })} -
    - -
    -

    Destination

    -

    ${pointDestination.description}

    -
    - ${createPointPhotosTemplate(pointDestination)} -
    -
    +
    +

    Offers

    + ${createPointOffersTemplate({pointOffers})} +
    +
    +

    Destination

    +

    ${pointDestination.description}

    +
    + ${createPointPhotosTemplate(pointDestination)} +
    +
    -
    • -
    • - `); + + ` + ); } -export default class EditPointView { - constructor({ point = POINT_EMPTY, pointDestination, pointOffers }) { - this.point = point; - this.pointDestination = pointDestination; - this.pointOffers = pointOffers; - } +export default class EditPointView extends AbstractView { + #point = null; + #pointDestination = null; + #pointOffers = null; + #onSubmitClick = null; + #onResetClick = null; + + constructor({point = POINT_EMPTY, pointDestination, pointOffers, onSubmitClick, onResetClick}) { + super(); + this.#point = point; + this.#pointDestination = pointDestination; + this.#pointOffers = pointOffers; + this.#onSubmitClick = onSubmitClick; + this.#onResetClick = onResetClick; + + this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler); - getTemplate() { - return createEditPointTemplate({ - point: this.point, - pointDestination: this.pointDestination, - pointOffers: this.pointOffers - }); - } + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#resetButtonClickHandler); + } - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); + get template() { + return createEditPointTemplate({ + point: this.#point, + pointDestination: this.#pointDestination, + pointOffers: this.#pointOffers + }); } - return this.element; - } + #formSubmitHandler = (evt) => { + evt.preventDefault(); + this.#onSubmitClick(); + } - removeElement() { - this.element = null; - } + #resetButtonClickHandler = (evt) => { + evt.preventDefault(); + this.#onResetClick(); + } } diff --git a/src/view/filter-view.js b/src/view/filter-view.js index 510a7e7..e3429bf 100644 --- a/src/view/filter-view.js +++ b/src/view/filter-view.js @@ -1,47 +1,32 @@ -import { createElement } from '../render.js'; - -function createFilterTemplate () { - return (` -
    -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - - -
    - `); +import AbstractView from '../framework/view/abstract-view.js'; + +const createFilterTemplate = () => { + return ( + `
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    ` + ); } -export default class FilterView { - getTemplate() { - return createFilterTemplate(); - } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); +export default class FilterView extends AbstractView { + get template() { + return createFilterTemplate(); } - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/src/view/point-list-view.js b/src/view/point-list-view.js index 1d12095..11a5198 100644 --- a/src/view/point-list-view.js +++ b/src/view/point-list-view.js @@ -1,23 +1,13 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; -function createPointListTemplate () { - return '
      '; +const createPointListTemplate = () => { + return ( + `
          ` + ); } -export default class PointListView { - getTemplate() { - return createPointListTemplate(); - } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); +export default class PointListView extends AbstractView { + get template() { + return createPointListTemplate(); } - - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/src/view/point-view.js b/src/view/point-view.js index ffa5495..6146454 100644 --- a/src/view/point-view.js +++ b/src/view/point-view.js @@ -1,82 +1,85 @@ -import { createElement } from '../render.js'; -import { formatStringToDateTime, formatStringToShortDate, formatStringToTime, getPointDuration } from '../utils.js'; +import AbstractView from '../framework/view/abstract-view.js'; +import { formatStringToDateTime, formatStringToShortDate, formatStringToTime, getPointDuration} from '../utils.js'; -function createPointOffersTemplate({ pointOffers }) { - const offerItems = pointOffers.map((offer) => { - return ( - `
        • - ${offer.title} - +€  - ${offer.price} -
          • ` - ); - }).join(''); +const createPointOffersTemplate = ({pointOffers}) => { + const offerItems = pointOffers.map(offer => { + return ( + `
        • + ${offer.title} + +€  + ${offer.price} +
          • ` + ); + }).join(''); - return `
            ${offerItems}
          `; + return `
            ${offerItems}
          `; } -function createPointTemplate({ point, pointDestination, pointOffers }) { - const { basePrice, dateFrom, dateTo, isFavorite, type } = point; - const favoriteClassName = isFavorite ? 'event__favorite-btn--active' : ''; - return (` -
        • -
          - -
          - Event type icon -
          -

          ${type} ${pointDestination.name}

          -
          -

          - - — - -

          -

          ${getPointDuration(dateFrom, dateTo)}

          -
          -

          - € ${basePrice} -

          - - ${createPointOffersTemplate({ pointOffers })} - - -
          -
          • - `); +const createPointTemplate = ({point, pointDestination, pointOffers}) => { + const { basePrice, dateFrom, dateTo, offers, isFavorite, type } = point; + const favoriteClassName = isFavorite ? 'event__favorite-btn--active' : ''; + + return ( + `
        • +
          + +
          + Event type icon +
          +

          ${type} ${pointDestination.name}

          +
          +

          + + — + +

          +

          ${getPointDuration(dateFrom, dateTo)}

          +
          +

          + € ${basePrice} +

          + + ${createPointOffersTemplate({pointOffers})} + + +
          +
          • ` + ); } -export default class PointView { - constructor({ point, pointDestination, pointOffers }) { - this.point = point; - this.pointDestination = pointDestination; - this.pointOffers = pointOffers; - } +export default class PointView extends AbstractView { + #point = null; + #pointDestination = null; + #pointOffers = null; + #onEditClick = null; - getTemplate() { - return createPointTemplate({ - point: this.point, - pointDestination: this.pointDestination, - pointOffers: this.pointOffers - }); - } + constructor({point, pointDestination, pointOffers, onEditClick}) { + super(); + this.#point = point; + this.#pointDestination = pointDestination; + this.#pointOffers = pointOffers; + this.#onEditClick = onEditClick; - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); } - return this.element; - } + get template() { + return createPointTemplate({ + point: this.#point, + pointDestination: this.#pointDestination, + pointOffers: this.#pointOffers + }); + } - removeElement() { - this.element = null; - } + #editClickHandler = (evt) => { + evt.preventDefault(); + this.#onEditClick(); + } } diff --git a/src/view/sort-view.js b/src/view/sort-view.js index 308996b..29b8f0c 100644 --- a/src/view/sort-view.js +++ b/src/view/sort-view.js @@ -1,50 +1,35 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; -function createSortTemplate () { - return (` -
          +const createSortTemplate = () => { + return ( + `
          - - + +
          - - + +
          -
          - - + +
          -
          - - + +
          -
          - - + +
          -
          - `); + ` + ); } -export default class SortView { - getTemplate() { - return createSortTemplate(); - } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); +export default class SortView extends AbstractView { + get template() { + return createSortTemplate(); } - - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/src/view/trip-info-view.js b/src/view/trip-info-view.js index b14f614..58b4bb2 100644 --- a/src/view/trip-info-view.js +++ b/src/view/trip-info-view.js @@ -1,35 +1,23 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; -function createTripInfoTemplate () { - return (` -
          +const createTripInfoTemplate = () => { + return ( + `
          -

          Amsterdam — Chamonix — Geneva

          +

          Amsterdam — Chamonix — Geneva

          -

          Mar 18 — 20

          +

          Mar 18 — 20

          - Total: € 1230 + Total: € 1230

          -
          - `); +
          ` + ); } -export default class TripInfoView { - getTemplate() { - return createTripInfoTemplate(); - } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); +export default class TripInfoView extends AbstractView { + get template() { + return createTripInfoTemplate(); } - - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/webpack.config.js b/webpack.config.js index fe1c049..6c6ac38 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -37,6 +37,10 @@ module.exports = { }, }, }, + { + test: /\.css$/i, + use: ['style-loader', 'css-loader'] + }, ] } -}; \ No newline at end of file +}; From 05f9a660bef8ee86736c756469695ab7f97dcd5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D1=81=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=A2=D0=BE=D0=BF=D0=BE=D1=80=D0=BA=D0=BE=D0=B2=D0=B0?= Date: Sun, 14 Apr 2024 11:45:54 +0500 Subject: [PATCH 2/3] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D1=8F?= =?UTF-8?q?=D0=B9=20=D0=B8=20=D0=B2=D0=BB=D0=B0=D1=81=D1=82=D0=B2=D1=83?= =?UTF-8?q?=D0=B92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/const.js | 72 +++++++++---------- src/main.js | 2 +- src/presenter/trip-presenter.js | 124 ++++++++++++++++---------------- src/render.js | 2 +- src/utils.js | 100 +++++++++++++------------- src/view/edit-point-view.js | 104 +++++++++++++-------------- src/view/filter-view.js | 12 ++-- src/view/point-list-view.js | 12 ++-- src/view/point-view.js | 76 ++++++++++---------- src/view/sort-view.js | 12 ++-- src/view/trip-info-view.js | 12 ++-- webpack.config.js | 18 ++--- 12 files changed, 273 insertions(+), 273 deletions(-) diff --git a/src/const.js b/src/const.js index 97f9018..cc4c19a 100644 --- a/src/const.js +++ b/src/const.js @@ -18,56 +18,56 @@ const CITIES = [ ]; const OFFERS = [ - 'Order Uber', - 'Add luggage', - 'Switch to comfort', - 'Rent a car', - 'Add breakfast', - 'Book tickets', - 'Lunch in city', - 'Upgrade to a business class' + 'Order Uber', + 'Add luggage', + 'Switch to comfort', + 'Rent a car', + 'Add breakfast', + 'Book tickets', + 'Lunch in city', + 'Upgrade to a business class' ]; const DESCRIPTION = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet varius magna, non porta ligula feugiat eget. Fusce tristique felis at fermentum pharetra. Aliquam id orci ut lectus varius viverra.'; const Price = { - MIN: 1, - MAX: 1000 + MIN: 1, + MAX: 1000 }; const TYPES = [ - 'taxi', - 'bus', - 'train', - 'ship', - 'drive', - 'flight', - 'check-in', - 'sightseeing', - 'restaurant' + 'taxi', + 'bus', + 'train', + 'ship', + 'drive', + 'flight', + 'check-in', + 'sightseeing', + 'restaurant' ]; const DEFAULT_TYPE = 'flight'; const POINT_EMPTY = { - basePrice: 0, - dateFrom: null, - dateTo: null, - destination: null, - isFavorite: false, - offers: [], - type: DEFAULT_TYPE + basePrice: 0, + dateFrom: null, + dateTo: null, + destination: null, + isFavorite: false, + offers: [], + type: DEFAULT_TYPE }; export { - OFFER_COUNT, - DESTINATION_COUNT, - POINT_COUNT, - CITIES, - OFFERS, - DESCRIPTION, - Price, - TYPES, - DEFAULT_TYPE, - POINT_EMPTY + OFFER_COUNT, + DESTINATION_COUNT, + POINT_COUNT, + CITIES, + OFFERS, + DESCRIPTION, + Price, + TYPES, + DEFAULT_TYPE, + POINT_EMPTY } diff --git a/src/main.js b/src/main.js index 4bfca32..22f2c77 100644 --- a/src/main.js +++ b/src/main.js @@ -16,7 +16,7 @@ const destinationsModel = new DestinationsModel(mockService); const offersModel = new OffersModel(mockService); const pointsModel = new PointsModel(mockService); -const tripPresenter = new TripPresenter({tripContainer: eventListElement, destinationsModel, offersModel, pointsModel}); +const tripPresenter = new TripPresenter({ tripContainer: eventListElement, destinationsModel, offersModel, pointsModel }); render(new TripInfoView(), tripInfoElement, RenderPosition.AFTERBEGIN); render(new FilterView(), tripInfoElement.querySelector('.trip-controls__filters')); diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js index 8a26afc..1bb8bae 100644 --- a/src/presenter/trip-presenter.js +++ b/src/presenter/trip-presenter.js @@ -5,79 +5,79 @@ import TripView from '../view/point-list-view.js'; import { render, replace } from '../framework/render.js'; export default class TripPresenter { - #tripContainer = null; - #destinationsModel = null; - #offersModel = null; - #pointsModel = null; - #pointListComponent = new TripView(); - #sortComponent = new SortView(); + #tripContainer = null; + #destinationsModel = null; + #offersModel = null; + #pointsModel = null; + #pointListComponent = new TripView(); + #sortComponent = new SortView(); - #points = []; + #points = []; - constructor({tripContainer, destinationsModel, offersModel, pointsModel}) { - this.#tripContainer = tripContainer; - this.#destinationsModel = destinationsModel; - this.#offersModel = offersModel; - this.#pointsModel = pointsModel; - this.#points = [...this.#pointsModel.get()]; - } + constructor({ tripContainer, destinationsModel, offersModel, pointsModel }) { + this.#tripContainer = tripContainer; + this.#destinationsModel = destinationsModel; + this.#offersModel = offersModel; + this.#pointsModel = pointsModel; + this.#points = [...this.#pointsModel.get()]; + } - init() { - render(this.#sortComponent, this.#tripContainer); - render(this.#pointListComponent, this.#tripContainer); + init() { + render(this.#sortComponent, this.#tripContainer); + render(this.#pointListComponent, this.#tripContainer); - this.#points.forEach((point) => { - this.#renderPoint(point); - }); - } + this.#points.forEach((point) => { + this.#renderPoint(point); + }); + } - #renderPoint = (point) => { - const pointComponent = new PointView({ - point, - pointDestination: this.#destinationsModel.getById(point.destination), - pointOffers: this.#offersModel.getByType(point.type), - onEditClick: pointEditClickHandler - }); + #renderPoint = (point) => { + const pointComponent = new PointView({ + point, + pointDestination: this.#destinationsModel.getById(point.destination), + pointOffers: this.#offersModel.getByType(point.type), + onEditClick: pointEditClickHandler + }); - const editPointComponent = new EditPointView({ - point, - pointDestination: this.#destinationsModel.getById(point.destination), - pointOffers: this.#offersModel.getByType(point.type), - onSubmitClick: pointSubmitHandler, - onResetClick: resetButtonClickHandler - }); + const editPointComponent = new EditPointView({ + point, + pointDestination: this.#destinationsModel.getById(point.destination), + pointOffers: this.#offersModel.getByType(point.type), + onSubmitClick: pointSubmitHandler, + onResetClick: resetButtonClickHandler + }); - const replacePointToForm = () => { - replace(editPointComponent, pointComponent); - }; + const replacePointToForm = () => { + replace(editPointComponent, pointComponent); + }; - const replaceFormToPoint = () => { - replace(pointComponent, editPointComponent); - }; + const replaceFormToPoint = () => { + replace(pointComponent, editPointComponent); + }; - const escKeyDownHandler = (evt) => { - if (evt.key === 'Escape' || evt.key === 'Esc') { - evt.preventDefault(); - replaceFormToPoint(); - document.removeEventListener('keydown', escKeyDownHandler); - } - }; + const escKeyDownHandler = (evt) => { + if (evt.key === 'Escape' || evt.key === 'Esc') { + evt.preventDefault(); + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + } + }; - function pointEditClickHandler() { - replacePointToForm(); - document.addEventListener('keydown', escKeyDownHandler); - }; + function pointEditClickHandler() { + replacePointToForm(); + document.addEventListener('keydown', escKeyDownHandler); + }; - function resetButtonClickHandler() { - replaceFormToPoint(); - document.removeEventListener('keydown', escKeyDownHandler); - }; + function resetButtonClickHandler() { + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + }; - function pointSubmitHandler() { - replaceFormToPoint(); - document.removeEventListener('keydown', escKeyDownHandler); - }; + function pointSubmitHandler() { + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + }; - render(pointComponent, this.#pointListComponent.element); - } + render(pointComponent, this.#pointListComponent.element); + } } diff --git a/src/render.js b/src/render.js index 8c22c92..c01e5a6 100644 --- a/src/render.js +++ b/src/render.js @@ -16,4 +16,4 @@ function render(component, container, place = RenderPosition.BEFOREEND) { container.insertAdjacentElement(place, component.getElement()); } -export {RenderPosition, createElement, render}; +export { RenderPosition, createElement, render }; diff --git a/src/utils.js b/src/utils.js index d64bcd2..9a0deaf 100644 --- a/src/utils.js +++ b/src/utils.js @@ -6,88 +6,88 @@ dayjs.extend(duration); dayjs.extend(relativeTime); const TimePeriods = { - MSEC_IN_SEC: 1000, - SEC_IN_MIN: 60, - MIN_IN_HOUR: 60, - HOUR_IN_DAY: 24 + MSEC_IN_SEC: 1000, + SEC_IN_MIN: 60, + MIN_IN_HOUR: 60, + HOUR_IN_DAY: 24 } const MSEC_IN_HOUR = TimePeriods.MIN_IN_HOUR * TimePeriods.SEC_IN_MIN * TimePeriods.MSEC_IN_SEC; const MSEC_IN_DAY = TimePeriods.HOUR_IN_DAY * MSEC_IN_HOUR; const Duration = { - HOUR: 5, - DAY: 5, - MIN: 59 + HOUR: 5, + DAY: 5, + MIN: 59 }; let date = dayjs().subtract(getRandomInteger(0, Duration.DAY), 'day').toDate(); -function getDate({next}) { - const minsGap = getRandomInteger(0, Duration.MIN); - const hoursGap = getRandomInteger(1, Duration.HOUR); - const daysGap = getRandomInteger(0, Duration.DAY); +function getDate({ next }) { + const minsGap = getRandomInteger(0, Duration.MIN); + const hoursGap = getRandomInteger(1, Duration.HOUR); + const daysGap = getRandomInteger(0, Duration.DAY); - if (next) { - date = dayjs(date) - .add(minsGap, 'minute') - .add(hoursGap, 'hour') - .add(daysGap, 'day') - .toDate(); - } + if (next) { + date = dayjs(date) + .add(minsGap, 'minute') + .add(hoursGap, 'hour') + .add(daysGap, 'day') + .toDate(); + } - return date; + return date; } function getRandomInteger(a = 0, b = 1) { - const lower = Math.ceil(Math.min(a,b)); - const upper = Math.floor(Math.max(a,b)); + const lower = Math.ceil(Math.min(a, b)); + const upper = Math.floor(Math.max(a, b)); - return Math.floor(lower + Math.random() * (upper - lower + 1)); + return Math.floor(lower + Math.random() * (upper - lower + 1)); } function getRandomValue(items) { - return items[getRandomInteger(0, items.length - 1)]; + return items[getRandomInteger(0, items.length - 1)]; } function formatStringToDateTime(date) { - return dayjs(date).format('DD/MM/YY HH:mm'); + return dayjs(date).format('DD/MM/YY HH:mm'); } function formatStringToShortDate(date) { - return dayjs(date).format('MMM DD'); + return dayjs(date).format('MMM DD'); } function formatStringToTime(date) { - return dayjs(date).format('HH:mm'); + return dayjs(date).format('HH:mm'); } function getPointDuration(dateFrom, dateTo) { - const timeDiff = dayjs(dateTo).diff(dayjs(dateFrom)); - - let pointDuration = 0; - - switch (true) { - case (timeDiff >= MSEC_IN_DAY): - pointDuration = dayjs.duration(timeDiff).format('DD[D] HH[H] mm[M]'); - break; - case (timeDiff >= MSEC_IN_HOUR): - pointDuration = dayjs.duration(timeDiff).format('HH[H] mm[M]'); - break; - case (timeDiff < MSEC_IN_HOUR): - pointDuration = dayjs.duration(timeDiff).format('mm[M]'); - break; - } - - return pointDuration; + const timeDiff = dayjs(dateTo).diff(dayjs(dateFrom)); + + let pointDuration = 0; + + switch (true) { + case (timeDiff >= MSEC_IN_DAY): + pointDuration = dayjs.duration(timeDiff).format('DD[D] HH[H] mm[M]'); + break; + case (timeDiff >= MSEC_IN_HOUR): + pointDuration = dayjs.duration(timeDiff).format('HH[H] mm[M]'); + break; + case (timeDiff < MSEC_IN_HOUR): + pointDuration = dayjs.duration(timeDiff).format('mm[M]'); + break; + } + + return pointDuration; } export { - getDate, - getRandomInteger, - getRandomValue, - formatStringToDateTime, - formatStringToShortDate, - formatStringToTime, - getPointDuration + getDate, + getRandomInteger, + getRandomValue, + formatStringToDateTime, + formatStringToShortDate, + formatStringToTime, + getPointDuration } diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index 5e7863b..86bcaf9 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -3,34 +3,34 @@ import { POINT_EMPTY, TYPES, CITIES } from "../const.js"; import { formatStringToDateTime } from '../utils.js'; const createPointCitiesOptionsTemplate = () => { - return ( - ` + return ( + ` ${CITIES.map((city) => ``).join('')} ` - ); + ); } const createPointPhotosTemplate = (pointDestination) => { - return ( - `
          + return ( + `
          ${pointDestination.pictures.map((picture) => - `${picture.description}`).join('')} + `${picture.description}`).join('')}
          ` - ); + ); } const createPointTypesTemplate = (currentType) => { - return TYPES.map((type) => - `
          + return TYPES.map((type) => + `
          `).join(''); } -const createPointOffersTemplate = ({pointOffers}) => { - const offerItems = pointOffers.map(offer => { - return ( - `
          +const createPointOffersTemplate = ({ pointOffers }) => { + const offerItems = pointOffers.map(offer => { + return ( + `
          ` - ); - }).join(''); + ); + }).join(''); - return `
          ${offerItems}
          `; + return `
          ${offerItems}
          `; } -const createEditPointTemplate = ({point, pointDestination, pointOffers}) => { - const { basePrice, dateFrom, dateTo, offers, type } = point; +const createEditPointTemplate = ({ point, pointDestination, pointOffers }) => { + const { basePrice, dateFrom, dateTo, offers, type } = point; - return ( - `
        • + return ( + `
        • @@ -94,7 +94,7 @@ const createEditPointTemplate = ({point, pointDestination, pointOffers}) => {

          Offers

          - ${createPointOffersTemplate({pointOffers})} + ${createPointOffersTemplate({ pointOffers })}

          Destination

          @@ -106,44 +106,44 @@ const createEditPointTemplate = ({point, pointDestination, pointOffers}) => {
          • ` - ); + ); } export default class EditPointView extends AbstractView { - #point = null; - #pointDestination = null; - #pointOffers = null; - #onSubmitClick = null; - #onResetClick = null; + #point = null; + #pointDestination = null; + #pointOffers = null; + #onSubmitClick = null; + #onResetClick = null; - constructor({point = POINT_EMPTY, pointDestination, pointOffers, onSubmitClick, onResetClick}) { - super(); - this.#point = point; - this.#pointDestination = pointDestination; - this.#pointOffers = pointOffers; - this.#onSubmitClick = onSubmitClick; - this.#onResetClick = onResetClick; + constructor({ point = POINT_EMPTY, pointDestination, pointOffers, onSubmitClick, onResetClick }) { + super(); + this.#point = point; + this.#pointDestination = pointDestination; + this.#pointOffers = pointOffers; + this.#onSubmitClick = onSubmitClick; + this.#onResetClick = onResetClick; - this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler); + this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler); - this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#resetButtonClickHandler); - } + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#resetButtonClickHandler); + } - get template() { - return createEditPointTemplate({ - point: this.#point, - pointDestination: this.#pointDestination, - pointOffers: this.#pointOffers - }); - } + get template() { + return createEditPointTemplate({ + point: this.#point, + pointDestination: this.#pointDestination, + pointOffers: this.#pointOffers + }); + } - #formSubmitHandler = (evt) => { - evt.preventDefault(); - this.#onSubmitClick(); - } + #formSubmitHandler = (evt) => { + evt.preventDefault(); + this.#onSubmitClick(); + } - #resetButtonClickHandler = (evt) => { - evt.preventDefault(); - this.#onResetClick(); - } + #resetButtonClickHandler = (evt) => { + evt.preventDefault(); + this.#onResetClick(); + } } diff --git a/src/view/filter-view.js b/src/view/filter-view.js index e3429bf..dcc3181 100644 --- a/src/view/filter-view.js +++ b/src/view/filter-view.js @@ -1,8 +1,8 @@ import AbstractView from '../framework/view/abstract-view.js'; const createFilterTemplate = () => { - return ( - `
          + return ( + `
          @@ -21,12 +21,12 @@ const createFilterTemplate = () => {
          ` - ); + ); } export default class FilterView extends AbstractView { - get template() { - return createFilterTemplate(); - } + get template() { + return createFilterTemplate(); + } } diff --git a/src/view/point-list-view.js b/src/view/point-list-view.js index 11a5198..0efcfa4 100644 --- a/src/view/point-list-view.js +++ b/src/view/point-list-view.js @@ -1,13 +1,13 @@ import AbstractView from '../framework/view/abstract-view.js'; const createPointListTemplate = () => { - return ( - `
              ` - ); + return ( + `
                  ` + ); } export default class PointListView extends AbstractView { - get template() { - return createPointListTemplate(); - } + get template() { + return createPointListTemplate(); + } } diff --git a/src/view/point-view.js b/src/view/point-view.js index 6146454..25793b9 100644 --- a/src/view/point-view.js +++ b/src/view/point-view.js @@ -1,26 +1,26 @@ import AbstractView from '../framework/view/abstract-view.js'; -import { formatStringToDateTime, formatStringToShortDate, formatStringToTime, getPointDuration} from '../utils.js'; +import { formatStringToDateTime, formatStringToShortDate, formatStringToTime, getPointDuration } from '../utils.js'; -const createPointOffersTemplate = ({pointOffers}) => { - const offerItems = pointOffers.map(offer => { - return ( - `
                • +const createPointOffersTemplate = ({ pointOffers }) => { + const offerItems = pointOffers.map(offer => { + return ( + `
                • ${offer.title} +€  ${offer.price}
                  • ` - ); - }).join(''); + ); + }).join(''); - return `
                    ${offerItems}
                  `; + return `
                    ${offerItems}
                  `; } -const createPointTemplate = ({point, pointDestination, pointOffers}) => { - const { basePrice, dateFrom, dateTo, offers, isFavorite, type } = point; - const favoriteClassName = isFavorite ? 'event__favorite-btn--active' : ''; +const createPointTemplate = ({ point, pointDestination, pointOffers }) => { + const { basePrice, dateFrom, dateTo, offers, isFavorite, type } = point; + const favoriteClassName = isFavorite ? 'event__favorite-btn--active' : ''; - return ( - `
                • + return ( + `
                • @@ -39,7 +39,7 @@ const createPointTemplate = ({point, pointDestination, pointOffers}) => { € ${basePrice}

                  - ${createPointOffersTemplate({pointOffers})} + ${createPointOffersTemplate({ pointOffers })}
                  • ` - ); + ); } export default class PointView extends AbstractView { - #point = null; - #pointDestination = null; - #pointOffers = null; - #onEditClick = null; + #point = null; + #pointDestination = null; + #pointOffers = null; + #onEditClick = null; - constructor({point, pointDestination, pointOffers, onEditClick}) { - super(); - this.#point = point; - this.#pointDestination = pointDestination; - this.#pointOffers = pointOffers; - this.#onEditClick = onEditClick; + constructor({ point, pointDestination, pointOffers, onEditClick }) { + super(); + this.#point = point; + this.#pointDestination = pointDestination; + this.#pointOffers = pointOffers; + this.#onEditClick = onEditClick; - this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); - } + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); + } - get template() { - return createPointTemplate({ - point: this.#point, - pointDestination: this.#pointDestination, - pointOffers: this.#pointOffers - }); - } + get template() { + return createPointTemplate({ + point: this.#point, + pointDestination: this.#pointDestination, + pointOffers: this.#pointOffers + }); + } - #editClickHandler = (evt) => { - evt.preventDefault(); - this.#onEditClick(); - } + #editClickHandler = (evt) => { + evt.preventDefault(); + this.#onEditClick(); + } } diff --git a/src/view/sort-view.js b/src/view/sort-view.js index 29b8f0c..0c775c9 100644 --- a/src/view/sort-view.js +++ b/src/view/sort-view.js @@ -1,8 +1,8 @@ import AbstractView from '../framework/view/abstract-view.js'; const createSortTemplate = () => { - return ( - `
                  + return ( + `
                  @@ -25,11 +25,11 @@ const createSortTemplate = () => {
                  ` - ); + ); } export default class SortView extends AbstractView { - get template() { - return createSortTemplate(); - } + get template() { + return createSortTemplate(); + } } diff --git a/src/view/trip-info-view.js b/src/view/trip-info-view.js index 58b4bb2..b7ffa98 100644 --- a/src/view/trip-info-view.js +++ b/src/view/trip-info-view.js @@ -1,8 +1,8 @@ import AbstractView from '../framework/view/abstract-view.js'; const createTripInfoTemplate = () => { - return ( - `
                  + return ( + `

                  Amsterdam — Chamonix — Geneva

                  @@ -13,11 +13,11 @@ const createTripInfoTemplate = () => { Total: € 1230

                  ` - ); + ); } export default class TripInfoView extends AbstractView { - get template() { - return createTripInfoTemplate(); - } + get template() { + return createTripInfoTemplate(); + } } diff --git a/webpack.config.js b/webpack.config.js index 6c6ac38..ee42b2d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,17 +12,17 @@ module.exports = { devtool: 'source-map', plugins: [ new HtmlPlugin({ - template: 'public/index.html', + template: 'public/index.html', }), new CopyPlugin({ - patterns: [ - { - from: 'public', - globOptions: { - ignore: ['**/index.html'], - }, - }, - ], + patterns: [ + { + from: 'public', + globOptions: { + ignore: ['**/index.html'], + }, + }, + ], }), ], module: { From 11bbe3808a13b42dd6e10bafecd1862a7d3e2213 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D1=81=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=A2=D0=BE=D0=BF=D0=BE=D1=80=D0=BA=D0=BE=D0=B2=D0=B0?= Date: Sun, 14 Apr 2024 11:53:24 +0500 Subject: [PATCH 3/3] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D1=8F?= =?UTF-8?q?=D0=B9=20=D0=B8=20=D0=B2=D0=BB=D0=B0=D1=81=D1=82=D0=B2=D1=83?= =?UTF-8?q?=D0=B93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/presenter/trip-presenter.js | 8 ++++---- src/view/edit-point-view.js | 16 ++++++++-------- src/view/point-view.js | 6 +++--- src/view/sort-view.js | 2 +- src/view/trip-info-view.js | 2 +- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/presenter/trip-presenter.js b/src/presenter/trip-presenter.js index 1bb8bae..d4c628a 100644 --- a/src/presenter/trip-presenter.js +++ b/src/presenter/trip-presenter.js @@ -66,18 +66,18 @@ export default class TripPresenter { function pointEditClickHandler() { replacePointToForm(); document.addEventListener('keydown', escKeyDownHandler); - }; + } function resetButtonClickHandler() { replaceFormToPoint(); document.removeEventListener('keydown', escKeyDownHandler); - }; + } function pointSubmitHandler() { replaceFormToPoint(); document.removeEventListener('keydown', escKeyDownHandler); - }; + } render(pointComponent, this.#pointListComponent.element); - } + }; } diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index 86bcaf9..31766d4 100644 --- a/src/view/edit-point-view.js +++ b/src/view/edit-point-view.js @@ -1,5 +1,5 @@ import AbstractView from '../framework/view/abstract-view.js'; -import { POINT_EMPTY, TYPES, CITIES } from "../const.js"; +import { POINT_EMPTY, TYPES, CITIES } from '../const.js'; import { formatStringToDateTime } from '../utils.js'; const createPointCitiesOptionsTemplate = () => { @@ -8,7 +8,7 @@ const createPointCitiesOptionsTemplate = () => { ${CITIES.map((city) => ``).join('')}
          ` ); -} +}; const createPointPhotosTemplate = (pointDestination) => { return ( @@ -17,7 +17,7 @@ const createPointPhotosTemplate = (pointDestination) => { `${picture.description}`).join('')}
          ` ); -} +}; const createPointTypesTemplate = (currentType) => { return TYPES.map((type) => @@ -25,7 +25,7 @@ const createPointTypesTemplate = (currentType) => {
          `).join(''); -} +}; const createPointOffersTemplate = ({ pointOffers }) => { const offerItems = pointOffers.map(offer => { @@ -42,7 +42,7 @@ const createPointOffersTemplate = ({ pointOffers }) => { }).join(''); return `
          ${offerItems}
          `; -} +}; const createEditPointTemplate = ({ point, pointDestination, pointOffers }) => { const { basePrice, dateFrom, dateTo, offers, type } = point; @@ -107,7 +107,7 @@ const createEditPointTemplate = ({ point, pointDestination, pointOffers }) => { ` ); -} +}; export default class EditPointView extends AbstractView { #point = null; @@ -140,10 +140,10 @@ export default class EditPointView extends AbstractView { #formSubmitHandler = (evt) => { evt.preventDefault(); this.#onSubmitClick(); - } + }; #resetButtonClickHandler = (evt) => { evt.preventDefault(); this.#onResetClick(); - } + }; } diff --git a/src/view/point-view.js b/src/view/point-view.js index 25793b9..e5b3ae3 100644 --- a/src/view/point-view.js +++ b/src/view/point-view.js @@ -13,7 +13,7 @@ const createPointOffersTemplate = ({ pointOffers }) => { }).join(''); return `
            ${offerItems}
          `; -} +}; const createPointTemplate = ({ point, pointDestination, pointOffers }) => { const { basePrice, dateFrom, dateTo, offers, isFavorite, type } = point; @@ -52,7 +52,7 @@ const createPointTemplate = ({ point, pointDestination, pointOffers }) => { ` ); -} +}; export default class PointView extends AbstractView { #point = null; @@ -81,5 +81,5 @@ export default class PointView extends AbstractView { #editClickHandler = (evt) => { evt.preventDefault(); this.#onEditClick(); - } + }; } diff --git a/src/view/sort-view.js b/src/view/sort-view.js index 0c775c9..0f71640 100644 --- a/src/view/sort-view.js +++ b/src/view/sort-view.js @@ -26,7 +26,7 @@ const createSortTemplate = () => { ` ); -} +}; export default class SortView extends AbstractView { get template() { diff --git a/src/view/trip-info-view.js b/src/view/trip-info-view.js index b7ffa98..49fbf6c 100644 --- a/src/view/trip-info-view.js +++ b/src/view/trip-info-view.js @@ -14,7 +14,7 @@ const createTripInfoTemplate = () => {

          ` ); -} +}; export default class TripInfoView extends AbstractView { get template() {