From 0dffd2fa31f8f4ded9ff4f77713e0c2db5827911 Mon Sep 17 00:00:00 2001 From: Fedoseev Vladimir Date: Tue, 5 Nov 2024 16:25:35 +0300 Subject: [PATCH 01/14] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=20text=20area,=20=D1=81=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA?= =?UTF-8?q?=D0=BE=D0=B9=20=D1=81=D0=BB=D0=B5=D0=B2=D0=B0=20=D0=B8=20=D0=BF?= =?UTF-8?q?=D0=BB=D0=B5=D0=B9=D1=81=D1=85=D0=BE=D0=BB=D0=B4=D0=B5=D1=80?= =?UTF-8?q?=D0=BE=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../input-text-area/input-text-area.css | 37 ++++++++ .../input-text-area/input-text-area.hbs | 19 ++++ .../input-text-area/input-text-area.js | 94 +++++++++++++++++++ public/constants/config.js | 13 ++- public/index.css | 1 + 5 files changed, 163 insertions(+), 1 deletion(-) create mode 100644 public/components/input-text-area/input-text-area.css create mode 100644 public/components/input-text-area/input-text-area.hbs create mode 100644 public/components/input-text-area/input-text-area.js diff --git a/public/components/input-text-area/input-text-area.css b/public/components/input-text-area/input-text-area.css new file mode 100644 index 0000000..ec0c1f6 --- /dev/null +++ b/public/components/input-text-area/input-text-area.css @@ -0,0 +1,37 @@ +.input-text-area { + display: flex; + flex-direction: column; +} + +.textarea-container { + display: flex; + align-items: center; +} + +.icon { + display: flex; + align-items: center; + margin-right: 10px; /* Отступ между иконкой и полем */ +} + +.icon img { + width: 20px; /* Размер иконки */ + height: 20px; +} + +.input-area { + flex-grow: 1; /* Заполняет оставшееся пространство */ + min-height: 50px; + resize: none; + padding: 8px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} + + +.input-area::placeholder { + text-align: left; /* Центрирует текст placeholder */ + color: #888; /* Цвет текста для placeholder */ +} \ No newline at end of file diff --git a/public/components/input-text-area/input-text-area.hbs b/public/components/input-text-area/input-text-area.hbs new file mode 100644 index 0000000..97357a9 --- /dev/null +++ b/public/components/input-text-area/input-text-area.hbs @@ -0,0 +1,19 @@ +
+ +
+ {{#if icon}} + + icon + + {{/if}} + +
+
diff --git a/public/components/input-text-area/input-text-area.js b/public/components/input-text-area/input-text-area.js new file mode 100644 index 0000000..b494034 --- /dev/null +++ b/public/components/input-text-area/input-text-area.js @@ -0,0 +1,94 @@ +'use strict'; + +import { BaseComponent } from '../base/base.js'; + +/** + * Represents a Text Area Component. + * @class + */ +export class TextAreaComponent extends BaseComponent { + /** + * The function that will handle the text area input event. + * @type {Function} + */ + #inputHandler = () => {}; + + /** + * Creates an instance of TextAreaComponent. + * @constructor + * @param {HTMLElement} parent - The parent element where the text area will be rendered. + * @param {Object} [state] - The initial state of the text area component. (optional) + * @param {Function} [inputHandler] - The function that will handle the text area input event. (optional) + */ + constructor(parent, state = {}, inputHandler = () => {}) { + super(parent, state); + this.#inputHandler = inputHandler; + } + + /** + * Renders the text area component. + * @returns {string} - The rendered HTML template of the text area. + */ + renderTemplate() { + const template = Handlebars.templates['input-text-area.hbs']; + const renderedTemplate = template(this.State); + + const parent = this.Parent; + if (parent) { + parent.innerHTML += renderedTemplate; + } + + this.attachEvents(); + + return renderedTemplate; + } + + /** + * Attaches events to the rendered text area component. + */ + attachEvents() { + const parent = this.Parent; + if (parent instanceof HTMLElement) { + const textAreaElement = parent.querySelector('.input-area'); + if (textAreaElement) { + textAreaElement.addEventListener('input', (event) => this.handleInput(event)); + + if (this.State.autoExpand) { + textAreaElement.style.overflowY = 'hidden'; + } + } + } + } + + /** + * Handles the input event for the text area. + * Adjusts the height if autoExpand is enabled. + * @param {Event} event - The text area input event object. + */ + handleInput(event) { + if (typeof this.#inputHandler === 'function') { + this.#inputHandler(event.target.value); + } + + if (this.State.autoExpand) { + event.target.style.height = 'auto'; + event.target.style.height = `${event.target.scrollHeight}px`; + } + } + + /** + * Sets the input event handler for the text area. + * @param {Function} inputHandler - The function to handle the text area input event. + */ + setInputHandler(inputHandler) { + this.#inputHandler = inputHandler; + } + + /** + * Gets the current input event handler for the text area. + * @returns {Function} - The current input event handler. + */ + getInputHandler() { + return this.#inputHandler; + } +} diff --git a/public/constants/config.js b/public/constants/config.js index 3248cac..48d5d26 100644 --- a/public/constants/config.js +++ b/public/constants/config.js @@ -106,7 +106,7 @@ export const signupConfig = { disabled: false, hover: false, active: false - } + }, }; export const headerConfig = { @@ -132,3 +132,14 @@ export const headerConfig = { disabled: false, }, }; + +// text_area: +// { +// icon: './assets/icons/pinset-logo.svg', +// placeHolder: 'Еуые', +// maxLength: 250, +// fontSize: '10px', +// minHeight: '100px', +// maxHeight: '200px', +// autoExpand: true, +// } \ No newline at end of file diff --git a/public/index.css b/public/index.css index fdbcd9c..c7e1b1a 100644 --- a/public/index.css +++ b/public/index.css @@ -13,6 +13,7 @@ @import url(components/boards-list/boards-list.css); @import url(components/details-menu/details-menu.css); @import url(components/drop-down-menu/drop-down-menu.css); +@import url(components/input-text-area/input-text-area.css); @import url(./constants.css); From 0335dc81597986dcb17f3827a4e15093bdbcdb28 Mon Sep 17 00:00:00 2001 From: Alexander Novak Date: Tue, 5 Nov 2024 16:40:50 +0300 Subject: [PATCH 02/14] add lookpin page --- package.json | 2 +- public/app.js | 1137 +++++++++++++++------------ public/components/button/button.hbs | 13 +- public/components/button/button.js | 100 +-- public/constants/routes.js | 11 +- public/index.css | 3 +- public/pages/addPin/lookPin.css | 121 +++ public/pages/addPin/lookPin.hbs | 74 ++ public/pages/addPin/lookPin.js | 32 + public/precompiled.js | 198 ++--- 10 files changed, 1018 insertions(+), 673 deletions(-) create mode 100644 public/pages/addPin/lookPin.css create mode 100644 public/pages/addPin/lookPin.hbs create mode 100644 public/pages/addPin/lookPin.js diff --git a/package.json b/package.json index 97b3b64..501a757 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "scripts": { "compile": "globstar -- npx handlebars public/**/*.hbs -f public/precompiled.js", - "start": "node server/server.js", + "start": "npm run compile && node server/server.js", "lint": "eslint ./public/**/*.js", "lint:fix": "eslint ./public/**/*.js --fix" }, diff --git a/public/app.js b/public/app.js index eac373c..723e466 100644 --- a/public/app.js +++ b/public/app.js @@ -1,11 +1,17 @@ -'use strict' +'use strict'; import { LoginComponent as Login } from './pages/login/login.js'; import { SignUpComponent as SignUp } from './pages/signup/signup.js'; import { MainPageComponent } from './pages/main/main.js'; +import LookPin from './pages/addPin/lookPin.js'; import { ROUTES } from './constants/routes.js'; -import { BACKEND_LOGIN_ROUTE, BACKEND_SIGNUP_ROUTE, BACKEND_FEED_ROUTE, BACKEND_LOGOUT_ROUTE } from './constants/api.js'; +import { + BACKEND_LOGIN_ROUTE, + BACKEND_SIGNUP_ROUTE, + BACKEND_FEED_ROUTE, + BACKEND_LOGOUT_ROUTE, +} from './constants/api.js'; import { getMethod } from './modules/network.js'; @@ -14,547 +20,632 @@ import { getMethod } from './modules/network.js'; * @class */ export default class App { - handlers = {}; - #structure = {}; - config; - root; + handlers = {}; + #structure = {}; + config; + root; - /** - * Creates an instance of App. - * @constructor - * @param {Object} config - data provided for components propagation - * @param {HTMLElement} root - The parent element where app components will live - */ - constructor(config, root) { - this.config = config; - this.root = root; - } + /** + * Creates an instance of App. + * @constructor + * @param {Object} config - data provided for components propagation + * @param {HTMLElement} root - The parent element where app components will live + */ + constructor(config, root) { + this.config = config; + this.root = root; + } - /** - * Renders the component depending on what route is given. - * @param {string} pageRoute - the route of the page. - */ - render(pageRoute) { - switch (pageRoute) { - case ROUTES.main: - history.pushState({}, '', ROUTES.main); - this.#renderFeed(); - break; - case ROUTES.login: - history.pushState({}, '', ROUTES.login); - this.#renderLogin(); - break; - case ROUTES.signup: - history.pushState({}, '', ROUTES.signup); - this.#renderSignup(); - break; - default: - this.#handleUnknownRoute(); - break; - } - } + /** + * Renders the component depending on what route is given. + * @param {string} pageRoute - the route of the page. + */ + render(pageRoute) { + switch (pageRoute) { + case ROUTES.main: + history.pushState({}, '', ROUTES.main); + this.#renderFeed(); + break; + case ROUTES.login: + history.pushState({}, '', ROUTES.login); + this.#renderLogin(); + break; + case ROUTES.signup: + history.pushState({}, '', ROUTES.signup); + this.#renderSignup(); + break; + case ROUTES.lookPin: + history.pushState({}, '', ROUTES.lookPin); + this.#renderLookPin(); + break; + default: + this.#handleUnknownRoute(); + break; + } + } - /** - * Clears all page data if it's needed and renders the page depending on what route is given. - * @param {string} pageRoute - the route of the page. - * @param {boolean} deleteEverything - flag for clearing all page data. - */ - renderPage(pageRoute, deleteEverything = false) { - this.clear(deleteEverything); - this.render(pageRoute); - } + /** + * Clears all page data if it's needed and renders the page depending on what route is given. + * @param {string} pageRoute - the route of the page. + * @param {boolean} deleteEverything - flag for clearing all page data. + */ + renderPage(pageRoute, deleteEverything = false) { + this.clear(deleteEverything); + this.render(pageRoute); + } - /** - * Renders login component and saves inputs values if they are typed in. - */ - #renderLogin() { - const config = this.config.loginConfig; - const login = new Login(this.root, config.inputs, config.button, config.button_form_footer); - login.renderTemplate(); + /** + * Renders login component and saves inputs values if they are typed in. + */ + #renderLookPin() { + const curPin = { + PinID: 3, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }; + const addPin = new LookPin(this.root, curPin); + addPin.renderTemplate(); + } - login.addSubmitBtnHandler(BACKEND_LOGIN_ROUTE); - login.addInputFocusHandler(); - login.addInputOnChangeHandler(); - login.addInputsSaveHandler(this); + #renderLogin() { + const config = this.config.loginConfig; + const login = new Login( + this.root, + config.inputs, + config.button, + config.button_form_footer + ); + login.renderTemplate(); - this.#structure.login = login; + login.addSubmitBtnHandler(BACKEND_LOGIN_ROUTE); + login.addInputFocusHandler(); + login.addInputOnChangeHandler(); + login.addInputsSaveHandler(this); - // Add values to inputs if it's stored - if (this.#structure.signUp) { - const formInputs = document.getElementsByClassName('input'); - const storedValues = this.#structure.signUp.inputsStoredValues; - if (Object.keys(storedValues).length > 0) { - formInputs[0].value = storedValues.login; - formInputs[1].value = storedValues.password; - } - } - } + this.#structure.login = login; - /** - * Renders sign up component and saves inputs values if they are typed in. - */ - #renderSignup() { - const config = this.config.signupConfig; - const signUp = new SignUp(this.root, config.inputs, config.button, config.button_form_footer); - signUp.renderTemplate(); + // Add values to inputs if it's stored + if (this.#structure.signUp) { + const formInputs = document.getElementsByClassName('input'); + const storedValues = this.#structure.signUp.inputsStoredValues; + if (Object.keys(storedValues).length > 0) { + formInputs[0].value = storedValues.login; + formInputs[1].value = storedValues.password; + } + } + } - signUp.addSubmitBtnHandler(BACKEND_SIGNUP_ROUTE); - signUp.addInputFocusHandler(); - signUp.addInputOnChangeHandler(); - signUp.addInputsSaveHandler(this); + /** + * Renders sign up component and saves inputs values if they are typed in. + */ + #renderSignup() { + const config = this.config.signupConfig; + const signUp = new SignUp( + this.root, + config.inputs, + config.button, + config.button_form_footer + ); + signUp.renderTemplate(); - this.#structure.signUp = signUp; + signUp.addSubmitBtnHandler(BACKEND_SIGNUP_ROUTE); + signUp.addInputFocusHandler(); + signUp.addInputOnChangeHandler(); + signUp.addInputsSaveHandler(this); - // Add values to inputs if it's stored - if (this.#structure.login) { - const formInputs = document.getElementsByClassName('input'); - const storedValues = this.#structure.login.inputsStoredValues; - if (Object.keys(storedValues).length > 0) { - formInputs[1].value = storedValues.login; - formInputs[2].value = storedValues.password; - } - } - } + this.#structure.signUp = signUp; - /** - * Renders feed including header and pins set - */ - async #renderFeed() { - // const pinSet = await getMethod(BACKEND_FEED_ROUTE); + // Add values to inputs if it's stored + if (this.#structure.login) { + const formInputs = document.getElementsByClassName('input'); + const storedValues = this.#structure.login.inputsStoredValues; + if (Object.keys(storedValues).length > 0) { + formInputs[1].value = storedValues.login; + formInputs[2].value = storedValues.password; + } + } + } - const pinSet = [ - { - PinID: 1, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 2, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 3, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 4, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 5, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 6, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 7, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 8, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 9, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 10, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 11, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 12, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 13, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 14, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 15, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 16, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 17, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 18, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 19, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 20, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 21, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 22, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 23, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 24, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 25, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 26, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 27, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 28, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 29, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 30, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 31, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 32, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 33, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 34, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 35, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 36, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 37, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 38, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 39, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 40, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 41, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 42, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 43, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 44, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 45, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 46, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 47, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy", - BoardID: 1, - }, - { - PinID: 48, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 49, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 50, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 51, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 52, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - BoardID: 1, - }, - { - PinID: 53, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 54, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 55, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - { - PinID: 56, - AuthorName: "Mary Jane", - AuthorFollowersNumber: 100, - MediaUrl: "https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D", - }, - ]; + /** + * Renders feed including header and pins set + */ + async #renderFeed() { + // const pinSet = await getMethod(BACKEND_FEED_ROUTE); - const mainPage = new MainPageComponent(this.root, pinSet); - mainPage.renderTemplate(); - this.#structure.mainPage = mainPage; - } + const pinSet = [ + { + PinID: 1, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 2, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 3, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 4, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 5, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 6, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 7, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 8, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 9, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 10, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 11, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 12, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 13, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 14, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 15, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 16, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 17, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 18, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 19, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 20, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 21, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 22, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 23, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 24, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 25, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 26, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 27, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 28, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 29, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 30, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 31, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 32, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 33, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 34, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 35, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 36, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 37, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 38, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 39, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 40, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 41, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 42, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 43, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 44, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 45, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 46, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 47, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 48, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 49, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 50, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 51, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 52, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 53, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 54, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 55, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 56, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + ]; - /** - * Handles unknown route request, renders corresponding page template - * @returns {string} - rendered page of unknown route - */ - #handleUnknownRoute() { - if (this.#structure.login) { - this.#structure.login.clearStoredInputsValues(); - } - if (this.#structure.signup) { - this.#structure.signup.clearStoredInputsValues(); - } - if (this.#structure.mainPage) { - this.#structure.mainPage.clearStoredInputsValues(); - } + const mainPage = new MainPageComponent(this.root, pinSet); + mainPage.renderTemplate(); + this.#structure.mainPage = mainPage; + } - this.clear(true); + /** + * Handles unknown route request, renders corresponding page template + * @returns {string} - rendered page of unknown route + */ + #handleUnknownRoute() { + if (this.#structure.login) { + this.#structure.login.clearStoredInputsValues(); + } + if (this.#structure.signup) { + this.#structure.signup.clearStoredInputsValues(); + } + if (this.#structure.mainPage) { + this.#structure.mainPage.clearStoredInputsValues(); + } - const template = Handlebars.templates['unknown.hbs'] - const renderedTemplate = template() - this.root.innerHTML += renderedTemplate; + this.clear(true); - document.querySelector('.tomain__tap-button').addEventListener('click', (event) => { - event.preventDefault(); + const template = Handlebars.templates['unknown.hbs']; + const renderedTemplate = template(); + this.root.innerHTML += renderedTemplate; - this.root.innerHTML = ''; - this.renderPage(ROUTES.main); - }); + document + .querySelector('.tomain__tap-button') + .addEventListener('click', (event) => { + event.preventDefault(); - return renderedTemplate - } + this.root.innerHTML = ''; + this.renderPage(ROUTES.main); + }); - /** - * Clear all page data if it's needed. - * @param {boolean} deleteEverything - flag for clearing all page data. - */ - clear(deleteEverything) { - document.removeEventListener('scroll', this.handlers.scrollHandler); - Object.keys(this.#structure).forEach((key) => { - if (deleteEverything) { - this.#structure[key].remove(); - delete this.#structure[key]; - } - }); - } + return renderedTemplate; + } - /** - * Returns url of the last visited page. - */ - get LastPage() { - return document.referrer; - } + /** + * Clear all page data if it's needed. + * @param {boolean} deleteEverything - flag for clearing all page data. + */ + clear(deleteEverything) { + document.removeEventListener('scroll', this.handlers.scrollHandler); + Object.keys(this.#structure).forEach((key) => { + if (deleteEverything) { + this.#structure[key].remove(); + delete this.#structure[key]; + } + }); + } + + /** + * Returns url of the last visited page. + */ + get LastPage() { + return document.referrer; + } } diff --git a/public/components/button/button.hbs b/public/components/button/button.hbs index 699eeae..5ee050d 100644 --- a/public/components/button/button.hbs +++ b/public/components/button/button.hbs @@ -1,6 +1,9 @@ - diff --git a/public/components/button/button.js b/public/components/button/button.js index 8f6d8f0..3eaa4db 100644 --- a/public/components/button/button.js +++ b/public/components/button/button.js @@ -3,55 +3,55 @@ import { BaseComponent } from '../../components/base/base.js'; export class ButtonComponent extends BaseComponent { - #clickHandler = () => { }; - - /** - * Creates an instance of ButtonComponent. - * @constructor - * @param {HTMLElement} parent - The parent element where the button will be rendered. - * @param {Object} [state] - The initial state of the button component. (optional) - * @param {Function} [changeHandler] - The function that will handle the button events. (optional) - */ - constructor(parent, state, clickHandler) { - super(parent, state); - this.#clickHandler = clickHandler || this.#clickHandler; - } - - /** - * Renders the button component. - * @returns {string} - The rendered HTML template of the button. - */ - renderTemplate() { - const template = Handlebars.templates['button.hbs']; - const renderedTemplate = template(this.State); - - return renderedTemplate; - } - - /** - * Handles the button click event. - * @param {Event} event - The button click event object. - */ - handleButtonClick(event) { - event.stopPropagation(); - if (typeof this.#clickHandler === 'function' && !this.State.disabled) { - this.#clickHandler(event); - } - } - - /** - * Sets the click event handler for the button. - * @param {Function} changeHandler - The function to handle the button click event. - */ - setClickHandler(clickHandler) { - this.#clickHandler = clickHandler; - } - - /** - * Gets the current click event handler for the button. - * @returns {Function} - The current click event handler. - */ - getClickHandler() { - return this.#clickHandler; + #clickHandler = () => {}; + + /** + * Creates an instance of ButtonComponent. + * @constructor + * @param {HTMLElement} parent - The parent element where the button will be rendered. + * @param {Object} [state] - The initial state of the button component. (optional) + * @param {Function} [changeHandler] - The function that will handle the button events. (optional) + */ + constructor(parent, state, clickHandler) { + super(parent, state); + this.#clickHandler = clickHandler || this.#clickHandler; + } + + /** + * Renders the button component. + * @returns {string} - The rendered HTML template of the button. + */ + renderTemplate() { + const template = Handlebars.templates['button.hbs']; + const renderedTemplate = template(this.State); + + return renderedTemplate; + } + + /** + * Handles the button click event. + * @param {Event} event - The button click event object. + */ + handleButtonClick(event) { + event.stopPropagation(); + if (typeof this.#clickHandler === 'function' && !this.State.disabled) { + this.#clickHandler(event); } + } + + /** + * Sets the click event handler for the button. + * @param {Function} changeHandler - The function to handle the button click event. + */ + setClickHandler(clickHandler) { + this.#clickHandler = clickHandler; + } + + /** + * Gets the current click event handler for the button. + * @returns {Function} - The current click event handler. + */ + getClickHandler() { + return this.#clickHandler; + } } diff --git a/public/constants/routes.js b/public/constants/routes.js index 87c23c1..db351f7 100644 --- a/public/constants/routes.js +++ b/public/constants/routes.js @@ -1,9 +1,10 @@ 'use strict'; export const ROUTES = { - main: '/feed', - login: '/login', - signup: '/signup', - isAuthorized: '/is_authorized', - logOut: '/logout', + main: '/feed', + login: '/login', + signup: '/signup', + isAuthorized: '/is_authorized', + logOut: '/logout', + lookPin: '/lookpin', }; diff --git a/public/index.css b/public/index.css index c7e1b1a..d7f895a 100644 --- a/public/index.css +++ b/public/index.css @@ -3,10 +3,11 @@ @import url(pages/main/main.css); @import url(pages/login/login.css); @import url(pages/signup/signup.css); -@import url(pages/unknown/unknown.css); +@import url(pages/addPin/lookPin.css); @import url(components/complex/header/header.css); @import url(components/complex/grid/grid.css); @import url(components/complex/pin/pin.css); +@import url(pages/main/addPin.css); @import url(components/complex/preview/preview.css); @import url(components/complex/savebox/savebox.css); @import url(components/search-input/search-input.css); diff --git a/public/pages/addPin/lookPin.css b/public/pages/addPin/lookPin.css new file mode 100644 index 0000000..88deae6 --- /dev/null +++ b/public/pages/addPin/lookPin.css @@ -0,0 +1,121 @@ + + +.lookpin-container{ + margin-left: 15rem; + margin-right: 15rem; + width: calc(100% - 30rem); + height: 80%; + background-color: var(--project-primary-white);; + display: flex; + gap: 1rem; +} + +.lookpin__data{ + width: 50%; + padding: 10px; + display: flex; + flex-direction: column; + gap: 0.5rem; + background-color: var(--project-primary-white); + border-radius: 5%; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); +} + +.lookpin__image{ + width: 45%; +} + +.lookpin__image img { + width: 100%; + height: 100%; + border-radius: 5%; +} + +.lookpin__actions { + display: flex; +} + +.lookpin__info{ + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + color: var(--pin-feed-author-followers-number-color); + font-size: 12px; + font-weight: 300; +} + +.lookpin__header { + font-size: 20px; + font-weight: 600; + max-height: 2.5em; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + text-overflow: ellipsis; +} + +.lookpin__description{ + max-height: 5em; + font-size: 16px; + line-height: 1.2; + overflow-y: auto; + padding-right: 0.2rem; +} + + +.lookpin__actions-account { + display: flex; + gap: 10px; +} + +.lookpin__actions-extra { + display: flex; + justify-content: right; +} + +.lookpin__actions-extra img { + width: 20%; + filter: invert(1); +} + +.lookpin-button{ + background-color: var(--project-primary-white); + color: var(--project-primary-grey); + border: 1px solid var(--project-primary-grey); + padding: 10px; + border-radius: 20px; +} + +.lookpin__comments{ + height: 4em; + display: flex; + flex-direction: column; + gap: 5px; + overflow-y: auto; +} + +.comment { + display: flex; + gap: 10px; + font-size: 14px; +} + +.comment__author-name { + font-weight: 600; +} + +.comment__author-avatar { + width: 35px; + height: 35px; + border-radius: 50%; + object-fit: cover; + clip-path: circle(); + cursor: pointer; +} + +.comment__data { + flex:1; +} + diff --git a/public/pages/addPin/lookPin.hbs b/public/pages/addPin/lookPin.hbs new file mode 100644 index 0000000..df5bf19 --- /dev/null +++ b/public/pages/addPin/lookPin.hbs @@ -0,0 +1,74 @@ + +
+
+ +
+
+
+ +
+ bookmark it + comment + share +
+
+
+
+ +
+

{{{pin.AuthorName}}}

+

{{{pin.AuthorFollowersNumber}}} Followers

+
+
+
+ 1 месяц назад +
+
+ Россия, Москва +
+
+
+ Готовы к будущему ? Красочный киберпанковский головной убор +
+
+ Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, + totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, + quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam +
+
+ Ссылка на пин +
+
+ 11 комментариев +
+
+
+ +
+
+ Chris Isaak +
+
+ Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны. +
+
+
+
+ +
+
+ Chris Isaak +
+
+ Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны. +
+
+
+
+
+
diff --git a/public/pages/addPin/lookPin.js b/public/pages/addPin/lookPin.js new file mode 100644 index 0000000..3b8e905 --- /dev/null +++ b/public/pages/addPin/lookPin.js @@ -0,0 +1,32 @@ +import { BaseComponent } from '../../components/base/base.js'; +import { PinComponent } from '../../components/complex/pin/pin.js'; +import { ButtonComponent } from '../../components/button/button.js'; + +export default class LookPin extends BaseComponent { + #pin; + constructor(parent, pin) { + super(parent); + this.#pin = pin; + } + + renderTemplate() { + const template = Handlebars.templates['lookPin.hbs']; + const saveButton = new ButtonComponent(this.Parent, { + label: 'Сохранить', + type: 'primary', + disabled: false, + className: 'lookpin-button', + }); + const rewardButton = new ButtonComponent(this.Parent, { + label: 'Наградить', + type: 'primary', + disabled: false, + className: 'lookpin-button', + }); + const renderedTemplate = template({ + saveButton: saveButton.renderTemplate(), + rewardButton: rewardButton.renderTemplate(), + }); + this.Parent.innerHTML += renderedTemplate; + } +} diff --git a/public/precompiled.js b/public/precompiled.js index 5f1280f..b809917 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -19,23 +19,23 @@ templates['boards-list.hbs'] = template({"1":function(container,depth0,helpers,p return "
\r\n \n \r\n
\r\n \n
\n \"cover\"\r\n
\r\n
\n \r\n" + + "\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"Private") : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":10,"column":16},"end":{"line":12,"column":23}}})) != null ? stack1 : "") - + "
\r\n"; + + " \n"; },"3":function(container,depth0,helpers,partials,data) { - return " \"private\"\r\n"; + return " \"private\"\n"; },"5":function(container,depth0,helpers,partials,data) { - return "

Здесь будут отображены доски

\r\n"; + return "

Здесь будут отображены доски

\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -44,9 +44,9 @@ templates['boards-list.hbs'] = template({"1":function(container,depth0,helpers,p return undefined }; - return "
\r\n" + return "
\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"boards") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(5, data, 0),"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":17,"column":11}}})) != null ? stack1 : "") - + "
\r\n"; + + "
\n"; },"useData":true}); templates['button.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { return "disabled"; @@ -61,7 +61,7 @@ templates['button.hbs'] = template({"1":function(container,depth0,helpers,partia }; return "\"iconLeft\""; },"7":function(container,depth0,helpers,partials,data) { var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -72,7 +72,7 @@ templates['button.hbs'] = template({"1":function(container,depth0,helpers,partia }; return "\"iconRight\""; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -82,28 +82,30 @@ templates['button.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "\r\n"; + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"disabled") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":4,"column":106},"end":{"line":5,"column":26}}})) != null ? stack1 : "") + + ">\n " + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"iconLeft") : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":6,"column":1},"end":{"line":6,"column":65}}})) != null ? stack1 : "") + + "\n " + + alias4(((helper = (helper = lookupProperty(helpers,"label") || (depth0 != null ? lookupProperty(depth0,"label") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"label","hash":{},"data":data,"loc":{"start":{"line":7,"column":1},"end":{"line":7,"column":10}}}) : helper))) + + "\n " + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"iconRight") : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":8,"column":1},"end":{"line":8,"column":68}}})) != null ? stack1 : "") + + "\n\n"; },"useData":true}); templates['grid.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1; return " " + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") - + "\r\n"; + + "\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -112,9 +114,9 @@ templates['grid.hbs'] = template({"1":function(container,depth0,helpers,partials return undefined }; - return "
\r\n" + return "
\n" + ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"pins") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":4,"column":13}}})) != null ? stack1 : "") - + "
\r\n"; + + "
\n"; },"useData":true}); templates['header.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -124,11 +126,11 @@ templates['header.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "
\r\n " + return "
\n " + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? lookupProperty(stack1,"createButton") : stack1), depth0)) != null ? stack1 : "") - + "\r\n
\r\n
\r\n \n
\n \r\n
\r\n"; + + "\">\n
\n"; },"3":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -137,9 +139,9 @@ templates['header.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return " \n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -148,13 +150,13 @@ templates['header.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "
\r\n
\r\n \n
\n \"Pinset\"\r\n
\r\n\r\n
\r\n " + + "\" alt=\"Pinset\" class=\"header__icon\" />\n
\n\n
\n " + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? lookupProperty(stack1,"searchInput") : stack1), depth0)) != null ? stack1 : "") - + "\r\n
\r\n\r\n" + + "\n
\n\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? lookupProperty(stack1,"isAuthorized") : stack1),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":10,"column":1},"end":{"line":21,"column":8}}})) != null ? stack1 : "") - + "
\r\n"; + + "
\n"; },"useData":true}); templates['pin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -166,24 +168,24 @@ templates['pin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(conta return "
\r\n
\r\n \n
\n \r\n
\n
\r\n \"Preview\"\r\n
\r\n
\r\n
\n \"Preview\"\n
\n
\n
\r\n \r\n
\r\n

" + + "\">\n \n

\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n

" + + "

\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\r\n
\r\n
\r\n
\r\n"; + + " Followers

\n
\n
\n\n"; },"useData":true}); templates['preview.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { - return " \"bookmark\r\n"; + return " \"bookmark\n"; },"3":function(container,depth0,helpers,partials,data) { - return " \"bookmark\r\n"; + return " \"bookmark\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -192,21 +194,21 @@ templates['preview.hbs'] = template({"1":function(container,depth0,helpers,parti return undefined }; - return "
\r\n
\r\n
\r\n \n
\n
\n \r\n
\r\n

" + + "\">\n

\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n

" + + "

\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\r\n
\r\n
\r\n\r\n
\r\n
\r\n

Сохранить

\r\n \"expand\"\r\n
\r\n
\r\n
\r\n\r\n \n
\n
\n\n
\n
\n

Сохранить

\n \"expand\"\n
\n
\n
\n\n \"Preview\"\r\n\r\n
\r\n
\r\n \"more\"\r\n
\r\n" + + "\" alt=\"Preview\">\n\n
\n
\n \"more\"\n
\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"Bookmarked") : stack1),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":25,"column":8},"end":{"line":29,"column":15}}})) != null ? stack1 : "") - + " \"comment\"\r\n \"share\"\r\n
\r\n\r\n
\r\n
\r\n

" + + " \"comment\"\n \"share\"\n

\n\n
\n
\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"ViewsNumber") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n \"bookmark\"\r\n
\r\n
\r\n

" + + "

\n \"bookmark\"\n
\n
\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"BookmarksNumber") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n \"bookmark\"\r\n
\r\n
\r\n
\r\n"; + + "

\n \"bookmark\"\n
\n
\n\n"; },"useData":true}); templates['savebox.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -216,11 +218,11 @@ templates['savebox.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c return undefined }; - return "
\r\n
\r\n " + return "
\n
\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"searchInput") || (depth0 != null ? lookupProperty(depth0,"searchInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"searchInput","hash":{},"data":data,"loc":{"start":{"line":3,"column":8},"end":{"line":3,"column":25}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n " + + "\n
\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"boardsList") || (depth0 != null ? lookupProperty(depth0,"boardsList") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"boardsList","hash":{},"data":data,"loc":{"start":{"line":5,"column":12},"end":{"line":5,"column":28}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n \r\n
\r\n
\r\n"; + + "\n
\n \n
\n
\n"; },"useData":true}); templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -236,7 +238,7 @@ templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers, + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"Download") : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":4,"column":56},"end":{"line":4,"column":135}}})) != null ? stack1 : "") + ">" + ((stack1 = alias1((depth0 != null ? lookupProperty(depth0,"Text") : depth0), depth0)) != null ? stack1 : "") - + "\r\n"; + + "\n"; },"2":function(container,depth0,helpers,partials,data) { var lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -256,12 +258,12 @@ templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers, return undefined }; - return "
\r\n
\r\n" + return "
\n
\n" + ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"options") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":8},"end":{"line":5,"column":17}}})) != null ? stack1 : "") - + "
\r\n
\r\n"; + + "
\n
\n"; },"useData":true}); templates['drop-down-menu.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { - return "
\r\n
\r\n \r\n \"Profile\"\r\n

Профиль

\r\n \r\n \r\n \"Settings\"\r\n

Настройки

\r\n \r\n \r\n \"Logout\"\r\n

Выйти

\r\n \r\n
\r\n
\r\n"; + return "
\n
\n \n \"Profile\"\n

Профиль

\n \n \n \"Settings\"\n

Настройки

\n \n \n \"Logout\"\n

Выйти

\n \n
\n
\n"; },"useData":true}); templates['input.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { return "input-error"; @@ -275,7 +277,7 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial return " \r\n"; + + "\n"; },"5":function(container,depth0,helpers,partials,data) { var stack1, helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -284,9 +286,9 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial return undefined }; - return " \r\n " + return " \n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"inputImageLeft") || (depth0 != null ? lookupProperty(depth0,"inputImageLeft") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"inputImageLeft","hash":{},"data":data,"loc":{"start":{"line":10,"column":6},"end":{"line":10,"column":26}}}) : helper))) != null ? stack1 : "") - + "\r\n \r\n \r\n"; + + "\n \n \n"; },"7":function(container,depth0,helpers,partials,data) { return " input__text-padding-left "; },"9":function(container,depth0,helpers,partials,data) { @@ -301,11 +303,11 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial return undefined }; - return " \r\n " + return " \n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"inputImageRight") || (depth0 != null ? lookupProperty(depth0,"inputImageRight") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"inputImageRight","hash":{},"data":data,"loc":{"start":{"line":22,"column":6},"end":{"line":22,"column":27}}}) : helper))) != null ? stack1 : "") - + "\r\n \r\n \r\n"; + + "\n \n \n"; },"15":function(container,depth0,helpers,partials,data) { - return "
\r\n
\r\n"; + return "
\n
\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -318,27 +320,27 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial + alias4(((helper = (helper = lookupProperty(helpers,"inputSize") || (depth0 != null ? lookupProperty(depth0,"inputSize") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"inputSize","hash":{},"data":data,"loc":{"start":{"line":1,"column":28},"end":{"line":1,"column":41}}}) : helper))) + " " + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"Error") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":1,"column":42},"end":{"line":1,"column":73}}})) != null ? stack1 : "") - + "\">\r\n\r\n" + + "\">\n\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputLabelText") : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":2},"end":{"line":5,"column":9}}})) != null ? stack1 : "") - + "\r\n
\r\n" + + "\n
\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputImageLeft") : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":8,"column":4},"end":{"line":13,"column":11}}})) != null ? stack1 : "") - + "\r\n \r\n\r\n" + + "\n oninput=\"this.dispatchEvent(new CustomEvent('input-change', { detail: this.value }))\" />\n\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputImageRight") : depth0),{"name":"if","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":20,"column":4},"end":{"line":25,"column":11}}})) != null ? stack1 : "") - + "
\r\n\r\n" + + "
\n\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputHelperText") : depth0),{"name":"if","hash":{},"fn":container.program(15, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":28,"column":2},"end":{"line":31,"column":9}}})) != null ? stack1 : "") - + "\r\n\r\n"; + + "\n\n"; },"useData":true}); templates['search-input.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -348,16 +350,36 @@ templates['search-input.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":funct return undefined }; - return "
\r\n \"search\"\r\n \n \"search\"\n \r\n \"clear\"\r\n
\r\n"; + + "\" name=\"search-input\">\n \"clear\"\n\n"; +},"useData":true}); +templates['lookPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { + var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return "\n
\n
\n \n
\n
\n
\n
\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"saveButton") || (depth0 != null ? lookupProperty(depth0,"saveButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"saveButton","hash":{},"data":data,"loc":{"start":{"line":9,"column":16},"end":{"line":9,"column":32}}}) : helper))) != null ? stack1 : "") + + "\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"rewardButton") || (depth0 != null ? lookupProperty(depth0,"rewardButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"rewardButton","hash":{},"data":data,"loc":{"start":{"line":10,"column":16},"end":{"line":10,"column":34}}}) : helper))) != null ? stack1 : "") + + "\n
\n
\n \"bookmark\n \"comment\"\n \"share\"\n
\n
\n
\n
\n \n
\n

" + + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") + + "

\n

" + + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") + + " Followers

\n
\n
\n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n
\n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n
\n Ссылка на пин\n
\n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n
\n
\n"; },"useData":true}); templates['login.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1; return " " + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") - + "\r\n"; + + "\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -366,15 +388,15 @@ templates['login.hbs'] = template({"1":function(container,depth0,helpers,partial return undefined }; - return "
\r\n Главная\r\n
\r\n
\r\n \r\n Pin\r\n Set\r\n \r\n
\r\n
\r\n
\n Главная\n
\n
\n \n Pin\n Set\n \n
\n
\n \r\n" + + "\">\n" + ((stack1 = lookupProperty(helpers,"each").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputs") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":12,"column":16},"end":{"line":14,"column":25}}})) != null ? stack1 : "") + " " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button") || (depth0 != null ? lookupProperty(depth0,"button") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button","hash":{},"data":data,"loc":{"start":{"line":15,"column":16},"end":{"line":15,"column":28}}}) : helper))) != null ? stack1 : "") - + "\r\n \r\n
\r\n Нет аккаунта? " + + "\n \n
\n Нет аккаунта? " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button_form_footer") || (depth0 != null ? lookupProperty(depth0,"button_form_footer") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button_form_footer","hash":{},"data":data,"loc":{"start":{"line":18,"column":36},"end":{"line":18,"column":60}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n
\r\n
\r\n
\r\n"; + + "\n
\n
\n
\n\n"; },"useData":true}); templates['main.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -384,18 +406,18 @@ templates['main.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(cont return undefined }; - return "
\r\n " + return "
\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"header") || (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"header","hash":{},"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":2,"column":16}}}) : helper))) != null ? stack1 : "") - + "\r\n " + + "\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"grid") || (depth0 != null ? lookupProperty(depth0,"grid") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"grid","hash":{},"data":data,"loc":{"start":{"line":3,"column":4},"end":{"line":3,"column":14}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n"; + + "\n
\n"; },"useData":true}); templates['signup.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1; return " " + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") - + "\r\n"; + + "\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -404,17 +426,17 @@ templates['signup.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "
\r\n Главная\r\n
\r\n
\r\n \r\n Pin\r\n Set\r\n \r\n
\r\n
\r\n
\n Главная\n
\n
\n \n Pin\n Set\n \n
\n
\n \r\n" + + "\">\n" + ((stack1 = lookupProperty(helpers,"each").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputs") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":12,"column":16},"end":{"line":14,"column":25}}})) != null ? stack1 : "") + " " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button") || (depth0 != null ? lookupProperty(depth0,"button") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button","hash":{},"data":data,"loc":{"start":{"line":15,"column":16},"end":{"line":15,"column":28}}}) : helper))) != null ? stack1 : "") - + "\r\n \r\n
\r\n Уже зарегистрированы? " + + "\n \n
\n Уже зарегистрированы? " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button_form_footer") || (depth0 != null ? lookupProperty(depth0,"button_form_footer") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button_form_footer","hash":{},"data":data,"loc":{"start":{"line":18,"column":44},"end":{"line":18,"column":68}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n
\r\n
\r\n
\r\n"; + + "\n
\n
\n
\n\n"; },"useData":true}); templates['unknown.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { - return "
\r\n Главная\r\n

404 страница не найдена

\r\n
\r\n"; + return "
\n Главная\n

404 страница не найдена

\n
\n"; },"useData":true}); })(); \ No newline at end of file From 702f11e53090a9aaddfe0f91b8d14da0b14ede2c Mon Sep 17 00:00:00 2001 From: Alexander Novak Date: Tue, 5 Nov 2024 17:12:06 +0300 Subject: [PATCH 03/14] created editpin page --- public/app.js | 18 +++++ public/constants/routes.js | 1 + public/index.css | 1 + public/pages/editPin/editPin.css | 120 +++++++++++++++++++++++++++++++ public/pages/editPin/editPin.hbs | 74 +++++++++++++++++++ public/pages/editPin/editPin.js | 32 +++++++++ public/precompiled.js | 20 ++++++ 7 files changed, 266 insertions(+) create mode 100644 public/pages/editPin/editPin.css create mode 100644 public/pages/editPin/editPin.hbs create mode 100644 public/pages/editPin/editPin.js diff --git a/public/app.js b/public/app.js index 723e466..4c7580b 100644 --- a/public/app.js +++ b/public/app.js @@ -4,6 +4,7 @@ import { LoginComponent as Login } from './pages/login/login.js'; import { SignUpComponent as SignUp } from './pages/signup/signup.js'; import { MainPageComponent } from './pages/main/main.js'; import LookPin from './pages/addPin/lookPin.js'; +import EditPin from './pages/editPin/editPin.js'; import { ROUTES } from './constants/routes.js'; import { @@ -58,6 +59,10 @@ export default class App { history.pushState({}, '', ROUTES.lookPin); this.#renderLookPin(); break; + case ROUTES.editPin: + history.pushState({}, '', ROUTES.editPin); + this.#renderEditPin(); + break; default: this.#handleUnknownRoute(); break; @@ -90,6 +95,19 @@ export default class App { addPin.renderTemplate(); } + #renderEditPin() { + const curPin = { + PinID: 3, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }; + const editPin = new EditPin(this.root, curPin); + editPin.renderTemplate(); + } + #renderLogin() { const config = this.config.loginConfig; const login = new Login( diff --git a/public/constants/routes.js b/public/constants/routes.js index db351f7..cd045b5 100644 --- a/public/constants/routes.js +++ b/public/constants/routes.js @@ -7,4 +7,5 @@ export const ROUTES = { isAuthorized: '/is_authorized', logOut: '/logout', lookPin: '/lookpin', + editPin: '/editpin', }; diff --git a/public/index.css b/public/index.css index d7f895a..0461eb4 100644 --- a/public/index.css +++ b/public/index.css @@ -4,6 +4,7 @@ @import url(pages/login/login.css); @import url(pages/signup/signup.css); @import url(pages/addPin/lookPin.css); +@import url(pages/addPin/editPin.css); @import url(components/complex/header/header.css); @import url(components/complex/grid/grid.css); @import url(components/complex/pin/pin.css); diff --git a/public/pages/editPin/editPin.css b/public/pages/editPin/editPin.css new file mode 100644 index 0000000..4137c41 --- /dev/null +++ b/public/pages/editPin/editPin.css @@ -0,0 +1,120 @@ + + +.lookpin-container{ + margin-left: 15rem; + margin-right: 15rem; + width: calc(100% - 30rem); + height: 80%; + background-color: var(--project-primary-white);; + display: flex; + gap: 1rem; +} + +.lookpin__data{ + width: 50%; + padding: 10px; + display: flex; + flex-direction: column; + gap: 0.5rem; + background-color: var(--project-primary-white); + border-radius: 5%; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); +} + +.lookpin__image{ + width: 45%; +} + +.lookpin__image img { + width: 100%; + height: 100%; + border-radius: 5%; +} + +.lookpin__actions { + display: flex; +} + +.lookpin__info{ + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + color: var(--pin-feed-author-followers-number-color); + font-size: 12px; + font-weight: 300; +} + +.lookpin__header { + font-size: 20px; + font-weight: 600; + max-height: 2.5em; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + text-overflow: ellipsis; +} + +.lookpin__description{ + max-height: 5em; + font-size: 16px; + line-height: 1.2; + overflow-y: auto; + padding-right: 0.2rem; +} + + +.lookpin__actions-account { + display: flex; + gap: 10px; +} + +.lookpin__actions-extra { + display: flex; + justify-content: right; +} + +.lookpin__actions-extra img { + width: 20%; + filter: invert(1); +} + +.lookpin-button{ + background-color: var(--project-primary-white); + color: var(--project-primary-grey); + border: 1px solid var(--project-primary-grey); + padding: 10px; + border-radius: 20px; +} + +.lookpin__comments{ + height: 4em; + display: flex; + flex-direction: column; + gap: 5px; + overflow-y: auto; +} + +.comment { + display: flex; + gap: 10px; + font-size: 14px; +} + +.comment__author-name { + font-weight: 600; +} + +.comment__author-avatar { + width: 35px; + height: 35px; + border-radius: 50%; + object-fit: cover; + clip-path: circle(); + cursor: pointer; +} + +.comment__data { + flex:1; +} \ No newline at end of file diff --git a/public/pages/editPin/editPin.hbs b/public/pages/editPin/editPin.hbs new file mode 100644 index 0000000..d22141d --- /dev/null +++ b/public/pages/editPin/editPin.hbs @@ -0,0 +1,74 @@ + +
+
+ +
+
+
+ +
+ bookmark it + comment + share +
+
+
+
+ +
+

{{{pin.AuthorName}}}

+

{{{pin.AuthorFollowersNumber}}} Followers

+
+
+
+ 1 месяц назад +
+
+ Россия, Москва +
+
+
+ Готовы к будущему ? Красочный киберпанковский головной убор +
+
+ Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, + totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, + quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam +
+ +
+ 11 комментариев +
+
+
+ +
+
+ Chris Isaak +
+
+ Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны. +
+
+
+
+ +
+
+ Chris Isaak +
+
+ Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны. +
+
+
+
+
+
\ No newline at end of file diff --git a/public/pages/editPin/editPin.js b/public/pages/editPin/editPin.js new file mode 100644 index 0000000..97d5bdc --- /dev/null +++ b/public/pages/editPin/editPin.js @@ -0,0 +1,32 @@ +import { BaseComponent } from '../../components/base/base.js'; +import { PinComponent } from '../../components/complex/pin/pin.js'; +import { ButtonComponent } from '../../components/button/button.js'; + +export default class EditPin extends BaseComponent { + #pin; + constructor(parent, pin) { + super(parent); + this.#pin = pin; + } + + renderTemplate() { + const template = Handlebars.templates['lookPin.hbs']; + const saveButton = new ButtonComponent(this.Parent, { + label: 'Сохранить', + type: 'primary', + disabled: false, + className: 'lookpin-button', + }); + const rewardButton = new ButtonComponent(this.Parent, { + label: 'Наградить', + type: 'primary', + disabled: false, + className: 'lookpin-button', + }); + const renderedTemplate = template({ + saveButton: saveButton.renderTemplate(), + rewardButton: rewardButton.renderTemplate(), + }); + this.Parent.innerHTML += renderedTemplate; + } +} diff --git a/public/precompiled.js b/public/precompiled.js index b809917..34c0139 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -374,6 +374,26 @@ templates['lookPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") + " Followers

\n \n \n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n \n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n
\n Ссылка на пин\n
\n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n\n"; },"useData":true}); +templates['editPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { + var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return "\n
\n
\n \n
\n
\n
\n
\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"saveButton") || (depth0 != null ? lookupProperty(depth0,"saveButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"saveButton","hash":{},"data":data,"loc":{"start":{"line":9,"column":16},"end":{"line":9,"column":32}}}) : helper))) != null ? stack1 : "") + + "\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"rewardButton") || (depth0 != null ? lookupProperty(depth0,"rewardButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"rewardButton","hash":{},"data":data,"loc":{"start":{"line":10,"column":16},"end":{"line":10,"column":34}}}) : helper))) != null ? stack1 : "") + + "\n
\n
\n \"bookmark\n \"comment\"\n \"share\"\n
\n
\n
\n
\n \n
\n

" + + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") + + "

\n

" + + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") + + " Followers

\n
\n
\n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n
\n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n \n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n
\n
"; +},"useData":true}); templates['login.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1; From 3bde3664607a8ddc5ed1cd6e8781e696a00b5d2e Mon Sep 17 00:00:00 2001 From: Alexander Novak Date: Tue, 5 Nov 2024 22:12:58 +0300 Subject: [PATCH 04/14] improved editpin page --- public/components/input/input.js | 104 ++++++++++++++--------------- public/pages/editPin/editPin.hbs | 3 +- public/pages/editPin/editPin.js | 21 ++---- public/precompiled.js | 108 +++++++++++++++++++++++++++++-- 4 files changed, 161 insertions(+), 75 deletions(-) diff --git a/public/components/input/input.js b/public/components/input/input.js index 5a75777..838b8df 100644 --- a/public/components/input/input.js +++ b/public/components/input/input.js @@ -7,64 +7,64 @@ import { BaseComponent } from '../base/base.js'; * @class */ export class InputComponent extends BaseComponent { - /** - * The function that will handle the input change event. - * @type {Function} - */ - #changeHandler = () => { }; + /** + * The function that will handle the input change event. + * @type {Function} + */ + #changeHandler = () => {}; - /** - * Creates an instance of InputComponent. - * @constructor - * @param {HTMLElement} parent - The parent element where the input will be rendered. - * @param {Object} [state] - The initial state of the input component. (optional) - * @param {Function} [changeHandler] - The function that will handle the input change event. (optional) - */ - constructor(parent, state = {}, changeHandler = () => {}) { - super(parent, state); - this.#changeHandler = changeHandler; - } + /** + * Creates an instance of InputComponent. + * @constructor + * @param {HTMLElement} parent - The parent element where the input will be rendered. + * @param {Object} [state] - The initial state of the input component. (optional) + * @param {Function} [changeHandler] - The function that will handle the input change event. (optional) + */ + constructor(parent, state = {}, changeHandler = () => {}) { + super(parent, state); + this.#changeHandler = changeHandler; + } - /** - * Renders the input component. - * @returns {string} - The rendered HTML template of the input. - */ - renderTemplate() { - const template = Handlebars.templates['input.hbs']; - const renderedTemplate = template(this.State); + /** + * Renders the input component. + * @returns {string} - The rendered HTML template of the input. + */ + renderTemplate() { + const template = Handlebars.templates['input.hbs']; + const renderedTemplate = template(this.State); - const parent = this.Parent; - if (parent) { - parent.innerHTML += renderedTemplate; + // const parent = this.Parent; + // if (parent) { + // parent.innerHTML += renderedTemplate; - } + // } - return renderedTemplate; - } + return renderedTemplate; + } - /** - * Handles the input change event. - * @param {Event} event - The input change event object. - */ - handleInputChange(event) { - if (typeof this.#changeHandler === 'function') { - this.#changeHandler(event.target.value); - } - } + /** + * Handles the input change event. + * @param {Event} event - The input change event object. + */ + handleInputChange(event) { + if (typeof this.#changeHandler === 'function') { + this.#changeHandler(event.target.value); + } + } - /** - * Sets the change event handler for the input. - * @param {Function} changeHandler - The function to handle the input change event. - */ - setChangeHandler(changeHandler) { - this.#changeHandler = changeHandler; - } + /** + * Sets the change event handler for the input. + * @param {Function} changeHandler - The function to handle the input change event. + */ + setChangeHandler(changeHandler) { + this.#changeHandler = changeHandler; + } - /** - * Gets the current change event handler for the input. - * @returns {Function} - The current change event handler. - */ - getChangeHandler() { - return this.#changeHandler; - } + /** + * Gets the current change event handler for the input. + * @returns {Function} - The current change event handler. + */ + getChangeHandler() { + return this.#changeHandler; + } } diff --git a/public/pages/editPin/editPin.hbs b/public/pages/editPin/editPin.hbs index d22141d..558bbe5 100644 --- a/public/pages/editPin/editPin.hbs +++ b/public/pages/editPin/editPin.hbs @@ -6,8 +6,7 @@
bookmark it diff --git a/public/pages/editPin/editPin.js b/public/pages/editPin/editPin.js index 97d5bdc..5323b67 100644 --- a/public/pages/editPin/editPin.js +++ b/public/pages/editPin/editPin.js @@ -1,6 +1,7 @@ import { BaseComponent } from '../../components/base/base.js'; import { PinComponent } from '../../components/complex/pin/pin.js'; import { ButtonComponent } from '../../components/button/button.js'; +import { InputComponent } from '../../components/input/input.js'; export default class EditPin extends BaseComponent { #pin; @@ -10,22 +11,14 @@ export default class EditPin extends BaseComponent { } renderTemplate() { - const template = Handlebars.templates['lookPin.hbs']; - const saveButton = new ButtonComponent(this.Parent, { - label: 'Сохранить', - type: 'primary', - disabled: false, - className: 'lookpin-button', - }); - const rewardButton = new ButtonComponent(this.Parent, { - label: 'Наградить', - type: 'primary', - disabled: false, - className: 'lookpin-button', + const template = Handlebars.templates['editPin.hbs']; + const nameInput = new InputComponent(this.Parent, { + inputPlaceholder: 'Добавьте название', + typeOfInput: 'text', }); + const HtmlData = nameInput.renderTemplate(); const renderedTemplate = template({ - saveButton: saveButton.renderTemplate(), - rewardButton: rewardButton.renderTemplate(), + nameInput: HtmlData, }); this.Parent.innerHTML += renderedTemplate; } diff --git a/public/precompiled.js b/public/precompiled.js index 34c0139..0fb994b 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -265,6 +265,102 @@ templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers, templates['drop-down-menu.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { return "
\n
\n \n \"Profile\"\n

Профиль

\n \n \n \"Settings\"\n

Настройки

\n \n \n \"Logout\"\n

Выйти

\n \n
\n
\n"; },"useData":true}); +templates['input-text-area.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { + var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return " \n \"icon\"\n \n"; +},"3":function(container,depth0,helpers,partials,data) { + var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return " placeholder=\"" + + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"placeHolder") || (depth0 != null ? lookupProperty(depth0,"placeHolder") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"placeHolder","hash":{},"data":data,"loc":{"start":{"line":11,"column":45},"end":{"line":11,"column":60}}}) : helper))) + + "\" "; +},"5":function(container,depth0,helpers,partials,data) { + var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return " maxlength=\"" + + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"maxLength") || (depth0 != null ? lookupProperty(depth0,"maxLength") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"maxLength","hash":{},"data":data,"loc":{"start":{"line":12,"column":41},"end":{"line":12,"column":54}}}) : helper))) + + "\" "; +},"7":function(container,depth0,helpers,partials,data) { + var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return " style=\"font-size: " + + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"fontSize") || (depth0 != null ? lookupProperty(depth0,"fontSize") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"fontSize","hash":{},"data":data,"loc":{"start":{"line":13,"column":47},"end":{"line":13,"column":59}}}) : helper))) + + ";\" "; +},"9":function(container,depth0,helpers,partials,data) { + var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return " style=\"min-height: " + + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"minHeight") || (depth0 != null ? lookupProperty(depth0,"minHeight") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"minHeight","hash":{},"data":data,"loc":{"start":{"line":14,"column":49},"end":{"line":14,"column":62}}}) : helper))) + + ";\" "; +},"11":function(container,depth0,helpers,partials,data) { + var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return " style=\"max-height: " + + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"maxHeight") || (depth0 != null ? lookupProperty(depth0,"maxHeight") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"maxHeight","hash":{},"data":data,"loc":{"start":{"line":15,"column":49},"end":{"line":15,"column":62}}}) : helper))) + + ";\" "; +},"13":function(container,depth0,helpers,partials,data) { + return " oninput=\"this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'\" "; +},"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { + var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return "
\n \n
\n" + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"icon") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":4,"column":8},"end":{"line":8,"column":15}}})) != null ? stack1 : "") + + " \n
\n
\n"; +},"useData":true}); templates['input.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { return "input-error"; },"3":function(container,depth0,helpers,partials,data) { @@ -375,7 +471,7 @@ templates['lookPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c + " Followers

\n
\n
\n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n
\n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n
\n Ссылка на пин\n
\n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n\n"; },"useData":true}); templates['editPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { - var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { + var stack1, helper, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { return parent[propertyName]; } @@ -383,15 +479,13 @@ templates['editPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c }; return "\n
\n
\n \n
\n
\n
\n
\n " - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"saveButton") || (depth0 != null ? lookupProperty(depth0,"saveButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"saveButton","hash":{},"data":data,"loc":{"start":{"line":9,"column":16},"end":{"line":9,"column":32}}}) : helper))) != null ? stack1 : "") - + "\n " - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"rewardButton") || (depth0 != null ? lookupProperty(depth0,"rewardButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"rewardButton","hash":{},"data":data,"loc":{"start":{"line":10,"column":16},"end":{"line":10,"column":34}}}) : helper))) != null ? stack1 : "") + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"nameInput") || (depth0 != null ? lookupProperty(depth0,"nameInput") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"nameInput","hash":{},"data":data,"loc":{"start":{"line":9,"column":16},"end":{"line":9,"column":31}}}) : helper))) != null ? stack1 : "") + "\n
\n
\n \"bookmark\n \"comment\"\n \"share\"\n
\n
\n
\n
\n \n
\n

" - + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") + + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") + "

\n

" - + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") + + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") + " Followers

\n
\n
\n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n
\n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n \n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n
\n
"; },"useData":true}); templates['login.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { From dc7d871eeb14ba4b376454efd4d4e3a5ad276192 Mon Sep 17 00:00:00 2001 From: wiseStann Date: Tue, 5 Nov 2024 22:48:37 +0300 Subject: [PATCH 05/14] =?UTF-8?q?=D0=BE=D1=82=D0=BB=D0=B0=D0=B4=D0=BA?= =?UTF-8?q?=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 1272 ++++++++--------- public/assets/icons/upload.svg | 2 + public/components/{ => base}/base.js | 0 public/components/boards-list/boards-list.js | 2 +- public/components/button/button.js | 2 +- public/components/button/icon-button.js | 2 +- public/components/complex/grid/grid.js | 2 +- public/components/complex/header/header.js | 2 +- public/components/complex/pin/pin.js | 2 +- public/components/complex/preview/preview.js | 2 +- public/components/complex/savebox/savebox.js | 2 +- .../components/details-menu/details-menu.js | 2 +- .../drop-down-menu/drop-down-menu.js | 2 +- public/components/input/input.js | 2 +- .../components/search-input/search-input.js | 2 +- public/pages/editPin/editPin.hbs | 10 +- public/pages/editPin/editPin.js | 34 +- public/pages/login/login.js | 2 +- public/pages/main/main.js | 2 +- public/pages/profile/board-grid.js | 2 +- public/pages/profile/profile.js | 2 +- public/pages/signup/signup.js | 2 +- public/precompiled.js | 226 ++- 23 files changed, 787 insertions(+), 791 deletions(-) create mode 100644 public/assets/icons/upload.svg rename public/components/{ => base}/base.js (100%) diff --git a/public/app.js b/public/app.js index c8d926e..91b922e 100644 --- a/public/app.js +++ b/public/app.js @@ -12,10 +12,10 @@ import { ProfilePageComponent as ProfilePage } from './pages/profile/profile.js' import { ROUTES } from './constants/routes.js'; import { - BACKEND_LOGIN_ROUTE, - BACKEND_SIGNUP_ROUTE, - BACKEND_FEED_ROUTE, - BACKEND_LOGOUT_ROUTE, + BACKEND_LOGIN_ROUTE, + BACKEND_SIGNUP_ROUTE, + BACKEND_FEED_ROUTE, + BACKEND_LOGOUT_ROUTE, } from './constants/api.js'; import { getMethod } from './modules/network.js'; @@ -25,635 +25,635 @@ import { getMethod } from './modules/network.js'; * @class */ export default class App { - handlers = {}; - #structure = {}; - config; - root; - - /** - * Creates an instance of App. - * @constructor - * @param {Object} config - data provided for components propagation - * @param {HTMLElement} root - The parent element where app components will live - */ - constructor(config, root) { - this.config = config; - this.root = root; - } - - /** - * Renders the component depending on what route is given. - * @param {string} pageRoute - the route of the page. - */ - render(pageRoute) { - switch (pageRoute) { - case ROUTES.main: - history.pushState({}, '', ROUTES.main); - this.#renderFeed(); - break; - case ROUTES.login: - history.pushState({}, '', ROUTES.login); - this.#renderLogin(); - break; - case ROUTES.signup: - history.pushState({}, '', ROUTES.signup); - this.#renderSignup(); - break; - case ROUTES.lookPin: - history.pushState({}, '', ROUTES.lookPin); - this.#renderLookPin(); - break; - case ROUTES.editPin: - history.pushState({}, '', ROUTES.editPin); - this.#renderEditPin(); - break; - case ROUTES.profile: + handlers = {}; + #structure = {}; + config; + root; + + /** + * Creates an instance of App. + * @constructor + * @param {Object} config - data provided for components propagation + * @param {HTMLElement} root - The parent element where app components will live + */ + constructor(config, root) { + this.config = config; + this.root = root; + } + + /** + * Renders the component depending on what route is given. + * @param {string} pageRoute - the route of the page. + */ + render(pageRoute) { + switch (pageRoute) { + case ROUTES.main: + history.pushState({}, '', ROUTES.main); + this.#renderFeed(); + break; + case ROUTES.login: + history.pushState({}, '', ROUTES.login); + this.#renderLogin(); + break; + case ROUTES.signup: + history.pushState({}, '', ROUTES.signup); + this.#renderSignup(); + break; + case ROUTES.lookPin: + history.pushState({}, '', ROUTES.lookPin); + this.#renderLookPin(); + break; + case ROUTES.editPin: + history.pushState({}, '', ROUTES.editPin); + this.#renderEditPin(); + break; + case ROUTES.profile: history.pushState({}, '', ROUTES.profile); this.#renderProfile(); break; - default: - this.#handleUnknownRoute(); - break; - } - } - - /** - * Clears all page data if it's needed and renders the page depending on what route is given. - * @param {string} pageRoute - the route of the page. - * @param {boolean} deleteEverything - flag for clearing all page data. - */ - renderPage(pageRoute, deleteEverything = false) { - this.clear(deleteEverything); - this.render(pageRoute); - } - - /** - * Renders login component and saves inputs values if they are typed in. - */ - #renderLookPin() { - const curPin = { - PinID: 3, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }; - const addPin = new LookPin(this.root, curPin); - addPin.renderTemplate(); - } - - #renderEditPin() { - const curPin = { - PinID: 3, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }; - const editPin = new EditPin(this.root, curPin); - editPin.renderTemplate(); - } - - #renderLogin() { - const config = this.config.loginConfig; - const login = new Login( - this.root, - config.inputs, - config.button, - config.button_form_footer - ); - login.renderTemplate(); - - login.addSubmitBtnHandler(BACKEND_LOGIN_ROUTE); - login.addInputFocusHandler(); - login.addInputOnChangeHandler(); - login.addInputsSaveHandler(this); - - this.#structure.login = login; - - // Add values to inputs if it's stored - if (this.#structure.signUp) { - const formInputs = document.getElementsByClassName('input'); - const storedValues = this.#structure.signUp.inputsStoredValues; - if (Object.keys(storedValues).length > 0) { - formInputs[0].value = storedValues.login; - formInputs[1].value = storedValues.password; - } - } - } - - /** - * Renders sign up component and saves inputs values if they are typed in. - */ - #renderSignup() { - const config = this.config.signupConfig; - const signUp = new SignUp( - this.root, - config.inputs, - config.button, - config.button_form_footer - ); - signUp.renderTemplate(); - - signUp.addSubmitBtnHandler(BACKEND_SIGNUP_ROUTE); - signUp.addInputFocusHandler(); - signUp.addInputOnChangeHandler(); - signUp.addInputsSaveHandler(this); - - this.#structure.signUp = signUp; - - // Add values to inputs if it's stored - if (this.#structure.login) { - const formInputs = document.getElementsByClassName('input'); - const storedValues = this.#structure.login.inputsStoredValues; - if (Object.keys(storedValues).length > 0) { - formInputs[1].value = storedValues.login; - formInputs[2].value = storedValues.password; - } - } - } - - /** - * Renders feed including header and pins set - */ - async #renderFeed() { - // const pinSet = await getMethod(BACKEND_FEED_ROUTE); - - const pinSet = [ - { - PinID: 1, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 2, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 3, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 4, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 5, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 6, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 7, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 8, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 9, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 10, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 11, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 12, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 13, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 14, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 15, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 16, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 17, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 18, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 19, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 20, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 21, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 22, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 23, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 24, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 25, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 26, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 27, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 28, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 29, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 30, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 31, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 32, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 33, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 34, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 35, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 36, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 37, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 38, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 39, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 40, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 41, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 42, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 43, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 44, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 45, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 46, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 47, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', - BoardID: 1, - }, - { - PinID: 48, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 49, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 50, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 51, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 52, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - BoardID: 1, - }, - { - PinID: 53, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 54, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 55, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - { - PinID: 56, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, - MediaUrl: - 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', - }, - ]; - - const mainPage = new MainPageComponent(this.root, pinSet); - mainPage.renderTemplate(); - this.#structure.mainPage = mainPage; - } - - /** - * Handles unknown route request, renders corresponding page template - * @returns {string} - rendered page of unknown route - */ - #handleUnknownRoute() { - if (this.#structure.login) { - this.#structure.login.clearStoredInputsValues(); - } - if (this.#structure.signup) { - this.#structure.signup.clearStoredInputsValues(); - } - if (this.#structure.mainPage) { - this.#structure.mainPage.clearStoredInputsValues(); - } - - this.clear(true); - - const template = Handlebars.templates['unknown.hbs']; - const renderedTemplate = template(); - this.root.innerHTML += renderedTemplate; - - document - .querySelector('.tomain__tap-button') - .addEventListener('click', (event) => { - event.preventDefault(); - - this.root.innerHTML = ''; - this.renderPage(ROUTES.main); - }); - - return renderedTemplate; - } - + default: + this.#handleUnknownRoute(); + break; + } + } + + /** + * Clears all page data if it's needed and renders the page depending on what route is given. + * @param {string} pageRoute - the route of the page. + * @param {boolean} deleteEverything - flag for clearing all page data. + */ + renderPage(pageRoute, deleteEverything = false) { + this.clear(deleteEverything); + this.render(pageRoute); + } + + /** + * Renders login component and saves inputs values if they are typed in. + */ + #renderLookPin() { + const curPin = { + PinID: 3, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }; + const addPin = new LookPin(this.root, curPin); + addPin.renderTemplate(); + } + + #renderEditPin() { + const curPin = { + PinID: 3, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }; + const editPin = new EditPin(this.root, curPin); + editPin.renderTemplate(); + } + + #renderLogin() { + const config = this.config.loginConfig; + const login = new Login( + this.root, + config.inputs, + config.button, + config.button_form_footer + ); + login.renderTemplate(); + + login.addSubmitBtnHandler(BACKEND_LOGIN_ROUTE); + login.addInputFocusHandler(); + login.addInputOnChangeHandler(); + login.addInputsSaveHandler(this); + + this.#structure.login = login; + + // Add values to inputs if it's stored + if (this.#structure.signUp) { + const formInputs = document.getElementsByClassName('input'); + const storedValues = this.#structure.signUp.inputsStoredValues; + if (Object.keys(storedValues).length > 0) { + formInputs[0].value = storedValues.login; + formInputs[1].value = storedValues.password; + } + } + } + + /** + * Renders sign up component and saves inputs values if they are typed in. + */ + #renderSignup() { + const config = this.config.signupConfig; + const signUp = new SignUp( + this.root, + config.inputs, + config.button, + config.button_form_footer + ); + signUp.renderTemplate(); + + signUp.addSubmitBtnHandler(BACKEND_SIGNUP_ROUTE); + signUp.addInputFocusHandler(); + signUp.addInputOnChangeHandler(); + signUp.addInputsSaveHandler(this); + + this.#structure.signUp = signUp; + + // Add values to inputs if it's stored + if (this.#structure.login) { + const formInputs = document.getElementsByClassName('input'); + const storedValues = this.#structure.login.inputsStoredValues; + if (Object.keys(storedValues).length > 0) { + formInputs[1].value = storedValues.login; + formInputs[2].value = storedValues.password; + } + } + } + + /** + * Renders feed including header and pins set + */ + async #renderFeed() { + // const pinSet = await getMethod(BACKEND_FEED_ROUTE); + + const pinSet = [ + { + PinID: 1, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 2, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 3, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 4, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 5, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 6, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 7, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 8, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 9, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 10, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 11, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 12, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 13, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 14, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 15, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 16, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 17, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 18, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 19, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 20, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 21, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 22, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 23, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 24, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 25, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 26, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 27, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 28, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 29, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 30, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 31, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 32, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 33, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 34, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 35, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 36, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 37, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 38, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 39, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 40, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 41, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 42, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 43, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1655635949384-f737c5133dfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 44, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1596348158371-d3a25ec4dcf4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 45, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 46, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1593376893114-1aed528d80cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 47, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1680474569854-81216b34417a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', + BoardID: 1, + }, + { + PinID: 48, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1668395093559-338fa935d929?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 49, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1530388684420-55a62e95ed82?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 50, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1587383378486-83d683d9d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 51, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1518276780006-c85b06fa3c11?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 52, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1578259819688-2bf7b20a351a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + BoardID: 1, + }, + { + PinID: 53, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1614029655965-2464911905a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTV8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 54, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1603745871918-d756fb3c2c5e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 55, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1700075489227-47f36fb2709b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + { + PinID: 56, + AuthorName: 'Mary Jane', + AuthorFollowersNumber: 100, + MediaUrl: + 'https://images.unsplash.com/photo-1613591876822-846e82526ee7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fG5ldXJhbCUyMG5ldHdvcmtzfGVufDB8MXwwfHx8Mg%3D%3D', + }, + ]; + + const mainPage = new MainPageComponent(this.root, pinSet); + mainPage.renderTemplate(); + this.#structure.mainPage = mainPage; + } + + /** + * Handles unknown route request, renders corresponding page template + * @returns {string} - rendered page of unknown route + */ + #handleUnknownRoute() { + if (this.#structure.login) { + this.#structure.login.clearStoredInputsValues(); + } + if (this.#structure.signup) { + this.#structure.signup.clearStoredInputsValues(); + } + if (this.#structure.mainPage) { + this.#structure.mainPage.clearStoredInputsValues(); + } + + this.clear(true); + + const template = Handlebars.templates['unknown.hbs']; + const renderedTemplate = template(); + this.root.innerHTML += renderedTemplate; + + document + .querySelector('.tomain__tap-button') + .addEventListener('click', (event) => { + event.preventDefault(); + + this.root.innerHTML = ''; + this.renderPage(ROUTES.main); + }); + + return renderedTemplate; + } + #renderProfile() { const profileState = { userName: 'Иван Иванов', @@ -802,10 +802,10 @@ export default class App { }); } - /** - * Returns url of the last visited page. - */ - get LastPage() { - return document.referrer; - } + /** + * Returns url of the last visited page. + */ + get LastPage() { + return document.referrer; + } } diff --git a/public/assets/icons/upload.svg b/public/assets/icons/upload.svg new file mode 100644 index 0000000..ced605b --- /dev/null +++ b/public/assets/icons/upload.svg @@ -0,0 +1,2 @@ +
 \ No newline at end of file diff --git a/public/components/base.js b/public/components/base/base.js similarity index 100% rename from public/components/base.js rename to public/components/base/base.js diff --git a/public/components/boards-list/boards-list.js b/public/components/boards-list/boards-list.js index ffce336..ea1f6d5 100644 --- a/public/components/boards-list/boards-list.js +++ b/public/components/boards-list/boards-list.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from "../base.js"; +import { BaseComponent } from "../base/base.js"; /** * A component that is used to display all boards of currently authorized user. diff --git a/public/components/button/button.js b/public/components/button/button.js index 774fd02..96fa3fc 100644 --- a/public/components/button/button.js +++ b/public/components/button/button.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../base.js'; +import { BaseComponent } from '../base/base.js'; export class ButtonComponent extends BaseComponent { #clickHandler = () => {}; diff --git a/public/components/button/icon-button.js b/public/components/button/icon-button.js index fa43d2b..4687fe6 100644 --- a/public/components/button/icon-button.js +++ b/public/components/button/icon-button.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from "../base.js" +import { BaseComponent } from "../base/base.js" /** * Component that is used to display button with icon inside of it. diff --git a/public/components/complex/grid/grid.js b/public/components/complex/grid/grid.js index bc8b907..5e5e1cb 100644 --- a/public/components/complex/grid/grid.js +++ b/public/components/complex/grid/grid.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../base.js'; +import { BaseComponent } from '../../base/base.js'; import { PinComponent } from '../pin/pin.js'; diff --git a/public/components/complex/header/header.js b/public/components/complex/header/header.js index fae3345..d9837be 100644 --- a/public/components/complex/header/header.js +++ b/public/components/complex/header/header.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../base.js'; +import { BaseComponent } from '../../base/base.js'; import { SearchInputComponent as SeachInput } from '../../search-input/search-input.js'; import { ButtonComponent as Button } from '../../button/button.js'; diff --git a/public/components/complex/pin/pin.js b/public/components/complex/pin/pin.js index 2d1d140..d4f7991 100644 --- a/public/components/complex/pin/pin.js +++ b/public/components/complex/pin/pin.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../base.js'; +import { BaseComponent } from '../../base/base.js'; /** * Represents an Image Card Component. diff --git a/public/components/complex/preview/preview.js b/public/components/complex/preview/preview.js index bee2bc6..8d9b5f4 100644 --- a/public/components/complex/preview/preview.js +++ b/public/components/complex/preview/preview.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from '../../base.js'; +import { BaseComponent } from '../../base/base.js'; export class PreviewComponent extends BaseComponent { /** diff --git a/public/components/complex/savebox/savebox.js b/public/components/complex/savebox/savebox.js index 5e4a869..eb08c3d 100644 --- a/public/components/complex/savebox/savebox.js +++ b/public/components/complex/savebox/savebox.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from '../../base.js'; +import { BaseComponent } from '../../base/base.js'; import { SearchInputComponent as SearchInput } from '../../search-input/search-input.js'; diff --git a/public/components/details-menu/details-menu.js b/public/components/details-menu/details-menu.js index 313102c..3340edb 100644 --- a/public/components/details-menu/details-menu.js +++ b/public/components/details-menu/details-menu.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from "../base.js" +import { BaseComponent } from "../base/base.js" /** * A component that is used to display options when clicking on 'more' button. diff --git a/public/components/drop-down-menu/drop-down-menu.js b/public/components/drop-down-menu/drop-down-menu.js index 1e034c6..2e37c28 100644 --- a/public/components/drop-down-menu/drop-down-menu.js +++ b/public/components/drop-down-menu/drop-down-menu.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from "../base.js" +import { BaseComponent } from "../base/base.js" /** * Drop down menu component which is used on profile icon hover. diff --git a/public/components/input/input.js b/public/components/input/input.js index 9725af2..838b8df 100644 --- a/public/components/input/input.js +++ b/public/components/input/input.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../base.js'; +import { BaseComponent } from '../base/base.js'; /** * Represents an Input Component. diff --git a/public/components/search-input/search-input.js b/public/components/search-input/search-input.js index 229b38a..f7fa984 100644 --- a/public/components/search-input/search-input.js +++ b/public/components/search-input/search-input.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from '../base.js' +import { BaseComponent } from '../base/base.js' /** * A component that is used to display search bar. diff --git a/public/pages/editPin/editPin.hbs b/public/pages/editPin/editPin.hbs index 558bbe5..b30a4e9 100644 --- a/public/pages/editPin/editPin.hbs +++ b/public/pages/editPin/editPin.hbs @@ -1,4 +1,3 @@ -
@@ -16,12 +15,12 @@
- +

{{{pin.AuthorName}}}

{{{pin.AuthorFollowersNumber}}} Followers

-
+
1 месяц назад
@@ -36,7 +35,8 @@ Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia - consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, + consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem + ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam
@@ -70,4 +70,4 @@
- \ No newline at end of file + diff --git a/public/pages/editPin/editPin.js b/public/pages/editPin/editPin.js index 5323b67..0d39ede 100644 --- a/public/pages/editPin/editPin.js +++ b/public/pages/editPin/editPin.js @@ -4,22 +4,22 @@ import { ButtonComponent } from '../../components/button/button.js'; import { InputComponent } from '../../components/input/input.js'; export default class EditPin extends BaseComponent { - #pin; - constructor(parent, pin) { - super(parent); - this.#pin = pin; - } + #pin; + constructor(parent, pin) { + super(parent); + this.#pin = pin; + } - renderTemplate() { - const template = Handlebars.templates['editPin.hbs']; - const nameInput = new InputComponent(this.Parent, { - inputPlaceholder: 'Добавьте название', - typeOfInput: 'text', - }); - const HtmlData = nameInput.renderTemplate(); - const renderedTemplate = template({ - nameInput: HtmlData, - }); - this.Parent.innerHTML += renderedTemplate; - } + renderTemplate() { + const template = Handlebars.templates['editPin.hbs']; + const nameInput = new InputComponent(this.Parent, { + inputPlaceholder: 'Добавьте название', + typeOfInput: 'text', + }); + const HtmlData = nameInput.renderTemplate(); + const renderedTemplate = template({ + nameInput: HtmlData, + }); + this.Parent.innerHTML += renderedTemplate; + } } diff --git a/public/pages/login/login.js b/public/pages/login/login.js index cded03d..9796c7c 100644 --- a/public/pages/login/login.js +++ b/public/pages/login/login.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../components/base.js'; +import { BaseComponent } from '../../components/base/base.js'; import { InputComponent as Input } from '../../components/input/input.js'; import { ButtonComponent as Button } from '../../components/button/button.js'; diff --git a/public/pages/main/main.js b/public/pages/main/main.js index e1e8a70..9dbfc97 100644 --- a/public/pages/main/main.js +++ b/public/pages/main/main.js @@ -9,7 +9,7 @@ import { BACKEND_LOGOUT_ROUTE } from '../../constants/api.js' import { postMethod } from '../../modules/network.js' import { app } from '../../index.js' -import { BaseComponent } from '../../components/base.js' +import { BaseComponent } from '../../components/base/base.js' import { DropDownMenuComponent as DropDownMenu } from '../../components/drop-down-menu/drop-down-menu.js' diff --git a/public/pages/profile/board-grid.js b/public/pages/profile/board-grid.js index 391a029..ca9a1ec 100644 --- a/public/pages/profile/board-grid.js +++ b/public/pages/profile/board-grid.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from "../../components/base.js" +import { BaseComponent } from "../../components/base/base.js" /** * Component that is used to display boards grid on user profile page. diff --git a/public/pages/profile/profile.js b/public/pages/profile/profile.js index 75abdba..6bfd141 100644 --- a/public/pages/profile/profile.js +++ b/public/pages/profile/profile.js @@ -1,6 +1,6 @@ 'use strict' -import { BaseComponent } from "../../components/base.js"; +import { BaseComponent } from "../../components/base/base.js"; import { ButtonComponent as Button } from "../../components/button/button.js"; import { HeaderComponent as Header } from "../../components/complex/header/header.js"; diff --git a/public/pages/signup/signup.js b/public/pages/signup/signup.js index a9e68bc..4483819 100644 --- a/public/pages/signup/signup.js +++ b/public/pages/signup/signup.js @@ -1,6 +1,6 @@ 'use strict'; -import { BaseComponent } from '../../components/base.js'; +import { BaseComponent } from '../../components/base/base.js'; import { InputComponent as Input } from '../../components/input/input.js'; import { ButtonComponent as Button } from '../../components/button/button.js'; diff --git a/public/precompiled.js b/public/precompiled.js index 78f5763..5faa470 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -19,23 +19,23 @@ templates['boards-list.hbs'] = template({"1":function(container,depth0,helpers,p return "
\n \r\n \n
\n \r\n
\r\n \"cover\"\n
\n
\r\n \n" + + "\r\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"Private") : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":10,"column":16},"end":{"line":12,"column":23}}})) != null ? stack1 : "") - + "
\n"; + + " \r\n"; },"3":function(container,depth0,helpers,partials,data) { - return " \"private\"\n"; + return " \"private\"\r\n"; },"5":function(container,depth0,helpers,partials,data) { - return "

Здесь будут отображены доски

\n"; + return "

Здесь будут отображены доски

\r\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -44,9 +44,9 @@ templates['boards-list.hbs'] = template({"1":function(container,depth0,helpers,p return undefined }; - return "
\n" + return "
\r\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"boards") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(5, data, 0),"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":17,"column":11}}})) != null ? stack1 : "") - + "
\n"; + + "
\r\n"; },"useData":true}); templates['button.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { return "disabled"; @@ -61,8 +61,7 @@ templates['button.hbs'] = template({"1":function(container,depth0,helpers,partia }; return "\"iconLeft\""; },"7":function(container,depth0,helpers,partials,data) { var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -73,8 +72,7 @@ templates['button.hbs'] = template({"1":function(container,depth0,helpers,partia }; return "\"iconRight\""; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -84,23 +82,23 @@ templates['button.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "\n\n\n\n"; + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"disabled") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":1,"column":106},"end":{"line":2,"column":26}}})) != null ? stack1 : "") + + ">\r\n " + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"iconLeft") : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":1},"end":{"line":3,"column":65}}})) != null ? stack1 : "") + + "\r\n " + + alias4(((helper = (helper = lookupProperty(helpers,"label") || (depth0 != null ? lookupProperty(depth0,"label") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"label","hash":{},"data":data,"loc":{"start":{"line":4,"column":1},"end":{"line":4,"column":10}}}) : helper))) + + "\r\n " + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"iconRight") : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":5,"column":1},"end":{"line":5,"column":68}}})) != null ? stack1 : "") + + "\r\n\r\n"; },"useData":true}); templates['icon-button.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -123,7 +121,7 @@ templates['grid.hbs'] = template({"1":function(container,depth0,helpers,partials return " " + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") - + "\n"; + + "\r\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -132,9 +130,9 @@ templates['grid.hbs'] = template({"1":function(container,depth0,helpers,partials return undefined }; - return "
\n" + return "
\r\n" + ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"pins") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":4,"column":13}}})) != null ? stack1 : "") - + "
\n"; + + "
\r\n"; },"useData":true}); templates['header.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -144,11 +142,11 @@ templates['header.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "
\n " + return "
\r\n " + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? lookupProperty(stack1,"createButton") : stack1), depth0)) != null ? stack1 : "") - + "\n
\n
\n \r\n
\r\n \n
\n"; + + "\">\r\n
\r\n"; },"3":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -157,9 +155,9 @@ templates['header.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return " \r\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -168,13 +166,13 @@ templates['header.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "
\n
\n \r\n
\r\n \"Pinset\"\n
\n\n
\n " + + "\" alt=\"Pinset\" class=\"header__icon\" />\r\n
\r\n\r\n
\r\n " + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? lookupProperty(stack1,"searchInput") : stack1), depth0)) != null ? stack1 : "") - + "\n
\n\n" + + "\r\n
\r\n\r\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? lookupProperty(stack1,"isAuthorized") : stack1),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":10,"column":1},"end":{"line":21,"column":8}}})) != null ? stack1 : "") - + "
\n"; + + "
\r\n"; },"useData":true}); templates['pin.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -203,24 +201,20 @@ templates['pin.hbs'] = template({"1":function(container,depth0,helpers,partials, return "
\n
\n \r\n
\r\n \n
\r\n
\n \"Preview\"\n
\n
\n
\n \n
\n

" - + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\n

" - + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\n
\n
\n
\n"; + + "\">\r\n \"Preview\"\r\n
\r\n
\r\n" + + ((stack1 = lookupProperty(helpers,"unless").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"imageOnly") : stack1),{"name":"unless","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":8,"column":1},"end":{"line":16,"column":12}}})) != null ? stack1 : "") + + "\r\n"; },"useData":true}); templates['preview.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { - return " \"bookmark\n"; + return " \"bookmark\r\n"; },"3":function(container,depth0,helpers,partials,data) { - return " \"bookmark\n"; + return " \"bookmark\r\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -229,21 +223,21 @@ templates['preview.hbs'] = template({"1":function(container,depth0,helpers,parti return undefined }; - return "
\n
\n
\n \r\n
\r\n
\r\n \n
\n

" + + "\">\r\n

\r\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\n

" + + "

\r\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\n
\n
\n\n
\n
\n

Сохранить

\n \"expand\"\n
\n
\n
\n\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n

Сохранить

\r\n \"expand\"\r\n
\r\n
\r\n
\r\n\r\n \"Preview\"\n\n
\n
\n \"more\"\n
\n" + + "\" alt=\"Preview\">\r\n\r\n
\r\n
\r\n \"more\"\r\n
\r\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"Bookmarked") : stack1),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":25,"column":8},"end":{"line":29,"column":15}}})) != null ? stack1 : "") - + " \"comment\"\n \"share\"\n
\n\n
\n
\n

" + + " \"comment\"\r\n \"share\"\r\n

\r\n\r\n
\r\n
\r\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"ViewsNumber") : stack1), depth0)) != null ? stack1 : "") - + "

\n \"bookmark\"\n
\n
\n

" + + "

\r\n \"bookmark\"\r\n
\r\n
\r\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"BookmarksNumber") : stack1), depth0)) != null ? stack1 : "") - + "

\n \"bookmark\"\n
\n
\n
\n"; + + "

\r\n \"bookmark\"\r\n
\r\n
\r\n\r\n"; },"useData":true}); templates['savebox.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -253,11 +247,11 @@ templates['savebox.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c return undefined }; - return "
\n
\n " + return "
\r\n
\r\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"searchInput") || (depth0 != null ? lookupProperty(depth0,"searchInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"searchInput","hash":{},"data":data,"loc":{"start":{"line":3,"column":8},"end":{"line":3,"column":25}}}) : helper))) != null ? stack1 : "") - + "\n
\n " + + "\r\n
\r\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"boardsList") || (depth0 != null ? lookupProperty(depth0,"boardsList") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"boardsList","hash":{},"data":data,"loc":{"start":{"line":5,"column":12},"end":{"line":5,"column":28}}}) : helper))) != null ? stack1 : "") - + "\n
\n \n
\n
\n"; + + "\r\n
\r\n \r\n
\r\n
\r\n"; },"useData":true}); templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -273,7 +267,7 @@ templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers, + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"Download") : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":4,"column":56},"end":{"line":4,"column":135}}})) != null ? stack1 : "") + ">" + ((stack1 = alias1((depth0 != null ? lookupProperty(depth0,"Text") : depth0), depth0)) != null ? stack1 : "") - + "\n"; + + "\r\n"; },"2":function(container,depth0,helpers,partials,data) { var lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -293,12 +287,12 @@ templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers, return undefined }; - return "
\n
\n" + return "
\r\n
\r\n" + ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"options") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":8},"end":{"line":5,"column":17}}})) != null ? stack1 : "") - + "
\n
\n"; + + "
\r\n
\r\n"; },"useData":true}); templates['drop-down-menu.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { - return "
\n
\n \n \"Profile\"\n

Профиль

\n \n \n \"Settings\"\n

Настройки

\n \n \n \"Logout\"\n

Выйти

\n \n
\n
\n"; + return "
\r\n
\r\n \r\n \"Profile\"\r\n

Профиль

\r\n \r\n \r\n \"Settings\"\r\n

Настройки

\r\n \r\n \r\n \"Logout\"\r\n

Выйти

\r\n \r\n
\r\n
\r\n"; },"useData":true}); templates['input-text-area.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -310,9 +304,9 @@ templates['input-text-area.hbs'] = template({"1":function(container,depth0,helpe return " \n \r\n \"icon\"\n \n"; + + "\" alt=\"icon\" />\r\n \r\n"; },"3":function(container,depth0,helpers,partials,data) { var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -378,23 +372,23 @@ templates['input-text-area.hbs'] = template({"1":function(container,depth0,helpe return undefined }; - return "
\n
\r\n"; },"useData":true}); templates['input.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { return "input-error"; @@ -408,7 +402,7 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial return " \n"; + + "\r\n"; },"5":function(container,depth0,helpers,partials,data) { var stack1, helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -417,9 +411,9 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial return undefined }; - return " \n " + return " \r\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"inputImageLeft") || (depth0 != null ? lookupProperty(depth0,"inputImageLeft") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"inputImageLeft","hash":{},"data":data,"loc":{"start":{"line":10,"column":6},"end":{"line":10,"column":26}}}) : helper))) != null ? stack1 : "") - + "\n \n \n"; + + "\r\n \r\n \r\n"; },"7":function(container,depth0,helpers,partials,data) { return " input__text-padding-left "; },"9":function(container,depth0,helpers,partials,data) { @@ -434,11 +428,11 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial return undefined }; - return " \n " + return " \r\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"inputImageRight") || (depth0 != null ? lookupProperty(depth0,"inputImageRight") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"inputImageRight","hash":{},"data":data,"loc":{"start":{"line":22,"column":6},"end":{"line":22,"column":27}}}) : helper))) != null ? stack1 : "") - + "\n \n \n"; + + "\r\n \r\n \r\n"; },"15":function(container,depth0,helpers,partials,data) { - return "
\n
\n"; + return "
\r\n
\r\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -451,27 +445,27 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial + alias4(((helper = (helper = lookupProperty(helpers,"inputSize") || (depth0 != null ? lookupProperty(depth0,"inputSize") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"inputSize","hash":{},"data":data,"loc":{"start":{"line":1,"column":28},"end":{"line":1,"column":41}}}) : helper))) + " " + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"Error") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":1,"column":42},"end":{"line":1,"column":73}}})) != null ? stack1 : "") - + "\">\n\n" + + "\">\r\n\r\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputLabelText") : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":2},"end":{"line":5,"column":9}}})) != null ? stack1 : "") - + "\n
\n" + + "\r\n
\r\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputImageLeft") : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":8,"column":4},"end":{"line":13,"column":11}}})) != null ? stack1 : "") - + "\n \n\n" + + "\r\n oninput=\"this.dispatchEvent(new CustomEvent('input-change', { detail: this.value }))\" />\r\n\r\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputImageRight") : depth0),{"name":"if","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":20,"column":4},"end":{"line":25,"column":11}}})) != null ? stack1 : "") - + "
\n\n" + + "
\r\n\r\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputHelperText") : depth0),{"name":"if","hash":{},"fn":container.program(15, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":28,"column":2},"end":{"line":31,"column":9}}})) != null ? stack1 : "") - + "\n\n"; + + "\r\n\r\n"; },"useData":true}); templates['search-input.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -481,9 +475,9 @@ templates['search-input.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":funct return undefined }; - return "
\n \"search\"\n \r\n \"search\"\r\n \n \"clear\"\n
\n"; + + "\" name=\"search-input\">\r\n \"clear\"\r\n\r\n"; },"useData":true}); templates['lookPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -493,17 +487,17 @@ templates['lookPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c return undefined }; - return "\n
\n
\n \n
\n
\n
\n
\n " + return "\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"saveButton") || (depth0 != null ? lookupProperty(depth0,"saveButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"saveButton","hash":{},"data":data,"loc":{"start":{"line":9,"column":16},"end":{"line":9,"column":32}}}) : helper))) != null ? stack1 : "") - + "\n " + + "\r\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"rewardButton") || (depth0 != null ? lookupProperty(depth0,"rewardButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"rewardButton","hash":{},"data":data,"loc":{"start":{"line":10,"column":16},"end":{"line":10,"column":34}}}) : helper))) != null ? stack1 : "") - + "\n
\n
\n \"bookmark\n \"comment\"\n \"share\"\n
\n
\n
\n
\r\n
\r\n \"bookmark\r\n \"comment\"\r\n \"share\"\r\n
\r\n
\r\n
\r\n
\n \n
\n

" + + "\">\r\n \r\n

\r\n

" + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\n

" + + "

\r\n

" + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\n
\n
\n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n
\n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n \n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n
\n
\n"; + + " Followers

\r\n
\r\n
\r\n
\r\n 1 месяц назад\r\n
\r\n
\r\n Россия, Москва\r\n
\r\n
\r\n
\r\n Готовы к будущему ? Красочный киберпанковский головной убор\r\n
\r\n
\r\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\r\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\r\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\r\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \r\n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\r\n
\r\n \r\n
\r\n 11 комментариев\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n"; },"useData":true}); templates['editPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -513,22 +507,22 @@ templates['editPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c return undefined }; - return "\n
\n
\n \n
\n
\n
\n
\n " + return "\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"nameInput") || (depth0 != null ? lookupProperty(depth0,"nameInput") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"nameInput","hash":{},"data":data,"loc":{"start":{"line":9,"column":16},"end":{"line":9,"column":31}}}) : helper))) != null ? stack1 : "") - + "\n
\n
\n \"bookmark\n \"comment\"\n \"share\"\n
\n
\n
\n
\r\n
\r\n \"bookmark\r\n \"comment\"\r\n \"share\"\r\n
\r\n
\r\n
\r\n
\n \n
\n

" + + "\">\r\n \r\n

\r\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\n

" + + "

\r\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\n
\n
\n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n
\n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n \n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n
\n
"; + + " Followers

\r\n
\r\n
\r\n
\r\n 1 месяц назад\r\n
\r\n
\r\n Россия, Москва\r\n
\r\n
\r\n
\r\n Готовы к будущему ? Красочный киберпанковский головной убор\r\n
\r\n
\r\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\r\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\r\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\r\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \r\n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\r\n
\r\n \r\n
\r\n 11 комментариев\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
"; },"useData":true}); templates['login.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1; return " " + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") - + "\n"; + + "\r\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -537,15 +531,15 @@ templates['login.hbs'] = template({"1":function(container,depth0,helpers,partial return undefined }; - return "
\n Главная\n
\n
\n \n Pin\n Set\n \n
\n
\n
\r\n Главная\r\n
\r\n
\r\n \r\n Pin\r\n Set\r\n \r\n
\r\n
\r\n \n" + + "\">\r\n" + ((stack1 = lookupProperty(helpers,"each").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputs") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":12,"column":16},"end":{"line":14,"column":25}}})) != null ? stack1 : "") + " " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button") || (depth0 != null ? lookupProperty(depth0,"button") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button","hash":{},"data":data,"loc":{"start":{"line":15,"column":16},"end":{"line":15,"column":28}}}) : helper))) != null ? stack1 : "") - + "\n \n
\n Нет аккаунта? " + + "\r\n \r\n
\r\n Нет аккаунта? " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button_form_footer") || (depth0 != null ? lookupProperty(depth0,"button_form_footer") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button_form_footer","hash":{},"data":data,"loc":{"start":{"line":18,"column":36},"end":{"line":18,"column":60}}}) : helper))) != null ? stack1 : "") - + "\n
\n
\n
\n
\n"; + + "\r\n
\r\n
\r\n
\r\n
\r\n"; },"useData":true}); templates['main.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -555,11 +549,11 @@ templates['main.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(cont return undefined }; - return "
\n " + return "
\r\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"header") || (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"header","hash":{},"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":2,"column":16}}}) : helper))) != null ? stack1 : "") - + "\n " + + "\r\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"grid") || (depth0 != null ? lookupProperty(depth0,"grid") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"grid","hash":{},"data":data,"loc":{"start":{"line":3,"column":4},"end":{"line":3,"column":14}}}) : helper))) != null ? stack1 : "") - + "\n
\n"; + + "\r\n
\r\n"; },"useData":true}); templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,partials,data,blockParams,depths) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -706,7 +700,7 @@ templates['signup.hbs'] = template({"1":function(container,depth0,helpers,partia return " " + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") - + "\n"; + + "\r\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -715,17 +709,17 @@ templates['signup.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "
\n Главная\n
\n
\n \n Pin\n Set\n \n
\n
\n
\r\n Главная\r\n
\r\n
\r\n \r\n Pin\r\n Set\r\n \r\n
\r\n
\r\n \n" + + "\">\r\n" + ((stack1 = lookupProperty(helpers,"each").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputs") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":12,"column":16},"end":{"line":14,"column":25}}})) != null ? stack1 : "") + " " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button") || (depth0 != null ? lookupProperty(depth0,"button") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button","hash":{},"data":data,"loc":{"start":{"line":15,"column":16},"end":{"line":15,"column":28}}}) : helper))) != null ? stack1 : "") - + "\n \n
\n Уже зарегистрированы? " + + "\r\n \r\n
\r\n Уже зарегистрированы? " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button_form_footer") || (depth0 != null ? lookupProperty(depth0,"button_form_footer") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button_form_footer","hash":{},"data":data,"loc":{"start":{"line":18,"column":44},"end":{"line":18,"column":68}}}) : helper))) != null ? stack1 : "") - + "\n
\n
\n
\n
\n"; + + "\r\n
\r\n
\r\n
\r\n
\r\n"; },"useData":true}); templates['unknown.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { - return "
\n Главная\n

404 страница не найдена

\n
\n"; + return "
\r\n Главная\r\n

404 страница не найдена

\r\n
\r\n"; },"useData":true}); })(); \ No newline at end of file From 980606671dac538ec04a7a514308784d4459f1a5 Mon Sep 17 00:00:00 2001 From: wiseStann Date: Tue, 5 Nov 2024 23:48:20 +0300 Subject: [PATCH 06/14] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=B8=D0=BD=D0=BF=D1=83=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 16 +++- public/components/input/input.hbs | 49 +++++------ public/components/input/input.js | 108 +++++++++++------------ public/constants.css | 2 + public/constants/routes.js | 17 ++-- public/index.css | 2 +- public/pages/editPin/editPin.css | 140 +++++++++++------------------- public/pages/editPin/editPin.hbs | 84 ++++-------------- public/pages/editPin/editPin.js | 66 +++++++++++--- public/precompiled.js | 85 ++++++++++-------- 10 files changed, 275 insertions(+), 294 deletions(-) diff --git a/public/app.js b/public/app.js index 91b922e..e30e29b 100644 --- a/public/app.js +++ b/public/app.js @@ -67,6 +67,10 @@ export default class App { history.pushState({}, '', ROUTES.editPin); this.#renderEditPin(); break; + case ROUTES.createPin: + history.pushState({}, '', ROUTES.createPin); + this.#renderCreatePin(); + break; case ROUTES.profile: history.pushState({}, '', ROUTES.profile); this.#renderProfile(); @@ -106,13 +110,19 @@ export default class App { #renderEditPin() { const curPin = { PinID: 3, - AuthorName: 'Mary Jane', - AuthorFollowersNumber: 100, + Title: 'Текущее название', + Description: 'Текущее описание', + PinBoard: 'Имя текущей доски', MediaUrl: 'https://images.unsplash.com/photo-1580618432485-1e08c5039909?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV1cmFsJTIwbmV0d29ya3N8ZW58MHwxfDB8fHwy', BoardID: 1, }; - const editPin = new EditPin(this.root, curPin); + const editPin = new EditPin(this.root, curPin, true); + editPin.renderTemplate(); + } + + #renderCreatePin() { + const editPin = new EditPin(this.root, null, false); editPin.renderTemplate(); } diff --git a/public/components/input/input.hbs b/public/components/input/input.hbs index 29d5994..8698a17 100644 --- a/public/components/input/input.hbs +++ b/public/components/input/input.hbs @@ -1,33 +1,32 @@
- {{#if inputLabelText}} - - {{/if}} + {{#if inputLabelText}} + + {{/if}} -
- {{#if inputImageLeft}} - - {{{inputImageLeft}}} - - - {{/if}} +
+ {{#if inputImageLeft}} + + {{{inputImageLeft}}} + + + {{/if}} - + - {{#if inputImageRight}} - - {{{inputImageRight}}} - - - {{/if}} -
+ {{#if inputImageRight}} + + {{{inputImageRight}}} + + + {{/if}} +
- {{#if inputHelperText}} - - - {{/if}} + {{#if inputHelperText}} + + + {{/if}}
diff --git a/public/components/input/input.js b/public/components/input/input.js index 838b8df..d4d6105 100644 --- a/public/components/input/input.js +++ b/public/components/input/input.js @@ -7,64 +7,64 @@ import { BaseComponent } from '../base/base.js'; * @class */ export class InputComponent extends BaseComponent { - /** - * The function that will handle the input change event. - * @type {Function} - */ - #changeHandler = () => {}; + /** + * The function that will handle the input change event. + * @type {Function} + */ + #changeHandler = () => { }; - /** - * Creates an instance of InputComponent. - * @constructor - * @param {HTMLElement} parent - The parent element where the input will be rendered. - * @param {Object} [state] - The initial state of the input component. (optional) - * @param {Function} [changeHandler] - The function that will handle the input change event. (optional) - */ - constructor(parent, state = {}, changeHandler = () => {}) { - super(parent, state); - this.#changeHandler = changeHandler; - } + /** + * Creates an instance of InputComponent. + * @constructor + * @param {HTMLElement} parent - The parent element where the input will be rendered. + * @param {Object} [state] - The initial state of the input component. (optional) + * @param {Function} [changeHandler] - The function that will handle the input change event. (optional) + */ + constructor(parent, state = {}, changeHandler = () => { }) { + super(parent, state); + this.#changeHandler = changeHandler; + } - /** - * Renders the input component. - * @returns {string} - The rendered HTML template of the input. - */ - renderTemplate() { - const template = Handlebars.templates['input.hbs']; - const renderedTemplate = template(this.State); + /** + * Renders the input component. + * @returns {string} - The rendered HTML template of the input. + */ + renderTemplate() { + const template = Handlebars.templates['input.hbs']; + const renderedTemplate = template(this.State); + return renderedTemplate; + } - // const parent = this.Parent; - // if (parent) { - // parent.innerHTML += renderedTemplate; + /** + * Handles the input change event. + * @param {Event} event - The input change event object. + */ + handleInputChange(event) { + if (typeof this.#changeHandler === 'function') { + this.#changeHandler(event.target.value); + } + } - // } + /** + * Sets the change event handler for the input. + * @param {Function} changeHandler - The function to handle the input change event. + */ + setChangeHandler(changeHandler) { + this.#changeHandler = changeHandler; + } - return renderedTemplate; - } + /** + * Gets the current change event handler for the input. + * @returns {Function} - The current change event handler. + */ + getChangeHandler() { + return this.#changeHandler; + } - /** - * Handles the input change event. - * @param {Event} event - The input change event object. - */ - handleInputChange(event) { - if (typeof this.#changeHandler === 'function') { - this.#changeHandler(event.target.value); - } - } - - /** - * Sets the change event handler for the input. - * @param {Function} changeHandler - The function to handle the input change event. - */ - setChangeHandler(changeHandler) { - this.#changeHandler = changeHandler; - } - - /** - * Gets the current change event handler for the input. - * @returns {Function} - The current change event handler. - */ - getChangeHandler() { - return this.#changeHandler; - } + /** + * Sets a value to input field. + */ + setValue(value) { + this.State.inputValue = value; + } } diff --git a/public/constants.css b/public/constants.css index 7bf8077..c63f42a 100644 --- a/public/constants.css +++ b/public/constants.css @@ -61,4 +61,6 @@ --pinset-delete-button-color: #C20000; --pinset-delete-button-hovered-color: #910000; + + --pinset-create-inputs-placeholder-text-color: #7A7A7A; } diff --git a/public/constants/routes.js b/public/constants/routes.js index f1cf5cc..414aa26 100644 --- a/public/constants/routes.js +++ b/public/constants/routes.js @@ -1,12 +1,13 @@ 'use strict'; export const ROUTES = { - main: '/feed', - profile: '/profile', - login: '/login', - signup: '/signup', - isAuthorized: '/is_authorized', - logOut: '/logout', - lookPin: '/lookpin', - editPin: '/editpin', + main: '/feed', + profile: '/profile', + login: '/login', + signup: '/signup', + isAuthorized: '/is_authorized', + logOut: '/logout', + lookPin: '/lookpin', + editPin: '/edit_pin', + createPin: '/create_pin', }; diff --git a/public/index.css b/public/index.css index 723f801..30b6cfc 100644 --- a/public/index.css +++ b/public/index.css @@ -4,7 +4,7 @@ @import url(pages/login/login.css); @import url(pages/signup/signup.css); @import url(pages/addPin/lookPin.css); -@import url(pages/addPin/editPin.css); +@import url(pages/editPin/editPin.css); @import url(pages/unknown/unknown.css); @import url(pages/profile/profile.css); @import url(components/complex/header/header.css); diff --git a/public/pages/editPin/editPin.css b/public/pages/editPin/editPin.css index 4137c41..645c5ff 100644 --- a/public/pages/editPin/editPin.css +++ b/public/pages/editPin/editPin.css @@ -1,120 +1,80 @@ - - -.lookpin-container{ - margin-left: 15rem; - margin-right: 15rem; - width: calc(100% - 30rem); - height: 80%; - background-color: var(--project-primary-white);; - display: flex; - gap: 1rem; -} - -.lookpin__data{ +.pin-edit-page__content-container { width: 50%; - padding: 10px; - display: flex; - flex-direction: column; - gap: 0.5rem; - background-color: var(--project-primary-white); - border-radius: 5%; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -} - -.lookpin__image{ - width: 45%; + height: 60%; + position: fixed; + background-color: aquamarine; + border-radius: 20px; + padding: 40px; + z-index: 99999; } -.lookpin__image img { +.pin-edit-page__cover-container { + position: relative; width: 100%; height: 100%; - border-radius: 5%; + display: flex; + justify-content: center; } -.lookpin__actions { - display: flex; +.pin-edit-page__cover-container img { + max-width: 100%; + max-height: 100%; + object-fit: cover; + overflow: hidden } -.lookpin__info{ +.pin-edit-page__main-container { width: 100%; + height: 100%; display: flex; + justify-content: center; align-items: center; - justify-content: space-between; - color: var(--pin-feed-author-followers-number-color); - font-size: 12px; - font-weight: 300; -} - -.lookpin__header { - font-size: 20px; - font-weight: 600; - max-height: 2.5em; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - text-overflow: ellipsis; -} - -.lookpin__description{ - max-height: 5em; - font-size: 16px; - line-height: 1.2; - overflow-y: auto; - padding-right: 0.2rem; -} - - -.lookpin__actions-account { - display: flex; - gap: 10px; } -.lookpin__actions-extra { +.pin-edit-page__inputs-container { display: flex; - justify-content: right; + flex-direction: column; + justify-content: space-evenly; + align-items: center; } -.lookpin__actions-extra img { - width: 20%; - filter: invert(1); +.pin-edit-page__cover-container { + width: 100%; + height: 100%; + background-color: antiquewhite; } -.lookpin-button{ - background-color: var(--project-primary-white); - color: var(--project-primary-grey); - border: 1px solid var(--project-primary-grey); - padding: 10px; - border-radius: 20px; +.pin-edit-page__inputs-container { + width: 100%; + height: 100%; + background-color: aqua; } -.lookpin__comments{ - height: 4em; +.pin-edit-page__board-selector { display: flex; - flex-direction: column; - gap: 5px; - overflow-y: auto; + justify-content: center; + align-items: center; + width: 70%; + border: 2px solid var(--pinset-create-inputs-placeholder-text-color); + border-radius: 15px; + cursor: pointer; + margin: 10px; } -.comment { +.pin-edit-page__board-selector-container { + position: relative; display: flex; - gap: 10px; - font-size: 14px; + justify-content: center; + align-items: center; } -.comment__author-name { - font-weight: 600; +.pin-edit-page__board-selector-container-text { + margin: 0 0 0 10px; + font-size: 16px; + color: var(--pinset-create-inputs-placeholder-text-color); } -.comment__author-avatar { - width: 35px; - height: 35px; - border-radius: 50%; - object-fit: cover; - clip-path: circle(); - cursor: pointer; +.pin-edit-page__board-selector-container-icon { + width: 30px; + height: 30px; } - -.comment__data { - flex:1; -} \ No newline at end of file diff --git a/public/pages/editPin/editPin.hbs b/public/pages/editPin/editPin.hbs index b30a4e9..f5e4061 100644 --- a/public/pages/editPin/editPin.hbs +++ b/public/pages/editPin/editPin.hbs @@ -1,73 +1,23 @@ -
-
- -
-
-
- -
- bookmark it - comment - share -
-
-
-
- -
-

{{{pin.AuthorName}}}

-

{{{pin.AuthorFollowersNumber}}} Followers

-
-
-
- 1 месяц назад -
-
- Россия, Москва -
-
-
- Готовы к будущему ? Красочный киберпанковский головной убор -
-
- Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, - totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta - sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia - consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem - ipsum, - quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam -
-
- Ссылка на пин +
+
+
+ Image
-
- 11 комментариев -
-
-
- -
-
- Chris Isaak -
-
- Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны. -
-
-
-
- -
-
- Chris Isaak -
-
- Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны. -
+
+ {{{TitleInput}}} + {{{DescriptionInput}}} +
+
+ {{#if InEditMode}} +

{{{PinBoard}}}

+ {{else}} +

Выберите доску *

+ {{/if}} + + expand
+ {{{PublishButton}}}
diff --git a/public/pages/editPin/editPin.js b/public/pages/editPin/editPin.js index 0d39ede..2973f6f 100644 --- a/public/pages/editPin/editPin.js +++ b/public/pages/editPin/editPin.js @@ -1,25 +1,71 @@ import { BaseComponent } from '../../components/base/base.js'; -import { PinComponent } from '../../components/complex/pin/pin.js'; -import { ButtonComponent } from '../../components/button/button.js'; +import { ButtonComponent as Button } from '../../components/button/button.js'; import { InputComponent } from '../../components/input/input.js'; -export default class EditPin extends BaseComponent { +/** + * Component that is used to create and edit pins. + */ +export default class EditPinComponent extends BaseComponent { #pin; - constructor(parent, pin) { + #editMode; + + /** + * Creates a EditPinComponent. + * @param {HTMLElement} parent - HTML element of the parent container. + * @param {Object} pin - object of PinComponent class. + */ + constructor(parent, pin, editMode) { super(parent); this.#pin = pin; + this.#editMode = editMode; } + /** + * Renderes a template of the edit pin page. + */ renderTemplate() { const template = Handlebars.templates['editPin.hbs']; - const nameInput = new InputComponent(this.Parent, { - inputPlaceholder: 'Добавьте название', + + const titleInput = new InputComponent(this.Parent, { + inputPlaceholder: 'Добавьте название *', typeOfInput: 'text', }); - const HtmlData = nameInput.renderTemplate(); - const renderedTemplate = template({ - nameInput: HtmlData, + const descriptionInput = new InputComponent(this.Parent, { + inputPlaceholder: 'Добавьте описание', + typeOfInput: 'text', }); - this.Parent.innerHTML += renderedTemplate; + + if (this.#editMode) { + titleInput.setValue(this.#pin.Title); + descriptionInput.setValue(this.#pin.Description); + } + + const publishButton = new Button(this.Parent, { + label: 'Опубликовать', + type: 'submit', + disabled: false, + hover: false, + active: false + }); + + let renderedTemplate; + if (this.#editMode) { + renderedTemplate = template({ + TitleInput: titleInput.renderTemplate(), + DescriptionInput: descriptionInput.renderTemplate(), + PublishButton: publishButton.renderTemplate(), + InEditMode: this.#editMode, + PinBoard: this.#pin.PinBoard, + }); + } + else { + renderedTemplate = template({ + TitleInput: titleInput.renderTemplate(), + DescriptionInput: descriptionInput.renderTemplate(), + PublishButton: publishButton.renderTemplate(), + }); + } + + this.Parent.insertAdjacentHTML('beforeend', renderedTemplate); } } diff --git a/public/precompiled.js b/public/precompiled.js index 5faa470..edce18f 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -400,8 +400,8 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial return undefined }; - return "
\r\n\r\n" + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputHelperText") : depth0),{"name":"if","hash":{},"fn":container.program(15, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":27,"column":1},"end":{"line":30,"column":8}}})) != null ? stack1 : "") + "\r\n
\r\n"; },"useData":true}); templates['search-input.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { @@ -499,23 +499,36 @@ templates['lookPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") + " Followers

\r\n
\r\n
\r\n
\r\n 1 месяц назад\r\n
\r\n
\r\n Россия, Москва\r\n
\r\n
\r\n
\r\n Готовы к будущему ? Красочный киберпанковский головной убор\r\n
\r\n
\r\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\r\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\r\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\r\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \r\n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\r\n
\r\n \r\n
\r\n 11 комментариев\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n"; },"useData":true}); -templates['editPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { - var stack1, helper, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { +templates['editPin.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { + var stack1, helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { return parent[propertyName]; } return undefined }; - return "\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n " - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"nameInput") || (depth0 != null ? lookupProperty(depth0,"nameInput") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"nameInput","hash":{},"data":data,"loc":{"start":{"line":9,"column":16},"end":{"line":9,"column":31}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n
\r\n \"bookmark\r\n \"comment\"\r\n \"share\"\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n

" - + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n

" - + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\r\n
\r\n
\r\n
\r\n 1 месяц назад\r\n
\r\n
\r\n Россия, Москва\r\n
\r\n
\r\n
\r\n Готовы к будущему ? Красочный киберпанковский головной убор\r\n
\r\n
\r\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\r\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\r\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\r\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \r\n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\r\n
\r\n \r\n
\r\n 11 комментариев\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
"; + return "

" + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"PinBoard") || (depth0 != null ? lookupProperty(depth0,"PinBoard") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"PinBoard","hash":{},"data":data,"loc":{"start":{"line":12,"column":80},"end":{"line":12,"column":94}}}) : helper))) != null ? stack1 : "") + + "

\r\n"; +},"3":function(container,depth0,helpers,partials,data) { + return "

Выберите доску *

\r\n"; +},"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { + var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return "
\r\n
\r\n
\r\n \"Image\"\r\n
\r\n
\r\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"TitleInput") || (depth0 != null ? lookupProperty(depth0,"TitleInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"TitleInput","hash":{},"data":data,"loc":{"start":{"line":7,"column":12},"end":{"line":7,"column":28}}}) : helper))) != null ? stack1 : "") + + "\r\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"DescriptionInput") || (depth0 != null ? lookupProperty(depth0,"DescriptionInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"DescriptionInput","hash":{},"data":data,"loc":{"start":{"line":8,"column":12},"end":{"line":8,"column":34}}}) : helper))) != null ? stack1 : "") + + "\r\n
\r\n
\r\n" + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"InEditMode") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":11,"column":20},"end":{"line":15,"column":27}}})) != null ? stack1 : "") + + "\r\n \"expand\"\r\n
\r\n
\r\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"PublishButton") || (depth0 != null ? lookupProperty(depth0,"PublishButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"PublishButton","hash":{},"data":data,"loc":{"start":{"line":20,"column":12},"end":{"line":20,"column":31}}}) : helper))) != null ? stack1 : "") + + "\r\n
\r\n
\r\n
\r\n"; },"useData":true}); templates['login.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1; From aa0f3a5dc5e5d7ba2f3ddec4bf6d9a09b6fdd58d Mon Sep 17 00:00:00 2001 From: Alexander Novak Date: Wed, 6 Nov 2024 00:03:13 +0300 Subject: [PATCH 07/14] added image input field --- public/assets/icons/check-photo.svg | 2 + public/index.css | 3 + public/pages/editPin/editPin.css | 38 ++++++++ public/pages/editPin/editPin.hbs | 18 +++- public/pages/editPin/editPin.js | 138 +++++++++++++++++----------- public/precompiled.js | 29 ++++++ 6 files changed, 170 insertions(+), 58 deletions(-) create mode 100644 public/assets/icons/check-photo.svg diff --git a/public/assets/icons/check-photo.svg b/public/assets/icons/check-photo.svg new file mode 100644 index 0000000..ced605b --- /dev/null +++ b/public/assets/icons/check-photo.svg @@ -0,0 +1,2 @@ +
 \ No newline at end of file diff --git a/public/index.css b/public/index.css index 30b6cfc..6ad016d 100644 --- a/public/index.css +++ b/public/index.css @@ -5,8 +5,11 @@ @import url(pages/signup/signup.css); @import url(pages/addPin/lookPin.css); @import url(pages/editPin/editPin.css); +<<<<<<< HEAD @import url(pages/unknown/unknown.css); @import url(pages/profile/profile.css); +======= +>>>>>>> c8505d7 (added image input field) @import url(components/complex/header/header.css); @import url(components/complex/grid/grid.css); @import url(components/complex/pin/pin.css); diff --git a/public/pages/editPin/editPin.css b/public/pages/editPin/editPin.css index 645c5ff..9dd1425 100644 --- a/public/pages/editPin/editPin.css +++ b/public/pages/editPin/editPin.css @@ -78,3 +78,41 @@ width: 30px; height: 30px; } + +.editpin__image{ + width: 45%; +} + +.editpin__image-container{ + padding: 10px; + background-color: var(--project-primary-grey); + display: flex; + height: 100%; + box-sizing: border-box; + flex-direction: column; + justify-content: center; + border-radius: 5%; +} + +.editpin__image input { + display: none; +} + +.noimage__icon{ + height: 30%; + width: 100%; + display: flex; + justify-content: center; +} + +.noimage__text{ + text-align: center; + color: var(--project-primary-white); +} + + +.editpin__image-container img { + width: 100%; + height: 100%; + border-radius: 5%; +} \ No newline at end of file diff --git a/public/pages/editPin/editPin.hbs b/public/pages/editPin/editPin.hbs index f5e4061..6cf356a 100644 --- a/public/pages/editPin/editPin.hbs +++ b/public/pages/editPin/editPin.hbs @@ -1,7 +1,21 @@
- Image +
+
+ {{#if noImage}} +
+ checkphoto +
+
+ выберите файл или перетащите его сюда +
+ {{else}} + Image + {{/if}} +
+ +
{{{TitleInput}}} @@ -20,4 +34,4 @@ {{{PublishButton}}}
-
+ \ No newline at end of file diff --git a/public/pages/editPin/editPin.js b/public/pages/editPin/editPin.js index 2973f6f..364f119 100644 --- a/public/pages/editPin/editPin.js +++ b/public/pages/editPin/editPin.js @@ -6,66 +6,92 @@ import { InputComponent } from '../../components/input/input.js'; * Component that is used to create and edit pins. */ export default class EditPinComponent extends BaseComponent { - #pin; - #editMode; + #pin; + #editMode; - /** - * Creates a EditPinComponent. - * @param {HTMLElement} parent - HTML element of the parent container. - * @param {Object} pin - object of PinComponent class. - */ - constructor(parent, pin, editMode) { - super(parent); - this.#pin = pin; - this.#editMode = editMode; - } + /** + * Creates a EditPinComponent. + * @param {HTMLElement} parent - HTML element of the parent container. + * @param {Object} pin - object of PinComponent class. + */ + constructor(parent, pin, editMode) { + super(parent); + this.#pin = pin; + this.#editMode = editMode; + this.handleImageClick = this.handleImageClick.bind(this); + this.handleImageUpload = this.handleImageUpload.bind(this); + } - /** - * Renderes a template of the edit pin page. - */ - renderTemplate() { - const template = Handlebars.templates['editPin.hbs']; - - const titleInput = new InputComponent(this.Parent, { - inputPlaceholder: 'Добавьте название *', - typeOfInput: 'text', - }); - const descriptionInput = new InputComponent(this.Parent, { - inputPlaceholder: 'Добавьте описание', - typeOfInput: 'text', - }); + /** + * Renderes a template of the edit pin page. + */ + renderTemplate() { + const template = Handlebars.templates['editPin.hbs']; - if (this.#editMode) { - titleInput.setValue(this.#pin.Title); - descriptionInput.setValue(this.#pin.Description); - } + const titleInput = new InputComponent(this.Parent, { + inputPlaceholder: 'Добавьте название *', + typeOfInput: 'text', + }); + const descriptionInput = new InputComponent(this.Parent, { + inputPlaceholder: 'Добавьте описание', + typeOfInput: 'text', + }); - const publishButton = new Button(this.Parent, { - label: 'Опубликовать', - type: 'submit', - disabled: false, - hover: false, - active: false - }); + if (this.#editMode) { + titleInput.setValue(this.#pin.Title); + descriptionInput.setValue(this.#pin.Description); + } - let renderedTemplate; - if (this.#editMode) { - renderedTemplate = template({ - TitleInput: titleInput.renderTemplate(), - DescriptionInput: descriptionInput.renderTemplate(), - PublishButton: publishButton.renderTemplate(), - InEditMode: this.#editMode, - PinBoard: this.#pin.PinBoard, - }); - } - else { - renderedTemplate = template({ - TitleInput: titleInput.renderTemplate(), - DescriptionInput: descriptionInput.renderTemplate(), - PublishButton: publishButton.renderTemplate(), - }); - } + const publishButton = new Button(this.Parent, { + label: 'Опубликовать', + type: 'submit', + disabled: false, + hover: false, + active: false, + }); - this.Parent.insertAdjacentHTML('beforeend', renderedTemplate); - } + let renderedTemplate; + if (this.#editMode) { + renderedTemplate = template({ + TitleInput: titleInput.renderTemplate(), + DescriptionInput: descriptionInput.renderTemplate(), + PublishButton: publishButton.renderTemplate(), + InEditMode: this.#editMode, + PinBoard: this.#pin.PinBoard, + }); + } else { + renderedTemplate = template({ + TitleInput: titleInput.renderTemplate(), + DescriptionInput: descriptionInput.renderTemplate(), + PublishButton: publishButton.renderTemplate(), + }); + } + + this.Parent.insertAdjacentHTML('beforeend', renderedTemplate); + const imageContainer = this.Parent.querySelector( + '.editpin__image-container' + ); + const imageInput = this.Parent.querySelector('#editpin__image-input'); + imageContainer.addEventListener('click', this.handleImageClick); + imageInput.addEventListener('change', this.handleImageUpload); + } + + handleImageClick(event) { + event.preventDefault(); + const imageInput = this.Parent.querySelector('#editpin__image-input'); + imageInput.click(); + } + + async handleImageUpload(event) { + event.preventDefault(); + const imageInput = event.target; + + if (imageInput.files && imageInput.files.length > 0) { + const file = imageInput.files[0]; + const formData = new FormData(); + formData.append(this.filename, file); + + const responce = await fetch; + } + } } diff --git a/public/precompiled.js b/public/precompiled.js index edce18f..eacdcdd 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -500,18 +500,47 @@ templates['lookPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c + " Followers

\r\n \r\n \r\n
\r\n 1 месяц назад\r\n
\r\n
\r\n Россия, Москва\r\n
\r\n \r\n
\r\n Готовы к будущему ? Красочный киберпанковский головной убор\r\n
\r\n
\r\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\r\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\r\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\r\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \r\n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\r\n
\r\n \r\n
\r\n 11 комментариев\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n \r\n\r\n"; },"useData":true}); templates['editPin.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { +<<<<<<< HEAD var stack1, helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { +======= + return "
\n \"checkphoto\"\n
\n
\n выберите файл или перетащите его сюда\n
\n"; +},"3":function(container,depth0,helpers,partials,data) { + return " \"checkphoto\"\n"; +},"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { + var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { +>>>>>>> c8505d7 (added image input field) if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { return parent[propertyName]; } return undefined }; +<<<<<<< HEAD return "

" + ((stack1 = ((helper = (helper = lookupProperty(helpers,"PinBoard") || (depth0 != null ? lookupProperty(depth0,"PinBoard") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"PinBoard","hash":{},"data":data,"loc":{"start":{"line":12,"column":80},"end":{"line":12,"column":94}}}) : helper))) != null ? stack1 : "") + "

\r\n"; },"3":function(container,depth0,helpers,partials,data) { return "

Выберите доску *

\r\n"; +======= + return "\n
\n
\n
\n" + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"noImage") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":5,"column":8},"end":{"line":14,"column":15}}})) != null ? stack1 : "") + + "
\n \n
\n
\n
\n
\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"nameInput") || (depth0 != null ? lookupProperty(depth0,"nameInput") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"nameInput","hash":{},"data":data,"loc":{"start":{"line":21,"column":16},"end":{"line":21,"column":31}}}) : helper))) != null ? stack1 : "") + + "\n
\n
\n \"bookmark\n \"comment\"\n \"share\"\n
\n
\n
\n
\n \n
\n

" + + ((stack1 = alias2(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") + + "

\n

" + + ((stack1 = alias2(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") + + " Followers

\n
\n
\n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n
\n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n \n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n
\n
"; +},"useData":true}); +templates['login.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { + var stack1; + + return " " + + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") + + "\n"; +>>>>>>> c8505d7 (added image input field) },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { From 1e6796030a4709e921db9f5afa0511f4cb03a116 Mon Sep 17 00:00:00 2001 From: Alexander Novak Date: Fri, 8 Nov 2024 01:23:43 +0300 Subject: [PATCH 08/14] =?UTF-8?q?=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=BA?= =?UTF-8?q?=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20?= =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=B8=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F?= =?UTF-8?q?=20=D0=BF=D0=B8=D0=BD=D0=B0=20=D0=B4=D0=BE=D0=B4=D0=B5=D0=BB?= =?UTF-8?q?=D0=B0=D0=BD=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/components/complex/preview/preview.css | 1 + public/index.css | 3 - public/pages/addPin/lookPin.css | 4 +- public/pages/addPin/lookPin.hbs | 13 +- public/pages/editPin/editPin.css | 158 ++++---- public/pages/editPin/editPin.hbs | 62 ++-- public/pages/editPin/editPin.js | 26 +- public/precompiled.js | 342 ++++++++---------- 8 files changed, 285 insertions(+), 324 deletions(-) diff --git a/public/components/complex/preview/preview.css b/public/components/complex/preview/preview.css index b06cb11..2f1b72a 100644 --- a/public/components/complex/preview/preview.css +++ b/public/components/complex/preview/preview.css @@ -50,6 +50,7 @@ cursor: pointer; } + .preview__author-info { display: flex; flex-direction: column; diff --git a/public/index.css b/public/index.css index 6ad016d..30b6cfc 100644 --- a/public/index.css +++ b/public/index.css @@ -5,11 +5,8 @@ @import url(pages/signup/signup.css); @import url(pages/addPin/lookPin.css); @import url(pages/editPin/editPin.css); -<<<<<<< HEAD @import url(pages/unknown/unknown.css); @import url(pages/profile/profile.css); -======= ->>>>>>> c8505d7 (added image input field) @import url(components/complex/header/header.css); @import url(components/complex/grid/grid.css); @import url(components/complex/pin/pin.css); diff --git a/public/pages/addPin/lookPin.css b/public/pages/addPin/lookPin.css index 88deae6..737de9e 100644 --- a/public/pages/addPin/lookPin.css +++ b/public/pages/addPin/lookPin.css @@ -1,3 +1,6 @@ +html, body { + height: 100%; +} .lookpin-container{ @@ -118,4 +121,3 @@ .comment__data { flex:1; } - diff --git a/public/pages/addPin/lookPin.hbs b/public/pages/addPin/lookPin.hbs index df5bf19..4141e41 100644 --- a/public/pages/addPin/lookPin.hbs +++ b/public/pages/addPin/lookPin.hbs @@ -1,4 +1,3 @@ -
@@ -16,13 +15,13 @@
-
- -
-

{{{pin.AuthorName}}}

-

{{{pin.AuthorFollowersNumber}}} Followers

+
+ +
+

{{{preview.AuthorName}}}

+

{{{preview.AuthorFollowersNumber}}} Followers

-
+
1 месяц назад
diff --git a/public/pages/editPin/editPin.css b/public/pages/editPin/editPin.css index 9dd1425..b8fb297 100644 --- a/public/pages/editPin/editPin.css +++ b/public/pages/editPin/editPin.css @@ -1,118 +1,124 @@ -.pin-edit-page__content-container { - width: 50%; - height: 60%; - position: fixed; - background-color: aquamarine; - border-radius: 20px; - padding: 40px; - z-index: 99999; +html, body { + height: 100%; } -.pin-edit-page__cover-container { - position: relative; - width: 100%; - height: 100%; + +.editpin-container{ + margin-left: 15rem; + margin-right: 15rem; + width: calc(100% - 30rem); + height: 80%; + background-color: var(--project-primary-white);; display: flex; - justify-content: center; + gap: 1rem; } -.pin-edit-page__cover-container img { - max-width: 100%; - max-height: 100%; - object-fit: cover; - overflow: hidden +.editpin__data{ + width: 50%; + padding: 10px; + display: flex; + flex-direction: column; + gap: 0.7rem; + background-color: var(--project-primary-white); + border-radius: 5%; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); } -.pin-edit-page__main-container { - width: 100%; +.editpin__image{ + width: 45%; +} + +.editpin__image-container{ height: 100%; + width: 100%; + border-radius: 5%; display: flex; + flex-direction: column; justify-content: center; - align-items: center; + background-color: var(--project-primary-grey); } -.pin-edit-page__inputs-container { +.noimage__icon{ + width: 100%; + height: 30%; display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; + justify-content: center; } -.pin-edit-page__cover-container { - width: 100%; - height: 100%; - background-color: antiquewhite; +.noimage__text{ + height: 20%; + color: var(--project-primary-white); + text-align: center; } -.pin-edit-page__inputs-container { +#editpin__image-input{ + display: none; +} + +.editpin__image img { width: 100%; height: 100%; - background-color: aqua; + border-radius: 5%; } -.pin-edit-page__board-selector { - display: flex; - justify-content: center; - align-items: center; - width: 70%; - border: 2px solid var(--pinset-create-inputs-placeholder-text-color); - border-radius: 15px; - cursor: pointer; - margin: 10px; +.editpin__data > div { + width: 100%; + height: 10%; } -.pin-edit-page__board-selector-container { - position: relative; - display: flex; - justify-content: center; - align-items: center; +.editpin__data .input-container{ + width: 100%; + height: 100%; } -.pin-edit-page__board-selector-container-text { - margin: 0 0 0 10px; - font-size: 16px; - color: var(--pinset-create-inputs-placeholder-text-color); +.editpin__data .input-icons-wrapper{ + width: 100%; + height: 100%; + border-radius: 10px; + overflow: hidden; } -.pin-edit-page__board-selector-container-icon { - width: 30px; - height: 30px; +.editpin__data input { + width: 100%; + height: 100%; + padding-left: 10px; + padding-right: 10px; } -.editpin__image{ - width: 45%; +.editpin__pinboard { + background-color: var(--header-nav-background-color); + border: 2px solid var(--project-primary-grey); + border-radius: 10px; + display: flex; } -.editpin__image-container{ - padding: 10px; - background-color: var(--project-primary-grey); - display: flex; +.editpin__pinboard-text { + width: 100%; height: 100%; - box-sizing: border-box; - flex-direction: column; + display: flex; justify-content: center; - border-radius: 5%; + align-items: center; } -.editpin__image input { - display: none; -} - -.noimage__icon{ - height: 30%; - width: 100%; +.editpin__submit { display: flex; justify-content: center; } -.noimage__text{ - text-align: center; - color: var(--project-primary-white); +.editpin__submit button { + height: 100%; + width: 100%; } -.editpin__image-container img { - width: 100%; - height: 100%; - border-radius: 5%; -} \ No newline at end of file + + + + + + + + + + + diff --git a/public/pages/editPin/editPin.hbs b/public/pages/editPin/editPin.hbs index 6cf356a..595608c 100644 --- a/public/pages/editPin/editPin.hbs +++ b/public/pages/editPin/editPin.hbs @@ -1,37 +1,43 @@ -
-
-
-
-
- {{#if noImage}} -
- checkphoto -
-
- выберите файл или перетащите его сюда + +
+
+
+ {{#if noImage}} +
+ checkphoto
- {{else}} - Image - {{/if}} +
+ выберите файл или перетащите его сюда +
+ {{else}} + Image + {{/if}}
-
-
+
+
{{{TitleInput}}} +
+
{{{DescriptionInput}}} -
-
- {{#if InEditMode}} -

{{{PinBoard}}}

- {{else}} -

Выберите доску *

- {{/if}} - - expand -
-
+
+
+
Выберите доску
+ {{!--
+ +
--}} +
+
{{{PublishButton}}}
-
\ No newline at end of file +
+ + + + + + + + diff --git a/public/pages/editPin/editPin.js b/public/pages/editPin/editPin.js index 364f119..8c1a9b2 100644 --- a/public/pages/editPin/editPin.js +++ b/public/pages/editPin/editPin.js @@ -22,9 +22,6 @@ export default class EditPinComponent extends BaseComponent { this.handleImageUpload = this.handleImageUpload.bind(this); } - /** - * Renderes a template of the edit pin page. - */ renderTemplate() { const template = Handlebars.templates['editPin.hbs']; @@ -51,21 +48,14 @@ export default class EditPinComponent extends BaseComponent { }); let renderedTemplate; - if (this.#editMode) { - renderedTemplate = template({ - TitleInput: titleInput.renderTemplate(), - DescriptionInput: descriptionInput.renderTemplate(), - PublishButton: publishButton.renderTemplate(), - InEditMode: this.#editMode, - PinBoard: this.#pin.PinBoard, - }); - } else { - renderedTemplate = template({ - TitleInput: titleInput.renderTemplate(), - DescriptionInput: descriptionInput.renderTemplate(), - PublishButton: publishButton.renderTemplate(), - }); - } + renderedTemplate = template({ + TitleInput: titleInput.renderTemplate(), + DescriptionInput: descriptionInput.renderTemplate(), + PublishButton: publishButton.renderTemplate(), + InEditMode: this.#editMode, + PinBoard: this.#pin.PinBoard, + noImage: true, + }); this.Parent.insertAdjacentHTML('beforeend', renderedTemplate); const imageContainer = this.Parent.querySelector( diff --git a/public/precompiled.js b/public/precompiled.js index eacdcdd..f1d7b17 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -19,23 +19,23 @@ templates['boards-list.hbs'] = template({"1":function(container,depth0,helpers,p return "
\r\n \n \r\n
\r\n \n
\n \"cover\"\r\n
\r\n
\n \r\n" + + "\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"Private") : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":10,"column":16},"end":{"line":12,"column":23}}})) != null ? stack1 : "") - + "
\r\n"; + + "
\n"; },"3":function(container,depth0,helpers,partials,data) { - return " \"private\"\r\n"; + return " \"private\"\n"; },"5":function(container,depth0,helpers,partials,data) { - return "

Здесь будут отображены доски

\r\n"; + return "

Здесь будут отображены доски

\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -44,9 +44,9 @@ templates['boards-list.hbs'] = template({"1":function(container,depth0,helpers,p return undefined }; - return "
\r\n" + return "
\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"boards") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(5, data, 0),"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":17,"column":11}}})) != null ? stack1 : "") - + "
\r\n"; + + "
\n"; },"useData":true}); templates['button.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { return "disabled"; @@ -92,13 +92,13 @@ templates['button.hbs'] = template({"1":function(container,depth0,helpers,partia + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"active") : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":1,"column":77},"end":{"line":1,"column":104}}})) != null ? stack1 : "") + "\" " + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"disabled") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":1,"column":106},"end":{"line":2,"column":26}}})) != null ? stack1 : "") - + ">\r\n " + + ">\n " + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"iconLeft") : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":1},"end":{"line":3,"column":65}}})) != null ? stack1 : "") - + "\r\n " + + "\n " + alias4(((helper = (helper = lookupProperty(helpers,"label") || (depth0 != null ? lookupProperty(depth0,"label") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"label","hash":{},"data":data,"loc":{"start":{"line":4,"column":1},"end":{"line":4,"column":10}}}) : helper))) - + "\r\n " + + "\n " + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"iconRight") : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":5,"column":1},"end":{"line":5,"column":68}}})) != null ? stack1 : "") - + "\r\n\r\n"; + + "\n\n"; },"useData":true}); templates['icon-button.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -110,18 +110,18 @@ templates['icon-button.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":functi return "
\r\n \n \r\n
\r\n"; + + "\">\n
\n"; },"useData":true}); templates['grid.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1; return " " + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") - + "\r\n"; + + "\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -130,9 +130,9 @@ templates['grid.hbs'] = template({"1":function(container,depth0,helpers,partials return undefined }; - return "
\r\n" + return "
\n" + ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"pins") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":4,"column":13}}})) != null ? stack1 : "") - + "
\r\n"; + + "
\n"; },"useData":true}); templates['header.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -142,11 +142,11 @@ templates['header.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "
\r\n " + return "
\n " + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? lookupProperty(stack1,"createButton") : stack1), depth0)) != null ? stack1 : "") - + "\r\n
\r\n
\r\n \n
\n \r\n
\r\n"; + + "\">\n
\n"; },"3":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -155,9 +155,9 @@ templates['header.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return " \n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -166,13 +166,13 @@ templates['header.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "
\r\n
\r\n \n
\n \"Pinset\"\r\n
\r\n\r\n
\r\n " + + "\" alt=\"Pinset\" class=\"header__icon\" />\n
\n\n
\n " + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? lookupProperty(stack1,"searchInput") : stack1), depth0)) != null ? stack1 : "") - + "\r\n
\r\n\r\n" + + "\n
\n\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? lookupProperty(stack1,"isAuthorized") : stack1),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":10,"column":1},"end":{"line":21,"column":8}}})) != null ? stack1 : "") - + "
\r\n"; + + "
\n"; },"useData":true}); templates['pin.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -184,13 +184,13 @@ templates['pin.hbs'] = template({"1":function(container,depth0,helpers,partials, return "
\r\n \n \r\n
\r\n

" + + "\">\n

\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n

" + + "

\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\r\n
\r\n
\r\n"; + + " Followers

\n
\n
\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -201,20 +201,20 @@ templates['pin.hbs'] = template({"1":function(container,depth0,helpers,partials, return "
\r\n
\r\n \n
\n \r\n
\n
\r\n \"Preview\"\r\n
\r\n
\r\n" + + "\">\n \"Preview\"\n
\n
\n" + ((stack1 = lookupProperty(helpers,"unless").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"imageOnly") : stack1),{"name":"unless","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":8,"column":1},"end":{"line":16,"column":12}}})) != null ? stack1 : "") - + "
\r\n"; + + "
\n"; },"useData":true}); templates['preview.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { - return " \"bookmark\r\n"; + return " \"bookmark\n"; },"3":function(container,depth0,helpers,partials,data) { - return " \"bookmark\r\n"; + return " \"bookmark\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -223,21 +223,21 @@ templates['preview.hbs'] = template({"1":function(container,depth0,helpers,parti return undefined }; - return "
\r\n
\r\n
\r\n \n
\n
\n \r\n
\r\n

" + + "\">\n

\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n

" + + "

\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\r\n
\r\n
\r\n\r\n
\r\n
\r\n

Сохранить

\r\n \"expand\"\r\n
\r\n
\r\n
\r\n\r\n \n
\n
\n\n
\n
\n

Сохранить

\n \"expand\"\n
\n
\n
\n\n \"Preview\"\r\n\r\n
\r\n
\r\n \"more\"\r\n
\r\n" + + "\" alt=\"Preview\">\n\n
\n
\n \"more\"\n
\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"Bookmarked") : stack1),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":25,"column":8},"end":{"line":29,"column":15}}})) != null ? stack1 : "") - + " \"comment\"\r\n \"share\"\r\n
\r\n\r\n
\r\n
\r\n

" + + " \"comment\"\n \"share\"\n

\n\n
\n
\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"ViewsNumber") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n \"bookmark\"\r\n
\r\n
\r\n

" + + "

\n \"bookmark\"\n
\n
\n

" + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"BookmarksNumber") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n \"bookmark\"\r\n
\r\n
\r\n
\r\n"; + + "

\n \"bookmark\"\n
\n
\n
\n"; },"useData":true}); templates['savebox.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -247,11 +247,11 @@ templates['savebox.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c return undefined }; - return "
\r\n
\r\n " + return "
\n
\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"searchInput") || (depth0 != null ? lookupProperty(depth0,"searchInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"searchInput","hash":{},"data":data,"loc":{"start":{"line":3,"column":8},"end":{"line":3,"column":25}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n " + + "\n
\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"boardsList") || (depth0 != null ? lookupProperty(depth0,"boardsList") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"boardsList","hash":{},"data":data,"loc":{"start":{"line":5,"column":12},"end":{"line":5,"column":28}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n \r\n
\r\n
\r\n"; + + "\n
\n \n
\n
\n"; },"useData":true}); templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -267,7 +267,7 @@ templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers, + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"Download") : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":4,"column":56},"end":{"line":4,"column":135}}})) != null ? stack1 : "") + ">" + ((stack1 = alias1((depth0 != null ? lookupProperty(depth0,"Text") : depth0), depth0)) != null ? stack1 : "") - + "\r\n"; + + "\n"; },"2":function(container,depth0,helpers,partials,data) { var lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -287,12 +287,12 @@ templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers, return undefined }; - return "
\r\n
\r\n" + return "
\n
\n" + ((stack1 = lookupProperty(helpers,"each").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"options") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":8},"end":{"line":5,"column":17}}})) != null ? stack1 : "") - + "
\r\n
\r\n"; + + "
\n
\n"; },"useData":true}); templates['drop-down-menu.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { - return "
\r\n
\r\n \r\n \"Profile\"\r\n

Профиль

\r\n \r\n \r\n \"Settings\"\r\n

Настройки

\r\n \r\n \r\n \"Logout\"\r\n

Выйти

\r\n \r\n
\r\n
\r\n"; + return "
\n
\n \n \"Profile\"\n

Профиль

\n \n \n \"Settings\"\n

Настройки

\n \n \n \"Logout\"\n

Выйти

\n \n
\n
\n"; },"useData":true}); templates['input-text-area.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -304,9 +304,9 @@ templates['input-text-area.hbs'] = template({"1":function(container,depth0,helpe return " \r\n \n \"icon\"\r\n \r\n"; + + "\" alt=\"icon\" />\n \n"; },"3":function(container,depth0,helpers,partials,data) { var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -372,23 +372,23 @@ templates['input-text-area.hbs'] = template({"1":function(container,depth0,helpe return undefined }; - return "
\r\n
\n"; },"useData":true}); templates['input.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { return "input-error"; @@ -402,7 +402,7 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial return " \r\n"; + + "\n"; },"5":function(container,depth0,helpers,partials,data) { var stack1, helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -411,9 +411,9 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial return undefined }; - return " \r\n " + return " \n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"inputImageLeft") || (depth0 != null ? lookupProperty(depth0,"inputImageLeft") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"inputImageLeft","hash":{},"data":data,"loc":{"start":{"line":10,"column":3},"end":{"line":10,"column":23}}}) : helper))) != null ? stack1 : "") - + "\r\n \r\n \r\n"; + + "\n \n \n"; },"7":function(container,depth0,helpers,partials,data) { return " input__text-padding-left "; },"9":function(container,depth0,helpers,partials,data) { @@ -428,11 +428,11 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial return undefined }; - return " \r\n " + return " \n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"inputImageRight") || (depth0 != null ? lookupProperty(depth0,"inputImageRight") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"inputImageRight","hash":{},"data":data,"loc":{"start":{"line":21,"column":3},"end":{"line":21,"column":24}}}) : helper))) != null ? stack1 : "") - + "\r\n \r\n \r\n"; + + "\n \n \n"; },"15":function(container,depth0,helpers,partials,data) { - return "
\r\n
\r\n"; + return "
\n
\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -445,27 +445,27 @@ templates['input.hbs'] = template({"1":function(container,depth0,helpers,partial + alias4(((helper = (helper = lookupProperty(helpers,"inputSize") || (depth0 != null ? lookupProperty(depth0,"inputSize") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"inputSize","hash":{},"data":data,"loc":{"start":{"line":1,"column":28},"end":{"line":1,"column":41}}}) : helper))) + " " + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"Error") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":1,"column":42},"end":{"line":1,"column":73}}})) != null ? stack1 : "") - + "\">\r\n\r\n" + + "\">\n\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputLabelText") : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":3,"column":1},"end":{"line":5,"column":8}}})) != null ? stack1 : "") - + "\r\n
\r\n" + + "\n
\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputImageLeft") : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":8,"column":2},"end":{"line":13,"column":9}}})) != null ? stack1 : "") - + "\r\n \r\n\r\n" + + " />\n\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputImageRight") : depth0),{"name":"if","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":19,"column":2},"end":{"line":24,"column":9}}})) != null ? stack1 : "") - + "
\r\n\r\n" + + "
\n\n" + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputHelperText") : depth0),{"name":"if","hash":{},"fn":container.program(15, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":27,"column":1},"end":{"line":30,"column":8}}})) != null ? stack1 : "") - + "\r\n
\r\n"; + + "\n
\n"; },"useData":true}); templates['search-input.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -475,9 +475,9 @@ templates['search-input.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":funct return undefined }; - return "
\r\n \"search\"\r\n \n \"search\"\n \r\n \"clear\"\r\n
\r\n"; + + "\" name=\"search-input\">\n \"clear\"\n\n"; },"useData":true}); templates['lookPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -487,52 +487,37 @@ templates['lookPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c return undefined }; - return "\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n " - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"saveButton") || (depth0 != null ? lookupProperty(depth0,"saveButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"saveButton","hash":{},"data":data,"loc":{"start":{"line":9,"column":16},"end":{"line":9,"column":32}}}) : helper))) != null ? stack1 : "") - + "\r\n " - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"rewardButton") || (depth0 != null ? lookupProperty(depth0,"rewardButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"rewardButton","hash":{},"data":data,"loc":{"start":{"line":10,"column":16},"end":{"line":10,"column":34}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n
\r\n \"bookmark\r\n \"comment\"\r\n \"share\"\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n

" - + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\r\n

" - + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\r\n
\r\n
\r\n
\r\n 1 месяц назад\r\n
\r\n
\r\n Россия, Москва\r\n
\r\n
\r\n
\r\n Готовы к будущему ? Красочный киберпанковский головной убор\r\n
\r\n
\r\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\r\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\r\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\r\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \r\n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\r\n
\r\n \r\n
\r\n 11 комментариев\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Chris Isaak\r\n
\r\n
\r\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n"; + return "
\n
\n \n
\n
\n
\n
\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"saveButton") || (depth0 != null ? lookupProperty(depth0,"saveButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"saveButton","hash":{},"data":data,"loc":{"start":{"line":8,"column":16},"end":{"line":8,"column":32}}}) : helper))) != null ? stack1 : "") + + "\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"rewardButton") || (depth0 != null ? lookupProperty(depth0,"rewardButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"rewardButton","hash":{},"data":data,"loc":{"start":{"line":9,"column":16},"end":{"line":9,"column":34}}}) : helper))) != null ? stack1 : "") + + "\n
\n
\n \"bookmark\n \"comment\"\n \"share\"\n
\n
\n
\n
\n \n
\n

" + + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") + + "

\n

" + + ((stack1 = alias4(((stack1 = (depth0 != null ? lookupProperty(depth0,"preview") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") + + " Followers

\n
\n
\n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n
\n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n \n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n
\n
\n"; },"useData":true}); templates['editPin.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { -<<<<<<< HEAD - var stack1, helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { -======= - return "
\n \"checkphoto\"\n
\n
\n выберите файл или перетащите его сюда\n
\n"; + return "
\n \"checkphoto\"\n
\n
\n выберите файл или перетащите его сюда\n
\n"; },"3":function(container,depth0,helpers,partials,data) { - return " \"checkphoto\"\n"; + return " \"Image\"\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { - var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { ->>>>>>> c8505d7 (added image input field) + var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { return parent[propertyName]; } return undefined }; -<<<<<<< HEAD - return "

" - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"PinBoard") || (depth0 != null ? lookupProperty(depth0,"PinBoard") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"PinBoard","hash":{},"data":data,"loc":{"start":{"line":12,"column":80},"end":{"line":12,"column":94}}}) : helper))) != null ? stack1 : "") - + "

\r\n"; -},"3":function(container,depth0,helpers,partials,data) { - return "

Выберите доску *

\r\n"; -======= return "\n
\n
\n
\n" - + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"noImage") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":5,"column":8},"end":{"line":14,"column":15}}})) != null ? stack1 : "") - + "
\n \n
\n
\n
\n
\n " - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"nameInput") || (depth0 != null ? lookupProperty(depth0,"nameInput") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"nameInput","hash":{},"data":data,"loc":{"start":{"line":21,"column":16},"end":{"line":21,"column":31}}}) : helper))) != null ? stack1 : "") - + "\n
\n
\n \"bookmark\n \"comment\"\n \"share\"\n
\n
\n
\n
\n \n
\n

" - + ((stack1 = alias2(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorName") : stack1), depth0)) != null ? stack1 : "") - + "

\n

" - + ((stack1 = alias2(((stack1 = (depth0 != null ? lookupProperty(depth0,"pin") : depth0)) != null ? lookupProperty(stack1,"AuthorFollowersNumber") : stack1), depth0)) != null ? stack1 : "") - + " Followers

\n
\n
\n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n
\n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n \n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n
\n
"; + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"noImage") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":5,"column":12},"end":{"line":14,"column":19}}})) != null ? stack1 : "") + + " \n \n \n
\n
\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"TitleInput") || (depth0 != null ? lookupProperty(depth0,"TitleInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"TitleInput","hash":{},"data":data,"loc":{"start":{"line":20,"column":12},"end":{"line":20,"column":28}}}) : helper))) != null ? stack1 : "") + + "\n
\n
\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"DescriptionInput") || (depth0 != null ? lookupProperty(depth0,"DescriptionInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"DescriptionInput","hash":{},"data":data,"loc":{"start":{"line":23,"column":12},"end":{"line":23,"column":34}}}) : helper))) != null ? stack1 : "") + + "\n
\n
\n
Выберите доску
\n
\n
\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"PublishButton") || (depth0 != null ? lookupProperty(depth0,"PublishButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"PublishButton","hash":{},"data":data,"loc":{"start":{"line":32,"column":12},"end":{"line":32,"column":31}}}) : helper))) != null ? stack1 : "") + + "\n
\n
\n\n\n\n\n\n\n\n\n\n"; },"useData":true}); templates['login.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1; @@ -540,7 +525,6 @@ templates['login.hbs'] = template({"1":function(container,depth0,helpers,partial return " " + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") + "\n"; ->>>>>>> c8505d7 (added image input field) },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -549,39 +533,15 @@ templates['login.hbs'] = template({"1":function(container,depth0,helpers,partial return undefined }; - return "
\r\n
\r\n
\r\n \"Image\"\r\n
\r\n
\r\n " - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"TitleInput") || (depth0 != null ? lookupProperty(depth0,"TitleInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"TitleInput","hash":{},"data":data,"loc":{"start":{"line":7,"column":12},"end":{"line":7,"column":28}}}) : helper))) != null ? stack1 : "") - + "\r\n " - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"DescriptionInput") || (depth0 != null ? lookupProperty(depth0,"DescriptionInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"DescriptionInput","hash":{},"data":data,"loc":{"start":{"line":8,"column":12},"end":{"line":8,"column":34}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n
\r\n" - + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"InEditMode") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":11,"column":20},"end":{"line":15,"column":27}}})) != null ? stack1 : "") - + "\r\n \"expand\"\r\n
\r\n
\r\n " - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"PublishButton") || (depth0 != null ? lookupProperty(depth0,"PublishButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"PublishButton","hash":{},"data":data,"loc":{"start":{"line":20,"column":12},"end":{"line":20,"column":31}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n
\r\n
\r\n"; -},"useData":true}); -templates['login.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { - var stack1; - - return " " - + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") - + "\r\n"; -},"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { - var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { - if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { - return parent[propertyName]; - } - return undefined - }; - - return "
\r\n Главная\r\n
\r\n
\r\n \r\n Pin\r\n Set\r\n \r\n
\r\n
\r\n
\n Главная\n
\n
\n \n Pin\n Set\n \n
\n
\n \r\n" + + "\">\n" + ((stack1 = lookupProperty(helpers,"each").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputs") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":12,"column":16},"end":{"line":14,"column":25}}})) != null ? stack1 : "") + " " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button") || (depth0 != null ? lookupProperty(depth0,"button") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button","hash":{},"data":data,"loc":{"start":{"line":15,"column":16},"end":{"line":15,"column":28}}}) : helper))) != null ? stack1 : "") - + "\r\n \r\n
\r\n Нет аккаунта? " + + "\n \n
\n Нет аккаунта? " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button_form_footer") || (depth0 != null ? lookupProperty(depth0,"button_form_footer") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button_form_footer","hash":{},"data":data,"loc":{"start":{"line":18,"column":36},"end":{"line":18,"column":60}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n
\r\n
\r\n
\r\n"; + + "\n
\n
\n
\n\n"; },"useData":true}); templates['main.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -591,11 +551,11 @@ templates['main.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(cont return undefined }; - return "
\r\n " + return "
\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"header") || (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"header","hash":{},"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":2,"column":16}}}) : helper))) != null ? stack1 : "") - + "\r\n " + + "\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"grid") || (depth0 != null ? lookupProperty(depth0,"grid") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"grid","hash":{},"data":data,"loc":{"start":{"line":3,"column":4},"end":{"line":3,"column":14}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n"; + + "\n
\n"; },"useData":true}); templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,partials,data,blockParams,depths) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -614,23 +574,23 @@ templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,pa return undefined }; - return "
\r\n \n \""\r\n \"Details\"\r\n
\n \"Details\"\n
\r\n
\r\n

" + + "\">\n

\n

" + ((stack1 = alias1((depth0 != null ? lookupProperty(depth0,"title") : depth0), depth0)) != null ? stack1 : "") - + "

\r\n" + + "

\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depths[1] != null ? lookupProperty(depths[1],"profile") : depths[1])) != null ? lookupProperty(stack1,"currentUser") : stack1),{"name":"if","hash":{},"fn":container.program(3, data, 0, blockParams, depths),"inverse":container.noop,"data":data,"loc":{"start":{"line":10,"column":24},"end":{"line":14,"column":31}}})) != null ? stack1 : "") - + "
\r\n
\r\n
\r\n
\r\n

" + + "

\n
\n
\n
\n

" + ((stack1 = alias1((depth0 != null ? lookupProperty(depth0,"bookmarkedNumber") : depth0), depth0)) != null ? stack1 : "") - + "

\r\n \"Bookmark\"\r\n
\r\n
\r\n

" + + "

\n \"Bookmark\"\n
\n
\n

" + ((stack1 = alias1((depth0 != null ? lookupProperty(depth0,"rewardedNumber") : depth0), depth0)) != null ? stack1 : "") - + "

\r\n \"Pinset\"\r\n
\r\n
\r\n
\r\n

" + + "

\n \"Pinset\"\n
\n
\n
\n

" + ((stack1 = alias1((depth0 != null ? lookupProperty(depth0,"lastModifyTime") : depth0), depth0)) != null ? stack1 : "") - + "

\r\n
\r\n
\r\n
\r\n
\r\n"; + + "

\n
\n
\n
\n \n"; },"3":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -641,9 +601,9 @@ templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,pa return ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"private") : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":11,"column":28},"end":{"line":13,"column":35}}})) != null ? stack1 : ""); },"4":function(container,depth0,helpers,partials,data) { - return " \"Private\"\r\n"; + return " \"Private\"\n"; },"6":function(container,depth0,helpers,partials,data) { - return "

По вашему запросу ничего не найдено

\r\n"; + return "

По вашему запросу ничего не найдено

\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data,blockParams,depths) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -652,12 +612,12 @@ templates['board-grid.hbs'] = template({"1":function(container,depth0,helpers,pa return undefined }; - return "
\r\n" + return "
\n" + ((stack1 = lookupProperty(helpers,"if").call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? lookupProperty(depth0,"boards") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0, blockParams, depths),"inverse":container.program(6, data, 0, blockParams, depths),"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":36,"column":11}}})) != null ? stack1 : "") - + "
\r\n"; + + "
\n"; },"useData":true,"useDepths":true}); templates['profile.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { - return "
\r\n \"Settings\"\r\n
\r\n"; + return "
\n \"Settings\"\n
\n"; },"3":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -666,21 +626,21 @@ templates['profile.hbs'] = template({"1":function(container,depth0,helpers,parti return undefined }; - return "
\r\n " + return "
\n " + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"profile") : depth0)) != null ? lookupProperty(stack1,"chatButton") : stack1), depth0)) != null ? stack1 : "") - + "\r\n " + + "\n " + ((stack1 = alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"profile") : depth0)) != null ? lookupProperty(stack1,"subscribeButton") : stack1), depth0)) != null ? stack1 : "") - + "\r\n
\r\n"; + + "\n
\n"; },"5":function(container,depth0,helpers,partials,data) { - return " \"VK\"\r\n"; + return " \"VK\"\n"; },"7":function(container,depth0,helpers,partials,data) { - return " \"Telegram\"\r\n"; + return " \"Telegram\"\n"; },"9":function(container,depth0,helpers,partials,data) { - return " \"Github\"\r\n"; + return " \"Github\"\n"; },"11":function(container,depth0,helpers,partials,data) { - return " \"Pinterest\"\r\n"; + return " \"Pinterest\"\n"; },"13":function(container,depth0,helpers,partials,data) { - return "
\r\n \r\n Pinset\r\n \r\n \"Navigate\"\r\n \r\n Мой профиль\r\n \r\n
\r\n
\r\n

Мои доски

\r\n \"Create\"\r\n
\r\n"; + return "
\n \n Pinset\n \n \"Navigate\"\n \n Мой профиль\n \n
\n
\n

Мои доски

\n \"Create\"\n
\n"; },"15":function(container,depth0,helpers,partials,data) { var stack1, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -689,9 +649,9 @@ templates['profile.hbs'] = template({"1":function(container,depth0,helpers,parti return undefined }; - return "
\r\n \r\n Pinset\r\n \r\n \"Navigate\"\r\n \r\n @" + return "
\n \n Pinset\n \n \"Navigate\"\n \n @" + ((stack1 = container.lambda(((stack1 = (depth0 != null ? lookupProperty(depth0,"profile") : depth0)) != null ? lookupProperty(stack1,"userNickname") : stack1), depth0)) != null ? stack1 : "") - + "\r\n \r\n
\r\n
\r\n

Доски пользователя

\r\n
\r\n"; + + "\n \n
\n
\n

Доски пользователя

\n
\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.lambda, alias5=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -700,49 +660,49 @@ templates['profile.hbs'] = template({"1":function(container,depth0,helpers,parti return undefined }; - return "
\r\n " + return "
\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"header") || (depth0 != null ? lookupProperty(depth0,"header") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"header","hash":{},"data":data,"loc":{"start":{"line":2,"column":4},"end":{"line":2,"column":16}}}) : helper))) != null ? stack1 : "") - + "\r\n\r\n
\r\n \r\n"; + + "\n
\n
\n\n
\n"; },"useData":true}); templates['signup.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1; return " " + ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "") - + "\r\n"; + + "\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -751,17 +711,17 @@ templates['signup.hbs'] = template({"1":function(container,depth0,helpers,partia return undefined }; - return "
\r\n Главная\r\n
\r\n
\r\n \r\n Pin\r\n Set\r\n \r\n
\r\n
\r\n
\n Главная\n
\n
\n \n Pin\n Set\n \n
\n
\n \r\n" + + "\">\n" + ((stack1 = lookupProperty(helpers,"each").call(alias1,(depth0 != null ? lookupProperty(depth0,"inputs") : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data,"loc":{"start":{"line":12,"column":16},"end":{"line":14,"column":25}}})) != null ? stack1 : "") + " " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button") || (depth0 != null ? lookupProperty(depth0,"button") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button","hash":{},"data":data,"loc":{"start":{"line":15,"column":16},"end":{"line":15,"column":28}}}) : helper))) != null ? stack1 : "") - + "\r\n \r\n
\r\n Уже зарегистрированы? " + + "\n \n
\n Уже зарегистрированы? " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"button_form_footer") || (depth0 != null ? lookupProperty(depth0,"button_form_footer") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"button_form_footer","hash":{},"data":data,"loc":{"start":{"line":18,"column":44},"end":{"line":18,"column":68}}}) : helper))) != null ? stack1 : "") - + "\r\n
\r\n
\r\n
\r\n
\r\n"; + + "\n
\n
\n
\n\n"; },"useData":true}); templates['unknown.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { - return "
\r\n Главная\r\n

404 страница не найдена

\r\n
\r\n"; + return "
\n Главная\n

404 страница не найдена

\n
\n"; },"useData":true}); })(); \ No newline at end of file From b7fdd32dc4f971a7846f07416ba4f9c15839b672 Mon Sep 17 00:00:00 2001 From: Alexander Novak Date: Fri, 8 Nov 2024 21:41:10 +0300 Subject: [PATCH 09/14] added editpin page --- public/components/boards-list/boards-list.hbs | 2 +- public/components/complex/savebox/savebox.css | 14 +++++ public/components/complex/savebox/savebox.hbs | 1 + public/pages/editPin/editPin.css | 2 +- public/pages/editPin/editPin.hbs | 20 +++---- public/pages/editPin/editPin.js | 56 +++++++++++++++++-- public/precompiled.js | 25 ++++++--- 7 files changed, 96 insertions(+), 24 deletions(-) diff --git a/public/components/boards-list/boards-list.hbs b/public/components/boards-list/boards-list.hbs index 96a2275..359d292 100644 --- a/public/components/boards-list/boards-list.hbs +++ b/public/components/boards-list/boards-list.hbs @@ -2,7 +2,7 @@ {{#if boards}} {{#each boards}}
- +
cover
diff --git a/public/components/complex/savebox/savebox.css b/public/components/complex/savebox/savebox.css index f5e1061..20b95b2 100644 --- a/public/components/complex/savebox/savebox.css +++ b/public/components/complex/savebox/savebox.css @@ -42,6 +42,20 @@ transition: 0.5s; } +.savebox__choose-board-button { + margin-top: 5px; + width: 100%; + height: 15%; + outline: none; + border: none; + background-color: var(--project-primary-red); + font-size: 18px; + color: var(--pin-create-new-board-button-text-color); + border-radius: 10px; + cursor: pointer; + transition: 0.5s; +} + .savebox__create-board-button:hover { background-color: var(--pin-create-new-board-button-hovered-color); transition: 0.5s; diff --git a/public/components/complex/savebox/savebox.hbs b/public/components/complex/savebox/savebox.hbs index fe4ecf1..05e6fdf 100644 --- a/public/components/complex/savebox/savebox.hbs +++ b/public/components/complex/savebox/savebox.hbs @@ -4,6 +4,7 @@
{{{boardsList}}}
+
diff --git a/public/pages/editPin/editPin.css b/public/pages/editPin/editPin.css index b8fb297..85bcaa7 100644 --- a/public/pages/editPin/editPin.css +++ b/public/pages/editPin/editPin.css @@ -78,7 +78,7 @@ html, body { overflow: hidden; } -.editpin__data input { +.input-icons-wrapper input { width: 100%; height: 100%; padding-left: 10px; diff --git a/public/pages/editPin/editPin.hbs b/public/pages/editPin/editPin.hbs index 595608c..23a02a9 100644 --- a/public/pages/editPin/editPin.hbs +++ b/public/pages/editPin/editPin.hbs @@ -2,15 +2,15 @@
- {{#if noImage}} + {{#if Image}} + Image + {{else}}
checkphoto
-
- выберите файл или перетащите его сюда -
- {{else}} - Image +
+ выберите файл или перетащите его сюда +
{{/if}}
@@ -22,12 +22,10 @@
{{{DescriptionInput}}}
-
+ {{!--
Выберите доску
- {{!--
- -
--}} -
+ {{{BoardsList}}} +
--}}
{{{PublishButton}}}
diff --git a/public/pages/editPin/editPin.js b/public/pages/editPin/editPin.js index 8c1a9b2..6bd9acb 100644 --- a/public/pages/editPin/editPin.js +++ b/public/pages/editPin/editPin.js @@ -1,6 +1,7 @@ import { BaseComponent } from '../../components/base/base.js'; import { ButtonComponent as Button } from '../../components/button/button.js'; import { InputComponent } from '../../components/input/input.js'; +import { SaveBoxComponent } from '../../components/complex/savebox/savebox.js'; /** * Component that is used to create and edit pins. @@ -20,9 +21,11 @@ export default class EditPinComponent extends BaseComponent { this.#editMode = editMode; this.handleImageClick = this.handleImageClick.bind(this); this.handleImageUpload = this.handleImageUpload.bind(this); + this.uploadPinData = this.uploadPinData.bind(this); } renderTemplate() { + this.Parent.innerHTML = ''; const template = Handlebars.templates['editPin.hbs']; const titleInput = new InputComponent(this.Parent, { @@ -54,7 +57,9 @@ export default class EditPinComponent extends BaseComponent { PublishButton: publishButton.renderTemplate(), InEditMode: this.#editMode, PinBoard: this.#pin.PinBoard, - noImage: true, + Image: this.#pin.mediaUrl, + MediaUrl: this.#pin.mediaUrl, + BoardsList: boardsList.renderTemplate(), }); this.Parent.insertAdjacentHTML('beforeend', renderedTemplate); @@ -62,8 +67,10 @@ export default class EditPinComponent extends BaseComponent { '.editpin__image-container' ); const imageInput = this.Parent.querySelector('#editpin__image-input'); + const submitBtn = this.Parent.querySelector('.editpin__submit button'); imageContainer.addEventListener('click', this.handleImageClick); imageInput.addEventListener('change', this.handleImageUpload); + submitBtn.addEventListener('click', this.uploadPinData); } handleImageClick(event) { @@ -74,14 +81,55 @@ export default class EditPinComponent extends BaseComponent { async handleImageUpload(event) { event.preventDefault(); - const imageInput = event.target; + let imageInput = event.target; if (imageInput.files && imageInput.files.length > 0) { const file = imageInput.files[0]; const formData = new FormData(); - formData.append(this.filename, file); + formData.append('file', file); - const responce = await fetch; + const response = await fetch('http://localhost:8080/image/upload', { + method: 'POST', + body: formData, + }); + + const data = await response.json(); + + console.log(data['media-urls'][0]); + + this.#pin.mediaUrl = data['media-urls'][0].replace( + 'http://minio:9000', + 'http://localhost:9000' + ); + + console.log(this.#pin.mediaUrl); + + this.renderTemplate(); } } + + async uploadPinData(event) { + event.preventDefault(); + const TitleValue = this.Parent.querySelector('.editpin__title input').value; + const DescriptionValue = this.Parent.querySelector( + '.editpin__description input' + ).value; + const ImageUrl = this.#pin.mediaUrl; + const BoardID = 1; + + const requestBody = JSON.stringify({ + author_id: 1, + board_id: BoardID, + description: DescriptionValue, + title: TitleValue, + media_url: ImageUrl, + }); + console.log(requestBody); + + await fetch('http://localhost:8080/create-pin', { + method: 'POST', + body: requestBody, + }); + console.log('fetch done successfully'); + } } diff --git a/public/precompiled.js b/public/precompiled.js index f1d7b17..938b44a 100644 --- a/public/precompiled.js +++ b/public/precompiled.js @@ -19,7 +19,7 @@ templates['boards-list.hbs'] = template({"1":function(container,depth0,helpers,p return "
\n \n = 4.3.0"],"main":function(c + ((stack1 = ((helper = (helper = lookupProperty(helpers,"searchInput") || (depth0 != null ? lookupProperty(depth0,"searchInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"searchInput","hash":{},"data":data,"loc":{"start":{"line":3,"column":8},"end":{"line":3,"column":25}}}) : helper))) != null ? stack1 : "") + "\n
\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"boardsList") || (depth0 != null ? lookupProperty(depth0,"boardsList") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"boardsList","hash":{},"data":data,"loc":{"start":{"line":5,"column":12},"end":{"line":5,"column":28}}}) : helper))) != null ? stack1 : "") - + "\n
\n \n
\n
\n"; + + "\n
\n \n \n \n\n"; },"useData":true}); templates['details-menu.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, alias1=container.lambda, lookupProperty = container.lookupProperty || function(parent, propertyName) { @@ -498,9 +498,18 @@ templates['lookPin.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(c + " Followers

\n \n \n
\n 1 месяц назад\n
\n
\n Россия, Москва\n
\n \n
\n Готовы к будущему ? Красочный киберпанковский головной убор\n
\n
\n Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta\n sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia\n consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, \n quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam\n
\n \n
\n 11 комментариев\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n
\n
\n Chris Isaak\n
\n
\n Поздравляем с выдающимися решениями в области ИИ. В корпоративном секторе они создают волны.\n
\n
\n
\n
\n \n\n"; },"useData":true}); templates['editPin.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { - return "
\n \"checkphoto\"\n
\n
\n выберите файл или перетащите его сюда\n
\n"; + var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) { + if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { + return parent[propertyName]; + } + return undefined + }; + + return " \"Image\"\n"; },"3":function(container,depth0,helpers,partials,data) { - return " \"Image\"\n"; + return "
\n \"checkphoto\"\n
\n
\n выберите файл или перетащите его сюда\n
\n"; },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", lookupProperty = container.lookupProperty || function(parent, propertyName) { if (Object.prototype.hasOwnProperty.call(parent, propertyName)) { @@ -510,13 +519,15 @@ templates['editPin.hbs'] = template({"1":function(container,depth0,helpers,parti }; return "\n
\n
\n
\n" - + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"noImage") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":5,"column":12},"end":{"line":14,"column":19}}})) != null ? stack1 : "") + + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"Image") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":5,"column":12},"end":{"line":14,"column":19}}})) != null ? stack1 : "") + "
\n \n
\n
\n
\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"TitleInput") || (depth0 != null ? lookupProperty(depth0,"TitleInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"TitleInput","hash":{},"data":data,"loc":{"start":{"line":20,"column":12},"end":{"line":20,"column":28}}}) : helper))) != null ? stack1 : "") + "\n
\n
\n " + ((stack1 = ((helper = (helper = lookupProperty(helpers,"DescriptionInput") || (depth0 != null ? lookupProperty(depth0,"DescriptionInput") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"DescriptionInput","hash":{},"data":data,"loc":{"start":{"line":23,"column":12},"end":{"line":23,"column":34}}}) : helper))) != null ? stack1 : "") - + "\n
\n
\n
Выберите доску
\n
\n
\n " - + ((stack1 = ((helper = (helper = lookupProperty(helpers,"PublishButton") || (depth0 != null ? lookupProperty(depth0,"PublishButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"PublishButton","hash":{},"data":data,"loc":{"start":{"line":32,"column":12},"end":{"line":32,"column":31}}}) : helper))) != null ? stack1 : "") + + "\n
\n
\n
Выберите доску
\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"BoardsList") || (depth0 != null ? lookupProperty(depth0,"BoardsList") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"BoardsList","hash":{},"data":data,"loc":{"start":{"line":27,"column":12},"end":{"line":27,"column":28}}}) : helper))) != null ? stack1 : "") + + "\n
\n
\n " + + ((stack1 = ((helper = (helper = lookupProperty(helpers,"PublishButton") || (depth0 != null ? lookupProperty(depth0,"PublishButton") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"PublishButton","hash":{},"data":data,"loc":{"start":{"line":30,"column":12},"end":{"line":30,"column":31}}}) : helper))) != null ? stack1 : "") + "\n
\n
\n
\n\n\n\n\n\n\n\n\n"; },"useData":true}); templates['login.hbs'] = template({"1":function(container,depth0,helpers,partials,data) { From 4ec278ab852a90697b6911f864da9e2304be48a8 Mon Sep 17 00:00:00 2001 From: Ivan Ivashkin Date: Sun, 17 Nov 2024 22:24:00 +0300 Subject: [PATCH 10/14] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=87?= =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D0=B9=20=D0=B8=D0=B7=20git?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/components/input-text-area/input-text-area.css | 4 ++-- public/constants/config.js | 11 ----------- 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/public/components/input-text-area/input-text-area.css b/public/components/input-text-area/input-text-area.css index ec0c1f6..cb0e1a5 100644 --- a/public/components/input-text-area/input-text-area.css +++ b/public/components/input-text-area/input-text-area.css @@ -33,5 +33,5 @@ .input-area::placeholder { text-align: left; /* Центрирует текст placeholder */ - color: #888; /* Цвет текста для placeholder */ -} \ No newline at end of file + color: var(--input-label-color); /* Цвет текста для placeholder */ +} diff --git a/public/constants/config.js b/public/constants/config.js index 48d5d26..1fbb947 100644 --- a/public/constants/config.js +++ b/public/constants/config.js @@ -132,14 +132,3 @@ export const headerConfig = { disabled: false, }, }; - -// text_area: -// { -// icon: './assets/icons/pinset-logo.svg', -// placeHolder: 'Еуые', -// maxLength: 250, -// fontSize: '10px', -// minHeight: '100px', -// maxHeight: '200px', -// autoExpand: true, -// } \ No newline at end of file From d6a7155a56aa3f0ffbb7a567fed5b1613f9d677e Mon Sep 17 00:00:00 2001 From: Ivan Ivashkin Date: Sun, 17 Nov 2024 23:13:01 +0300 Subject: [PATCH 11/14] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BD=D0=B5?= =?UTF-8?q?=D1=81=20=D1=86=D0=B2=D0=B5=D1=82=D0=B0=20=D0=B2=20=D0=BA=D0=BE?= =?UTF-8?q?=D0=BD=D1=81=D1=82=D0=B0=D0=BD=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/components/input-text-area/input-text-area.css | 2 +- public/constants.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/public/components/input-text-area/input-text-area.css b/public/components/input-text-area/input-text-area.css index cb0e1a5..b262e49 100644 --- a/public/components/input-text-area/input-text-area.css +++ b/public/components/input-text-area/input-text-area.css @@ -25,7 +25,7 @@ resize: none; padding: 8px; font-size: 16px; - border: 1px solid #ccc; + border: 1px solid var(--input-border-color); border-radius: 4px; box-sizing: border-box; } diff --git a/public/constants.css b/public/constants.css index c63f42a..2cf423d 100644 --- a/public/constants.css +++ b/public/constants.css @@ -5,6 +5,7 @@ --project-primary-grey: grey; --input-label-color: #8f8f8f; + --input-border-color: #ccc; --input-caption-color: #505050; --input-caption-font-size: 12px; From 8227071c5e39df13d7f455dd807aa1d68a7658e9 Mon Sep 17 00:00:00 2001 From: Ivan Ivashkin Date: Sun, 17 Nov 2024 23:16:29 +0300 Subject: [PATCH 12/14] =?UTF-8?q?=D0=92=D0=B5=D1=80=D0=BD=D1=83=D0=BB=20?= =?UTF-8?q?=D0=B7=D0=B0=D0=BF=D0=B8=D1=81=D1=8C=20=D0=B2=20=D1=80=D0=BE?= =?UTF-8?q?=D0=B4=D0=B8=D1=82=D0=B5=D0=BB=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/components/input/input.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/components/input/input.js b/public/components/input/input.js index d4d6105..719c0cd 100644 --- a/public/components/input/input.js +++ b/public/components/input/input.js @@ -32,6 +32,11 @@ export class InputComponent extends BaseComponent { renderTemplate() { const template = Handlebars.templates['input.hbs']; const renderedTemplate = template(this.State); + const parent = this.Parent; + if (parent) { + parent.innerHTML += renderedTemplate; + + } return renderedTemplate; } From 84ad1e203c8b9daeeb7aa5d85710c178987f2fd1 Mon Sep 17 00:00:00 2001 From: Ivan Ivashkin Date: Sun, 17 Nov 2024 23:18:44 +0300 Subject: [PATCH 13/14] =?UTF-8?q?=D0=95=D1=89=D0=B5=20=D1=80=D0=B0=D0=B7?= =?UTF-8?q?=20=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=BA?= =?UTF-8?q?=D0=BE=D0=BD=D1=81=D1=82=D0=B0=D0=BD=D1=82=D1=8B=20=D1=86=D0=B2?= =?UTF-8?q?=D0=B5=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/pages/addPin/lookPin.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/pages/addPin/lookPin.css b/public/pages/addPin/lookPin.css index 737de9e..abebda4 100644 --- a/public/pages/addPin/lookPin.css +++ b/public/pages/addPin/lookPin.css @@ -21,7 +21,7 @@ html, body { gap: 0.5rem; background-color: var(--project-primary-white); border-radius: 5%; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 10px var(--project-primary-grey); } .lookpin__image{ From cfe864c1a41003cf5c0301c2c52a98c0adf5f371 Mon Sep 17 00:00:00 2001 From: Ivan Ivashkin Date: Mon, 18 Nov 2024 10:24:00 +0300 Subject: [PATCH 14/14] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=BE=D1=84=D0=BE=D1=80=D0=BC=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/pages/editPin/editPin.css | 13 ------------- public/pages/editPin/editPin.hbs | 1 + 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/public/pages/editPin/editPin.css b/public/pages/editPin/editPin.css index 85bcaa7..a503f2e 100644 --- a/public/pages/editPin/editPin.css +++ b/public/pages/editPin/editPin.css @@ -109,16 +109,3 @@ html, body { height: 100%; width: 100%; } - - - - - - - - - - - - - diff --git a/public/pages/editPin/editPin.hbs b/public/pages/editPin/editPin.hbs index 23a02a9..43453a1 100644 --- a/public/pages/editPin/editPin.hbs +++ b/public/pages/editPin/editPin.hbs @@ -22,6 +22,7 @@
{{{DescriptionInput}}}
+ {{!TODO after making boards}} {{!--
Выберите доску
{{{BoardsList}}}