Didmos2 Demo Frontend

This is the demo frontend for didmos2.

For Information about deployment please refer to the didmos2 demo compose repository at https://gitlab.daasi.de/didmos2-demo/didmos2-demo-compose

Standalone development

Didmos2 LUI can run standalone mocking the normally required components didmos2 Auth and didmos2 Core. This is usefull for small changes (i.e. Layout). Some requests might not be included into the mock server and cause errors.

To run the standalone version of the FE do the following (first time usage)

# Make sure NodeJs is installed on your computer
# clone this repository if not already done
cp .gitmodules-http .gitmodules
git submodule update --init --recursive
npm ci
npm run build:lib
npm run start:standalone

To update your environment:

git pull
git submodule update
npm run build:lib

to start the server again

npm run start:standalone

Custom Logo

Add your logo to src/assets/img/logos and add the following to src/app/global-consts.ts

  public get logosrc(): string {
    const tenantLogo = this.getConfigValue('tenantLogo', null);
    if (tenantLogo) {
      return tenantLogo;
    }
    return this.getConfigValue(
      'logosrc',
      'assets/img/logos/<NAME_OF_YOUR_LOGO_FILE>'
    );
  }

CSS Design customizations

Integration

If you are going to use only the light theme:

• remove style in index.html
• comment in @import './theme'; in app-global-styles.scss
• remove theme menu item from header.component.html

Otherwise you will have to to the above only temporarly, compile light theme with npm run build-theme and undo the above changes.

Customization

If you only want to make small changes you can override variables inside of src/styles/_variables.scss.

If you want to design a complete theme from scatch, do the following:

• copy theme template:

  cp -r src/styles/primeng-sass-theme/themes/mytheme/ src/styles/
  rm src/styles/mytheme/theme.scss && rm src/styles/mytheme/_fonts.srcss

• replace the content of src/styles/theme.scss with the following content:

  @import './variables';
  @import '../../theme-base/_components';
  @import './_extensions';

• replace the content of src/styles/variables.scss with the following:

  @import './mytheme/variables';

• start editing the values in src/styles/mytheme/

custom fonts

• Create a folder src/assets/fonts
• Put your fontfiles in there (one folder per font)
• Create a file src/styles/fonts.scss
• Import the file at the top of app-global-styles.scss
• Inside of fonts.scss add your fonts with @font-face {...}