Feature/br 37 create item UI (#208)

* add styling to new_item page add overall style, make buttons international, Uploaded images are not rendered immediately so far * Add missing fields to create item view * expand width of owner and holder in add and edit item view * Allow loading of item page after creation without an image * Allow dynamic display of images * changed styles accordingly to global styles sheet * Update app/views/items/new.html.erb Co-authored-by: antonneubauer <[email protected]> * Update app/views/items/new.html.erb Co-authored-by: antonneubauer <[email protected]> * implemented review suggestions Co-authored-by: Belana Zwadsich <[email protected]> Co-authored-by: Sara Grau <[email protected]> Co-authored-by: antonneubauer <[email protected]>
hpi-swt2 · Jan 5, 2023 · bec3527 · bec3527
1 parent c0c9ebe
commit bec3527
Show file tree

Hide file tree

Showing 5 changed files with 238 additions and 6 deletions.
diff --git a/app/views/items/edit.html.erb b/app/views/items/edit.html.erb
@@ -126,6 +126,10 @@
   .btn-primary {
     width: 100%;
   }
+
+  select {
+    width: 100%;
+  }
 
 </style>
   <%= link_to @item do %>

diff --git a/app/views/items/new.html.erb b/app/views/items/new.html.erb
@@ -1,9 +1,231 @@
-<h1>New item</h1>
+<p style="color: green"><%= notice %></p>
+<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
 
-<%= render "form", item: @item %>
 
-<br>
+<style>
+:root{
+  --grey04: #394044;
+  --grey09: #AAB0B3;
+  --grey11: #DDDFE0;
+  --secondary08: #55A6BE;
+  }
+  .caption{
+    text-align: center;
+  }
+  .subtitle{
+     margin-bottom: 0px;
+  }
+  .title{
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 23px;
+    text-align: center;
+    text-transform: capitalize;
+    color: var(--grey04);
+    margin: 1em 0px 0px 0px;
+  }
+  #location{
+      text-align: center;
+  }
+  .centeredContainer{
+      margin: 0 auto;
+      width: 65%;
+  }
+  .image{
+    position:relative;
+    overflow:hidden;
+    padding-bottom:100%;
+    max-width: 25em;
+    max-height: 25em !important; 
+    padding-left: 0px;
+    padding-right: 0px;  
+  }
+  .image img{
+    position:absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    max-height: 25em !important;
+  }
 
+  #locationIcon{
+    font-size: 20px;
+    vertical-align: text-top;
+  }
+
+  .material-symbols-outlined{
+    color: var(--grey04);
+  }
+
+  #imagePlaceholder {
+    background-color: var(--grey11);
+    position:absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    max-height: 25em !important;
+  }
+
+  #imageIcon {
+     font-size: 10em;
+     color: var(--grey09);
+  }
+
+  @media screen and (min-width: 768px) {
+    .image{
+      position:relative;
+      overflow:hidden;
+      padding-bottom:20em;
+      width: 23em;
+      height: 23em !important;
+      padding-left: 0px;
+      padding-right: 0px;   
+    }
+    .image img{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      border-radius: 5px;
+    }
+    .centeredContainer{
+      margin: 0 auto;
+      width: 25em;
+    }
+    #imagePlaceholder {
+    background-color: var(--grey11);
+    width: 23em;
+    height: 23em !important;
+  }
+  }
+  .notBorderedInput {
+    width: 100%;
+    margin-bottom: 8px
+  }
+  .borderedInput {
+    border: 1px solid #AAB0B3;
+    border-radius: 5px; 
+    padding-left: 5px;
+    width: 100%;
+    margin-bottom: 8px
+  }
+  .locationInput {
+    width: 90%;
+  }
+  .btn-primary {
+    margin-bottom: 8px;
+    width: 48%;
+    display: inline-block;
+  }
+  .btn-secondary {
+    width: 48%;
+    display: inline-block;
+  }
+  #buttonDiv {
+    width: 100%;
+    text-align: center;
+  }
+  select {
+    width: 100%;
+  }
+</style>
+<script>
+(function() {
+  // Load the script
+  const script = document.createElement("script");
+  script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
+  script.type = 'text/javascript';
+  document.head.appendChild(script);
+})();
+
+function readURL(input) {
+    if (input.files && input.files[0]) {
+      let reader = new FileReader();
+
+      reader.addEventListener("load", (e) => {
+        $('#img_prev').attr('src', e.target.result);
+        // remove the background color since hide() doesnt work
+        $('#imagePlaceholder').css("background-color", "transparent");
+        $('#imageIcon').hide();
+        });
+      reader.readAsDataURL(input.files[0]);
+    }
+  }
+</script>
 <div>
-  <%= link_to "Back to items", items_path %>
-</div>
+<%= form_with(model: @item, :html => {:multipart => true}) do |form| %>
+  <div class="row">
+    <div class="centeredContainer">
+          <div class="text-center">
+
+  <% if @item.errors.any? %>
+    <div style="color: red">
+      <h2><%= pluralize(@item.errors.count, "error") %> prohibited this item from being saved:</h2>
+
+      <ul>
+        <% @item.errors.each do |error| %>
+          <li><%= error.full_message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="image container-fluid rounded">
+    <img id="img_prev" class="img img-responsive img-fluid rounded mx-auto d-flex align-items-center justify-content-center" src="#" alt=""/>
+    <div class="img img-responsive img-fluid rounded mx-auto d-flex align-items-center justify-content-center" id=imagePlaceholder>
+      <span class="material-symbols-outlined" id="imageIcon">image</span>
+    </div> 
+  </div>
+
+  <%= form.file_field :image, multiple: false, direct_upload: true, :onchange => "readURL(this)"%>  
+
+
+  <div>
+  <p class="title">
+    <%= form.text_field :name, class: "borderedInput", placeholder: t('views.new_item.item_name') %>
+  </p>
+  </div>
+  <div class="row">
+    <p class="body1" id="location">
+      <span class="material-symbols-outlined" id="locationIcon">location_on</span>
+      <%= form.text_field :location, class: "locationInput borderedInput", placeholder: t('views.new_item.location') %>
+    </p>
+  </div>
+  </div>
+    <p class="subtitle"><%= t('views.show_item.category')%></p>
+    <%= form.text_field :category, class: "borderedInput body1" %>
+
+    <p class="subtitle"><%= t('views.show_item.description')%></p>
+    <%= form.text_area :description, class: "borderedInput body1" %>
+
+    <p class="subtitle"><%= t('views.show_item.owner')%></p>
+    <div class="notBorderedInput">
+      <%= form.collection_select(:owner, User.all, :id, :email, :include_blank => true)%>
+    </div>
+
+    <p class="subtitle"><%= t('views.show_item.holder')%></p>
+    <div class="notBorderedInput">
+      <%= form.collection_select(:holder, User.all, :id, :email, :include_blank => true)%>
+    </div>
+
+    <p class="subtitle"><%= t('views.edit_item.price_ct')%></p>
+    <%= form.number_field :price_ct, class: "borderedInput body1" %>
+
+    <p class="subtitle"><%= t('views.edit_item.rental_duration_sec')%></p>
+    <%= form.number_field :rental_duration_sec, class: "borderedInput body1" %>
+
+    <p class="subtitle"><%= t('views.edit_item.return_checklist')%></p>
+    <%= form.text_area :return_checklist, class: "borderedInput body1" %> 
+
+    <div class="" id="buttonDiv">
+      <%= form.submit t('defaults.submit'), class: "btn-primary"%>
+      <%= link_to @item_new do %>
+        <button class="btn-secondary"><%= t('defaults.delete')%></button>
+      <% end %>
+    </div>
+  </div>
+  </div>
+<% end %>
+</div>
diff --git a/app/views/items/show.html.erb b/app/views/items/show.html.erb
@@ -133,7 +133,7 @@
           <!--only show filled icon if icon is on wishlist-->
           <!--span class="material-symbols-outlined wishlistIcon" id="filledWishlistIcon">grade</span-->
           <span class="material-symbols-outlined wishlistIcon" id="notFilledWishlistIcon">grade</span>
-          <%= image_tag @item.image, class: "img img-responsive img-fluid rounded mx-auto d-block" if @item.image.attached? %>
+          <%= image_tag @item.image, class: "img img-responsive img-fluid rounded mx-auto d-block" if @item.image.attached?%>
         </div>
         <div>
           <p class="title"><%=@item.name %></p>

diff --git a/config/locales/de.yml b/config/locales/de.yml
@@ -4,6 +4,7 @@ de:
     close: "Schließen"
     accept: "Annehmen"
     decline: "Ablehnen"
+    submit: "Anbieten"
     check: "Prüfen"
   views:
     landing_page:
@@ -62,6 +63,8 @@ de:
       title: "Startseite"
     new_item:
       title: "Neuer Gegenstand"
+      item_name: "Name des Gegenstands"
+      location: "Standort"
     show_item:
       author: "Autor"
       category: "Kategorie"

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -35,6 +35,7 @@ en:
     close: "Close"
     accept: "Accept"
     decline: "Decline"
+    submit: "Submit"
     check: "Check"
   views:
     landing_page:
@@ -93,6 +94,8 @@ en:
       title: "Home"
     new_item:
       title: "New Item"
+      item_name: "Item Name"
+      location: "Location"
     show_item:
       author: "Author"
       category: "Category"