Skip to content

Commit

Permalink
ajustes edição e view da tabela
Browse files Browse the repository at this point in the history
  • Loading branch information
Renan de Aguiar Modesto committed Jun 6, 2024
1 parent 78d3e14 commit 7510596
Show file tree
Hide file tree
Showing 6 changed files with 27,468 additions and 5,963 deletions.
2 changes: 1 addition & 1 deletion api/server/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ app.set("views", path.join(__dirname, "views"));
app.engine("ejs", require("ejs").renderFile)
app.set("view engine", "ejs");


mongoose.set('strictQuery', false);
app.use(express.static("views"));
app.use(morgan("dev"));
app.use(express.json());
Expand Down
30 changes: 24 additions & 6 deletions api/server/views/editform.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -74,15 +74,19 @@
</div>
<div class="col-md-12">
<label for="">Lançamento</label>
<p class="pLabel"><%- movies.release_date %> </p>
<p class="pLabel" id="data"><%- movies.release_date %> </p>
<input class="form-control rounded-0 border border-secondary" type="datetime-local" id="release_date"
value="<%- movies.release_date %>" name="release_date" placeholder="Data" />
</div>
<div class="col-md-12">
<label for="">Gênero</label>
<p class="pLabel"><%- movies.genre %> </p>
<input class="form-control rounded-0 border border-secondary" type="text" id="genre" name="genre"
value="<%- movies.genre %>" placeholder="Gêneros" />
<% movies.genre.forEach(function(item) {%>
<p class="pLabel"><%- item %></p>
<%})%>
<input class="form-control rounded-0 border border-secondary" type="text" id="genre" name="genre"
value="<%- movies.genre %>" placeholder="Gêneros" />
</div>
<div class="col-md-6 d-grid gap-2 col-6 mx-auto">
<button class="btn rounded-0 btn-danger" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom"
Expand All @@ -100,7 +104,7 @@
<input class="form-control rounded-0 border border-secondary" type="hidden" value="1" id="total_chq" />
<div class="d-grid gap-2">
<label for="poster" class="form-label">Poster</label>
<img src="<%- movies.poster %> " />
<img width="150" height="250" src="<%- movies.poster %> " />
<button class="btn rounded-0 btn-danger" name="poster">
<a target="_blank" class="link-dark fw-bold" href="https://imgbox.com/">
Adicionar imagem</a>
Expand All @@ -121,7 +125,17 @@
</form>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const dataRelease = "<%- movies.release_date %>"
const originalDate = moment(dataRelease);
document.querySelector("#data").innerHTML = originalDate.format('DD/MM/YYYY');
document.querySelector("#release_date").value = originalDate.format('YYYY-MM-DDT00:00');
});
</script>
<script>
function add() {
var new_chq_no = parseInt($("#total_chq").val()) + 1;
Expand All @@ -144,6 +158,10 @@
const url = "/editpatch/<%- movies._id %>";
$('form[name="form"]').submit(function () {
const genres = [];
$('input[name="genre"]').each(function () {
genres.push($(this).val());
});
$.ajax({
method: "PATCH",
url: url,
Expand All @@ -154,7 +172,7 @@
overview: $("#overview").val(),
trailer: $("#trailer").val(),
release_date: $("#release_date").val(),
genre: $("#genre").val(),
genre: genres,
poster: $("#poster").val(),
},
success: function (data) {
Expand Down
45 changes: 21 additions & 24 deletions api/server/views/exclu.ejs
Original file line number Diff line number Diff line change
@@ -1,29 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<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="shortcut icon" href="https://images2.imgbox.com/63/15/7WXYHaSz_o.png" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Exclusão</title>
</head>

<body>
<div style="width: 100%; height: 100vh; padding: 2%;" class="bg-danger">
<div class="position-relative">
<div class="position-absolute top-0 start-50 translate-middle-x">
<h1>Filme removido</h1>
<button type="button" class="btn btn-dark" style="margin: 2% 0">
<a class="link-danger" href="/table"> Voltar </a>
</button>
</div>
<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="shortcut icon" href="https://images2.imgbox.com/63/15/7WXYHaSz_o.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<title>Exclusão</title>
</head>

<body>
<div style="width: 100%; height: 100vh; padding: 2%;" class="bg-danger">
<div class="position-relative">
<div class="position-absolute top-0 start-50 translate-middle-x">
<h1>Filme removido</h1>
<button type="button" class="btn btn-dark" style="margin: 2% 0">
<a class="link-danger" href="/table"> Voltar </a>
</button>
</div>
</div>
</body>
</html>
</div>
</body>
</html>
91 changes: 62 additions & 29 deletions api/server/views/table.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,30 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<title>Table</title>
<style>
.table-row {
min-height: 80px;
}
.table-cell::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.table-cell::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.table-cell::-webkit-scrollbar-thumb:hover {
background: #555;
}
.table-cell {
scrollbar-width: thin;
scrollbar-color: #d54949 #212121;
}
</style>
</head>

<body>
Expand All @@ -33,7 +57,7 @@
<th scope="col">Lingua Original</th>
<th scope="col">Título Original</th>
<th scope="col">Sinopse</th>
<th scope="col">Lançamento</th>
<th scope="col" style="padding-left: 30px;">Lançamento</th>
<th scope="col">Gênero</th>
<th scope="col">Trailer</th>
<th scope="col">Editar</th>
Expand All @@ -42,39 +66,48 @@
</thead>
<tbody>
<% item.forEach (function(item){%>
<tr class="border border-5 border-danger">
<td>
<img src=" <%- item.poster %>" alt="" width="80" height="110" />
</td>
<td style="display: none"><%- item._id %></td>
<td><%- item.name %></td>
<td><%- item.original_language %></td>
<td><%- item.original_title %></td>
<td><%- item.overview %></td>
<td><%- item.release_date %></td>
<td><%- item.genre %></td>
<td><%- item.trailer %></td>
<td>
<button type="button" class="btn btn btn-danger">
<a class="link-dark" href="/edit/<%- item._id %>">
Editar
</a>
</button>
</td>
<td>
<button type="button" class="btn btn btn-danger">
<a class="link-dark" href="/<%- item._id %>?_method=DELETE">
Excluir
</a>
</button>
</td>
</tr>
<tr class="border border-5 border-danger">
<td>
<img src=" <%- item.poster %>" alt="" width="80" height="110" />
</td>
<td style="display: none"><%- item._id %></td>
<td class="table-cell"><%- item.name %></td>
<td class="table-cell"><%- item.original_language %></td>
<td class="table-cell"><%- item.original_title %></td>
<td class="table-cell" style="overflow: auto; white-space: nowrap; overflow: auto; max-width: 200px;"><%-
item.overview %></td>
<td class="release-date table-cell" style="padding-left: 30px;"><%- item.release_date %></td>
<td class="table-cell"><%- item.genre %></td>
<td class="table-cell"><%- item.trailer %></td>
<td>
<button type="button" class="btn btn btn-danger">
<a class="link-dark" href="/edit/<%- item._id %>">
Editar
</a>
</button>
</td>
<td>
<button type="button" class="btn btn btn-danger">
<a class="link-dark" href="/<%- item._id %>?_method=DELETE">
Excluir
</a>
</button>
</td>
</tr>
<%})%>
<%})%>
</tbody>
</table>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.release-date').forEach(function (td) {
const originalDate = new Date(td.textContent.trim());
td.textContent = originalDate.toLocaleDateString();
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Expand Down
Loading

0 comments on commit 7510596

Please sign in to comment.