Skip to content

@sw-code SWCode

urbo-feature-waste 1.0.0-16051

Install from the command line:
Learn more about npm packages
$ npm install @sw-code/urbo-feature-waste@1.0.0-16051
Install via package.json:
"@sw-code/urbo-feature-waste": "1.0.0-16051"

About this version

feature-waste

This library provides waste management functionality for the Urbo application. It displays waste collection schedules, allows users to set reminders, and provides information about waste types.

Features

  • Display waste collection schedules
  • Set reminders for waste collection
  • Customize waste type representations (colors and icons)
  • Configurable UI components

Configuration

The waste module is configurable, allowing you to customize various aspects of its functionality and appearance.

Basic Usage

Import the module in your application and provide the required configuration:

import { FeatureWasteModule } from '@sw-code/urbo-feature-waste';

// In your app module imports:
FeatureWasteModule.forRoot({
  iconConfig: {
    // Required configuration for icon colors
    colorMappingLight: {
      WASTEPAPER: '#FFFFFF',
      YELLOW_BAG: '#FFFFFF',
      BIOWASTE: '#006400',
      RESIDUAL_WASTE: '#FFFFFF',
      RESIDUAL_WASTE_4WEEKLY: '#FFFFFF',
      DIAPER_WASTE: '#FFFFFF',
      CHRISTMAS_TREE: '#FFFFFF',
    },
    colorMappingDark: {
      WASTEPAPER: '#FFFFFF',
      YELLOW_BAG: '#FFFFFF',
      BIOWASTE: '#00FF00',
      RESIDUAL_WASTE: '#FFFFFF',
      RESIDUAL_WASTE_4WEEKLY: '#FFFFFF',
      DIAPER_WASTE: '#FFFFFF',
      CHRISTMAS_TREE: '#FFFFFF',
    },
    backgroundColorMappingLight: {
      WASTEPAPER: '#679BFF',
      YELLOW_BAG: '#FFEB7D',
      BIOWASTE: '#76DE65',
      RESIDUAL_WASTE: '#B6B6B6',
      RESIDUAL_WASTE_4WEEKLY: '#B6B6B6',
      DIAPER_WASTE: '#FFB6C1',
      CHRISTMAS_TREE: '#76DE65',
    },
    backgroundColorMappingDark: {
      WASTEPAPER: '#8BB1FF',
      YELLOW_BAG: '#FFF199',
      BIOWASTE: '#8FE982',
      RESIDUAL_WASTE: '#D0D0D0',
      RESIDUAL_WASTE_4WEEKLY: '#D0D0D0',
      DIAPER_WASTE: '#FFC8D7',
      CHRISTMAS_TREE: '#8FE982',
    },
  },
});

Custom Configuration

You can customize the module by providing a configuration object with optional components and settings:

import { FeatureWasteModule } from '@sw-code/urbo-feature-waste';
import { MyCustomInfoCardComponent } from './my-custom-info-card.component';
import { MyCustomBannerComponent } from './my-custom-banner.component';

// In your app module imports:
FeatureWasteModule.forRoot({
  // Optional custom components
  infoCardComponent: MyCustomInfoCardComponent,
  bannerComponent: MyCustomBannerComponent,

  // Optional individual agreement settings
  individualAgreement: {
    enabled: true, // or false to disable
    companyName: 'ESG Soest', // customize the company/city name
  },

  // Required icon configuration
  iconConfig: {
    // Required color mappings
    colorMappingLight: {
      /* ... */
    },
    colorMappingDark: {
      /* ... */
    },
    backgroundColorMappingLight: {
      /* ... */
    },
    backgroundColorMappingDark: {
      /* ... */
    },
  },
});

Configuration Options

The FeatureWasteConfig interface provides the following configuration options:

  • infoCardComponent (optional): Custom component for displaying information cards
  • bannerComponent (optional): Custom component for displaying banners
  • individualAgreement (optional): Configuration object for the individual agreement feature
    • enabled: Boolean flag to enable or disable the individual agreement feature
    • companyName: String to customize the company/city name displayed in the agreement text
  • iconConfig (required): Configuration object for customizing icons and colors
    • colorMappingLight (required): Mapping of waste types to colors in light mode
    • colorMappingDark (required): Mapping of waste types to colors in dark mode
    • backgroundColorMappingLight (required): Mapping of waste types to background colors in light mode
    • backgroundColorMappingDark (required): Mapping of waste types to background colors in dark mode

Custom components should be Angular standalone components that implement the same inputs and outputs as the default components they replace.

Individual Agreement Feature

The individual agreement feature is specifically designed for the RESIDUAL_WASTE_4WEEKLY waste type. When enabled, it allows users to opt for the 4-weekly residual waste collection schedule instead of the default residual waste schedule.

This feature cannot be customized with a different component as it's specifically tied to this waste type, but it can be configured through the individualAgreement object:

  • You can enable or disable the feature using the enabled property
  • You can customize the company/city name displayed in the agreement text using the companyName property

By default, if the feature is enabled but no company name is provided, "ESG Soest" will be used as the default company name.

Colors

The icon colors are determined by the design config.

Example: Customizing Icons and Colors

import { FeatureWasteModule } from '@sw-code/urbo-feature-waste';

// In your app module imports:
FeatureWasteModule.forRoot({
  iconConfig: {
    // Custom icon colors for light mode
    colorMappingLight: {
      WASTEPAPER: '#5A8DEE',
      YELLOW_BAG: '#FFCC00',
      BIOWASTE: '#006400',
      RESIDUAL_WASTE: '#FFFFFF',
      RESIDUAL_WASTE_4WEEKLY: '#FFFFFF',
      DIAPER_WASTE: '#FF69B4',
      CHRISTMAS_TREE: '#228B22',
    },
    // Custom icon colors for dark mode
    colorMappingDark: {
      WASTEPAPER: '#7AA5FF',
      YELLOW_BAG: '#FFD633',
      BIOWASTE: '#00FF00',
      RESIDUAL_WASTE: '#FFFFFF',
      RESIDUAL_WASTE_4WEEKLY: '#FFFFFF',
      DIAPER_WASTE: '#FF69B4',
      CHRISTMAS_TREE: '#228B22',
    },
    // Custom background colors for light mode
    backgroundColorMappingLight: {
      WASTEPAPER: '#679BFF',
      YELLOW_BAG: '#FFEB7D',
      BIOWASTE: '#76DE65',
      RESIDUAL_WASTE: '#B6B6B6',
      RESIDUAL_WASTE_4WEEKLY: '#B6B6B6',
      DIAPER_WASTE: '#FFB6C1',
      CHRISTMAS_TREE: '#76DE65',
    },
    // Custom background colors for dark mode
    backgroundColorMappingDark: {
      WASTEPAPER: '#8BB1FF',
      YELLOW_BAG: '#FFF199',
      BIOWASTE: '#8FE982',
      RESIDUAL_WASTE: '#D0D0D0',
      RESIDUAL_WASTE_4WEEKLY: '#D0D0D0',
      DIAPER_WASTE: '#FFC8D7',
      CHRISTMAS_TREE: '#8FE982',
    },
  },
});

The module now uses inline SVG definitions for all waste type icons, eliminating the need to provide external SVG files. This makes the library easier to use and more self-contained. The SVG icons are colored dynamically based on the color mappings provided in the configuration.

The module applies different colors based on the current theme (light or dark mode), providing theme-specific visual cues while using the same SVG structure.

Important Note: The iconConfig is now required when initializing the module. There are no default values provided by the module itself. This ensures that all configuration is explicitly defined in the forRoot method, making it easier to test and maintain.

Running unit tests

Run nx test feature-waste to execute the unit tests.

Details

Assets

  • urbo-feature-waste-1.0.0-16051.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all