Skip to content
GitLab
Commit a1e9c3f3 authored by Benjamin Krause's avatar Benjamin Krause
Browse files

Add styles to the ui

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