Fix: Replace empty divs with proper Bootstrap modals for Respond to Call/Station

[waylonkenning]

Summary

This PR fixes the "Respond to a Call" functionality that was broken after the KendoUI removal in commit RE1-T104.

Problem

When clicking "Responding" → "Respond to a Call" (issue #317):

• The screen would go dark (modal backdrop appeared)
• But no modal content was displayed

Root Cause

Commit RE1-T104 switched from Kendo UI Windows to Bootstrap modals but didn't add the required modal HTML structure:

• Kendo's kendoWindow() could auto-create the window on empty divs
• Bootstrap modals require actual HTML with .modal, .modal-dialog, .modal-content classes
• The empty <div id="respondToACallWindow"></div> had no modal structure

Fix

Added proper Bootstrap modal HTML structure for both:

• respondToACallWindow - for responding to calls
• respondToAStationWindow - for responding to stations

The modal bodies are empty initially; content is loaded dynamically via JavaScript when the modal opens.

Testing

• Modal structure now matches Bootstrap conventions (same pattern as confirmSetAllToStandbyModal in the same file)
• JavaScript handlers for show.bs.modal will now find .modal-body elements to load content into

Fixes #317

Summary by CodeRabbit

• Style
  • Enhanced the respond-to-call and respond-to-station dialog interfaces with properly structured headers containing close buttons and localized titles, providing users with a more intuitive and professional interaction experience.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

📝 Walkthrough

Walkthrough

Bootstrap modal structures were added to two placeholder container elements in the Dashboard view, replacing simple <div> tags with complete modal markup including headers with close buttons and localized titles, while preserving empty body sections for dynamic content.

Changes

Cohort / File(s)	Summary
Dashboard Modal Structure Web/Resgrid.Web/Areas/User/Views/Home/Dashboard.cshtml	Replaced placeholder <div> containers (respondToACallWindow, respondToAStationWindow) with Bootstrap modal markup (modal fade structure), including headers with dismiss buttons, localized titles, and empty body containers for dynamic content injection.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: replacing empty divs with proper Bootstrap modals for two specific UI components.
Linked Issues check	✅ Passed	The changes directly address issue #317 by adding proper Bootstrap modal structure to fix the broken 'Respond to Call' functionality caused by KendoUI removal.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the modal structure for respondToACallWindow and respondToAStationWindow, directly related to issue #317 requirements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

Web/Resgrid.Web/Areas/User/Views/Home/Dashboard.cshtml (1)

225-248: Good fix for the Bootstrap modal structure.

The modal markup correctly provides the .modal, .modal-dialog, .modal-content, .modal-header, and .modal-body hierarchy that Bootstrap requires. The empty .modal-body elements are intentional and work correctly with the JavaScript show.bs.modal handlers that dynamically load content via .load().

Minor accessibility improvement: Consider adding aria-labelledby attributes that reference the modal title, and give each <h4> an id for proper screen reader association. This follows Bootstrap best practices for accessible modals.

♿ Optional: Add accessibility attributes

-<div class="modal fade" tabindex="-1" role="dialog" id="respondToACallWindow">
+<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="respondToACallWindowLabel" aria-hidden="true" id="respondToACallWindow">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">@localizer["RespondToCall"]</h4>
+        <h4 class="modal-title" id="respondToACallWindowLabel">@localizer["RespondToCall"]</h4>
       </div>
       <div class="modal-body">
       </div>
     </div>
   </div>
 </div>
-<div class="modal fade" tabindex="-1" role="dialog" id="respondToAStationWindow">
+<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="respondToAStationWindowLabel" aria-hidden="true" id="respondToAStationWindow">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">@localizer["RespondToStation"]</h4>
+        <h4 class="modal-title" id="respondToAStationWindowLabel">@localizer["RespondToStation"]</h4>
       </div>
       <div class="modal-body">
       </div>
     </div>
   </div>
 </div>

Note: The existing confirmSetAllToStandbyModal at line 206 has a similar gap—its aria-labelledby="myModalLabel" references a non-existent id. You may want to fix that as well for consistency.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@Web/Resgrid.Web/Areas/User/Views/Home/Dashboard.cshtml` around lines 225 -
248, Add proper aria-labelledby attributes to the modal containers
(respondToACallWindow and respondToAStationWindow) and assign matching unique
ids to their title elements (<h4>), e.g., give the <h4> inside
respondToACallWindow an id like "respondToACallLabel" and set
aria-labelledby="respondToACallLabel" on the modal div; do the same for
respondToAStationWindow. Also fix the existing confirmSetAllToStandbyModal by
either creating an element with id "myModalLabel" or updating its
aria-labelledby to reference the actual title id so screen readers correctly
associate each modal with its heading.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@Web/Resgrid.Web/Areas/User/Views/Home/Dashboard.cshtml`:
- Around line 225-248: Add proper aria-labelledby attributes to the modal
containers (respondToACallWindow and respondToAStationWindow) and assign
matching unique ids to their title elements (<h4>), e.g., give the <h4> inside
respondToACallWindow an id like "respondToACallLabel" and set
aria-labelledby="respondToACallLabel" on the modal div; do the same for
respondToAStationWindow. Also fix the existing confirmSetAllToStandbyModal by
either creating an element with id "myModalLabel" or updating its
aria-labelledby to reference the actual title id so screen readers correctly
associate each modal with its heading.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 55cf518d-4033-4b37-bed3-83b1bc68c80b

📥 Commits

Reviewing files that changed from the base of the PR and between dbbce63 and 6beef8b.

📒 Files selected for processing (1)

• Web/Resgrid.Web/Areas/User/Views/Home/Dashboard.cshtml