Skip to content

Commit

Permalink
upload image input
Browse files Browse the repository at this point in the history
  • Loading branch information
@fichimura
fichimura committed Mar 21, 2024
1 parent 5b54ff2 commit ad34f8c
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 121 deletions.
12 changes: 10 additions & 2 deletions views/audiovisuals/edit.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<div class="row">
<h2 class="text-center">Edit audiovisual</h2>
<div class="col-6 offset-3">
<form action="/audiovisuals/<%=audiovisual._id%>?_method=PUT" method="POST" class="validate-form"
novalidate>
<form action="/audiovisuals/<%=audiovisual._id%>?_method=PUT" method="POST" class="validate-form" novalidate
enctype="multipart/form-data">
</div>
<div class="mb-3 fw-bold">
This audiovisual was added in <%= audiovisual.date_added %>
Expand Down Expand Up @@ -54,6 +54,14 @@
name="audiovisual[description]"> <%=audiovisual.description %></textarea>
</div>

<div class="input-group mb-3">
<input type="file" class="form-control" id="image" name="image" multiple>
<label class="input-group-text" for="image">Upload</label>
</div>




<div class="d-flex flex-row justify-content-between mb-3">
<button class="btn btn-secondary">
Update audiovisual
Expand Down
5 changes: 4 additions & 1 deletion views/audiovisuals/new.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,10 @@
name="audiovisual[description]"></textarea>
</div>

<input type="file" name="image" class="mb-2" multiple>
<div class="input-group mb-3">
<input type="file" class="form-control" id="image" name="image" multiple>
<label class="input-group-text" for="image">Upload</label>
</div>

<div class="d-flex flex-row justify-content-between mb-3">
<button class="btn btn-success">
Expand Down
266 changes: 148 additions & 118 deletions views/audiovisuals/show.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,139 +1,169 @@
<% layout('layouts/boilerplate') %>
<div class="row">
<div class="d-flex flex-row justify-content-between">
<div class="align-self-center col-md-8">
<h4>
<%= audiovisual.title %>
</h4>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Submitted by: </div>
<% if(audiovisual.author){ %>
<%= audiovisual.author.username %>
<% }else {%>
<span class="fw-light fst-italic">Review with no author</span>
<%} %>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Type: </div>
<%=audiovisual.type %>
</div>

<h4>
<%= audiovisual.title %>
</h4>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Submitted by: </div>
<% if(audiovisual.author){ %>
<%= audiovisual.author.username %>
<% }else {%>
<span class="fw-light fst-italic">Review with no author</span>
<%} %>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Type: </div>
<%=audiovisual.type %>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Director: </div>
<% if(audiovisual.director) { %>
<%= audiovisual.director %>
<% }else { %>
<div class="fw-light fst-italic">
No director informed
</div>
<% }%>
</div>

<div class="d-flex flex-row">
<div class="fw-bold me-1">Director: </div>
<% if(audiovisual.director) { %>
<%= audiovisual.director %>
<% }else { %>
<div class="fw-light fst-italic">
No director informed
</div>
<% }%>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Main cast: </div>
<% if(audiovisual.main_cast) { %>
<%= audiovisual.main_cast %>
<% }else { %>
<div class="fw-light fst-italic">
No main cast informed
</div>
<% }%>
</div>

<div class="d-flex flex-row">
<div class="fw-bold me-1">Main cast: </div>
<% if(audiovisual.main_cast) { %>
<%= audiovisual.main_cast %>
<% }else { %>
<div class="fw-light fst-italic">
No main cast informed
</div>
<% }%>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Country: </div>
<% if(audiovisual.country) { %>
<%= audiovisual.country %>
<% }else { %>
<div class="fw-light fst-italic">
No country informed
</div>
<% }%>
</div>

<div class="d-flex flex-row">
<div class="fw-bold me-1">Country: </div>
<% if(audiovisual.country) { %>
<%= audiovisual.country %>
<% }else { %>
<div class="fw-light fst-italic">
No country informed
</div>
<% }%>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Date added: </div>
<%=audiovisual.date_added %>
</div>

<div class="d-flex flex-row">
<div class="fw-bold me-1">Date added: </div>
<%=audiovisual.date_added %>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Release year: </div>
<% if(audiovisual.release_year) { %>
<%= audiovisual.release_year %>
<% }else { %>
<div class="fw-light fst-italic">
No release year informed
</div>
<% }%>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Duration: </div>
<% if(audiovisual.duration) { %>
<%= audiovisual.duration %>
<% }else { %>
<div class="fw-light fst-italic">
No duration informed
</div>
<% }%>
</div>

<div class="d-flex flex-row">
<div class="fw-bold me-1">Release year: </div>
<% if(audiovisual.release_year) { %>
<%= audiovisual.release_year %>
<% }else { %>
<div class="fw-light fst-italic">
No release year informed
</div>
<% }%>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Duration: </div>
<% if(audiovisual.duration) { %>
<%= audiovisual.duration %>
<% }else { %>
<div class="fw-light fst-italic">
No duration informed
</div>
<% }%>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Listed in: </div>
<% if(audiovisual.listed_in) { %>
<%= audiovisual.listed_in %>
<% }else { %>
<div class="fw-light fst-italic">
No listed in informed
</div>
<% }%>
</div>

<div class="d-flex flex-row">
<div class="fw-bold me-1">Listed in: </div>
<% if(audiovisual.listed_in) { %>
<%= audiovisual.listed_in %>
<% }else { %>
<div class="fw-light fst-italic">
No listed in informed
</div>
<% }%>
</div>
<div class="d-flex flex-row">
<div class="fw-bold me-1">Description: </div>
<% if(audiovisual.description) { %>
<%= audiovisual.description %>
<% }else { %>
<div class="fw-light fst-italic">
No description informed
</div>
<% }%>
</div>

<div class="d-flex flex-row">
<div class="fw-bold me-1">Description: </div>
<% if(audiovisual.description) { %>
<%= audiovisual.description %>
<% }else { %>
<div class="fw-light fst-italic">
No description informed
</div>
<% }%>
</div>
<div class="d-flex flex-row mt-3">
<div class="fw-bold me-1">Your Reviews: </div>
<a href="/audiovisuals/<%= audiovisual._id%>/reviews"> See reviews </a>
</div>

<div class="d-flex flex-row mt-3">
<div class="fw-bold me-1">Your Reviews: </div>
<a href="/audiovisuals/<%= audiovisual._id%>/reviews"> See reviews </a>
</div>

<%if(currentUser && audiovisual.author.equals(currentUser._id)){ %>
<div class="d-flex flex-row justify-content-between my-3">
<a class="btn btn-primary" href="/audiovisuals/<%= audiovisual._id%>/edit">Edit
audiovisual</a>
<%if(currentUser && audiovisual.author.equals(currentUser._id)){ %>
<div class="d-flex flex-row justify-content-between my-3">
<a class="btn btn-primary" href="/audiovisuals/<%= audiovisual._id%>/edit">Edit audiovisual</a>
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">Delete
audiovisual</button>
</div>
<% } %>

<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">Delete
audiovisual</button>
</div>
<% } %>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Are you sure you want to delete <%=
audiovisual.title %>
</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Are you sure you want to
delete
<%= audiovisual.title %>
</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<form action="/audiovisuals/<%=audiovisual._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<form action="/audiovisuals/<%=audiovisual._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="align-self-center d-flex flex-column col-md-4 mb-2">

<div id="audiovisualCarousel" class="carousel slide">
<div class="carousel-inner">
<% audiovisual.images.forEach((img,index )=> { %>
<div class="carousel-item <%= index=== 0 ? 'active' : '' %>">
<img class="img-fluid d-block w-100" src="<%=img.url%>" alt="">
</div>
<%})%>
</div>
<% if(audiovisual.images.length> 1){ %>
<button class="carousel-control-prev" type="button" data-bs-target="#audiovisualCarousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#audiovisualCarousel"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<% } %>
</div>

</div>

</div>
</div>

0 comments on commit ad34f8c

Please sign in to comment.