Add admin UI/Backend to delete Services

public/scripts/3rdparty/bootstrap-modal.js

@@ -0,0 +1,260 @@
+/* =========================================================
+ * bootstrap-modal.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#modal
+ * =========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+
+
+!function( $ ){
+
+  "use strict"
+
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+  * ======================================================= */
+
+  var transitionEnd
+
+  $(document).ready(function () {
+
+    $.support.transition = (function () {
+      var thisBody = document.body || document.documentElement
+        , thisStyle = thisBody.style
+        , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+      return support
+    })()
+
+    // set CSS transition event type
+    if ( $.support.transition ) {
+      transitionEnd = "TransitionEnd"
+      if ( $.browser.webkit ) {
+        transitionEnd = "webkitTransitionEnd"
+      } else if ( $.browser.mozilla ) {
+        transitionEnd = "transitionend"
+      } else if ( $.browser.opera ) {
+        transitionEnd = "oTransitionEnd"
+      }
+    }
+
+  })
+
+
+ /* MODAL PUBLIC CLASS DEFINITION
+  * ============================= */
+
+  var Modal = function ( content, options ) {
+    this.settings = $.extend({}, $.fn.modal.defaults, options)
+    this.$element = $(content)
+      .delegate('.close', 'click.modal', $.proxy(this.hide, this))
+
+    if ( this.settings.show ) {
+      this.show()
+    }
+
+    return this
+  }
+
+  Modal.prototype = {
+
+      toggle: function () {
+        return this[!this.isShown ? 'show' : 'hide']()
+      }
+
+    , show: function () {
+        var that = this
+        this.isShown = true
+        this.$element.trigger('show')
+
+        escape.call(this)
+        backdrop.call(this, function () {
+          var transition = $.support.transition && that.$element.hasClass('fade')
+
+          that.$element
+            .appendTo(document.body)
+            .show()
+
+          if (transition) {
+            that.$element[0].offsetWidth // force reflow
+          }
+
+          that.$element.addClass('in')
+
+          transition ?
+            that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :
+            that.$element.trigger('shown')
+
+        })
+
+        return this
+      }
+
+    , hide: function (e) {
+        e && e.preventDefault()
+
+        if ( !this.isShown ) {
+          return this
+        }
+
+        var that = this
+        this.isShown = false
+
+        escape.call(this)
+
+        this.$element
+          .trigger('hide')
+          .removeClass('in')
+
+        $.support.transition && this.$element.hasClass('fade') ?
+          hideWithTransition.call(this) :
+          hideModal.call(this)
+
+        return this
+      }
+
+  }
+
+
+ /* MODAL PRIVATE METHODS
+  * ===================== */
+
+  function hideWithTransition() {
+    // firefox drops transitionEnd events :{o
+    var that = this
+      , timeout = setTimeout(function () {
+          that.$element.unbind(transitionEnd)
+          hideModal.call(that)
+        }, 500)
+
+    this.$element.one(transitionEnd, function () {
+      clearTimeout(timeout)
+      hideModal.call(that)
+    })
+  }
+
+  function hideModal (that) {
+    this.$element
+      .hide()
+      .trigger('hidden')
+
+    backdrop.call(this)
+  }
+
+  function backdrop ( callback ) {
+    var that = this
+      , animate = this.$element.hasClass('fade') ? 'fade' : ''
+    if ( this.isShown && this.settings.backdrop ) {
+      var doAnimate = $.support.transition && animate
+
+      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+        .appendTo(document.body)
+
+      if ( this.settings.backdrop != 'static' ) {
+        this.$backdrop.click($.proxy(this.hide, this))
+      }
+
+      if ( doAnimate ) {
+        this.$backdrop[0].offsetWidth // force reflow
+      }
+
+      this.$backdrop.addClass('in')
+
+      doAnimate ?
+        this.$backdrop.one(transitionEnd, callback) :
+        callback()
+
+    } else if ( !this.isShown && this.$backdrop ) {
+      this.$backdrop.removeClass('in')
+
+      $.support.transition && this.$element.hasClass('fade')?
+        this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) :
+        removeBackdrop.call(this)
+
+    } else if ( callback ) {
+       callback()
+    }
+  }
+
+  function removeBackdrop() {
+    this.$backdrop.remove()
+    this.$backdrop = null
+  }
+
+  function escape() {
+    var that = this
+    if ( this.isShown && this.settings.keyboard ) {
+      $(document).bind('keyup.modal', function ( e ) {
+        if ( e.which == 27 ) {
+          that.hide()
+        }
+      })
+    } else if ( !this.isShown ) {
+      $(document).unbind('keyup.modal')
+    }
+  }
+
+
+ /* MODAL PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.modal = function ( options ) {
+    var modal = this.data('modal')
+
+    if (!modal) {
+
+      if (typeof options == 'string') {
+        options = {
+          show: /show|toggle/.test(options)
+        }
+      }
+
+      return this.each(function () {
+        $(this).data('modal', new Modal(this, options))
+      })
+    }
+
+    if ( options === true ) {
+      return modal
+    }
+
+    if ( typeof options == 'string' ) {
+      modal[options]()
+    } else if ( modal ) {
+      modal.toggle()
+    }
+
+    return this
+  }
+
+  $.fn.modal.Modal = Modal
+
+  $.fn.modal.defaults = {
+    backdrop: false
+  , keyboard: false
+  , show: false
+  }
+
+
+ /* MODAL DATA- IMPLEMENTATION
+  * ========================== */
+
+  $(document).ready(function () {
+    $('body').delegate('[data-controls-modal]', 'click', function (e) {
+      e.preventDefault()
+      var $this = $(this).data('show', true)
+      $('#' + $this.attr('data-controls-modal')).modal( $this.data() )
+    })
+  })
+
+}( window.jQuery || window.ender );

public/scripts/main.js

@@ -24,7 +24,21 @@ var sb = {
     admin: {
       
         init: function() {
+            $('#confirm_delete_service').modal({
+                backdrop: true,
+                keyboard: true
+            });
+        },
         
+        deleteService: function(url) {
+            $('#confirm_delete_service_do').click(function() {
+                location.href = url;
+            });
+            $('#confirm_delete_service_cancel').click(function() {
+               $('#confirm_delete_service').modal('hide'); 
+            });
+            
+            $('#confirm_delete_service').modal('show');
         }
         
     },

source/webui/pages/admin.php

@@ -29,6 +29,26 @@ if ($request->exists('do')) {
        
         } break;
         
+        case 'delete-service': {
+            $service_id = $request->get('id', 'Sihnon_Exception_InvalidParameters');
+            
+            try {
+                $service = StatusBoard_Service::fromId($service_id);
+                $service->delete();
+                
+                $messages[] = array(
+                    'severity' => 'success',
+                    'content'  => 'The Service was deleted successfully.',
+                );
+            } catch (Sihnon_Exception_ResultCountMismatch $e) {
+                $messages[] = array(
+                    'severity' => 'error',
+                    'content'  => 'The Service was not deleted as the object requested could not be found.',
+                );
+            }
+            
+        } break;
+
         default: {
             $messages[] = array(
                 'severity' => 'warning',

source/webui/templates/admin.tpl

@@ -23,39 +23,53 @@
         		<h3>Current Services</h3>
         		<p>Click on a Service to edit its properties, or access any of the sites defined under it.</p>
         	</div>
-        <div class="span12 column">
+            <div class="span12 column">
-			<table class="bordered-table" name="services_list_table"><!--Services table -->
+                {if $services}
-				<thead>
+                    <table class="bordered-table" name="services_list_table"><!--Services table -->
-				<th>Service</th>
+                        <thead>
-				<th>Description</th>
+    				    <th>Service</th>
-				<th>Action</th>
+    				    <th>Description</th>
-				</thead>
+        				<th>Action</th>
-				<tbody>
+				    </thead>
-    	    {if $services}
+				    <tbody>
-           {foreach from=$services item=service}
+                        {foreach from=$services item=service}
-             <tr>
+                            <tr>
-             	<td>
+                                <td>
-             	<a href="{$base_uri}admin/service/id/{$service->id}/" title="Edit site {$service->name|escape:html}">{$service->name|escape:html}</a>
+             	                  <a href="{$base_uri}admin/service/id/{$service->id}/" title="Edit site {$service->name|escape:html}">{$service->name|escape:html}</a>
-             	</td>
+                                </td>
-                <td>
+                                <td>
-                {$service->description|escape:html}
+                                    {$service->description|escape:html}
-                </td>
+                                </td>
-                <td>
+                                <td>
-                <button class='btn info' onclick="document.location.href='{$base_uri}admin/service/id/{$service->id}/';return false;">Edit</button>
+                                    <button class='btn info' onclick="document.location.href='{$base_uri}admin/service/id/{$service->id}/';return false;">Edit</button>
-                <button style="margin-left:10px" class='btn danger'>Delete</button></td>
+                                    <button class='btn danger' onclick="sb.admin.deleteService('{$base_uri}admin/tab/services/do/delete-service/id/{$service->id}/');">Delete</button>
-                </tr>
+                                </td>
-            {/foreach}
+                            </tr>
-        	</tbody>
+                        {/foreach}
-        	</table><!--/Services table -->
+                    </tbody>
-        {else}
+                </table><!--/Services table -->
-            You haven't created any services yet. Create some with the button below.
+            {else}
-        {/if}
+                You haven't created any services yet. Create some with the button below.
-        </div>
+            {/if}
-        </div><!--/Row for Existing Service-->
+            </div>
-        <div class="row" name="Services_new"><!--Row for New Service-->
+            <div id="confirm_delete_service" class="modal hide fade">
+                <div class="modal-header">
+                    Confirm deletion
+                </div>
+                <div class="modal-body">
+                    This action cannot be reversed and all dependent sites and incidents will also be removed.
+                    Are you sure you wish to delete this Service?                
+                </div>
+                <div class="modal-footer">
+                    <button class="btn secondary" id="confirm_delete_service_cancel">Cancel</button>
+                    <button class="btn danger" id="confirm_delete_service_do">Delete</button>              
+                </div>
+            </div>
+    </div><!--/Row for Existing Service-->
+    <div class="row" name="Services_new"><!--Row for New Service-->
 		<div class="span4 column"><!--New Service description-->
-        <h3>Add New Service</h3>
+            <h3>Add New Service</h3>
-        <p>Use this form to define a new service</p>
+            <p>Use this form to define a new service</p>
         </div><!--/New Service description-->
 		<div class="span12 column"><!--Add New Service -->
         <form id="admin_addservice" method="post" action="{$base_uri}admin/tab/services/do/add-service/">
@@ -70,7 +84,7 @@
                 <div class="clearfix">
                     <label for="admin_service_add_description" style="width:87px">Description</label>
                     <div class="text">
-                    <textarea class="xxlarge" name="textarea" id="admin_service_add_description" rows="3"  name="description"></textarea>
+                    <textarea class="xxlarge" id="admin_service_add_description" rows="3"  name="description"></textarea>
                     </div><!-- /text -->
                 </div><!-- /clearfix -->
     

source/webui/templates/index.tpl

@@ -23,6 +23,7 @@
         <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-popover.js"></script>
         <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-dropdown.js"></script>
         <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-tabs.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-modal.js"></script>
     </head>
     <body>