Add some toasts

app/helpers/application_helper.rb

@@ -28,4 +28,8 @@ module ApplicationHelper
   def current_page_displayed(page)
     @current_page&.id == page.id ? "open" : nil
   end
+
+  def turbo_stream_toast(content, alert)
+    turbo_stream.append("toasts", partial: "layouts/toast", locals: { content:, alert: })
+  end
 end

app/javascript/controllers/index.js

@@ -43,5 +43,8 @@ application.register("sortable", SortableController)
 import ThemeSwitcherController from "./theme_switcher_controller"
 application.register("theme-switcher", ThemeSwitcherController)
 
+import ToastController from "./toast_controller"
+application.register("toast", ToastController)
+
 import UnsavedChangesController from "./unsaved_changes_controller"
 application.register("unsaved-changes", UnsavedChangesController)

app/javascript/controllers/toast_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+import * as bootstrap from "bootstrap"
+
+// Connects to data-controller="toast"
+export default class extends Controller {
+  connect() {
+    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(this.element)
+    toastBootstrap.show()
+  }
+}

app/views/elements/create.turbo_stream.slim

@@ -1,3 +1,6 @@
 = turbo_stream.update "new_element_frame", partial: "pages/new_element_button", locals: { page: @element.page }
 = turbo_stream.append "element_list", @element
-= turbo_stream.append dom_id(@element.page, :page_nav_elements), partial: "elements/page_nav_row", locals: { element: @element, current_page: true }
+= turbo_stream.append dom_id(@element.page, :page_nav_elements), partial: "elements/page_nav_row", locals: { element: @element, current_page: true }
+
+
+= turbo_stream_toast("Element hinzugefügt", false)

app/views/elements/destroy.turbo_stream.slim

@@ -2,4 +2,7 @@
 = turbo_stream.remove dom_id(@element, :page_nav_row)
 - @element.page.elements.reject { _1 == @element }.each do |e|
   = turbo_stream.update dom_id(e, :title), "#{e.page.position}.#{e.position} #{e.title}"
-  = turbo_stream.replace dom_id(e, :page_nav_row), partial: "elements/page_nav_row", locals: { element: e, current_page: true }
+  = turbo_stream.replace dom_id(e, :page_nav_row), partial: "elements/page_nav_row", locals: { element: e, current_page: true }
+
+
+= turbo_stream_toast("Element wurde gelöscht", false)

app/views/elements/update.turbo_stream.slim

@@ -5,4 +5,7 @@
   /   = 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.replace dom_id(element, :frame), element
+  = turbo_stream.replace dom_id(element, :frame), element
+
+
+= turbo_stream_toast("Element gespeichert", false)

app/views/layouts/_toast.html.slim

@@ -0,0 +1,8 @@
+.toast class="#{alert ? "text-bg-danger" : ""}" role="alert" aria-live="assertive" aria-atomic="true" data={ controller: "toast" }
+  .toast-header
+    /img src="..." class="rounded me-2" alt="...">
+    /strong.me-auto = heading
+    .small.me-auto = l(Time.current.to_time)
+    button.btn-close type="button" data-bs-dismiss="toast" aria-label="Schliessen"
+  .toast-body
+    = content

app/views/layouts/application.html.slim

@@ -16,5 +16,12 @@ html data-bs-theme="#{cookies[:"modeTheme"] || "light"}" data-controller="set-th
         main.col.ps-md-2.pt-2
           #main-content[data-controller="rich-text-link-targets"]
             = yield
+    
+    .toast-container.position-fixed.bottom-0.start-0.p-3 id="toasts"
+      - if flash.alert
+        = render partial: "layouts/toast", locals: { content: flash.alert, alert: true }
+      - if flash.notice
+        = render partial: "layouts/toast", locals: { content: flash.notice, alert: false }
+
     /footer.container-fluid.mt-auto.border-top
       = Rails.configuration.build_version && "Version: #{Rails.configuration.build_version}"

app/views/pages/update.turbo_stream.slim

@@ -4,4 +4,6 @@
     = turbo_stream.update dom_id(element, :title), "#{element.page.position}.#{element.position} #{element.title}"
     = turbo_stream.replace dom_id(element, :page_nav_row), partial: "elements/page_nav_row", locals: { element: element, current_page: element.page == @page}
     - 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_toast("Pfad gespeichert", false)

app/views/success_criteria/update.turbo_stream.slim

@@ -2,4 +2,6 @@
 = turbo_stream.replace dom_id(@success_criterion, :body), partial: "success_criteria/body", locals: {success_criterion: @success_criterion }
 
 - @success_criterion.element.success_criteria.each do |sc|
-  = turbo_stream.update(dom_id(sc, :position), sc.number)
+  = turbo_stream.update(dom_id(sc, :position), sc.number)
+
+= turbo_stream_toast("Erfolgskriterium gespeichert: #{t("activerecord.attributes.success_criterion.results/#{@success_criterion.result}")}", false)