Untitled
unknown
plain_text
3 years ago
8.5 kB
5
Indexable
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets\css\style.css">
<title>Unicornios</title>
</head>
<style>
html {
display: table;
margin: auto;
}
body {
display: table-cell;
vertical-align: middle;
}
.input {
border: 2px solid rgb(196, 186, 186);
padding: 10px;
border-radius: 10px;
margin: 10px 0;
box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
width:100%;
}
</style>
<body>
<div class="container">
<div class="form-image">
<img src="assets/img/imagem.svg" alt="">
</div>
<div class="form">
<form action="#">
<div class="form-header">
<div class="title">
<h1>Unicornios</h1>
</div>
</div>
<div class="form-header">
<div class="title">
<h2>Empresas com valor de mais de 1B USD</h2>
</div>
</div>
<div class="input-group">
<div class="input-box">
<label>Id da empresa</label> <br>
<input id="id" class="input" placeholder="Digite o id da empresa" type="text" required>
<br><br>
</div>
<div class="input-box">
<label>Nome da empresa</label><br>
<input id="nome" class="input" placeholder="Digite o nome da empresa" type="text" required>
<br><br>
</div>
<div class="input-box">
<label>Valor de mercado</label><br>
<input id="valor" class="input" placeholder="Valor de mercado" type="text" required>
<br><br>
</div>
<div class="input-box">
<label>Pais</label><br>
<input id="pais" class="input" placeholder="Pais sede" type="text">
<br><br>
</div>
<div class="input-box">
<label>Segmento</label><br>
<input id="segmento" class="input" placeholder="Segmento de mercado" type="text">
<br><br>
</div>
<div class="buttons">
<button id="ins">INSERT</button>
<button id="sel">SELECT</button>
<button id="upd">UPDATE</button>
<button id="del">DELETE</button>
</div>
<div class="img">
<img src="uni-removebg-preview.png" alt="unicornio">
</div>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-app.js";
//import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-analytics.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyCBDwtpqfNGPtSU3R-Gu5zIct9AA12TYFo",
authDomain: "empresas-unicornio.firebaseapp.com",
projectId: "empresas-unicornio",
storageBucket: "empresas-unicornio.appspot.com",
messagingSenderId: "636931381230",
appId: "1:636931381230:web:a830b7471f614f8422a0ff"
};
import { getDatabase, ref, set, child, update, remove, get, push } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-database.js";
var nome = document.getElementById("nome");
var valor = document.getElementById("valor");
var pais = document.getElementById("pais");
var segmento = document.getElementById("segmento");
var id = document.getElementById("id");
var Ins = document.getElementById("ins");
var Sel = document.getElementById("sel");
var Upd = document.getElementById("upd");
var Del = document.getElementById("del");
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
var newRef = ref.push();
function Inserir() {
set(ref(db, "Empresas/" + Id.value), {
nome: nome.value,
valor: valor.value,
pais: pais.value,
segmento: segmento.value
})
.then(() => {
alert("Dados inseridos com sucesso!");
})
.catch((error) => {
alert("Erro ao inserir dados" + error);
});
}
function Selecionar() {
const dbref = ref(db);
get(child(dbref, "Empresas/" + Id.value)).then((snapshot) => {
if (snapshot.exists()) {
nome.value = snapshot.val().nome;
valor.value = snapshot.val().valor;
pais.value = snapshot.val().pais;
segmento.value = snapshot.val().segmento;
}
else {
alert("Dados não encontrados");
}
}).catch((error) => {
alert("Erro ao buscar dados" + error);
});
}
function Atualizar() {
update(ref(db, "Empresas/" + Id.value), {
nome: nome.value,
valor: valor.value,
pais: pais.value,
segmento: segmento.value,
})
.then(() => {
alert("Dados atualizados com sucesso!");
})
.catch((error) => {
alert("Erro ao atualizar dados" + error);
});
}
function Deletar() {
remove(ref(db, "Empresas/" + Id.value), {
})
.then(() => {
alert("Dados removidos com sucesso!");
})
.catch((error) => {
alert("Erro ao remover dados" + error);
});
}
Ins.addEventListener('click', Inserir);
Sel.addEventListener('click', Selecionar);
Upd.addEventListener('click', Atualizar);
Del.addEventListener('click', Deletar);
</script>
</body>Editor is loading...