Fix more bugs (and update frontend)
This commit is contained in:
parent
8a7e4d87cd
commit
a606aa0d40
|
|
@ -5,16 +5,28 @@
|
||||||
<title>BSMSapp</title>
|
<title>BSMSapp</title>
|
||||||
<div align="center">
|
<div align="center">
|
||||||
</head>
|
</head>
|
||||||
|
<div class="d-flex flex-column justify-content-center w-100 h-100">
|
||||||
<br><br>
|
<br><br>
|
||||||
<body bgcolor="#FFFFFF" text="Black">
|
<body bgcolor="#FFFFFF" text="Black">
|
||||||
<h1><span id="replace">BSMSapp</span></h1>
|
<header>
|
||||||
|
<h1><span id="replace">BSMSapp</span></h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
<form id="myForm">
|
|
||||||
<input value="0" name="id"/>
|
<form id="myForm" class="form-style">
|
||||||
<br>
|
<ul>
|
||||||
<input value="0" name="stock"/>
|
<li>
|
||||||
<br><br>
|
<input value="0" name="id" type="number"/>
|
||||||
<input type="submit" value="Upload"/>
|
<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>
|
</form>
|
||||||
</body>
|
</body>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -25,26 +37,173 @@
|
||||||
const thisForm = document.getElementById('myForm');
|
const thisForm = document.getElementById('myForm');
|
||||||
thisForm.addEventListener('submit', async function (e) {
|
thisForm.addEventListener('submit', async function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// console.log(thisForm)
|
|
||||||
// console.log(new FormData(thisForm).entries())
|
|
||||||
const formData = new FormData(thisForm).entries()
|
const formData = new FormData(thisForm).entries()
|
||||||
const str = JSON.stringify(Object.fromEntries(formData))
|
const str = JSON.stringify(Object.fromEntries(formData))
|
||||||
console.log(str.replace(/\"/g, ''))
|
console.log(str.replace(/\"/g, ''))
|
||||||
let test = {
|
|
||||||
id: 212311111,
|
|
||||||
stock: 131211
|
|
||||||
}
|
|
||||||
const response = await fetch("${ENDPOINT}/resource", {
|
const response = await fetch("${ENDPOINT}/resource", {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
// mode: 'cors',
|
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
// body: str.replace(/\"/g, '')
|
body: str.replace(/\"/g, '')
|
||||||
body: JSON.stringify(test)
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const result = await response.json();
|
const result = await response.json();
|
||||||
console.log(result)
|
console.log(result)
|
||||||
});
|
});
|
||||||
</script>
|
|
||||||
|
function adjust_textarea(h) {
|
||||||
|
h.style.height = "20px";
|
||||||
|
h.style.height = (h.scrollHeight)+"px";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
background: linear-gradient(-45deg, #ee7752, #df6493, #23a6d5, #23d5ab);
|
||||||
|
/* background-color: rgba(0, 0, 0, 0.1); */
|
||||||
|
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: #C0C0C0;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -5,6 +5,10 @@ module "sqs" {
|
||||||
aws = aws.aws
|
aws = aws.aws
|
||||||
}
|
}
|
||||||
|
|
||||||
|
depends_on = [
|
||||||
|
module.lambda
|
||||||
|
]
|
||||||
|
|
||||||
name = "AWS-SQS-g3"
|
name = "AWS-SQS-g3"
|
||||||
lambda_name = "AWSLambdaHandler-${replace(local.bucket_name, "-", "")}"
|
lambda_name = "AWSLambdaHandler-${replace(local.bucket_name, "-", "")}"
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,34 +2,46 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>ITBA - Cloud</title>
|
<title>BSMSapp</title>
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<!-- Esta es mi función -->
|
|
||||||
<script>
|
|
||||||
function getImage() {
|
|
||||||
var xhttp = new XMLHttpRequest();
|
|
||||||
xhttp.onreadystatechange = function () {
|
|
||||||
if (this.readyState == 4 && this.status == 200) {
|
|
||||||
document.getElementById("replace").innerHTML = this.responseText;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
xhttp.open("GET", ${ENDPOINT}, true);
|
|
||||||
xhttp.send();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<!-- Este es mi código -->
|
|
||||||
<br><br>
|
<br><br>
|
||||||
<body bgcolor="#FFFFFF" text="Black">
|
<body bgcolor="#FFFFFF" text="Black">
|
||||||
<h1><span id="replace">Bienvenidos, estimados Alumnos.</span></h1>
|
<h1><span id="replace">BSMSapp</span></h1>
|
||||||
|
|
||||||
<button onclick="getImage()">Pinchame</button>
|
|
||||||
<br><br>
|
|
||||||
<img src="images/image1.png" , width=35%, height=35%>
|
|
||||||
|
|
||||||
<p>Este lab está desarrollado por la cátedra de Cloud Computing</p>
|
<form id="myForm">
|
||||||
|
<input value="0" name="id"/>
|
||||||
|
<br>
|
||||||
|
<input value="0" name="stock"/>
|
||||||
|
<br><br>
|
||||||
|
<input type="submit" value="Upload"/>
|
||||||
|
</form>
|
||||||
</body>
|
</body>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</html>
|
</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))
|
||||||
|
console.log(str.replace(/\"/g, ''))
|
||||||
|
// let test = {
|
||||||
|
// id: 212311111,
|
||||||
|
// stock: 131211
|
||||||
|
// }
|
||||||
|
const response = await fetch("${ENDPOINT}/resource", {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: str.replace(/\"/g, '')
|
||||||
|
// body: JSON.stringify(test)
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
console.log(result)
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Binary file not shown.
Loading…
Reference in New Issue