frontend-park-mail-ru · rissenberg · May 27, 2024 · May 7, 2024 · May 7, 2024 · May 7, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="/static/icon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<body>
+<body id="body">
     <header id="navbar"></header>
     <main id="root" class="root"></main>
     <div id="error-block"></div>

diff --git a/source/app/Router.js b/source/app/Router.js
@@ -68,7 +68,6 @@ export class Router {
     async go(path) {
         path = this.slashDel(path);
         const url = decodeURI(this.root + path);
-        window.history.pushState(null, null, url);
         const args = [];
         const reqRoute = this.routes.find((route) => {
             route = route.path;
@@ -101,6 +100,8 @@ export class Router {
             this.currentPage = errorView;
             errorView.render();
         }
+        const ev = new Event('pageMovement');
+        dispatchEvent(ev);
     }
 
     /**

diff --git a/source/entity/avatar/ui/avatar.handlebars b/source/entity/avatar/ui/avatar.handlebars
@@ -1 +1 @@
-<img src="{{avatarUrl}}" alt="" class="avatar_size avatar_object_fit avatar_border-radius">
+<img src="{{avatarUrl}}" alt="" class="avatar_size avatar_object_fit avatar_border-radius avatar_display-block">
diff --git a/source/entity/avatar/ui/avatar.scss b/source/entity/avatar/ui/avatar.scss
@@ -13,4 +13,9 @@
 .avatar_size{
     width: 100%;
     height: 100%;
+    user-select: none;
+}
+
+.avatar_display-block{
+    display: block;
 }
diff --git a/source/features/boardList/index.js → source/entity/boardList/index.js b/source/features/boardList/index.js → source/entity/boardList/index.js
@@ -1,3 +1,3 @@
-import {BoardListView} from './ui/boardList.js';
-
-export {BoardListView};
+import {BoardListView} from './ui/boardList.js';
+
+export {BoardListView};
diff --git a/source/entity/boardList/ui/boardList.handlebars b/source/entity/boardList/ui/boardList.handlebars
@@ -0,0 +1,11 @@
+{{#if boardsNotEmpty}}
+    {{#each boards}}
+        <div class="board-item" id="board-{{this.board_id}}">
+            <div class="title">{{this.title}}</div>
+        </div>
+    {{/each}}
+{{else}}
+    <div class="board-list-message">
+        <span class="board-list__title description">Нет доступных досок</span>
+    </div>
+{{/if}}
diff --git a/source/entity/boardList/ui/boardList.js b/source/entity/boardList/ui/boardList.js
@@ -0,0 +1,26 @@
+import boardListTemplate from './boardList.handlebars';
+import './boardList.scss';
+import {View} from '../../../app/View.js';
+
+/** Board list window view */
+export class BoardListView extends View {
+    /**
+     * Default view constructor.
+     * @constructor
+     * @param {string} elemID - element ID
+     * @param {...any} args - args for constructor of view.
+     */
+    constructor(elemID, ...args) {
+        super(...args);
+        this.root = document.querySelector('#' + elemID);
+    }
+
+    /**
+    * Renders view by pin and boards.
+    * @param {object} boards - Boards entity.
+    * @param {object} pin - Pin entity.
+    */
+    render(boards) {
+        this.root.innerHTML = boardListTemplate({boards, boardsNotEmpty: boards?.length > 0});
+    }
+}
diff --git a/source/features/boardList/ui/boardList.scss → source/entity/boardList/ui/boardList.scss b/source/features/boardList/ui/boardList.scss → source/entity/boardList/ui/boardList.scss
@@ -9,3 +9,8 @@
 .board-item:hover{
     cursor: pointer;
 }
+
+.board-list-message{
+    display: flex;
+    justify-content: center;
+}
diff --git a/source/entity/boardPin/ui/boardPin.handlebars b/source/entity/boardPin/ui/boardPin.handlebars
@@ -1,5 +1,5 @@
 <div class="feed-item_100-size">
-    <img src="{{ pin.content_url }}" alt="" class="pin" id="pin-{{ pin.pin_id }}">
+    <img src="{{ pin.content_url }}" alt="" class="pin" id="pin-{{pin.pin_id}}">
     {{#if owner}}
         <button class="button primary-button board-pin__button" id="pin-del-{{pin.pin_id}}">Удалить</button>
     {{/if}}

diff --git a/source/entity/boardPin/ui/boardPin.js b/source/entity/boardPin/ui/boardPin.js
@@ -40,15 +40,17 @@ export class BoardPinFeedView extends View {
             this.onClick(pin.pin_id);
         });
 
-        const delBtn = document.querySelector('#pin-del-' + pin.pin_id);
-        delBtn.addEventListener('click', async (event) => {
-            event.preventDefault();
-            const api = new API('/boards/' + board.board_id + '/pins/' + pin.pin_id);
-            const response = await api.delete();
-            if (response.code) {
-                return;
-            }
-            this.root.remove();
-        });
+        if (board.is_owner) {
+            const delBtn = document.querySelector('#pin-del-' + pin.pin_id);
+            delBtn.addEventListener('click', async (event) => {
+                event.preventDefault();
+                const api = new API('/boards/' + board.board_id + '/pins/' + pin.pin_id);
+                const response = await api.delete();
+                if (response.code) {
+                    return;
+                }
+                this.root.remove();
+            });
+        }
     }
 }
diff --git a/source/entity/chatListItem/ui/chatListItem.handlebars b/source/entity/chatListItem/ui/chatListItem.handlebars
@@ -0,0 +1,8 @@
+<div class="chat-list-item" id="chat-list-item-{{chat.user.user_id}}">
+    <div class="avatar chat-list-avatar" id="chat-list-avatar">
+
+    </div>
+    <div class="chat-list-item-title description">
+        {{chat.user.nickname}}
+    </div>
+</div>
diff --git a/source/entity/chatListItem/ui/chatListItem.js b/source/entity/chatListItem/ui/chatListItem.js
@@ -0,0 +1,34 @@
+import chatListTemplate from './chatListItem.handlebars';
+import './chatListItem.scss';
+import {View} from '../../../app/View.js';
+import {Avatar} from '../../avatar/ui/avatar.js';
+import {API} from '../../../shared/api/API.js';
+import {ErrorWindowView} from '../../errorWindow/ui/errorWindow.js';
+import {errors} from '../../../shared/config.js';
+
+export class ChatListItemView extends View {
+    constructor(root, ...args) {
+        super(...args);
+        this.root = root;
+    }
+
+    render(chat, url) {
+        this.root.innerHTML = chatListTemplate({chat});
+        const chatListItem = document.querySelector('#chat-list-item-' + chat.user.user_id);
+        chatListItem.addEventListener('click', async (event) => {
+            event.preventDefault();
+            const api = new API('/messages/' + chat.user.user_id);
+            const response = await api.post(JSON.stringify({'text': url}));
+            if (response.code) {
+                const error = new ErrorWindowView();
+                error.render(errors['oops']);
+                return;
+            }
+            const ev = new Event('modalClose');
+            dispatchEvent(ev);
+        });
+
+        const avatar = new Avatar('chat-list-avatar', this.root);
+        avatar.render(chat.user.avatar_url);
+    }
+}
diff --git a/source/entity/chatListItem/ui/chatListItem.scss b/source/entity/chatListItem/ui/chatListItem.scss
@@ -0,0 +1,15 @@
+.chat-list-item{
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  gap: 10px;
+  align-items: center;
+  text-align: start;
+  width: 300px;
+  min-width: 100px;
+}
+
+@media screen and (max-width: 1024px) {
+  .chat-list-item {
+    width: 50vw;
+  }
+}
diff --git a/source/entity/comment/ui/comment.handlebars b/source/entity/comment/ui/comment.handlebars
@@ -0,0 +1,9 @@
+<div class="comment-avatar" id="comment-avatar">
+
+</div>
+<div class="comment-nickname annotation">
+    {{comment.user.nickname}}
+</div>
+<div class="comment-content annotation">
+    {{comment.value}}
+</div>
diff --git a/source/entity/comment/ui/comment.js b/source/entity/comment/ui/comment.js
@@ -0,0 +1,23 @@
+import commentView from './comment.handlebars';
+import './comment.scss';
+import {View} from '../../../app/View.js';
+import {Avatar} from '../../avatar/ui/avatar.js';
+
+export class CommentView extends View {
+    constructor(rootID, ...args) {
+        super(...args);
+        this.root = document.querySelector(`#${rootID}`);
+    }
+
+    render(comment, addNew = false) {
+        const commentElem = document.createElement('div');
+        commentElem.classList.add('comment-block');
+        commentElem.innerHTML = commentView({comment});
+
+        const avatar = new Avatar('comment-avatar', commentElem);
+        avatar.render(comment.user.avatar_url);
+
+        const pos = addNew ? 'afterbegin' : 'beforeend';
+        this.root.insertAdjacentElement(pos, commentElem);
+    }
+}
diff --git a/source/entity/comment/ui/comment.scss b/source/entity/comment/ui/comment.scss
@@ -0,0 +1,31 @@
+@use '../../../shared/styles/variables';
+
+.comment-avatar{
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  width: 30px;
+  height: 30px;
+}
+
+.comment-nickname{
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+}
+
+.comment-content{
+  grid-row: 2 / 3;
+  grid-column: 1 / 3;
+  padding-left: 5px;
+}
+
+.comment-block{
+  width: calc(100% - 10px);
+  height: fit-content;
+  display: grid;
+  grid-template-columns: 30px 1fr;
+  grid-template-rows: 30px 1fr;
+  gap: 10px;
+  border-top: variables.$border-color 1px solid;
+  align-items: center;
+  padding: 10px 5px 0 5px;
+}
diff --git a/source/entity/errorWindow/ui/errorWindow.handlebars b/source/entity/errorWindow/ui/errorWindow.handlebars
@@ -3,4 +3,7 @@
     <div class="error-window__cancel" id="error-cancel">
         <img src="/static/plus.svg" alt="" class="cancel-icon">
     </div>
+    <div class="time-line" id="time-line">
+
+    </div>
 </div>
diff --git a/source/entity/errorWindow/ui/errorWindow.js b/source/entity/errorWindow/ui/errorWindow.js
@@ -1,6 +1,7 @@
 import {View} from '../../../app/View.js';
 import errorViewTemplate from './errorWindow.handlebars';
 import './errorWindow.scss';
+import {errors} from '../../../shared/config.js';
 
 /** Error window view */
 export class ErrorWindowView extends View {
@@ -17,15 +18,28 @@ export class ErrorWindowView extends View {
 
     /**
     * Renders view by error message.
-    * @param {message} message - Error message entity.
+    * @param {string} message - Error message entity.
     */
     render(message) {
+        if (!message) {
+            message = errors['oops'];
+        }
         this.root.innerHTML = errorViewTemplate({message});
 
+        const errorTimeLine = this.root.querySelector('#time-line');
+
+        errorTimeLine.classList.add('active');
+
+        const time1 = setTimeout(() => {
+            this.root.innerHTML = null;
+            errorTimeLine.classList.remove('active');
+        }, 5000);
+
         const cancelButton = document.querySelector('#error-cancel');
         cancelButton.addEventListener('click', (event) => {
             event.preventDefault();
             this.root.innerHTML = null;
-        }, {once: true});
+            clearTimeout(time1);
+        }, {once: true});
     }
 }
diff --git a/source/entity/errorWindow/ui/errorWindow.scss b/source/entity/errorWindow/ui/errorWindow.scss
@@ -3,12 +3,13 @@
 .error-window {
     min-width: 400px;
     min-height: 100px;
-    border: variables.$error-color 3px solid;
+    border: variables.$error-color 1px solid;
     border-radius: variables.$element-border-radius;
     background-color: variables.$background-color;
     position: fixed;
     inset: auto 20px 60px auto;
     padding: 20px 35px 20px 20px;
+    overflow: hidden;
 }
 
 .error-window__cancel{
@@ -30,6 +31,35 @@
     white-space: pre-line;
 }
 
+.time-line:before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: 15px;
+    width: 100%;
+    background-color: variables.$error-color;
+}
+
+.time-line.active:before{
+    animation: time-line 5s linear forwards;
+}
+
+@keyframes time-line {
+    100% {
+        right: 100%;
+    }
+}
+
+//.time-line{
+//    position: absolute;
+//    inset: auto 0 0 0;
+//    width: 100%;
+//    height: 20px;
+//    border-radius: 0 0 20px 20px;
+//    justify-content: left;
+//}
+
 @media screen and (max-width: 430px) {
     .error-window{
         min-width: 100px;

diff --git a/source/entity/inputField/ui/inputField.handlebars b/source/entity/inputField/ui/inputField.handlebars
@@ -1,8 +1,9 @@
 <label for="{{field.inputField}}">{{field.label}}</label>
-<input type="{{field.type}}" class="input" id="{{field.inputField}}" placeholder="{{field.placeholder}}" value="{{field.value}}">
+<input type="{{field.type}}" class="input" id="{{field.inputField}}" placeholder="{{field.placeholder}}" value="{{field.value}}" {{#if field.disabled}}disabled{{/if}}>
 {{#if isPassword}}
     <div class="eye" id="eye">
-        <img src="/static/eye.svg" alt="" class="eye-image">
+        <img src="/static/eye.svg" alt="" class="eye-image" id="eye-open">
+        <img src="/static/eye_closed.svg" alt="" class="eye-image-close eye__visibility-hidden" id="eye-closed">
     </div>
 {{/if}}
 <div class="input_error" id="{{field.errContent}}"></div>