nodejs-traffic-shadowing-tests icon indicating copy to clipboard operation
nodejs-traffic-shadowing-tests copied to clipboard

Creating the UI view

Open goldbergyoni opened this issue 6 years ago • 0 comments

Layout

This is a wireframe that outlines how the view should look like. All the images are located within the /images folder. Each car amount of messages starts with zero. Below the status panel there should be a button with the text 'Simulate'. Please put the following cars:

ferrari: 0, fiat: 0, skoda: 0, alfaRomeo: 0, vespa: 0, tesla: 0, audi: 0

image

Clicking on a car should send an update Whenever a car is clicked, please send a POST to the server, this method already exists in the code, just call:

postEvent(carName, {
            id: 1,
            engine: {
                temperature: 90
            }
        });

Only the car 'Vespa' should send the same payload but without the property 'engine' (just id)

Updating the car events count A websocket gets a list with all the cars and their updates count so you can update the UI. This already works in the code, just apply it to all cars count. This is how the websocket message looks like:

ferrari: 0,
    fiat: 0,
    skoda: 0,
    alfaRomeo: 0,
    vespa: 0,
    tesla: 0,
    audi: 0

The simulate button logic This sends messages in-behalf of all cars, every 0.5 seconds send an update message from some car, just pick a car which is not Vespa and send the POST message as described in the section 'Clicking on a car should send an update'. This is the same logic, only without the need to click on the car.

After 30 seconds send a Vespa message (no engine property)

What happens in case of error Whenever the websocket sends payload.messageType === 'error' then we should show the YouTube video within the status panel, this code already works - just position it within the status panel

goldbergyoni avatar Sep 25 '19 10:09 goldbergyoni