added v-for for all template in develop-component

luckydiamond/src/assets/css/ComponentsStyles/developer.css

@@ -48,7 +48,7 @@
 .developer-card__socials {
     justify-content: space-around;
     display: flex;
-    margin: 95px 0 11px 27px;
+    margin: 35% 0 11px 27px;
     
 }
 

luckydiamond/src/assets/js/chat/ChatLogic.js

@@ -1,66 +1,66 @@
-import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
-import { eventBus } from "@/main";
-import {
-    GetCookie
-} from "@/assets/js/storage/CookieStorage.js";
-
-let webSocket;
-
-export function ConnectToChat() {
-    try {
-        webSocket = new WebSocket(BackendWebSocketUrl);
-
-        webSocket.onopen = function () {
-            console.log('Connection established');
-        };
-
-        webSocket.onmessage = function (event) {
-
-            const dataObject = JSON.parse(event.data);
-
-            if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
-                eventBus.emit('dataChat', event.data);
-            }
-
-            console.log('Message from Server:', event.data);
-        };
-
-        webSocket.onclose = function () {
-
-            webSocket = new WebSocket(BackendWebSocketUrl);
-
-            console.log('Connection closed and reconnected');
-        };
-
-        webSocket.onerror = function (event) {
-            console.error('WebSocket Error:', event);
-        };
-    } catch (error) {
-        console.error('Error in ConnectToChat:', error);
-    }
-}
-
-export function SendMessageToChat(message) {
-    try {
-
-        if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
-            return;
-        }
-
-        const userCredentials = {
-            SearchToken: GetCookie("SearchToken"),
-            AUTHTOKEN: GetCookie("AUTHTOKEN")
-        };
-
-        const messageObject = {
-            UserCredentials: userCredentials,
-            Message: message,
-            MessageType: "Chat"
-        };
-
-        webSocket.send(JSON.stringify(messageObject));
-
-    } catch (error) {
-        console.error('Error in ConnectToChat:', error);
-    }
-}
+// import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
+// import { eventBus } from "@/main";
+// import {
+//     GetCookie
+// } from "@/assets/js/storage/CookieStorage.js";
+//
+// let webSocket;
+//
+// export function ConnectToChat() {
+//     try {
+//         webSocket = new WebSocket(BackendWebSocketUrl);
+//
+//         webSocket.onopen = function () {
+//             console.log('Connection established');
+//         };
+//
+//         webSocket.onmessage = function (event) {
+//
+//             const dataObject = JSON.parse(event.data);
+//
+//             if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
+//                 eventBus.emit('dataChat', event.data);
+//             }
+//
+//             console.log('Message from Server:', event.data);
+//         };
+//
+//         webSocket.onclose = function () {
+//
+//             webSocket = new WebSocket(BackendWebSocketUrl);
+//
+//             console.log('Connection closed and reconnected');
+//         };
+//
+//         webSocket.onerror = function (event) {
+//             console.error('WebSocket Error:', event);
+//         };
+//     } catch (error) {
+//         console.error('Error in ConnectToChat:', error);
+//     }
+// }
+//
+// export function SendMessageToChat(message) {
+//     try {
+//
+//         if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
+//             return;
+//         }
+//
+//         const userCredentials = {
+//             SearchToken: GetCookie("SearchToken"),
+//             AUTHTOKEN: GetCookie("AUTHTOKEN")
+//         };
+//
+//         const messageObject = {
+//             UserCredentials: userCredentials,
+//             Message: message,
+//             MessageType: "Chat"
+//         };
+//
+//         webSocket.send(JSON.stringify(messageObject));
+//
+//     } catch (error) {
+//         console.error('Error in ConnectToChat:', error);
+//     }
+// }

luckydiamond/src/components/DeveloperComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <ul>
-    <li v-for="developer in (DevelopersOptions)" :key="developer.id">
-      <div class="developer-card__content" v-if="developer.id <= 4">
+    <li v-for="developer in DevelopersOptions" :key="developer.id">
+      <div class="developer-card__content" v-if="developer.id > 4">
         <div class="developer-card__width" :style="{ background: developer.background }">
           <div class="developer-card__text">
             <div class="developer-card__about-text">
@@ -22,35 +22,31 @@
             <img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
           </div>
         </div>
-        <div class="developer-card__height">
+      </div>
+      <div class="developer-card__content" v-else>
+        <div class="developer-card__height" :style="{ background: developer.background }">
           <div class="developer-card-height__text">
             <div class="developer-card-height__about-text">
-              <p>Бэкендер</p>
-              <h1>Hepatir</h1>
+              <p>{{ developer.userRole }}</p>
+              <h1>{{ developer.username }}</h1>
             </div>
-            <div class="developer-card-height__technology techonology-styles">
-              <img src="../assets/icons-developcard/csharp-logo.png" alt="html">
-              <p>ASP, .NET, MongoDB</p>
+            <div v-for="(techText, index) in developer.technologyText" :key="index" class="developer-card__technology">
+              <img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
+              <p>{{ techText }}</p>
             </div>
-            <div class="developer-card-height__technology-two-column techonology-styles">
-              <img src="../assets/icons-developcard/sql-logo.png" alt="html">
-              <p>SQL</p>
+            <div class="developer-card__socials">
+              <div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
+                <img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
+              </div>
             </div>
           </div>
           <div class="developer-card-height__skin">
-            <div class="developer-card-height__skin-content">
-              <div class="developer-card-height__social-icons">
-                <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
-                <a href=""><img src="@/assets/icons-developcard/discord.png" alt=""></a>
-                <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
-              </div>
-            </div>
+            <img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
           </div>
         </div>
       </div>
     </li>
   </ul>
-
 </template>
 
 <script>

luckydiamond/src/mocks/DevelopersOptions.js

@@ -41,13 +41,8 @@ export default [
         userRole: "Дизайнер",
         background: "#393A3A",
         technologyText: ["Designer"],
-        technologyIcons: {
-            figma: "@/assets/icons-developcard/figma.png"
-        },
-        socialIcons: {
-            telegram: "@/assets/icons-developcard/telegram.png",
-            discord: "@/assets/icons-developcard/discord.png"
-        }
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"]
     },
     {
         id: 6,
@@ -55,15 +50,8 @@ export default [
         userRole: "Фронтэндер",
         background: "#742271",
         technologyText: ["html 5, css"],
-        technologyIcons: {
-            html: "@/assets/icons-developcard/html.png"
-        },
-        socialIcons: {
-            odniclasniki: "@/assets/icons-developcard/odniclasniki.png",
-            telegram: "@/assets/icons-developcard/telegram.png",
-            like: "@/assets/icons-developcard/like.png",
-            github: "@/assets/icons-developcard/github.png",
-        }
+        technologyIcons: ["html"],
+        socialIcons: ["odniclasniki", "telegram", "like", "github"],
     },
     {
         id: 7,
@@ -71,13 +59,8 @@ export default [
         userRole: "Дизайнер",
         background: "#E2B374",
         technologyText: ["Designer"],
-        technologyIcons: {
-            figma: "@/assets/icons-developcard/figma.png"
-        },
-        socialIcons: {
-            telegram: "@/assets/icons-developcard/telegram.png",
-            discord: "@/assets/icons-developcard/discord.png"
-        }
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"]
     }
 ]