Public/fhem-mirror
1
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-05-04 22:19:38 +00:00
Code

FHEMWEB:

Browse Source 
- longpoll in multiple windows
- update of all copies of the same device on one page (id -> informId)
- some reformatting


git-svn-id: https://svn.fhem.de/fhem/trunk@3425 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig 2013-07-15 09:04:36 +00:00
parent eb481f7867
commit b80c0d1df4
9 changed files with 56 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
fhem/CHANGED
View File

@ -1,5 +1,6 @@
# Add changes at the top of the list. Keep it in ASCII # Add changes at the top of the list. Keep it in ASCII
- SVN - SVN
- feature: longpoll in multiple browserwindows, some css ids changed to class
- feature: fhem.pl: version command added - feature: fhem.pl: version command added
- feature: LightScene: add html overview of all configured scenes in - feature: LightScene: add html overview of all configured scenes in
detail view. allow usage of overview in a weblink. detail view. allow usage of overview in a weblink.

61
fhem/FHEM/01_FHEMWEB.pm
View File

@ -700,11 +700,9 @@ FW_makeTable($$$@)
if($n eq "DEF" && !$FW_hiddenroom{input}) { if($n eq "DEF" && !$FW_hiddenroom{input}) {
FW_makeEdit($name, $n, $val); FW_makeEdit($name, $n, $val);
} } else {
else {
FW_pO "<td><div class=\"dname\">$n</div></td>"; FW_pO "<td><div class=\"dname\">$n</div></td>";
if(ref($val)) {#handle readings if(ref($val)) { #handle readings
my ($v, $t) = ($val->{VAL}, $val->{TIME}); my ($v, $t) = ($val->{VAL}, $val->{TIME});
$v = FW_htmlEscape($v); $v = FW_htmlEscape($v);
if($FW_ss) { if($FW_ss) {
@ -712,42 +710,43 @@ FW_makeTable($$$@)
FW_pO "<td><div class=\"dval\">$v$t</div></td>"; FW_pO "<td><div class=\"dval\">$v$t</div></td>";
} else { } else {
$t = "" if(!$t); $t = "" if(!$t);
FW_pO "<td><div id=\"$name-$n\">$v</div></td>"; FW_pO "<td><div informId=\"$name-$n\">$v</div></td>";
FW_pO "<td><div id=\"$name-$n-ts\">$t</div></td>"; FW_pO "<td><div informId=\"$name-$n-ts\">$t</div></td>";
} }
} } else {
else {
$val = FW_htmlEscape($val); $val = FW_htmlEscape($val);
# if possible provide link to reference # if possible provide link to reference
if ($n eq "room"){ if ($n eq "room"){
my @tmp; my @tmp;
push @tmp,FW_pH("room=$_" , $_ ,0,"",1,1)foreach(split(",",$val)); push @tmp,FW_pH("room=$_" , $_ ,0,"",1,1)foreach(split(",",$val));
FW_pO "<td><div class=\"dval\">" FW_pO "<td><div class=\"dval\">"
.join(",",@tmp) .join(",",@tmp)
."</div></td>"; ."</div></td>";
} } elsif ($n eq "webCmd"){
elsif ($n eq "webCmd"){ my @tmp;
my @tmp;
push @tmp,FW_pH("cmd.$name=set $name $_&detail=$name" , $_ ,0,"",1,1)foreach(split(":",$val)); push @tmp,FW_pH("cmd.$name=set $name $_&detail=$name" , $_ ,0,"",1,1)foreach(split(":",$val));
FW_pO "<td><div id=\"$name-$n\">" FW_pO "<td><div name=\"$name-$n\">"
.join(":",@tmp) .join(":",@tmp)
."</div></td>"; ."</div></td>";
} } elsif ($n =~ m/^fp_(.*)/ && $defs{$1}){#special for Floorplan
elsif ($n =~ m/^fp_(.*)/ && $defs{$1}){#special for Floorplan FW_pH "detail=$1", $val,1;
FW_pH "detail=$1", $val,1;
} } else {
else{ my @tmp;
my @tmp;
foreach(split(",",$val)){ foreach(split(",",$val)){
if ($defs{$_}){ push @tmp, FW_pH( "detail=$_", $_ ,0,"",1,1);} if($defs{$_}) {
else{ push @tmp, $_;} push @tmp, FW_pH( "detail=$_", $_ ,0,"",1,1);
} } else {
FW_pO "<td><div class=\"dval\">" push @tmp, $_;}
}
FW_pO "<td><div class=\"dval\">"
.join(",",@tmp) .join(",",@tmp)
."</div></td>"; ."</div></td>";
} }
} }
} }
FW_pH "cmd.$name=$cmd $name $n&amp;detail=$name", $cmd, 1 FW_pH "cmd.$name=$cmd $name $n&amp;detail=$name", $cmd, 1
if($cmd && !$FW_ss); if($cmd && !$FW_ss);
FW_pO "</tr>"; FW_pO "</tr>";
@ -990,7 +989,7 @@ FW_roomOverview($)
my ($l1, $l2) = ($list1[$idx], $list2[$idx]); my ($l1, $l2) = ($list1[$idx], $list2[$idx]);
if(!$l1) { if(!$l1) {
FW_pO "</table></td></tr>" if($idx); FW_pO "</table></td></tr>" if($idx);
FW_pO "<tr><td><table id=\"room\">" FW_pO "<tr><td><table class=\"room\">"
if($idx<int(@list1)-1); if($idx<int(@list1)-1);
} else { } else {
@ -1106,7 +1105,7 @@ FW_showRoom()
my ($allSets, $cmdlist, $txt) = FW_devState($d, $rf, \%extPage); my ($allSets, $cmdlist, $txt) = FW_devState($d, $rf, \%extPage);
FW_pO "<td id=\"$d\">$txt</td>"; FW_pO "<td informId=\"$d\">$txt</td>";
###### ######
@ -1812,7 +1811,7 @@ FW_displayFileList($@)
{ {
my ($heading,@files)= @_; my ($heading,@files)= @_;
FW_pO "$heading<br>"; FW_pO "$heading<br>";
FW_pO "<table class=\"block\" id=\"at\">"; FW_pO "<table class=\"block fileList\">";
my $row = 0; my $row = 0;
foreach my $f (@files) { foreach my $f (@files) {
FW_pO "<tr class=\"" . ($row?"odd":"even") . "\">"; FW_pO "<tr class=\"" . ($row?"odd":"even") . "\">";
@ -1871,7 +1870,7 @@ FW_style($$)
} elsif($a[1] eq "select") { } elsif($a[1] eq "select") {
my @fl = grep { $_ !~ m/floorplan/ } FW_fileList("$FW_cssdir/.*style.css"); my @fl = grep { $_ !~ m/floorplan/ } FW_fileList("$FW_cssdir/.*style.css");
FW_pO "$start<table class=\"block\" id=\"at\">"; FW_pO "$start<table class=\"block fileList\">";
my $row = 0; my $row = 0;
foreach my $file (@fl) { foreach my $file (@fl) {
next if($file =~ m/svg_/); next if($file =~ m/svg_/);

12
fhem/www/pgm2/brightstyle.css
View File

@ -24,11 +24,11 @@ table.block tr.sel { background: #cac8cf; }
table.block td {border: 0px solid none;} table.block td {border: 0px solid none;}
div#menu table { width:100%; } div#menu table { width:100%; }
table#room { background: #eee; width: 100%; border: 1px solid lightgray; border-radius:3px; border-spacing:0px;} table.room { background: #eee; width: 100%; border: 1px solid lightgray; border-radius:3px; border-spacing:0px;}
table#room td { border-top: 1px solid #fff; border-bottom: 1px solid #ddd; padding: 5px 10px 4px; font-weight:bold; font-size:1.2em} table.room td { border-top: 1px solid #fff; border-bottom: 1px solid #ddd; padding: 5px 10px 4px; font-weight:bold; font-size:1.2em}
table#room a { color: #455667; text-decoration: none; } table.room a { color: #455667; text-decoration: none; }
table#room a:hover { color: #1f1f1f; } table.room a:hover { color: #1f1f1f; }
table#room tr.sel { background: #cac8cf; } table.room tr.sel { background: #cac8cf; }
input { outline:none; border:1px solid white; color: #344556; padding:2px; border-radius:1px;} input { outline:none; border:1px solid white; color: #344556; padding:2px; border-radius:1px;}
input:focus { border: 1px solid red; } input:focus { border: 1px solid red; }
@ -70,4 +70,4 @@ g.on { fill:red; }
div[id*="Kalender-"] { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div[id*="Kalender-"] { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div[id*="disp"] { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div[id*="disp"] { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.block tr.even a[onclick*="Javascript"], table.block tr.odd a[onclick*="Javascript"] { font-weight: bold; cursor: pointer } table.block tr.even a[onclick*="Javascript"], table.block tr.odd a[onclick*="Javascript"] { font-weight: bold; cursor: pointer }
div.dval { margin-left:10px; } div.dval { margin-left:10px; }

6
fhem/www/pgm2/console.js
View File

@ -25,7 +25,6 @@ consUpdate()
p.parentElement.parentElement.scrollTop = p.scrollHeight; // html tag p.parentElement.parentElement.scrollTop = p.scrollHeight; // html tag
else else
p.parentElement.scrollTop = p.scrollHeight; // body tag p.parentElement.scrollTop = p.scrollHeight; // body tag
console.log("P4:"+p.scrollHeight);
} }
} }
@ -37,7 +36,10 @@ consFill()
document.body.removeChild(errdiv); document.body.removeChild(errdiv);
consConn = new XMLHttpRequest(); consConn = new XMLHttpRequest();
consConn.open("GET", document.location.pathname+"?XHR=1&inform=console", true); // Needed when using multiple FF windows
var timestamp = "&timestamp="+new Date().getTime();
var query = document.location.pathname+"?XHR=1&inform=console"+timestamp;
consConn.open("GET", query, true);
consConn.onreadystatechange = consUpdate; consConn.onreadystatechange = consUpdate;
consConn.send(null); consConn.send(null);
} }

8
fhem/www/pgm2/darkstyle.css
View File

@ -15,10 +15,10 @@ table.block tr.sel { background: red; }
table { border-radius:8px; border-spacing: 0px; table { border-radius:8px; border-spacing: 0px;
padding-bottom: 6px; padding-top: 6px;} padding-bottom: 6px; padding-top: 6px;}
table#room { background: #111111; width: 140px;} table.room { background: #111111; width: 140px;}
table#room a { color: #CCCCCC; text-decoration: none; } table.room a { color: #CCCCCC; text-decoration: none; }
table#room a:hover { color: #ffffff; } table.room a:hover { color: #ffffff; }
table#room tr.sel { background: red; } table.room tr.sel { background: red; }
th {color:red; text-align: left; padding-left: 10px; font-weight: bold;} th {color:red; text-align: left; padding-left: 10px; font-weight: bold;}
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;} td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}
input {outline:none; background-color: #111111; input {outline:none; background-color: #111111;

10
fhem/www/pgm2/fhemweb.js
View File

@ -33,8 +33,10 @@ FW_doUpdate()
var d = lines[i].split("<<", 3); // Complete arg var d = lines[i].split("<<", 3); // Complete arg
if(d.length != 3) if(d.length != 3)
continue; continue;
var el = document.getElementById(d[0]);
if(el) { var elArr = document.querySelectorAll("[informId="+d[0]+"]");
for (var k=0; k<elArr.length; k++){
el = elArr[k];
if(el.nodeName.toLowerCase() == "select") { if(el.nodeName.toLowerCase() == "select") {
// dropdown: set the selected index to the current value // dropdown: set the selected index to the current value
for(var j=0;j<el.options.length;j++) for(var j=0;j<el.options.length;j++)
@ -114,7 +116,9 @@ FW_longpoll()
room=sa[i]; room=sa[i];
} }
} }
var query = document.location.pathname+"?"+room+"&XHR=1&inform=1"; // Needed when using multiple FF windows
var timestamp = "&timestamp="+new Date().getTime();
var query = document.location.pathname+"?"+room+"&XHR=1&inform=1"+timestamp;
FW_pollConn.open("GET", query, true); FW_pollConn.open("GET", query, true);
FW_pollConn.onreadystatechange = FW_doUpdate; FW_pollConn.onreadystatechange = FW_doUpdate;
FW_pollConn.send(null); FW_pollConn.send(null);

3
fhem/www/pgm2/smallscreenstyle.css
View File

@ -50,9 +50,6 @@ table.block tr.sel { background: #F0F0D8; }
table.block td { width: 150px; }; table.block td { width: 150px; };
table { -moz-border-radius:8px; border-radius:8px; } table { -moz-border-radius:8px; border-radius:8px; }
table#room { display:none; }
table#room tr.sel { background: #A0FFFF; }
#menu #block { visibility: hidden; } #menu #block { visibility: hidden; }
#right { position:absolute; top:85px; left: 0px; right: 0px; #right { position:absolute; top:85px; left: 0px; right: 0px;
font-family:Arial, sans-serif; font-size:16px; } font-family:Arial, sans-serif; font-size:16px; }

5
fhem/www/pgm2/style.css
View File

@ -25,14 +25,13 @@ table.block tr.odd { background: #F0F0D8; }
table.block tr.sel { background: #F0F0D8; } table.block tr.sel { background: #F0F0D8; }
table { border-radius:8px; } table { border-radius:8px; }
table#room { border:1px solid gray; width: 100%; background: #D7FFFF; } table.room { border:1px solid gray; width: 100%; background: #D7FFFF; }
table#room tr.sel { background: #A0FFFF; } table.room tr.sel { background: #A0FFFF; }
#right { position:absolute; top:20px; left:180px; } #right { position:absolute; top:20px; left:180px; }
h2,h3,h4 { color:#52865D; line-height:1.3; h2,h3,h4 { color:#52865D; line-height:1.3;
margin-top:1.5em; font-family:Arial,Sans-serif; } margin-top:1.5em; font-family:Arial,Sans-serif; }
div#block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
div.dist { padding-top:0.3em; } div.dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; } button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }

4
fhem/www/pgm2/touchpadstyle.css
View File

@ -23,8 +23,8 @@ table { -moz-border-radius:8px; border-radius:8px; }
.col1, .col2, .col3 { padding: 8px; } .col1, .col2, .col3 { padding: 8px; }
.dname, .dval { padding: 8px; font-size: 14px; } .dname, .dval { padding: 8px; font-size: 14px; }
table#room { border:1px solid gray; width: 100%; background: #D7FFFF; } table.room { border:1px solid gray; width: 100%; background: #D7FFFF; }
table#room tr.sel { background: #A0FFFF; } table.room tr.sel { background: #A0FFFF; }
div.block { border:1px solid gray; background: #F8F8E0; padding:0.7em; } div.block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
div.dist { padding-top:0.3em; } div.dist { padding-top:0.3em; }