Har 145 add notifications

source/entity/chatListItem/ui/chatListItem.scss

@@ -8,6 +8,11 @@
   min-width: 100px;
 }
 
+.chat-list-avatar{
+  width: 50px;
+  height: 50px;
+}
+
 @media screen and (max-width: 1024px) {
   .chat-list-item {
     width: 50vw;

source/entity/notification/ui/notification.js

@@ -1,6 +1,7 @@
 import notificationTemplate from './notification.handlebars';
 import './notification.scss';
 import {View} from '../../../app/View.js';
+import {API} from '../../../shared/api/API.js';
 
 export class NotificationView extends View {
     constructor(root, ...args) {
@@ -30,10 +31,15 @@ export class NotificationView extends View {
         element.innerHTML = notificationTemplate({content,
             time: time.toLocaleString('ru', options)});
 
-        this.root.insertAdjacentElement('afterbegin', element);
+        if (!notification?.delete) {
+            this.root.insertAdjacentElement('afterbegin', element);
+        }
 
-        this.root.addEventListener('click', (event) => {
+        this.root.addEventListener('click', async (event) => {
             event.preventDefault();
+            const api = new API('/notifications/read/' + notification.notification_id);
+            await api.post({});
+
             switch (notification?.type) {
             case 'subscription':
                 history.pushState(null, null, '/profile/' +
@@ -46,6 +52,9 @@ export class NotificationView extends View {
                 history.pushState(null, null, '/pin/' + notification?.pin?.pin_id);
                 break;
             }
+
+            this.root.remove();
+            notification.delete = true;
         });
     }
 }

source/entity/pin/ui/pin.handlebars

@@ -1 +1 @@
-<img src="{{ pin.content_url }}" alt="" class="pin" id="pin-{{ pin.pin_id }}">
+<img width="{{pin.content_width}}" height="{{pin.content_height}}" src="{{ pin.content_url }}" alt="" class="pin" id="pin-{{ pin.pin_id }}">

source/entity/pin/ui/pin.js

@@ -27,11 +27,33 @@ export class PinFeedView extends View {
     * @param {object} pin - Pin entity.
     */
     render(pin) {
-        this.root.innerHTML = pinFeedTemplate({pin});
-        const eventRoot = document.querySelector('#pin-' + pin.pin_id);
-        eventRoot.addEventListener('click', (event) => {
-            event.preventDefault();
-            this.onClick(pin.pin_id);
-        });
+        const renderPinFunc = () => {
+            const width = window.innerWidth;
+            let pinWidth = 250;
+            if (width < 1024){
+                if (width > 430){
+                    pinWidth = 200;
+                } else {
+                    pinWidth = 150;
+                }
+            }
+            if (this.currentWidth !== pinWidth){
+                this.currentWidth = pinWidth;
+
+                const ratio = pinWidth / pin.content_width;
+                pin.content_width *= ratio;
+                pin.content_height *= ratio;
+                this.root.innerHTML = pinFeedTemplate({pin});
+                const eventRoot = document.querySelector('#pin-' + pin.pin_id);
+                eventRoot.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    this.onClick(pin.pin_id);
+                });
+            }
+        }
+
+        renderPinFunc();
+
+        addEventListener('resize', renderPinFunc);
     }
 }

source/features/listBlock/ui/listBlock.js

@@ -9,18 +9,6 @@ export class ListBlockView extends View {
         this.id = 0;
     }
 
-    addRender(objects, RenderEntity, ...args) {
-        this.root.innerHTML += listBlockTemplate({objects, index: this.id});
-        const prefix = '#list-item-';
-        for (let i = this.id; i < this.id + objects.length; ++i) {
-            const root = document.querySelector(prefix + i);
-            console.log(root);
-
-            const entity = new RenderEntity(root);
-            entity.render(objects[i], ...args);
-        }
-        this.id = this.id + objects.length;
-    }
     render(objects, RenderEntity, ...args) {
         this.root.innerHTML = listBlockTemplate({objects});
         const prefix = '#list-item-';

source/features/messagesFeed/ui/messagesFeed.js

@@ -39,7 +39,7 @@ export class MessagesFeedView extends View {
     }
 
     async render(messages) {
-        if (!messages?.isEmpty) {
+        if (messages) {
             const user = localStorageGetValue('user');
             for (let i = 0; i < messages.length; i++) {
                 const message = messages[i];

source/features/pinControllerBlock/ui/pinControllerBlock.js

@@ -95,7 +95,6 @@ export class PinControllerBlock extends View {
                     return;
                 }
 
-                console.log(response);
                 const comment = {
                     value: message.value,
                     user: user,

source/index.js

@@ -1,7 +1,7 @@
 import {App} from './app/App.js';
 
 if (navigator.serviceWorker) {
-    await navigator.serviceWorker.register('/serviceWorker.js', {scope: '/'});
+    // await navigator.serviceWorker.register('/serviceWorker.js', {scope: '/'});
 }
 
 const app = new App();

source/pages/chat/ui/chat.js

@@ -46,10 +46,16 @@ export class ChatView extends View {
                 const userResponse = await userAPI.get();
                 const user = userResponse.body.user;
 
+                const listBlock = document.querySelector('#chat-list-block');
+                const windowBlock = document.querySelector('#chat-window');
+
+                listBlock.classList.replace('window-on-top', 'window-on-bottom');
+                windowBlock.classList.replace('window-on-bottom', 'window-on-top');
+
                 const chatWindow = new ChatWindow('chat-window');
                 chatWindow.render({user});
             };
-            modalWindow.render(ListBlockView, response.body, UserListItemView, eventFunc);
+            modalWindow.render(ListBlockView, response.body.users, UserListItemView, eventFunc);
         });
     }
 }

source/pages/feed/ui/FeedView.js

@@ -10,6 +10,7 @@ export class FeedView extends View {
     constructor(...args) {
         super(...args);
         this.root = document.querySelector('#root');
+        this.user = localStorageGetValue('user');
     }
 
     async renderHomeFeed() {
@@ -19,6 +20,39 @@ export class FeedView extends View {
         const pins = response.body.pins;
         const feed = new FeedWindowView('feed-block');
         feed.render(pins);
+
+        // const feedInnerBlock = document.querySelector('#feed');
+        //         feedInnerBlock.style.width = elemWidth + "px";
+        // const widthRecount = () => {
+        //     const width = window.innerWidth;
+        //     let pinWidth = 250;
+        //     let columnsCount = 5;
+        //     if (width < 1024) {
+        //         if (width > 430) {
+        //             pinWidth = 200;
+        //             columnsCount = 5;
+        //         } else {
+        //             pinWidth = 150;
+        //             columnsCount = 2;
+        //         }
+        //     }
+        //
+        //     if (this.currentWidth !== pinWidth) {
+        //         this.currentWidth = pinWidth;
+        //
+        //         let elemWidth = columnsCount * pinWidth + (columnsCount - 1) * 20;
+        //
+        //         const feedInnerBlock = document.querySelector('#feed');
+        //         feedInnerBlock.style.width = elemWidth + "px";
+        //     }
+        // }
+        //
+        // widthRecount();
+        //
+        // addEventListener('resize', (event) => {
+        //     event.preventDefault();
+        //     widthRecount();
+        // })
     }
 
     async renderSubsFeed() {
@@ -31,8 +65,11 @@ export class FeedView extends View {
     }
 
     async render() {
-        const navbar = new NavbarView();
-        navbar.render();
+        if (localStorageGetValue('user') !== this.user) {
+            const navbar = new NavbarView();
+            navbar.render();
+            this.user = localStorageGetValue('user');
+        }
 
         const user = localStorageGetValue('user');
         this.root.innerHTML = feedViewTemplate({user});

source/pages/feed/ui/FeedView.scss

@@ -0,0 +1,4 @@
+//.feed-block{
+//  display: flex;
+//  justify-content: center;
+//}

source/pages/profile/ui/profile.js

@@ -120,16 +120,20 @@ export class Profile extends View {
             });
         }
 
+        const feedButton = document.querySelector('#profile-content-pins');
         const boardButton = document.querySelector('#profile-content-boards');
         boardButton.addEventListener('click', (event) =>{
             event.preventDefault();
             profileFeed.renderBoards(user);
+            boardButton.classList.replace('secondary-button', 'primary-button');
+            feedButton.classList.replace('primary-button', 'secondary-button');
         });
 
-        const feedButton = document.querySelector('#profile-content-pins');
         feedButton.addEventListener('click', (event) => {
             event.preventDefault();
             profileFeed.renderFeed(user);
+            feedButton.classList.replace('secondary-button', 'primary-button');
+            boardButton.classList.replace('primary-button', 'secondary-button');
         });
     };
 }

source/shared/styles/App.scss

@@ -75,6 +75,7 @@ body.modal-open{
 .link-text:hover{
     cursor: pointer;
     color: variables.$font-link-selected-color;
+    text-decoration: underline;
 }
 
 .text-center{

source/shared/styles/variables.scss

@@ -1,13 +1,13 @@
 $background-color: #F6F6F6;
 $primary-button-color: #FF8E6E;
 //$secondary-button-color: #FFBB91;
-$secondary-button-color: #e3deda;
+$secondary-button-color: #DFDFDF;
 $window-color: #D5D5D5;
 $search-color: #777777;
 $select-color: #EECCCC;
 $select-secondary-color: #cdcdcd;
 $error-color: #ff4545;
-$success-color: #35a445;
+$success-color: $window-color;
 $font-color: #111111;
 $border-color: #CDCDCD;
 $input-border-radius: 12px;

source/widgets/feedWindow/ui/feedWindow.scss

@@ -30,10 +30,12 @@
 }
 
 .feed{
+  align-items: center;
+  align-content: center;
   height: auto;
   width: auto;
   margin: 30px 50px;
-  columns: 250px 5;
+  columns: 250px;
 }
 
 
@@ -42,11 +44,11 @@
   $width: calc(10px + 35vw);
 
   .feed_item{
-    width: $width;
+    width: 150px;
   }
 
   .feed {
-    columns: $width 2;
+    columns: 150px;
     margin: 30px;
   }
 }
@@ -55,11 +57,11 @@
   $width: calc(20px + 25vw);
 
   .feed_item{
-    width: $width;
+    width: 200px;
   }
 
   .feed {
-    columns: $width 3;
+    columns: 200px;
     margin: 30px;
   }
 }

source/widgets/modalWindow/ui/modalWindow.scss

@@ -31,3 +31,14 @@
   max-height: 50dvh;
   overflow-y: scroll;
 }
+
+.modal-list::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+
+.modal-list::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .5);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+}

source/widgets/navbar/ui/navbar.handlebars

@@ -18,8 +18,15 @@
                     <div class="navbar-icon button secondary-button" id="navbar-notification-button">
                         <img src="/static/notification.svg" alt="" class="navbar-notification-button__icon">
                     </div>
-                    <div class="navbar-notification-list navbar-popup-menu_closed" id="navbar-notification-list">
-                        <span class="text-center description" id="notifications-none">Уведомлений нет</span>
+                    <div class="navbar-notification-popup navbar-popup-menu_closed" id="navbar-notification-popup">
+                        <div class="navbar-notification-control-menu">
+                            <span class="link-text" id="navbar-notification-clear-button">
+                                Очистить
+                            </span>
+                        </div>
+                        <div class="navbar-notification__list" id="navbar-notification__list">
+                            <span class="text-center description" id="notifications-none">Уведомлений нет</span>
+                        </div>
                     </div>
                 </div>
                 <div class="navbar-icon button secondary-button" id="navbar__chat-button">

source/widgets/navbar/ui/navbar.js

@@ -98,16 +98,14 @@ export class NavbarView extends View {
             const api = new API('/notifications');
             const response = await api.get();
 
-            console.log(response);
-
             let notifications = null;
             if (!response?.code) {
                 notifications = response.body.notifications;
             }
 
-            const notificationList = document.querySelector('#navbar-notification-list');
+            const notificationList = document.querySelector('#navbar-notification-popup');
             const notificationButton = document.querySelector('#navbar-notification-button');
-            const listBlock = new ListBlockView('navbar-notification-list');
+            const listBlock = new ListBlockView('navbar-notification__list');
 
             notificationButton.addEventListener('click', (event) => {
                 event.preventDefault();
@@ -118,6 +116,17 @@ export class NavbarView extends View {
                 notificationList.classList.toggle('navbar-popup-menu_closed');
             });
 
+            const readAllNotificationButton = document.querySelector('#navbar-notification-clear-button');
+            readAllNotificationButton.addEventListener('click', async (event) => {
+                event.preventDefault();
+                if (notifications) {
+                    const api = new API('/notifications/read/all');
+                    await api.post({});
+                    listBlock.root.innerHTML = `<span class="text-center description" id="notifications-none">Уведомлений нет</span>`
+                    notifications = null;
+                }
+            })
+
             WebSocketService.register('NOTIFICATION_SUBSCRIPTION', (payload) => {
                 payload.type = 'subscription';
                 try {