diff --git a/app/assets/javascripts/modules/smart_answer_flowchart.js b/app/assets/javascripts/modules/smart_answer_flowchart.js new file mode 100644 index 000000000..0520d09fc --- /dev/null +++ b/app/assets/javascripts/modules/smart_answer_flowchart.js @@ -0,0 +1,25 @@ +//= require mermaid/dist/mermaid + +(function (Modules) { + 'use strict' + + Modules.SmartAnswerFlowchart = function () { + this.start = function (element) { + var diagram = element.find('.flowchart') + var flowchartLoading = element.find('.flowchart__loading') + + // eslint-disable-next-line + mermaid.initialize( + { + startOnLoad: true, + flowchart: { + useMaxWidth: false + } + } + ) + + diagram.removeClass('flowchart--hidden') + flowchartLoading.addClass('flowchart__loading--hidden') + } + } +})(window.GOVUKAdmin.Modules) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 6fb828a23..80439a259 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -19,6 +19,7 @@ // Pages @import "downtime"; @import "smart_answer_builder"; +@import "smart_answer_flowchart"; // GOVUK Design System @import "govuk_publishing_components/all_components"; diff --git a/app/assets/stylesheets/smart_answer_flowchart.scss b/app/assets/stylesheets/smart_answer_flowchart.scss new file mode 100644 index 000000000..a8ada8453 --- /dev/null +++ b/app/assets/stylesheets/smart_answer_flowchart.scss @@ -0,0 +1,14 @@ +.smart-answer-flowchart { + .mermaid { + background-color: #ffffff; + } + + .flowchart--hidden, + .flowchart__loading--hidden { + display: none; + } + + pre { + word-break: normal; + } +} diff --git a/app/controllers/editions_controller.rb b/app/controllers/editions_controller.rb index f9faf9c63..f2a9fa7e2 100644 --- a/app/controllers/editions_controller.rb +++ b/app/controllers/editions_controller.rb @@ -235,6 +235,13 @@ def process_unpublish end end + def diagram + # [MT] TODO: What's the best way to handle requests for a diagram for a non-simple smart answer? + if @resource.format != "SimpleSmartAnswer" + render plain: "404 Not Found", status: :not_found + end + end + protected def permitted_params(subtype: nil) diff --git a/app/views/editions/diagram.html.erb b/app/views/editions/diagram.html.erb new file mode 100644 index 000000000..bd0388500 --- /dev/null +++ b/app/views/editions/diagram.html.erb @@ -0,0 +1,15 @@ +<%= render 'shared/edition_header' %> + +

+ <%= link_to "Back to current edition", edition_path(@resource.history.first), :class => "btn btn-default" %> +

+ +
+
+    <%= @resource.generate_mermaid %>
+  
+ +

Generating diagram ...

+
+ +<% content_for :page_title, "Diagram for #{@resource.title}" %> diff --git a/app/views/editions/show.html.erb b/app/views/editions/show.html.erb index 41d868f67..7b4906793 100644 --- a/app/views/editions/show.html.erb +++ b/app/views/editions/show.html.erb @@ -27,6 +27,12 @@