client-side saving of widgets

public/src/forum/admin/themes.js

@@ -153,6 +153,34 @@ define(['forum/admin/settings'], function(Settings) {
 		}).on('click', '.toggle-widget', function() {
 			$(this).parents('.panel').children('.panel-body').toggleClass('hidden');
 		});
+
+		$('#widgets .btn[data-template]').on('click', function() {
+			var btn = $(this),
+				template = btn.attr('data-template'),
+				location = btn.attr('data-location'),
+				area = btn.parents('.area').children('.widget-area'),
+				widgets = [];
+
+			area.find('.panel[data-widget]').each(function() {
+				var widget = {};
+				widget[this.getAttribute('data-widget')] = $(this).find('form').serializeArray();
+				widgets.push(widget);
+			});
+
+			socket.emit('admin.themes.widgets.set', {
+				template: template,
+				location: location,
+				widgets: widgets
+			}, function(err) {
+				app.alert({
+					alert_id: 'admin:widgets',
+					type: err ? 'danger' : 'success',
+					title: err ? 'Error' : 'Widgets Updated',
+					message: err ? err : 'Successfully updated widgets',
+					timeout: 2500
+				});
+			});
+		});
 		
 	};
 

public/templates/admin/themes.tpl

@@ -57,20 +57,24 @@
 				<div class="col-xs-6">
 					<h4>Available Widgets</h4>
 					<div class="well">
-						<div class="panel panel-default pointer">
+						<div data-widget="html" class="panel panel-default pointer">
 							<div class="panel-heading">
 								<strong>HTML</strong> <small>Any text, html, or embedded script.</small>
 							</div>
 							<div class="panel-body hidden">
-								<textarea class="form-control" rows="6" placeholder="Enter HTML"></textarea>
+								<form>
+									<textarea class="form-control" rows="6" name="html" placeholder="Enter HTML"></textarea>
+								</form>
 							</div>
 						</div>
-						<div class="panel panel-default pointer">
+						<div data-widget="markdown" class="panel panel-default pointer">
 							<div class="panel-heading">
 								<strong>Markdown</strong> <small>Markdown formatted text</small>
 							</div>
 							<div class="panel-body hidden">
-								<textarea class="form-control" rows="6" placeholder="Enter Markdown"></textarea>
+								<form>
+									<textarea class="form-control" rows="6" name="markdown" placeholder="Enter Markdown"></textarea>
+								</form>
 							</div>
 						</div>
 						<!-- BEGIN widgets -->
@@ -81,9 +85,11 @@
 
 				<div class="col-xs-6">
 					<!-- BEGIN areas -->
-					<h4>{areas.name}</h4>
-					<div class="well widget-area">
+					<div class="area">
+						<h4>{areas.name} <small>{areas.template} / {areas.location}</small> <button data-template="{areas.template}" data-location="{areas.location}" class="btn btn-success btn-xs pull-right">Save</button></h4>
+						<div class="well widget-area">
 
+						</div>
 					</div>
 					<!-- END areas -->
 				</div>