From fe135f33f6c817b96ff0f59f93c1040a087491e8 Mon Sep 17 00:00:00 2001
From: Christopher Lenz <cmlenz@apache.org>
Date: Wed, 14 Jan 2009 16:48:07 +0000
Subject: Allow modification of existing config option values from Futon.

git-svn-id: https://svn.apache.org/repos/asf/couchdb/trunk@734443 13f79535-47bb-0310-9956-ffa450edef68
---
 share/www/config.html            | 27 +++++++++++++++--
 share/www/script/jquery.couch.js | 23 ++++++++++++---
 share/www/style/layout.css       | 63 ++++++++++++++++++++--------------------
 3 files changed, 75 insertions(+), 38 deletions(-)

(limited to 'share')

diff --git a/share/www/config.html b/share/www/config.html
index 6830d26c..cc53ec3b 100644
--- a/share/www/config.html
+++ b/share/www/config.html
@@ -22,9 +22,10 @@ specific language governing permissions and limitations under the License.
     <script src="script/jquery.js?1.2.6"></script>
     <script src="script/jquery.cookies.js?0.9.0"></script>
     <script src="script/jquery.couch.js?0.9.0"></script>
+    <script src="script/jquery.editinline.js?0.9.0"></script>
     <script src="script/futon.js?0.9.0"></script>
     <script>
-      $(document).ready(function() {
+      $(function() {
         $(document.body).addClass("loading");
         $.couch.config({
           success: function(resp) {
@@ -46,8 +47,11 @@ specific language governing permissions and limitations under the License.
               var prev = null;
               $.each(options, function(idx, optionName) {
                 var cur = idx == 0 ? row : $("<tr></tr>");
-                $("<td class='name'></td>").text(optionName).appendTo(cur);
-                $("<td class='value'></td>").text(section[optionName]).appendTo(cur);
+                $("<td class='name'><b></b></td>")
+                  .find("b").text(optionName).end().appendTo(cur);
+                $("<td class='value'><code></code></td>")
+                  .find("code").text(section[optionName]).end().appendTo(cur);
+                cur.data("section", sectionName).data("option", optionName);
                 if (cur !== row) cur.insertAfter(prev);
                 prev = cur;
               });
@@ -55,8 +59,21 @@ specific language governing permissions and limitations under the License.
             });
             $("#config tbody tr").removeClass("odd").filter(":odd").addClass("odd");
             $(document.body).removeClass("loading");
+
+            $("#config tbody td.value code").makeEditable({
+              accept: function(newValue) {
+                $(document.body).addClass("loading");
+                var row = $(this).parents("tr").eq(0);
+                $.couch.config({
+                  success: function(resp) {
+                    row.find("td.value code").text(newValue);
+                    $(document.body).removeClass("loading");
+                }}, row.data("section"), row.data("option"), newValue);
+              }
+            });
           }
         });
+
       });
     </script>
   </head>
@@ -66,6 +83,10 @@ specific language governing permissions and limitations under the License.
       <strong>Configuration</strong>
     </h1>
     <div id="content">
+      <p class="help">
+        <strong>Note:</strong> Some configuration options may require
+        restarting the server to take effect after modification.
+      </p>
 
       <table id="config" class="listing" cellspacing="0">
         <caption>Configuration</caption>
diff --git a/share/www/script/jquery.couch.js b/share/www/script/jquery.couch.js
index 915918d8..f3547b8d 100644
--- a/share/www/script/jquery.couch.js
+++ b/share/www/script/jquery.couch.js
@@ -33,8 +33,23 @@
     },
 
     config: function(options, section, option, value) {
+      options = options || {};
+      var url = "/_config/";
+      if (section) {
+        url += encodeURIComponent(section) + "/";
+        if (option) {
+          url += encodeURIComponent(option);
+        }
+      }
+      if (value === undefined) {
+        var method = "GET";
+      } else {
+        var method = "PUT";
+        var data = toJSON(value);
+      }
       $.ajax({
-        type: "GET", url: "/_config/",
+        type: method, url: url, contentType: "application/json",
+        dataType: "json", data: toJSON(value), processData: false,
         complete: function(req) {
           var resp = $.httpData(req, "json");
           if (req.status == 200) {
@@ -42,8 +57,8 @@
           } else if (options.error) {
             options.error(req.status, resp.error, resp.reason);
           } else {
-            alert("An error occurred retrieving the server configuration: " +
-              resp.reason);
+            alert("An error occurred retrieving/updating the server " +
+              "configuration: " + resp.reason);
           }
         }
       });
@@ -76,7 +91,7 @@
           options = options || {};
           $.ajax({
             type: "PUT", url: this.uri, contentType: "application/json",
-            dataType: "json", data: "", processData: false, 
+            dataType: "json", data: "", processData: false,
             complete: function(req) {
               var resp = $.httpData(req, "json");
               if (req.status == 201) {
diff --git a/share/www/style/layout.css b/share/www/style/layout.css
index 18aefa63..0691a1ad 100644
--- a/share/www/style/layout.css
+++ b/share/www/style/layout.css
@@ -104,11 +104,6 @@ table.listing tbody th { text-align: left; }
 table.listing tbody th :link, table.listing tbody th :visited {
   display: block;
 }
-table.listing tbody.content th button {
-  background: transparent no-repeat; border: none; cursor: pointer;
-  float: left; margin: .2em 5px 0 -20px; padding: 0; width: 15px; height: 15px;
-}
-table.listing tbody.content th button:hover { background-position: -15px 0; }
 table.listing tbody.footer tr td { background: #e9e9e9;
   border-top: 1px solid #a7a7a7; color: #999; font-size: 90%;
   line-height: 1.8em;
@@ -121,6 +116,22 @@ table.listing tbody.footer #paging label {
 table.listing tbody.footer #paging label { color: #666; }
 table.listing tbody.footer #paging select { font-size: 90%; padding: 0; }
 
+/* Inline editing */
+
+span.editinline-tools { margin: 2px 2px 0; float: right; margin-right: -45px; }
+span.editinline-tools button { background: transparent 0 0 no-repeat;
+  border: none; cursor: pointer; display: block; float: left; margin: 0 .2em;
+  width: 11px; height: 11px;
+}
+span.editinline-tools button:hover { background-position: 0 -22px; }
+span.editinline-tools button:active { background-position: 0 -44px; }
+span.editinline-tools button.apply {
+  background-image: url(../image/apply.gif);
+}
+span.editinline-tools button.cancel {
+  background-image: url(../image/cancel.gif);
+}
+
 /* Resizer grippies */
 
 div.grippie { background: #e9e9e9 url(../image/grippie.gif) 50% 50% no-repeat;
@@ -359,9 +370,12 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
 #fields { clear: right; table-layout: fixed; }
 #fields col.field { width: 33%; }
 #fields tbody.content th { padding-left: 25px; padding-right: 48px; }
-#fields tbody.content th button {
-  background-image: url(../image/delete-mini.png);;
+#fields tbody.content th button.delete {
+  background: url(../image/delete-mini.png) no-repeat; border: none;
+  cursor: pointer; float: left; margin: .2em 5px 0 -20px; padding: 0;
+  width: 15px; height: 15px;
 }
+#fields tbody.content th button.delete:hover { background-position: -15px 0; }
 #fields tbody.content th b { display: block; padding: 2px 2px 2px 3px; }
 #fields tbody.content th b.editinline-container { padding: 0; }
 #fields tbody.content td { color: #999; padding-left: 14px;
@@ -401,26 +415,6 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
   background: #f9f4f4; border-color: #b66 #ebb #ebb #b66;
 }
 #fields tbody.content div.grippie { padding: 0 1px; width: 100%; }
-
-#fields tbody.content span.editinline-tools { margin: 2px 2px 0; float: right;
-  margin-right: -45px;
-}
-#fields tbody.content span.editinline-tools button {
-  background: transparent 0 0 no-repeat; border: none; cursor: pointer;
-  display: block; float: left; margin: 0 .2em; width: 11px; height: 11px;
-}
-#fields tbody.content span.editinline-tools button:hover {
-  background-position: 0 -22px;
-}
-#fields tbody.content span.editinline-tools button:active {
-  background-position: 0 -44px;
-}
-#fields tbody.content span.editinline-tools button.apply {
-  background-image: url(../image/apply.gif);
-}
-#fields tbody.content span.editinline-tools button.cancel {
-  background-image: url(../image/cancel.gif);
-}
 #fields tbody.content div.error { color: #d33; }
 
 #fields tbody.content td ul.attachments { list-style: none; margin: 0;
@@ -486,14 +480,21 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
 
 /* Configuration */
 
-table#config tbody th { background: #e6e6e6; border-right: none;
+#config tbody th { background: #e6e6e6; border-right: none;
   border-top: 1px solid #d9d9d9;
 }
-table#config tbody td.name { border-left: 1px solid #d9d9d9; color: #333;
+#config tbody td.name { border-left: 1px solid #d9d9d9; color: #333;
   font-weight: bold;
 }
-table#config tbody td.value {
-  font-family: "DejaVu Sans Mono",Monaco,monospace;
+#config tbody td.value { padding: 1px 48px 1px 1px; }
+#config tbody td.value code { display: block; font-size: 11px;
+  padding: 2px 2px 2px 3px;
+}
+#config tbody td.value code.editinline-container { padding: 0; }
+#config tbody td input {
+  background: #fff; border: 1px solid; border-color: #999 #ddd #ddd #999;
+  font: 11px normal "DejaVu Sans Mono",Monaco,monospace;
+  margin: 0; padding: 1px; width: 100%;
 }
 
 /* Replication */
-- 
cgit v1.2.3