manager-dashboard/app/components/domain/ProjectSpecificDetails/StreetDetails/index.tsx at 70d54877bb95cb90913362ac6ddd1f1d59e403ff · mapswipe/manager-dashboard · GitHub

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { isNotDefined } from '@togglecorp/fujs';
import { removeNull } from '@togglecorp/toggle-form';

import Container from '#components/Container';
import CustomOptionPreview from '#components/domain/CustomOptionsPreview';
import ProjectAssetPreview from '#components/domain/ProjectAssetPreview';
import ListLayout from '#components/ListLayout';
import TextOutput from '#components/TextOutput';
import {
    StreetImageProviderNameEnum,
    StreetProjectPropertyType,
} from '#generated/types/graphql';

interface Props {
    data: StreetProjectPropertyType | undefined;
}

function StreetDetails(props: Props) {
    const { data } = props;

    if (isNotDefined(data)) {
        return null;
    }

    return (
        <>
            <ListLayout layout="grid">
                <ProjectAssetPreview
                    assetId={data.aoiGeometry}
                />
                <Container
                    headingLevel={5}
                    heading="Custom options"
                >
                    <CustomOptionPreview
                        value={removeNull(data.customOptions)}
                        variant="info"
                    />
                </Container>
            </ListLayout>
            <Container
                heading="Street-level Image Filters"
                headingLevel={5}
            >
                <ListLayout
                    layout="grid"
                    spacing="sm"
                >
                    <TextOutput
                        label="Start date"
                        value={data.mapillaryImageFilters.startTime}
                    />
                    <TextOutput
                        label="End date"
                        value={data.mapillaryImageFilters.endTime}
                    />
                    <TextOutput
                        label="Image Creator ID"
                        value={data.mapillaryImageFilters.creatorId}
                    />
                    <TextOutput
                        label="Organization ID"
                        value={data.mapillaryImageFilters.organizationId}
                    />
                    <TextOutput
                        label="Image Sampling Threshold"
                        value={data.mapillaryImageFilters.samplingThreshold}
                        valueType="number"
                    />
                </ListLayout>
                <ListLayout
                    layout="block"
                    spacing="sm"
                >
                    <TextOutput
                        label="Only use 360 degree panaroma images"
                        value={data.mapillaryImageFilters.panoOnly}
                        valueType="boolean"
                    />
                    <TextOutput
                        label="Randomize the order of images in the project"
                        value={data.mapillaryImageFilters.randomizeOrder}
                        valueType="boolean"
                    />
                </ListLayout>
                <ListLayout
                    layout="block"
                    spacing="sm"
                >
                    <TextOutput
                        label="Image provider name"
                        value={data.imageProvider?.name}
                        valueType="text"
                    />
                    {(
                        data.imageProvider?.name === StreetImageProviderNameEnum.PanoramaxCustom
                        && data.imageProvider?.url
                    ) && (
                        <TextOutput
                            label="Panoramax API URL"
                            value={data.imageProvider.url}
                            valueType="text"
                        />
                    )}
                </ListLayout>
            </Container>
        </>
    );
}

export default StreetDetails;