WMDA Standard displaying in a modal window

Author: roper79

HOntoUML/client/Main.hs

@@ -110,7 +110,9 @@ gotoSituation s2 msRef = do
       highlightAssoc :: OUIdentified ie => ie -> IO JQuery
       highlightAssoc ie = getALine ie >>= setAttr "stroke" "red" >>= setAttr "stroke-width" "3"
       setStory :: IO JQuery
-      setStory = selectById "story-ufob" >>= setHtml (ousStory s2)
+      setStory = selectById "story-ufob" >>= setHtml story
+        where
+        story = "<h2>" <> ousName s2 <> "</h2>" <> ousStory s2
 
 -- Resizing --------------------------------------------------------------
 

web/css/main.css

@@ -236,7 +236,7 @@ footer {
 
 .diag-ufob {
    overflow: scroll;
-   height: 80%;
+   height: 100%;
    text-align: right;
 }
 

web/index.html

@@ -69,6 +69,11 @@
           </button>
         </span>
         <!-- Controls -->
+        <span id="standards-btn" class="btn-group btn-group-sm" role="group" style="margin-top: 7px;">
+          <button type="button" class="btn btn-default" title="Help" data-toggle="modal" data-target="#story-ufob-modal">
+            <span class="glyphicon glyphicon-book" aria-hidden="false"></span>
+          </button>
+        </span>
         <span id="controls" class="btn-group btn-group-sm" role="group" style="margin-top: 7px;">
           <button type="button" class="btn btn-default" data-toggle="tooltip" title="Resizer left" onclick="Haste['resizeLeft']()">
             <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
@@ -93,8 +98,6 @@
           <div class="diag-ufob">
             <object type='image/svg+xml' id='ufob-svg' data='img/ufob.svg' href='http://caniuse.com/#feat=svg'>Your browser does not support SVG</object>
           </div>
-          <div id="story-ufob" class="story-ufob">
-          </div>
         </div>
         <div id="ufoa-inst-box" class="ufoa-inst-box">
           <object type='image/svg+xml' id='ufoa-inst-svg' data='img/ufoa&#45;inst.svg' href='http://caniuse.com/#feat=svg'>Your browser does not support SVG</object> -->
@@ -196,6 +199,25 @@ <h2>Contacts</h2>
     </table>
   </div>
 
+  <!-- Story modal -->
+  <div id="story-ufob-modal" class="modal fade" role="dialog">
+    <div class="modal-dialog modal-lg">
+      <!-- Modal content-->
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h1 class="modal-title">WMDA Standards</h1>
+        </div>
+        <div id="story-ufob" class="modal-body">
+          Select a situation to display the applicable standards.
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Help modal -->
   <div id="help-modal" class="modal fade" role="dialog">
     <div class="modal-dialog modal-lg">

web/js/controls.js

@@ -7,9 +7,12 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
   if (target == '#simulation-tab') {
     $('#controls').css('display', 'inline-block');
     $('#help-btn').css('display', 'inline-block');
+    $('#standards-btn').css('display', 'inline-block');
+    $('#story-ufob').html('Select a situation to display the applicable standards.');
   } else {
     $('#controls').css('display', 'none');
     $('#help-btn').css('display', 'none');
+    $('#standards-btn').css('display', 'none');
   }
   currentTab = target;
 });