implemented widget-config

fbegin/fend.inc - temporary added for non-migrated pages
firewall_rules - use buttons for actions
index - implement widget-config & close button
pfSense.css - +/- icons now handled in js
pfSense.js - better handling of widget actions
*.widget - migrated

9 files changed, 142 insertions, 158 deletions

diff --git a/usr/local/www/bootstrap/css/pfSense.css b/usr/local/www/bootstrap/css/pfSense.css
index 757e264..881b7ba 100644
--- a/usr/local/www/bootstrap/css/pfSense.css
+++ b/usr/local/www/bootstrap/css/pfSense.css
@@ -27,11 +27,8 @@ body.no-menu #jumbotron .container {
 	background: url("/logo.png") no-repeat;
 }
 
-body.index a[data-toggle][aria-expanded="false"] i {
-	background-position: 0 -96px;
-}
-body.index a[data-toggle][aria-expanded="true"] i {
-	background-position: -24px -96px;
+body#index .icons {
+	float: right;
 }
 
 .ui-sortable-handle {
diff --git a/usr/local/www/fbegin.inc b/usr/local/www/fbegin.inc
new file mode 100644
index 0000000..652132d
--- /dev/null
+++ b/usr/local/www/fbegin.inc
@@ -0,0 +1,2 @@
+<!-- temporary until migration to bootstrap has completed -->
+<div style="background-color: gray;">
diff --git a/usr/local/www/fend.inc b/usr/local/www/fend.inc
new file mode 100644
index 0000000..262aeb7
--- /dev/null
+++ b/usr/local/www/fend.inc
@@ -0,0 +1,2 @@
+<!-- temporary -->
+<?php include "foot.inc"; ?>
diff --git a/usr/local/www/firewall_rules.php b/usr/local/www/firewall_rules.php
index 5ffe5df..6f93db9 100644
--- a/usr/local/www/firewall_rules.php
+++ b/usr/local/www/firewall_rules.php
@@ -340,7 +340,7 @@ display_top_tabs($tab_array);
 	?>
 	<tr id="antilockout">
 		<td></td>
-		<td><i class="icon icon-ok-circle"></i></td>
+		<td title="<?=gettext("This rule passes traffic")?>"><i class="icon icon-ok"></i></td>
 		<td></td>
 		<?php
 			pfSense_handle_custom_code("/usr/local/pkg/firewall_rules/pre_id_tr_antilockout");
@@ -355,8 +355,7 @@ display_top_tabs($tab_array);
 		<td></td>
 		<td><?=gettext("Anti-Lockout Rule");?></td>
 		<td>
-			<a href="system_advanced_admin.php" title="<?=gettext("edit rule");?>"><i class="icon icon-pencil"></i></a>
-			<a href="#" title="<?=gettext("copy this rule");?>"><i class="icon icon-random"></i></a>
+			<a href="system_advanced_admin.php" class="btn btn-primary">edit</a>
 		</td>
 	</tr>
 <?php endif;?>
@@ -364,7 +363,7 @@ display_top_tabs($tab_array);
 <?php if (isset($config['interfaces'][$if]['blockpriv'])): ?>
 	<tr id="frrfc1918">
 		<td></td>
-		<td><i class="icon icon-remove-circle"></i></td>
+		<td title="<?=gettext("This rule blocks traffic")?>"><i class="icon icon-remove"></i></td>
 		<td></td>
 		<td>*</td>
 		<td><?=gettext("RFC 1918 networks");?></td>
@@ -376,15 +375,14 @@ display_top_tabs($tab_array);
 		<td></td>
 		<td><?=gettext("Block private networks");?></td>
 		<td>
-			<a href="system_advanced_admin.php" title="<?=gettext("edit rule");?>"><i class="icon icon-pencil"></i></a>
-			<a href="#" title="<?=gettext("copy this rule");?>"><i class="icon icon-random"></i></a>
+			<a href="system_advanced_admin.php" class="btn btn-primary" title="<?=gettext("edit rule");?>">edit</a>
 		</td>
 	</tr>
 <?php endif;?>
 <?php if (isset($config['interfaces'][$if]['blockbogons'])): ?>
 	<tr id="frrfc1918">
 		<td></td>
-		<td><i class="icon icon-remove-circle"></i></td>
+		<td title="<?=gettext("This rule blocks traffic")?>"><i class="icon icon-remove"></i></td>
 		<td></td>
 		<td>*</td>
 		<td><?=gettext("Reserved/not assigned by IANA");?></td>
@@ -396,8 +394,7 @@ display_top_tabs($tab_array);
 		<td>*</td>
 		<td><?=gettext("Block bogon networks");?></td>
 		<td>
-			<a href="system_advanced_admin.php" title="<?=gettext("edit rule");?>"><i class="icon icon-pencil"></i></a>
-			<a href="#" title="<?=gettext("copy this rule");?>"><i class="icon icon-random"></i></a>
+			<a href="system_advanced_admin.php" class="btn btn-primary">edit</a>
 		</td>
 	</tr>
 <?php endif;?>
@@ -685,9 +682,9 @@ display_top_tabs($tab_array);
 		<?=htmlspecialchars($filterent['descr']);?>
 	</td>
 	<td>
-		<a href="firewall_rules_edit.php?id=<?=$i;?>" title="<?=gettext("edit rule");?>"><i class="icon icon-pencil"></i></a>
-		<a href="firewall_rules_edit.php?dup=<?=$i;?>" title="<?=gettext("copy this rule");?>"><i class="icon icon-random"></i></a>
-		<a href="firewall_rules.php?act=del&amp;if=<?=htmlspecialchars($if);?>&amp;id=<?=$i;?>"><i class="icon icon-delete"></i></a>
+		<a href="firewall_rules_edit.php?id=<?=$i;?>" class="btn btn-primary">edit</a>
+		<a href="firewall_rules_edit.php?dup=<?=$i;?>" class="btn btn-default">copy</a>
+		<a href="firewall_rules.php?act=del&amp;if=<?=htmlspecialchars($if);?>&amp;id=<?=$i;?>" class="btn btn-danger">delete</a>
 	</td>
 	</tr>
 	<?php endfor;?>
@@ -710,11 +707,11 @@ display_top_tabs($tab_array);
 </table>
 
 <a href="firewall_rules_edit.php?if=<?=htmlspecialchars($if);?>" role="button" class="btn btn-success">
-	<?=gettext("add new rule");?>
+	<?=gettext("add new");?>
 </a>
 <?php if ($i > 0): ?>
 	<a href="#" role="button" class="btn btn-danger">
-		<?=gettext("delete selected rules");?>
+		<?=gettext("delete selected");?>
 	</a>
 	<!-- onclick="return confirm('<?=gettext('Do you really want to delete the selected rules?');?>')" />-->
 <?php endif;?>
diff --git a/usr/local/www/index.php b/usr/local/www/index.php
index d7c73bc..ccf7dcc 100644
--- a/usr/local/www/index.php
+++ b/usr/local/www/index.php
@@ -312,16 +312,17 @@ foreach ($widgets as $widgetname => $widgetconfig)
 		<div class="panel panel-default" id="widget-<?=$widgetname?>">
 			<div class="panel-heading">
 				<?=$widgetconfig['name']?>
-				<span style="float: right">
-					<a href="#"><i class="icon icon-wrench"></i></a>
+				<span class="icons">
+					<a data-toggle="collapse" href="#widget-<?=$widgetname?> .panel-footer" class="config hidden">
+						<i class="icon icon-wrench"></i>
+					</a>
 					<a data-toggle="collapse" href="#widget-<?=$widgetname?> .panel-body">
-						<?php if ($widgetconfig['display'] == 'close'): ?>
-							<i class="icon icon-plus-sign"></i>
-						<?php else: ?>
-							<i class="icon icon-minus-sign"></i>
-						<?php endif; ?>
+						<!--  actual icon is determined in css based on state of body -->
+						<i class="icon icon-plus-sign"></i>
+					</a>
+					<a data-toggle="close" href="#widget-<?=$widgetname?>">
+						<i class="icon icon-remove-sign"></i>
 					</a>
-					<a href="#"><i class="icon icon-remove-sign"></i></a>
 				</span>
 			</div>
 			<div class="panel-body collapse<?=($widgetconfig['display']=='close' ? '' : ' in')?>">
diff --git a/usr/local/www/jquery/pfSense.js b/usr/local/www/jquery/pfSense.js
index 9ba8ce2..89ec197 100644
--- a/usr/local/www/jquery/pfSense.js
+++ b/usr/local/www/jquery/pfSense.js
@@ -1,7 +1,31 @@
 $(function() {
-	switch ($(document.body).attr('id'))
-	{
+	switch ($(document.body).attr('id')) {
 		case 'index':
+			// Hide configuration button for panels without configuration
+			$('.container .panel-heading a.config').each(function (idx, el){
+				var config = $(el).parents('.panel').children('.panel-footer');
+				if (config.length == 1)
+					$(el).removeClass('hidden');
+			});
+
+			// Initial state & toggle icons of collapsed panel
+			$('.container .panel-heading a[data-toggle="collapse"] i').each(function (idx, el){
+				var body = $(el).parents('.panel').children('.panel-body'), isOpen = body.hasClass('in');
+				$(el).toggleClass('icon-plus-sign', !isOpen);
+				$(el).toggleClass('icon-minus-sign', isOpen);
+
+				body.on('show.bs.collapse', function(){ $(el).toggleClass('icon-minus-sign', true); $(el).toggleClass('icon-plus-sign', false); });
+				body.on('hide.bs.collapse', function(){ $(el).toggleClass('icon-minus-sign', false); $(el).toggleClass('icon-plus-sign', true); });
+			});
+
+			// Make panels destroyable
+			$('.container .panel-heading a[data-toggle="close"] i').each(function (idx, el){
+				$(el).on('click', function(e){
+					$(el).parents('.panel').collapse('hide');
+				})
+			});
+
+			// Make panels sortable
 			$('.container .col-md-6').sortable({
 				handle: '.panel-heading',
 				cursor: 'grabbing',
diff --git a/usr/local/www/widgets/widgets/picture.widget.php b/usr/local/www/widgets/widgets/picture.widget.php
index eb9fdbf..154baf5 100644
--- a/usr/local/www/widgets/widgets/picture.widget.php
+++ b/usr/local/www/widgets/widgets/picture.widget.php
@@ -48,12 +48,8 @@ if($_GET['getpic']=="true") {
 if($_POST) {
 	if (is_uploaded_file($_FILES['pictfile']['tmp_name'])) {
 		/* read the file contents */
-		$fd_pic = fopen($_FILES['pictfile']['tmp_name'], "rb");
-		while ( ($buf=fread( $fd_pic, 8192 )) != '' ) {
-			// Here, $buf is guaranteed to contain data
-			$data .= $buf;
-		}
-		fclose($fd_pic);
+		$data = file_get_contents($_FILES['pictfile']['tmp_name']);
+
 		if(!$data) {
 			log_error("Warning, could not read file " . $_FILES['pictfile']['tmp_name']);
 			die("Could not read temporary file");
@@ -69,27 +65,14 @@ if($_POST) {
 }
 
 ?>
+<a href="/widgets/widgets/picture.widget.php?getpic=true" target="_blank">
+	<img width="100%" height="100%" src="/widgets/widgets/picture.widget.php?getpic=true" alt="picture" />
+</a>
 
-<input type="hidden" id="picture-config" name="picture-config" value="" />
-
-<div id="picture-settings" class="widgetconfigdiv" style="display:none;">
-	<form action="/widgets/widgets/picture.widget.php" method="post" name="iforma" enctype="multipart/form-data">
-		<input name="pictfile" type="file" class="formbtn" id="pictfile" size="20" />
-		<input id="submita" name="submita" type="submit" class="formbtn" value="Upload" />
-	</form>
-</div>
-
-<div id="picture-widgets" style="padding: 5px">
-	<a href='/widgets/widgets/picture.widget.php?getpic=true' target='_blank'>
-		<img border="0" width="100%" height="100%" src="/widgets/widgets/picture.widget.php?getpic=true" alt="picture" />
-	</a>
-</div>
+<!-- close the body we're wrapped in and add a configuration-panel -->
+</div><div class="panel-footer collapse">
 
-<!-- needed to show the settings widget icon -->
-<script type="text/javascript">
-//<![CDATA[
-	selectIntLink = "picture-configure";
-	textlink = document.getElementById(selectIntLink);
-	textlink.style.display = "inline";
-//]]>
-</script>
+<form action="/widgets/widgets/picture.widget.php" method="post" enctype="multipart/form-data" class="form-inline">
+	<input name="pictfile" type="file" class="form-control" placeholder="Upload picture"/>
+	<button type="submit" class="btn btn-default">Upload</button>
+</form>
diff --git a/usr/local/www/widgets/widgets/rss.widget.php b/usr/local/www/widgets/widgets/rss.widget.php
index 93b33a9..a8f4332 100644
--- a/usr/local/www/widgets/widgets/rss.widget.php
+++ b/usr/local/www/widgets/widgets/rss.widget.php
@@ -77,69 +77,7 @@ else
 	$textarea_txt = "";
 
 ?>
-
-<input type="hidden" id="rss-config" name="rss-config" value="" />
-
-<div id="rss-settings" class="widgetconfigdiv" style="display:none;">
-	<form action="/widgets/widgets/rss.widget.php" method="post" name="iformc">
-		<textarea name="rssfeed" class="formfld unknown textarea_widget" id="rssfeed" cols="40" rows="3"><?=$textarea_txt;?></textarea>
-		<br />
-		<table>
-			<tr>
-				<td align="right">
-					Display number of items:
-				</td>
-				<td>
-					<select name='rssmaxitems' id='rssmaxitems'>
-						<option value='<?= $max_items ?>'><?= $max_items ?></option>
-						<?php
-							for($x=100; $x<5100; $x=$x+100)
-								echo "<option value='{$x}'>{$x}</option>\n";
-						?>
-					</select>
-				</td>
-			</tr>
-			<tr>
-				<td align="right">
-					Widget height:
-				</td>
-				<td>
-					<select name='rsswidgetheight' id='rsswidgetheight'>
-						<option value='<?= $rsswidgetheight ?>'><?= $rsswidgetheight ?>px</option>
-						<?php
-							for($x=100; $x<5100; $x=$x+100)
-								echo "<option value='{$x}'>{$x}px</option>\n";
-						?>
-					</select>
-				</td>
-			</tr>
-			<tr>
-				<td align="right">
-					Show how many characters from story:
-				</td>
-				<td>
-					<select name='rsswidgettextlength' id='rsswidgettextlength'>
-						<option value='<?= $rsswidgettextlength ?>'><?= $rsswidgettextlength ?></option>
-						<?php
-							for($x=10; $x<5100; $x=$x+10)
-								echo "<option value='{$x}'>{$x}</option>\n";
-						?>
-					</select>
-				</td>
-			</tr>
-			<tr>
-				<td>
-					&nbsp;
-				</td>
-				<td>
-					<input id="submitc" name="submitc" type="submit" class="formbtn" value="Save" />
-				</td>
-			</tr>
-		</table>
-	</form>
-</div>
-
-<div id="rss-widgets" style="padding: 5px; height: <?=$rsswidgetheight?>px; overflow:scroll;">
+<div class="list-group" style="height: <?=$rsswidgetheight?>px; overflow:scroll;">
 <?php
 	if(!is_dir("/tmp/simplepie")) {
 		mkdir("/tmp/simplepie");
@@ -149,9 +87,9 @@ else
 	exec("chmod a+rw /tmp/simplepie/cache/.");
 	require_once("simplepie/simplepie.inc");
 	function textLimit($string, $length, $replacer = '...') {
-	if(strlen($string) > $length)
-	return (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;
-	return $string;
+		if(strlen($string) > $length)
+			return (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;
+		return $string;
 	}
 	$feed = new SimplePie();
 	$feed->set_cache_location("/tmp/simplepie/");
@@ -160,27 +98,63 @@ else
 	$feed->set_output_encoding('latin-1');
 	$feed->handle_content_type();
 	$counter = 1;
-	foreach($feed->get_items() as $item) {
+	foreach($feed->get_items(0, $max_items) as $item) {
 		$feed = $item->get_feed();
 		$feed->strip_htmltags();
-		echo "<a target='blank' href='" . $item->get_permalink() . "'>" . $item->get_title() . "</a><br />";
 		$content = $item->get_content();
 		$content = strip_tags($content);
-		echo textLimit($content, $rsswidgettextlength) . "<br />";
-		echo "Source: <a target='_blank' href='" . $item->get_permalink() . "'><img src='" . $feed->get_favicon() . "' alt='" . $feed->get_title() . "' title='" . $feed->get_title() . "' border='0' width='16' height='16' /></a><br />";
-		$counter++;
-		if($counter > $max_items)
-			break;
-		echo "<hr/>";
+?>
+	<a href="<?=$item->get_permalink()?>" target="_blank" class="list-group-item">
+		<h4 class="list-group-item-heading">
+			<img src="<?=$feed->get_favicon()?>" title="Source: <?=$feed->get_title()?>" width="16" height="16" />
+			<?=$item->get_title()?>
+		</h4>
+		<p class="list-group-item-text">
+			<?=textLimit($content, $rsswidgettextlength)?>
+			<br />
+		</p>
+	</a>
+<?php
 	}
 ?>
+
 </div>
 
-<!-- needed to display the widget settings menu -->
-<script type="text/javascript">
-//<![CDATA[
-	selectIntLink = "rss-configure";
-	textlink = document.getElementById(selectIntLink);
-	textlink.style.display = "inline";
-//]]>
-</script>
+<!-- close the body we're wrapped in and add a configuration-panel -->
+</div><div class="panel-footer collapse">
+
+<form action="/widgets/widgets/rss.widget.php" method="post" class="form-horizontal">
+	<div class="form-group">
+		<label for="rssfeed" class="col-sm-3 control-label">Feeds</label>
+		<div class="col-sm-6">
+			<textarea name="rssfeed" class="form-control"><?=$textarea_txt;?></textarea>
+		</div>
+	</div>
+
+	<div class="form-group">
+		<label for="rssmaxitems" class="col-sm-3 control-label"># Stories</label>
+		<div class="col-sm-6">
+			<input type="number" name="rsswidgetheight" value="<?=$max_items?>" min="1" max="100" class="form-control" />
+		</div>
+	</div>
+
+	<div class="form-group">
+		<label for="rsswidgetheight" class="col-sm-3 control-label">Widget height</label>
+		<div class="col-sm-6">
+			<input type="number" name="rsswidgetheight" value="<?=$rsswidgetheight?>" min="100" max="2500" step="100" class="form-control" />
+		</div>
+	</div>
+
+	<div class="form-group">
+		<label for="rsswidgettextlength" class="col-sm-3 control-label">Content limit</label>
+		<div class="col-sm-6">
+			<input type="number" name="rsswidgettextlength" value="<?=$rsswidgettextlength?>" min="100" max="5000" step="100" class="form-control" />
+		</div>
+	</div>
+
+	<div class="form-group">
+		<div class="col-sm-offset-3 col-sm-6">
+			<button type="submit" class="btn btn-default">Save</button>
+		</div>
+	</div>
+</form>
\ No newline at end of file
diff --git a/usr/local/www/widgets/widgets/services_status.widget.php b/usr/local/www/widgets/widgets/services_status.widget.php
index 92c7669..58abe2a 100644
--- a/usr/local/www/widgets/widgets/services_status.widget.php
+++ b/usr/local/www/widgets/widgets/services_status.widget.php
@@ -43,20 +43,11 @@ require_once("/usr/local/www/widgets/include/services_status.inc");
 $services = get_services();
 
 if(isset($_POST['servicestatusfilter'])) {
-	$config['widgets']['servicestatusfilter'] = htmlspecialchars($_POST['servicestatusfilter'], ENT_QUOTES | ENT_HTML401);
+	$config['widgets']['servicestatusfilter'] = htmlspecialchars(implode(',', $_POST['servicestatusfilter']), ENT_QUOTES | ENT_HTML401);
 	write_config("Saved Service Status Filter via Dashboard");
-	header("Location: ../../index.php");
+	header("Location: /");
 }
 ?>
-<input type="hidden" id="services_status-config" name="services_status-config" value="" />
-<div id="services_status-settings" class="widgetconfigdiv" style="display:none;">
-	<form action="/widgets/widgets/services_status.widget.php" method="post" name="iformd">
-		Comma separated list of services to NOT display in the widget<br />
-		<input type="text" size="30" name="servicestatusfilter" class="formfld unknown" id="servicestatusfilter" value="<?= $config['widgets']['servicestatusfilter'] ?>" />
-		<input id="submitd" name="submitd" type="submit" class="formbtn" value="Save" />
-	</form>
-</div>
-
 <table class="table table-striped">
 <thead>
 	<tr>
@@ -96,11 +87,24 @@ if (count($services) > 0) {
 </tbody>
 </table>
 
-<!-- needed to display the widget settings menu -->
-<script type="text/javascript">
-//<![CDATA[
-	selectIntLink = "services_status-configure";
-	textlink = document.getElementById(selectIntLink);
-	textlink.style.display = "inline";
-//]]>
-</script>
+<!-- close the body we're wrapped in and add a configuration-panel -->
+</div><div class="panel-footer collapse">
+
+<form action="/widgets/widgets/services_status.widget.php" method="post" class="form-horizontal">
+	<div class="form-group">
+		<label for="inputPassword3" class="col-sm-3 control-label">Hidden services</label>
+		<div class="col-sm-6">
+			<select multiple="multiple" name="servicestatusfilter" class="form-control" height="5">
+			<?php foreach ($services as $service): ?>
+				<option <?=(in_array($service['name'], $skipservices)?'selected="selected"':'')?>><?=$service['name']?></option>
+			<?php endforeach; ?>
+			</select>
+		</div>
+	</div>
+
+	<div class="form-group">
+		<div class="col-sm-offset-3 col-sm-6">
+			<button type="submit" class="btn btn-default">Save</button>
+		</div>
+	</div>
+</form>
\ No newline at end of file