frontend/src/components/app/map/groups/DatacenterGroup.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import React from 'react'
import { Group } from 'react-konva'
import GrayContainer from '../../../../containers/app/map/GrayContainer'
import RoomContainer from '../../../../containers/app/map/RoomContainer'
import Shapes from '../../../../shapes/index'

const DatacenterGroup = ({ datacenter, interactionLevel }) => {
    if (!datacenter) {
        return <Group/>
    }

    if (interactionLevel.mode === 'BUILDING') {
        return (
            <Group>
                {datacenter.roomIds.map(roomId => (
                    <RoomContainer key={roomId} roomId={roomId}/>
                ))}
            </Group>
        )
    }

    return (
        <Group>
            {datacenter.roomIds
                .filter(roomId => roomId !== interactionLevel.roomId)
                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
            {interactionLevel.mode === 'ROOM' ? <GrayContainer/> : null}
            {datacenter.roomIds
                .filter(roomId => roomId === interactionLevel.roomId)
                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
        </Group>
    )
}

DatacenterGroup.propTypes = {
    datacenter: Shapes.Datacenter,
    interactionLevel: Shapes.InteractionLevel,
}

export default DatacenterGroup