Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from sousatg/master
Code refactor
- Loading branch information
Showing
17 changed files
with
216 additions
and
468 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| .idea/ |
Empty file.
Empty file.
Binary file not shown.
This file was deleted.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,183 +1,104 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <title>Minha Estante</title> | ||
|
|
||
| <link href="css/bootstrap.min.css" rel="stylesheet"> | ||
| <link href="css/estilos.css" rel="stylesheet"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" /> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" /> | ||
|
|
||
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | ||
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | ||
| <!--[if lt IE 9]> | ||
| <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> | ||
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | ||
| <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> | ||
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | ||
| <![endif]--> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-md-6"> | ||
| <h2>Meus Livros</h2> | ||
| </div><!--// .col-md-6 --> | ||
| </div><!--// .row --> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-md-6"> | ||
| <table id="bookTable" class="table table-bordered table-condensed table-striped"> | ||
| <thead> | ||
| <tr> | ||
| <th>Título do Livro</th> | ||
| <th>Autor</th> | ||
| <th>Editora</th> | ||
| <th>Editar</th> | ||
| <th>Eliminar</th> | ||
| </tr> | ||
| </thead> | ||
| </table> | ||
| </div><!--// .col-md-6 --> | ||
|
|
||
| <div class="col-md-6"> | ||
| <div class="panel panel-primary"> | ||
| <div class="panel-heading">Dados do Livro</div> | ||
| <div class="panel-body"> | ||
| <form> | ||
| <div class="form-group"> | ||
| <label for="title">Título</label> | ||
| <input type="text" name="title" id="book_title" class="form-control input-lg" placeholder="Título do Livro"> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="author">Autor</label> | ||
| <input type="text" name="author" id="book_author" class="form-control input-lg" placeholder="Nome do Autor"> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="publisher">Editora</label> | ||
| <input type="text" name="publisher" id="book_publisher" class="form-control input-lg" placeholder="Editora"> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <button type="button" id="updateButton" onclick="bookUpdate();" class="btn btn-lg btn-primary"> | ||
| Adicionar Livro | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div><!--// .panel --> | ||
| </div><!--// .col-md --> | ||
| </div><!--// .row --> | ||
| </div><!--// .container --> | ||
|
|
||
| <script src="js/jquery-2.2.2.min.js"></script> | ||
| <script src="js/bootstrap.min.js"></script> | ||
| <script type="text/javascript"> | ||
| // Próximo ID para adicionar um novo livro | ||
| var _nextId = 1; | ||
| // ID do livro que está sendo editado | ||
| var _activeId = 0; | ||
|
|
||
| function formClear(){ | ||
| $("#book_title").val(""); | ||
| $("#book_author").val(""); | ||
| $("#book_publisher").val(""); | ||
| } | ||
|
|
||
| function bookBuildTableRow(id){ | ||
| var row = "<tr>" + | ||
| "<td>" + $("#book_title").val() + "</td>" + | ||
| "<td>" + $("#book_author").val() + "</td>" + | ||
| "<td>" + $("#book_publisher").val() + "</td>" + | ||
| "<td>" + | ||
| "<button type='button' " + | ||
| "onclick='bookDisplay(this);' " + | ||
| "class='btn btn-default'" + | ||
| "data-id='" + id + "'>" + | ||
| "<span class='glyphicon glyphicon-edit'></span>" + | ||
| "</button>" + | ||
| "</td>" + | ||
| "<td>" + | ||
| "<button type='button' " + | ||
| "onclick='bookDelete(this);' " + | ||
| "class='btn btn-default'" + | ||
| "data-id='" + id + "'>" + | ||
| "<span class='glyphicon glyphicon-remove'></span>" + | ||
| "</button>" + | ||
| "</td>" + | ||
| "</tr>" | ||
|
|
||
| return row; | ||
| } | ||
|
|
||
| function bookAddToTable(){ | ||
| // Primeiro verifica se a tag <tbody> existe. Adiciona um caso não exista | ||
| if ($("#bookTable tbody").length == 0){ | ||
| $("#bookTable").append("<tbody></tbody>"); | ||
| } | ||
|
|
||
| // Adiciona Livro na Tabela | ||
| $("#bookTable tbody").append(bookBuildTableRow(_nextId)); | ||
|
|
||
| // Incrementamos o nextId | ||
| _nextId += 1; | ||
| } | ||
|
|
||
| function bookDelete(button_delete){ | ||
| $(button_delete).parents("tr").remove(); | ||
| } | ||
|
|
||
| function bookDisplay(button_edit){ | ||
| var row = $(button_edit).parents("tr"); | ||
| var cols = row.children("td"); | ||
|
|
||
| _activeId = $($(cols[3]).children("button")[0]).data("id"); | ||
|
|
||
| $("#book_title").val($(cols[0]).text()); | ||
| $("#book_author").val($(cols[1]).text()); | ||
| $("#book_publisher").val($(cols[2]).text()); | ||
|
|
||
| // Mudar o texto do Botão | ||
| $("#updateButton").text("Actualizar"); | ||
| } | ||
|
|
||
| function bookUpdateInTable(id){ | ||
| // Encontra o livro na tabela | ||
| var row = $("#bookTable button[data-id='" + id + "']").parents("tr")[0]; | ||
|
|
||
| // Adiciona a linha modifica na tabela | ||
| $(row).after(bookBuildTableRow()); | ||
|
|
||
| // Remover a linha antiga | ||
| $(row).remove(); | ||
|
|
||
| // Limpar o formulário | ||
| formClear(); | ||
|
|
||
| // Mudar o texto do Botão | ||
| $("#updateButton").text("Adicionar Livro"); | ||
| } | ||
|
|
||
| function bookUpdate(){ | ||
| if ($("#book_title").val() != null && $("#book_title").val() != ''){ | ||
| if ($("#updateButton").text() == "Actualizar"){ | ||
| bookUpdateInTable(_activeId); | ||
| } else { | ||
| // Adiciona o Livro na Tabela | ||
| bookAddToTable(); | ||
| } | ||
|
|
||
| // Limpa o formulário | ||
| formClear(); | ||
|
|
||
| // Mantém o focu no campo Título | ||
| $("#book_title").focus(); | ||
| } | ||
| } | ||
|
|
||
| </script> | ||
| </body> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-md-6"> | ||
| <h2>Meus Livros</h2> | ||
| </div><!--// .col-md-6 --> | ||
| </div><!--// .row --> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-md-6"> | ||
| <table id="bookTable" class="table table-bordered table-condensed table-striped"> | ||
| <thead> | ||
| <tr> | ||
| <th>Título do Livro</th> | ||
| <th>Autor</th> | ||
| <th>Editora</th> | ||
| <th>Editar</th> | ||
| <th>Eliminar</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody></tbody> | ||
| </table> | ||
| </div><!--// .col-md-6 --> | ||
|
|
||
| <div class="col-md-6"> | ||
| <div class="panel panel-primary"> | ||
| <div class="panel-heading">Dados do Livro</div> | ||
| <div class="panel-body"> | ||
| <form id="book-form"> | ||
| <div class="form-group"> | ||
| <label for="title">Título</label> | ||
| <input type="text" name="title" id="book_title" class="form-control input-lg" | ||
| placeholder="Título do Livro"> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="author">Autor</label> | ||
| <input type="text" name="author" id="book_author" class="form-control input-lg" | ||
| placeholder="Nome do Autor"> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="publisher">Editora</label> | ||
| <input type="text" name="publisher" id="book_publisher" class="form-control input-lg" | ||
| placeholder="Editora"> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <button type="submit" id="updateButton" class="btn btn-lg btn-primary"> | ||
| Adicionar Livro | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div><!--// .panel --> | ||
| </div><!--// .col-md --> | ||
| </div><!--// .row --> | ||
| </div><!--// .container --> | ||
|
|
||
| <script type="text/html" id="bookTemplate"> | ||
| <tr> | ||
| <td><%- title %></td> | ||
| <td><%- author %></td> | ||
| <td><%- publisher %></td> | ||
| <td> | ||
| <button type='button' class='book-edit btn btn-default' data-id='<%- id %>'> | ||
| <span class='glyphicon glyphicon-edit'></span> | ||
| </button> | ||
| </td> | ||
| <td> | ||
| <button type='button' class='book-delete btn btn-default' data-id='<%- id %>'> | ||
| <span class='glyphicon glyphicon-remove'></span> | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| </script> | ||
|
|
||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> | ||
| <script src="js/book-form.js"></script> | ||
| <script src="js/book-table.js"></script> | ||
| <script src="js/main.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| const bookForm = (function($){ | ||
| const BOOK_TITLE = $("#book_title"); | ||
| const BOOK_AUTHOR = $("#book_author"); | ||
| const BOOK_PUBLISHER = $("#book_publisher"); | ||
| const BOOK_UPDATE_BUTTON = $("#updateButton"); | ||
|
|
||
| function clear() { | ||
| setData(); | ||
| BOOK_TITLE.focus(); | ||
| } | ||
|
|
||
| function hasErrors() { | ||
| return BOOK_TITLE.val() === null || BOOK_TITLE.val() === ''; | ||
| } | ||
|
|
||
| function getData() { | ||
| return { | ||
| title: BOOK_TITLE.val(), | ||
| author: BOOK_AUTHOR.val(), | ||
| publisher: BOOK_PUBLISHER.val(), | ||
| }; | ||
| } | ||
|
|
||
| function setData(title='', author='', publisher='') { | ||
| BOOK_TITLE.val(title); | ||
| BOOK_AUTHOR.val(author); | ||
| BOOK_PUBLISHER.val(publisher); | ||
| } | ||
|
|
||
| function setSubmitButtonText(str) { | ||
| BOOK_UPDATE_BUTTON.text(str); | ||
| } | ||
|
|
||
| function getSubmitButtonText() { | ||
| return BOOK_UPDATE_BUTTON.text(); | ||
| } | ||
|
|
||
| return { | ||
| clear: clear, | ||
| hasErrors: hasErrors, | ||
| getData: getData, | ||
| setData: setData, | ||
| setSubmitButtonText: setSubmitButtonText, | ||
| getSubmitButtonText: getSubmitButtonText, | ||
| }; | ||
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| const bookTable = (function($){ | ||
| const BOOK_TABLE_BODY = $("#bookTable tbody"); | ||
|
|
||
| function bookBuildTableRow(id) { | ||
| const book = {id: id, ...bookForm.getData()}; | ||
| const bookTpl = _.template($("#bookTemplate").html()); | ||
|
|
||
| return bookTpl(book); | ||
| } | ||
|
|
||
| function addToTable() { | ||
| BOOK_TABLE_BODY.append(bookBuildTableRow(_nextId)); | ||
| } | ||
|
|
||
| function _findBookRowById(id) { | ||
| return $("#bookTable button[data-id='" + id + "']").parents("tr")[0]; | ||
| } | ||
|
|
||
| function updateInTable(id) | ||
| { | ||
| const row = _findBookRowById(id); | ||
| const $row = $(row); | ||
|
|
||
| // Adiciona a linha modifica na tabela | ||
| $row.after(bookBuildTableRow()); | ||
|
|
||
| // Remover a linha antiga | ||
| $row.remove(); | ||
| } | ||
|
|
||
| return { | ||
| addToTable: addToTable, | ||
| updateInTable: updateInTable | ||
| } | ||
| })(jQuery); |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.