Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
8.5 kB
3
Indexable
Never
<!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>