[SI-2010, SI-2011] - update documentation for SIT-Web-App
diff --git a/src/main/asciidoc/howto/howtoBuild.adoc b/src/main/asciidoc/howto/howtoBuild.adoc
index 98893a2..193ce1b 100644
--- a/src/main/asciidoc/howto/howtoBuild.adoc
+++ b/src/main/asciidoc/howto/howtoBuild.adoc
@@ -122,10 +122,9 @@
[source,command]
----
$ npm install
- $ npm run build-map-app-full
- $ npm run build-table-app
+ $ npm run build-comp-full
----
{blank}
-=> A folder named '_dist_' should be created in the project root folder.
+=> A folder named '_dist/grid-failure-information-web-comp_' should be created in the project root folder.
TIP: Next Step -> Read the *howtoRun* file!
diff --git a/src/main/asciidoc/howto/howtoRun.adoc b/src/main/asciidoc/howto/howtoRun.adoc
index 590c311..b263301 100644
--- a/src/main/asciidoc/howto/howtoRun.adoc
+++ b/src/main/asciidoc/howto/howtoRun.adoc
@@ -115,24 +115,24 @@
== How to run SIT-Web-FE (map- and table-component)
=== Prerequirements
-* Both Parts of SIT-Web-FE are built properly. Otherwise following the instructions in the *howtoBuild* file!
+* SIT-Web-FE is built properly. Otherwise following the instructions in the *howtoBuild* file!
* SIT-Web-Cache-Service runs properly.
* Your secured DMZ (demilitarized zone) can host the SIT-Web-FE.
-* SIT-Web-FE needs *nodejs* which have to be installed as descrbed in the *howtoBuild* file.
-* The SIT-Web-FE should be able to consume the SIT-Web-Cache-Service and both parts should be in the same DMZ.
+* The SIT-Web-FE have to communicate with the SIT-Web-Cache-Service and both parts should be in the same DMZ.
* If you do not have a web server in your environment (e.g. in a development environment) you can use *http-server*. To install this free and lightweight http server run the following command in a command line:
+
[source, command]
----
$ npm install -g http-server
----
+* If you want to run SIT-Web-FE with *http-server* you need *nodejs* which have to be installed as descrbed in the *howtoBuild* file.
IMPORTANT: The description below use *http-server* as an http server. +
In many cases you will have your own web server - like *tomcat*, *apache*, *IIS* etc. -
and you have to configure proxy settings and the http communication between all SIT components within this web server.
-=== Run the map component
-* Copy all files from the build output to the provided folder in the DMZ.
+=== Run the map and/or table component (e.g. with http-server)
+* Copy all files from the build output ('_dist/grid-failure-information-web-comp_') to the provided folder in the DMZ.
* Open a command line and navigate to this folder.
* Start the service with the following commands:
+
@@ -154,60 +154,41 @@
----
{blank}
+
-=> A map with all grid failure appears in your browser.
-
-=== Run the table component
-* Copy all files from the build output to the provided folder in the DMZ.
-* Open a command line and navigate to this folder.
-* Start the service with the following commands:
-+
-[source,command]
-----
- $ http-server dist/grid-failure-information-table-app/ -P http://localhost:3003 -p 3002
-----
-{blank}
-+
-CAUTION: Take care about this parameters: +
-*-P*: The proxy for requesting the SIT-Web-Cache-Service. +
-*-p*: TCP-Port of SIT-Web-FE
-
-* Open a browser and open the address to your SIT-Web-FE with the correct TCP-Port:
-+
-[source,http]
-----
- http://{SIT-Web-FE Adress}:3002
-----
-{blank}
-+
-=> A table with all grid failure appears in your browser.
+=> A map and a table with all grid failure appears in your browser.
== How to use SIT-Web-FE
To show all grid failure on a map or in a table inside your own web application you can run SIT-Web-FE beside your application.
=== Prerequirements
-* To have an secure access to the failure information you have to had installed the cache service as well.
+* To have an access to the failure information you have to had installed the cache service as well.
-=== Integrate the map component
+=== Integrate the map/table component
-* Copy all *.js* and *.css* files from the build output (_/dist/openk-grid-failure-information-map-init_) to your own web application folder. (Green boxes in the image below.)
-* Reference all this files in your web application like the examples in the yellow boxes in the image below.
-* Use the map app like an html element with the following tag: +
-*<openk-grid-failure-information-map-init></openk-grid-failure-information-map-init>* +
-(red box in the image)
+* Copy all files and the _assets_ folder from the build output (_/dist/grid-failure-information-web-comp_) to your own web application folder. ([lime]#*green boxes*# in the image below.)
+* Reference the *.js* and *.css* files in your web application ([yellow]#*yellow boxes*# in the image below).
+* Use the map/table like an html component with the following tags: +
+*<openk-grid-failure-information-map-comp></openk-grid-failure-information-map-comp>* +
+*<openk-grid-failure-information-table></openk-grid-failure-information-table>* +
+([red]#*red box*# in the image)
.Neccessary files for map integration
[options="header"]
image::SIT_mapAppUsage.png[]
-CAUTION: All builded files have an randomized alphanumerical postfix as you see in the image. This postfixes differs from build to build and have to be updated if a update occured.
+=== Filter the shown grid failure information with postcode
-=== Integrate the table component
+To Filter the shown information (table and/or map) you can set the postcode to the map/table component.
-The process to use the table component is similar to the description for the map component above. +
-Note the following adjustments:
+The following example describes the usage in an example.
-* You find the files to copy in the following folder: _/dist/openk-grid-failure-information-table-init_
-* Use this html tag: +
-*<openk-grid-failure-information-table></openk-grid-failure-information-table>*
+.Neccessary files for map integration
+[options="header"]
+image::SIT_mapAppUsagexFilter.png[]
+
+The example has an text input box. Each change of this textbox will fire an event and within this event a javascript function is called with the entered value.
+Within this function we reference the map/table components and set the value to the *postcode* attributes.
+The filtering will be done immediatly.
+
+TIP: This attribute can also be bound to a data model in a javascript framework manner (e.g. angular).
diff --git a/src/main/asciidoc/img/SIT_mapAppUsage.png b/src/main/asciidoc/img/SIT_mapAppUsage.png
index 5950cf6..f1f8bf4 100644
--- a/src/main/asciidoc/img/SIT_mapAppUsage.png
+++ b/src/main/asciidoc/img/SIT_mapAppUsage.png
Binary files differ
diff --git a/src/main/asciidoc/img/SIT_mapAppUsagexFilter.png b/src/main/asciidoc/img/SIT_mapAppUsagexFilter.png
new file mode 100644
index 0000000..d63932c
--- /dev/null
+++ b/src/main/asciidoc/img/SIT_mapAppUsagexFilter.png
Binary files differ
