merge with main

src/components/header/header.css

@@ -0,0 +1,56 @@
+.header__container {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.header {
+  width: 100%;
+  position: sticky;
+  top: 0;
+  background-color: #1f1f1f;
+}
+
+.header__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 224px 0px 192px;
+}
+
+.header__img_logo {
+  width: auto;
+  height: 41px;
+  vertical-align: text-bottom;
+}
+
+.header__a_logo {
+  color: #f1f1f1;
+  text-decoration: none;
+  font-size: 41px;
+  font-weight: 400;
+  background-color: #1f1f1f;
+  border: none;
+}
+
+.header__a_logo:hover {
+  opacity: 0.5;
+}
+
+.header__a_navlink {
+  color: #f1f1f1;
+  text-decoration: none;
+  font-size: 25px;
+	float: left;
+  display: block;
+  text-align: center;
+  margin-left: 45px;
+  padding: 16px 16px;
+}
+
+.header__a_navlink:hover {
+  opacity: 0.5;
+}
+
+.active {
+  border-bottom: 3px solid #f1f1f1;
+}

src/components/header/header.hbs

@@ -0,0 +1,24 @@
+<div class="header__container">
+  <div class="header__row">
+    <div class="header__left-block">
+      <img class="header__img_logo" src="/images/icons/logoLight.svg">
+      <a class="header__a_logo link" 
+        id="header_logo_link" 
+        {{#if isAuthorized}} 
+        href="/"
+        {{else}}
+        href="/login"
+        {{/if}}>
+        NovaMusic
+        </a>
+    </div>
+    <div class="header__right-block" id="header_login_menu">
+      {{#if isAuthorized}}
+      <a class="header__a_navlink" id="header_logout_link" href="/login">Выход</a>
+      {{else}}
+      <a class="header__a_navlink link navlink" id="header_login_link" href="/login">Войти</a>
+      <a class="header__a_navlink link navlink" id="header_signup_link" href="/signup">Регистрация</a>
+      {{/if}}
+    </div>
+  </div>
+</div>

src/components/header/header.js

@@ -0,0 +1,132 @@
+import { View } from "../../view.js";
+import { Ajax } from "../../modules/ajax.js";
+import { bindLinkClickEvents } from "../../modules/linksHandling.js";
+// import { getCurrentUser, removeCurrentUser } from "../../modules/user.js";
+import { API_URL } from "../../app/config.js";
+
+export class HeaderView extends View {
+  /**
+   * Initializes the HeaderView instance with the given router.
+   * 
+   * @param {Router} router - The router instance used for navigation.
+   */
+  constructor(router) {
+    super(router);
+    this.root = document.querySelector("#header");
+  }
+
+  async render() {
+    // const user = getCurrentUser();
+    const response = await this.isAuthorizedRequest();
+    const isAuthorized = this.handleIsAuthorizedResponse(response);
+    const html = this.template(isAuthorized);
+    this.root.innerHTML = html;
+
+    this.switchActiveNavlink();
+    this.bindEvents();
+  }
+
+  /**
+   * Generates html template for header using Handlebars
+   *
+   * @param {Object} user - current user object
+   * @returns {string} rendered html string for header
+   */
+  template(isAuthorized) {
+    const template = Handlebars.templates["header.hbs"];
+    return template({ isAuthorized });
+  }
+
+  /**
+   * Binds event listeners to links
+   *
+   * @private
+   */
+  bindEvents() {
+    const links = document.querySelectorAll(".link");
+    const logoutLink = this.root.querySelector("#header_logout_link");
+
+    bindLinkClickEvents(links, this.linkHandler.bind(this));
+
+    if (logoutLink) {
+      this.addEventListener(
+        logoutLink,
+        "click",
+        this.logoutHandler.bind(this),
+      );
+    }
+  }
+
+  /**
+   * Appends class active to current navlink
+   *
+   * @private
+   */
+  switchActiveNavlink() {
+    let navlinks = document.querySelectorAll(".navlink")
+    navlinks.forEach((navlink)=>{
+      if (navlink.getAttribute("href") == window.location.pathname) navlink.classList.add("active")  
+    })
+  }
+
+  /**
+   * Handles navlinks click event
+   *
+   * @param {Event} event - click event
+   * @param {String} href - href to go to
+   */
+  linkHandler(event, href) {
+    event.preventDefault();
+    this.router.goTo(href);
+  }
+
+  /**
+   * Handles logout link click event
+   *
+   * @param {Event} event - click event
+   * @returns {Promise<void>} promise that resolves when the logout process is complete
+   */
+  async logoutHandler(event) {
+    event.preventDefault();
+    const url = `${API_URL}/api/v1/auth/logout`;
+    const response = await Ajax.post(url);
+
+    if (response.status === 200) {
+      // removeCurrentUser();
+      this.router.renderLayout();
+    } else {
+      console.error("logout failed:", response.body);
+    }
+
+    this.router.goTo("/login");
+  }
+
+  /**
+   * Sends authorization request to the server using user data
+   *
+   * @returns {Promise<Object>} response from the server
+   */
+  async isAuthorizedRequest() {
+    const url = `${API_URL}/api/v1/auth/health`;
+    return await Ajax.get(url);
+  }
+
+  /**
+   * Handles server response from authorization request
+   *
+   * @param {Object} response - server response from login request
+   * @private
+   */
+  handleIsAuthorizedResponse(response) {
+    switch (response.status) {
+      case 200:
+        return true;
+      case 401:
+        return false;
+      default:
+        console.error('Ошибка при проверке авторизации:', response.body.error);
+        return;
+    }
+  }
+}
+

src/components/playlist/playlist.css

@@ -0,0 +1,105 @@
+.playlist__container {
+	max-width: 1280px;
+	margin: 0 auto;
+}
+
+.playlist__block {
+	margin: 0 auto;
+	padding: 10px;
+	background-color: rgba(241.39, 241.39, 241.39, 0.1);
+	border-radius: 9px;
+	width: 80%;
+	margin-top: 12px;
+}
+
+.playlist__player_btn {
+	display: block;
+	margin: 0 auto;
+	background-color: transparent;
+	border: none;
+}
+
+/* .playlist__player_btn:hover {
+	opacity: 0.8;
+} */
+
+.playlist__title {
+	margin-top: 10px;
+	color: #f1f1f1;
+	font-size: 41px;
+	font-weight: 400;
+	text-align: center;
+}
+
+.playlist__info {
+	color: #f1f1f1;
+	font-size: 25px;
+	font-weight: 400;
+	text-align: center;
+}
+
+.playlist__recommend_text {
+	color: #f1f1f1;
+	font-size: 24px;
+	font-weight: 400;
+}
+
+.playlist__item {
+	display: flex;
+	justify-content: space-between;
+	padding: 10px;
+	margin: 5px 0;
+	border: 1px solid #ccc;
+	border-radius: 10px;
+	background-color: #f9f9f9;
+}
+
+.playlist__item_left {
+	display: flex;
+	align-items: center;
+}
+
+.playlist__item_right {
+	display: flex;
+	flex-direction: row;
+	gap: 10px;
+	justify-content: center;
+	align-items: center;
+}
+
+.playlist__item_img {
+	width: 90px;
+	height: 90px;
+}
+
+.playlist__item_info {
+	margin-left: 20px;
+}
+
+.playlist__item_name {
+	color: #1f1f1f;
+	font-size: 22px;
+	font-weight: 400;
+}
+
+.playlist__item_artist {
+	margin-top: 5px;
+	color: #636363;
+	font-size: 20px;
+	font-weight: 400;
+}
+
+/* WAS BEFORE */
+.track-name {
+	font-size: 18px;
+	font-weight: bold;
+	color: #333;
+	display: block;
+}
+
+.artist-name {
+	font-size: 16px;
+	color: #666;
+	margin-top: 5px;
+}
+

src/components/playlist/playlist.hbs

@@ -0,0 +1,29 @@
+<div class="playlist">
+    <div class="playlist__container">
+        <div class="playlist__block">
+            <button class="playlist__player_btn" disabled><img src="/images/icons/play.svg"></button>
+            <h1 class="playlist__title">NovaWave</h1>
+            <div class="playlist__info">Слушать динамическую подборку</div>
+        </div>
+
+        <div class="playlist__block">
+            <div class="playlist__recommend_text">Подборка</div>
+            {{#each items}}
+            <div class="playlist__item">
+                <div class="playlist__item_left">
+                    <img class="playlist__item_img" src="/images/{{this.image}}">
+                    <div class="playlist__item_info">
+                        <div class="playlist__item_name">{{this.name}} </div>
+                        <div class="playlist__item_artist">{{this.artist}} </div>
+                    </div>
+                </div> 
+                <div class="playlist__item_right">
+                    {{ this.duration }}
+                    <img src="/images/icons/music.svg">
+                </div>
+            </div>
+            {{/each}}
+        </div>
+    </div>
+</div>
+