fhemweb_multiple.js rewrite as jQuery-ui-dialog + default .css reorg

git-svn-id: https://svn.fhem.de/fhem/trunk/fhem@5731 2b470e98-0d58-463d-a4d8-8e2adae1ed80

www/pgm2/darkCommon.css

@@ -0,0 +1,6 @@
+@import url("dashboard_darkstyle.css");
+
+/* jQuery-UI mods */
+div.ui-dialog { border:3px solid white; padding: 0.2em; }
+div.ui-dialog div.ui-dialog-titlebar { display:none; }
+div.ui-widget-content { background:#444444; color:#CCCCCC; }

www/pgm2/darksmallscreenstyle.css

@@ -1,4 +1,4 @@
-@import url("dashboard_darkstyle.css");
+@import url("darkCommon.css");
 
 /* Author: Bernd auf Basis der Vorlage von Till*/
 body     { background-color: #444444; background-image:url(../images/default/fhemicon_darksmall.png); background-repeat:no-repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
@@ -97,5 +97,3 @@ div.dname, div.dval  {
   font-size:16px;
 }
 div.tiny { font-size:10px; }
-
-

www/pgm2/darkstyle.css

@@ -1,4 +1,4 @@
-@import url("dashboard_darkstyle.css");
+@import url("darkCommon.css");
 
 /* Author: Till */
 body     { background-color: #444444; background-image:url(../images/default/fhemicon_dark.png); background-repeat:no-repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

www/pgm2/darktouchpadstyle.css

@@ -1,3 +1 @@
-@import url("dashboard_darkstyle.css");
-
 @import url("darkstyle.css");

www/pgm2/defaultCommon.css

@@ -0,0 +1,68 @@
+@import url("dashboard_style.css");
+
+body     { font-family:Arial, sans-serif; background-color: #FFFFE7; }
+textarea { font-family:Arial, sans-serif; font-size:16px;}
+input    { font-family:Arial, sans-serif; font-size:16px;}
+select   { font-family:Arial, sans-serif; font-size:16px;}
+
+#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
+#errmsg  { background-color: #000000; color: #FFFFFF;
+           position:absolute; top:0px; left:40px; z-index: 10; }
+.devType { padding-top:20px; }
+a        { color:#278727; }
+img      { border-style:none; }
+.wide    { width:100%; }
+
+table.block { border:1px solid gray; background: #F8F8E0; }
+table.block tr.odd { background: #F0F0D8; }
+table.block tr.sel { background: #F0F0D8; }
+table { border-radius:8px; }
+table.room { border:1px solid gray; width: 100%; background: #D7FFFF; }
+table.room tr.sel { background: #A0FFFF; }
+tr.column td { padding:0; vertical-align:top;}
+
+
+/* Documentation */
+h2,h3,h4 { color:#52865D; line-height:1.3;
+           margin-top:1.5em; font-family:Arial,Sans-serif; }
+div.dist { padding-top:0.3em; }
+button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
+div.block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
+.changed { color:red; }
+.col2 { text-align:center; }
+
+
+/* Widgets */
+.makeTable  { display:inline; float:left; clear:left; /*detail-selector,slider*/
+              margin-top:10px; margin-bottom:20px;}
+.makeSelect { display:inline; float:left; clear:left; }
+select      { margin-left:5px; margin-right:5px; }
+.slider     { float:left; width:250px; height:26px; }
+.get,.set,.attr { margin-bottom:5px; float:left; }
+.handle { position:relative; cursor:pointer; width:50px;
+          height:20px; line-height:20px;
+          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
+          border:3px solid; color:#278727; text-align:center; }
+.downText { margin-top:2px; }
+.makeSelect .slider {background:#F0F0D8; border-radius:8px;} /* detail only */
+.set .set { margin-bottom:2px; margin-top:3px; }             /* timepicker */
+
+pre { white-space: pre-wrap; }
+svg { height:32px; width:32px; 
+      fill:#278727; vertical-align:middle; margin:2px 0; }
+svg.on,svg.FS20_on { fill:orange; }
+
+/* next lines are for remotecontrol */
+.rc_body       { border-style:solid; border-color:gray;
+                 border-width:2px; padding:5px;
+                 background:#C8C8B0; font-size:6px;}
+.rc_button     { padding: 5px 7px;}
+.rc_button img { border-style:solid; border-width:1px;
+                 border-color:transparent; }
+.rc_button img:active { border-color: gray; }
+
+
+/* jQuery-UI mods */
+div.ui-dialog { border:3px solid #278727; padding: 0.2em; }
+div.ui-dialog div.ui-dialog-titlebar { display:none; }
+div.ui-widget-content { background:#FFFFE7; }

www/pgm2/fhemweb_multiple.js

@@ -5,33 +5,72 @@ FW_multipleSelChange(name, devName, vArr)
     return undefined;
   
   var o = new Object();
-  o.newEl = document.createElement('select');
+  o.newEl = document.createElement('input');
-  o.newEl.setAttribute('multiple', true);
+  o.newEl.type='text';
-  for(var j=1; j < vArr.length; j++) {
+  o.newEl.size=30;
-    var s = vArr[j].replace(/#/g," ");
-    o.newEl.options[j-1] = new Option(s, s);
-  }
   o.qFn = 'FW_multipleSetSelected(qArg, "%")';
   o.qArg = o.newEl;
+  o.newEl.setAttribute('onFocus', 'FW_multipleSelect(this)');
+  o.newEl.setAttribute('allVals', vArr);
+  o.newEl.setAttribute('readonly', 'readonly');
   return o;
 }
 
+function
+FW_multipleSelect(el)
+{
+  loadLink("pgm2/jquery-ui.min.css");
+  loadScript("pgm2/jquery.min.js", function(){
+    loadScript("pgm2/jquery-ui.min.js", function() {
+
+      var sel = $(el).val().split(","), selObj={};
+      for(var i1=0; i1<sel.length; i1++)
+        selObj[sel[i1]] = 1;
+
+      var vArr = $(el).attr("allVals").split(",");
+      var table = "";
+      for(var i1=1; i1<vArr.length; i1++) {
+        var v = vArr[i1];
+        table += '<tr>'+
+          '<td><input name="'+v+'" type="checkbox"'+
+                          (selObj[v] ? " checked" : "")+'/></td>'+
+          '<td><label for="' +v+'">'+v+'</label></td></tr>';
+      }
+
+      $('body').append(
+        '<div id="multidlg" style="display:none">'+
+          '<table>'+table+'</table><input id="md_freeText"></input>'+
+        '</div>');
+
+      $('#multidlg').dialog(
+        { modal:true, closeOnEscape:false, maxHeight:$(window).height()*3/4,
+          buttons:[
+          { text:"Cancel", click:function(){ $('#multidlg').remove(); }},
+          { text:"OK", click:function(){
+            var res=[];
+            if($("#md_freeText").val())
+              res.push($("#md_freeText").val());
+            $("#multidlg table input").each(function(){
+              if($(this).prop("checked"))
+                res.push($(this).attr("name"));
+            });
+            $(el).val(res.join(","));
+            $('#multidlg').remove();
+          }}]});
+    });
+  });
+  return false;
+}
+
 function
 FW_multipleSetSelected(el, val)
 {
   if(typeof el == 'string')
     el = document.getElementById(el);
-
+  el.value=val;
-    var l = val.split(",");
-    for(var j=0;j<el.options.length;j++)
-      for(var i=0;i<l.length;i++)
-        if(el.options[j].value == l[i])
-           el.options[j].selected = true;
-
-    if(el.onchange)
-      el.onchange();
 }
 
+
 FW_widgets['multiple'] = {
   selChange:FW_multipleSelChange
 };

www/pgm2/ios7Common.css

@@ -0,0 +1,6 @@
+@import url("dashboard_ios7.css");
+
+/* jQuery-UI mods */
+div.ui-dialog { border:3px solid #e5e5e5; padding: 0.2em; }
+div.ui-dialog div.ui-dialog-titlebar { display:none; }
+div.ui-widget-content { font-family:Helvetica; background:white; color:#151515;}

www/pgm2/ios7smallscreenstyle.css

@@ -1,4 +1,4 @@
-@import url("dashboard_ios7.css");
+@import url("ios7Common.css");
 
 /*
 Edit: fhainz

www/pgm2/ios7style.css

@@ -1,4 +1,4 @@
-@import url("dashboard_ios7.css");
+@import url("ios7Common.css");
 
 /*
 Edit: fhainz

www/pgm2/ios7touchpadstyle.css

@@ -1,4 +1,3 @@
-@import url("dashboard_ios7.css");
 @import url("ios7style.css");
 
 body { width: 1024px; }

www/pgm2/smallscreenstyle.css

@@ -1,24 +1,15 @@
-@import url("dashboard_style.css");
+@import url("defaultCommon.css");
 
-body     { background-color: #FFFFE7; 
-           font-family:Arial, sans-serif; }
-textarea { font-family:Arial, sans-serif; font-size:16px;}
-input    { font-family:Arial, sans-serif; font-size:16px;}
-select   { font-family:Arial, sans-serif; font-size:16px;}
 #back    { position:absolute; top: 2px; left:18px; }
 #logo    { position:absolute; top: 2px; left: 2px; 
-           width:64px;  height:67px; background-image:url(../images/default/fhemicon_smallscreen.png); }
+           width:64px;  height:67px;
+           background-image:url(../images/default/fhemicon_smallscreen.png); }
 #menu    { position:absolute; top: 2px; left:65px; }
-#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
 #hdr     { position:absolute; top:40px; left:65px; }
 #content { position:absolute; top:85px; left: 0px; right: 0px;}
-#errmsg { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:0px; z-index: 10; }
+#errmsg  { left:0px; }
 
-.devType { padding-top:10px; font-size:12px;}
+.devType { font-size:12px;}
-a {  color: #278727; }
-img {  border-style: none; }
-.col2 { text-align:center; }
-tr.column td { padding:0; vertical-align:top;}
 
 div.col1 { width: 188px; height: 30px; white-space: nowrap; }
 div.col2 { width: 108px; height: 30px; 
@@ -47,36 +38,14 @@ div.dname, div.dval  {
 }
 div.tiny { font-size:10px; }
 
-table.block { width: 320px; background: #F8F8E0; border-spacing:0px; } 
+table.block { width: 320px; border-spacing:0px; border:0; } 
 table.block tr { border:1px solid gray; border-spacing:0px; }
-table.block tr.odd { background: #F0F0D8; }
-table.block tr.sel { background: #F0F0D8; }
 table.block td { width: 150px; };
-table { -moz-border-radius:8px; border-radius:8px; }
 
 #menu #block { visibility: hidden; }
-#right { position:absolute; top:85px; left: 0px; right: 0px;
+button.dist { margin:5px; }
-           font-family:Arial, sans-serif; font-size:16px; }
-h2,h3,h4 { color:#52865D; line-height:1.3;
-           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; }
-button.dist { margin:5px; background:transparent; border:0px; cursor:pointer; }
 
-.makeTable { display:inline; float:left; clear:left;
-             margin-top:10px; margin-bottom:20px;}
-.makeSelect { display:inline; float:left; clear:left; }
-
-.set,.get,.attr { margin-bottom:5px; float:left;}
 .slider { float:right; width:320px; height:26px; }
 .set .slider,.get slider,.attr .slider { background:#F0F0D8; }
-.handle { position:relative; cursor:pointer; width:50px;
-          height:20px; line-height:20px;
-          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
-          border:3px solid; color:#278727; text-align:center; } 
 
-svg { height:32px; width:32px; fill:#278727; vertical-align:middle; margin:2px 0; }
-svg.on,svg.FS20_on { fill:orange; }
-
-.changed { color:red; }
 #cloudfree { display:none; }

www/pgm2/style.css

@@ -1,78 +1,13 @@
-@import url("dashboard_style.css");
+@import url("defaultCommon.css");
-
-body     { background-color: #FFFFE7;
-           font-family:Arial, sans-serif; font-size:16px;}
-input    { font-family:Arial, sans-serif; font-size:16px; }
-select   { font-family:Arial, sans-serif; font-size:16px; }
 
+body     { font-size:16px;}
 #logo    { margin-top:10px; margin-left:20px; width:120px; height:132px;
            background-image:url(../images/default/fhemicon.png); }
 #menu    { margin-top:10px; margin-left:20px; width:140px; }
+#hdr     { position:absolute; top:10px; left:180px; }
+#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
 #menuScrollArea { width: 175px; left:0px; top:0px; height:100%; 
                   position:fixed; overflow-x:hidden; overflow-y:auto; } 
 
-#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
-#hdr     { position:absolute; top:10px; left:180px; }
-#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
-
-#errmsg { background-color: #000000; color: #FFFFFF; 
-               position:absolute; top:0px; left:40px; z-index: 10; }
-.devType { padding-top:20px; }
-a {  color: #278727; }
-img {  border-style: none; }
-
-.wide { width:100%; }
-
-table.block { border:1px solid gray; background: #F8F8E0; }
-table.block tr.odd { background: #F0F0D8; }
-table.block tr.sel { background: #F0F0D8; }
-table { border-radius:8px; }
-
-table.room { border:1px solid gray; width: 100%; background: #D7FFFF; }
-table.room tr.sel { background: #A0FFFF; }
-
-#right { position:absolute; top:20px; left:180px; }
-
-h2,h3,h4 { color:#52865D; line-height:1.3;
-           margin-top:1.5em; font-family:Arial,Sans-serif; }
 div.dist { padding-top:0.3em; }
 button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
-
-a img { border-style:none; }
-.col2 { text-align:center; }
-tr.column td { padding:0; vertical-align:top;}
-
-/* detail-selector & slider */
-.makeTable { display:inline; float:left; clear:left;
-             margin-top:10px; margin-bottom:20px;}
-.makeSelect { display:inline; float:left; clear:left; }
-
-select {  margin-left:5px; margin-right:5px; }
-.get,.set,.attr { margin-bottom:5px; float:left; }
-.slider { float:left; width:250px; height:26px; }
-
-/* detail only */
-.makeSelect .slider {background:#F0F0D8; border-radius:8px;}
-
-/* timepicker */
-.set .set { margin-bottom:2px; margin-top:3px; }
-
-.handle { position:relative; cursor:pointer; width:50px;
-          height:20px; line-height:20px; 
-          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
-          border:3px solid; color:#278727; text-align:center; } 
-.downText { margin-top:2px; }
-
-pre { white-space: pre-wrap; }
-
-svg      { height:32px; width:32px; fill:#278727; vertical-align:middle; margin:2px 0; }
-svg.on,svg.FS20_on { fill:orange; }
-
-/* next lines are for remotecontrol */
-.rc_body              { border-style: solid; border-color: gray; border-width: 2px; padding: 5px;
-                        background: #C8C8B0; font-size:6px;}
-.rc_button            { padding: 5px 7px;}
-.rc_button img        { border-style: solid; border-width: 1px; border-color: transparent; }
-.rc_button img:active { border-color: gray; }
-
-.changed { color:red; }

www/pgm2/touchpadstyle.css

@@ -1,69 +1,15 @@
-@import url("dashboard_style.css");
+@import url("defaultCommon.css");
 
-body     { background-color: #FFFFE7;
+body     { font-size:18px; }
-           font-family:Arial, sans-serif; font-size:18px; }
+textarea { font-size:18px; }
-textarea { font-family:Arial, sans-serif; font-size:18px}
+input    { font-size:18px; }
-input    { font-family:Arial, sans-serif; font-size:18px}
+select   { font-size:18px; }
-select   { font-family:Arial, sans-serif; font-size:18px}
 #logo    { position:absolute; top:10px; left:10px;
            width:120px;  height:132px;
            background-image:url(../images/default/fhemicon.png); }
 #menu    { position:absolute; top:152px;left:10px; width:140px; }
 #hdr     { position:absolute; top:10px; left:160px; }
-#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
 #content { position:absolute; top:50px; left:160px; bottom:20px; right:10px; }
-#errmsg { background-color:#000000; color:#FFFFFF;
-               position:absolute; top:0px; left:40px; z-index: 10; }
-
-.devType { padding-top:20px; }
-a {  color: #278727; }
-.col2 { text-align:center; }
-tr.column td { padding:0; vertical-align:top;}
-
-.wide { width:100%; }
-
-table.block { border:1px solid gray; width: 100%; background: #F8F8E0; }
-table.block tr.odd { background: #F0F0D8; }
-table.block tr.sel { background: #F0F0D8; }
-table { -moz-border-radius:8px; border-radius:8px; }
 
 .col1, .col2, .col3  { padding: 8px; }
 .dname, .dval { padding: 8px; }
-
-table.room { border:1px solid gray; width: 100%; background: #D7FFFF; }
-table.room tr.sel { background: #A0FFFF; }
-
-div.block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
-div.dist { padding-top:0.3em; }
-button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
-
-/* detail-selector & slider */
-.makeTable { display:inline; float:left; clear:left;
-             margin-top:10px; margin-bottom:20px;}
-.makeSelect { display:inline; float:left; clear:left; }
-
-select {  margin-left:5px; margin-right:5px; }
-.get,.set,.attr { margin-bottom:5px; float:left; }
-.slider { float:left; width:250px; height:26px; }
-/* detail only */
-.makeSelect .slider {background:#F0F0D8; border-radius:8px;}
-/* timepicker */
-.set .set { margin-bottom:2px; margin-top:3px; }
-
-.handle { position:relative; cursor:pointer; width:50px;
-          height:20px; line-height:20px;
-          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
-          border:3px solid; color:#278727; text-align:center; } 
-.downText { margin-top:2px; }
-
-svg { height:32px; width:32px; fill:#278727; vertical-align:middle; margin:2px 0; }
-g.on { fill:red; }
-
-/* next lines are for remotecontrol */
-.rc_body              { border-style: solid; border-color: gray; border-width: 2px; padding: 5px;
-                        background: #C8C8B0; font-size:6px;}
-.rc_button            { padding: 5px 7px;}
-.rc_button img        { border-style: solid; border-width: 1px; border-color: transparent; }
-.rc_button img:active { border-color: gray; }
-
-.changed { color:red; }