Skip to content
Snippets Groups Projects
Select Git revision
  • ff6986648398ccb4b3e1cfd19af23db218c2655c
  • main default protected
  • renovate/lock-file-maintenance
  • demo protected
  • person-select-custom
  • dbp-translation-component
  • icon-set-mapping
  • port-i18next-parser
  • remove-sentry
  • favorites-and-recent-files
  • revert-6c632dc6
  • lit2
  • advertisement
  • wc-part
  • automagic
  • publish
  • wip-cleanup
  • demo-file-handling
18 results

app-shell

App Shell Component

GitLab Repository

A web component for building SPAs consisting of one topic with multiple activities. Handles login, language selection, activity switching, menus etc.

Usage

<vpu-app-shell src="/example.topic.metadata.json"></vpu-app-shell>

Attributes

  • lang (optional, default: de): set to de or en for German or English
    • example <vpu-app-shell lang="de" </vpu-app-shell>
  • src: The path to a topic metadata file (json)
  • base-path (optional, default: /: An absolute base path for routing
  • entry-point-url: Entry point URL to access the API
  • keycloak-config: See vpu-auth for details

Topic Metadata

{
  "name": {
    "de": "Beispiel",
    "en": "Example"
  },
  "short_name": {
    "de": "Beispiel",
    "en": "Example"
  },
  "description": {
    "de": "Ich bin eine Beschreibung der Applikation",
    "en": "I am a description of this application"
  },
  "routing_name": "example",
  "activities": [
    {"path": "example.metadata.json", visible: true}
  ],
  "attributes": []
}

Activity Metada

{
  "element": "vpu-activity-example",
  "module_src": "vpu-activity-example.js",
  "routing_name": "activity-example",
  "name": {
    "de": "Beispielaktivität",
    "en": "Example Activity"
  },
  "short_name": {
    "de": "Beispielaktivität",
    "en": "Example Activity"
  },
  "description": {
    "de": "Eine Beschreibung",
    "en": "A Description"
  }
}

Local development

# get the source
git clone git@gitlab.tugraz.at:VPU/Apps/AppShell.git
cd AppShell
git submodule update --init

# install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)
npm install

# constantly build dist/bundle.js and run a local web-server on port 8002
npm run watch

Jump to http://localhost:8002 and you should get a Single Sign On login page.