Index: ossp-pkg/quos/quos.cgi
RCS File: /v/ossp/cvs/ossp-pkg/quos/quos.cgi,v
rcsdiff -q -kk '-r1.6' '-r1.7' -u '/v/ossp/cvs/ossp-pkg/quos/quos.cgi,v' 2>/dev/null
--- quos.cgi	2004/10/28 12:00:26	1.6
+++ quos.cgi	2004/10/28 14:35:02	1.7
@@ -1,4 +1,4 @@
-#!/usr/opkg/bin/perl 
+#!/usr/opkg/bin/perl -w
 ##
 ##  OSSP quos - Query On Steroids
 ##  Copyright (c) 2004 Ralf S. Engelschall <rse@engelschall.com>
@@ -26,6 +26,7 @@
 ##
 
 require 5.008;
+use strict;
 use CGI;
 use String::Divert;
 use IO::File;
@@ -125,157 +126,271 @@
 #   create objects
 my $cgi  = new CGI;
 my $html = new String::Divert;
-my $nr_lops = 4;
-my $nr_rows = 7;
 $html->overload(1);
-#&printparams($cgi);
+
+##
+##  Read Config File
+##
+
+my $cfg = {
+    -cols => 4,
+    -rows => 7,
+};
+#   FIXME
+
+##
+##  Generate Canvas
+##
+
+#   generate Javascript utility functions
+$html .= "<script language=\"JavaScript\">\n" .
+         "<!--\n" .
+         "function colorize(obj, def) {\n" .
+         "    if (obj.value == def) { obj.className = 'default'; }\n" .
+         "    else                  { obj.className = 'changed'; }\n" .
+         "    return true;\n" .
+         "}\n" .
+         "//-->\n" .
+         "</script>\n";
 
 #   generate outer canvas
-$html .= "<div class=\"quos\">\n";
-$html->fold("quos");
-$html .= "</div>\n";
+$html .= "<table class=\"quos\">\n";
+$html .= "  "; $html->fold("quos");
+$html .= "</table>\n";
 $html >> "quos";
 
 #   generate browse part   
-$html .= "<p>";
-$html .= "<span class=\"browse\">";
-$html .= "<span class=\"title\">Browse</span>\n";
-$html->fold("browse");
-$html .= "</span>\n";
-$html .= "</span>\n";
+$html .= "<tr>\n";
+$html .= "  <td class=\"browse\">\n";
+$html .= "    <span class=\"title\">Browse</span><br>\n";
+$html .= "    "; $html->fold("browse");
+$html .= "  </td>\n";
+$html .= "</tr>\n";
 
 #   generate query part   
-$html .= "<p>";
-$html .= "<span class=\"query\">";
-$html .= "<span class=\"title\">Query</span>\n<br>";
-$html->fold("query");
-$html .= "</span>\n";
-$html .= "</span>\n";
+$html .= "<tr>\n";
+$html .= "  <td class=\"query\">\n";
+$html .= "    <span class=\"title\">Query</span><br>\n";
+$html .= "    "; $html->fold("query");
+$html .= "  </td>\n";
+$html .= "</tr>\n";
 
 #   generate view part   
-$html .= "<p>";
-$html .= "<span class=\"view\">";
-$html .= "<span class=\"title\">View</span>\n";
-$html->fold("view");
-$html .= "</span>\n";
-$html .= "</span>\n";
+$html .= "<tr>\n";
+$html .= "  <td class=\"view\">\n";
+$html .= "    <span class=\"title\">View</span><br>\n";
+$html .= "    "; $html->fold("view");
+$html .= "  </td>\n";
+$html .= "</tr>\n";
 
 #   generate result part   
-$html .= "<p>";
-$html .= "<span class=\"result\">";
-$html .= "<span class=\"title\">Result</span>\n";
-$html->fold("result");
-$html .= "</span>\n";
-$html .= "</span>\n";
+$html .= "<tr>\n";
+$html .= "  <td class=\"result\">\n";
+$html .= "    <span class=\"title\">Result</span><br>\n";
+$html .= "    "; $html->fold("result");
+$html .= "  </td>\n";
+$html .= "</tr>\n";
+
+##
+##  Generate Browser Part
+##
+
+$html >> "browse";
+$html .= "FIXME";
+$html << 1;
+
+##
+##  Generate Query Part
+##
 
-#   sample
 $html >> "query";
-$html .= "parametrize your query<br>";
-$html .= $cgi->start_html("query on steroids");
-$html .= $cgi->start_form;
-$html .= "<table>";
-$html .= '<table>';
-for ($i = 0; $i < $cgi->param('nr_rows'); $i++) {
-    $html .= "<tr>";
-        for ($j = $cgi->param('nr_lops') -1; $j >= 0; $j--) {
-            $html .= "<td>";
-                $html .= $cgi->popup_menu(-name=>"logop$j-$i",
-                    -values=>[' ','(',')','!','&','|'],
-                    -default=>' ');
-            $html .= "</td>";
-        }
-        $html .= "<td>";
-            $html .= $cgi->popup_menu(-name=>"f_name-$i",
-                -values=>['name','description','foo'],
-                -default=>'name');
-        $html .= '</td>';
-        $html .= '<td>';
-            $html .= $cgi->popup_menu(-name=>"f_operator-$i",
-                -values=>['=','begins with','ends with'],
-                -default=>'=');
-        $html .= '</td>';
-        $html .= '<td>';
-            $html .= $cgi->textfield(-name=>"f_value-$i");
-        $html .= '</td>';
-        $html .= '<br>';
-        $html .= '</tr>';
-}
-$html .= "</table>";
-$html .= '<table>';
-    $html .= '<tr>';
-        $html .= '<td>';
-            $html .= $cgi->popup_menu(-name=>"nr_lops",
-                    -values=>[1..9],
-                    -default=>'3');
-        $html .= '</td>';
-        $html .= '<td>';
-            $html .= $cgi->popup_menu(-name=>'nr_rows',
-                    -values=>[1..9],
-                    -default=>'4');
-        $html .= '</td>';
-        $html .= '<td>';
-            $html .= $cgi->submit('act_matrix_upd','update');
-        $html .= '</td>';
-        $html .= '<td>';
-            $html .= $cgi->submit('act_matrix_clear','clear');
-        $html .= '</td>';
-        $html .= '<td>';
-            $html .= $cgi->submit('act_matrix_submit','submit');
-        $html .= '</td>';
-    $html .= '</tr>';
-$html .= '</table>';
-
-$html .= '<table>';
-    $html .= '<tr>';
-        $html .= '<td>';
-            $html .= 'name of query';
-        $html .= '</td>';
-        $html .= '<td>';
-            $html .= $cgi->submit('act_matrix_clear','load');
-        $html .= '</td>';
-        $html .= '<td>';
-            $html .= $cgi->submit('act_matrix_submit','delete');
-        $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-        $html .= '<td>';
-            $html .= $cgi->textfield(-name=>'name_persquery');
-        $html .= '</td>';
-        $html .= '<td>';
-            $html .= $cgi->submit('act_matrix_clear','save');
-        $html .= '</td>';
-        $html .= '<td>';
-            $html .= 'hyperlink'; 
-        $html .= '</td>';
-    $html .= '</tr>';
-$html .= '</table>';
 
-$html .= '</table>';
+my $nr_cols = ($cgi->param('nr_cols') || $cfg->{-cols});
+my $nr_rows = ($cgi->param('nr_rows') || $cfg->{-rows});
+
+#   render outer form canvas
+$html .= $cgi->start_form;
+$html .= "<table>\n";
+$html .= "  <tr>\n";
+$html .= "    <td class=\"expr\">\n";
+$html .= "      "; $html->fold("query-form-expr");
+$html .= "    </td>\n";
+$html .= "  </tr>\n";
+$html .= "  <tr>\n";
+$html .= "    <td class=\"button\">\n";
+$html .= "      "; $html->fold("query-form-button");
+$html .= "    </td>\n";
+$html .= "  </tr>\n";
+$html .= "  <tr>\n";
+$html .= "    <td class=\"define\">\n";
+$html .= "      "; $html->fold("query-form-define");
+$html .= "    </td>\n";
+$html .= "  </tr>\n";
+$html .= "</table>\n";
 $html .= $cgi->end_form;
 
-sub printparams {
-    my($cgi) = @_;
-    my(@values,$key);
-
-    foreach $key ($cgi->param) {
-        $html .= "<strong>$key</strong> -> ";
-        @values = $cgi->param($key);
-        $html .= join(", ",@values)."<br>\n";
+#   render expression part
+$html >> "query-form-expr";
+$html .= "<table>\n";
+for (my $i = 0; $i < $nr_cols; $i++) {
+    $html .= "<tr>\n";
+    for (my $j = $nr_cols - 1; $j >= 0; $j--) {
+        $html .= "  <td>\n";
+        my $id = sprintf("lo%02d%02d", $j, $i);
+        $html .= "    " . $cgi->popup_menu(
+            -id       => $id,
+            -name     => $id,
+            -values   => [' ', '(', ')', '!', '&', '|'],
+            -default  => ' ',
+            -class    => 'default',
+            -onChange => "return colorize(this.form.$id, ' ');",
+            -onBlur   => "return colorize(this.form.$id, ' ');",
+        ) . "\n";
+        $html .= "  </td>\n";
     }
+    $html .= "  <td>\n";
+    my $id = sprintf("fn%02d", $i);
+    $html .= "    " . $cgi->popup_menu(
+        -id       => $id,
+        -name     => $id,
+        -values   => ['', 'name', 'description', 'foo'], # FIXME
+        -default  => '', # FIXME
+        -class    => 'default',
+        -onChange => "return colorize(this.form.$id, '');",
+        -onBlur   => "return colorize(this.form.$id, '');",
+    ) . "\n";
+    $html .= "  </td>\n";
+    $html .= "  <td>\n";
+    $id = sprintf("fo%02d", $i);
+    $html .= "    " . $cgi->popup_menu(
+        -id       => $id,
+        -name     => $id,
+        -values   => ['', '==', '!=', '<', '<=', '>', '>=', '=~', '!~'],
+        -default  => '',
+        -class    => 'default',
+        -onChange => "return colorize(this.form.$id, '');",
+        -onBlur   => "return colorize(this.form.$id, '');",
+    ). "\n";
+    $html .= "  </td>\n";
+    $html .= "  <td>\n";
+    $id = sprintf("fv%02d", $i);
+    $html .= "    " . $cgi->textfield(
+        -id         => $id,
+        -name       => $id,
+        -default    => '',
+        -class      => 'default',
+        -onChange   => "return colorize(this.form.$id, '');",
+        -onBlur     => "return colorize(this.form.$id, '');",
+        -onMouseOut => "return colorize(this.form.$id, '');",
+    );
+    $html .= "  </td>\n";
+    $html .= "</tr>\n";
 }
+$html .= "</table>\n";
+$html << 1;
+
+#   render button part
+$html >> "query-form-button";
+$html .= "<table>\n";
+$html .= "  <tr>\n";
+$html .= "    <td>";
+$html .= "      " . $cgi->popup_menu(
+    -name    => $nr_cols,
+    -values  => [ 0..9 ],
+    -default => $nr_cols,
+) . "\n";
+$html .= "    </td>\n";
+$html .= "    <td>\n";
+$html .= "      " . $cgi->popup_menu(
+    -name    => $nr_rows,
+    -values  => [1..9],
+    -default => $nr_rows,
+) . "\n";
+$html .= "    </td>\n";
+$html .= "    <td>\n";
+$html .= "      " . $cgi->submit('act_matrix_upd', 'update') . "\n";
+$html .= "    </td>\n";
+$html .= "    <td>\n";
+$html .= "      " . $cgi->submit('act_matrix_clear', 'clear') . "\n";
+$html .= "    </td>\n";
+$html .= "    <td>\n";
+$html .= "      " . $cgi->submit('act_matrix_submit', 'submit') . "\n";
+$html .= "    </td>\n";
+$html .= "  </tr>\n";
+$html .= "</table>\n";
+$html << 1;
+
+#   render define part
+$html >> "query-form-define";
+$html .= "<table>\n";
+$html .= "  <tr>\n";
+$html .= "    <td>\n";
+$html .= "    " . $cgi->popup_menu(
+    -id       => "namexx",
+    -name     => "namexx",
+    -values   => ['HTML: by-group', 'HTML: by-xxx', 'TXT: by-group'], # FIXME
+    -default  => 'HTML: by-group', # FIXME
+    -class    => 'default',
+) . "\n";
+$html .= "    </td>\n";
+$html .= "    <td>\n";
+$html .= "      " . $cgi->submit('act_matrix_clear', 'load') . "\n";
+$html .= "    </td>\n";
+$html .= "    <td>\n";
+$html .= "      " . $cgi->submit('act_matrix_submit', 'delete') . "\n";
+$html .= "    </td>\n";
+$html .= "  </tr>\n";
+$html .= "  <tr>\n";
+$html .= "    <td>\n";
+$html .= "      " . $cgi->textfield(
+    -name =>'name_persquery'
+) . "\n";
+$html .= "    </td>\n";
+$html .= "    <td>\n";
+$html .= "      " . $cgi->submit('act_matrix_clear', 'save') . "\n";
+$html .= "    </td>\n";
+$html .= "    <td>\n";
+$html .= "      " . $cgi->submit('act_matrix_hyperlink', 'hyperlink') . "\n";
+$html .= "    </td>\n";
+$html .= "  </tr>\n";
+$html .= "</table>\n";
+$html << 1;
+
+$html << 1;
+
+##
+##  Generate View Part
+##
 
-#    my($cgi) = @=;
-    
+$html >> "view";
+$html .= "FIXME";
+$html << 1;
 
+##
+##  Generate Result Part
+##
 
+$html >> "result";
+$html .= "FIXME<br>";
+foreach my $key ($cgi->param) {
+    $html .= "<strong>$key</strong> -&gt; ";
+    my @values = $cgi->param($key);
+    $html .= join(", ", @values) . "<br>\n";
+}
 $html << 1;
 
+##
+##  Generate HTTP Reponse
+##
+
 #   read HTML skeleton
 my $io = new IO::File "<quos.html"
     or die "unable to read HTML skeleton file \"quos.html\"";
 my $skel = '';
 $skel .= $_ while (<$io>);
 $io->close();
+
+#   undivert HTML output and wrap with skeleton
 $html->undivert(0);
 $skel =~ s|\%BODY\%|$html|s;
 $html = $skel;
@@ -288,6 +403,9 @@
 $http .= $html;
 print STDOUT $http;
 
+#   die gracefully ;-)
+exit(0);
+
 __END__
 
 =pod
Index: ossp-pkg/quos/quos.css
RCS File: /v/ossp/cvs/ossp-pkg/quos/quos.css,v
rcsdiff -q -kk '-r1.2' '-r1.3' -u '/v/ossp/cvs/ossp-pkg/quos/quos.css,v' 2>/dev/null
--- quos.css	2004/10/25 15:42:43	1.2
+++ quos.css	2004/10/28 14:35:02	1.3
@@ -24,30 +24,81 @@
 **  quos.css: Cascading Style-Sheet (CSS)
 */
 
-DIV.quos {
-    background: #f0f0f0;
-}
+/*
+**  Style Canvas
+*/
 
-.quos SPAN.browse {
-    background: #cccccc;
+TABLE.quos {
+    width:           100%;
+    background:      #f0f0f0;
+    font-family:     sans-serif, helvetica, arial;
 }
-.quos SPAN.browse SPAN.title {
-    font-weight: bold;
-    font-size: 200%;
-    color: #ffffff;
-}
-.quos SPAN.query {
-    background: #cc3333;
+
+.quos TD.browse {
+    width:           100%;
+    background:      #d0d0d0;
+}
+.quos TD.browse SPAN.title {
+    font-weight:     bold;
+    font-size:       200%;
+    color:           #000000;
+}
+.quos TD.query {
+    width:           100%;
+    background:      #d0d0d0;
+}
+.quos TD.query SPAN.title {
+    font-weight:     bold;
+    font-size:       200%;
+    color:           #000000;
+}
+.quos TD.view {
+    width:           100%;
+    background:      #d0d0d0;
+}
+.quos TD.view SPAN.title {
+    font-weight:     bold;
+    font-size:       200%;
+    color:           #000000;
+}
+.quos TD.result {
+    width:           100%;
+    background:      #d0d0d0;
+}
+.quos TD.result SPAN.title {
+    font-weight:     bold;
+    font-size:       200%;
+    color:           #000000;
 }
-.quos SPAN.query SPAN.title {
-    font-weight: bold;
-    font-size: 400%;
-    color: #cccc33;
+
+/*
+**  Style Query Part
+*/
+
+.quos .query .expr INPUT {
+    background:          inherit;
+    border-top:          1px solid #c0c0c0;
+    border-left:         1px solid #c0c0c0;
+    border-right:        1px solid #999999;
+    border-bottom:       1px solid #999999;
+}
+.quos .query .expr INPUT.default {
+    background:          inherit;
+}
+.quos .query .expr INPUT.changed {
+    background:          #ffffff;
+}
+.quos .query .expr SELECT {
+    background:          inherit;
+    border-top:          1px solid #c0c0c0;
+    border-left:         1px solid #c0c0c0;
+    border-right:        1px solid #999999;
+    border-bottom:       1px solid #999999;
 }
-.quos SPAN.view {
-    background: #33cc33;
+.quos .query .expr SELECT.default {
+    background:          inherit;
 }
-.quos SPAN.result {
-    background: #3333cc;
+.quos .query .expr SELECT.changed {
+    background:          #ffffff;
 }
 
Index: ossp-pkg/quos/quos.html
RCS File: /v/ossp/cvs/ossp-pkg/quos/quos.html,v
rcsdiff -q -kk '-r1.1' '-r1.2' -u '/v/ossp/cvs/ossp-pkg/quos/quos.html,v' 2>/dev/null
--- quos.html	2004/10/25 14:35:11	1.1
+++ quos.html	2004/10/28 14:35:02	1.2
@@ -1,10 +1,19 @@
 <html>
   <head>
     <link rel="stylesheet" type="text/css" href="quos.css">
+    <style type="text/css">
+      html {
+        background: #cccccc;
+      }
+      h1 {
+        font-family: sans-serif, helvetica, arial;
+        font-weight: bold;
+        font-size:   300%;
+      }
+    </style>
   </head>
   <body>
-    <h1>Quos Sample</h1>
-    <p>
+    <h1>OSSP quos</h1>
     %BODY%
   </body>
 </html>