Lino/BerichtExporter
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fixed foldersructure+loading animation

Browse Source
This commit is contained in:
Lino Schmidt
2023-06-12 18:06:03 +02:00
parent abd01b6790
commit d171a218eb
4 changed files with 126 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/static/index.ejs Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BerichtExporter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>BerichtExporter</h1>
<div class="selector">
<select id="week-list">
<% options.forEach((element, index) => { %>
<option value="<%= index %>"><%= element %></option>
<% }); %>
</select>
<button id="export-button" onclick="exportReport()">Export</button>
</div>
<textarea id="export-textarea"></textarea>
<script src="index.js"></script>
</body>
</html>

47
src/static/index.js Normal file
View File

@@ -0,0 +1,47 @@
const exportTextarea = document.getElementById('export-textarea');
const weekList = document.getElementById('week-list');
const exportButton = document.getElementById('export-button');
let loadingInterval;
function loading() {
exportButton.disabled = true;
exportTextarea.value = 'Loading';
loadingInterval = setInterval(() => {
if (exportTextarea.value != 'Loading...') {
exportTextarea.value += '.';
} else {
exportTextarea.value = 'Loading';
}
}, 500);
}
function loaded() {
exportButton.disabled = false;
clearInterval(loadingInterval);
exportTextarea.value = '';
}
function exportReport() {
const week = weekList.value;
loading();
fetch('/getreport?week=' + week)
.then(response => {
if (response.ok) {
return response.text();
} else {
exportTextarea.value = 'Error while fetching report';
throw new Error('Error while fetching report');
}
}).then(text => {
exportTextarea.value = text;
exportTextarea.style.height = "auto";
exportTextarea.style.height = exportTextarea.scrollHeight + "px";
loaded();
}).catch(error => {
exportTextarea.value = 'Error while fetching report';
console.error(error);
loaded();
});
}

56
src/static/style.css Normal file
View File

@@ -0,0 +1,56 @@
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #fff;
background-color: #0d131e;
margin: 0;
padding: 15px;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
.selector {
margin-bottom: 10px;
}
select::-webkit-scrollbar {
display: none;
}
.selector select {
height: 30px;
font-size: 16px;
border-radius: 15px;
background-color: #172336;
color: #fff;
border: none;
overflow-y: scroll;
}
.selector button {
font-size: 16px;
height: 30px;
margin-left: 10px;
border-radius: 15px;
background-color: #172336;
color: #fff;
border: none;
}
.selector button:hover {
scale: 1.1;
cursor: pointer;
}
#export-textarea {
font-size: 16px;
width: 100%;
resize: none;
overflow-y: hidden;
background-color: #172336;
color: #fff;
border-radius: 15px;
border: none;
}

98
src/templates/index.ejs
View File

@@ -1,98 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BerichtExporter</title>
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #fff;
background-color: #0d131e;
}
.selector {
margin-top: 10px;
margin-bottom: 10px;
}
select::-webkit-scrollbar {
display: none;
}
.selector select {
height: 30px;
font-size: 16px;
border-radius: 15px;
background-color: #172336;
color: #fff;
border: none;
overflow-y: scroll;
}
.selector button {
font-size: 16px;
height: 30px;
margin-left: 10px;
border-radius: 15px;
background-color: #172336;
color: #fff;
border: none;
}
.selector button:hover {
scale: 1.1;
cursor: pointer;
}
#export-textarea {
font-size: 16px;
width: 90%;
resize: none;
overflow-y: hidden;
background-color: #172336;
color: #fff;
border-radius: 15px;
border: none;
}
</style>
</head>
<body>
<h1>BerichtExporter</h1>
<div class="selector">
<select id="week-list">
<% options.forEach((element, index) => { %>
<option value="<%= index %>"><%= element %></option>
<% }); %>
</select>
<button id="export-button" onclick="exportReport()">Export</button>
</div>
<textarea id="export-textarea"></textarea>
<script>
const exportTextarea = document.getElementById('export-textarea');
const weekList = document.getElementById('week-list');
function exportReport() {
const week = weekList.value;
fetch('/getreport?week=' + week)
.then(response => {
if (response.ok) {
return response.text();
} else {
exportTextarea.value = 'Error while fetching report';
throw new Error('Error while fetching report');
}
}).then(text => {
exportTextarea.value = text;
exportTextarea.style.height = "auto";
exportTextarea.style.height = exportTextarea.scrollHeight + "px";
}).catch(error => {
exportTextarea.value = 'Error while fetching report';
console.error(error);
});
}
</script>
</body>
</html>