Add ability to change a hackathon's logo/banner

hackclub · Nov 2, 2023 · 6d736c0 · 6d736c0
1 parent 0399bc7
commit 6d736c0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/app/javascript/controllers/form_controller.js b/app/javascript/controllers/form_controller.js
@@ -29,6 +29,11 @@ export default class extends Controller {
     }
   }
 
+  submit(event) {
+    event.preventDefault();
+    this.element.requestSubmit();
+  }
+
   // private
 
   enabledVisibleFields() {

diff --git a/app/views/admin/hackathons/show.html.erb b/app/views/admin/hackathons/show.html.erb
@@ -14,19 +14,31 @@
     </turbo-frame>
 
     <% if @hackathon.logo.present? || @hackathon.banner.present? %>
-      <section style="display: flex;" class="pt3">
+      <section style="display: flex; gap: var(--spacing-2)" class="pt3">
         <% if @hackathon.logo.present? %>
-          <div>
-            <h2 class="heading--small">Logo</h2>
-            <%= image_tag @hackathon.logo, size: 128, style: "background-color: black;" %>
-          </div>
+          <turbo-frame id="logo">
+            <div>
+              <h2 class="heading--small">Logo</h2>
+              <%= image_tag @hackathon.logo, size: 128, style: "background-color: black;" %>
+              <%= form_with model: @hackathon, url: admin_hackathon_path(@hackathon), data: { controller: "form", turbo_confirm: "Are you sure you want to upload this file?" } do |form| %>
+                <%= form.label :logo, "Upload new logo", style: "text-decoration: underline; cursor: pointer; color: darkgray" %>
+                <%= form.file_field :logo, data: { action: "input->form#submit" }, style: "display: none;" %>
+              <% end %>
+            </div>
+          </turbo-frame>
         <% end %>
 
         <% if @hackathon.banner.present? %>
-          <div>
-            <h2 class="heading--small">Banner</h2>
-            <%= image_tag @hackathon.banner, height: 128, style: "background-color: black;" %>
-          </div>
+          <turbo-frame id="banner">
+            <div>
+              <h2 class="heading--small">Banner</h2>
+              <%= image_tag @hackathon.banner, height: 128, style: "background-color: black;" %>
+              <%= form_with model: @hackathon, url: admin_hackathon_path(@hackathon), data: { controller: "form", turbo_confirm: "Are you sure you want to upload this file?" } do |form| %>
+                <%= form.label :banner, "Upload new banner", style: "text-decoration: underline; cursor: pointer; color: darkgray" %>
+                <%= form.file_field :banner, data: { action: "input->form#submit" }, style: "display: none;" %>
+              <% end %>
+            </div>
+          </turbo-frame>
         <% end %>
       </section>
     <% end %>