Moving dialplan handling javascript to its own class. Will do same with PHP
authorBen Klang <ben@alkaloid.net>
Fri, 11 Nov 2005 20:54:35 +0000 (20:54 +0000)
committerBen Klang <ben@alkaloid.net>
Fri, 11 Nov 2005 20:54:35 +0000 (20:54 +0000)
code later.  Still having trouble getting formatting to work. FF and IE
differ WRT handling innerHTML.
http://www.kenvillines.com/archives/000069.html

Will try removing some of the table formatting and going to divs

git-svn-id: https://svn.alkaloid.net/gpl/shout/trunk@89 06cd67b6-e706-0410-b29e-9de616bca6e9

andrew.webprj
main/dialplan.php
templates/dialplan/contexttree.inc
templates/dialplan/extensiondetail.inc
templates/javascript/dialplan.js [new file with mode: 0644]

index 49a77d6..2f0db53 100644 (file)
@@ -17,7 +17,7 @@
     <item modified_time="1121689003" url="lib/System.php" uploadstatus="1" />
     <item modified_time="1130769961" url="lib/User.php" uploadstatus="1" />
     <item url="main/" uploadstatus="1" />
-    <item modified_time="1131593241" url="main/dialplan.php" uploadstatus="1" />
+    <item modified_time="1131735732" url="main/dialplan.php" uploadstatus="1" />
     <item modified_time="1121401845" url="main/moh.php" uploadstatus="1" />
     <item modified_time="1130769962" url="main/system.php" uploadstatus="1" />
     <item modified_time="1121689003" url="main/users.php" uploadstatus="1" />
@@ -71,7 +71,7 @@
         <uploadeditem upload_time="1131497449" url="lib/base.php" />
         <uploadeditem upload_time="1131045729" url="lib/defines.php" />
         <uploadeditem upload_time="0" url="main/" />
-        <uploadeditem upload_time="1131593241" url="main/dialplan.php" />
+        <uploadeditem upload_time="1131735732" url="main/dialplan.php" />
         <uploadeditem upload_time="1121401845" url="main/moh.php" />
         <uploadeditem upload_time="1130769962" url="main/system.php" />
         <uploadeditem upload_time="1121689003" url="main/users.php" />
         <uploadeditem upload_time="0" url="templates/context/" />
         <uploadeditem upload_time="1120175005" url="templates/context/contextline.inc" />
         <uploadeditem upload_time="0" url="templates/dialplan/" />
-        <uploadeditem upload_time="1131600075" url="templates/dialplan/contexttree.inc" />
+        <uploadeditem upload_time="1131723538" url="templates/dialplan/contexttree.inc" />
         <uploadeditem upload_time="1131593241" url="templates/dialplan/dialplanlist.inc" />
-        <uploadeditem upload_time="1131606281" url="templates/dialplan/extensiondetail.inc" />
+        <uploadeditem upload_time="1131741629" url="templates/dialplan/extensiondetail.inc" />
         <uploadeditem upload_time="1121689030" url="templates/dialplan/priority-form-begin.inc" />
         <uploadeditem upload_time="1121689030" url="templates/dialplan/priority-form-end.inc" />
         <uploadeditem upload_time="1121689030" url="templates/dialplan/priority-form-line.inc" />
+        <uploadeditem upload_time="0" url="templates/javascript/" />
+        <uploadeditem upload_time="1131741807" url="templates/javascript/dialplan.js" />
         <uploadeditem upload_time="1131593241" url="templates/menu.inc" />
         <uploadeditem upload_time="1121578596" url="templates/table-limiter-begin.inc" />
         <uploadeditem upload_time="1121578596" url="templates/table-limiter-end.inc" />
     </teamdata>
     <events/>
     <item modified_time="1131045729" url="lib/defines.php" uploadstatus="1" />
-    <item modified_time="1131600075" url="templates/dialplan/contexttree.inc" uploadstatus="1" />
-    <item modified_time="1131606281" url="templates/dialplan/extensiondetail.inc" uploadstatus="1" />
+    <item modified_time="1131723538" url="templates/dialplan/contexttree.inc" uploadstatus="1" />
+    <item modified_time="1131741629" url="templates/dialplan/extensiondetail.inc" uploadstatus="1" />
     <item modified_time="1131497712" url="security.php" uploadstatus="1" />
+    <item url="templates/javascript/" uploadstatus="1" />
+    <item modified_time="1131741807" url="templates/javascript/dialplan.js" uploadstatus="1" />
     <treestatus>
-      <openfolder url="config" />
-      <openfolder url="dialplan" />
       <openfolder url="lib" />
       <openfolder url="lib/Driver" />
       <openfolder url="main" />
       <openfolder url="templates" />
       <openfolder url="templates/dialplan" />
-      <openfolder url="templates/users" />
-      <openfolder url="themes" />
-      <openfolder url="users" />
+      <openfolder url="templates/javascript" />
     </treestatus>
   </project>
 </webproject>
index 5e399e7..6f934a4 100644 (file)
@@ -34,7 +34,7 @@ foreach ($dialplan as $linetype => $linedata) {
                     null, false,
                     array(
                         'url' => $url,
-                        'onclick' => 'highlightExten(\''.$extension.'\')',
+                        'onclick' => 'dp.highlightExten(\''.$extension.'\')',
                     )
                 );
 //                 foreach ($priorities as $priority => $application) {
index b957c40..dafbe7e 100644 (file)
@@ -1,61 +1,3 @@
-<script language="JavaScript" type="text/javascript">
-<!--
-var curExten;
-function highlightExten(exten)
-{
-    if (curExten && curExten != exten) {
-        deactivatePriority();
-
-        document.getElementById('eBox-' + curExten).className = 'extensionBox';
-        document.getElementById('pList-' + curExten).className = 'pList';
-    }
-
-    curExten = exten;
-    document.getElementById("eBox-" + exten).className = 'extensionBoxHighlight';
-    document.getElementById("pList-" + exten).className = 'pListHighlight';
-}
-
-var curPrio;
-function activatePriority(exten, prio)
-{
-    if (curExten) {
-        deactivatePriority();
-    }
-
-    if (exten != curExten) {
-        highlightExten(exten);
-    }
-    curPrio = prio;
-    document.getElementById('pButtons-'+exten+'-'+prio).className = 'pButtonsHighlight';
-    document.getElementById('pNumber-'+exten+'-'+prio).className = 'pElementHighlight';
-    document.getElementById('pApp-'+exten+'-'+prio).className = 'pElementHighlight';
-    document.getElementById('pArgs-'+exten+'-'+prio).className = 'pElementHighlight';
-}
-
-function deactivatePriority()
-{
-    if (curPrio && document.getElementById('pButtons-'+curExten+'-'+curPrio)) {
-        document.getElementById('pButtons-'+curExten+'-'+curPrio).className = 'pButtons';
-        document.getElementById('pNumber-'+curExten+'-'+curPrio).className = 'pElement';
-        document.getElementById('pApp-'+curExten+'-'+curPrio).className = 'pElement';
-        document.getElementById('pArgs-'+curExten+'-'+curPrio).className = 'pElement';
-    }
-}
-
-function addRow() {
-    if (!curExten || !curPrio) {
-        alert('No extension or priority selected.');
-    }
-
-    tmpPrio = curPrio + 1;
-    while(o = document.getElementById('pNumber-'+tmpexten+'-'+tmpPrio)) {
-
-        tmpPrio++;
-    }
-}
--->
-</script>
-
 <div class="header">
     <div class="contextHeader">Context: <?php echo $context; ?></div>
 </div>
index 9375eb9..5f14248 100644 (file)
@@ -7,95 +7,108 @@ if(!isset($dialplan['extensions'])) {
     <?php
 } else {
     ?>
+    <script language="JavaScript" type="text/javascript"
+             src="/services/javascript.php?file=dialplan.js&amp;app=shout"></script>
     <script language="JavaScript" type="text/javascript">
-
-    var dialplan = Array();
+    <!--
+    var shout_dialplan_x = new Array();
     <?php
     foreach($dialplan['extensions'] as $extension => $priorities) {
-        print "dialplan['$extension']['name'] = '".Shout::exten2name($extension)."'\n";
+        print "shout_dialplan_x['$extension'] = new Array();\n";
+        print "shout_dialplan_x['$extension']['name'] = '".Shout::exten2name($extension)."'\n";
+        print "shout_dialplan_x['$extension']['priorities'] = new Array();\n";
         foreach($priorities as $priority => $data) {
-            print "dialplan['$extension']['priorities']['$priority']['application'] = '".$data['application']."'\n";
-            print "dialplan['$extension']['priorities']['$priority']['args'] = '".$data['args']."'\n";
+            print "shout_dialplan_x['$extension']['priorities']['$priority'] = new Array();\n";
+            print "shout_dialplan_x['$extension']['priorities']['$priority']['application'] = '".$data['application']."'\n";
+            print "shout_dialplan_x['$extension']['priorities']['$priority']['args'] = '".$data['args']."'\n";
         }
     }
     ?>
+
+    var dp = new Dialplan('x');
+
+    // -->
     </script>
-    <table id='extensionDetail' cellspacing="0">
+    <div id='extensionDetail' cellspacing="0">
     <?
     $e = 0;
     foreach($dialplan['extensions'] as $extension => $priorities) { ?>
-        <tr class="extension"
+        <div class="extension"
             id="extension_<?php echo $extension; ?>"
             name="extension_<?php echo $extension; ?>">
             <a name="<?php echo $extension; ?>">
-                <td class="extensionBox"
+                <div class="extensionBox"
                     name="<?php echo "eBox-$extension"; ?>"
-                    id="<?php echo "eBox-$extension"; ?>">
-                    <span onclick="javascript:highlightExten('<?php echo $extension; ?>');">
-                        <?php echo Shout::exten2name($extension); ?>
-                    </span>
-                </td>
+                    id="<?php echo "eBox-$extension"; ?>"
+                    onclick="dp.highlightExten('<?php echo $extension; ?>');">
+                    <?php echo Shout::exten2name($extension); ?>
+                </div>
             </a>
-        </tr>
+        </div>
 
-        <tr>
-            <td>
-                <table class="pList" cellspacing="0"
-                    name="<?php echo "pList-$extension"; ?>"
-                    id="<?php echo "pList-$extension"; ?>">
-                    <?php
-                    $p = 0;
-                    foreach($priorities as $priority => $data) {
-                        ?>
-                        <tr class="priority">
-                            <td class="pButtons"
-                                id="<?php echo "pButtons-$extension-$priority"; ?>"
-                                name="<?php echo "pButtons-$extension-$priority"; ?>">
-                                <span class="add">+</span>
-                                <span class="remove">-</span>
-                            </td>
-                            <td class="pElement"
-                                id="<?php echo "pNumber-$extension-$priority"; ?>"
-                                name="<?php echo "pNumber-$extension-$priority"; ?>"
-                                onclick="javascript:activatePriority('<?php
-                                    echo $extension; ?>', '<?php
-                                    echo $priority; ?>')">
-                                <span class="priorityBox">
-                                    <?php echo $priority; ?>
-                                </span>
-                            </td>
-                            <td class="pElement"
-                                id="<?php echo "pApp-$extension-$priority"; ?>"
-                                name="<?php echo "pApp-$extension-$priority"; ?>">
-                                <span class="applicationBox">
-                                    <select
-                                        name="app[<?php echo $extension; ?>][<?php echo $priority; ?>]"
-                                        id="app[<?php echo $extension; ?>][<?php echo $priority; ?>]">
-                                        <option value="<?php echo $data['application']; ?>">
-                                            <?php echo $data['application']; ?></option>
-                                    </select>
-                                </span>
-                            </td>
-                            <td class="pElement"
-                                id="<?php echo "pArgs-$extension-$priority"; ?>"
-                                name="<?php echo "pArgs-$extension-$priority"; ?>">
-                                <span class="argBox">
-                                    <?php echo $data['args']; ?>
-                                </span>
-                            </td>
-                        </tr>
+        <div>
+            <div>
+                <div id="<?php echo "pList-$extension"; ?>"
+                    name="<?php echo "pList-$extension"; ?>">
+                    <table class="pList" cellspacing="0">
                         <?php
-                        $p++;
-                    }
-                    ?>
-                </table>
-                <br />
-            </td>
-        </tr>
+                        $p = 0;
+                        foreach($priorities as $priority => $data) {
+                            ?>
+                            <tr class="priority">
+                                <td class="pButtons"
+                                    id="<?php echo "pButtons-$extension-$priority"; ?>"
+                                    name="<?php echo "pButtons-$extension-$priority"; ?>">
+                                    <span class="add"
+                                        onclick="javascript:dp.addPrio('<?php
+                                            echo $extension; ?>', '<?php echo $priority; ?>');">+</span>
+                                    <span class="remove"
+                                        onclick="javascript:dp.delPrio('<?php
+                                            echo $extension; ?>', '<?php echo $priority; ?>');">-</span>
+                                </td>
+                                <td class="pElement"
+                                    id="<?php echo "pNumber-$extension-$priority"; ?>"
+                                    name="<?php echo "pNumber-$extension-$priority"; ?>"
+                                    onclick="javascript:dp.activatePriority('<?php
+                                        echo $extension; ?>', '<?php
+                                        echo $priority; ?>')">
+                                    <span class="priorityBox">
+                                        <?php echo $priority; ?>
+                                    </span>
+                                </td>
+                                <td class="pElement"
+                                    id="<?php echo "pApp-$extension-$priority"; ?>"
+                                    name="<?php echo "pApp-$extension-$priority"; ?>">
+                                    <span class="applicationBox">
+                                        <select
+                                            name="app[<?php echo $extension; ?>][<?php echo $priority; ?>]"
+                                            id="app[<?php echo $extension; ?>][<?php echo $priority; ?>]">
+                                            <option value="<?php echo $data['application']; ?>">
+                                                <?php echo $data['application']; ?></option>
+                                        </select>
+                                    </span>
+                                </td>
+                                <td class="pElement"
+                                    id="<?php echo "pArgs-$extension-$priority"; ?>"
+                                    name="<?php echo "pArgs-$extension-$priority"; ?>">
+                                    <span class="argBox">
+                                        <?php echo $data['args']; ?>
+                                    </span>
+                                </td>
+                            </tr>
+                            <?php
+                            $p++;
+                        }
+                        ?>
+                    </table>
+                    <br />
+                </div>
+            </div>
+        </div>
         <?php
         $e++;
     } ?>
-    </table>
+    </div>
     <?php
 }
 ?>
diff --git a/templates/javascript/dialplan.js b/templates/javascript/dialplan.js
new file mode 100644 (file)
index 0000000..40748e4
--- /dev/null
@@ -0,0 +1,145 @@
+/**
+ * Shout Dialplan Javascript Class
+ *
+ * Provides the javascript class to create dynamic dialplans
+ *
+ * Copyright 2005 Ben Klang <ben@alkaloid.net>
+ *
+ * See the enclosed file COPYING for license information (GPL). If you did not
+ * receive this file, see http://www.fsf.org/copyleft/gpl.html.
+ *
+ * $Horde: shout/templates/javascript/dialplan.js,v 1.0.0.1 2005/11/10 06:23:22 ben Exp $
+ *
+ * @author  Ben Klang <ben@alkaloid.net>
+ * @package Shout
+ * @since   Shout 0.1
+ */
+function Dialplan(instanceName)
+{
+    this._instanceName = instanceName;
+    this.dp = new Array();
+    this.dp = eval('shout_dialplan_'+instanceName);
+    this.curExten = '';
+    this.curPrio = '';
+}
+
+Dialplan.prototype.highlightExten = function(exten)
+{
+    if (this.curExten && this.curExten != exten) {
+        this.deactivatePriority();
+
+        document.getElementById('eBox-' + this.curExten).className = 'extensionBox';
+        document.getElementById('pList-' + this.curExten).className = 'pList';
+    }
+
+    this.curExten = exten;
+    document.getElementById("eBox-" + exten).className = 'extensionBoxHighlight';
+    document.getElementById("pList-" + exten).className = 'pListHighlight';
+}
+
+
+Dialplan.prototype.activatePriority = function(exten, prio)
+{
+    prio = Number(prio);
+    if (this.curExten) {
+        this.deactivatePriority();
+    }
+
+    if (exten != this.curExten) {
+        this.highlightExten(exten);
+    }
+
+    this.curPrio = prio;
+    document.getElementById('pButtons-'+exten+'-'+prio).className = 'pButtonsHighlight';
+    document.getElementById('pNumber-'+exten+'-'+prio).className = 'pElementHighlight';
+    document.getElementById('pApp-'+exten+'-'+prio).className = 'pElementHighlight';
+    document.getElementById('pArgs-'+exten+'-'+prio).className = 'pElementHighlight';
+}
+
+Dialplan.prototype.deactivatePriority = function()
+{
+    if (this.curPrio && document.getElementById('pButtons-'+this.curExten+'-'+this.curPrio)) {
+        document.getElementById('pButtons-'+this.curExten+'-'+this.curPrio).className = 'pButtons';
+        document.getElementById('pNumber-'+this.curExten+'-'+this.curPrio).className = 'pElement';
+        document.getElementById('pApp-'+this.curExten+'-'+this.curPrio).className = 'pElement';
+        document.getElementById('pArgs-'+this.curExten+'-'+this.curPrio).className = 'pElement';
+    }
+}
+
+Dialplan.prototype.drawPrioTable = function (exten)
+{
+    if (!exten) {
+        alert('Must first choose an extension to draw');
+        return false;
+    }
+    alert(document.getElementById('pList-'+exten).innerHTML);
+    table  = '<table class="pList" cellspacing="0">';
+    table += '  <tbody>\n';
+    table += '    <tr class="priority">\n';
+    for (var p in this.dp[exten]['priorities']) {
+        table += '        <td class="pButtons" id="pButtons-'+exten+'-'+p+'"\n';
+        table += '            name="pButtons-'+exten+'-'+p+'">\n';
+        table += '            <span class="add">+</span>\n';
+        table += '            <span class="remove">-</span>\n';
+        table += '        </td>\n';
+        table += '        <td class="pElement" id="pNumber-'+exten+'-'+p+'"\n';
+        table += '            name="pNumber-'+exten+'-'+p+'"\n';
+        table += '            onclick="javascript:activatePriority(\''+exten+'\', \''+p+'\')">\n';
+        table += '            <span class="priorityBox">'+p+'</span>\n';
+        table += '        </td>\n';
+        table += '        <td class="pElement" id="pApp-'+exten+'-'+p+'"\n';
+        table += '            name="pApp-'+exten+'-'+p+'">\n';
+        table += '            <span class="applicationBox"></span>\n';
+        table += '                <select name="app['+exten+']['+p+']">\n';
+        table += '                    <option value="APPLICATION">APPLICATION</option>\n';
+        table += '                </select>\n';
+        table += '            </span>\n';
+        table += '        </td>\n';
+        table += '        <td class="pElement" id="pArgs-'+exten+'-'+p+'"\n';
+        table += '            name="pArgs-'+exten+'-'+p+'">\n';
+        table += '            <span class="argBox" id="args-'+exten+'-'+p+'"\n';
+        table += '                name="args-'+exten+'-'+p+'">ARGS</span>\n';
+        table += '        </td>\n';
+    }
+    table += '    </tr>\n';
+    table += '  </tbody>\n';
+    table += '</table>\n';
+    alert(table);
+    document.getElementById('pList-'+exten).innerHTML = table;
+}
+
+Dialplan.prototype.addExten = function (exten, extenName)
+{
+    this.dp[exten] = new Array();
+}
+
+Dialplan.prototype.addPrio = function(exten, prio)
+{
+    prio = Number(prio);
+    if (this.dp[exten][prio] != 'undefined') {
+        this._incrPrio(exten, prio);
+    }
+    this.dp[exten]['priorities'][prio] = new Array();
+    this.drawPrioTable(exten);
+}
+
+Dialplan.prototype._incrPrio = function (exten, prio)
+{
+    p = Number(prio) + 1;
+    h = Number(prio) + 101;
+
+    // Check for error handlers
+    if (this.dp[exten][h] != 'undefined') {
+        //alert(this.dp[exten][h]);
+        //this._incrPrio(exten, h);
+    }
+
+    // Make sure the next slot is empty.  If not move it first.
+    if (this.dp[exten][p] != 'undefined') {
+        //alert(p);
+        //this._incrPrio(exten, p);
+    }
+
+    // Copy the existing prio to its new home
+    this.dp[exten][p] = this.dp[exten][prio];
+}
\ No newline at end of file