316 lines
7.7 KiB
HTML
316 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="UTF-8">
|
|
<html>
|
|
|
|
<head>
|
|
<title>BSMSapp</title>
|
|
<div align="center">
|
|
</head>
|
|
<div class="d-flex flex-column justify-content-center w-100 h-100">
|
|
<br><br>
|
|
<body bgcolor="#FFFFFF" text="Black">
|
|
<header>
|
|
<h1><span id="replace">BSMSapp</span></h1>
|
|
</header>
|
|
|
|
<form id="myForm" class="form-style">
|
|
<ul>
|
|
<li>
|
|
<input value="0" name="id" type="number" />
|
|
<span>Enter the product identifier.</span>
|
|
</li>
|
|
<li>
|
|
<input value="0" name="stock" type="number" />
|
|
<span>Enter the new stock number.</span>
|
|
</li>
|
|
<li>
|
|
<input type="submit" value="Upload" />
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
|
|
<button class="style" onclick="get_table()">Get table</button>
|
|
<br><br>
|
|
<table id="table" align="center" border="1px"></table>
|
|
</body>
|
|
</div>
|
|
|
|
</html>
|
|
|
|
<script>
|
|
const thisForm = document.getElementById('myForm');
|
|
thisForm.addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(thisForm).entries()
|
|
const str = JSON.stringify(Object.fromEntries(formData))
|
|
const response = await fetch("${ENDPOINT}/products", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: str.replace(/\"/g, '')
|
|
});
|
|
|
|
const result = await response.json();
|
|
});
|
|
|
|
function adjust_textarea(h) {
|
|
h.style.height = "20px";
|
|
h.style.height = (h.scrollHeight) + "px";
|
|
}
|
|
|
|
async function get_table() {
|
|
const request = await fetch("${ENDPOINT}/products", {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
const list = await request.json();
|
|
|
|
var cols = [];
|
|
for (var i = 0; i < list.length; i++) {
|
|
for (var k in list[i]) {
|
|
if (cols.indexOf(k) === -1) {
|
|
cols.push(k);
|
|
}
|
|
}
|
|
}
|
|
|
|
var table = document.createElement("table");
|
|
var tr = table.insertRow(-1);
|
|
for (var i = 0; i < cols.length; i++) {
|
|
var theader = document.createElement("th");
|
|
theader.innerHTML = cols[i];
|
|
tr.appendChild(theader);
|
|
}
|
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
trow = table.insertRow(-1);
|
|
for (var j = 0; j < cols.length; j++) {
|
|
var cell = trow.insertCell(-1);
|
|
cell.innerHTML = list[i][cols[j]];
|
|
}
|
|
}
|
|
|
|
var el = document.getElementById("table");
|
|
el.innerHTML = "";
|
|
el.appendChild(table);
|
|
}
|
|
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
background: linear-gradient(-45deg, #ee7752, #df6493, #23a6d5, #23d5ab);
|
|
background-size: 400% 400%;
|
|
animation: gradient 15s ease infinite;
|
|
height: 100vh;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 70px;
|
|
font-weight: 600;
|
|
background-image: linear-gradient(to left, #000000, #6b0bca);
|
|
color: transparent;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
}
|
|
|
|
.form-style {
|
|
max-width: 400px;
|
|
margin: 50px auto;
|
|
background: #fff;
|
|
border-radius: 2px;
|
|
padding: 20px;
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
.form-style h1 {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 0px 0px 20px 0px;
|
|
color: #5C5C5C;
|
|
font-size: x-large;
|
|
}
|
|
|
|
.form-style ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.form-style li {
|
|
display: block;
|
|
padding: 9px;
|
|
border: 1px solid #DDDDDD;
|
|
margin-bottom: 30px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.form-style li:last-child {
|
|
border: none;
|
|
margin-bottom: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-style li>label {
|
|
display: block;
|
|
float: left;
|
|
margin-top: -19px;
|
|
background: #FFFFFF;
|
|
height: 14px;
|
|
padding: 2px 5px 2px 5px;
|
|
color: #B9B9B9;
|
|
font-size: 14px;
|
|
overflow: hidden;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.form-style input[type="text"],
|
|
.form-style input[type="date"],
|
|
.form-style input[type="datetime"],
|
|
.form-style input[type="email"],
|
|
.form-style input[type="number"],
|
|
.form-style input[type="search"],
|
|
.form-style input[type="time"],
|
|
.form-style input[type="url"],
|
|
.form-style input[type="password"],
|
|
.form-style textarea,
|
|
.form-style select {
|
|
box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
width: 100%;
|
|
display: block;
|
|
outline: none;
|
|
border: none;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
.form-style input[type="text"]:focus,
|
|
.form-style input[type="date"]:focus,
|
|
.form-style input[type="datetime"]:focus,
|
|
.form-style input[type="email"]:focus,
|
|
.form-style input[type="number"]:focus,
|
|
.form-style input[type="search"]:focus,
|
|
.form-style input[type="time"]:focus,
|
|
.form-style input[type="url"]:focus,
|
|
.form-style input[type="password"]:focus,
|
|
.form-style textarea:focus,
|
|
.form-style select:focus {}
|
|
|
|
.form-style li>span {
|
|
background: #F3F3F3;
|
|
display: block;
|
|
padding: 3px;
|
|
margin: 0 -9px -9px -9px;
|
|
text-align: center;
|
|
color: #838383;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.form-style textarea {
|
|
resize: none;
|
|
}
|
|
|
|
.form-style input[type="submit"],
|
|
.form-style input[type="button"] {
|
|
background: #2471FF;
|
|
border: none;
|
|
padding: 10px 20px 10px 20px;
|
|
border-bottom: 3px solid #5994FF;
|
|
border-radius: 3px;
|
|
color: #D2E2FF;
|
|
}
|
|
|
|
/* .style {
|
|
max-width: 400px;
|
|
margin: 50px auto;
|
|
background: #fff;
|
|
border-radius: 2px;
|
|
padding: 20px;
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
} */
|
|
|
|
.style {
|
|
background: #2471FF;
|
|
border: none;
|
|
padding: 10px 20px 10px 20px;
|
|
border-bottom: 3px solid #5994FF;
|
|
border-radius: 3px;
|
|
color: #D2E2FF;
|
|
}
|
|
|
|
.style:hover {
|
|
background: #6B9FFF;
|
|
color: #fff;
|
|
}
|
|
|
|
.form-style input[type="submit"]:hover,
|
|
.form-style input[type="button"]:hover {
|
|
background: #6B9FFF;
|
|
color: #fff;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
table td {
|
|
padding: 15px;
|
|
}
|
|
|
|
table thead td {
|
|
background-color: #54585d;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
border: 1px solid #54585d;
|
|
}
|
|
|
|
table tbody td {
|
|
color: #636363;
|
|
border: 1px solid #dddfe1;
|
|
}
|
|
|
|
table tbody tr {
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
table tbody tr:nth-child(odd) {
|
|
background-color: #ffffff;
|
|
}
|
|
</style> |