add ui docs

SUMMARY.md

@@ -13,15 +13,24 @@
 * [Html Coding Standards]({%}?page=standards/html)
 * [Php Coding Standards]({%}?page=standards/php)
 
-## Examples
+## Application Examples
 * [Application Sample]({%}?page=example_app/app)
 * [Modules]({%}?page=example_module/module)
 * [Packages]({%}?page=example_module/packages)
-
-## Application Specific
 * [Language Files]({%}?page=basics/language_files)
 
 ## API
+
+### Backend
+* [Codes]({%}?page=services/codes)
+* [Routing]({%}?page=basics/routing)
+* [Dispatching]({%}?page=basics/dispatching)
+* [Views]({%}?page=basics/views)
+* [Validation]({%}?page=services/validation)
+
+### Frontend
+* [Notifications]({%}?page=frontend/notifications)
+
 ### Message
 * [Uri]({%}?page=services/uri)
 * [Requests]({%}?page=basics/requests)
@@ -49,15 +58,27 @@
 * [Queues]({%}?page=services/queues)
 * [Collection]({%}?page=services/collection)
 
-### UI
-* [Styles and Layout]({%}?page=frontend/styles_and_layout)
-* [Charting]({%}?page=services/charting)
-* [Codes]({%}?page=services/codes)
-* [Routing]({%}?page=basics/routing)
-* [Dispatching]({%}?page=basics/dispatching)
-* [Views]({%}?page=basics/views)
-* [Validation]({%}?page=services/validation)
-
 ### Security
 * [Encoding]({%}?page=services/encoding)
 * [Encryption]({%}?page=services/encryption)
+
+## UI
+
+### Layout
+
+* [Tables]({%}?page=frontend/elements/tables/tables)
+* [Data selection]({%}?page=frontend/elements/dataselection/dataselection)
+* [Alerts]({%}?page=frontend/elements/alerts/alerts)
+* [Buttons]({%}?page=frontend/elements/buttons/buttons)
+* [Tags]({%}?page=frontend/elements/tags/tags)
+* [Panels]({%}?page=frontend/elements/panels/panels)
+* [Tabs]({%}?page=frontend/elements/tabs/tabs)
+* [Breadcrumbs]({%}?page=frontend/elements/breadcrumbs/breadcrumbs)
+* [Progress]({%}?page=frontend/elements/progress/progress)
+* [Layout]({%}?page=frontend/grid/grid)
+* [Charting]({%}?page=services/charting)
+
+### Forms
+* [Forms]({%}?page=frontend/elements/forms/forms)
+* [Inputs]({%}?page=frontend/elements/inputs/inputs)
+* [Tables]({%}?page=frontend/elements/tables/tables)

datastorage/database/connection.md

@@ -34,6 +34,22 @@ $con = ConnectionFactory::create([
 ]);
 ```
 
+### Database types
+
+Available database types/constants can be found in the the `DatabaseType.php` file:
+
+```php
+public const MYSQL = 'mysql'; /* MySQL */
+public const SQLITE = 'sqlite'; /* SQLITE */
+public const PGSQL = 'pgsql'; /* PostgreSQL */
+public const SQLSRV = 'mssql'; /* Microsoft SQL Server */
+```
+
+Example usage:
+```php
+DatabaseType::MYSQL;
+```
+
 ## Database Pool
 
 Existing database connections can be added to the database pool:

datastorage/database/datamapper.md

@@ -65,7 +65,7 @@ The `name` contains the field name in the database, the `type` represents the da
 In order to make columns searchable you have to add `'autocomplete' => true` as column information to the respective column.
 
 ```php
-public COLUMNS = [
+public const COLUMNS = [
     'db_field_name_1' => ['name' => 'db_field_name_1', 'type' => 'int',    'internal' => 'model_var_name_1', 'autocomplete' => true],
     'db_field_name_2' => ['name' => 'db_field_name_2', 'type' => 'string', 'internal' => 'model_var_name_2'],
 ];

frontend/elements/alerts/alerts.md

@@ -0,0 +1,50 @@
+# Alerts
+
+Alerts are boxes styled in such a way that they attract the attention of the user which makes them ideal to provide important information to the user. Alerts are often used on a page header, footer or as popup.
+
+## Examples
+
+### Ok
+
+![Alert ok](Developer-Guide/frontend/elements/alerts/ok.png)
+
+```html
+<div class="log-msg log-msg-status-ok"><i class="fa fa-check"></i>This is ok</div>
+```
+
+#### Advanced
+
+![Alert ok advanced](Developer-Guide/frontend/elements/alerts/ok_advanced.png)
+
+```html
+<div class="log-msg log-msg-status-ok">
+    <h1 class="log-msg-title">This is a Title</h1><i class="close fa fa-times"></i>
+    <div class="log-msg-content">This is a message</div>
+</div>
+```
+
+### Info
+
+![Alert info](Developer-Guide/frontend/elements/alerts/info.png)
+
+```html
+<div class="log-msg log-msg-status-info"><i class="fa fa-bell"></i>This is a info</div>
+```
+
+### Warning
+
+![Alert warning](Developer-Guide/frontend/elements/alerts/warning.png)
+
+```html
+<div class="log-msg log-msg-status-warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
+```
+
+### Error
+
+![Alert error](Developer-Guide/frontend/elements/alerts/error.png)
+
+```html
+<div class="log-msg log-msg-status-error"><i class="fa fa-times"></i>This is an error</div>
+```
+
+

frontend/elements/breadcrumbs/breadcrumbs.md

@@ -0,0 +1,17 @@
+# Breadcrumbs
+
+Breadcrumbs provide a visual feedback to the user at which step/location the user currently is.
+
+## Examples
+
+![Breadcrumb](Developer-Guide/frontend/elements/breadcrumbs/normal.png)
+
+```html
+<ul class="crumbs-1">
+    <li><a>One</a></li>
+    <li><a>Two</a></li>
+    <li><a>Three</a></li>
+    <li><a>Four</a></li>
+    <li class="last active"><a>Five</a></li>
+</ul>
+```

frontend/elements/buttons/buttons.md

@@ -0,0 +1,95 @@
+# Buttons
+
+The following default button styles are available for the different user interactions. Buttons can be created with the `button` tag or the `a` link tag with a `button` class.
+
+## Examples
+
+### Normal
+
+![Button normal](Developer-Guide/frontend/elements/buttons/normal.png)
+
+![Button normal icon](Developer-Guide/frontend/elements/buttons/normal_icon.png)
+
+```html
+<button>Test Button</button>
+<button><i class="fa fa-lightbulb-o"></i> Test Button</button>
+```
+
+Alternative:
+
+```html
+<a href="#" class="button">Test Button</a>
+<a href="#" class="button"><i class="fa fa-lightbulb-o"></i> Test Button</a>
+```
+
+### Cancel
+
+![Button cancel](Developer-Guide/frontend/elements/buttons/cancel.png)
+
+![Button cancel icon](Developer-Guide/frontend/elements/buttons/cancel_icon.png)
+
+```html
+<button class="cancel">Test Button</button>
+<button class="cancel"><i class="fa fa-lightbulb-o"></i> Test Button</button>
+```
+
+Alternative:
+
+```html
+<a href="#" class="button cancel">Test Button</a>
+<a href="#" class="button cancel"><i class="fa fa-lightbulb-o"></i> Test Button</a>
+```
+
+### Save
+
+![Button save](Developer-Guide/frontend/elements/buttons/save.png)
+
+![Button save icon](Developer-Guide/frontend/elements/buttons/save_icon.png)
+
+```html
+<button class="save">Test Button</button>
+<button class="save"><i class="fa fa-lightbulb-o"></i> Test Button</button>
+```
+
+Alternative:
+
+```html
+<a href="#" class="button save">Test Button</a>
+<a href="#" class="button save"><i class="fa fa-lightbulb-o"></i> Test Button</a>
+```
+
+### Close
+
+![Button close](Developer-Guide/frontend/elements/buttons/close.png)
+
+![Button close icon](Developer-Guide/frontend/elements/buttons/close_icon.png)
+
+```html
+<button class="close">Test Button</button>
+<button class="close"><i class="fa fa-lightbulb-o"></i> Test Button</button>
+```
+
+Alternative:
+
+```html
+<a href="#" class="button close">Test Button</a>
+<a href="#" class="button close"><i class="fa fa-lightbulb-o"></i> Test Button</a>
+```
+
+### Disabled
+
+![Button disabled](Developer-Guide/frontend/elements/buttons/disabled.png)
+
+![Button disabled icon](Developer-Guide/frontend/elements/buttons/disabled_icon.png)
+
+```html
+<button class="disabled">Test Button</button>
+<button class="disabled"><i class="fa fa-lightbulb-o"></i> Test Button</button>
+```
+
+Alternative:
+
+```html
+<a href="#" class="button disabled">Test Button</a>
+<a href="#" class="button disabled"><i class="fa fa-lightbulb-o"></i> Test Button</a>
+```

frontend/elements/panels/panels.md

@@ -0,0 +1,35 @@
+# Panels
+
+Panels are for displaying content (e.g. forms, text) in a uniform style across the application.
+
+## Example
+
+### Plain
+
+![Panel normal](Developer-Guide/frontend/elements/panels/plain.png)
+
+```html
+<div class="row">
+    <div class="col-xs-6">
+        <section class="box wf-100">
+            <div class="inner">....</div>
+        </section>
+    </div>
+</div>
+```
+
+### Header & footer
+
+![Panel header & footer](Developer-Guide/frontend/elements/panels/header_footer.png)
+
+```html
+<div class="row">
+    <div class="col-xs-6">
+        <section class="portlet">
+            <div class="portlet-head">Header</div>
+            <div class="portlet-body">...</div>
+            <div class="portlet-foot">Footer</div>
+        </section>
+    </div>
+</div>
+```

frontend/elements/progress/progress.md

@@ -0,0 +1,35 @@
+# Progress
+
+A progress bar can be used to show the prograss of a background process, milestone progress, etc.
+
+## Examples
+
+### Progres bar
+
+![Progress](Developer-Guide/frontend/elements/progress/progress.png)
+
+```html
+<progress value="33" max="100"></progress>
+```
+
+### Meter without stripes
+
+![Meter](Developer-Guide/frontend/elements/progress/meter.png)
+
+```html
+<div class="meter green nostripes">
+    <span style="width: 50%"></span>
+</div>
+```
+
+#### Meter striped without animation
+
+![Meter striped](Developer-Guide/frontend/elements/progress/meter_striped.png)
+
+```html
+<div class="meter green noanimation">
+    <span style="width: 25%"></span>
+</div>
+```
+
+For a meter with animations remove the `noanimation` class.

frontend/elements/tabs/tabs.md

@@ -0,0 +1,107 @@
+# Tabs
+
+Tabs allow for further content segmentation by showing only selected content.
+
+## Examples
+
+### Horizontal
+
+![Tab highlighted](Developer-Guide/frontend/elements/tabs/highlighted_horizontal.png)
+
+```html
+<div class="tabview tab-1">
+    <ul class="tab-links">
+        <li class="active"><label for="c-tab-1">Tab 1</label></li>
+        <li><label for="c-tab-2">Tab 2</label></li>
+    </ul>
+    <div class="tab-content">
+        <input type="radio" id="c-tab-1" name="tabular-1" checked>
+        <div class="tab">
+            Test content
+        </div>
+        <input type="radio" id="c-tab-2" name="tabular-1">
+        <div class="tab">
+            <p>Test content 2</p><p>asdf</p>
+        </div>
+    </div>
+</div>
+```
+
+> In order to remove the blue outline and white background color from the content section of the tab, replace the class name `tab-1` with `tab-2`
+
+### Vertical
+
+![Tab highlighted](Developer-Guide/frontend/elements/tabs/highlighted_vertical.png)
+
+```html
+<div class="tabview tab-1 left">
+    <ul class="tab-links">
+        <li class="active"><label for="c-tab-1-2">Tab 1</label></li>
+        <li><label for="c-tab-2-3">Tab 2</label></li>
+    </ul>
+    <div class="tab-content">
+        <input type="radio" id="c-tab-1-2" name="tabular-3" checked>
+        <div class="tab">
+            Test content
+        </div>
+        <input type="radio" id="c-tab-2-3" name="tabular-3">
+        <div class="tab">
+            <p>Test content 2</p><p>asdf</p>
+        </div>
+    </div>
+</div>
+```
+
+> In order to remove the blue outline and white background color from the content section of the tab, replace the class name `tab-1` with `tab-2`
+
+### Accordion
+
+The accordion can show and hide multiple elements. This makes it possible to also hide or show all elements at the same time.
+
+![Accordion](Developer-Guide/frontend/elements/tabs/accordion.png)
+
+```html
+<div class="box ac-container wf-100">
+    <input type="checkbox" name="About us" id="ac-1">
+    <label for="ac-1">About us</label>
+    <section>
+        <p>...</p>
+    </section>
+    <input type="checkbox" name="About us" id="ac-2">
+    <label for="ac-2">How we work</label>
+    <section>
+        <p>...</p>
+    </section>
+    <input type="checkbox" name="About us" id="ac-3" checked>
+    <label for="ac-3">References</label>
+    <section>
+        <p>...</p>
+    </section>
+    <input type="checkbox" name="About us" id="ac-4">
+    <label for="ac-4">Contact us</label>
+    <section>
+        <p>...</p>
+    </section>
+</div>
+```
+
+### More
+
+With the more tab it's possible to show/hide content with a single click. This is perfect for created advanced content sections which should be initially hidden and only shown if the user desires to see them.
+
+![More](Developer-Guide/frontend/elements/tabs/more.png)
+
+![More open](Developer-Guide/frontend/elements/tabs/more_open.png)
+
+```html
+<div class="more-container">
+    <input id="more-customer-region" type="checkbox">
+    <label for="more-customer-region">
+        <span>Click here!</span>
+        <i class="fa fa-chevron-right expand"></i>
+    </label>
+    <div>
+        <p>...</p>
+    </div>
+</div>
+```

frontend/elements/tags/tags.md

@@ -0,0 +1,39 @@
+# Tags
+
+Tags or badges are often used to describe a category or type of an element. Alternatively they are also used to highlight dynamically added objects such as objects selected from a select/datalist/input list.
+
+## Examples
+
+### Plain
+
+![Tag normal](Developer-Guide/frontend/elements/tags/normal.png)
+
+```html
+<span class="tag">Test Tag</span>
+```
+
+#### Color
+
+Since tags are often styled individually (e.g. per category, by user) we recommend to use inline style sheet for defining different background colors.
+
+![Tag colored](Developer-Guide/frontend/elements/tags/dynamic_style.png)
+
+```html
+<span class="tag" style="background: #be2edd">Test Tag</span>
+```
+
+### Icon
+
+![Tag icon](Developer-Guide/frontend/elements/tags/icon.png)
+
+```html
+<span class="tag"><i class="fa fa-lightbulb-o"></i>Test Tag</span>
+```
+
+### Remove and icon
+
+![Tag remove icon](Developer-Guide/frontend/elements/tags/remove_icon.png)
+
+```html
+<span class="tag"><i class="fa fa-times"></i><i class="fa fa-lightbulb-o"></i>Test Tag</span>
+```

frontend/grid/grid.md

@@ -0,0 +1,90 @@
+# Layout
+
+The following layout allows you to define and structure content based on screen/browser window resoltion. Internally this implementation uses `flexbox`.
+
+## Examples
+
+![Grid](Developer-Guide/frontend/grid/grid.png)
+
+Available sizes are `xs-*`, `sm-*`, `md-*`, `lg-*` with a grid ranging from `1-12`. Every prefix (e.g. `xs-*`) represents a window size when it becomes active. It's also possible to combine them to define a layout for different browser window sizes. This is useful for different devices such as desktop, cellphone, tablet.
+
+* `xs-` extra small
+* `sm-` small
+* `md-` medium
+* `lg-` large
+
+
+```html
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-6">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-6">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-4">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-4">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-4">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-9">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-8">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-4">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-6">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+```

frontend/styles_and_layout.md

@@ -1,146 +0,0 @@
-# Styles and Layout
-
-## Css
-
-This project only supports scss and css. All css files need to be provided with a scss file which will be processed for every build. The css file has to be minimized, optimized and compressed as `.gz`. This means there is at least one scss file (multiple if you are combining/importing multiple scss files and creating one output css file), one css file and one compressed `.gz` file. The file name has to be lower case and the same for every file and only the extension is different.
-
-## Grid/Flexbox
-
-Flexboxes are preferred for all content containers.
-
-```html
-<div class="row">
-    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-1">
-        <section class="portlet">...</section>
-    </div>
-</div>
-```
-
-Available sizes are `xs-*`, `sm-*`, `md-*`, `lg-*` with a grid ranging from `1-12`.
-
-## Sizes
-
-### Container
-
-A container (e.g. section, div, table, etc) can be sized by using `.wf-*` classes. Available sizes for `*` are `100`, `80`, `75`, `66`, `50`, `33`, `25`, `20`.
-
-## Icons
-
-This project uses font-awesome for its icons, the following example allows for stacked icons e.g. creating new/unread email notifications:
-
-```html
-<i class="fa fa-lg infoIcon fa-envelope">
-    <span class="badge">333</span>
-</i>
-```
-
-## Form Elements
-
-### Input with button
-
-The following snippet creates a 100% input with a button next to it.
-
-```html
-<div class="ipt-wrap">
-    <div class="ipt-first"><input type="text" id="iID"></div>
-    <div class="ipt-second"><button>Text</button></div>
-</div>
-```
-
-### Input with dictionary
-
-The following snippet creates a dictionary button (e.g. for opening a popup window to search for accounts/groups etc) right before an input field.
-
-```html
-<span class="input">
-    <button type="button"><i class="fa fa-book"></i></button>
-    <input type="text">
-</span>
-```
-
-### Checkbox
-
-The following snippet creates a checkbox.
-
-```html
-<label class="checkbox" for="iID">
-    <input id="iID" type="checkbox" name="name" value="1">
-    <span class="checkmark"></span>
-    Text
-</label>
-```
-
-### Radio
-
-The following snippet creates a checkbox.
-
-```html
-<label class="checkbox" for="iID">
-    <input id="iID" type="radio" name="name" value="1">
-    <span class="checkmark"></span>
-    Text
-</label
-
-## Section
-
-A section is a container for information that can and should be grouped together.
-
-```html
-<section class="portlet">
-    <div class="portlet-head">Title</div>
-    <div class="portlet-body">
-        ...
-    </div>
-    <div class="portlet-foot">Footer</div>
-</section>
-```
-
-Additional coloring of sections can be achieved by adding a coloring class.
-
-```html
-<section class="portlet green">
-    ...
-</section>
-```
-
-## Tabs
-
-Tabs are a useful tool in order to display more information on one page.
-
-```html
-<div class="tabview tab-2">
-    <ul class="tab-links">
-        <li><label for="tab-1">Tab Title 1</label>
-        <li><label for="tab-2">Tab Title 2</label>
-        <li><label for="tab-*">...</label>
-    </ul>
-    <div class="tab-content">
-        <input type="radio" id="tab-1" name="tabular-2" checked>
-        <div class="tab">
-            ... Tab content ...
-        </div>
-        <input type="radio" id="tab-2" name="tabular-2" checked>
-        <div class="tab">
-            ... Tab content ...
-        </div>
-        <input type="radio" id="tab-*" name="tabular-2" checked>
-        <div class="tab">
-            ... Tab content ...
-        </div>
-    </div>
-</div>
-```
-
-## Tables
-
-## Lists
-
-## Accordion
-
-## Breadcrumbs
-
-## Badges/Tags
-
-## Examples
-
-An example of all styles can be found in the tests called `StandardElements.htm`.

services/codes.md

@@ -19,6 +19,8 @@ $c128b->saveToPngFile('path/code.png');
 
 The barcodes can be either saved as `png` and `jpeg` or outputted directly.
 
+![C128b Code](Developer-Guide/services/codes1.png)
+
 ```php
 $c128b = new C128b('ABcdeFG0123+-!@?', 200, 50);
 $c128b = $C128a->get();
@@ -26,9 +28,3 @@ header ('Content-type: image/png');
 imagepng($c128b);
 imagedestroy($c128b);
 ```
-
-<div align="center">
-
-![C128b Code](codes1.png)
-
-</div>

services/logging.md

@@ -37,3 +37,7 @@ On the client side a logger is also implemented providing the same functions as
 ```js
 let log = jsOMS.Log.Logger.getInstance(true, false, true);
 ```
+
+* The first parameter defines if the log output will done in the console
+* The second parameter defines if the log output should be done as notification
+* The thrid parameter defines if the log output should be send to the backend