/opsilon-web

Web UI for Running and Viewing Opsilon Workflows

Primary LanguageTypeScript

Opsilon Web

angular-logo
GUI for Running and Viewing Opsilon Workflows

Contributing Guidelines · Submit an Issue

⚗️ Features

  • Lazy loading
  • Standalone components
  • OS/Light/Dark modes
  • Strongly-typed storage
  • TailwindCSS

🛠️ Tweaks

  • TailwindCSS configuration:

    You can find the tailwind.config.js file in the project root, then you can refer to https://tailwindcss.com/docs/configuration to learn how to make your own adjustments.

  • Set default theme (first time load)

    Go to src\app\lib\constants.ts and choose the default theme.

    OS preference

    export const DEFAULT_BASE_THEME: AppTheme = 'system' as const;

    Light mode

    export const DEFAULT_BASE_THEME: AppTheme = 'light' as const;

    Dark mode

    export const DEFAULT_BASE_THEME: AppTheme = 'dark' as const;

  • Enable a new local/session storage item

    Go to src\app\lib\utils\storage\storage.types.ts and add a new item name in the StorageObjectType type and a new key value pair in the StorageObjectMap type.

    image

    After that, you can use the new item. image

⛩️ Project structure

├───app
│   ├───lib
│   │   ├───components
│   │   │   ├───footer
│   │   │   ├───layouts
│   │   │   │   └───layout-horizontal
│   │   │   ├───logo
│   │   │   └───navbar
│   │   ├───guards
│   │   ├───interceptors
│   │   ├───interfaces
│   │   ├───enums
│   │   ├───services
│   │   │   ├───auth
│   │   │   └───theme
│   │   └───utils
│   │       └───storage
│   └───pages
│       ├───auth
│       │   ├───login
│       │   └───register
│       ├───home
│       ├───profile
│       ├───screens
│       │   └───not-found
│       └───settings
│           ├───accessibility
│           ├───account
│           └───appearance
├───assets
├───environments
└───theme
    ├───01-base
    ├───02-components
    ├───03-utilities
    └───tailwindcss

🧙‍♂️ Commands

Command Description NPM Yarn PNPM Background command
ng See available commands npm run ng yarn ng pnpm ng ng
start Run app in development mode npm start yarn start pnpm start ng serve
build Build app for production npm run build yarn build pnpm build ng build
watch Run build when files change npm run watch yarn watch pnpm watch ng build --watch --configuration development
test Run unit tests npm run test yarn test pnpm test ng test
test:run Run unit tests with headless browser and without watch mode npm run test:run yarn test:run pnpm test:run ng test --watch=false --browsers ChromeHeadless
lint Lint code npm run lint yarn lint pnpm lint ng lint