MaMpf-HD · Splines · Mar 20, 2024 · Jun 4, 2023 · Jun 4, 2023 · Jul 3, 2023
diff --git a/app/assets/javascripts/feedback.js b/app/assets/javascripts/feedback.js
@@ -0,0 +1,24 @@
+$(document).on('turbolinks:load', () => {
+    registerToasts();
+    registerSubmitButtonHandler();
+});
+
+TOAST_OPTIONS = {
+    animation: true,
+    autohide: true,
+    delay: 6000 // autohide after ... milliseconds
+};
+
+function registerToasts() {
+    const toastElements = document.querySelectorAll('.toast');
+    const toastList = [...toastElements].map(toast => {
+        new bootstrap.Toast(toast, TOAST_OPTIONS);
+    });
+}
+
+function registerSubmitButtonHandler() {
+    $('#submit-form-btn-outside').click(() => {
+        // Invoke the hidden submit button inside the actual Rails form
+        $('#submit-form-btn').click();
+    });
+}
diff --git a/app/assets/javascripts/lectures.coffee b/app/assets/javascripts/lectures.coffee
@@ -217,6 +217,7 @@ $(document).on 'turbolinks:load', ->
     $('#secondnav').show()
     $('#lecturesDropdown').appendTo($('#secondnav'))
     $('#notificationDropdown').appendTo($('#secondnav'))
+    $('#feedback-btn').appendTo($('#secondnav'))
     $('#searchField').appendTo($('#secondnav'))
     $('#second-admin-nav').show()
     $('#adminDetails').appendTo($('#second-admin-nav'))
@@ -239,6 +240,7 @@ $(document).on 'turbolinks:load', ->
     $('#secondnav').hide()
     $('#lecturesDropdown').appendTo($('#firstnav'))
     $('#notificationDropdown').appendTo($('#firstnav'))
+    $('#feedback-btn').appendTo($('#firstnav'))
     $('#searchField').appendTo($('#firstnav'))
     $('#second-admin-nav').hide()
     $('#teachableDrop').appendTo($('#first-admin-nav'))

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -302,4 +302,8 @@ a {
   &:hover {
     text-decoration: underline;
   }
-}
+}
+
+.toast {
+  background-color: white;
+}
diff --git a/app/assets/stylesheets/feedback.scss b/app/assets/stylesheets/feedback.scss
@@ -0,0 +1,11 @@
+#feedback-btn {
+    color: white;
+
+    &:focus {
+        box-shadow: none;
+    }
+
+    &:hover {
+        color: #ffc107;
+    }
+}
diff --git a/app/controllers/feedbacks_controller.rb b/app/controllers/feedbacks_controller.rb
@@ -0,0 +1,21 @@
+class FeedbacksController < ApplicationController
+  authorize_resource except: [:create]
+
+  def create
+    feedback = Feedback.new(feedback_params)
+    feedback.user_id = current_user.id
+    @feedback_success = feedback.save
+
+    if @feedback_success
+      FeedbackMailer.with(feedback: feedback).new_user_feedback_email.deliver_later
+    end
+
+    respond_to(&:js)
+  end
+
+  private
+
+    def feedback_params
+      params.require(:feedback).permit(:title, :feedback, :can_contact)
+    end
+end
diff --git a/app/mailers/feedback_mailer.rb b/app/mailers/feedback_mailer.rb
@@ -0,0 +1,15 @@
+class FeedbackMailer < ApplicationMailer
+  default from: DefaultSetting::FEEDBACK_EMAIL
+  layout false
+
+  # Mail to the MaMpf developers including the new feedback of a user.
+  def new_user_feedback_email
+    @feedback = params[:feedback]
+    reply_to_mail = @feedback.can_contact ? @feedback.user.email : ''
+    subject = "Feedback: #{@feedback.title}"
+    mail(to: DefaultSetting::FEEDBACK_EMAIL,
+         subject: subject,
+         content_type: 'text/plain',
+         reply_to: reply_to_mail)
+  end
+end
diff --git a/app/models/feedback.rb b/app/models/feedback.rb
@@ -0,0 +1,3 @@
+class Feedback < ApplicationRecord
+  belongs_to :user
+end
diff --git a/app/views/feedback_mailer/new_user_feedback_email.text.erb b/app/views/feedback_mailer/new_user_feedback_email.text.erb
@@ -0,0 +1,13 @@
+# Title (optional)
+<%= @feedback.title %>
+
+# Feedback
+<%= @feedback.feedback %>
+
+
+-----
+<% if @feedback.can_contact %>
+Reply to this mail to contact the user.
+<% else %>
+User did not give permission to contact them regarding their feedback, so we cannot reply to this mail.
+<% end %>
diff --git a/app/views/feedbacks/_feedback.html.erb b/app/views/feedbacks/_feedback.html.erb
@@ -0,0 +1,44 @@
+<%= stylesheet_link_tag 'feedback' %>
+
+<%# Main Modal %>
+<div id="submit-feedback" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Submit feedback" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content p-4">
+      <%= render partial: 'feedbacks/feedback_form' %>
+    </div>
+  </div>
+</div>
+
+<%# Messages toasts %>
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+  <%# Error %>
+  <div role="alert" aria-live="assertive" aria-atomic="true"
+    class="toast" id="toast-could-not-send">
+
+    <div class="toast-header text-danger">
+      <i class="bi bi-x-square-fill pe-1"></i>
+      <strong class="me-auto"> <%= t('feedback.error_short') %></strong>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+
+    <div class="toast-body">
+      <%= t('feedback.error') %>
+    </div>
+  </div>
+
+  <%# Success %>
+  <div role="alert" aria-live="assertive" aria-atomic="true"
+    class="toast" id="toast-successfully-sent">
+
+    <div class="toast-header text-success">
+      <i class="bi bi-check-square-fill pe-1"></i>
+      <strong class="me-auto"> <%= t('feedback.success_short') %></strong>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+
+    <div class="toast-body">
+      <%= t('feedback.success') %>
+    </div>
+  </div>
+
+</div>
diff --git a/app/views/feedbacks/_feedback_button.html.erb b/app/views/feedbacks/_feedback_button.html.erb
@@ -0,0 +1,8 @@
+<%= stylesheet_link_tag 'feedback' %>
+
+<%# Feedback button %>
+<button type="button" id="feedback-btn" class="btn ms-1 me-1" title="<%= t('feedback.tooltip') %>"
+    data-bs-toggle="modal"
+    data-bs-target="#submit-feedback">
+  <i class="bi bi-star-fill"></i>
+</button>
diff --git a/app/views/feedbacks/_feedback_form.html.erb b/app/views/feedbacks/_feedback_form.html.erb
@@ -0,0 +1,59 @@
+<%= javascript_include_tag :feedback %>
+
+<div class="modal-header">
+  <i class="bi bi-star-fill me-3"></i>
+  <h1 class="modal-title fs-5"><%= t('feedback.modal_title') %></h1>
+  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+  </button>
+</div>
+
+<div class="modal-body">
+  <%= t('feedback.description_html',
+    github_mampf: link_to('GitHub', 'https://github.com/MaMpf-HD/mampf/issues', {target: '_blank'}),
+    feedback_mail: mail_to(DefaultSetting::FEEDBACK_EMAIL, t('basics.mail_noun'))) %>
+
+  <%= form_with model: Feedback.new, remote: true do |f| %>
+    <%# Title %>
+    <div class="form-floating mb-3">
+      <%= f.text_field :title, class: 'form-control', placeholder: '_' %>
+      <%= f.label :title, t('feedback.title') %>
+    </div>
+
+    <%# Comment %>
+    <div class="form-floating mb-3">
+      <%= f.text_area :feedback,
+            class: 'form-control',
+            placeholder: '_',
+            style: 'height: 200px',
+            required: '',
+            minlength: '10' %>
+      <%= f.label :feedback, t('feedback.comment') %>
+    </div>
+
+    <%# Email contact %>
+    <div class="form-check">
+      <%= f.check_box :can_contact,
+        checked: 'checked',
+        class: 'form-check-input' %>
+      <%= f.label :can_contact,
+        t('feedback.mail_checkbox', user_mail: @current_user.email),
+        class: 'form-check-label' %>
+    </div>
+
+    <%# Submit %>
+    <%# Dummy submit button, the actual submit button is in the modal footer %>
+    <%= f.submit 'Submit', id: 'submit-form-btn', style: 'display: none;' %>
+  <% end %>
+</div>
+
+<div class="modal-footer">
+  <%# Cancel %>
+  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+    <%= t('buttons.cancel') %>
+  </button>
+
+  <%# Submit %>
+  <button type="button" id="submit-form-btn-outside" class="btn btn-primary">
+    <%= t('buttons.save') %>
+  </button>
+</div>
diff --git a/app/views/feedbacks/create.js.erb b/app/views/feedbacks/create.js.erb
@@ -0,0 +1,7 @@
+<% if @feedback_success %>
+    $('#submit-feedback').modal('hide');
+    $('#submit-feedback').find('form').trigger('reset'); // clear form
+    $('#toast-successfully-sent').toast('show');
+<% else %>
+    $('#toast-could-not-send').toast('show');
+<% end %>
diff --git a/app/views/shared/_dropdown_notifications.html.erb b/app/views/shared/_dropdown_notifications.html.erb
@@ -1,7 +1,7 @@
 <% relevant_notifications = current_user.notifications
                                         .sort_by(&:created_at).reverse %>
 <% if relevant_notifications.present? %>
-  <ul class="navbar-nav me-3"
+  <ul class="navbar-nav"
       id="notificationDropdown">
     <li class="nav-item">
       <div class="btn-group">
@@ -49,4 +49,4 @@
       </div>
     </li>
   </ul>
-<% end %>
+<% end %>
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
@@ -46,7 +46,7 @@
              bugs: link_to(t('here'),
                             'https://github.com/MaMpf-HD/mampf/issues',
                             target: :_blank),
-             feedback: mail_to(DefaultSetting::PROJECT_EMAIL, nil),
+             feedback: mail_to(DefaultSetting::FEEDBACK_EMAIL, nil),
              background_photo_credit: link_to('Junpeng Ouyang',
                             'https://unsplash.com/photos/nGs0d1dGFng',
                             target: :_blank)) %>

diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
@@ -1,5 +1,8 @@
 <% I18n.with_locale(current_user.try(:locale)) do %>
 <%= stylesheet_link_tag 'navbar' %>
+
+<%= render partial: 'feedbacks/feedback' %>
+
 <div class="navbars-container">
   <nav class="navbar navbar-expand" id="firstnav">
     <%= link_to image_tag('MaMpf-Logo.svg',
@@ -30,7 +33,6 @@
           </a>
         </li>
 
-
         <% if current_user.admin || current_user.editor? || current_user.teacher? %>
           <li class="nav-item">
             <a href="<%= administration_path %>"
@@ -41,7 +43,6 @@
           </li>
         <% end %>
 
-
         <li class="nav-item">
           <a href="<%= watchlists_path %>"
             id="watchlistsIcon"
@@ -51,7 +52,6 @@
           </a>
         </li>
 
-
         <li class="nav-item">
           <a href="<%= comments_path %>"
             id="commentsIcon"
@@ -63,7 +63,6 @@
           </a>
         </li>
 
-
         <li class="nav-item">
           <a href="<%= news_path %>"
             class="nav-link bi bi-megaphone-fill <%= get_class_for_path(news_path()) %>"
@@ -72,7 +71,6 @@
           </a>
         </li>
 
-
         <li class="nav-item">
           <a href="<%= DefaultSetting::BLOG_LINK %>"
             class="nav-link bi bi-newspaper"
@@ -81,7 +79,6 @@
           </a>
         </li>
 
-
         <li class="nav-item">
           <a href="<%= destroy_user_session_path(params: { locale: current_user.locale }) %>"
             class="nav-link bi bi-box-arrow-right"
@@ -96,7 +93,11 @@
         <%= render partial: 'shared/dropdown_lectures',
                   locals: { lecture: @lecture || current_lecture } %>
       </ul>
-      <%= render partial: 'shared/dropdown_notifications'%>
+
+      <%= render partial: 'shared/dropdown_notifications' %>
+
+      <%= render partial: 'feedbacks/feedback_button' %>
+
       <%= form_tag(search_index_path,
                   method: 'get',
                   class: 'form-inline mt-2 mt-md-0',

diff --git a/config/initializers/default_setting.rb b/config/initializers/default_setting.rb
@@ -1,10 +1,11 @@
 class DefaultSetting
-  ERDBEERE_LINK = ENV['ERDBEERE_SERVER']
-  MUESLI_LINK = ENV['MUESLI_SERVER']
-  PROJECT_EMAIL = ENV['PROJECT_EMAIL']
-  PROJECT_NOTIFICATION_EMAIL = ENV['PROJECT_NOTIFICATION_EMAIL']
-  BLOG_LINK = ENV['BLOG']
-  URL_HOST_SHORT = ENV['URL_HOST_SHORT']
+  ERDBEERE_LINK = ENV.fetch('ERDBEERE_SERVER', nil)
+  MUESLI_LINK = ENV.fetch('MUESLI_SERVER', nil)
+  PROJECT_EMAIL = ENV.fetch('PROJECT_EMAIL', nil)
+  FEEDBACK_EMAIL = ENV.fetch('FEEDBACK_EMAIL', nil)
+  PROJECT_NOTIFICATION_EMAIL = ENV.fetch('PROJECT_NOTIFICATION_EMAIL', nil)
+  BLOG_LINK = ENV.fetch('BLOG', nil)
+  URL_HOST_SHORT = ENV.fetch('URL_HOST_SHORT', nil)
   RESEARCHGATE_LINK = 'https://www.researchgate.net/project/MaMpf-Mathematische-Medienplattform'
   TOUR_LINK = 'https://mampf.blog/ueber-mampf/'
   RESOURCES_LINK = 'https://mampf.blog/ressourcen-fur-editorinnen/'

diff --git a/config/locales/de.yml b/config/locales/de.yml
@@ -3162,6 +3162,7 @@ de:
     course_editors: 'ModuleditorInnen'
     lecture_editors: 'zusätzliche VeranstaltungseditorInnen'
     display_name: 'Anzeigename'
+    mail_noun: 'E-Mail'
     email: 'E-Mail-Adresse'
     preferences: 'Einstellungen'
     language: 'Sprache'
@@ -3792,3 +3793,27 @@ de:
             name:
               taken:
                 'Eine Watchlist mit diesem Namen existiert bereits.'
+  feedback:
+    tooltip: Feedback geben
+    modal_title: Feedback geben
+    title: Titel (optional)
+    comment: Dein Kommentar
+    description_html: >
+      <p>Wir freuen uns über Dein Feedack zu MaMpf, sei es Lob, Kritik oder
+      Anregungen, wie wir als Entwickler:innen-Team die Plattform voranbringen
+      können. Falls Du einen Bug gefunden hast und einen GitHub-Account hast,
+      dann erstelle am besten direkt auf %{github_mampf} ein Issue. Ansonsten
+      gerne auch über dieses Formular oder direkt per %{feedback_mail}.</p>
+    mail_checkbox: >
+      Erlaube es uns, Dich per E-Mail (%{user_mail}) zu kontaktieren, falls es
+      Rückfragen zu Deinem Feedback gibt.
+    success_short: >
+      Feedback erfolgreich gesendet
+    success: >
+      Vielen Dank für Dein Feedback! Wir werden es in Kürze bearbeiten.
+    error_short: >
+      Fehler beim Senden des Feedbacks
+    error: >
+      Entschuldigung, leider ist beim Speichern ein Fehler aufgetreten.
+      Bitte speichere Dein Feedback händisch, indem Du es kopierst,
+      und versuche es später noch einmal.