Commit a1e9c3f3 authored by Benjamin Krause's avatar Benjamin Krause
Browse files

Add styles to the ui

parent 75b691be
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8" />
<title>Email - Test</title>
</head>
<body>
<div class="login">
<label for="mail">Mail</label>
<input type="text" name="mail" id="mail">
</head>
<body>
<div class="login-area">
<label for="mail">Mail</label>
<input type="text" name="mail" id="mail" />
<label for="password">Password</label>
<input type="password" name="password" id="password">
<label for="password">Password</label>
<input type="password" name="password" id="password" />
<button id="login-btn">Login</button>
<button id="login-btn">Login</button>
</div>
<div id="chat" class="chat-window">
<div id="chat-content"></div>
<div class="notifier">
<div></div>
</div>
</div>
<input type="text" name="to" id="to" placeholder="Type an receiver mail">
<input type="text" name="text" id="text" placeholder="Type some Text">
<button id="send">Send Message</button>
<footer class="send-area">
<input
type="text"
name="to"
id="to"
placeholder="Type an receiver mail"
/>
<input type="text" name="text" id="text" placeholder="Type some Text" />
<button id="send">Send Message</button>
</footer>
<script src="index.ts"></script>
</body>
</html>
\ No newline at end of file
</body>
</html>
......@@ -4,9 +4,9 @@ import "./style.scss";
import axios from "axios";
let userData: {
mail: string,
password: string
} = {mail: "", password: ""}
mail: string;
password: string;
} = { mail: "", password: "" };
export namespace EmailProxy {
const protocol = "http://";
......@@ -16,10 +16,10 @@ export namespace EmailProxy {
export async function getMail(obj: {
user: {
mail: string,
password: string
},
mailbox: string
mail: string;
password: string;
};
mailbox: string;
}) {
const url = `${baseUrl}mails/get`;
let response = await axios
......@@ -31,36 +31,36 @@ export namespace EmailProxy {
return reason.response;
});
return response;
}
}
export async function sendMail(obj: {
from_user: {
mail: string,
password: string
},
mail: string;
password: string;
};
to_user: {
mail: string,
password: string
},
subject: string,
message: string
mail: string;
password: string;
};
subject: string;
message: string;
}) {
const url = `${baseUrl}mails/send`;
let response = await axios
.post(url, obj)
.then((response) => {
return response;
})
.catch((reason) => {
return reason.response;
});
return response;
.post(url, obj)
.then((response) => {
return response;
})
.catch((reason) => {
return reason.response;
});
return response;
}
}
function removeChilds(parent: HTMLElement) {
while(parent.firstChild) {
parent.firstChild.remove()
while (parent.firstChild) {
parent.firstChild.remove();
}
}
......@@ -68,53 +68,70 @@ async function fillChat() {
const resp = await EmailProxy.getMail({
user: {
mail: userData.mail,
password: userData.password
password: userData.password,
},
mailbox: "Spam"
})
mailbox: "Spam",
});
const data = resp.data;
const parent: HTMLElement = document.querySelector("#chat");
removeChilds(parent)
data.forEach(element => {
const parent: HTMLElement = document.querySelector("#chat-content");
removeChilds(parent);
data.forEach((element) => {
const text = document.createElement("li");
text.innerText = `${element.mail_from} - ${element.date} - ${element.body}`
const date = new Date(element.date);
const dateString = `${date.getDate()}.${date.getMonth()}.${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}`
text.innerText = `${element.mail_from} - ${dateString} - ${element.body}`;
parent.appendChild(text);
});
}
async function work(obj: any) {
const resp = await EmailProxy.sendMail(obj)
const resp = await EmailProxy.sendMail(obj);
const data = resp.data;
console.log(data);
}
function setNotifierStatus(status: boolean) {
document.querySelectorAll(".notifier").forEach((element) => {
if (status) {
element.classList.add("green");
} else {
element.classList.remove("green");
}
});
}
function init() {
document.querySelector("#login-btn").addEventListener("click", () => {
userData.mail = (document.querySelector("#mail") as HTMLInputElement).value;
userData.password = (document.querySelector("#password") as HTMLInputElement).value;
(document.querySelector("#login-btn") as HTMLButtonElement).disabled = true
fillChat()
userData.password = (document.querySelector(
"#password"
) as HTMLInputElement).value;
(document.querySelector("#login-btn") as HTMLButtonElement).disabled = true;
fillChat();
setInterval(() => {
fillChat();
console.log("update");
}, 10 * 1000);
})
setNotifierStatus(true);
setTimeout(() => {
setNotifierStatus(false);
}, 500);
}, 5 * 1000);
});
document.querySelector('#send').addEventListener("click", () => {
document.querySelector("#send").addEventListener("click", () => {
const obj = {
from_user: {
mail: userData.mail,
password: userData.password
password: userData.password,
},
to_user: {
mail: (document.querySelector('#to') as HTMLInputElement).value,
password: ""
mail: (document.querySelector("#to") as HTMLInputElement).value,
password: "",
},
subject: "Test",
message: (document.querySelector("#text") as HTMLInputElement).value
}
work(obj)
message: (document.querySelector("#text") as HTMLInputElement).value,
};
work(obj);
});
}
init()
\ No newline at end of file
init();
html,
body {
display: block;
height: 100%;
}
body {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
padding: 0;
......@@ -8,13 +13,46 @@ body {
.chat-window {
position: relative;
border: 2px solid black;
border-radius: 5px;
height: 300px;
background-color: darkgray;
height: 100%;
padding: 10px;
overflow: scroll;
li {
margin: 10px 0;
border: 2px solid lightgray;
padding: 5px;
background-color: lightgray;
list-style: none;
}
}
\ No newline at end of file
.notifier {
right: 0;
bottom: 5px;
z-index: 10;
}
}
.notifier {
position: absolute;
display: inline-block;
width: 10px;
height: 10px;
&.green {
div {
background-color: green;
}
}
div {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
background: gray;
}
}
.send-area {
margin-top: auto;
background-color: gray;
padding: 10px;
}
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