frontend/src/components/RobotList.tsx


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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

import { useState } from "react";
import type { Robot } from "../types/robot";

type ExpandedRobotsState = Record<number, boolean>;

type Props = { robots: Robot[]; };

function RobotList({ robots }: Props) {
    const [expandedRobots, setExpandedRobots] = useState<ExpandedRobotsState>(
        {}
    );

    function toggleRobotHistory(robotId: number) {
        setExpandedRobots((prev) => ({
            ...prev,
            [robotId]: !prev[robotId],
        }));
    }

    return (
        <ul className="sidebar-robot-list">
            {robots.map((robot) => {
                const isExpanded = expandedRobots[robot?.id];

                return (
                    <li key={robot?.id}>
                        <p className="robot-name">{robot?.name}</p>

                        <p>
                            Status:{" "}
                            <span className={`robot-status-${robot?.status}`}>
                                {robot?.status}
                            </span>
                        </p>

                        <p className="robot-coordinates-label">Position:</p>
                        <ul className="robot-coordinates">
                            <li>Lat: {robot?.lat}</li>
                            <li>Lon: {robot?.lon}</li>
                        </ul>

                        <button
                            className="btn btn-robot-history-toggle"
                            onClick={() => toggleRobotHistory(robot?.id)}
                            aria-expanded={isExpanded}
                        >
                            Position history
                            <span
                                className={`arrow ${isExpanded ? "open" : ""}`}
                            >
                                ▾
                            </span>
                        </button>

                        <div
                            className={`robot-history ${
                                isExpanded ? "expanded" : ""
                            }`}
                        >
                            <ul>
                                {robot?.robot_positions?.length ? (
                                    robot?.robot_positions?.map(
                                        (pos, index) => (
                                            <li key={index}>
                                                {`Lat: ${pos?.lat}, Lon: ${pos?.lon}`}
                                            </li>
                                        )
                                    )
                                ) : (
                                    <li className="robot-history-empty">
                                        No previous positions.
                                    </li>
                                )}
                            </ul>
                        </div>
                    </li>
                );
            })}
        </ul>
    );
}

export default RobotList;