dohertj2/jdescopingtool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
427c488cd6367bb91d119d7dc8a3bab778e71ae5
jdescopingtool/webui_lf.md
T
Joseph Doherty 26ff8d9b4f Initial commit: JDE Scoping Tool migration project 
Set up repository with legacy .NET Framework 4.8 source (OLD/),
new .NET 10 Blazor solution (NEW/), OpenSpec specifications,
documentation, and project configuration.
2026-01-02 07:43:29 -05:00

17 KiB
Raw Blame History

JDE Scoping Tool (LotFinder) - Legacy Web UI Documentation

This document describes the layout, look and feel, and navigation of the legacy .NET Framework 4.8 web application located in OLD/WebInterface/.

Table of Contents

  1. Technology Stack
  2. Visual Design & Theming
  3. Page Layout Structure
  4. Navigation Flow
  5. View Inventory
  6. UI Components & Patterns
  7. Real-Time Features
  8. Form Interactions
  9. File Structure Reference

Technology Stack

Technology Version Purpose
ASP.NET MVC 5 Web framework
Bootstrap 3.0.0 Responsive CSS framework
Kendo UI 2019.2.619 Enterprise UI components
jQuery 1.10.2 DOM manipulation
jQuery UI 1.9.0 UI widgets (datepicker support)
SignalR 2.2.1 Real-time bidirectional communication
jQuery File Upload - File upload handling

Visual Design & Theming

Color Palette

The application uses Bootstrap's default color scheme with the inverse navbar (dark theme):

Element Color Usage
Navbar background #222 (dark gray) Fixed top navigation
Navbar brand text #9d9d9d (light gray) "JDE Scoping Tool" title
Primary buttons #337ab7 (blue) Submit, Login, action buttons
Success background #dff0d8 (light green) Completed status, Download Results
Danger background #f2dede (light red) Error states, validation errors
Warning background #fcf8e3 (light yellow) Readonly notices
Default background #eeeeee (light gray) Neutral states
Error status color #FF6347 (tomato red) Error status field

Typography

  • Font: Browser default (system fonts)
  • Kendo UI: Uses Bootstrap theme styling for consistent appearance

Layout Dimensions

body {
    padding-top: 50px;    /* Space for fixed navbar */
    padding-bottom: 20px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

Page Layout Structure

Master Layout (_Layout.cshtml)

+----------------------------------------------------------+
|  [Navbar - Fixed Top]                                     |
|  +------------------------------------------------------+ |
|  | JDE Scoping Tool           [Username] [Login/Logout] | |
|  +------------------------------------------------------+ |
+----------------------------------------------------------+
|                                                          |
|  [Page Content - Container]                              |
|  +------------------------------------------------------+ |
|  |                                                      | |
|  |  @RenderBody()                                       | |
|  |                                                      | |
|  +------------------------------------------------------+ |
|                                                          |
|  -------------------------------------------------------- |
|  [Footer: JDE Scoping Tool Version 4]                    |
+----------------------------------------------------------+

Navbar Components

  1. Brand link: "JDE Scoping Tool" - links to Home/Index
  2. Hamburger menu: Collapsible on mobile (3 icon bars)
  3. Logon control (right-aligned):
    • Unauthenticated: [Login] button
    • Authenticated: Username [Logout]

Navigation Flow

                    +----------------+
                    | Login Page     |
                    | /Account/Login |
                    +-------+--------+
                            |
                   [LDAP Authentication]
                            |
                            v
+----------------------------------------------------------+
|                    AUTHENTICATED AREA                     |
+----------------------------------------------------------+
|                                                          |
|    +------------------+                                  |
|    | Home/Index       |-----> Redirects to               |
|    +------------------+       Search/Index               |
|                                                          |
|    +------------------+        +--------------------+    |
|    | Search/Index     |<------>| Search/Create      |    |
|    | (My Searches)    |        | (New/Edit Search)  |    |
|    +------------------+        +--------------------+    |
|           |                            |                 |
|           v                            v                 |
|    +------------------+        +--------------------+    |
|    | Search/Queue     |        | Download Results   |    |
|    | (All Searches)   |        | (Excel file)       |    |
|    +------------------+        +--------------------+    |
|                                                          |
|    +------------------+                                  |
|    | RefreshStatus    |  (Admin: Cache sync status)     |
|    +------------------+                                  |
|                                                          |
+----------------------------------------------------------+

Error States:
- /Account/NotAuthorized  -> Access denied page
- /InvalidUA/InvalidUserAgent -> Browser not supported
- Error.cshtml -> Generic error page

Page Descriptions

Page URL Purpose
Login /Account/Login LDAP authentication form
My Searches /Search/Index List user's saved searches
New/Edit Search /Search/Create?id=X Create or view a search
Copy Search /Search/Create?copySearchID=X Copy existing search
Search Queue /Search/Queue Monitor all queued searches
Refresh Status /RefreshStatus View data cache sync history

View Inventory

Core Views

View File Title Description
Views/Shared/_Layout.cshtml (Master) Main layout template
Views/Account/Login.cshtml "Login" Username/password form
Views/Account/NotAuthorized.cshtml "Authorization Error" Access denied message
Views/Search/Index.cshtml "Searches" Kendo Grid of user's searches
Views/Search/Create.cshtml "Search" Complex search form (1459 lines)
Views/Search/Queue.cshtml "Search Queue" Real-time queue monitor
Views/RefreshStatus/Index.cshtml "Cache Refresh Status" Data sync history table
Views/InvalidUA/InvalidUserAgent.cshtml "Unapproved Browser" IE/Chrome only warning
Views/Shared/Error.cshtml "Error" Generic error page

Editor Templates (Kendo UI)

Located in Views/Shared/EditorTemplates/:

  • Currency.cshtml, Date.cshtml, DateTime.cshtml
  • Email.cshtml, EmailAddress.cshtml
  • Integer.cshtml, Number.cshtml
  • Password.cshtml, String.cshtml
  • Time.cshtml, Url.cshtml
  • GridForeignKey.cshtml

UI Components & Patterns

Bootstrap Components Used

Component Usage
navbar navbar-inverse navbar-fixed-top Top navigation bar
container Content wrapper
panel panel-default Grouped form sections
form-horizontal Horizontal form layout
form-group Form field grouping
form-control Input styling
btn btn-primary/default/success Buttons
alert alert-danger/warning Notification messages
col-md-* Grid columns

Kendo UI Components Used

Component Usage
kendo.ui.Grid Data tables with sorting, paging
kendo.ui.ComboBox Autocomplete dropdowns
kendo.ui.DatePicker Date selection
kendo.ui.DropDownList Search type selection
kendo.ui.Validator Form validation
kendo.ui.Alert Modal alert dialogs
kendo.data.DataSource Data binding
kendo.observable MVVM view models

Common UI Patterns

1. Panel with Header and Body

<div class="panel panel-default">
    <div class="panel-heading">
        Panel Title
        <div class="btn-group" style="float: right;">
            [Action Buttons]
        </div>
    </div>
    <div class="panel-body container">
        [Form Fields / Grid]
    </div>
</div>

2. Page Header with Actions

<h2>
    Page Title
    <span class="btn-group" style="padding-left: 25px;">
        <a class="btn btn-sm btn-primary">Primary Action</a>
        <a class="btn btn-sm btn-default">Secondary Action</a>
    </span>
</h2>

3. Readonly Warning Notice

<div class="alert alert-warning" data-bind="visible: IsReadOnly">
    <strong>Note:</strong> search is readonly...
    <button class="btn btn-default" id="copyBTN">Copy</button>
</div>

Real-Time Features

SignalR Hub Integration

The application uses SignalR for real-time status updates:

// Connection setup
var statusHub = $.connection.statusHub;

// Event handlers
statusHub.client.statusUpdate = function(statusUpdate) {
    // Update status display
};

statusHub.client.searchUpdate = function(searchUpdate) {
    // Update search grid
};

// Start connection with auto-reconnect
$.connection.hub.start().done(function() { });

$.connection.hub.disconnected(function() {
    setTimeout(function() {
        $.connection.hub.start();
    }, 5000);  // Reconnect after 5 seconds
});

Real-Time Updates

Event Triggered When UI Update
searchUpdate Search status changes Grid row updates
statusUpdate Worker service status changes Status panel updates

Form Interactions

Search/Index Page

My Searches Grid:

  • Columns: Name, Submitted (formatted date), Status, Actions
  • Sortable with multi-column support
  • Pageable (10 per page)
  • Row double-click opens search in new window
  • "View" button opens search in new window

Action Buttons:

  • "Start New Search" - Opens /Search/Create (new window)
  • "View Search Queue" - Opens /Search/Queue (new window)

Search/Create Page

Search Details Panel:

Field Type Behavior
Search Type Dropdown Changes visible filter sections
Name Text input Required, editable when New
Submitted At Text (readonly) Shows submit timestamp
Started At Text (readonly) Shows processing start
Completed At Text (readonly) Shows completion time
User Text (readonly) Shows owner username
Status Text (readonly) Color-coded background
Download Results Button Visible when status=Ended

Filter Sections (shown based on Search Type):

Section Controls
Timespan Min Date (datepicker), Max Date (datepicker)
Work Order Grid, Upload/Download/Clear buttons
Item Number ComboBox (autocomplete), Add button, Grid
Profit Center ComboBox (autocomplete), Add button, Grid
Work Center ComboBox (autocomplete), Add button, Grid
Component Lot Grid, Upload/Download/Clear buttons
Operator ComboBox (autocomplete), Add button, Grid
Item/Operation/MIS Grid, Upload/Download/Clear buttons
Extract MIS Data Checkbox (readonly display)

Valid Search Type Combinations:

// From models.js - 16 valid combinations
1.  "Work Order"
2.  "Component Lot"
3.  "Time Span + Profit Center"
4.  "Time Span + Work Center"
5.  "Time Span + Operator"
6.  "Time Span + Profit Center + Item Number"
7.  "Time Span + Profit Center + Item/Operation/MIS"
8.  "Time Span + Profit Center + Work Order + Item/Operation/MIS"
9.  "Time Span + Profit Center + Extract MIS"
10. "Time Span + Work Center + Item Number"
11. "Time Span + Work Center + Extract MIS"
12. "Time Span + Work Center + Item/Operation/MIS"
13. "Time Span + Work Center + Work Order + Item/Operation/MIS"
14. "Time Span + Item Number"
15. "Time Span + Work Center + Operator"
16. "Time Span + Profit Center + Operator"

Button States:

Status Submit Copy Download
New Visible Hidden Hidden
Queued/Running Hidden Visible Hidden
Ended Hidden Visible Visible
Error Hidden Visible Hidden

Search/Queue Page

Status Panel:

  • Status Message (readonly text)
  • Last Update Timestamp (readonly text)

Queue Grid:

  • Columns: Owner, Name, Submitted, Started, Ended, Status
  • Sortable with multi-column support
  • Pageable (20 per page)
  • Searches removed when status=Ended or Error

Login Page

Simple horizontal form:

  • Username (text input, 400px width)
  • Password (password input, 400px width)
  • Login button (btn-primary)
  • Error messages in alert-danger divs

File Structure Reference

Views Directory

Views/
├── _ViewStart.cshtml              # Sets default layout
├── web.config                     # View configuration
├── Account/
│   ├── Login.cshtml               # Login form
│   └── NotAuthorized.cshtml       # Access denied
├── InvalidUA/
│   └── InvalidUserAgent.cshtml    # Browser warning
├── RefreshStatus/
│   └── Index.cshtml               # Cache status table
├── Search/
│   ├── Index.cshtml               # My searches grid
│   ├── Create.cshtml              # Search form (1459 lines)
│   └── Queue.cshtml               # Queue monitor
└── Shared/
    ├── _Layout.cshtml             # Master layout
    ├── Error.cshtml               # Error page
    └── EditorTemplates/           # Kendo editor templates

JavaScript Files

Scripts/
├── Custom/
│   ├── widgets.js                 # Kendo widget extensions
│   ├── kendoHelpers.js            # Grid/DataSource helpers
│   ├── confirmationDialog.js      # Confirmation modal
│   └── model/models.js            # View models, ValidCombinations
├── Vendor/
│   ├── jquery-1.10.2.js
│   ├── jquery-ui-1.9.0.min.js
│   ├── jquery.validate.js
│   ├── jquery.validate.unobtrusive.js
│   ├── jquery.signalR-2.2.1.js
│   ├── bootstrap.js
│   ├── modernizr-2.6.2.js
│   └── respond.js
├── jQuery.FileUpload/             # File upload plugin
│   ├── jquery.fileupload.js
│   ├── jquery.iframe-transport.js
│   ├── jquery.fileupload-process.js
│   └── jquery.fileupload-ui.js
├── js-cookie/
│   └── js.cookie.js
└── kendo/2019.2.619/              # Full Kendo UI suite
    ├── kendo.all.min.js
    ├── kendo.aspnetmvc.min.js
    ├── jszip.min.js
    └── kendo.modernizr.custom.js

CSS/Styling Files

Content/
├── Site.css                       # Custom styles (minimal)
├── bootstrap.css                  # Bootstrap 3.0.0
├── bootstrap.min.css
├── themes/base/                   # jQuery UI theme
├── jQuery.FileUpload/css/         # File upload styling
└── kendo/2019.2.619/              # Kendo themes
    ├── kendo.common-bootstrap.min.css
    ├── kendo.bootstrap.min.css
    ├── kendo.mobile.all.min.css
    ├── kendo.dataviz.min.css
    ├── kendo.dataviz.bootstrap.min.css
    ├── fonts/                     # DejaVu fonts
    └── images/                    # Kendo sprites

Controllers

Controllers/
├── CrudController.cs              # Base controller
├── AccountController.cs           # Login/Logout
├── HomeController.cs              # Redirect to Search
├── SearchController.cs            # Main search operations
├── FileIOController.cs            # Excel upload/download
├── LookupController.cs            # Autocomplete APIs
├── SessionController.cs           # Session management
└── InvalidUAController.cs         # Browser validation

Migration Notes for Blazor WebAssembly

When migrating to Blazor WebAssembly, consider these UI/UX elements to preserve:

  1. Layout: Bootstrap 5 navbar with similar dark theme
  2. Grids: MudBlazor DataGrid or similar component
  3. Forms: Cascading validation, panel-based grouping
  4. Real-time: SignalR Core for status updates
  5. Autocomplete: Server-filtered dropdowns with debounce
  6. File uploads: InputFile component with progress
  7. Dialogs: Confirmation modals before destructive actions
  8. State: Similar readonly/editable state management
  9. Date formatting: MM/dd/yyyy hh:mm:ss tt pattern
  10. Valid combinations: Same 16 search type combinations
Reference in New Issue View Git Blame Copy Permalink