Sanitation
PlatformDomainsAcademyDesign SystemFeedback
v1.4
v1.4
  • Introducing Water-Sanitation
  • Water-Sanitation
    • Solution Design
    • Approach
    • Release Notes
      • FSM 1.4 - Technical Release Summary
      • Service Build Update
        • Release Builds for Core
      • MDMS Changes
      • Configuration Updates
      • Test Cases
      • Localisation
      • Impel Release Notes
      • Gate 2 Checklist
      • Workflow Configuration Changes
      • Master Migration Document
      • Driver-Individual Migration Script
  • Water-Sanitation Product Suite
    • Waste Management System
      • Functional Specifications
        • TQM UI
          • How to Enable TQM UI
          • UI: Plant Operator
            • Landing and Home Page
            • Plant-User Mapping
            • Inbox/Update Tests
            • View Past Test Results/Test's Summary Screen
            • Help Section
          • UI: ULB Admin
            • ULB Admin Home Page
            • Inbox/Test Details Screen
            • View Past Test Results
            • Create Adhoc Test
        • TQM UI/UX Audit
      • Faecal Sludge Management (FSM)
        • Features
        • Sanitation Actors & Interactions
        • User Interface Design
        • FSM User Manual
          • FSM Citizen User Manual
          • Employee User Manual
          • Manage Vendor, Sanitation Worker and Vehicle Details
          • DSO User Manual
          • Septage Treatment Plant Operator User Manual
        • Test Cases
        • FSM Functional Specification
          • Sanitation Worker UI
            • FSM Registry
            • Create Sanitation Worker
            • Edit Sanitation Worker
            • Assign Sanitation Workers to FSM Applications
            • Sanitation Worker Details
          • FSM UI Docs
            • FSM Citizen UI
            • FSM Employee UI
            • FSM DSO UI
            • FSM FSTPO UI
          • FSM UI/UX Audit
        • FSM Technical Specification
          • Vehicle Technical Specification
          • Vendor Technical Specification
          • Calculator Technical Specification
        • FSM Release Notes
          • Known Issues List
        • Product Requirement Document
        • Training
        • Sanitation Worker Welfare
          • Vendor Registry
          • FSM Service
          • Sanitation Worker( FSM 1.4) UI/UX Audit
        • FSM-DSS Technical Documentation
        • Enablement toolkits(Assetization) for FSM
          • Getting started with DIGIT
          • Requirements to enable FSM Module in a new evironment
          • Dependency services of the FSM module
          • Data templates for data collection
          • Data loading steps
            • Loading Billing Slab Data
            • Loading Vendor,Vehicle and Driver Data
            • Loading Localisations
            • Plant Mapping of FSTP
            • Creating users for FSM
          • Preparation of MDMS Data for Data Loading
          • SMS Templates for FSM
        • URC Release Notes
          • Steps to Configure URC
        • Garima Release Notes
          • Steps to Configure Garima
        • User Personas
      • Treatment Quality Monitoring (TQM)
        • Features
        • User Stories
          • Treatment Quality Monitoring Dashboard KPIs
        • User Interface Design
        • User Manual
          • Employee User Manual
          • Treatment Plant Operator User Manual
        • TQM Setup
          • User Manual
        • Release Notes
          • Known Issue List
        • Product Requirement Document: Treatment Quality Monitoring (TQM)
        • PQM Technical Specification
        • TQM Impel Checklist & Roll-out Plan
    • Water & Sewerage Connections
    • NalJal
  • Technology
    • Architecture
      • PQM
        • Low Level Design
          • Services
            • PQM Service
            • PQM Anomaly Finder
            • PQM Scheduler
      • FSM
        • Low Level Design
          • Services
            • FSM Service
            • FSM Calculator
          • Registries
            • FSM Vendor Registry
            • FSM Vehicle Registry
    • Source Code
  • Reference Implementations
    • Odisha - SUJOG
      • Functional Customisation
        • Urban-Rural Convergence
        • Garima Implementation
          • User Interface Design
          • Product Requirement Document (PRD)
      • Technical Customisation
      • Technical Specification: Urban-Rural Convergence
      • Standard Operating Procedure (SOP)
      • Program Rollout Plan
      • Implementation Plan
      • Implementation Guide
      • Implementation Checklist
      • TQM Gate 2 Plans & Checklist
  • Setup
    • Setup
      • On AWS
    • Deployment Guide
      • Legacy/Re-Indexing the FSM Data
      • Legacy/Re-Indexing the PQM Data
      • FSM devops setups
      • FSM Calculator devops setup
      • Vendor registry devops setup
      • Vehicle registry devops setup
    • Development Guide
      • Backend Developer Guide
      • UI Developer Guide
    • Configuration
      • TQM
        • PQM Service
        • PQM Anomaly Finder
        • PQM Scheduler
      • FSM
        • FSM Service
        • Vendor Registry
        • Vehicle Registry
        • FSM Calculator
    • Operations Guide
  • COMMUNITY
    • Community Project: Vehicle Tracking
      • Release Notes
        • Service Build Update
          • Release Builds for Core
        • Test Cases
      • Architecture
        • Vehicle Tracking
          • High Level Design
          • Low Level Design
      • User Manuals
        • Employee User Manual
        • Driver User Manual
      • Demo
      • Product Requirement Document (PRD)
      • Deployment Guide
      • Setup
      • Source Code
    • Contribute
    • Issues
Powered by GitBook

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.

On this page
  • Stepper Information
  • Service Request Screen

Was this helpful?

Export as PDF
  1. Water-Sanitation Product Suite
  2. Waste Management System
  3. Faecal Sludge Management (FSM)
  4. FSM Functional Specification
  5. FSM UI Docs

FSM Citizen UI

Was this helpful?

There are two new updates introduced in FSM v1.2.1 while creating a new application - Stepper Information and Vehicle Capacity Selection in the Service Request Screen.

Stepper Information

We are introducing stepper information in FSM while creating an application from the citizen side so that they have visibility on how many steps they need to go over to submit details regarding their tank.

Technical Implementations Details:

TLTimelineInFSM.js file is the common component and used for rendering the stepper information. The path of the file is:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/components/TLTimelineInFSM.js

The code snippets for defining the steps present in FSM application under case “APPLY”:

The code snippets to render the stepper information in each screen using the timeline component:

Service Request Screen

Citizens can now select vehicle capacity along with the number of trips required while creating an application. If nothing is selected, we will proceed by taking the minimum vehicle capacity available with the number of trips.

Technical Implementation Details:

Code path: frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectTripNo.js

The code snippet for rendering the Vehicle Capacity field in Service Request screen:

<CardText> {t("ES_VEHICLE CAPACITY")} </CardText>
 <RadioOrSelect
    options={vehicleMenu?.map((vehicle) => ({ ...vehicle, label: vehicle.capacity }))}
    selectedOption={vehicleCapacity}
    optionKey="capacity"
    onSelect={selectVehicle}
    optionCardStyles={{ zIndex: "60" }}
    t={t}
    isMandatory={config.isMandatory}isDropDown={true}
/>

The code snippet for fetching the vehicles available under all DSO:

const allVehicles = dsoData.reduce((acc, curr) => {
  return curr.vehicles && curr.vehicles.length ? acc.concat(curr.vehicles) : acc;
}, []);
const cpacityMenu = Array.from(new Set(allVehicles.map((a) => a.capacity)))
    .map((capacity) => allVehicles.find((a) => a.capacity === capacity));

The code snippet for setting the default vehicle capacity to minimum:

using Timeline component to render the stepper Information in each screen provided with step number in currentStep.