Skip to content

V
vebinar-22
Commit 3bad3fc0 authored by Nurasyl's avatar Nurasyl
Browse files
Options

Initial commit

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 604 additions and 0 deletions
JS/index.js 0 → 100644
View file @ 3bad3fc0
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
document.addEventListener("DOMContentLoaded", () => {
const posts = document.getElementById("posts");
const firstName = document.getElementById("firstName");
const lastName = document.getElementById("lastName");
const inputFirstName = document.getElementById("inputFirstName");
const inputLastName = document.getElementById("inputLastName");
const inputEmail = document.getElementById("inputEmail");
const inputPost = document.getElementById("inputPost");
const formSend = document.getElementById("form_send");
const changeProfile = document.getElementById("change_profile");
const followUser = document.getElementById("follow_user");
const profileModal = document.getElementById("profile_modal");
const followUserModal = document.getElementById("follow_user_modal");
const profileModalForm = document.getElementById("profile_modal_form");
const followUserModalForm = document.getElementById("follow_user_modal_form");
const values = { firstName: "", lastName: "", email: "", post: "" };
const parseGetData = ({ url, isGet, data }) => __awaiter(void 0, void 0, void 0, function* () {
return isGet ?
yield (yield fetch(url)).json() :
yield (yield fetch(url, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: new URLSearchParams(data) })).json();
});
const createElem = ({ fullName, message }) => {
const div = document.createElement("div");
div.setAttribute("class", "post");
div.innerHTML = `<div class="author">${fullName} said:</div><div class="message">${message}</div>`;
return div;
};
class Profile {
constructor() {
this.firstName = "";
this.lastName = "";
this.email = "adam@gmail.com";
this.registerProfile();
}
;
registerProfile() {
return __awaiter(this, void 0, void 0, function* () {
const res = yield parseGetData({ url: `http://146.185.154.90:8000/blog/${this.email}/profile`, isGet: true });
this.firstName = res.firstName;
this.lastName = res.lastName;
});
}
;
changeProfile({ firstName, lastName }) {
return __awaiter(this, void 0, void 0, function* () {
const obj = { firstName, lastName };
const res = yield parseGetData({ url: `http://146.185.154.90:8000/blog/${this.email}/profile`, isGet: false, data: obj });
this.firstName = res.firstName;
this.lastName = res.lastName;
});
}
;
subscribe(email) {
return __awaiter(this, void 0, void 0, function* () {
yield parseGetData({ url: `http://146.185.154.90:8000/blog/${this.email}/subscribe`, isGet: false, data: { email } });
});
}
;
}
;
class Post extends Profile {
constructor() {
super();
this.lastDate = null;
this.getPosts();
setInterval(() => {
if (this.lastDate) {
this.getLastPosts();
}
;
}, 2000);
}
;
getPosts() {
return __awaiter(this, void 0, void 0, function* () {
const res = yield parseGetData({ url: `http://146.185.154.90:8000/blog/${this.email}/posts`, isGet: true });
this.lastDate = res.reverse().shift().datetime;
res.forEach((item) => {
posts === null || posts === void 0 ? void 0 : posts.append(createElem({ fullName: `${item.user.firstName} ${item.user.lastName}`, message: item.message }));
});
});
}
;
getLastPosts() {
return __awaiter(this, void 0, void 0, function* () {
const res = yield parseGetData({ url: `http://146.185.154.90:8000/blog/${this.email}/posts?datetime=${this.lastDate}`, isGet: true });
if (res.length !== 0) {
this.lastDate = res[0].datetime;
posts === null || posts === void 0 ? void 0 : posts.append(createElem({ fullName: `${res[0].user.firstName} ${res[0].user.lastName}`, message: res[0].message }));
}
});
}
;
createPost(message) {
return __awaiter(this, void 0, void 0, function* () {
yield parseGetData({ url: `http://146.185.154.90:8000/blog/${this.email}/posts`, isGet: false, data: { message } });
});
}
;
}
;
const profile = new Profile();
const post = new Post();
changeProfile === null || changeProfile === void 0 ? void 0 : changeProfile.addEventListener("click", () => {
profileModal && (profileModal.style.display = "block");
});
inputFirstName === null || inputFirstName === void 0 ? void 0 : inputFirstName.addEventListener("change", (e) => {
values.firstName = e.target.value;
});
inputLastName === null || inputLastName === void 0 ? void 0 : inputLastName.addEventListener("change", (e) => {
values.lastName = e.target.value;
});
inputEmail === null || inputEmail === void 0 ? void 0 : inputEmail.addEventListener("change", (e) => {
values.email = e.target.value;
});
inputPost === null || inputPost === void 0 ? void 0 : inputPost.addEventListener("change", (e) => {
values.post = e.target.value;
});
profileModalForm === null || profileModalForm === void 0 ? void 0 : profileModalForm.addEventListener("submit", (e) => {
e.preventDefault();
profile.changeProfile({ firstName: values.firstName, lastName: values.lastName });
firstName.innerText = values.firstName;
lastName.innerText = values.lastName;
profileModal.style.display = "none";
});
followUser === null || followUser === void 0 ? void 0 : followUser.addEventListener("click", () => {
followUserModal.style.display = "block";
});
followUserModalForm === null || followUserModalForm === void 0 ? void 0 : followUserModalForm.addEventListener("submit", (e) => {
e.preventDefault();
profile.subscribe(values.email);
followUserModal.style.display = "none";
});
formSend === null || formSend === void 0 ? void 0 : formSend.addEventListener("submit", (e) => {
e.preventDefault();
post.createPost(values.post);
});
});
Styles/Style.css 0 → 100644
View file @ 3bad3fc0
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: rgb(40, 39, 39);
}
img {
width: 100%;
height: 100%;
}
.container {
margin: 0 auto;
width: 80%;
}
.control {
margin-top: 40px;
height: 140px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.fullName {
width: 190px;
display: flex;
align-items: center;
justify-content: space-between;
}
.fullName > span {
font-size: 30px;
font-weight: 700;
text-transform: capitalize;
color: white;
}
.fullName > .btn {
width: 50px;
height: 50px;
background: none;
border: none;
cursor: pointer;
}
.fullName > .btn > img {
filter: invert(99%) sepia(1%) saturate(7500%) hue-rotate(171deg) brightness(107%) contrast(101%);
}
.follow_user {
background-color: white;
width: 190px;
border: 1px solid black;
padding: 10px 15px;
border-radius: 10px;
box-shadow: 0px 0px 5px gray;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.follow_user > span {
font-size: 20px;
}
.follow_user > .icon {
width: 50px;
height: 50px;
}
form {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 40px;
}
form > input {
width: 80%;
height: 100%;
border-radius: 10px;
border: 1px solid gray;
box-shadow: 0px 0px 5px gray;
}
form > button {
width: 15%;
height: 100%;
border-radius: 10px;
border: 1px solid gray;
cursor: pointer;
box-shadow: 0px 0px 5px gray;
}
.posts {
padding: 20px 15px;
margin-top: 50px;
width: 100%;
height: 430px;
border: 1px solid gray;
border-radius: 15px;
box-shadow: 0px 0px 3px gray;
overflow-y: scroll;
}
::-webkit-scrollbar {
display: none;
}
.posts > .post {
width: 100%;
height: 100px;
border: 1px solid gray;
border-radius: 10px;
box-shadow: 0px 0px 3px gray;
padding: 10px;
margin-bottom: 20px;
}
.posts > .post > .author {
font-size: 22px;
text-transform: capitalize;
color: gray;
margin-bottom: 10px;
}
.posts > .post > .message {
font-size: 18px;
text-transform: capitalize;
color: gray;
}
.profile_modal {
display: none;
position: absolute;
inset: 0;
}
.profile_modal > .backdrop {
background-color: black;
opacity: 0.7;
position: absolute;
inset: 0;
z-index: 3;
}
.profile_modal > .body {
position: absolute;
z-index: 4;
top: 30%;
left: 40%;
height: 200px;
width: 300px;
border: 1px solid gray;
border-radius: 15px;
background-color: white;
box-shadow: 0px 0px 3px white;
}
.profile_modal > .body > form {
display: flex;
flex-direction: column;
height: 100%;
padding: 15px;
}
.profile_modal > .body > form > button {
width: 100%;
height: 25%;
}
.profile_modal > .body > form > input {
width: 100%;
height: 25%;
}
.follow_user_modal {
display: none;
position: absolute;
inset: 0;
}
.follow_user_modal > .backdrop {
background-color: black;
opacity: 0.7;
position: absolute;
inset: 0;
z-index: 3;
}
.follow_user_modal > .body {
position: absolute;
z-index: 4;
top: 30%;
left: 40%;
height: 120px;
width: 300px;
border: 1px solid gray;
border-radius: 15px;
background-color: white;
box-shadow: 0px 0px 3px white;
}
.follow_user_modal > .body > form {
display: flex;
flex-direction: column;
height: 100%;
padding: 15px;
}
.follow_user_modal > .body > form > button {
width: 100%;
height: 45%;
}
.follow_user_modal > .body > form > input {
width: 100%;
height: 45%;
}
\ No newline at end of file
TS/index.ts 0 → 100644
View file @ 3bad3fc0
document.addEventListener("DOMContentLoaded", () => {
type TProfile = {
email: string,
firstName: string,
lastName: string,
_id: string
};
type TParseGet = {
url: string,
isGet: boolean,
data?: any
};
const posts = document.getElementById("posts");
const firstName = document.getElementById("firstName");
const lastName = document.getElementById("lastName");
const inputFirstName = document.getElementById("inputFirstName");
const inputLastName = document.getElementById("inputLastName");
const inputEmail = document.getElementById("inputEmail");
const inputPost = document.getElementById("inputPost");
const formSend = document.getElementById("form_send");
const changeProfile = document.getElementById("change_profile");
const followUser = document.getElementById("follow_user");
const profileModal = document.getElementById("profile_modal");
const followUserModal = document.getElementById("follow_user_modal");
const profileModalForm = document.getElementById("profile_modal_form");
const followUserModalForm = document.getElementById("follow_user_modal_form");
const values = {firstName: "", lastName: "", email: "", post: ""};
const parseGetData = async ({url, isGet, data}: TParseGet): Promise<any> => {
return isGet ?
await (await fetch(url)).json() :
await (await fetch(url, {method: "POST", headers: {"Content-Type": "application/x-www-form-urlencoded"}, body: new URLSearchParams(data)})).json();
};
const createElem = ({fullName, message}: {fullName: string, message: string}) => {
const div = document.createElement("div");
div.setAttribute("class", "post");
div.innerHTML = `<div class="author">${fullName} said:</div><div class="message">${message}</div>`
return div;
};
class Profile {
public firstName: string = "";
public lastName: string = "";
public email: string = "adam@gmail.com";
constructor() {
this.registerProfile();
};
async registerProfile() {
const res: TProfile = await parseGetData({url: `http://146.185.154.90:8000/blog/${this.email}/profile`, isGet: true});
this.firstName = res.firstName;
this.lastName = res.lastName;
};
async changeProfile({firstName, lastName}: {firstName: string, lastName: string}) {
const obj = { firstName, lastName };
const res: TProfile = await parseGetData({url: `http://146.185.154.90:8000/blog/${this.email}/profile`, isGet: false, data: obj});
this.firstName = res.firstName;
this.lastName = res.lastName;
};
async subscribe(email: string) {
await parseGetData({url: `http://146.185.154.90:8000/blog/${this.email}/subscribe`, isGet: false, data: {email}});
};
};
class Post extends Profile {
public posts: any;
public lastDate: string | null = null;
constructor() {
super();
this.getPosts();
setInterval(() => {
if(this.lastDate) {
this.getLastPosts();
};
}, 2000);
};
async getPosts() {
const res = await parseGetData({url: `http://146.185.154.90:8000/blog/${this.email}/posts`, isGet: true});
this.lastDate = res.reverse().shift().datetime;
res.forEach((item: any) => {
posts?.append(createElem({fullName: `${item.user.firstName} ${item.user.lastName}`, message: item.message}))
});
};
async getLastPosts() {
const res = await parseGetData({url: `http://146.185.154.90:8000/blog/${this.email}/posts?datetime=${this.lastDate}`, isGet: true});
if(res.length !== 0) {
this.lastDate = res[0].datetime
posts?.append(createElem({fullName: `${res[0].user.firstName} ${res[0].user.lastName}`, message: res[0].message}));
}
};
async createPost(message: string) {
await parseGetData({url: `http://146.185.154.90:8000/blog/${this.email}/posts`, isGet: false, data: { message }});
};
};
const profile = new Profile();
const post = new Post();
changeProfile?.addEventListener("click", () => {
profileModal && (profileModal.style.display = "block");
});
inputFirstName?.addEventListener("change", (e: any) => {
values.firstName = e.target.value;
});
inputLastName?.addEventListener("change", (e: any) => {
values.lastName = e.target.value;
});
inputEmail?.addEventListener("change", (e: any) => {
values.email = e.target.value;
});
inputPost?.addEventListener("change", (e: any) => {
values.post = e.target.value;
});
profileModalForm?.addEventListener("submit", (e) => {
e.preventDefault();
profile.changeProfile({firstName: values.firstName, lastName: values.lastName});
firstName!.innerText = values.firstName;
lastName!.innerText = values.lastName;
profileModal!.style.display = "none";
});
followUser?.addEventListener("click", () => {
followUserModal!.style.display = "block";
});
followUserModalForm?.addEventListener("submit", (e) => {
e.preventDefault();
profile.subscribe(values.email);
followUserModal!.style.display = "none";
});
formSend?.addEventListener("submit", (e) => {
e.preventDefault();
post.createPost(values.post);
});
});
\ No newline at end of file
index.html 0 → 100644
View file @ 3bad3fc0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./JS/index.js"></script>
<link rel="stylesheet" href="./Styles/Style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="control">
<div class="pagination">
<div class="fullName">
<span id="firstName" class="firstName">test</span>
<span id="lastName" class="lastName">test</span>
<button id="change_profile" class="btn">
<img src="./media/pen-to-square-solid.svg" alt="pen">
</button>
</div>
<div class="follow_user" id="follow_user">
<div class="icon">
<img src="./media/user-plus-solid.svg" alt="userPlus">
</div>
<span>
Follow User
</span>
</div>
</div>
<form id="form_send">
<input id="inputPost" type="text">
<button type="submit">Send</button>
</form>
</div>
<div id="posts" class="posts"></div>
</div>
<div id="profile_modal" class="profile_modal">
<div class="backdrop"></div>
<div class="body">
<form id="profile_modal_form">
<input id="inputFirstName" type="text" placeholder="First Name">
<input id="inputLastName" type="text" placeholder="Last Name">
<button type="submit">Save</button>
</form>
</div>
</div>
<div id="follow_user_modal" class="follow_user_modal">
<div class="backdrop"></div>
<div class="body">
<form id="follow_user_modal_form">
<input id="inputEmail" type="text" placeholder="Email">
<button type="submit">Save</button>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
media/pen-to-square-solid.svg 0 → 100644
View file @ 3bad3fc0
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg>
\ No newline at end of file
media/user-plus-solid.svg 0 → 100644
View file @ 3bad3fc0
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>
\ No newline at end of file
tsconfig.json 0 → 100644
View file @ 3bad3fc0
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment