yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 12:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

added v-for for all template in develop-component

Browse Source
This commit is contained in:
Kostya
2024-02-04 02:01:15 +03:00
parent 14323ffc73
commit 7ede91e437
4 changed files with 89 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
luckydiamond/src/assets/css/ComponentsStyles/developer.css
View File

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

132
luckydiamond/src/assets/js/chat/ChatLogic.js
View File

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

34
luckydiamond/src/components/DeveloperComponent.vue
View File

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

29
luckydiamond/src/mocks/DevelopersOptions.js
View File

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