factor out onclick javascript

Assistant/WebApp.hs

@@ -165,3 +165,11 @@ webAppFormAuthToken :: Widget
 webAppFormAuthToken = do
 	webapp <- lift getYesod
 	[whamlet|<input type="hidden" name="auth" value="#{secretToken webapp}">|]
+
+{- A button with an icon, and maybe label, that can be clicked to perform
+ - some action.
+ - With javascript, clicking it POSTs the Route, and remains on the same
+ - page.
+ - With noscript, clicking it GETs the Route. -}
+actionButton :: Route WebApp -> (Maybe String) -> String -> String -> Widget
+actionButton route label buttonclass iconclass = $(widgetFile "actionbutton")

Assistant/WebApp/SideBar.hs

@@ -53,7 +53,6 @@ sideBarDisplay = do
 		addalert :: AlertId -> Bool -> Bool -> Text -> Maybe Text -> Text -> Maybe String -> Widget
 		addalert i closable block divclass heading message icon = do
 			let alertid = show i
-			let closealert = CloseAlert i
 			$(widgetFile "sidebar/alert")
 
 {- Called by client to get a sidebar display.

templates/actionbutton.hamlet

@@ -0,0 +1,2 @@
+<a class="#{buttonclass}" href="@{route}" onclick="(function( $ ) { $.post('@{route}'); })( jQuery ); return false;">
+  <i class="#{iconclass}"></i> #{fromMaybe "" label}

templates/dashboard/transfers.hamlet

@@ -28,10 +28,7 @@
                 <div .bar style="width: #{percent};">
           <div .btn-group .span2>
             $if isNothing (startedTime info)
-              <a .btn href="@{StartTransferR transfer}" onclick="(function( $ ) { $.post('@{StartTransferR transfer}'); })( jQuery ); return false;">
-                <i .icon-play title="start"></i>
+              ^{actionButton (StartTransferR transfer) Nothing "btn" "icon-play"}
             $else
-              <a .btn href="@{PauseTransferR transfer}" onclick="(function( $ ) { $.post('@{PauseTransferR transfer}'); })( jQuery ); return false;">
-                <i .icon-pause title="pause"></i>
-            <a .btn href="@{CancelTransferR transfer}" onclick="(function( $ ) { $.post('@{CancelTransferR transfer}'); })( jQuery ); return false;">
-              <i .icon-remove title="cancel"></i>
+              ^{actionButton (PauseTransferR transfer) Nothing "btn" "icon-pause"}
+            ^{actionButton (CancelTransferR transfer) Nothing "btn" "icon-remove"}

templates/page.hamlet

@@ -10,8 +10,7 @@
       $maybe reldir <- relDir webapp
         <ul .nav .pull-right>
           <li>
-            <a href="@{FileBrowserR}" onclick="(function( $ ) { $.post('@{FileBrowserR}'); })( jQuery ); return false;">
-              <i .icon-folder-open .icon-white></i> Files
+            ^{actionButton FileBrowserR (Just "Files") "" "icon-folder-open icon-white"}
           <li .dropdown #menu1>
             <a .dropdown-toggle data-toggle="dropdown" href="#menu1">
               Current Repository: #{reldir}

templates/sidebar/alert.hamlet

@@ -1,6 +1,6 @@
-<div .alert .fade .in .#{divclass} :block:.alert-block ##{alertid} :closable:onclick="(function( $ ) { $.get('@{closealert}') })( jQuery );">
+<div .alert .fade .in .#{divclass} :block:.alert-block ##{alertid} :closable:onclick="(function( $ ) { $.get('@{CloseAlert i}') })( jQuery );">
   $if closable
-    <a .close data-dismiss="alert">&times;</a>
+    <a .close>&times;</a>
   $maybe h <- heading
     $if block
       <h4 .alert-heading>