From 966bd0b842c51ec6684eceb70412b870fa33a858 Mon Sep 17 00:00:00 2001
From: Ben Klang <ben@alkaloid.net>
Date: Fri, 26 Mar 2010 16:53:53 -0400
Subject: [PATCH] Shout: Add browser working indicators

---
 shout/templates/dialplan/edit.inc        | 123 +++++++++++++++++--------------
 shout/themes/graphics/redbox_spinner.gif | Bin 0 -> 6820 bytes
 shout/themes/screen.css                  |  17 ++++-
 3 files changed, 83 insertions(+), 57 deletions(-)
 create mode 100644 shout/themes/graphics/redbox_spinner.gif

diff --git a/shout/templates/dialplan/edit.inc b/shout/templates/dialplan/edit.inc
index 7ba9c99e8..6944c0345 100644
--- a/shout/templates/dialplan/edit.inc
+++ b/shout/templates/dialplan/edit.inc
@@ -1,5 +1,6 @@
 <div id="dialplan">
     <div id="menuInfo">
+        <div id="menuWorking" class="working"></div>
         <table class="striped">
             <tr>
                 <td class="metaStatName">Menu</td>
@@ -18,15 +19,15 @@
         <table class="striped">
             <tr>
                 <td class="metaStatName">Menu Name</td>
-                <td class="metaStatInfo"><input name="name"></td>
+                <td class="metaStatInfo"><input id="menu_edit.name" name="name"></td>
             </tr>
             <tr>
                 <td class="metaStatName">Description</td>
-                <td class="metaStatInfo"><input name="description"></td>
+                <td class="metaStatInfo"><input id="menu_edit.description" name="description"></td>
             </tr>
             <tr>
                 <td class="metaStatName">Sound File</td>
-                <td class="metaStatInfo"><select name="soundfile"></select></td>
+                <td class="metaStatInfo"><select id="menu_edit.soundfile" name="soundfile"></select></td>
             </tr>
             <tr>
                 <td><div class="button" onclick="saveMenu()"><?php echo _("Save"); ?></div></td>
@@ -51,13 +52,14 @@
     </div>
 
     <div id="digitpad">
+      <div id="dialpadWorking" class="working"></div>
       <div id="editActionOverlay">
-          <img id="digitGraphic" alt="Current Digit">
-          <form id="editActionForm">
-              <input name="digit" id="editActionFormDigit" type="hidden">
-              <div id="selectAction"></div>
-              <div id="editAction"></div>
-          </form>
+        <img id="digitGraphic" alt="Current Digit">
+        <form id="editActionForm">
+          <input name="digit" id="editActionFormDigit" type="hidden">
+          <div id="selectAction"></div>
+          <div id="editAction"></div>
+        </form>
       </div>
       <div class="digit" id="digit_1" onClick="editAction('1');"><span class="digitLabel">1</span></div>
       <div class="digit" id="digit_2" onClick="editAction('2');"><span class="digitLabel">2</span></div>
@@ -96,6 +98,7 @@ function empty(p)
 
 function editAction(digit)
 {
+    $('dialpadWorking').show();
     empty('editAction');
     $('editActionFormDigit').value = digit;
 
@@ -219,7 +222,7 @@ function editAction(digit)
         submit.className = 'button';
         submit.value = '<?php echo _("Save"); ?>';
         div.appendChild(submit);
-        
+
         var cancel = document.createElement('input');
         cancel.setAttribute('onclick', 'cancelEdit()');
         cancel.className = 'button';
@@ -229,13 +232,14 @@ function editAction(digit)
 
         Event.observe($('editActionForm'), 'submit', function(event) {saveAction(event);});
 
-
         $('editAction').appendChild(div);
     }
+    $('dialpadWorking').hide();
 }
 
 function saveAction(event)
 {
+    $('dialpadWorking').show();
     Event.stop(event);
     var form = event.target;
     Element.extend(form);
@@ -252,13 +256,14 @@ function saveAction(event)
             $('editActionOverlay').hide();
             new Ajax.Request(ajax_url + 'getMenus',
             {
-                method: 'post',
+                method: 'get',
                 parameters: $H({
                     'menu': curmenu
                 }),
                 onSuccess: function(r) {
                     menuInfo = $H(r.responseJSON.response);
                     refreshMenu();
+                    $('dialpadWorking').hide();
                 }
             });
         }
@@ -272,27 +277,6 @@ function cancelEdit()
     $('editActionOverlay').hide();
 }
 
-function saveSoundFile(event)
-{
-    Event.stop(event);
-    var form = event.target;
-    Element.extend(form);
-    var file = form.getElements().first().getValue();
-    // TODO: Allow editing other menu details
-    // TODO: Add spinner
-    new Ajax.Request(ajax_url + 'saveMenuInfo',
-    {
-        method: 'post',
-        parameters: $H({
-            'file': file
-        }),
-        onSuccess: function(r) {
-            refreshMenu();
-            // TODO: Stop spinner
-        }
-    });
-}
-
 function playSoundFile()
 {
     alert("Playing soundfile");
@@ -300,6 +284,8 @@ function playSoundFile()
 
 function refreshMenu()
 {
+    $('menuWorking').show();
+    $('dialpadWorking').show();
     curmenu = $('menu.select').value;
     if (!curmenu || !menuInfo.get(curmenu)) {
         // TODO Show an error of some kind
@@ -323,26 +309,33 @@ function refreshMenu()
     empty('menu.soundfile');
     $('menu.soundfile').appendChild(text);
 
+    $('menu_edit.name').value = menuInfo.get(curmenu).name;
+    $('menu_edit.description').value = menuInfo.get(curmenu).description;
+
+    var select = $('menu_edit.soundfile');
+    empty(select);
+    soundfiles.each(function (item) {
+        var option = document.createElement('option');
+        option.value = item.key;
+        var text = document.createTextNode(item.value.name);
+        option.appendChild(text);
+        select.appendChild(option);
+    })
+    select.value = menuInfo.get(curmenu).soundfile;
+
     // Fill in the actions
+    if (menuInfo.get(curmenu).actions.length == 0) {
+        // No actions configured yet.
+        return true;
+    }
+
     $H(menuInfo.get(curmenu).actions).each(function (pair) {
         var text;
         var digit = pair.key;
         var action = pair.value.action;
         var button = $('digit_'+digit);
-        empty(button);
         var p = document.createElement('p');
         p.className = 'buttonActionLabel';
-        var span = document.createElement('span');
-        span.className='digitLabel';
-        if (digit == 'star') {
-            text = document.createTextNode('*');
-        } else if (digit == 'octothorpe') {
-            text = document.createTextNode('#');
-        } else {
-            text = document.createTextNode(digit);
-        }
-        span.appendChild(text);
-        p.appendChild(span);
         text = document.createTextNode(menuActions.get(action).description);
         p.appendChild(text);
         button.appendChild(p);
@@ -383,16 +376,8 @@ function refreshMenu()
         p.appendChild(text);
         button.appendChild(p);
     });
-
-    var select = $('editMenu').down('select');
-    empty(select);
-    soundfiles.each(function (item) {
-        var option = document.createElement('option');
-        option.value = item.key;
-        var text = document.createTextNode(item.value.name);
-        option.appendChild(text);
-        select.appendChild(option);
-    })
+    $('menuWorking').hide();
+    $('dialpadWorking').hide();
 }
 
 function editMenu()
@@ -400,6 +385,33 @@ function editMenu()
     $('editMenu').show();
 }
 
+function saveMenu()
+{
+    $('menuWorking').show();
+    var params = $('editMenu').serialize(true);
+    params.oldname = curmenu;
+    new Ajax.Request(ajax_url + 'saveAction',
+    {
+        method: 'post',
+        parameters: params,
+        onSuccess: function(r) {
+            $('editMenu').hide();
+            new Ajax.Request(ajax_url + 'getMenus',
+            {
+                method: 'get',
+                parameters: $H({
+                    'menu': curmenu
+                }),
+                onSuccess: function(r) {
+                    menuInfo = $H(r.responseJSON.response);
+                    refreshMenu();
+                    $('menuWorking').hide();
+                }
+            });
+        }
+    });
+}
+
 $('editActionOverlay').hide();
 $('editMenu').hide();
 new Ajax.Request(ajax_url + 'getMenus',
@@ -415,7 +427,6 @@ new Ajax.Request(ajax_url + 'getMenus',
             $('menu.select').appendChild(option);
         })
         refreshMenu();
-        Event.observe($('editMenu'), 'submit', function(event) {saveSoundFile(event);});
     }
 });
 // -->
diff --git a/shout/themes/graphics/redbox_spinner.gif b/shout/themes/graphics/redbox_spinner.gif
new file mode 100644
index 0000000000000000000000000000000000000000..35218b31b5e09d98e59af8f8c17ab0c548b302b6
GIT binary patch
literal 6820
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

literal 0
HcmV?d00001

diff --git a/shout/themes/screen.css b/shout/themes/screen.css
index 7671549e0..76084885f 100644
--- a/shout/themes/screen.css
+++ b/shout/themes/screen.css
@@ -96,7 +96,7 @@ ul {
 
 #digitpad {
     width: 300px;
-    height: 456px;
+    height: 400px;
     float: right;
     position: relative;
 }
@@ -197,3 +197,18 @@ ul {
 {
     text-align: center;
 }
+
+.working
+{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    filter:alpha(opacity=50);
+    -moz-opacity:0.5;
+    -khtml-opacity: 0.5;
+    opacity: 0.5;
+    background: url('graphics/redbox_spinner.gif') no-repeat center #000;
+    z-index: 5;
+}
-- 
2.11.0