Shout: Convert adding extensions to AJAX

diff --git a/shout/lib/Ajax/Application.php b/shout/lib/Ajax/Application.php
index 9fcf545..5cecd5f 100644 (file)
--- a/shout/lib/Ajax/Application.php
+++ b/shout/lib/Ajax/Application.php
@@ -27,6 +27,26 @@ class Shout_Ajax_Application extends Horde_Ajax_Application_Base
         return null;
     }
 
+    public function saveExtension()
+    {
+        try {
+            $shout = $GLOBALS['registry']->getApiInstance('shout', 'application');
+            $curaccount = $_SESSION['shout']['curaccount'];
+            require_once SHOUT_BASE . '/lib/Forms/ExtensionForm.php';
+            $this->_vars->set('account', $curaccount['code']);
+            $Form = new ExtensionDetailsForm($this->_vars);
+            $Form->setSubmitted();
+            if ($Form->isValid()) {
+                $Form->execute();
+                return true;
+            }
+        } catch (Exception $e) {
+            //FIXME: Create a way to notify the user of the failure.
+            Horde::logMessage($e, 'ERR');
+            return false;
+        }
+    }
+
     /**
      * TODO
      */

diff --git a/shout/templates/extensions.inc.php b/shout/templates/extensions.inc.php
index 9558271..d8ff564 100644 (file)
--- a/shout/templates/extensions.inc.php
+++ b/shout/templates/extensions.inc.php
@@ -42,7 +42,7 @@
     </table>
 </div>
 <br />
-<ul id="controls">
+<ul id="extensionsControls" class="controls">
     <?php
     $addurl = Horde::applicationUrl('extensions.php');
     $addurl = Horde_Util::addParameter($addurl, 'action', 'add');
@@ -54,6 +54,7 @@
 </ul>
 
 <div id="addExtension" class="form">
+    <div id="addExtensionWorking" class="working"></div>
     <form id="addExtensionForm" action="#" name="addExtension">
         <div class="header">Add Extension</div>
         <table cellspacing="0" class="striped">
@@ -105,13 +106,15 @@ var devices = $H();
 var ajax_url = '<?php echo Horde::getServiceLink('ajax', 'shout') ?>';
 var curexten = null;
 
+$('addExtensionWorking').hide();
 $('addExtension').hide();
 Event.observe('addExtensionForm', 'submit', function(event) {saveExtension(event);});
 
 function empty(p)
 {
     var e;
-    while ((e = $(p).childNodes[0]) != null) {
+
+    while ($(p) && (e = $(p).childNodes[0]) != null) {
         $(p).removeChild(e);
     }
 }
@@ -513,16 +516,61 @@ function delDest(exten, type, dest)
 
 function showExtensionForm()
 {
-    $('controls').hide();
+    $('addExtensionWorking').hide();
+    $('extensionsControls').hide();
     Effect.BlindDown('addExtension');
 }
 
 function saveExtension(event)
 {
     event.stop();
-    Effect.BlindUp('addExtension', {
-        afterFinish: function() { $('controls').show() }
+    $('addExtensionWorking').show();
+    var params = Element.extend(event.target).serialize(true);
+
+    new Ajax.Request(ajax_url + 'saveExtension',
+    {
+        method: 'post',
+        parameters: params,
+        onSuccess: function(r) {
+            new Ajax.Request(ajax_url + 'getDestinations',
+            {
+                method: 'get',
+                onSuccess: function(r) {
+                    destinations = $H(r.responseJSON.response);
+                    addExtension(params);
+                    resetDestInfo();
+                    Effect.BlindUp('addExtension', {
+                        afterFinish: function() { $('extensionsControls').show() }
+                    });
+                }
+            });
+        }
     });
+   
+}
+
+function addExtension(params)
+{
+    var tr = document.createElement('tr');
+    tr.className = 'item';
+    var td = document.createElement('td');
+    var text = document.createTextNode(params.name + " (" + params.extension + ")");
+    td.appendChild(text);
+    tr.appendChild(td);
+
+    var td = document.createElement('td');
+    var img = document.createElement('img');
+    img.src = '<?php echo Horde_Themes::img('tree/plusonly.png'); ?>';
+    img.setAttribute('onclick', 'showDetail("'+params.extension+'");');
+    img.id = "destX" + params.extension + "toggle";
+    var span = document.createElement('span');
+    span.id = "destX" + params.extension;
+    td.appendChild(img);
+    td.appendChild(span);
+    tr.appendChild(td);
+
+    $('extensionList').down('tbody').appendChild(tr);
+    Horde.stripeAllElements.bind(Horde)();
 }
 
 new Ajax.Request(ajax_url + 'getDevices',
@@ -536,10 +584,10 @@ new Ajax.Request(ajax_url + 'getDevices',
 
 new Ajax.Request(ajax_url + 'getDestinations',
 {
-    method: 'post',
+    method: 'get',
     onSuccess: function(r) {
         destinations = $H(r.responseJSON.response);
-        resetDestInfo(true);
+        resetDestInfo();
     }
 });
 

diff --git a/shout/themes/screen.css b/shout/themes/screen.css
index a1f80b4..8b87268 100644 (file)
--- a/shout/themes/screen.css
+++ b/shout/themes/screen.css
@@ -63,13 +63,13 @@ span.device:hover
     cursor: pointer;
 }
 
-#controls {
+.controls {
     margin-left: auto;
     margin-right: auto;
     list-style: none;
 }
 
-#controls li {
+.controls li {
     float: left;
 }
 
@@ -222,7 +222,7 @@ div#wizard h3
     -moz-border-radius-topright: 5px;
     -webkit-border-top-right-radius: 5px;
     border-top-right-radius: 5px;
-    padding: 5px;
+    padding: 0 5px;
     display: block;
     width: 500px;
 }
@@ -230,7 +230,19 @@ div#wizard h3
 .step
 {
     width: 500px;
-    border: 1px dotted;
-    margin: 0px 5px;
-    padding: 5px;
+    border-left: 5px solid #c00;
+    border-bottom: 5px solid #c00;
+    border-right: 5px solid #c00;
+    margin: 0;
+    padding: 0 5px;
+    -moz-border-radius-bottomleft: 5px;
+    -webkit-border-bottom-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    -moz-border-radius-bottomright: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.form {
+    position: relative;
 }