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..cc4c19a 100644 --- a/src/const.js +++ b/src/const.js @@ -70,4 +70,4 @@ export { TYPES, DEFAULT_TYPE, POINT_EMPTY -}; +} diff --git a/src/main.js b/src/main.js index aeb5082..22f2c77 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'); @@ -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/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..d4c628a 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()]; + #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(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() - ); - } + 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/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 286cad7..9a0deaf 100644 --- a/src/utils.js +++ b/src/utils.js @@ -5,13 +5,15 @@ 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, @@ -48,16 +50,16 @@ function getRandomValue(items) { 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) { @@ -88,4 +90,4 @@ export { formatStringToShortDate, formatStringToTime, getPointDuration -}; +} diff --git a/src/view/edit-point-view.js b/src/view/edit-point-view.js index c691019..31766d4 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 AbstractView from '../framework/view/abstract-view.js'; import { POINT_EMPTY, TYPES, CITIES } from '../const.js'; import { formatStringToDateTime } from '../utils.js'; -function createPointCitiesOptionsTemplate() { +const createPointCitiesOptionsTemplate = () => { return ( ` - ${CITIES.map((city) => ``).join('')} - ` + ${CITIES.map((city) => ``).join('')} + ` ); -} +}; -function createPointPhotosTemplate(pointDestination) { +const createPointPhotosTemplate = (pointDestination) => { return ( `
- ${pointDestination.pictures.map((picture) => + ${pointDestination.pictures.map((picture) => `${picture.description}`).join('')} -
` + ` ); -} +}; -function createPointTypesTemplate(currentType) { +const createPointTypesTemplate = (currentType) => { return TYPES.map((type) => `
- - -
`).join(''); -} + + + `).join(''); +}; -function createPointOffersTemplate ({ pointOffers }) { - const offerItems = pointOffers.map((offer) => { +const createPointOffersTemplate = ({ pointOffers }) => { + const offerItems = pointOffers.map(offer => { return ( `
- - -
` + + + ` ); }).join(''); return `
${offerItems}
`; -} +}; + +const createEditPointTemplate = ({ point, pointDestination, pointOffers }) => { + const { basePrice, dateFrom, dateTo, offers, type } = point; -function createEditPointTemplate({ point, pointDestination, pointOffers }) { - const { basePrice, dateFrom, dateTo, type } = point; - return (` -
  • -
    + 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); + + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#resetButtonClickHandler); } - getTemplate() { + get template() { return createEditPointTemplate({ - point: this.point, - pointDestination: this.pointDestination, - pointOffers: this.pointOffers + point: this.#point, + pointDestination: this.#pointDestination, + pointOffers: this.#pointOffers }); } - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } + #formSubmitHandler = (evt) => { + evt.preventDefault(); + this.#onSubmitClick(); + }; - return this.element; - } - - 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..dcc3181 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() { +export default class FilterView extends AbstractView { + get template() { return createFilterTemplate(); } - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } - - 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..0efcfa4 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 ( + `