4 files changed, 57 insertions, 18 deletions

diff --git a/webgui/data/index.html b/webgui/data/index.html
index e4a6c63..b677387 100644
--- a/webgui/data/index.html
+++ b/webgui/data/index.html
@@ -15,14 +15,14 @@
       Need javascript to function.
     </p>
     <div class="tabs">
-      <ul class="tab-links">
+      <ul class="tabLinks" id="tabLinks">
         <li class="active"><a href="#editor">Editor</a></li>
         <li><a href="#drafts">Drafts</a></li>
         <li><a href="#printers">Printers & Jobs</a></li>
         <li id="errors-tab" style="display:none;"><a href="#errors">Errors</a></li>
       </ul>
 
-      <div class="tab-content">
+      <div class="tabContent" id="tabContent">
         <div class="tab active" id="editor">
           <!-- <label id="titleLabel" for="editorTitle">Title</label> -->
           <input id="saveDraft" type="checkbox" checked="checked" /><label for="saveDraft">Save as Draft</label>
diff --git a/webgui/data/style.css b/webgui/data/style.css
index fd40d92..d496e2a 100644
--- a/webgui/data/style.css
+++ b/webgui/data/style.css
@@ -98,6 +98,16 @@ tr.focused td {
     background-color:#f0f0f0;
 }
 
+.close {
+    float:right;
+    text-decoration:underline;
+    color:#4c4c4c;
+}
+
+.close:hover {
+    text-decoration:none;
+}
+
 /*----- Tabs -----*/
 .tabs {
     display:block;
@@ -109,7 +119,7 @@ tr.focused td {
 }
 
 /*----- Tab Links -----*/
-.tab-links {
+.tabLinks {
     display:block;
     height:2.2em;
     margin:0;
@@ -118,19 +128,19 @@ tr.focused td {
 }
 
 /* Clearfix */
-.tab-links:after {
+.tabLinks:after {
     display:block;
     clear:both;
     content:'';
 }
 
-.tab-links li {
+.tabLinks li {
     margin:0px 0.5em;
     float:left;
     list-style:none;
 }
 
-.tab-links a {
+.tabLinks a {
     padding:0.5em 1em;
     display:inline-block;
     border-radius:3px 3px 0px 0px;
@@ -141,7 +151,7 @@ tr.focused td {
     transition:all linear 0.15s;
 }
 
-.tab-links a:hover {
+.tabLinks a:hover {
     text-decoration:none;
 }
 
@@ -156,7 +166,7 @@ li.active a, li.active a:hover {
 }
 
 /*----- Content of Tabs -----*/
-.tab-content {
+.tabContent {
     padding:0.5em;
     border:1px solid #ddd;
     border-radius:3px;
diff --git a/webgui/data/tabs.js b/webgui/data/tabs.js
index 1d178d9..0cdb8e5 100644
--- a/webgui/data/tabs.js
+++ b/webgui/data/tabs.js
@@ -1,13 +1,22 @@
 jQuery(document).ready(function() {
-    jQuery('.tabs .tab-links a').on('click', function(e)  {
-        var currentAttrValue = jQuery(this).attr('href');
+    jQuery('.tabs .tabLinks a').on('click', switchTab);
+
+    var observer = new window.MutationObserver(function(mutations, observer) {
+        jQuery('.tabs .tabLinks a').on('click', switchTab);
+    });
+    jQuery('.tabLinks').each( function () {
+        observer.observe(this, { childList: true, subtree: true });
+    });
+});
+
+function switchTab(e) {
+    var currentAttrValue = jQuery(this).attr('href');
  
-        // Show/Hide Tabs
-        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
+    // Show/Hide Tabs
+    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
  
-        // Change/remove current tab to active
-        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
+    // Change/remove current tab to active
+    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
  
-        e.preventDefault();
-    });
-});
+    e.preventDefault();
+}
diff --git a/webgui/src/Main.hs b/webgui/src/Main.hs
index 644c4f6..018e59b 100644
--- a/webgui/src/Main.hs
+++ b/webgui/src/Main.hs
@@ -361,7 +361,27 @@ setup Config{..} window (split -> (socketErr, dataUpdate)) = void $ do
               let abortButton' = case status of
                     Queued _ -> [abortButton]
                     _ -> []
-              actions <- UI.td # set children abortButton'
+                  viewJob = do
+                    tabLinkList <- fatal' "Could not find tab link list" =<< getElementById window "tabLinks"
+                    tabContainer <- fatal' "Could not find tab container" =<< getElementById window "tabContent"
+                    content <- job rJId
+                    let
+                      text = cobbcode content
+                    case text of
+                      Left err -> emitError $ "Could not decode content of job #" ++ show jId ++ ": " ++ show err
+                      Right (T.unpack -> text) -> void $ do
+                        tabLink <- UI.a # set UI.href ("#viewJob" ++ show jId) # set UI.text ("Job #" ++ show jId)
+                        tabLinkItem <- UI.li # set children [tabLink]
+                        return tabLinkList #+ [ return tabLinkItem ]
+                        closeLink <- UI.a # set UI.text "Close Tab" # set UI.class_ "close" # set UI.href "#printers"
+                        tabContent <- UI.pre # set UI.text text
+                        tab <- UI.new # set children [closeLink, tabContent] # set UI.id_ ("viewJob" ++ show jId) # set UI.class_ "tab"
+                        return tabContainer #+ [ return tab ]
+                        on UI.click closeLink . const $ mapM_ delete [tabLink, tabLinkItem, closeLink, tabContent, tab] >> runFunction (switchTab "printers")
+                        runFunction . switchTab $ "viewJob" ++ show jId
+              viewButton <- UI.button # set UI.text "View"
+              on UI.click viewButton . const $ viewJob
+              actions <- UI.td # set children (viewButton : abortButton')
               UI.tr # set UI.id_ ("job" ++ show jId) # set children [jPId, jId', time', jStatus', actions] # sink UI.class_ (bool "" "focused" . Set.member rJId <$> focusedJobs)
           (:) <$> UI.tr # set children [pId', pFiller, pStatus', pSelect'] <*> mapM toLine jobs