First step of online html export

app/assets/stylesheets/exports.scss

@@ -0,0 +1,152 @@
+$font-family-sans-serif: // Cross-platform generic font family (default user interface font)
+  system-ui,
+  // Safari for macOS and iOS (San Francisco)
+  -apple-system,
+  // Windows
+  "Segoe UI",
+  // Android
+  Roboto,
+  // Basic web fallback
+  "Helvetica Neue", Arial,
+  // Linux
+  "Noto Sans",
+  "Liberation Sans",
+  // Sans serif fallback
+  sans-serif,
+  // Emoji fonts
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+$enable-rounded: false;
+
+@import 'bootstrap/scss/bootstrap';
+
+@font-face {
+  font-display: block;
+  font-family: "bootstrap-icons";
+  src: url("./bootstrap-icons.woff2") format("woff2"),
+    url("./bootstrap-icons.woff") format("woff");
+}
+
+@import 'bootstrap-icons/font/bootstrap-icons';
+
+
+.rails-bootstrap-forms-date-select select,
+.rails-bootstrap-forms-time-select select,
+.rails-bootstrap-forms-datetime-select select {
+  display: inline-block;
+  width: auto;
+}
+
+.rails-bootstrap-forms-error-summary {
+  margin-top: 10px;
+}
+
+
+@import "trix/dist/trix";
+
+/*
+ * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+ * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+ * inclusion directly in any other asset bundle and remove this file.
+ *
+ *= require trix
+*/
+
+/*
+ * We need to override trix.css’s image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+.trix-content .attachment-gallery>action-text-attachment,
+.trix-content .attachment-gallery>.attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2>action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2>.attachment,
+.trix-content .attachment-gallery.attachment-gallery--4>action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4>.attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}
+
+
+/* Fix trix dark mode */
+.trix-button-row {
+  .trix-button-group {
+    border: var(--bs-border-width) solid var(--bs-border-color);
+
+    .trix-button {
+      border: 0;
+      padding: var(--bs-padding)
+    }
+  }
+}
+
+[data-bs-theme=dark] {
+  .trix-button-row {
+    .trix-button-group {
+      .trix-button {
+        background-color: transparent !important;
+        filter: invert(100%) !important;
+      }
+    }
+  }
+}
+
+/* end fix trix dark mode */
+
+.trix-content {
+  pre {
+    background-color: var(--bs-secondary-bg) !important;
+    color: var(--bs-secondary-color) !important;
+    border: var(--bs-border-width) solid var(--bs-border-color) !important;
+    border-radius: 0 !important;
+  }
+
+  p {
+    margin-bottom: 0.6rem;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+trix-toolbar .trix-dialog {
+  background: var(--bs-secondary-bg) !important;
+  background-color: var(--bs-secondary-bg) !important;
+  color: var(--bs-secondary-color) !important;
+  border: var(--bs-border-width) solid var(--bs-border-color) !important;
+  border-radius: 0 !important;
+  box-shadow: none;
+  font-size: 1.1rem;
+}
+
+trix-toolbar .trix-button {
+  background: var(--bs-secondary-bg) !important;
+  background-color: var(--bs-secondary-bg) !important;
+  color: var(--bs-secondary-color) !important;
+  border: var(--bs-border-width) solid var(--bs-border-color) !important;
+  border-radius: 0 !important;
+
+}
+
+trix-toolbar .trix-input--dialog {
+  background: var(--bs-secondary-bg) !important;
+  background-color: var(--bs-secondary-bg) !important;
+  color: var(--bs-secondary-color) !important;
+  border: var(--bs-border-width) solid var(--bs-border-color) !important;
+  border-radius: 0 !important;
+}
+
+trix-toolbar .trix-dialog--link {
+  max-width: 900px;
+}

app/controllers/exports_controller.rb

@@ -0,0 +1,26 @@
+# frozen_string_literals: true
+
+class ExportsController < ApplicationController
+  layout "exports"
+
+  allow_unauthenticated_access only: [ :show ]
+
+  before_action :set_report
+
+  def show
+    @failed_success_criteria = @report.pages
+                                      .map(&:elements)
+                                      .flatten
+                                      .map(&:success_criteria)
+                                      .flatten
+                                      .select(&:failed?)
+    respond_to do |format|
+      format.html
+    end
+  end
+
+  private
+  def set_report
+    @report = Report.find(params[:report_id])
+  end
+end

app/models/report.rb

@@ -5,6 +5,5 @@ class Report < ApplicationRecord
   has_many :elements, through: :pages, dependent: :destroy
   has_rich_text :comment
 
-
   validates :name, presence: true
 end

app/views/exports/show.html.slim

@@ -0,0 +1,55 @@
+h1 id=dom_id(@report) = @report.name
+
+h2#toc Inhaltsverzeichnis 
+nav
+  = link_to(@report.name, "##{dom_id(@report)}")
+  ul
+    li = link_to("Inhaltsverzeichnis", "#toc")
+    li 
+      = link_to('Testbericht')
+      ul
+        - @report.pages.select { |p| p.elements.any? { |e| e.success_criteria.any?(&:failed?) } }.each do |page|
+          li
+            = link_to("#{page.position} #{page.path}", "##{dom_id(page)}")
+            ul
+              - page.elements.select { |e| e.success_criteria.any?(&:failed?) }.each do |element|
+                li
+                  = link_to("#{element.number} #{element.title}")
+                  ul
+                    - element.success_criteria.select(&:failed?).each do |sc|
+                      li = link_to("#{sc.number} #{sc.title}", "##{dom_id(sc)}")
+    li
+      = link_to("Anhang")
+      ul
+        - @failed_success_criteria.group_by(&:check).each do |check, scs|
+          li = link_to(check.display_label)
+
+
+h2 Testbericht
+- @report.pages.select { |p| p.elements.any? { |e| e.success_criteria.any? { _1.failed? } } }.each do |page|
+  h3 = "#{page.position} #{page.path}"
+  - page.elements { |e| e.success_criteria.any? { _1.failed? } }.each do |element|
+    h4 = "#{element.number} #{element.title}"
+    - element.success_criteria.select{ _1.failed? }.each do |sc|
+      h5 = "#{sc.number} #{sc.title}"
+      - if sc.test_comment?
+        p = sc.test_comment
+      dl
+        dt Kriterium 
+        dd = sc.quick_criterion 
+        dt Fail
+        dd = sc.quick_fail
+        dt Fix
+        dd = sc.quick_fix
+        dt WCAG 
+        dd = link_to(sc.check.external_number, sc.check.external_url) 
+
+h2 Anhang 
+
+h3 Liste der zu beachtenden WCAG Regeln 
+
+- @failed_success_criteria.group_by(&:check).each do |check, scs|
+  h4 = check.display_label
+  = check.criterion_de
+  strong Erfolgskriterien
+  p = scs.map(&:number).join(", ")

app/views/layouts/exports.html.slim

@@ -0,0 +1,12 @@
+doctype html
+html data-bs-theme="light" data-controller="set-theme"
+  head
+    title a11ydive Export
+    meta[name="viewport" content="width=device-width,initial-scale=1"]
+    = csrf_meta_tags
+    = csp_meta_tag
+    = stylesheet_link_tag "exports", "data-turbo-track": "reload"
+    = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
+  body
+    main#main-content
+      = yield

app/views/reports/show.html.slim

@@ -37,22 +37,25 @@ h1
     - else 
       'Gehen Sie weiter, hier gibt es nichts zu sehen.
 .action-row
-  = link_to report_path(@report, format: :pdf), class: "btn btn-secondary", target: "_blank" do
+  = link_to(report_export_path(@report), class: "btn btn-secondary", target: :_blank) do 
-    i.bi.bi-filetype-pdf
-    |  PDF 
-  = link_to report_path(@report, format: :docx), class: "btn btn-secondary", target: "_blank" do
-    i.bi.bi-filetype-docx
-    |  DOCX 
-  = link_to report_path(@report, format: :xlsx), class: "btn btn-secondary", target: "_blank" do
-    i.bi.bi-filetype-xlsx
-    |  XLSX 
-  = link_to report_path(@report, format: :rtf), class: "btn btn-secondary", target: "_blank" do
-    i.bi.bi-file-richtext
-    |  RTF 
-  = link_to report_path(@report, format: :xml), class: "btn btn-secondary", target: "_blank" do
     i.bi.bi-filetype-html
-    |  HTML 
+    | Online HTML 
-  = link_to report_path(@report, format: :odt), class: "btn btn-secondary", target: "_blank" do
+  / = link_to report_path(@report, format: :pdf), class: "btn btn-secondary", target: "_blank" do
+  /   i.bi.bi-filetype-pdf
+  /   |  PDF 
+  / = link_to report_path(@report, format: :docx), class: "btn btn-secondary", target: "_blank" do
+  /   i.bi.bi-filetype-docx
+  /   |  DOCX 
+  / = link_to report_path(@report, format: :xlsx), class: "btn btn-secondary", target: "_blank" do
+  /   i.bi.bi-filetype-xlsx
+  /   |  XLSX 
+  / = link_to report_path(@report, format: :rtf), class: "btn btn-secondary", target: "_blank" do
+  /   i.bi.bi-file-richtext
+  /   |  RTF 
+  / = link_to report_path(@report, format: :xml), class: "btn btn-secondary", target: "_blank" do
+  /   i.bi.bi-filetype-html
+  /   |  HTML 
+  / = link_to report_path(@report, format: :odt), class: "btn btn-secondary", target: "_blank" do
     i.bi.bi-file-richtext
     |  ODT 
 .action-row

config/routes.rb

@@ -22,6 +22,7 @@ Rails.application.routes.draw do
         end
       end
     end
+    resource :export, only: %i[show]
     member do 
       get "(-/:page_id)", action: :show, as: "", constraints: { id: /\d+/ }
     end