APP Orçamento Pessoal

jackson-vip · Nov 8, 2023 · 724d0c6 · 724d0c6
1 parent 290bdc5
commit 724d0c6
Show file tree

Hide file tree

Showing 5 changed files with 632 additions and 0 deletions.
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/consulta.html b/consulta.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="#" type="image/x-icon">
+  <title>Orçamento pessoal</title>
+
+  <!-- Bootstrap início -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+    crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+    crossorigin="anonymous"></script>
+  <!-- Bootstrap fim -->
+
+  <!-- js -->
+  <script src="js/script.js"></script>
+
+  <!-- Font Awesome -->
+  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
+
+  <!-- css -->
+  <link rel="stylesheet" href="css/style.css">
+
+</head>
+
+<body onload="carregaListadespesas()">
+
+
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-5">
+    <div class="container">
+      <a class="navbar-brand" href="#">
+        <img src="assets/logo.png" width="50" height="35" alt="Orçamento pessoal">
+      </a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="index.html">Cadastro</a>
+          </li>
+          <li class="nav-item active">
+            <a class="nav-link" href="consulta.html">Consulta</a>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+  </nav>
+
+  <div class="container">
+    <div class="row mb-5">
+      <div class="col">
+        <h1 id="headerMsg" class="display-4">Consulta de despesas</h1>
+      </div>
+    </div>
+
+    <div class="row mb-2">
+      <div class="col-md-2 mb-2">
+        <select class="form-control" id="ano">
+          <option value="">Ano</option>
+          <option value="2021">2021</option>
+          <option value="2022">2022</option>
+          <option value="2023">2023</option>
+        </select>
+      </div>
+
+      <div class="col-md-2 mb-2">
+        <select class="form-control" id="mes">
+          <option value="">Mês</option>
+          <option value="1">Janeiro</option>
+          <option value="2">Fevereiro</option>
+          <option value="3">Março</option>
+          <option value="4">Abril</option>
+          <option value="5">Maio</option>
+          <option value="6">Junho</option>
+          <option value="7">Julho</option>
+          <option value="8">Agosto</option>
+          <option value="9">Setembro</option>
+          <option value="10">Outubro</option>
+          <option value="11">Novembro</option>
+          <option value="12">Dezembro</option>
+        </select>
+      </div>
+
+      <div class="col-md-2 mb-2">
+        <input type="text" class="form-control" placeholder="Dia" id="dia" />
+      </div>
+
+      <div class="col-md-6">
+        <select class="form-control" id="tipo">
+          <option value="">Tipo</option>
+          <option value="1">Alimentação</option>
+          <option value="2">Educação</option>
+          <option value="3">Lazer</option>
+          <option value="4">Saúde</option>
+          <option value="5">Transporte</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-8 mb-2">
+        <input type="text" class="form-control" placeholder="Descrição" id="descricao" />
+      </div>
+
+      <div class="col-md-2 mb-2">
+        <input type="text" class="form-control" placeholder="Valor" id="valor" />
+      </div>
+
+      <div class="col-md-2 d-flex justify-content-end mb-2" id="divSearch">
+        <button type="button" class="btn btn-primary" id="search" onclick="pesquisarDespesa()">
+          <i class="fas fa-search"></i>
+        </button>
+      </div>
+
+    </div>
+
+    <button id="cancel" class="btn btn-danger mt-3 mr-4 hide" onclick="cancelarEdicao()">Cancelar Edição</button>
+    <button id="save" class="btn btn-primary mt-3 hide" onclick="salvarEdicaoDespesa()">Salvar</button>
+
+    <div class="d-flex justify-content-center aling-items-center col-md-0 my-4" id="cancelarAcao"></div>
+
+    <div class="row">
+      <div class="col">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Data</th>
+              <th>Tipo</th>
+              <th>Descrição</th>
+              <th>Valor</th>
+              <th class="text-center">Ação</th>
+            </tr>
+          </thead>
+
+          <tbody id="listaDespesas">
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <div class="modal fade" id="modalRegistraDespesa" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div id="div_modal_titulo">
+          <h5 class="modal-title" id="modal_titulo"></h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body" id="modal-conteudo"></div>
+        <div class="modal-footer">
+          <button type="button" data-dismiss="modal" id="modal-btn"></button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</body>
+
+</html>
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,49 @@
+/* CSS 
+ */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.table td,
+.table th {
+    border-top: 0;
+}
+
+th {
+    background-color: rgb(112, 112, 112);
+    color: #f1f1f1;
+    border-top: 0px;
+    border: .5px solid #e2e1e1;
+}
+
+td {
+    padding: 20px;
+    /* border: .5px solid #c2c2c2; */
+    background-color: #f1f0f0;
+}
+
+.columnItens {
+    text-align: center;
+}
+
+.fa-times {
+    font-size: 13px;
+}
+
+.fa-pencil-alt {
+    font-size: 13px;
+}
+
+.btn-acao {
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    margin: 4px;
+}
+
+.hide {
+    display: none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="#" type="image/x-icon">
+  <title>Orçamento pessoal</title>
+
+  <!-- Bootstrap início -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+    crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+    crossorigin="anonymous"></script>
+  <!-- Bootstrap fim -->
+
+  <!-- js -->
+  <script src="js/script.js" defer></script>
+  <!-- Font Awesome -->
+  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
+
+</head>
+
+<body>
+
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-5">
+    <div class="container">
+      <a class="navbar-brand" href="#">
+        <img src="assets/logo.png" width="50" height="35" alt="Orçamento pessoal">
+      </a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item active">
+            <a class="nav-link" href="index.html">Cadastro</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="consulta.html">Consulta</a>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+  </nav>
+
+  <div class="container">
+    <div class="row">
+      <div class="col mb-5">
+        <h1 class="display-4">Registro de nova despesa</h1>
+      </div>
+    </div>
+
+    <div class="row mb-2">
+      <div class="col-md-2 mb-2">
+        <select class="form-control" id="ano">
+          <option value="">Ano</option>
+          <option value="2021">2021</option>
+          <option value="2022">2022</option>
+          <option value="2023">2023</option>
+        </select>
+      </div>
+
+      <div class="col-md-2 mb-2">
+        <select class="form-control" id="mes">
+          <option value="">Mês</option>
+          <option value="1">Janeiro</option>
+          <option value="2">Fevereiro</option>
+          <option value="3">Março</option>
+          <option value="4">Abril</option>
+          <option value="5">Maio</option>
+          <option value="6">Junho</option>
+          <option value="7">Julho</option>
+          <option value="8">Agosto</option>
+          <option value="9">Setembro</option>
+          <option value="10">Outubro</option>
+          <option value="11">Novembro</option>
+          <option value="12">Dezembro</option>
+        </select>
+      </div>
+
+      <div class="col-md-2 mb-2">
+        <input type="text" class="form-control" placeholder="Dia" id="dia" />
+      </div>
+
+      <div class="col-md-6 mb-2">
+        <select class="form-control" id="tipo">
+          <option value="">Tipo</option>
+          <option value="1">Alimentação</option>
+          <option value="2">Educação</option>
+          <option value="3">Lazer</option>
+          <option value="4">Saúde</option>
+          <option value="5">Transporte</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-8 mb-2">
+        <input type="text" class="form-control" placeholder="Descrição" id="descricao" />
+      </div>
+
+      <div class="col-md-2">
+        <input type="text" class="form-control" placeholder="Valor" id="valor" />
+      </div>
+
+      <div class="col-md-2 d-flex justify-content-end mb-3">
+        <button type="button" class="btn btn-primary" onclick="cadastrarDespesa()">
+          <i class="fas fa-plus"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <div class="modal fade" id="modalRegistraDespesa" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div id="div_modal_titulo">
+          <h5 class="modal-title" id="modal_titulo"></h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body" id="modal-conteudo">...</div>
+        <div class="modal-footer">
+          <button type="button" data-dismiss="modal" id="modal-btn">Vaoltar</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</body>
+
+</html>