dohertj2/jdescopingtool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4d0b5a79412c7f90ba8a74786fc1c19e02bddcd7
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

495 lines
17 KiB
Markdown
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](#technology-stack)
2. [Visual Design & Theming](#visual-design--theming)
3. [Page Layout Structure](#page-layout-structure)
4. [Navigation Flow](#navigation-flow)
5. [View Inventory](#view-inventory)
6. [UI Components & Patterns](#ui-components--patterns)
7. [Real-Time Features](#real-time-features)
8. [Form Interactions](#form-interactions)
9. [File Structure Reference](#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
```css
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
```html
<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
```html
<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
```html
<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:
```javascript
// 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:**
```javascript
// 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