TT#96150 Improve developer guide

Change-Id: Ifdc81fe263cf953e52bbf876bf89dd7aafbf2f54

README.md

@@ -3,10 +3,30 @@
 ## Development Quick Start for internal developers
 
 * Check if [internal development server](https://dev-web-trunk.mgm.sipwise.com/) is running
-* [Install yarn](https://yarnpkg.com/getting-started/install) on your system
+* Clone GIT repo ngcp-csc-ui
-* Run development environment
 
-    `yarn run dev:docker dev-web-trunk.mgm.sipwise.com`
+    `git clone ssh://hostname:port/ngcp-csc-ui`
+
+* [Install Docker](https://docs.docker.com/get-docker)
+* [Install yarn](https://yarnpkg.com/getting-started/install)
+
+### Run development environment in Docker
+
+This is the preferred way to work with.
+If you have any problems with Docker,
+you can fallback to the method described
+in the next chapter.
+
+```shell script
+yarn run dev:docker dev-web-trunk.mgm.sipwise.com
+```
+
+### Run development environment in your system of choice
+
+```shell script
+yarn run config dev-web-trunk.mgm.sipwise.com
+yarn run dev
+```
 
 ## Technology
 
@@ -30,6 +50,8 @@ In addition, we also recommend the following Quasar Framework tutorials:
 
 ## Project Guide
 
+* [Reusable Vue.js Components](doc/COMPONENTS.md)
+
 ### Add a new page
 
 In order to add a new page you need to go along the following steps:

bin/config-create.js

@@ -0,0 +1,9 @@
+
+const path = require('path')
+const fs = require('fs')
+
+const filePathTemplate = path.resolve(__dirname + '/../src/config.template.root.js')
+const filePathConfig = path.resolve(__dirname + '/../src/config.js')
+const template = fs.readFileSync(filePathTemplate, 'utf8')
+const rendered = template.split('{{host}}').join(process.argv[2])
+fs.writeFileSync(filePathConfig, rendered)

bin/config-create.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+
+NODE_VERSION_DEFAULT=$(node -v 2> /dev/null)
+NODE_VERSION_DEBIAN=$(nodejs -v 2> /dev/null)
+SCRIPT_FOLDER=$(dirname "$0")
+SCRIPT_FILE="$SCRIPT_FOLDER/config-create.js"
+
+echo "Configuring Sipwise VoIP Platform at $1"
+
+if [ "$NODE_VERSION_DEFAULT" != '' ]
+then
+	node "$SCRIPT_FILE" "$1"
+elif [ "$NODE_VERSION_DEBIAN" != '' ]
+then
+	nodejs "$SCRIPT_FILE" "$1"
+fi
+

doc/COMPONENTS.md

@@ -0,0 +1,54 @@
+# Reusable Vue.js Components
+
+## Layout
+
+### Page
+
+```vue
+<csc-page />
+```
+
+### Sticky Page
+
+```vue
+<csc-page />
+```
+
+### Sticky Tabs
+
+```vue
+<csc-page />
+```
+
+## Forms
+
+### Text Input
+
+The very basic text input field is the `CscInput`. It is a direct extension of `QInput`
+and is supposed to be the standard text input component.
+
+* [QInput](https://quasar.dev/vue-components/input#QInput-API)
+
+```vue
+<csc-input
+    v-model="text"
+/>
+```
+
+### Password Input
+
+The `CscInputPassword` inherits from `CscInput`.
+
+```vue
+<csc-input-password
+    v-model="password"
+/>
+```
+
+### Password Retype
+
+```vue
+<csc-input-password-retype
+    v-model="password"
+/>
+```

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint --ext .js,.vue ./",
     "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
     "build": "./node_modules/@quasar/cli/bin/quasar build",
+    "config": "./bin/config-create.sh $1",
     "dev": "./node_modules/@quasar/cli/bin/quasar dev",
     "dev:docker": "docker pull docker.mgm.sipwise.com/ngcp-csc-ui-env-buster; docker run --rm -p 8080:8080 -i -t -v $(pwd):/code:rw docker.mgm.sipwise.com/ngcp-csc-ui-env-buster:latest env/run_csc_ui $1",
     "test:unit": "jest --updateSnapshot",

src/config.template.root.js

@@ -0,0 +1,4 @@
+export default {
+	baseHttpUrl: 'https://{{host}}',
+	baseWsUrl: 'wss://{{host}}'
+}