Add Timer multi tag support

plugin/controllers/views/ajax/edittimer.tmpl

@@ -70,17 +70,15 @@
 
 	<div class="timerlist_row">
 		<span style="width: 100px; float: left;">Tags:</span>
-		<span>
-		<select id="tags" name="tags">
-			<option value="">Nothing</option>
-		</select>
+		<span id="tagsnew">
 		</span>
 	</div>
 
 	<div class="timerlist_row">
 		<span style="width: 100px; float: left;">After Event:</span>
 		<span>
 		<select id="afterevent" name="afterevent">
+			<option value="0">Nothing</option>
 			<option value="1">Standby</option>
 			<option value="2">Shutdown</option>
 			<option value="3" selected="">Auto</option>
@@ -145,6 +143,13 @@ $('#editTimerForm').dialog({
 			$('[name="repeated"]:checked').each(function() {
 				repeated += parseInt($(this).val());
 			});
+			var tags = "";
+			$('[name="tagsnew"]:checked').each(function() {
+				if(tags!="")
+					tags+=" ";
+				tags += $(this).val();
+
+			});
 			var urldata = { sRef: $('#bouquet_select').val(),
 				begin: Math.round(begindate.getTime() / 1000),
 				end: Math.round(enddate.getTime() / 1000),
@@ -154,7 +159,7 @@ $('#editTimerForm').dialog({
 				justplay: ($('#justplay').is(':checked')?"1":"0"),
 				afterevent: $('#afterevent').val(),
 				dirname: $('#dirname').val(),
-				tags: $('#tags').val(),
+				tags: tags,
 				repeated: repeated };
 
 			var canclose = false;

plugin/public/css/style.css

@@ -628,4 +628,6 @@ p {text-align: left;}
 .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
 .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
 .ui-timepicker-div td { font-size: 90%; }
-.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
+.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
+#repeatdays label span { padding: .3em 1em;}
+#tagsnew label span { padding: .2em .8em;}

plugin/public/js/openwebif.js

@@ -452,23 +452,14 @@ function initTimerEdit() {
 		success: function(data) {
 			tags = $.parseJSON(data);
 			if (tags.result) {
-				$('#tags')
-					.find('option')
-					.remove()
-					.end()
-
-				$('#tags')
-					.append($("<option></option>")
-						.attr("value", "")
-						.text("Nothing"));
-
 				for (var id in tags.tags) {
 					tag = tags.tags[id];
-					$('#tags')
-						.append($("<option></option>")
-							.attr("value", tag)
-							.text(tag));
+					$('#tagsnew')
+						.append("<input type='checkbox' name='tagsnew' value='"+tag+"' id='tag_"+tag+"'/><label for='tag_"+tag+"'>"+tag+"</label>");
 				}
+
+				$('#tagsnew').buttonset();
+
 			}
 		}
 	});
@@ -499,7 +490,6 @@ function editTimer(serviceref, begin, end) {
 							$('#description').val(timer.description);
 							$('#bouquet_select').val(timer.serviceref);
 							$('#dirname').val(timer.dirname);
-							$('#tags').val(timer.tags);
 							$('#enabled').prop("checked", timer.disabled == 0);
 							$('#justplay').prop("checked", timer.justplay);
 							$('#afterevent').val(timer.afterevent);
@@ -512,6 +502,13 @@ function editTimer(serviceref, begin, end) {
 							}
 							$('#repeatdays').buttonset('refresh');
 
+							$('#tagsnew').find('input').attr('checked',false);
+							var tags = timer.tags.split(' ');
+							for (var i=0; i<tags.length; i++) {
+								$('#tag_'+tags[i]).attr('checked', true);
+							}
+							$('#tagsnew').buttonset('refresh');
+
 							$('#timerbegin').datetimepicker('setDate', (new Date(Math.round(timer.begin) * 1000)));
 							$('#timerend').datetimepicker('setDate', (new Date(Math.round(timer.end) * 1000)));
 
@@ -554,14 +551,16 @@ function addTimer(evt) {
 	$('#timername').val(title);
 	$('#description').val(desc);
 	$('#dirname').val("None");
-	$('#tags').val("");
 	$('#enabled').prop("checked", true);
 	$('#justplay').prop("checked", false);
 	$('#afterevent').val(3);
 	$('#errorbox').hide();
 
 	for (var i=0; i<7; i++) $('#day'+i).attr('checked', false);
 	$('#repeatdays').buttonset('refresh');
+
+	$('#tagsnew').find('input').attr('checked',false);
+	$('#tagsnew').buttonset('refresh');
 
 	var begindate = begin !== -1 ? new Date( (Math.round(begin) - margin_before*60) * 1000) : new Date();
 	$('#timerbegin').datetimepicker('setDate', begindate);