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

Implement basic ui

parent ef03be82
web/node_modules
web/node_modules/
web/node_modules/*
# Created by https://www.toptal.com/developers/gitignore/api/pycharm+all,python
# Edit at https://www.toptal.com/developers/gitignore?templates=pycharm+all,python
......
This diff is collapsed.
{
"name": "storyboard_renderer",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"serve": "parcel src/index.html -p 8080 --open",
"build:parcel": "parcel build src/index.html",
"build": "npm run clean && npm run build:parcel",
"clean": "rm -rf dist/*",
"prettier": "prettier --write src/"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.19.2"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"parcel-bundler": "^1.12.4",
"prettier": "2.0.5",
"sass": "^1.26.10",
"scss": "^0.2.4",
"typescript": "^3.9.7"
}
}
<!DOCTYPE html>
<html lang="en">
<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">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<button id="login-btn">Login</button>
</div>
<div id="chat" class="chat-window">
</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>
<script src="index.ts"></script>
</body>
</html>
\ No newline at end of file
"use strict";
import "./style.scss";
import axios from "axios";
let userData: {
mail: string,
password: string
} = {mail: "", password: ""}
export namespace EmailProxy {
const protocol = "http://";
const ip = "localhost";
const port = "8000";
const baseUrl = `${protocol}${ip}:${port}/`;
export async function getMail(obj: {
user: {
mail: string,
password: string
},
mailbox: string
}) {
const url = `${baseUrl}mails/get`;
let response = await axios
.post(url, obj)
.then((response) => {
return response;
})
.catch((reason) => {
return reason.response;
});
return response;
}
export async function sendMail(obj: {
from_user: {
mail: string,
password: string
},
to_user: {
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;
}
}
function removeChilds(parent: HTMLElement) {
while(parent.firstChild) {
parent.firstChild.remove()
}
}
async function fillChat() {
const resp = await EmailProxy.getMail({
user: {
mail: userData.mail,
password: userData.password
},
mailbox: "Spam"
})
const data = resp.data;
const parent: HTMLElement = document.querySelector("#chat");
removeChilds(parent)
data.forEach(element => {
const text = document.createElement("li");
text.innerText = `${element.mail_from} - ${element.date} - ${element.body}`
parent.appendChild(text);
});
}
async function work(obj: any) {
const resp = await EmailProxy.sendMail(obj)
const data = resp.data;
console.log(data);
}
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()
setInterval(() => {
fillChat();
console.log("update");
}, 10 * 1000);
})
document.querySelector('#send').addEventListener("click", () => {
const obj = {
from_user: {
mail: userData.mail,
password: userData.password
},
to_user: {
mail: (document.querySelector('#to') as HTMLInputElement).value,
password: ""
},
subject: "Test",
message: (document.querySelector("#text") as HTMLInputElement).value
}
work(obj)
});
}
init()
\ No newline at end of file
body {
display: block;
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
.chat-window {
position: relative;
border: 2px solid black;
border-radius: 5px;
height: 300px;
padding: 10px;
li {
margin: 10px 0;
border: 2px solid lightgray;
list-style: none;
}
}
\ No newline at end of file
{
"compilerOptions": {
"lib": ["ES6", "DOM"],
"baseUrl": "./src",
"paths": {
"~/*": ["./*"]
},
"typeRoots": ["node_modules/@types"],
"sourceMap": true
},
"include": ["src/**/*"]
}
\ No newline at end of file
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