= ({ label, url, iconName, iconColor }) => {
14 | if (label.trim() === '') {
15 | return null;
16 | }
17 |
18 | return (
19 |
20 | {iconName && (
21 |
30 | )}
31 |
32 | {url && (
33 |
39 | {label}
40 |
41 | )}
42 |
43 | {!url && (
44 |
45 | {label}
46 |
47 | )}
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/services/layers/Layer.ts:
--------------------------------------------------------------------------------
1 | import { Map } from 'azure-maps-control';
2 | import { Dispatch } from '@reduxjs/toolkit';
3 | import { indoor } from 'azure-maps-indoor';
4 |
5 | import { LocationData } from '../../models/locationsData';
6 |
7 | export enum LayerType {
8 | Floors = 'floors',
9 | Indoor = 'indoor',
10 | Markers = 'markers',
11 | Warnings = 'warnings',
12 | Weather = 'weather',
13 | Tracking = 'tracking'
14 | }
15 |
16 | export interface LayerChildItem {
17 | id: string;
18 | name: string;
19 | visible: boolean;
20 | }
21 |
22 | export interface ComponentAndProps {
23 | component: React.FC
;
24 | props: P;
25 | }
26 |
27 | export interface Layer {
28 | id: string;
29 | name: string;
30 | type: LayerType;
31 | isVisible: boolean;
32 | initialize(map: Map, indoorManager: indoor.IndoorManager, dispatch: Dispatch): void;
33 | setVisibility(isVisible: boolean): void;
34 | setLocation(location: LocationData): void;
35 | dispose(): void;
36 | onLayerVisibilityChange?(layer: Layer): void;
37 | getChildren?(): LayerChildItem[];
38 | setChildVisibility?(name: string, visible: boolean): void;
39 | getMapComponent?(): ComponentAndProps | undefined;
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/LocationBreadcrumb/LocationBreadcrumb.scss:
--------------------------------------------------------------------------------
1 | @import '../../css/colors.scss';
2 |
3 | .location-breadcrumb-container {
4 | flex: 1;
5 | }
6 |
7 | .location-breadcrumb {
8 | margin: 0;
9 |
10 | .overflow-button,
11 | .item-button,
12 | .divider {
13 | outline: none;
14 | color: $gray130;
15 | }
16 |
17 | .item-button {
18 | border-radius: 2px;
19 | caret-color: transparent;
20 |
21 | * {
22 | pointer-events: none;
23 | }
24 | }
25 |
26 | .divider {
27 | padding: 0;
28 | width: 16px;
29 | height: 100%;
30 | margin-left: 2px;
31 |
32 | .divider-icon {
33 | margin: 0;
34 | font-size: 12px;
35 | }
36 |
37 | * {
38 | pointer-events: none;
39 | }
40 | }
41 |
42 | .list-item {
43 | &:not(.final-level):last-child {
44 | display: none;
45 | }
46 |
47 | &:not(:last-child) {
48 | margin-right: 2px;
49 | }
50 |
51 | &:not(.final-level):nth-last-child(2) {
52 | margin-right: 0;
53 | }
54 |
55 | &:last-child,
56 | &:not(.final-level):nth-last-child(2) {
57 | .item-button {
58 | color: $gray130;
59 | font-weight: 600;
60 | }
61 | }
62 | }
63 | }
--------------------------------------------------------------------------------
/src/components/Legend/Legend.scss:
--------------------------------------------------------------------------------
1 | .legend-outer {
2 | position: absolute;
3 | align-self: flex-end;
4 | }
5 |
6 | .my-legend {
7 | display: flex;
8 | flex-direction: column;
9 |
10 | background-color: azure;
11 | border-style: groove;
12 | opacity: 0.8;
13 | padding: 5px;
14 | margin: 15px;
15 | border-radius: 5px;
16 |
17 | .legend-title {
18 | text-align: left;
19 | margin-bottom: 5px;
20 | font-weight: bold;
21 | font-size: 90%;
22 | }
23 |
24 | .legend-scale {
25 | ul {
26 | margin: 0;
27 | margin-bottom: 5px;
28 | padding: 0;
29 | float: left;
30 | list-style: none;
31 |
32 | li {
33 | font-size: 80%;
34 | list-style: none;
35 | margin-left: 0;
36 | line-height: 18px;
37 | margin-bottom: 2px;
38 | }
39 | }
40 | }
41 |
42 | ul.legend-labels li span {
43 | display: block;
44 | float: left;
45 | height: 16px;
46 | width: 30px;
47 | margin-right: 5px;
48 | margin-left: 0;
49 | border: 1px solid #999;
50 | }
51 |
52 | .legend-source {
53 | font-size: 70%;
54 | color: #999;
55 | clear: both;
56 | }
57 |
58 | a {
59 | color: #777;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/reducers/popover.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
2 |
3 | import { RootState } from '../store/store';
4 | import { PopoverType, PopoverData } from '../models/popoversData';
5 |
6 | export interface PopoversState {
7 | [PopoverType.Warning]: PopoverData;
8 | }
9 |
10 | const initialState: PopoversState = {
11 | [PopoverType.Warning]: {
12 | type: PopoverType.Warning,
13 | isVisible: false,
14 | }
15 | };
16 |
17 | export const popoversDataSlice = createSlice({
18 | name: 'popovers',
19 | initialState,
20 | reducers: {
21 | showPopover: (state: PopoversState, action: PayloadAction) => {
22 | const popoverType: PopoverType = action.payload.type;
23 | state[popoverType] = action.payload;
24 | },
25 | hidePopover: (state: PopoversState, action: PayloadAction) => {
26 | const popoverType = action.payload;
27 |
28 | state[popoverType].isVisible = false;
29 | state[popoverType].target = undefined;
30 | }
31 | },
32 | });
33 |
34 | export const {
35 | showPopover,
36 | hidePopover,
37 | } = popoversDataSlice.actions;
38 |
39 | export const selectWarningPopoverData = (state: RootState) => state.popovers[PopoverType.Warning];
40 |
41 | export default popoversDataSlice.reducer;
42 |
--------------------------------------------------------------------------------
/.github/workflows/deploy_production.yml:
--------------------------------------------------------------------------------
1 | name: Deploy app to production
2 |
3 | on:
4 | release:
5 | types:
6 | - published
7 |
8 | env:
9 | AZURE_WEBAPP_NAME: ssir
10 | NODE_VERSION: '12.x'
11 |
12 | jobs:
13 | build-and-deploy:
14 | name: Build and Deploy
15 | runs-on: ubuntu-latest
16 | steps:
17 | - uses: actions/checkout@master
18 | - name: Use Node.js ${{ env.NODE_VERSION }}
19 | uses: actions/setup-node@v1
20 | with:
21 | node-version: ${{ env.NODE_VERSION }}
22 | - name: npm install, build, and test
23 | env:
24 | REACT_APP_MAP_SUBSCRIPTION_KEY: ${{ secrets.REACT_APP_MAP_SUBSCRIPTION_KEY }}
25 | run: |
26 | # Build and test the project, then
27 | # deploy to Azure Web App.
28 | npm install
29 | npm run build
30 | npm run test --if-present
31 | - name: Archive build artifacts
32 | uses: actions/upload-artifact@v1
33 | with:
34 | name: build
35 | path: build
36 | - name: 'Cleanup before deployment'
37 | run: rm -rf node_modules
38 | - name: 'Deploy to Azure WebApp'
39 | uses: azure/webapps-deploy@v2
40 | with:
41 | app-name: ${{ env.AZURE_WEBAPP_NAME }}
42 | publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
43 |
--------------------------------------------------------------------------------
/livemaps-api/Models/FloorInfo.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Text;
4 |
5 | namespace ssir.api.Models
6 | {
7 | public class FloorInfo
8 | {
9 | public string Region { get; set; }
10 | public string RegionId
11 | {
12 | get
13 | {
14 | return Region.ToLower().Replace(" ", "");
15 | }
16 | }
17 | public string Campus { get; set; }
18 | public string CampusId
19 | {
20 | get
21 | {
22 | return $"{RegionId}/{Campus}".ToLower().Replace(" ", "");
23 | }
24 | }
25 | public string Building { get; set; }
26 | public string BuildingId
27 | {
28 | get
29 | {
30 | return $"{CampusId}/{Building}".ToLower().Replace(" ", "");
31 | }
32 | }
33 |
34 | public double Area { get; set; }
35 | public double Latitude { get; set; }
36 | public double Longitude { get; set; }
37 | public string Floor { get; set; }
38 | public string FloorId
39 | {
40 | get
41 | {
42 | return $"{BuildingId}/{Floor}".ToLower().Replace(" ", "");
43 | }
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/StatsSidebar/SliderChart/SliderChart.tsx:
--------------------------------------------------------------------------------
1 | import './SliderChart.scss';
2 |
3 | import React from 'react';
4 | import { Bar, BarChart as BarChartRecharts, ResponsiveContainer, XAxis, YAxis } from 'recharts';
5 |
6 | export interface SliderChartProps {
7 | value: number;
8 | unit?: string;
9 | minValue: number;
10 | maxValue: number;
11 | color: string;
12 | }
13 |
14 | const BAR_WIDTH = 14;
15 | const CHART_HEIGHT = 50;
16 |
17 | export const SliderChart: React.FC = (props) => {
18 | return (
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
33 |
34 |
35 |
36 |
37 |
38 | {`${props.value} ${props.unit}`}
39 |
40 |
51 |
52 | {title}
53 |
54 |
55 |
56 |
57 |
58 | {body}
59 | ;
60 |
61 |
62 | );
63 | }
64 |
65 | export default Popover;
66 |
--------------------------------------------------------------------------------
/src/components/StatsSidebar/LineChart/LineChart.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | CartesianGrid,
4 | Line,
5 | LineChart as LineChartRecharts,
6 | ResponsiveContainer,
7 | Tooltip,
8 | XAxis,
9 | YAxis,
10 | } from 'recharts';
11 |
12 | import { getChartColorByIndex } from '../../../utils/colorUtils';
13 |
14 | export interface LineChartProps {
15 | data: {
16 | x: string;
17 | y: { [key: string]: number | undefined; };
18 | }[];
19 | names: { [key: string]: string; };
20 | minValue?: number | null;
21 | maxValue?: number | null;
22 | colors?: { [key: string]: string | undefined; };
23 | }
24 |
25 | export const LineChart: React.FC = ({ data, names, colors = {}, minValue, maxValue }) => {
26 | let domain: [number, number] | undefined;
27 |
28 | if (minValue != null && maxValue != null) {
29 | domain = [minValue, maxValue];
30 | }
31 |
32 | return (
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | {Object.keys(names).map((key: string, index: number) => (
41 |
47 | ))}
48 |
49 |
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/src/components/Legend/Legend.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSelector } from 'react-redux';
3 |
4 | import { getZoomByLocationType } from '../../utils/locationsUtils';
5 | import { LocationType } from '../../models/locationsData';
6 | import { selectLayerVisibility } from '../../reducers/layersData';
7 | import { selectMapZoomLevel } from '../../reducers/map';
8 |
9 | import './Legend.scss';
10 |
11 | const DEFAULT_ZOOM_THRESHOLD = getZoomByLocationType(LocationType.Floor);
12 |
13 | interface LegendProps {
14 | layerId: string
15 | title: string;
16 | items: Record;
17 | zoomThreshold?: number;
18 | }
19 |
20 | const Legend: React.FC = ({
21 | layerId,
22 | title,
23 | items,
24 | zoomThreshold = DEFAULT_ZOOM_THRESHOLD,
25 | }) => {
26 | const zoomLevel = useSelector(selectMapZoomLevel);
27 | const isLayerVisible = useSelector(selectLayerVisibility(layerId));
28 |
29 | const isLegendVisible = isLayerVisible && zoomLevel && zoomLevel >= zoomThreshold;
30 | if (!isLegendVisible) {
31 | return null;
32 | }
33 |
34 | return (
35 |
36 |
37 |
38 | {title}
39 |
40 |
41 |
42 |
43 | {
44 | Object.entries(items).map(([color, text]) => -
45 |
46 | {text}
47 |
48 | )
49 | }
50 |
51 |
52 |
53 |
36 | {
37 | mapService.getLayersInfo().map((layer) => {
38 | const { id, name } = layer;
39 | return dispatch(setLayerVisibility({ id, isVisible }))}
43 | >
44 | {layer.getChildren && }
45 |
46 | })
47 | }
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/models/sidebar.ts:
--------------------------------------------------------------------------------
1 | export interface LabelData {
2 | type: 'label';
3 | data: {
4 | name: string;
5 | value?: any;
6 | };
7 | }
8 |
9 | export interface LineChartData {
10 | type: 'line';
11 | data: {
12 | x: string;
13 | y: { [key: string]: number | undefined; };
14 | }[];
15 | colors?: { [key: string]: string | undefined; };
16 | names: { [key: string]: string; };
17 | minValue?: number | null;
18 | maxValue?: number | null;
19 | }
20 |
21 | export interface PieChartData {
22 | type: 'pie';
23 | data: {
24 | name: string;
25 | value: number;
26 | }[];
27 | }
28 |
29 | export interface BarChartData {
30 | type: 'bar' | 'verticalBar',
31 | data: {
32 | name: string;
33 | value: number;
34 | }[];
35 | }
36 |
37 | export interface SliderChartData {
38 | type: 'slider',
39 | data: [{
40 | value: number;
41 | unit?: string;
42 | minValue: number;
43 | maxValue: number;
44 | color: string;
45 | }];
46 | }
47 |
48 | export interface AlertData {
49 | type: 'alert';
50 | data: {
51 | name: string;
52 | url?: string;
53 | iconName?: string;
54 | iconColor?: string;
55 | }
56 | }
57 |
58 | export interface SliderControlData {
59 | type: 'slider_control',
60 | data: {
61 | name: string;
62 | value?: number;
63 | minValue: number;
64 | maxValue: number;
65 | disabled?: boolean;
66 | onSave?(newValue: number): void;
67 | }
68 | }
69 |
70 | export type SidebarItemData = BarChartData | LabelData | AlertData | PieChartData | SliderControlData | SliderChartData | LineChartData;
71 |
72 | export interface SidebarGroup {
73 | id: string;
74 | name: string;
75 | collapsed?: boolean
76 | items: SidebarItemData[];
77 | }
78 |
79 | export type SidebarData = SidebarGroup[];
80 |
81 |
--------------------------------------------------------------------------------
/src/config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * EnsureEnv checks that environment variable with the given name exists and
3 | * returns its value otherwise throws an error. This is needed to make sure the
4 | * app is properly configured with required variables.
5 | * @param envName environment variable name
6 | */
7 | const ensureEnv = (envName: string): string => {
8 | const envValue = process.env[envName];
9 | if (envValue === undefined) {
10 | throw new Error(`Variable ${envName} is required and must be defined`);
11 | }
12 |
13 | return envValue;
14 | }
15 |
16 | export const subscriptionKey = ensureEnv("REACT_APP_MAP_SUBSCRIPTION_KEY");
17 |
18 | const baseUrl = process.env.REACT_APP_API_BASE_URL ?? "http://localhost:3001";
19 |
20 | /**
21 | * Reads URL from an environment and prepends with base URL if it starts with "/"
22 | * otherwise treats URL as full with schema and hostname and just returns it.
23 | * @param envName Environment variable name to read URL from
24 | * @param defaultVal default value if variable is not defined
25 | */
26 | const getUrl = (envName: string, defaultVal : string): string => {
27 | const url = process.env[envName] ?? defaultVal ;
28 | return url.startsWith("/") ? baseUrl + url : url;
29 | };
30 |
31 | // {locationPath} vill be replaced with location's path in sitemap, e.g. /europe/southcampus/bldg1
32 | export const sitemapUrl = getUrl("REACT_APP_SITEMAP_URL", "/sitemap");
33 | export const roomsDataUrl = getUrl("REACT_APP_ROOMS_DATA_URL", "/roomdata/{locationPath}");
34 | export const sensorsDataUrl = getUrl("REACT_APP_SENSORDATA_URL", "/state/{locationPath}");
35 | export const sidebarDataUrl = getUrl("REACT_APP_SIDEBAR_DATA_URL", "/sidebar/{locationPath}");
36 | export const warningsDataUrl = getUrl("REACT_APP_WARNINGS_DATA_URL", "/faults/{locationPath}");
37 |
38 | export const trackerHostname = process.env.REACT_APP_TRACKER_HOSTNAME ?? "localhost:3001";
39 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import './App.scss';
2 |
3 | import React, { useEffect } from 'react';
4 | import { initializeIcons } from '@uifabric/icons';
5 | import { useDispatch, useSelector } from 'react-redux';
6 | import { useHistory, useLocation } from 'react-router-dom';
7 |
8 | import AppHeader from './components/AppHeader/AppHeader';
9 | import Map from './components/Map/Map';
10 | import SideNavBar from './components/SideNavBar/SideNavBar';
11 | import { StatsSidebar } from './components/StatsSidebar/StatsSidebar';
12 | import {
13 | fetchLocationsInfo,
14 | selectLocationsDataLoaded,
15 | updateCurrentLocation,
16 | } from './reducers/locationData';
17 | import { fetchUserInfo } from './reducers/user';
18 |
19 | initializeIcons();
20 |
21 | const App: React.FC = () => {
22 | const dispatch = useDispatch();
23 | const history = useHistory();
24 | const { pathname: path } = useLocation();
25 |
26 | useEffect(() => {
27 | dispatch(fetchUserInfo());
28 | dispatch(fetchLocationsInfo(path, history));
29 | // Don't add `path` to deps as we want to trigger this
30 | // effect only once, not on every location change.
31 | // eslint-disable-next-line react-hooks/exhaustive-deps
32 | }, [dispatch, history]);
33 |
34 |
35 | const isLoaded = useSelector(selectLocationsDataLoaded);
36 | useEffect(() => {
37 | if (isLoaded) {
38 | // Only parse path and update current location when locations data has
39 | // been loaded otherwise there is a race condition between this update
40 | // and update triggered by`fetchLocationsInfo`
41 | dispatch(updateCurrentLocation(path, history));
42 | }
43 | }, [dispatch, history, isLoaded, path])
44 |
45 | return (
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
22 |
23 |
24 | {name}
25 |
26 | {disabled ? "-" : internalValue}
27 |
28 |
29 |
41 | onSave && onSave(internalValue)}
45 | title={`Save ${name}`}
46 | ariaLabel={`Save ${name}`}
47 | />
48 | setInternalValue(initialValue)}
52 | title={`Discard ${name} changes`}
53 | ariaLabel={`Discard ${name} changes`}
54 | />
55 |
56 |
|
43 | );
44 | };
45 |
46 | export const PieChart: React.FC = ({ data }) => {
47 | const totalValue: number = data.reduce((accum, { value }) => accum + value, 0);
48 |
49 | const Total = (props: any) => {
50 | const { width, height } = props;
51 | return (
52 |
53 | {totalValue}
54 | Total
55 |
56 | );
57 | }
58 |
59 | const legendItems = data.map(({ name, value }, idx) => {
60 | return {
61 | key: idx,
62 | name,
63 | value,
64 | color: getChartColorByIndex(idx)
65 | }
66 | })
67 |
68 | return (
69 |
70 |
71 | {legendItems.map(item => )}
72 |
73 |
74 |
85 | {data.map(renderCell)}
86 |
87 |
88 |
89 |
72 |
73 | setSearchValue("")}
78 | onChange={(e: any, newValue?: string) => setSearchValue(newValue ?? "")}
79 | />
80 |
81 | {defaultRender && defaultRender(props)}
82 |
44 |
45 |
53 |
54 | setFavoritesVisibility(!isFavoritesVisible)}
62 | ariaLabel="Favorites"
63 | title={isCollapsed ? 'Favorites' : undefined}
64 | />
65 |
66 | setRoomSearchVisibility(!isRoomSearchVisible)}
74 | ariaLabel="Search room"
75 | title={isCollapsed ? 'Search room' : undefined}
76 | />
77 |
78 |
79 |
setLayersSwitcherVisibility(!isLayersSwitcherVisible)}
84 | text={isCollapsed ? undefined : 'Settings'}
85 | title={isCollapsed ? 'Settings' : undefined}
86 | />
87 |
88 |
89 |
97 |
98 |
99 | {isFavoritesVisible && (
100 | setFavoritesVisibility(false)}
103 | />
104 | )}
105 |
106 | {isRoomSearchVisible && (
107 | setRoomSearchVisibility(false)}
110 | />
111 | )}
112 |
113 | {isLayersSwitcherVisible && (
114 | setLayersSwitcherVisibility(false)}
117 | />
118 | )}
119 |
22 |
23 |
24 |
33 |
34 |
35 |
36 | );
37 | };
38 |
39 | const GroupHeaderShimmer = () => {
40 | return (
41 |
42 |
43 |
44 |
50 |
51 |
52 |
53 | );
54 | };
55 |
56 | const LegendItemShimmer = () => {
57 | return (
58 |
59 |
67 |
68 |
69 |
70 |
78 |
79 | );
80 | };
81 |
82 | const ChartLegendShimmer = () => {
83 | return (
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | );
96 | };
97 |
98 | const ChartShimmer = () => {
99 | return (
100 |
101 |
102 |
103 |
112 |
113 |
114 |
115 | )
116 | }
117 |
118 | export const StatsSidebarShimmer = React.memo(() => {
119 | const labels = [];
120 |
121 | for (let i = 0; i < 5; i++){
122 | labels.push();
123 | }
124 |
125 | return (
126 |
131 |
132 | {labels}
133 |
134 |
135 |
136 |
137 |
138 | }
139 | />
140 | );
141 | });
142 |
--------------------------------------------------------------------------------
/src/reducers/sensors.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
2 |
3 | import { AppThunk, RootState } from '../store/store';
4 | import { LoadingState } from '../models/loadingState';
5 | import { sensorsDataUrl } from '../config';
6 |
7 | interface SensorData {
8 | id: string;
9 | name: string;
10 | sensorClass: string;
11 | roomId: string;
12 | readings: {
13 | name: string;
14 | value: string;
15 | updatedAt: string;
16 | }[]
17 | }
18 |
19 | export interface SensorsState {
20 | byLocationAndRoom: { [locId: string]: SensorData[] | undefined };
21 | loadingState: LoadingState;
22 | };
23 |
24 | const initialState: SensorsState = {
25 | byLocationAndRoom: {},
26 | loadingState: LoadingState.Loading,
27 | };
28 |
29 | interface SetSensorsDataPayload {
30 | path: string;
31 | data: any;
32 | loadingState: LoadingState;
33 | }
34 |
35 | const parseSensorData = (path: string, rawData: any): { [locId: string]: SensorData[] } => {
36 | const result: { [locId: string]: SensorData[] } = {};
37 |
38 | try {
39 | const roomsDict = rawData?.Value?.Rooms;
40 | if (roomsDict) {
41 | Object.keys(roomsDict).forEach(roomId => {
42 | const locId = `${path}/${roomId}`;
43 | const sensors = Object.values(roomsDict[roomId].Devices)
44 | .map((rawDevice: any): SensorData => ({
45 | id: rawDevice.DeviceId,
46 | roomId,
47 | sensorClass: rawDevice.EquipmentClass,
48 | name: rawDevice.Equipment,
49 | readings: rawDevice.Tags.map((tag: any) => ({
50 | name: tag.Tag,
51 | value: tag.Value,
52 | updatedAt: tag.Timestamp,
53 | })),
54 | }));
55 |
56 | result[locId] = sensors;
57 | })
58 | }
59 | } catch (error) {
60 | // Do nothing, just return the default value
61 | console.error("Failed to parse sensor data");
62 | }
63 |
64 | return result;
65 | }
66 |
67 | export const sensorsSlice = createSlice({
68 | name: 'temperature',
69 | initialState,
70 | reducers: {
71 | setSensorsData: (state: SensorsState, action: PayloadAction) => {
72 | const { data, path, loadingState } = action.payload;
73 | const sensorData = parseSensorData(path, data);
74 |
75 | return {
76 | ...state,
77 | loadingState,
78 | byLocationAndRoom: {
79 | ...state.byLocationAndRoom,
80 | ...sensorData,
81 | },
82 | };
83 | },
84 | setLoadingState: (state: SensorsState, action: PayloadAction) => ({
85 | ...state,
86 | loadingState: action.payload,
87 | }),
88 | },
89 | });
90 |
91 | const { setSensorsData, setLoadingState } = sensorsSlice.actions;
92 |
93 | export default sensorsSlice.reducer;
94 |
95 | export const selectSensorsLoadingState = (state: RootState): LoadingState => state.sensors.loadingState;
96 |
97 | export const selectCurrentSensorsData = (state: RootState): SensorData[] | undefined => {
98 | const currentLocation = state.locationData.current.location;
99 | const currentIndoorLocation = state.indoor.currentLocation;
100 |
101 | if (currentLocation === undefined || currentIndoorLocation === undefined) {
102 | return;
103 | }
104 |
105 | const normalizedLocation = currentIndoorLocation.name.replace('-', '');
106 | const key = `${currentLocation.id}/${normalizedLocation}`;
107 | return state.sensors.byLocationAndRoom[key];
108 | }
109 |
110 | let fetchSensorsStateData = async (locationPath: string): Promise => {
111 | const url = sensorsDataUrl.replace("{locationPath}", locationPath);
112 | const response: Response = await fetch(url);
113 |
114 | if (response.ok) {
115 | const json = await response.json();
116 | return json ?? {};
117 | } else {
118 | throw new Error();
119 | }
120 | }
121 |
122 | export const fetchSensors = (path: string): AppThunk => async dispatch => {
123 | dispatch(setLoadingState(LoadingState.Loading));
124 |
125 | try {
126 | const data = await fetchSensorsStateData(path);
127 | dispatch(setSensorsData({ path, data, loadingState: LoadingState.Ready }));
128 | } catch {
129 | console.error("Failed to get sensors info");
130 | dispatch(setSensorsData({ path, data: {}, loadingState: LoadingState.Error }));
131 | };
132 | };
133 |
--------------------------------------------------------------------------------
/livemaps-api/APIFunctions/Config.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.IO;
3 | using System.Threading.Tasks;
4 | using Microsoft.AspNetCore.Mvc;
5 | using Microsoft.Azure.WebJobs;
6 | using Microsoft.Azure.WebJobs.Extensions.Http;
7 | using Microsoft.AspNetCore.Http;
8 | using Microsoft.Extensions.Logging;
9 | using Newtonsoft.Json;
10 | using System.ComponentModel;
11 | using System.Text;
12 | using ssir.api.Services;
13 | using System.Collections.Generic;
14 | using ssir.api.Models;
15 | using Microsoft.WindowsAzure.Storage.Blob;
16 | using System.Linq.Expressions;
17 | using System.Linq;
18 | using System.Net.Http;
19 | using ssir.api.Models.Atlas;
20 | using System.Net;
21 |
22 | namespace ssir.api
23 | {
24 | public static class Config
25 | {
26 | [FunctionName("Config")]
27 | public static async Task Run(
28 | [HttpTrigger(AuthorizationLevel.Function, "get", Route = "config/{region}/{campus}/{building}")] HttpRequest req,
29 | [Blob("shared", Connection = "AzureWebJobsStorage")] CloudBlobContainer container,
30 | string region,
31 | string campus,
32 | string building,
33 | ILogger log)
34 | {
35 | bool prerequisites = true;
36 | var errors = new StringBuilder();
37 |
38 | var blobDataService = new BlobDataService();
39 |
40 | var atlasConfigFile = Environment.GetEnvironmentVariable("AtlasConfigFile") ?? "atlasConfig.json";
41 |
42 | if (string.IsNullOrEmpty(building))
43 | {
44 | prerequisites = false;
45 | errors.Append("Required query {building} was not defined");
46 | }
47 |
48 | var result = "";
49 | if (prerequisites)
50 | {
51 | try
52 | {
53 | var config = await blobDataService.ReadBlobData(container, atlasConfigFile);
54 | var buildingCfg = config.FirstOrDefault(cfg => cfg.BuildingId.ToLower() == $"{region}/{campus}/{building}".ToLower());
55 | if (buildingCfg != null)
56 | result = JsonConvert.SerializeObject(buildingCfg);
57 |
58 | }
59 | catch (Exception ex)
60 | {
61 | log.LogError(ex.Message);
62 | }
63 | }
64 | else
65 | {
66 | log.LogError(errors.ToString());
67 | return new NotFoundResult();
68 | }
69 |
70 | return new OkObjectResult(result);
71 | }
72 |
73 | private static async Task> FetchFeaturesFromAtlas(string atlasDataSetId, string atlasSubscriptionKey)
74 | {
75 | List features = new List();
76 | var limit = 50;
77 | string url = $"https://atlas.microsoft.com/wfs/datasets/{atlasDataSetId}/collections/unit/items?api-version=1.0&limit={limit}&subscription-key={atlasSubscriptionKey}";
78 | for (int i = 0; ; i++)
79 | {
80 | using (var client = new HttpClient())
81 | {
82 | HttpRequestMessage requestMessage = new HttpRequestMessage(HttpMethod.Get, url);
83 | var response = await client.SendAsync(requestMessage);
84 |
85 | if (response.StatusCode != HttpStatusCode.OK)
86 | break;
87 |
88 | var result = await response.Content.ReadAsStringAsync();
89 |
90 | var featureCollection = JsonConvert.DeserializeObject(result);
91 | features.AddRange(featureCollection.Features);
92 |
93 | if (featureCollection.NumberReturned < limit)
94 | break;
95 | var nextLink = featureCollection.links.FirstOrDefault(f => f.rel == "next");
96 | if (nextLink == null)
97 | break;
98 | else
99 | url = nextLink.href + $"&subscription-key={atlasSubscriptionKey}";
100 | }
101 | }
102 |
103 | return features;
104 | }
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/src/components/SearchCallout/SearchCallout.tsx:
--------------------------------------------------------------------------------
1 | import './SearchCallout.scss';
2 |
3 | import Fuse from 'fuse.js';
4 | import React from 'react';
5 | import {
6 | Callout,
7 | DefaultButton,
8 | DirectionalHint,
9 | IButtonProps,
10 | SearchBox,
11 | TooltipHost,
12 | TooltipOverflowMode,
13 | } from '@fluentui/react';
14 |
15 | import NoResults from '../NoResults/NoResults';
16 |
17 | type defaultItemRender = (props?: IButtonProps) => React.ReactNode;
18 |
19 | export interface SearchCalloutProps {
20 | items: T[];
21 | selectedItem?: T;
22 | target?: string | Element | MouseEvent | React.RefObject;
23 | searchOptions?: Fuse.IFuseOptions;
24 | groupName?: string;
25 | directionalHint?: DirectionalHint;
26 | onItemClick?: (item: T) => void;
27 | onDismiss?: () => void;
28 | getItemText?: (item: T) => string;
29 | renderItem?: (item: T, defaultRender: defaultItemRender) => React.ReactNode;
30 | }
31 |
32 | export const SearchCallout: (props: SearchCalloutProps) => React.ReactElement> | null = ({
33 | items,
34 | selectedItem,
35 | target,
36 | searchOptions,
37 | groupName,
38 | directionalHint,
39 | onItemClick,
40 | onDismiss,
41 | getItemText,
42 | renderItem,
43 | }) => {
44 | const [searchValue, setSearchValue] = React.useState('');
45 |
46 | if (!items?.length) {
47 | return null;
48 | }
49 |
50 | let filteredItems = items;
51 |
52 | if (searchValue) {
53 | const fuse = new Fuse(
54 | items,
55 | searchOptions,
56 | );
57 |
58 | filteredItems = fuse.search(searchValue).map((item: Fuse.FuseResult) => item.item);
59 | }
60 |
61 | const onFormSubmit = (event: React.FormEvent) => {
62 | event.preventDefault();
63 |
64 | if (!filteredItems) {
65 | return;
66 | }
67 |
68 | if (onItemClick) {
69 | onItemClick(filteredItems[0]);
70 | }
71 |
72 | setSearchValue('');
73 | };
74 |
75 | const renderDefaultItem = (item: any, props?: IButtonProps) => {
76 | const text = getItemText ? getItemText(item) : undefined;
77 |
78 | return (
79 | {
83 | if (onItemClick) {
84 | onItemClick(item);
85 | }
86 |
87 | setSearchValue('');
88 | }}
89 | {...props}
90 | >
91 |
96 | {text}
97 |
98 |
99 | {props?.children}
100 |
101 | );
102 | };
103 |
104 | const renderSearchItem = (item: any): React.ReactNode => {
105 | if (renderItem) {
106 | return renderItem(item, (props?: IButtonProps) => renderDefaultItem(item, props));
107 | }
108 |
109 | return renderDefaultItem(item);
110 | };
111 |
112 | return (
113 |
120 |
153 |
154 | )
155 | };
156 |
--------------------------------------------------------------------------------
/src/services/layers/FloorsLayer.ts:
--------------------------------------------------------------------------------
1 | import * as turf from '@turf/helpers';
2 | import transformScale from '@turf/transform-scale';
3 | import { data as atlasData, layer as atlasLayer, Map, source as atlasSource } from 'azure-maps-control';
4 |
5 | import { buildingPolygon } from '../../mockData/buildingData';
6 | import { getZoomByLocationType } from '../../utils/locationsUtils';
7 | import { LocationData, LocationType } from '../../models/locationsData';
8 | import { Layer, LayerType } from './Layer';
9 |
10 | const getOffsetByFloorNumber = (
11 | floorNumber: number,
12 | bearing: number = 0,
13 | pitch: number = 0
14 | ) => [pitch / 1000000 * 7 * floorNumber, pitch / 1000000 * 4 * floorNumber];
15 |
16 | export class FloorsLayer implements Layer {
17 | public readonly type: LayerType = LayerType.Floors;
18 |
19 | private polygonData: [number, number][] = buildingPolygon;
20 | private map?: Map;
21 | private dataSources: atlasSource.DataSource[] = [];
22 | private layers: atlasLayer.PolygonLayer[] = [];
23 | private isLayerOn: boolean = false;
24 | private location?: LocationData;
25 |
26 | constructor(
27 | public readonly id: string,
28 | public readonly name: string,
29 | ) {}
30 |
31 | get isVisible() {
32 | return this.isLayerOn;
33 | }
34 |
35 | initialize(map: Map) {
36 | this.map = map;
37 | this.update();
38 | }
39 |
40 | setVisibility(isVisible: boolean) {
41 | if (this.isLayerOn === isVisible) {
42 | return;
43 | }
44 |
45 | this.isLayerOn = isVisible;
46 | this.update();
47 | }
48 |
49 | setLocation(currentLocation: LocationData) {
50 | const newLocation = currentLocation.parent;
51 |
52 | if (this.location?.id === newLocation?.id) {
53 | return;
54 | }
55 |
56 | this.location = newLocation;
57 |
58 | if (this.isVisible) {
59 | this.update();
60 | }
61 | }
62 |
63 | update() {
64 | if (!this.map) {
65 | return;
66 | }
67 |
68 | this.removeLayers();
69 |
70 | if (!this.isVisible || this.location?.type !== LocationType.Building) {
71 | return;
72 | }
73 |
74 | const floorCount: number = this.location.items?.length ?? 0;
75 |
76 | if (floorCount < 1) {
77 | return;
78 | }
79 |
80 | const minZoom: number = getZoomByLocationType(LocationType.Floor);
81 |
82 | for (let ordinalNumber = 0; ordinalNumber < floorCount; ordinalNumber++) {
83 | const dataSource = new atlasSource.DataSource();
84 | this.dataSources.push(dataSource);
85 | this.map.sources.add(dataSource);
86 |
87 | const layer = new atlasLayer.PolygonLayer(
88 | dataSource,
89 | undefined,
90 | {
91 | fillColor: 'gray',
92 | minZoom,
93 | fillOpacity: 0.5,
94 | }
95 | );
96 |
97 | this.layers.push(layer);
98 | this.map.layers.add(layer);
99 | }
100 |
101 | this.updateCoordinates();
102 |
103 | this.map.events.add('pitch', this.updateCoordinates);
104 | }
105 |
106 | private removeLayers() {
107 | if (!this.map || !this.dataSources.length) {
108 | return;
109 | }
110 |
111 | this.map.events.remove('pitch', this.updateCoordinates);
112 | this.map.layers.remove(this.layers);
113 | this.map.sources.remove(this.dataSources);
114 | this.dataSources.forEach(dataSource => {
115 | dataSource.clear();
116 | dataSource.dispose();
117 | });
118 |
119 | this.dataSources = [];
120 | this.layers = [];
121 | }
122 |
123 | private updateCoordinates = () => {
124 | if (!this.map || !this.dataSources.length) {
125 | return;
126 | }
127 |
128 | const camera = this.map.getCamera();
129 |
130 | const polygon = turf.polygon([this.polygonData]);
131 |
132 | for (let ordinalNumber = 0; ordinalNumber < this.dataSources.length; ordinalNumber++) {
133 | const rotatedPolygon = transformScale(polygon, 1 + ordinalNumber * 0.16);
134 | const offset = getOffsetByFloorNumber(ordinalNumber, camera.bearing, camera.pitch);
135 | this.dataSources[ordinalNumber].clear();
136 | this.dataSources[ordinalNumber]?.add(new atlasData.Polygon(
137 | rotatedPolygon.geometry!.coordinates[0].map((position) => new atlasData.Position(
138 | position[0] + offset[0], position[1] + offset[1])
139 | )
140 | ));
141 | }
142 | }
143 |
144 | dispose() {
145 | this.removeLayers();
146 | }
147 | }
148 |
--------------------------------------------------------------------------------
/src/reducers/warnings.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
2 |
3 | import { AppThunk, RootState } from '../store/store';
4 | import { WarningData, WarningsByLayers, WarningsByLocation, WarningsByRooms } from '../models/warningsData';
5 | import { mapService } from '../services/mapService';
6 | import { LocationType } from '../models/locationsData';
7 | import { LoadingState } from '../models/loadingState';
8 | import { warningsDataUrl } from '../config';
9 |
10 | export const isWarningsDataValid = (data: any): data is WarningsByLocation => {
11 | try {
12 | for (const locationId in data) {
13 | const warningsByRooms: WarningsByRooms = data[locationId];
14 |
15 | for (const roomId in warningsByRooms) {
16 | const warningsByLayers: WarningsByLayers | undefined = warningsByRooms[roomId];
17 |
18 | for (const layerId in warningsByLayers) {
19 | const warnings: WarningData[] | undefined = warningsByLayers[layerId];
20 | const isValid: boolean = !!warnings && warnings.every((warning: WarningData) => (
21 | (!warning.title || typeof warning.title === 'string')
22 | && (!warning.description || typeof warning.description === 'string')
23 | && (!warning.url || typeof warning.url === 'string')
24 | && (!warning.position || (
25 | typeof warning.position.latitude === 'number' && typeof warning.position.longitude === 'number')
26 | )
27 | ));
28 |
29 | if (!isValid) {
30 | return false;
31 | }
32 | }
33 | }
34 | }
35 | return true;
36 | } catch {
37 | return false;
38 | }
39 | };
40 |
41 | export interface WarningsState {
42 | data: WarningsByLocation;
43 | loadingState: LoadingState;
44 | };
45 |
46 | const initialState: WarningsState = {
47 | data: {},
48 | loadingState: LoadingState.Loading,
49 | };
50 |
51 | interface SetWarningsPayload {
52 | data: WarningsByLocation;
53 | loadingState: LoadingState;
54 | }
55 |
56 | export const warningsSlice = createSlice({
57 | name: 'warnings',
58 | initialState,
59 | reducers: {
60 | setWarnings: (state: WarningsState, action: PayloadAction) => {
61 | const { data, loadingState } = action.payload;
62 |
63 | return {
64 | ...state,
65 | data,
66 | loadingState,
67 | };
68 | },
69 | },
70 | });
71 |
72 | const {
73 | setWarnings,
74 | } = warningsSlice.actions;
75 |
76 | export const selectWarningsLoadingState = (state: RootState) => state.warnings.loadingState;
77 |
78 | export const selectWarningsData = (state: RootState) => state.warnings.data;
79 |
80 | export default warningsSlice.reducer;
81 |
82 | const fetchWarningsData = async (locationId: string) => {
83 | const url = warningsDataUrl.replace("{locationPath}", locationId);
84 | const response: Response = await fetch(url);
85 |
86 | if (response.ok) {
87 | const json = await response.json();
88 | return json ?? {};
89 | } else {
90 | throw new Error();
91 | }
92 | }
93 |
94 | export const fetchWarningsInfo = (): AppThunk => async (dispatch, getState) => {
95 | const { locationData: { current: { location: currentLocation } } } = getState();
96 | mapService.updateWarningsData({});
97 |
98 | let locationId: string = '';
99 |
100 | if (currentLocation.type === LocationType.Building) {
101 | locationId = currentLocation.id;
102 | } else if (currentLocation.type === LocationType.Floor && currentLocation.parent?.id) {
103 | const parentLocation = currentLocation.parent;
104 |
105 | if (parentLocation) {
106 | locationId = parentLocation.id;
107 | }
108 | }
109 |
110 | if (!locationId) {
111 | dispatch(setWarnings({ data: {}, loadingState: LoadingState.Ready }));
112 | return;
113 | }
114 |
115 | dispatch(setWarnings({ data: {}, loadingState: LoadingState.Loading }));
116 |
117 | try {
118 | const warningsByLocation: any = await fetchWarningsData(locationId);
119 |
120 | if (isWarningsDataValid(warningsByLocation)) {
121 | dispatch(setWarnings({ data: warningsByLocation, loadingState: LoadingState.Ready }));
122 | mapService.updateWarningsData(warningsByLocation);
123 | } else {
124 | throw new Error('Warnings data is not valid');
125 | }
126 | } catch (e) {
127 | console.error(e.message ?? 'Failed to get warnings info');
128 | dispatch(setWarnings({ data: {}, loadingState: LoadingState.Error }));
129 | };
130 | };
131 |
--------------------------------------------------------------------------------
/src/mockData/buildingData.ts:
--------------------------------------------------------------------------------
1 | export const buildingPolygon: [number, number][] = [
2 | [
3 | -122.13686051087231,
4 | 47.64804650548146
5 | ],
6 | [
7 | -122.13686075903941,
8 | 47.648046501089375
9 | ],
10 | [
11 | -122.13686034067604,
12 | 47.648035706887065
13 | ],
14 | [
15 | -122.13670420411449,
16 | 47.648038470103195
17 | ],
18 | [
19 | -122.13670419761537,
20 | 47.64803830240588
21 | ],
22 | [
23 | -122.13669811437239,
24 | 47.648038410059343
25 | ],
26 | [
27 | -122.13669768954347,
28 | 47.64802744815912
29 | ],
30 | [
31 | -122.13669744137644,
32 | 47.648027452550849
33 | ],
34 | [
35 | -122.13668044836744,
36 | 47.647588976523053
37 | ],
38 | [
39 | -122.13668069653238,
40 | 47.647588972131345
41 | ],
42 | [
43 | -122.13668027820975,
44 | 47.647578177927514
45 | ],
46 | [
47 | -122.13652414300228,
48 | 47.647580940898827
49 | ],
50 | [
51 | -122.13652413650377,
52 | 47.647580773201483
53 | ],
54 | [
55 | -122.13651805331357,
56 | 47.64758088084541
57 | ],
58 | [
59 | -122.13651762852601,
60 | 47.647569918943638
61 | ],
62 | [
63 | -122.13651738036114,
64 | 47.647569923334977
65 | ],
66 | [
67 | -122.13650017661739,
68 | 47.64712596629402
69 | ],
70 | [
71 | -122.13650042478014,
72 | 47.647125961902709
73 | ],
74 | [
75 | -122.13649999999998,
76 | 47.647115
77 | ],
78 | [
79 | -122.13650608313615,
80 | 47.647114892357017
81 | ],
82 | [
83 | -122.13650607663777,
84 | 47.647114724659659
85 | ],
86 | [
87 | -122.13698867202518,
88 | 47.647106183955259
89 | ],
90 | [
91 | -122.13698867852511,
92 | 47.647106351652575
93 | ],
94 | [
95 | -122.13699476165927,
96 | 47.647106243983693
97 | ],
98 | [
99 | -122.13699518654288,
100 | 47.6471172058846
101 | ],
102 | [
103 | -122.13699543470555,
104 | 47.647117201492208
105 | ],
106 | [
107 | -122.1370078868719,
108 | 47.647438462478256
109 | ],
110 | [
111 | -122.1370157293816,
112 | 47.647438323668673
113 | ],
114 | [
115 | -122.13701555257127,
116 | 47.647433762076822
117 | ],
118 | [
119 | -122.13701588520317,
120 | 47.647433756189344
121 | ],
122 | [
123 | -122.13701587650758,
124 | 47.647433531312785
125 | ],
126 | [
127 | -122.13706997597257,
128 | 47.647432573757079
129 | ],
130 | [
131 | -122.13706998468527,
132 | 47.647432798533565
133 | ],
134 | [
135 | -122.13707031733794,
136 | 47.647432792645574
137 | ],
138 | [
139 | -122.13707545602652,
140 | 47.647565363568333
141 | ],
142 | [
143 | -122.13716873556244,
144 | 47.647563712468624
145 | ],
146 | [
147 | -122.13716874206301,
148 | 47.647563880165926
149 | ],
150 | [
151 | -122.1371748252499,
152 | 47.647563772487494
153 | ],
154 | [
155 | -122.13717525017491,
156 | 47.647574734386843
157 | ],
158 | [
159 | -122.13717549833974,
160 | 47.647574729994076
161 | ],
162 | [
163 | -122.13719249548743,
164 | 47.648013205949631
165 | ],
166 | [
167 | -122.13719224732051,
168 | 47.648013210342441
169 | ],
170 | [
171 | -122.13719266575211,
172 | 47.648024004543579
173 | ],
174 | [
175 | -122.13734880224474,
176 | 47.6480212406627
177 | ],
178 | [
179 | -122.13734880874593,
180 | 47.648021408359988
181 | ],
182 | [
183 | -122.13735489198559,
184 | 47.648021300672021
185 | ],
186 | [
187 | -122.13735531695198,
188 | 47.648032262569835
189 | ],
190 | [
191 | -122.13735556511898,
192 | 47.64803225817667
193 | ],
194 | [
195 | -122.13737277640907,
196 | 47.648476215018839
197 | ],
198 | [
199 | -122.13737252823998,
200 | 47.648476219412039
201 | ],
202 | [
203 | -122.13737295321374,
204 | 47.6484871813089
205 | ],
206 | [
207 | -122.13736686992003,
208 | 47.648487288997821
209 | ],
210 | [
211 | -122.13736687642134,
212 | 47.648487456695086
213 | ],
214 | [
215 | -122.13688426837177,
216 | 47.648495998988295
217 | ],
218 | [
219 | -122.13688426187201,
220 | 47.648495831291
221 | ],
222 | [
223 | -122.1368781785763,
224 | 47.648495938954014
225 | ],
226 | [
227 | -122.13687775370597,
228 | 47.648484977055325
229 | ],
230 | [
231 | -122.1368775055368,
232 | 47.64848498144746
233 | ],
234 | [
235 | -122.13686051087231,
236 | 47.64804650548146
237 | ]
238 | ];
--------------------------------------------------------------------------------
/livemaps-api/Services/MapsService.cs:
--------------------------------------------------------------------------------
1 | using Newtonsoft.Json;
2 | using ssir.api.Models.Atlas;
3 | using System;
4 | using System.Collections.Generic;
5 | using System.Linq;
6 | using System.Net;
7 | using System.Net.Http;
8 | using System.Net.Http.Headers;
9 | using System.Text;
10 | using System.Threading.Tasks;
11 |
12 | namespace ssir.api.Services
13 | {
14 | public class MapsService
15 | {
16 | private string subscriptionKey;
17 | private string statesetId;
18 | private string datasetId;
19 | private string azmapsRoot = "https://us.atlas.microsoft.com/featureState/state";
20 |
21 | public MapsService(string subscriptionKey, string datasetId, string statesetId)
22 | {
23 | this.subscriptionKey = subscriptionKey;
24 | this.datasetId = datasetId;
25 | this.statesetId = statesetId;
26 | }
27 |
28 | public async Task UpdateTagState(string stateSetName, string featureId, string newValue)
29 | {
30 | using (var client = new HttpClient())
31 | {
32 | var baseUri = new StringBuilder(azmapsRoot);
33 | if (azmapsRoot[azmapsRoot.Length - 1] != '?')
34 | {
35 | baseUri.Append('?');
36 | }
37 |
38 | var queryParams = new Dictionary();
39 | queryParams.Add("api-version", "1.0");
40 | queryParams.Add("statesetId", statesetId);
41 | queryParams.Add("datasetId", datasetId);
42 | queryParams.Add("featureId", featureId);
43 | queryParams.Add("subscription-key", subscriptionKey);
44 |
45 | foreach (var queryParam in queryParams)
46 | {
47 | baseUri.Append($"{queryParam.Key}={queryParam.Value}&");
48 | }
49 |
50 | baseUri.Remove(baseUri.Length - 1, 1);
51 |
52 |
53 | HttpRequestMessage requestMessage = new HttpRequestMessage(HttpMethod.Post, baseUri.ToString());
54 |
55 | var bodymessage = new
56 | {
57 | states = new[] {
58 | new {
59 | keyName = stateSetName,
60 | value = newValue,
61 | eventTimestamp = DateTime.UtcNow.ToString("yyyy-MM-ddTHH:mm:ss")
62 | }
63 | }
64 | };
65 |
66 | string content = JsonConvert.SerializeObject(bodymessage);
67 |
68 | requestMessage.Content = new StringContent(content);
69 | requestMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
70 |
71 | var response = await client.SendAsync(requestMessage);
72 | var result = await response.Content.ReadAsStringAsync();
73 |
74 | return result;
75 | }
76 | }
77 |
78 | internal static async Task> FetchFeaturesFromAtlas(string atlasDataSetId, string atlasSubscriptionKey)
79 | {
80 | List features = new List();
81 | var limit = 50;
82 | string url = $"https://us.atlas.microsoft.com/wfs/datasets/{atlasDataSetId}/collections/unit/items?api-version=1.0&limit={limit}&subscription-key={atlasSubscriptionKey}";
83 | for (int i = 0; ; i++)
84 | {
85 | using (var client = new HttpClient())
86 | {
87 | HttpRequestMessage requestMessage = new HttpRequestMessage(HttpMethod.Get, url);
88 | var response = await client.SendAsync(requestMessage);
89 |
90 | if (response.StatusCode != HttpStatusCode.OK)
91 | break;
92 |
93 | var result = await response.Content.ReadAsStringAsync();
94 |
95 | var featureCollection = JsonConvert.DeserializeObject(result);
96 | features.AddRange(featureCollection.Features);
97 |
98 | if (featureCollection.NumberReturned < limit)
99 | break;
100 | var nextLink = featureCollection.links.FirstOrDefault(f => f.rel == "next");
101 | if (nextLink == null)
102 | break;
103 | else
104 | url = nextLink.href.Replace("https://atlas", "https://us.atlas") + $"&subscription-key={atlasSubscriptionKey}";
105 | }
106 | }
107 |
108 | return features;
109 | }
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/src/reducers/indoor.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
2 | import { AppThunk, RootState } from '../store/store';
3 | import { subscriptionKey } from '../config';
4 |
5 | import { LocationData, LocationType } from "../models/locationsData";
6 |
7 | interface LocationState {
8 | value?: number;
9 | loaded: boolean;
10 | }
11 |
12 | export interface LocationStates {
13 | [name: string]: LocationState | undefined;
14 | }
15 |
16 | export interface IndoorLocation {
17 | id: string;
18 | name: string;
19 | type: string;
20 | floor?: string;
21 | }
22 |
23 | export interface IndoorState {
24 | currentLocation?: IndoorLocation;
25 | currentStates: LocationStates;
26 | };
27 |
28 | const initialState: IndoorState = {
29 | currentStates: {},
30 | };
31 |
32 | export const indoorSlice = createSlice({
33 | name: 'indoor',
34 | initialState,
35 | reducers: {
36 | setCurrentIndoorLocation: (state: IndoorState, action: PayloadAction) => ({
37 | ...state,
38 | currentLocation: action.payload,
39 | }),
40 | setCurrentLocationStates: (state: IndoorState, action: PayloadAction) => {
41 | return {
42 | ...state,
43 | currentStates: action.payload,
44 | }
45 | },
46 | setCurrentLocationState: (state: IndoorState, action: PayloadAction<[string, LocationState | undefined]>) => {
47 | const [stateName, stateValue] = action.payload;
48 | return {
49 | ...state,
50 | currentStates: {
51 | ...state.currentStates,
52 | [stateName]: stateValue,
53 | },
54 | }
55 | },
56 | resetCurrentIndoorLocation: (state: IndoorState, action: PayloadAction) => ({
57 | ...state,
58 | currentLocation: undefined,
59 | currentStates: {},
60 | }),
61 | },
62 | });
63 |
64 | export const {
65 | resetCurrentIndoorLocation,
66 | setCurrentLocationState,
67 | } = indoorSlice.actions;
68 |
69 | export const selectCurrentIndoorLocation = (state: RootState) => state.indoor.currentLocation;
70 | export const selectCurrentIndoorStates = (state: RootState) => state.indoor.currentStates;
71 |
72 | export const setCurrentIndoorLocation = (location: IndoorLocation): AppThunk =>
73 | async (dispatch, getState) => {
74 | dispatch(indoorSlice.actions.setCurrentIndoorLocation(location));
75 |
76 | const currentLocation = getState().locationData.current.location;
77 | const statesets = currentLocation ? getLocationStatesets(currentLocation) : [];
78 | if (statesets.length === 0) {
79 | return;
80 | }
81 |
82 | const states: LocationStates = zip(statesets.map(({ stateSetName }) => [stateSetName, { loaded: false }]));
83 | // Use a copy of states since redux seals the dispatched action's payload
84 | // to prevent store modification bu we want to reuse the states later
85 | dispatch(indoorSlice.actions.setCurrentLocationStates({ ...states }));
86 |
87 | const promises: Promise[] = statesets.map(
88 | ({ stateSetId, stateSetName }) =>
89 | fetchFeatureState(stateSetId, stateSetName, location.id)
90 | .then(value => {
91 | states[stateSetName] = { value, loaded: true };
92 | })
93 | );
94 |
95 | await Promise.all(promises);
96 | dispatch(indoorSlice.actions.setCurrentLocationStates(states));
97 | };
98 |
99 | export default indoorSlice.reducer;
100 |
101 | const fetchFeatureState = async (
102 | statesetId: string,
103 | statesetName: string,
104 | featureId: string
105 | ): Promise => {
106 | const url = `https://us.atlas.microsoft.com/featureState/state?api-version=1.0&statesetId=${statesetId}&featureId=${featureId}&subscription-key=${subscriptionKey}`;
107 |
108 | try {
109 | const res = await fetch(url);
110 | if (res.status !== 200) {
111 | throw new Error(`HTTP ${res.status}`);
112 | }
113 |
114 | const body = await res.json();
115 | return body.states.find((state: any) => state.keyName === statesetName)?.value;
116 | } catch (error) {
117 | console.warn(`Failed to fetch feature state for feature ${featureId}, stateset ${statesetId}: ${error}`);
118 | }
119 | };
120 |
121 | const getLocationStatesets = (location: LocationData) => {
122 | let statesets = location.config?.stateSets;
123 | if (statesets === undefined && location.type === LocationType.Floor) {
124 | statesets = location.parent?.config?.stateSets;
125 | }
126 |
127 | return statesets ?? [];
128 | };
129 |
130 | /**
131 | * Zip turns an array of 2-item tuples into a dictionary
132 | * @param list of items to be zipped into dictionary
133 | */
134 | const zip = (items: [string, T][]): { [k: string]: T } =>
135 | items.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});
136 |
--------------------------------------------------------------------------------
/src/services/layers/MarkersLayer.ts:
--------------------------------------------------------------------------------
1 | import AnimationController from 'css-animation-sync';
2 | import { HtmlMarker, Map } from 'azure-maps-control';
3 | import { indoor } from 'azure-maps-indoor';
4 | import { Dispatch } from '@reduxjs/toolkit';
5 | import { getId } from '@fluentui/react';
6 |
7 | import { Layer, LayerType } from './Layer';
8 | import { LocationData, LocationType } from '../../models/locationsData';
9 | import { hidePopover, showPopover } from '../../reducers/popover';
10 | import { PopoverType } from '../../models/popoversData';
11 | import { MarkerData } from '../../models/mapData';
12 | import { getZoomByLocationType } from '../../utils/locationsUtils';
13 |
14 | export class MarkersLayer implements Layer {
15 | public readonly type = LayerType.Markers;
16 | private map?: Map;
17 | private data: MarkerData[] = [];
18 | private visible: boolean = false;
19 | private dispatch?: Dispatch;
20 | private animation?: AnimationController;
21 | private isMarkersVisible: boolean = false;
22 | private readonly minZoom: number = getZoomByLocationType(LocationType.Floor);
23 | private markers: HtmlMarker[] = [];
24 |
25 | constructor(
26 | public readonly id: string,
27 | public readonly name: string,
28 | ) {}
29 |
30 | public get isVisible(): boolean {
31 | return this.visible;
32 | }
33 |
34 | initialize(map: Map, indoorManager: indoor.IndoorManager, dispatch: Dispatch) {
35 | this.map = map;
36 | this.dispatch = dispatch;
37 | }
38 |
39 | setVisibility(isVisible: boolean) {
40 | if (!this.map || this.isVisible === isVisible) {
41 | return;
42 | }
43 |
44 | this.visible = isVisible;
45 | this.updateMarkers();
46 | }
47 |
48 | setLocation(location: LocationData) {}
49 |
50 | dispose() {
51 | this.removeAnimation();
52 | }
53 |
54 | updateData(data: MarkerData[]) {
55 | this.data = data;
56 |
57 | if (this.isVisible) {
58 | this.updateMarkers();
59 | }
60 | }
61 |
62 | private shouldMarkersBeVisible() {
63 | if (!this.map || !this.isVisible) {
64 | return false;
65 | }
66 |
67 | const currentZoom: number | undefined = this.map.getCamera().zoom;
68 | return currentZoom ? currentZoom >= this.minZoom : false;
69 | }
70 |
71 | private updateMarkersVisibility = () => {
72 | if (!this.map) {
73 | return;
74 | }
75 |
76 | const isVisible = this.shouldMarkersBeVisible() && this.markers.length > 1;
77 |
78 | if (isVisible === this.isMarkersVisible) {
79 | return;
80 | }
81 |
82 | this.isMarkersVisible = isVisible;
83 |
84 | this.markers.forEach((marker: HtmlMarker) => marker.setOptions({ visible: isVisible }));
85 | }
86 |
87 | private removeAnimation() {
88 | if (this.animation) {
89 | this.animation?.free();
90 | this.animation = undefined;
91 | }
92 | }
93 |
94 | private removeMarkers() {
95 | if (this.map) {
96 | this.markers.forEach((marker: HtmlMarker) => this.map!.markers.remove(marker));
97 | }
98 | }
99 |
100 | private updateMarkers() {
101 | this.removeMarkers();
102 | this.removeAnimation();
103 | this.map?.events.remove('zoom', this.updateMarkersVisibility);
104 | this.isMarkersVisible = false;
105 |
106 | if (!this.map || !this.isVisible) {
107 | return;
108 | }
109 |
110 | const isMarkersVisible = this.shouldMarkersBeVisible();
111 | this.data.forEach((markerData: MarkerData) => {
112 | this.createMarker(markerData, isMarkersVisible);
113 | });
114 |
115 | if (this.markers.length > 0) {
116 | this.isMarkersVisible = isMarkersVisible;
117 | this.animation = new AnimationController('pulse');
118 | this.map?.events.add('zoom', this.updateMarkersVisibility);
119 | }
120 | }
121 |
122 | private createMarker(data: MarkerData, isVisible: boolean) {
123 | if (!this.map || !data.position) {
124 | return;
125 | }
126 |
127 | const id: string = getId(`${this.id}-marker`);
128 |
129 | const htmlMarker: HtmlMarker = new HtmlMarker({
130 | htmlContent: ``,
131 | position: [data.position.longitude, data.position.latitude],
132 | visible: isVisible,
133 | });
134 |
135 | this.map.markers.add(htmlMarker);
136 | this.markers.push(htmlMarker);
137 |
138 | const marker = document.getElementById(id);
139 |
140 | if (!marker) {
141 | return;
142 | }
143 |
144 | marker.onmouseover = () => this.dispatch!(showPopover({
145 | type: PopoverType.Warning,
146 | isVisible: true,
147 | target: `#${id}`,
148 | title: data.title,
149 | description: data.description,
150 | }));
151 |
152 | marker.onmouseleave = () => this.dispatch!(hidePopover(PopoverType.Warning));
153 | }
154 | }
155 |
--------------------------------------------------------------------------------
20 |
21 | );
22 | };
23 |
24 | export default MSLogo;
25 |
26 |
--------------------------------------------------------------------------------
/src/utils/colorUtils.ts:
--------------------------------------------------------------------------------
1 | export const CHARTS_PALETTE = [
2 | '#7F3C8D', '#E58606', '#096DD9', '#F8D149', '#FADB14', '#3969AC', '#E68310',
3 | '#CF1C90', '#29C7A1', '#D81A29', '#764E9F', '#389E0D', '#E73F74', '#4B4B8F',
4 | '#CC61B0', '#FF7C00', '#CC3A8E', '#0032FF', '#11A579', '#008695', '#5D69B1',
5 | '#8C8C8C', '#2B88D8', '#03BD5B', '#F2B701', '#F97B72', '#99C945', '#FF3700',
6 | '#ED645A', '#13C2C2', '#5FC41D', '#A5AA99', '#24796C', '#FFA407', '#A5AA99',
7 | '#EB2F96',
8 | ];
9 |
10 | export const getChartColorByIndex = (index: number) => CHARTS_PALETTE[index % CHARTS_PALETTE.length];
--------------------------------------------------------------------------------
/livemaps-api/Models/Device.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Text;
4 |
5 | namespace ssir.api.Models
6 | {
7 | public class Device
8 | {
9 | public string DeviceId { get; set; }
10 | public string EquipmentClass { get; set; }
11 | public string Equipment { get; set; }
12 | public List
24 |