Add screenshots to elements

app/controllers/elements_controller.rb

@@ -87,6 +87,6 @@ class ElementsController < ApplicationController
 
   # Only allow a list of trusted parameters through.
   def element_params
-    params.require(:element).permit(:page_id, :title, :description, :position)
+    params.require(:element).permit(:page_id, :title, :description, :position, :screenshot)
   end
 end

app/models/element.rb

@@ -11,6 +11,10 @@ class Element < ApplicationRecord
   before_validation :set_position
   before_update :update_positions, if: :position_changed?
 
+  has_one_attached :screenshot do |attachable|
+    attachable.variant :thumbnail, resize_to_limit: [ 200, 200 ]
+  end
+
   # Calculate actual conformity level:
   # - if a success_criterion has result :failed -> the confirmity_level
   #   of that success_criterion is not reached.

app/views/elements/_element.html.erb

@@ -17,11 +17,18 @@
         <i class="bi bi-trash"></i>
       <% end %>
     </div>
-    <% if element.description %>
-      <div class="mb-3">
-        <%= element.description %>
-      </div>
-    <% end %>
+    
+    <div class="d-flex flex-column flex-sm-row">
+      <% if element.description %>
+        <div class="mb-3 flex-fill">
+          <%= element.description %>
+        </div>
+      <% end %>
+      <%= safe_display(element.screenshot) do %> 
+        <%= image_tag(_1.variant(:thumbnail), class: "img-fluid", alt: "Screenshot des getesteten Elements") %>
+      <% end %>
+    </div>
+
     <p class="actions">
       
     </p>

app/views/elements/_element.odt.erb

@@ -7,6 +7,9 @@
   </div>
   <%= element.description_html %>
 
+  <%= image_tag(element.screenshot.preview(:thumbnail)) %>
+  <%= image_tag(element.screenshot) %>
+
   <% element.success_criteria.each do |sc| %>
     <%= render sc %>
   <% end %>

app/views/elements/_form.html.erb

@@ -1,7 +0,0 @@
-<%= bootstrap_form_with(model: element.persisted? ? element : [:page, element], class: "mb-3") do |form| %>
-  <%= form.hidden_field :page_id %>
-  <%= form.text_field :title %>
-  <%= form.rich_text_area :description %>
-  <%= form.submit class: "btn btn-primary" %>
-  <%= link_to("Abbrechen", element.persisted? ? element : element.report, class: "btn btn-outline-secondary") %>
-<% end %>

app/views/elements/_form.html.slim

@@ -0,0 +1,9 @@
+= bootstrap_form_with(model: element.persisted? ? element : [:page, element], class: "mb-3") do |form|
+  = form.hidden_field :page_id
+  = form.text_field :title
+  = form.rich_text_area :description
+  = form.file_field :screenshot 
+  - if element.persisted?
+    = safe_display(element.screenshot) { tag.div(link_to(_1.filename.to_s, _1), class: "mb-3") }
+  = form.submit class: "btn btn-primary"
+  = link_to("Abbrechen", element.persisted? ? element : element.report, class: "btn btn-outline-secondary")

app/views/elements/update.turbo_stream.slim

@@ -4,4 +4,5 @@
   / - element.success_criteria.each do |sc|
   /   = turbo_stream.update dom_id(sc, :title), "#{sc.page.position}.#{sc.element.position}.#{sc.position} #{sc.title}"
   - element.success_criteria.each do |sc|
-    = turbo_stream.update dom_id(sc, :position), "#{sc.page.position}.#{sc.element.position}.#{sc.position}"
+    = turbo_stream.update dom_id(sc, :position), "#{sc.page.position}.#{sc.element.position}.#{sc.position}"
+  = turbo_stream.replace dom_id(element, :frame), element

app/views/exports/show.html.slim

@@ -30,6 +30,8 @@ h2 Testbericht
   h3 = "#{page.position} #{page.path}"
   - page.elements { |e| e.success_criteria.any? { _1.failed? } }.each do |element|
     h4 = "#{element.number} #{element.title}"
+    = safe_display(element.screenshot) { image_tag(_1.representation(resize_to_fit: [250, 250]))}
+    = element.description 
     - element.success_criteria.select{ _1.failed? }.each do |sc|
       h5 = "#{sc.number} #{sc.title}"
       - if sc.test_comment?