aredn: Node description enhancement (#156)

* aredn: Node Description Enhancements

Node Description entry on setup page is now multiline.
Fixes #91

Node Description display on status page is now a table cell,
allowing for background color addition and word-wrapping.
Fixes #90

Description background color added to CSS files with colors appropriate to each theme.
Other CSS additions for the description input field on the setup page.

Updated onboard help file about the node description field (and fixed a typo)

* move some of the character filtering "higher up the chain" in perl.

javascript still will replace any new lines with a space in case the user hit's enter in the description entry box.
tested with curl and I can't find any problems yet.

* removed some commented lines that were not needed

* actually fix the typo I saw in help.html file.

files/www/aredn.css

@@ -44,4 +44,16 @@ body table {
   border: solid 1px black;
   border-radius: 10px;
   background-color: rgb(108,231,232);
-}
+}
+#node_description_entry {                                                  
+vertical-align: middle;                                        
+resize: none;                                                  
+}                                                              
+#node_description_display {                                                                                        
+text-align: center;
+vertical-align: middle;
+background-color: gainsboro;
+font-size: 12pt;
+width: 40%;   
+}
+

files/www/black_on_white.css

@@ -32,3 +32,15 @@ body table {
 .LogoDiv { position:absolute left:0px; width:100%; height:95; }
 .AREDNLogo { background: white;  position:absolute; left:10%; width:175; height:95; }
 .PartOfAREDN { font-family:Verdana; font-size:xx-small; text-align:center; }
+
+#node_description_entry {
+vertical-align: middle;
+resize: none;
+}
+#node_description_display {
+text-align: center;
+vertical-align: middle;
+background-color: whitesmoke;
+font-size: 12pt;
+width: 40%;
+}

files/www/cgi-bin/perlfunc.pm

@@ -199,6 +199,12 @@ sub read_postdata
         $line = fgets(10);
         push(@parse_errors, "not blank: '$line'") unless $line eq "\r\n";
         $line = fgets(1000);
+        if($parm =~ 'description_node') {
+            $line = substr($line, 0, 210);
+            $line =~ s/'/'/g;
+            $line =~ s/</&lt;/g;
+            $line =~ s/>/&gt;/g;
+        }
         $line =~ s/[\r\n]+$//;
         $parms{$parm} = $line;
         $state = "boundary";

files/www/cgi-bin/setup

@@ -433,13 +433,6 @@ if($parms{button_save})
 	push (@errors, "OK") unless @errors;
     }
 
-    if($description_node)
-    {
-        if($description_node =~ /<.*>|<\/.*>/) {
-            push(@errors, "Node description cannot contain html like tags")
-        }
-    }
-
     unless(@errors)
     {
 	$parms{node} = $node;
@@ -564,7 +557,7 @@ function toggleMap(toggleButton) {
 print "</script>";
 
 alert_banner();
-print "<form method=post action=/cgi-bin/setup enctype='multipart/form-data'>\n" unless $debug == 2;
+print "<form onSubmit='doSubmit();' name='mainForm' method=post action=/cgi-bin/setup enctype='multipart/form-data'>\n" unless $debug == 2;
 print "<form method=post action=test>\n" if $debug == 2;
 
 print "<table width=790>\n";
@@ -642,7 +635,7 @@ print "
 </tr>
 <tr>
 <td>Node Description (optional)</td>
-<td><input type='text' size='50' name='description_node' value=\"$description_node\" tabindex='4'</input></td>";
+<td><textarea rows='2' cols='60' wrap='soft' maxlength='210' id='node_description_entry' name='description_node' tabindex='4'>$description_node</textarea></td>";
 push @hidden, "<input type=hidden name=config value='mesh'>";
 print "
 <td>Verify Password</td>
@@ -965,6 +958,14 @@ page_footer();
 
 print <<EOF;
 <script>
+
+function doSubmit() {
+        var desc_text = document.mainForm.description_node.value;
+        var singleLine = desc_text.replace(new RegExp( "\\n", "g" ), " ");
+        document.mainForm.description_node.value = singleLine;
+        return true;
+}
+
 var map = L.map('map').setView([0.0, 0.0], 1);
 var dotIcon = L.icon({iconUrl: '/dot.png'});
 EOF

files/www/cgi-bin/status

@@ -78,7 +78,7 @@ alert_banner();
 print "<h1><big>$node";
 print " / $tactical" if $tactical;
 print "</big></h1>";
-print "$node_desc" if $node_desc;
+print "<table id='node_description_display'><tr><td>$node_desc</td></tr></table>" if $node_desc;
 print "<hr>\n";
 
 # nav buttons

files/www/cgi-bin/sysinfo.json

@@ -55,7 +55,7 @@ end
 info={}
 
 -- API version
-info['api_version']="1.3"
+info['api_version']="1.4"
 
 -- NODE name
 css=getUciConfType("system", "system")
@@ -65,6 +65,9 @@ info['node']=css[0]['hostname']
 m=os.capture("/usr/local/bin/get_model")
 info['model']=m:chomp()
 
+-- DESCRIPTION
+info['description']=css[0]['description']
+
 -- BOARD ID
 info['board_id']=hardware_boardid()
 

files/www/help.html

@@ -272,8 +272,7 @@ manually configure the network.
 The buttons on this page work as follows:
 </p>
 <ul>
-<li><strong>Save Change
-s</strong> will check the validity of all the
+<li><strong>Save Changes</strong> will check the validity of all the
 entered information and save it to flash memory if no errors are found. A
 reboot is required to make most changes on this page take effect, and should
   be done as soon as possible to avoid configuration mismatch problems.<br><br></li>
@@ -327,6 +326,15 @@ encrypted in transit, so this is best done from a direct wired connection to
 the node.
 </p>
 <p>
+<strong>Node Description</strong> is not required to be filled in.
+This is where you can add some additional info about the node.<br>
+ie: "This device is maintained by (callsign) Please contact email@address for more info!"<br>
+<em>This is completely optional</em>. There are no character restrictions in the field.<br>
+The maximum length allowed is 210 characters.<br>
+HTML tags simply will not work.<br>The description displayed on the main status page is
+automatically word-wrapped at about 70 charaters or so, and shouldn't split a word in the middle.
+</p>
+<p>
 The <strong>Mesh RF</strong>, <strong>LAN</strong>,
 and <strong>WAN</strong> boxes are where the details of each of these network
 interfaces are set.

files/www/loading.css

@@ -69,3 +69,14 @@
     from {transform: rotate(0deg);}
     to {transform: rotate(359deg);}
 }
+#node_description_entry {
+vertical-align: middle;
+resize: none;
+}
+#node_description_display {
+text-align: center;
+vertical-align: middle;
+background-color: whitesmoke;
+font-size: 12pt;
+width: 40%;
+}

files/www/red_on_black.css

@@ -32,3 +32,15 @@ body table {
 .LogoDiv { position:absolute left:0px; width:100%; height:95; }
 .AREDNLogo { background: white;  position:absolute; left:10%; width:175; height:95; }
 .PartOfAREDN { font-family:Verdana; font-size:xx-small; text-align:center; }
+
+#node_description_entry {
+vertical-align: middle;
+resize: none;
+}
+#node_description_display {
+text-align: center;
+vertical-align: middle;
+background-color: dimgrey;
+font-size: 12pt;
+width: 40%;
+}

files/www/white_on_black.css

@@ -32,3 +32,15 @@ body table {
 .LogoDiv { position:absolute left:0px; width:100%; height:95; }
 .AREDNLogo { background: white;  position:absolute; left:10%; width:175; height:95; }
 .PartOfAREDN { font-family:Verdana; font-size:xx-small; text-align:center; }
+
+#node_description_entry {
+vertical-align: middle;
+resize: none;
+}
+#node_description_display {
+text-align: center;
+vertical-align: middle;
+background-color: dimgrey;
+font-size: 12pt;
+width: 40%;
+}

files/www/yellow_on_black.css

@@ -32,3 +32,15 @@ body table {
 .LogoDiv { position:absolute left:0px; width:100%; height:95; }
 .AREDNLogo { background: white;  position:absolute; left:10%; width:175; height:95; }
 .PartOfAREDN { font-family:Verdana; font-size:xx-small; text-align:center; }
+
+#node_description_entry {
+vertical-align: middle;
+resize: none;
+}
+#node_description_display {
+text-align: center;
+vertical-align: middle;
+background-color: dimgrey;
+font-size: 12pt;
+width: 40%;
+}