From 224372f0adecb4798da8d4537ed61a5484c925f7 Mon Sep 17 00:00:00 2001
From: Ziver Koc <ziver@koc.se>
Date: Sat, 26 Sep 2015 21:19:24 +0000
Subject: [PATCH] ConfigPage continuation

---
 resources/WebContent/css/magic-bootstrap.css  | 192 +++++++++++++++++-
 resources/WebContent/css/magic-bootstrap.less | 159 ++++++++++++++-
 resources/WebContent/page/ConfigPage.tmpl     |  73 ++++---
 resources/WebContent/page/index.tmpl          |  28 +--
 src/wa/server/page/ConfigPage.java            |  18 +-
 src/wa/server/plugin/WAServiceConfig.java     |  16 ++
 .../apache/ApacheConfigVirtualHost.java       |  17 +-
 7 files changed, 448 insertions(+), 55 deletions(-)

diff --git a/resources/WebContent/css/magic-bootstrap.css b/resources/WebContent/css/magic-bootstrap.css
index 561c505..adc8bf4 100644
--- a/resources/WebContent/css/magic-bootstrap.css
+++ b/resources/WebContent/css/magic-bootstrap.css
@@ -2370,7 +2370,7 @@ input[type="button"].btn-block {
 @font-face {
   font-family: 'Glyphicons Halflings';
   src: url('../fonts/glyphicons-halflings-regular.eot');
-  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('..//fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }
 .glyphicon {
   position: relative;
@@ -2983,6 +2983,192 @@ input[type="button"].btn-block {
 .glyphicon-tree-deciduous:before {
   content: "\e200";
 }
+.glyphicon-cd:before {
+  content: "\e201";
+}
+.glyphicon-save-file:before {
+  content: "\e202";
+}
+.glyphicon-open-file:before {
+  content: "\e203";
+}
+.glyphicon-level-up:before {
+  content: "\e204";
+}
+.glyphicon-copy:before {
+  content: "\e205";
+}
+.glyphicon-paste:before {
+  content: "\e206";
+}
+.glyphicon-alert:before {
+  content: "\e209";
+}
+.glyphicon-equalizer:before {
+  content: "\e210";
+}
+.glyphicon-king:before {
+  content: "\e211";
+}
+.glyphicon-queen:before {
+  content: "\e212";
+}
+.glyphicon-pawn:before {
+  content: "\e213";
+}
+.glyphicon-bishop:before {
+  content: "\e214";
+}
+.glyphicon-knight:before {
+  content: "\e215";
+}
+.glyphicon-baby-formula:before {
+  content: "\e216";
+}
+.glyphicon-tent:before {
+  content: "\26fa";
+}
+.glyphicon-blackboard:before {
+  content: "\e218";
+}
+.glyphicon-bed:before {
+  content: "\e219";
+}
+.glyphicon-apple:before {
+  content: "\f8ff";
+}
+.glyphicon-erase:before {
+  content: "\e221";
+}
+.glyphicon-hourglass:before {
+  content: "\231b";
+}
+.glyphicon-lamp:before {
+  content: "\e223";
+}
+.glyphicon-duplicate:before {
+  content: "\e224";
+}
+.glyphicon-piggy-bank:before {
+  content: "\e225";
+}
+.glyphicon-scissors:before {
+  content: "\e226";
+}
+.glyphicon-bitcoin:before {
+  content: "\e227";
+}
+.glyphicon-btc:before {
+  content: "\e227";
+}
+.glyphicon-xbt:before {
+  content: "\e227";
+}
+.glyphicon-yen:before {
+  content: "\00a5";
+}
+.glyphicon-jpy:before {
+  content: "\00a5";
+}
+.glyphicon-ruble:before {
+  content: "\20bd";
+}
+.glyphicon-rub:before {
+  content: "\20bd";
+}
+.glyphicon-scale:before {
+  content: "\e230";
+}
+.glyphicon-ice-lolly:before {
+  content: "\e231";
+}
+.glyphicon-ice-lolly-tasted:before {
+  content: "\e232";
+}
+.glyphicon-education:before {
+  content: "\e233";
+}
+.glyphicon-option-horizontal:before {
+  content: "\e234";
+}
+.glyphicon-option-vertical:before {
+  content: "\e235";
+}
+.glyphicon-menu-hamburger:before {
+  content: "\e236";
+}
+.glyphicon-modal-window:before {
+  content: "\e237";
+}
+.glyphicon-oil:before {
+  content: "\e238";
+}
+.glyphicon-grain:before {
+  content: "\e239";
+}
+.glyphicon-sunglasses:before {
+  content: "\e240";
+}
+.glyphicon-text-size:before {
+  content: "\e241";
+}
+.glyphicon-text-color:before {
+  content: "\e242";
+}
+.glyphicon-text-background:before {
+  content: "\e243";
+}
+.glyphicon-object-align-top:before {
+  content: "\e244";
+}
+.glyphicon-object-align-bottom:before {
+  content: "\e245";
+}
+.glyphicon-object-align-horizontal:before {
+  content: "\e246";
+}
+.glyphicon-object-align-left:before {
+  content: "\e247";
+}
+.glyphicon-object-align-vertical:before {
+  content: "\e248";
+}
+.glyphicon-object-align-right:before {
+  content: "\e249";
+}
+.glyphicon-triangle-right:before {
+  content: "\e250";
+}
+.glyphicon-triangle-left:before {
+  content: "\e251";
+}
+.glyphicon-triangle-bottom:before {
+  content: "\e252";
+}
+.glyphicon-triangle-top:before {
+  content: "\e253";
+}
+.glyphicon-console:before {
+  content: "\e254";
+}
+.glyphicon-superscript:before {
+  content: "\e255";
+}
+.glyphicon-subscript:before {
+  content: "\e256";
+}
+.glyphicon-menu-left:before {
+  content: "\e257";
+}
+.glyphicon-menu-right:before {
+  content: "\e258";
+}
+.glyphicon-menu-down:before {
+  content: "\e259";
+}
+.glyphicon-menu-up:before {
+  content: "\e260";
+}
 .caret {
   display: inline-block;
   width: 0;
@@ -4110,7 +4296,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   display: inline-block;
 }
 .breadcrumb > li + li:before {
-  content: "/\00a0";
+  content: "\00a0";
   padding: 0 5px;
   color: #cccccc;
 }
@@ -4321,7 +4507,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   padding: 3px 7px;
   font-size: 12px;
   font-weight: bold;
-  color: #ffffff;
+  color: : #fff;
   line-height: 1;
   vertical-align: baseline;
   white-space: nowrap;
diff --git a/resources/WebContent/css/magic-bootstrap.less b/resources/WebContent/css/magic-bootstrap.less
index 8e115bd..d762d48 100644
--- a/resources/WebContent/css/magic-bootstrap.less
+++ b/resources/WebContent/css/magic-bootstrap.less
@@ -247,8 +247,165 @@
 
 
 // Sprites
-@icon-font-path: '../app/fonts/';
+@icon-font-path: '../fonts/';
 @icon-font-name: glyphicons-halflings-regular;
 
 
+// Private
+@zindex-navbar: 1000;
+@zindex-dropdown: 1000;
+@zindex-popover: 1010;
+@zindex-tooltip: 1030;
+@zindex-navbar-fixed: 1030;
+@zindex-modal-background: 1040;
+@zindex-modal: 1050;
+@screen-xs: 480px;
+@screen-xs-min: @screen-xs;
+@screen-phone: @screen-xs-min;
+@screen-sm: 768px;
+@screen-sm-min: @screen-sm;
+@screen-tablet: @screen-sm-min;
+@screen-md: 992px;
+@screen-desktop-min: @screen-md;
+@screen-desktop: @screen-md-min;
+@screen-lg: 1200px;
+@screen-lg-desktop-min: @screen-lg;
+@screen-lg-desktop: @screen-lg-min;
+@screen-xs-max: (@screen-sm - 1);
+@screen-sm-max: (@screen-md - 1);
+@screen-md-max: (@screen-lg - 1);
+@grid-columns: 12;
+@grid-gutter-width: 30px;
+@grid-float-breakpoint: @screen-tablet;
+@navbar-collapse-max-height: 340px;
+@navbar-inverse-color: @gray-light;
+@navbar-inverse-bg: #222;
+@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-color: @gray-light;
+@navbar-inverse-link-hover-color: #fff;
+@navbar-inverse-link-hover-bg: transparent;
+@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
+@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-disabled-color: #444;
+@navbar-inverse-link-disabled-bg: transparent;
+@navbar-inverse-brand-color: @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color: #fff;
+@navbar-inverse-brand-hover-bg: transparent;
+@navbar-inverse-toggle-hover-bg: #333;
+@navbar-inverse-toggle-icon-bar-bg: #fff;
+@navbar-inverse-toggle-border-color: #333;
+@pager-border-radius: 15px;
+@pager-disabled-color: @gray-light;
+@modal-inner-padding: 20px;
+@modal-title-padding: 15px;
+@modal-title-line-height: @line-height-base;
+@modal-content-bg: #fff;
+@modal-content-border-color: rgba(0,0,0,.2);
+@modal-content-fallback-border-color: #999;
+@modal-backdrop-bg: #000;
+@modal-header-border-color: #e5e5e5;
+@modal-footer-border-color: @modal-header-border-color;
+@alert-padding: 15px;
+@alert-border-radius: @border-radius-base;
+@alert-link-font-weight: bold;
+@alert-success-bg: @state-success-bg;
+@alert-success-text: @state-success-text;
+@alert-success-border: @state-success-border;
+@alert-info-bg: @state-info-bg;
+@alert-info-text: @state-info-text;
+@alert-info-border: @state-info-border;
+@alert-warning-bg: @state-warning-bg;
+@alert-warning-text: @state-warning-text;
+@alert-warning-border: @state-warning-border;
+@alert-danger-bg: @state-danger-bg;
+@alert-danger-text: @state-danger-text;
+@alert-danger-border: @state-danger-border;
+@progress-bg: #f5f5f5;
+@progress-bar-color: #fff;
+@progress-bar-bg:  @brand-primary;
+@progress-bar-success-bg: @brand-success;
+@progress-bar-warning-bg: @brand-warning;
+@progress-bar-danger-bg: @brand-danger;
+@progress-bar-info-bg: @brand-info;
+@panel-bg: #fff;
+@panel-inner-border: #ddd;
+@panel-border-radius: @border-radius-base;
+@panel-footer-bg: #f5f5f5;
+@panel-body-padding: 15px;
+@panel-default-text: @gray-dark;
+@panel-default-border: #ddd;
+@panel-default-heading-bg: #f5f5f5;
+@panel-primary-text: #fff;
+@panel-primary-border: @brand-primary;
+@panel-primary-heading-bg: @brand-primary;
+@panel-success-text: @state-success-text;
+@panel-success-border: @state-success-border;
+@panel-success-heading-bg: @state-success-bg;
+@panel-warning-text: @state-warning-text;
+@panel-warning-border: @state-warning-border;
+@panel-warning-heading-bg: @state-warning-bg;
+@panel-danger-text: @state-danger-text;
+@panel-danger-border: @state-danger-border;
+@panel-danger-heading-bg: @state-danger-bg;
+@panel-info-text: @state-info-text;
+@panel-info-border: @state-info-border;
+@panel-info-heading-bg: @state-info-bg;
+@thumbnail-padding: 4px;
+@thumbnail-bg: @body-bg;
+@thumbnail-border: #ddd;
+@thumbnail-border-radius: @border-radius-base;
+@thumbnail-caption-color: @text-color;
+@thumbnail-caption-padding: 9px;
+@well-bg: #f5f5f5;
+@well-border:  darken(@well-bg, 7%);
+@badge-color:: #fff;
+@badge-link-hover-color: #fff;
+@badge-bg: @gray-light;
+@badge-active-color: @link-color;
+@badge-active-bg: #fff;
+@badge-font-weight: bold;
+@badge-line-height: 1;
+@badge-border-radius: 10px;
+@breadcrumb-padding-vertical: 8px;
+@breadcrumb-padding-horizontal: 15px;
+@breadcrumb-bg: #f5f5f5;
+@breadcrumb-color: #ccc;
+@breadcrumb-active-color: @gray-light;
+@breadcrumb-separator: ;
+@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
+@carousel-control-color: #fff;
+@carousel-control-width: 15%;
+@carousel-control-opacity: .5;
+@carousel-control-font-size: 20px;
+@carousel-indicator-active-bg: #fff;
+@carousel-indicator-border-color: #fff;
+@carousel-caption-color: #fff;
+@close-color: #000;
+@close-font-weight: bold;
+@close-text-shadow: 0 1px 0 #fff;
+@code-color: #c7254e;
+@code-bg: #f9f2f4;
+@kbd-color: #fff;
+@kbd-bg: #333;
+@pre-bg: #f5f5f5;
+@pre-color: @gray-dark;
+@pre-border-color: #ccc;
+@pre-scrollable-max-height: 340px;
+@text-muted: @gray-light;
+@abbr-border-color: @gray-light;
+@headings-small-color: @gray-light;
+@blockquote-small-color: @gray-light;
+@blockquote-border-color: @gray-lighter;
+@page-header-border-color: @gray-lighter;
+@hr-border: @gray-lighter;
+@component-offset-horizontal: 180px;
+@container-tablet: ((720px + @grid-gutter-width));
+@container-desktop: ((940px + @grid-gutter-width));
+@container-lg-desktop: ((1140px + @grid-gutter-width));
+@container-sm: @container-tablet;
+@container-md: @container-desktop;
+@container-lg: @container-large-desktop;
+
+
 // My Variables
+   
\ No newline at end of file
diff --git a/resources/WebContent/page/ConfigPage.tmpl b/resources/WebContent/page/ConfigPage.tmpl
index efec30f..c93dfff 100644
--- a/resources/WebContent/page/ConfigPage.tmpl
+++ b/resources/WebContent/page/ConfigPage.tmpl
@@ -4,31 +4,43 @@
         <div class="panel-body">
             <table class="table table-hover">
                 <thead><tr>
-                    {{#headers}}<th>Service</th>{{#headers}}
+                    {{#params}}<th>{{.getNiceName()}}</th>{{/params}}
                 </tr></thead>
                 {{#data}}
-                <tr {{^.enabled}}class="active"{{/.enabled}}>
-                    {{#params}}
+                <tr {{#.disabled}}class="active"{{/.disabled}}>
+                    {{#.getConfiguration()}}
                         <td>
                             {{#.isTypeBoolean()}}
-                                <input type="checkbox" {{#.getValue()}}checked{{/.getValue()}} disabled />
+                                <input type="checkbox" {{#.getBoolean()}}checked{{/.getBoolean()}} disabled />
                             {{/.isTypeBoolean()}}
-                            {{^.isTypeBoolean()}}{{.getValue()}}{{/.isTypeBoolean()}}
+                            {{^.isTypeBoolean()}}{{.getString()}}{{/.isTypeBoolean()}}
                         </td>
-                    {{/params}}
+                    {{/.getConfiguration()}}
                     <td class="text-right">
-                        <button type="button" class="btn btn-primary btn-xs">Edit</button>
-                        {{^.enabled}}<button type="button" class="btn btn-default btn-xs">Disable</button>{{/.enabled}}
-                        {{#.enabled}}<button type="button" class="btn btn-success btn-xs">Activate</button>{{/.enabled}}
-                        <button type="button" class="btn btn-danger btn-xs">Remove</button>
+                        <button type="button" class="btn btn-primary btn-xs" title="Edit">
+                            <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>&nbsp;
+                        </button>
+                        {{^.enabled}}
+                        <button type="button" class="btn btn-default btn-xs" title="Disable">
+                            <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>&nbsp;
+                        </button>
+                        {{/.enabled}}
+                        {{#.enabled}}
+                        <button type="button" class="btn btn-success btn-xs" title="Activate">
+                            <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>&nbsp;
+                        </button>
+                        {{/.enabled}}
+                        <button type="button" class="btn btn-danger btn-xs" title="Remove">
+                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>&nbsp;
+                        </button>
                     </td>
                 </tr>
                 {{/data}}
             </table>
         </div>
-        <div class="panel-footer text-right">
-            <button type="button" class="btn btn-primary">Cancel</button>
-            <button type="button" class="btn btn-success">Save</button>
+        <div class="panel-footer clearfix">
+            <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#configureModal">+</button>
+            <button type="button" class="btn btn-primary pull-right">Apply Configuration</button>
         </div>
     </div>
 </div>
@@ -43,38 +55,33 @@
             </div>
             <div class="modal-body">
                 <form class="form-horizontal">
+                    {{#params}}
                     <div class="form-group">
-                        <label for="inputEmail" class="control-label col-xs-2">Email</label>
-                        <div class="col-xs-10">
-                            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="inputPassword" class="control-label col-xs-2">Password</label>
-                        <div class="col-xs-10">
-                            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="ccheckbox" class="control-label col-xs-2">ccheckbox</label>
-                        <div class="col-xs-10">
-                            <input type="checkbox" class="form-control" id="ccheckbox" placeholder="">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="sselect" class="control-label col-xs-2">sselect</label>
+                        <label for="{{.getName()}}" class="control-label col-xs-2">{{.getNiceName()}}</label>
                         <div class="col-xs-10">
+                            {{#.isTypeString()}}
+                            <input type="text" class="form-control" id="{{.getName()}}">
+                            {{/.isTypeString()}}
+                            {{#.isTypeInt()}}
+                            <input type="number" class="form-control" id="{{.getName()}}">
+                            {{/.isTypeInt()}}
+                            {{#.isTypeBoolean()}}
+                            <input type="checkbox" class="form-control" id="{{.getName()}}">
+                            {{/.isTypeBoolean()}}
+                            <!--
                             <select class="form-control" id="sselect" placeholder="">
                                 <option value="volvo">-- Chose an Option --</option>
                                 <option value="saab">Saab</option>
                             </select>
+                            -->
                         </div>
                     </div>
+                    {{/params}}
                 </form>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary">Save</button>
+                <button type="submit" class="btn btn-success">Save</button>
             </div>
         </div>
     </div>
diff --git a/resources/WebContent/page/index.tmpl b/resources/WebContent/page/index.tmpl
index 9043939..180e67f 100644
--- a/resources/WebContent/page/index.tmpl
+++ b/resources/WebContent/page/index.tmpl
@@ -51,23 +51,11 @@
     <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
+                <span class="glyphicon glyphicon-info-sign"></span>
             </a>
-            <ul role="menu" class="dropdown-menu" aria-labelledby="drop1">
+            <ul role="menu" class="dropdown-menu">
                 <li>
                     <pre class="pre-scrollable">
-                        2015-09-24 16:37:54.578 [FINE]    PluginManager: Searching for plugins...
-                        2015-09-24 16:37:54.650 [FINE]    PluginManager: Found plugin: C:\Users\ezivkoc\IdeaProjects\webadmin\.\src\wa\server\plugin\apache\plugin.json
-                        2015-09-24 16:37:54.652 [FINE]    PluginData   : Plugin: Apache Web Server(ver: 1.0)
-                        2015-09-24 16:37:54.665 [FINER]   PluginData   : Plugin interface: wa.server.plugin.WAServiceStatus --> wa.server.plugin.apache.ApacheStatus
-                        2015-09-24 16:37:54.667 [FINER]   PluginData   : Plugin interface: wa.server.plugin.WAService --> wa.server.plugin.apache.ApacheService
-                        2015-09-24 16:37:54.670 [FINE]    PluginManager: Found plugin: C:\Users\ezivkoc\IdeaProjects\webadmin\.\src\wa\server\plugin\hwstatus\plugin.json
-                        2015-09-24 16:37:54.670 [FINE]    PluginData   : Plugin: HW Status(ver: 1.0)
-                        2015-09-24 16:37:54.676 [FINER]   PluginData   : Plugin interface: wa.server.plugin.WAStatus --> wa.server.plugin.hwstatus.HwStatus
-                        2015-09-24 16:37:54.678 [FINER]   PluginData   : Plugin interface: wa.server.plugin.WAStatus --> wa.server.plugin.hwstatus.HDDStatus
-                        2015-09-24 16:37:54.679 [FINER]   PluginData   : Plugin interface: wa.server.plugin.WAStatus --> wa.server.plugin.hwstatus.NetStatus
-                        2015-09-24 16:37:54.694 [FINE]    PluginManager: Found plugin: C:\Users\ezivkoc\IdeaProjects\webadmin\.\src\wa\server\plugin\tomcat\plugin.json
-                        2015-09-24 16:37:54.695 [FINE]    PluginData   : Plugin: Apache Tomcat(ver: 1.0)
                         2015-09-24 16:37:54.696 [FINER]   PluginData   : Plugin interface: wa.server.plugin.WAServiceStatus --> (Not Available) wa.server.plugin.tomcat.TomcatStatus
                         2015-09-24 16:37:54.696 [FINER]   PluginData   : Plugin interface: wa.server.plugin.WAService --> (Not Available) wa.server.plugin.apache.TomcatService
                         2015-09-24 16:37:54.729 [INFO]    HttpServer   : HTTP Server ready!
@@ -76,6 +64,18 @@
                 </li>
             </ul>
         </li>
+		<li class="dropdown">
+			<a href="#" class="dropdown-toggle" data-toggle="dropdown">
+				<span class="glyphicon glyphicon-console"></span>
+			</a>
+			<ul role="menu" class="dropdown-menu">
+				<li>
+                    <pre class="pre-scrollable">
+
+                    </pre>
+				</li>
+			</ul>
+		</li>
         <li role="separator" class="divider"></li>
         <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ziver Koc</a>
diff --git a/src/wa/server/page/ConfigPage.java b/src/wa/server/page/ConfigPage.java
index d95e18b..79ba444 100644
--- a/src/wa/server/page/ConfigPage.java
+++ b/src/wa/server/page/ConfigPage.java
@@ -24,6 +24,8 @@ package wa.server.page;
 
 import wa.server.WAContext;
 import wa.server.plugin.WAServiceConfig;
+import wa.server.plugin.apache.ApacheConfigVirtualHost;
+import zutil.db.bean.Configurator;
 import zutil.io.file.FileUtil;
 import zutil.log.LogUtil;
 import zutil.net.http.HttpHeaderParser;
@@ -31,6 +33,8 @@ import zutil.parser.DataNode;
 import zutil.parser.Templator;
 
 import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
 import java.util.Map;
 import java.util.logging.Level;
 import java.util.logging.Logger;
@@ -60,9 +64,19 @@ public class ConfigPage implements WAPage{
                                   Map<String, String> cookie,
                                   Map<String, String> request) {
         try {
+            List<?> confObjs = config.getConfigData();
+            ArrayList<Configurator> confList = new ArrayList<>();
+            for(Object obj : confObjs){
+                confList.add(new Configurator(obj));
+            }
+            confList.add(new Configurator(new ApacheConfigVirtualHost.ApacheVirtualHostData()));
+            confList.add(new Configurator(new ApacheConfigVirtualHost.ApacheVirtualHostData()));
+            confList.add(new Configurator(new ApacheConfigVirtualHost.ApacheVirtualHostData()));
+
             Templator tmpl = new Templator(FileUtil.find(TMPL_FILE));
-            tmpl.set("headers", null);
-            tmpl.set("data", null);
+            tmpl.set("params", Configurator.getConfiguration(
+                    config.getConfigClass()));
+            tmpl.set("data", confList);
             return tmpl;
         } catch (IOException e) {
             log.log(Level.SEVERE, null, e);
diff --git a/src/wa/server/plugin/WAServiceConfig.java b/src/wa/server/plugin/WAServiceConfig.java
index 666b583..1b63aa7 100644
--- a/src/wa/server/plugin/WAServiceConfig.java
+++ b/src/wa/server/plugin/WAServiceConfig.java
@@ -1,6 +1,8 @@
 package wa.server.plugin;
 
 
+import java.util.List;
+
 public interface WAServiceConfig {
 	/**
 	 * @return the String name of this configuration type
@@ -21,4 +23,18 @@ public interface WAServiceConfig {
 	 * Configure service with current configuration data
 	 */
 	public void configure() throws Exception;
+
+
+
+    /**
+     * @return a list of configuration objects, the object
+     *          configuration can be changed with the
+     *          {@link zutil.db.bean.Configurator} class.
+     */
+	public List<?> getConfigData();
+
+    /**
+     * @return the class that contains the configuration data
+     */
+    public Class<?> getConfigClass();
 }
diff --git a/src/wa/server/plugin/apache/ApacheConfigVirtualHost.java b/src/wa/server/plugin/apache/ApacheConfigVirtualHost.java
index 2553b3d..9ccbed4 100644
--- a/src/wa/server/plugin/apache/ApacheConfigVirtualHost.java
+++ b/src/wa/server/plugin/apache/ApacheConfigVirtualHost.java
@@ -4,6 +4,7 @@ import wa.server.WAConstants;
 import wa.server.plugin.WAServiceConfig;
 import wa.server.util.ConfigFileUtil;
 import zutil.db.DBConnection;
+import zutil.db.bean.Configurator.Configurable;
 import zutil.db.bean.DBBean;
 import zutil.db.bean.DBBean.DBTable;
 import zutil.io.IOUtil;
@@ -55,12 +56,24 @@ public class ApacheConfigVirtualHost implements WAServiceConfig{
         }
 	}
 
+    @Override
+    public List<?> getConfigData() {
+        return vhosts;
+    }
+    @Override
+    public Class<?> getConfigClass() {
+        return ApacheVirtualHostData.class;
+    }
+
 
     @DBTable(WAConstants.DB_TABLE_PREFIX + "_apache_vhost")
     public static class ApacheVirtualHostData extends DBBean{
+        @Configurable("Domain")
         protected String domain;
-        protected String domain_old;
+        protected transient String domain_old;
+        @Configurable("DocRoot")
         protected String path;
+        @Configurable("SSL")
         protected boolean ssl;
 
 
@@ -96,7 +109,7 @@ public class ApacheConfigVirtualHost implements WAServiceConfig{
             writeConfiguration(out);
             out.close();
         }
-        public void writeConfiguration(PrintStream out){
+        protected void writeConfiguration(PrintStream out){
             if(ssl){
                 out.println("<VirtualHost *:80>");
                 out.println("	ServerName "+ domain +":80");