UPDATES: modal window

Jeanbulambo · Nov 18, 2022 · cad558a · cad558a
1 parent 3984688
commit cad558a
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 64 deletions.
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -4,16 +4,15 @@ import "controllers"
 import "popper"
 import "bootstrap"
 
-console.log('Hello World')
-
-let modalBtn = document.getElementById('modal_btn')
-let window = document.getElementById('modal_content')
+document.addEventListener("turbo:load", function () {
+    let modalBtn = document.getElementById('modal_btn')
+let window_modal = document.getElementById('modal_content')
 let close = document.getElementById('close')
-
-modalBtn.addEventListener('click', () => {
-    window.classList.toggle('d-none')
-});
-
-close.addEventListener('click', () => {
-    window.classList.toggle('d-none')
-})
+    modalBtn.addEventListener('click', () => {
+        window_modal.classList.toggle('d-none')
+    });
+    
+    close.addEventListener('click', () => {
+        window_modal.classList.toggle('d-none')
+    })
+});
diff --git a/app/views/general_shopping_list/index.html.erb b/app/views/general_shopping_list/index.html.erb
@@ -1,7 +1,8 @@
 <section>
 <div>
 <h2 class="text-center text-3xl font-semibold">Shopping List</h2>
-  <div class="flex my-4">
+
+  <div class="d-flex flex-row ">
       <div class="w-1/2">
         <p class="my-2"><span class="text-gray-500 font-semibold">Amount of food to buy:</span> <span class="font-semibold text-lg"><%= @shopping_list.length %></span></p>
         <p><span class="text-gray-500 font-semibold">Total value of food needed:</span> <span class="font-semibold text-lg">$<%= @shopping_list.inject(0) { |sum,item| sum + item[2] } %></span></p>

diff --git a/app/views/recipes/_recipe_details.html.erb b/app/views/recipes/_recipe_details.html.erb
@@ -29,55 +29,4 @@
     <h4>Steps:</h4>
     <div><%= @recipe.description %><div>
   </div>
-
-
-  <div class="d-flex justify-content-between container-lg mt-3 mb-3">
-
-  <button id="modal_btn">Generate shopping list</button>
-  <% if can? :manage, @recipe%>
-    <%= link_to 'Add ingredient', new_recipe_recipe_food_path(@recipe), class: 'btn btn-success' %>
-  <% end %>
-  </div>
-
-<hr class="line" />
-</div>
-
-<div id="modal_content" class="d-none" 
-style="width:100vw; 
-z-index:2;
-margin:0;
-padding:0;
-height:100vh; 
-background-color:rgba(150,150,150, 0.7); 
-position:absolute;
-top:0;
-left:0;
-box-sizing: border-box;
-">
-
-  <div style="max-width:70vw; 
-  min-height:50vh;
-  margin:25vh auto;
-  background-color:white;
-  border-radius:10px;">
-   <div class="modal-header">
-   <button id="close" class="close">&times;</button>
-   </div>
- <div class="modal-body">
- <h5 class="modal-title">Choose an inventory to use</h5>
-         <%=form_with url: general_shopping_list_index_path, method: :get do |f| %>
-      <div>
-        <div>
-          <%= f.select :inventory_id, Inventory.all.collect { |inventory| [inventory.name, inventory.id] }, :prompt => 'Select an Inventory', class: 'focus:outline-none', required: true %>
-        </div>
-        <%= f.hidden_field :recipe_id, value: @recipe.id, required: true %>
-      </div>
-      <div>
-        <%= f.submit "Generate",class:"btn btn-primary text-black"  %>
-      </div> 
-    <% end %>
-      </div>
-    </div>
-  </div>
-  </div>
 </div>
diff --git a/app/views/recipes/show.html.erb b/app/views/recipes/show.html.erb
@@ -4,6 +4,15 @@
  <%= render 'recipe_details' %>
 </section>
 
+<section>
+  <div class="d-flex justify-content-between container-lg mt-3 mb-3">
+  <button id="modal_btn">Generate shopping list</button>
+  <% if can? :manage, @recipe%>
+    <%= link_to 'Add ingredient', new_recipe_recipe_food_path(@recipe), class: 'btn btn-success' %>
+  <% end %>
+  </div>
+</section>
+
 <section>
   <div>
       <% if @recipe_foods.empty? %>
@@ -47,3 +56,43 @@
   <%= button_to "Destroy this recipe", @recipe, method: :delete, class: "btn btn-danger" %>
   <% end %>
 </div>
+
+<div id="modal_content" class="d-none" 
+style="width:100vw; 
+z-index:2;
+margin:0;
+padding:0;
+height:100vh; 
+background-color:rgba(150,150,150, 0.7); 
+position:absolute;
+top:0;
+left:0;
+box-sizing: border-box;
+">
+
+  <div style="max-width:70vw; 
+  min-height:50vh;
+  margin:25vh auto;
+  background-color:white;
+  border-radius:10px;">
+   <div class="modal-header">
+   <button id="close" class="close">&times;</button>
+   </div>
+ <div class="modal-body">
+ <h5 class="modal-title">Choose an inventory to use</h5>
+         <%=form_with url: general_shopping_list_index_path, method: :get do |f| %>
+      <div>
+        <div>
+          <%= f.select :inventory_id, Inventory.all.collect { |inventory| [inventory.name, inventory.id] }, :prompt => 'Select an Inventory', class: 'focus:outline-none', required: true %>
+        </div>
+        <%= f.hidden_field :recipe_id, value: @recipe.id, required: true %>
+      </div>
+      <div>
+        <%= f.submit "Generate",class:"btn btn-primary text-black"  %>
+      </div> 
+    <% end %>
+      </div>
+    </div>
+  </div>
+  </div>
+</div>