Vehicules status colors

You ka year ago

Hi
I've been using 5.4 release with a custom build for web interface, i've added a function to get status colors (green, yellow, red) of vehicules (online, offline) now i'de like to migrate to 5.6 and i wanna know if it support colors or i have to add the function again.

Thanks

Anton Tananaeva year ago

It does support custom colors logic. You can configure it using a computed attribute "color".

You ka year ago

Should i configure this per user/unit ?

Anton Tananaeva year ago

You can configure it for a group of devices.

You ka year ago

I prefer adding a function to have this option by default

You ka year ago

Could you share the expression for computed attribute ?

Anton Tananaeva year ago

It depends on the logic you want to use for the color.

You ka year ago

This is the logic i want :

Online : green
Offline : red
Disconnected : yellow

Anton Tananaeva year ago

What is the difference between "offline" and "disconnected"?

You ka year ago

Disconnected is when the device is not online during a short period of time while offline is when the device is not online for a long time

Anton Tananaeva year ago

That's not how it works in Traccar.

You ka year ago

Okey could you please suggest a way to write expression for computed attributes at least for online and offline status ?

Anton Tananaeva year ago

I think I misunderstood your original question. I don't really know what you want to do.

henry beltrana year ago

Maybe
Online : green
Offline : red
Unknow: yellow

You ka year ago

In 5.4 release i added this function into DeviceList.js :

const renderColor = (device) => {
  if (device.status === 'online') { return '#4CAF50'; }
  if (device.status === 'offline') { return '#CC2222'; }
  if (device.status === 'unknown') { return '#F3A813'; }
  return false;
};

Then i added the function in the avatar tag :

        <ListItemAvatar>
          <Avatar style={{ background: renderColor(item) }}>
            <img className={classes.icon} src={mapIcons[mapIconKey(item.category)]} alt="" />
          </Avatar>
        </ListItemAvatar>