web admin: simplify the instructions for creating a separate web directory for particular sites by moving it into a modal

management/templates/web.html

@@ -18,13 +18,14 @@
 
 <li>Upload your <tt>.html</tt> or other files to the directory <tt>{{storage_root}}/www/default</tt> on this machine. They will appear directly and immediately on the web.</li>
 
-<li>The websites set up on this machine are listed in the table below with where to put the files for each website (if you have customized that, see next section).</li>
+<li>The websites set up on this machine are listed in the table below with where to put the files for each website.</li>
 
 <table id="web_domains_existing" class="table" style="margin-bottom: 2em; width: auto;">
         <thead>
                 <tr>
                         <th>Site</th>
                         <th>Directory for Files</th>
+			<th/>
                 </tr>
         </thead>
         <tbody>
@@ -35,24 +36,6 @@
 
 </ol>
 
-<h3>Different sites for different domains</h3>
-
-<p>Create one of the directories shown in the table below to create a space for different files for one of the websites.</p>
-
-<p>After you create one of these directories, click <button id="web_update" class="btn btn-primary" onclick="do_web_update()">Web Update</button> to restart the box&rsquo;s web server so that it sees the new website file location.</p>
-
-<table id="web_domains_custom" class="table" style="margin-bottom: 2em; width: auto;">
-        <thead>
-                <tr>
-                        <th>Site</th>
-                        <th>Create Directory</th>
-                </tr>
-        </thead>
-        <tbody>
-        </tbody>
-</table>
-
-
 <script>
 function show_web() {
  api(
@@ -65,25 +48,17 @@ function show_web() {
 	tb.text('');
 	for (var i = 0; i < domains.length; i++) {
 		if (!domains[i].static_enabled) continue;
-		var row = $("<tr><th class='domain'><a href=''></a></th><td class='directory'><tt/></td></tr>");
+		var row = $("<tr><th class='domain'><a href=''></a></th><td class='directory'><tt/></td> <td class='change-root hidden'><button class='btn btn-default btn-xs' onclick='show_change_web_root(this)'>Change</button></td></tr>");
 		tb.append(row);
+		row.attr('data-domain', domains[i].domain);
+		row.attr('data-custom-web-root', domains[i].custom_root);
 		row.find('.domain a').text('https://' + domains[i].domain);
 		row.find('.domain a').attr('href', 'https://' + domains[i].domain);
 		row.find('.directory tt').text(domains[i].root);
+		if (domains[i].root != domains[i].custom_root)
+			row.find('.change-root').removeClass('hidden');
 	}
 
-	tb = $('#web_domains_custom tbody');
-	tb.text('');
-	for (var i = 0; i < domains.length; i++) {
-		if (!domains[i].static_enabled) continue;
-		if (domains[i].root != domains[i].custom_root) {
-			var row = $("<tr><th class='domain'><a href=''></a></th><td class='directory'><tt></td></tr>");
-			tb.append(row);
-			row.find('.domain a').text('https://' + domains[i].domain);
-			row.find('.domain a').attr('href', 'https://' + domains[i].domain);
-			row.find('.directory tt').text(domains[i].custom_root);
-		}
-	}
     });
 }
 
@@ -101,4 +76,14 @@ function do_web_update() {
       show_modal_error("Web Update", data, function() { show_web() });
     });
 }
+
+function show_change_web_root(elem) {
+  var domain = $(elem).parents('tr').attr('data-domain');
+  var root = $(elem).parents('tr').attr('data-custom-web-root');
+  show_modal_confirm(
+    'Change Root Directory for ' + domain,
+    '<p>You can change the static directory for <tt>' + domain + '</tt> to:</p> <p><tt>' + root + '</tt></p> <p>First create this directory on the server. Then click Update to scan for the directory and update web settings.',
+    'Update',
+    function() { do_web_update(); });
+}
 </script>