Skip to main content

​
Traffic Reporting

The Traffic Reporting feature enables users to submit traffic incidents and view recent reports from the community, helping everyone stay informed about current road conditions.

​
Overview

This collaborative feature allows users to:
  • Report traffic incidents in real-time
  • View recent incidents from other users
  • Provide detailed information about road hazards
  • Help the community make informed routing decisions

​
How to Use

1

Enter Location

Specify the street or intersection where the incident occurred.
2

Specify Incident Type

Describe the type of incident (e.g., accident, blockage, construction, hazard).
3

Add Details (Optional)

Provide additional information about the incident in the details field.
4

Submit Report

Click the “Submit Incident” button to share the report with the community.
5

View Recent Incidents

Scroll down to see a list of recent incidents reported by other users.

​
API Integration

The reporting system uses the following API endpoint: 
const API_URL = 'https://autonomous.stu.nighthawkcodingsociety.com/api/incidents';

​
Submit Incident (POST)

document.getElementById('incidentForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const location = document.getElementById('location').value;
  const type = document.getElementById('type').value;
  const details = document.getElementById('details').value;

  const res = await fetch('https://autonomous.stu.nighthawkcodingsociety.com/api/incidents', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ location, type, details })
  });

  const data = await res.json();
  document.getElementById('statusMessage').innerText = data.message || 'Incident reported.';
  document.getElementById('incidentForm').reset();
  loadIncidents(); // refresh list
});

​
Request Parameters

ParameterTypeRequiredDescription
locationstringYesStreet or intersection of the incident
typestringYesType of incident (accident, blockage, etc.)
detailsstringNoAdditional information about the incident

​
Load Incidents (GET)

async function loadIncidents() {
  const res = await fetch('https://autonomous.stu.nighthawkcodingsociety.com/api/incidents');
  const data = await res.json();

  const list = document.getElementById('incidentList');
  list.innerHTML = '';
  data.forEach((incident) => {
    list.innerHTML += `<li><strong>${incident.type}</strong> at <em>${incident.location}</em><br>${incident.details || ''}</li>`;
  });
}

loadIncidents();
The incident list is automatically loaded when the page first loads and refreshes after each new submission.

​
UI Components

Report Form

Clean submission form with required and optional fields

Status Messages

Real-time feedback on submission success

Incident List

Organized display of recent community reports

Auto-refresh

List updates automatically after new submissions

​
Form Structure

<div class="report-container">
  <h2 class="title">🚦 Report Traffic Incident</h2>
  <form id="incidentForm">
    <input type="text" id="location" placeholder="Enter Street or Intersection" required>
    <input type="text" id="type" placeholder="Type of Incident (e.g., accident, blockage)" required>
    <textarea id="details" placeholder="Optional details..." rows="3"></textarea>
    <button type="submit">Submit Incident</button>
  </form>
  <div id="statusMessage"></div>
</div>

​
Incident Display

​
Recent Incidents Section

<div class="incidents-display">
  <h3>📍 Recent Incidents</h3>
  <ul id="incidentList"></ul>
</div>

​
Dynamic List Generation

Incidents are rendered with type, location, and details: 
data.forEach((incident) => {
  list.innerHTML += `<li><strong>${incident.type}</strong> at <em>${incident.location}</em><br>${incident.details || ''}</li>`;
});
Optional details are only displayed if provided, keeping the list clean when additional information isn’t available.

​
Styling

The interface features a modern, accessible design: 
.report-container, .incidents-display {
  max-width: 600px;
  margin: 20px auto;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

input, textarea {
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

​
Incident List Styling

ul {
  list-style-type: none;
  padding-left: 0;
}

li {
  margin: 8px 0;
  background: #eee;
  padding: 10px;
  border-radius: 8px;
}

​
Form Validation

The form uses HTML5 validation:
Both location and type fields are marked as required:
<input type="text" id="location" placeholder="Enter Street or Intersection" required>
<input type="text" id="type" placeholder="Type of Incident (e.g., accident, blockage)" required>
The details field allows users to provide additional context without being mandatory:
<textarea id="details" placeholder="Optional details..." rows="3"></textarea>

​
Response Handling

​
Submission Feedback

const data = await res.json();
document.getElementById('statusMessage').innerText = data.message || 'Incident reported.';
document.getElementById('incidentForm').reset();
loadIncidents();
After successful submission:
  1. A status message is displayed
  2. The form is automatically reset
  3. The incident list refreshes to show the new report

​
Common Incident Types

While the type field accepts any text, common incident types include:

Accident

Vehicle collisions or crashes

Blockage

Road closures or lane blockages

Construction

Active construction zones

Hazard

Road hazards like debris or potholes

Congestion

Heavy traffic or congestion

Weather

Weather-related conditions

​
Data Structure

Incident objects contain:
FieldTypeDescription
locationstringStreet or intersection
typestringIncident category
detailsstringOptional additional information

​
Best Practices

When reporting incidents:
  • Be specific about the location
  • Use clear, descriptive incident types
  • Include relevant details that help other drivers
  • Only report current, active incidents

​
Automatic Page Load

Incidents are loaded immediately when the page is accessed: 
loadIncidents();
This ensures users always see the most recent community reports upon arrival.

​
Community Impact

The Traffic Reporting feature creates a collaborative environment where:
  • Users help each other avoid delays
  • Real-time information improves route planning
  • The community stays informed about road conditions
  • Shared knowledge enhances overall navigation efficiency

Build docs developers (and LLMs) love

Get started for freeTalk to us