Device status colors in the modern UI interface

Hello Anton and everyone, I'm finding a way to apply the device status colors from the old Traccar to the modern UI.

I try to declare the getDeviceColor function in the formatter.js file, then implement that function in the DevicesList.js file. However, the terminal replied that "'Traccar' is not defined no-undef" due to this block. How could I "define" Traccar in the modern directory? Thank you very much.

export const getDeviceColor = (device) => {
  switch (device.get('status')) {
    case 'online':
      return Traccar.Style.mapColorOnline;
    case 'offline':
      return Traccar.Style.mapColorOffline;
    default:
      return Traccar.Style.mapColorUnknown;
  }
}

Never mind, I figured it out. If anyone wants to do it, please comment here.

Hello there!! Please post your solution here sir so we can catch up. Thank you!

Hi Marko, I wrote a function in the DevicesLists.js:

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

Then I added the function in the Avatar tag

<Avatar style={{
    background: renderColor(item)
}}>

That would help you display the device status colors on your devices list.