Link: https://www.utrgv.edu/parking-and-transportation-services/parking-services/parking-spaces/
This was a fun project that brought a lot of relief to students looking for parking spots in the different parking lots around the UTRGV campus. I worked with the Parking department to find a solution using the hardware data they had installed in the parking lots.
My coworker Chris converted that data into a JSON endpoint that I could then use with the fetch API. The fetch API is the modern replacement of XMLHttpRequest. No framework was needed for this. I wrote plain JavaScript. Fetch API is pretty simple to work with. The CSS and HTML was also plain and simple. No need to get fancy. Of course it was responsive. The department wanted to place the widgets all over their website and on the universities iOS and Android applications.
First I made the request to store the JSON data into getLots(). Also note that the fetch API is promise-based. This gives us the flexibility to present the completion of the operation or failure and how to handle each.
async function getLots() {
let url = '.../api/parking';
try {
let response = await fetch(url);
return await response.json();
} catch (error) {
console.log(error);
}
}
Then its formating the JSON data into HTML. I made use of template literals to make it easier to write the HTML as I normally would and insert the expressions in their respective places.
async function renderLots() {
let parkingLots = await getLots();
let html = '';
parkingLots.forEach(parkingLot => {
const lots = `
<div class="parking_lot ${parkingLot.location_name}">
<div>${parkingLot.location_name} - Zone #</div>
<div>${parkingLot.location_addres}</div>
<div>${parkingLot.total_spaces}</div>
... // grab the rest of the items.
</div>
`;
html += lots;
const container = document.querySelector('.parkingWidget');
container.innnerHTML = html;
}
)}
renderLots();
Finally the HTML selector to insert the parking spaces into.
<div class="parkingWidget">...</div>