@dative-gpi/foundation-shared-components 1.0.160 → 1.0.161
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/map/FSMap.vue +1 -1
- package/components/tiles/FSEntityCountBadge.vue +72 -0
- package/components/tiles/FSFolderTileUI.vue +38 -4
- package/components/tiles/FSGroupTileUI.vue +15 -67
- package/components/tiles/FSLocationTileUI.vue +9 -28
- package/composables/useMapLayers.ts +60 -53
- package/package.json +4 -4
package/components/map/FSMap.vue
CHANGED
|
@@ -233,7 +233,7 @@ export default defineComponent({
|
|
|
233
233
|
}));
|
|
234
234
|
|
|
235
235
|
const actualLayer = computed(() => {
|
|
236
|
-
return layers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers
|
|
236
|
+
return layers.value.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers;
|
|
237
237
|
});
|
|
238
238
|
|
|
239
239
|
const overlaySlots = computed(() => {
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSRow
|
|
3
|
+
align="center-left"
|
|
4
|
+
>
|
|
5
|
+
<FSColor
|
|
6
|
+
height="24px"
|
|
7
|
+
:color="$props.color"
|
|
8
|
+
:border="false"
|
|
9
|
+
>
|
|
10
|
+
<FSRow
|
|
11
|
+
align="center-center"
|
|
12
|
+
width="24px"
|
|
13
|
+
>
|
|
14
|
+
<FSSpan
|
|
15
|
+
font="text-overline"
|
|
16
|
+
>
|
|
17
|
+
{{ badgeContent }}
|
|
18
|
+
</FSSpan>
|
|
19
|
+
</FSRow>
|
|
20
|
+
</FSColor>
|
|
21
|
+
<FSSpan
|
|
22
|
+
font="text-overline"
|
|
23
|
+
>
|
|
24
|
+
{{ $props.label }}
|
|
25
|
+
</FSSpan>
|
|
26
|
+
</FSRow>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script lang="ts">
|
|
30
|
+
import { computed, defineComponent, type PropType } from "vue";
|
|
31
|
+
|
|
32
|
+
import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
|
|
33
|
+
|
|
34
|
+
import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
35
|
+
|
|
36
|
+
import FSColor from "../FSColor.vue";
|
|
37
|
+
import FSSpan from "../FSSpan.vue";
|
|
38
|
+
import FSRow from "../FSRow.vue";
|
|
39
|
+
|
|
40
|
+
export default defineComponent({
|
|
41
|
+
name: "FSEntityCountBadge",
|
|
42
|
+
props: {
|
|
43
|
+
label: {
|
|
44
|
+
type: String,
|
|
45
|
+
required: true
|
|
46
|
+
},
|
|
47
|
+
count: {
|
|
48
|
+
type: Number,
|
|
49
|
+
required: true
|
|
50
|
+
},
|
|
51
|
+
color: {
|
|
52
|
+
type: String as PropType<ColorBase>,
|
|
53
|
+
required: false,
|
|
54
|
+
default: () => ColorEnum.Primary
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
components: {
|
|
58
|
+
FSColor,
|
|
59
|
+
FSSpan,
|
|
60
|
+
FSRow
|
|
61
|
+
},
|
|
62
|
+
setup(props){
|
|
63
|
+
|
|
64
|
+
const badgeContent = computed(() => capNumberToString(props.count));
|
|
65
|
+
|
|
66
|
+
return {
|
|
67
|
+
ColorEnum,
|
|
68
|
+
badgeContent
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
</script>
|
|
@@ -6,7 +6,26 @@
|
|
|
6
6
|
:iconBorder="false"
|
|
7
7
|
:icon="$props.icon"
|
|
8
8
|
v-bind="$attrs"
|
|
9
|
-
|
|
9
|
+
>
|
|
10
|
+
<template
|
|
11
|
+
#append-info
|
|
12
|
+
>
|
|
13
|
+
<FSCol
|
|
14
|
+
gap="6px"
|
|
15
|
+
>
|
|
16
|
+
<FSEntityCountBadge
|
|
17
|
+
:label="$tr('ui.common.folders', 'Folder(s)')"
|
|
18
|
+
:count="recursiveFoldersIds.length"
|
|
19
|
+
:color="ColorEnum.Primary"
|
|
20
|
+
/>
|
|
21
|
+
<FSEntityCountBadge
|
|
22
|
+
:label="$tr('ui.common.dashboards', 'Dashboard(s)')"
|
|
23
|
+
:count="recursiveDashboardsIds.length"
|
|
24
|
+
:color="ColorEnum.Success"
|
|
25
|
+
/>
|
|
26
|
+
</FSCol>
|
|
27
|
+
</template>
|
|
28
|
+
</FSSimpleTileUI>
|
|
10
29
|
</template>
|
|
11
30
|
|
|
12
31
|
<script lang="ts">
|
|
@@ -14,7 +33,9 @@ import { computed, defineComponent, type PropType } from "vue";
|
|
|
14
33
|
|
|
15
34
|
import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
16
35
|
|
|
36
|
+
import FSEntityCountBadge from './FSEntityCountBadge.vue';
|
|
17
37
|
import FSSimpleTileUI from "./FSSimpleTileUI.vue";
|
|
38
|
+
import FSCol from "../FSCol.vue";
|
|
18
39
|
|
|
19
40
|
export default defineComponent({
|
|
20
41
|
name: "FSFolderTileUI",
|
|
@@ -28,10 +49,22 @@ export default defineComponent({
|
|
|
28
49
|
type: String,
|
|
29
50
|
required: false,
|
|
30
51
|
default: "mdi-folder-outline"
|
|
31
|
-
}
|
|
52
|
+
},
|
|
53
|
+
recursiveFoldersIds: {
|
|
54
|
+
type: Array as PropType<string[]>,
|
|
55
|
+
required: false,
|
|
56
|
+
default: () => []
|
|
57
|
+
},
|
|
58
|
+
recursiveDashboardsIds: {
|
|
59
|
+
type: Array as PropType<string[]>,
|
|
60
|
+
required: false,
|
|
61
|
+
default: () => []
|
|
62
|
+
},
|
|
32
63
|
},
|
|
33
64
|
components: {
|
|
34
|
-
|
|
65
|
+
FSEntityCountBadge,
|
|
66
|
+
FSSimpleTileUI,
|
|
67
|
+
FSCol
|
|
35
68
|
},
|
|
36
69
|
setup(props){
|
|
37
70
|
const color = computed(() => {
|
|
@@ -42,7 +75,8 @@ export default defineComponent({
|
|
|
42
75
|
});
|
|
43
76
|
|
|
44
77
|
return {
|
|
45
|
-
color
|
|
78
|
+
color,
|
|
79
|
+
ColorEnum
|
|
46
80
|
};
|
|
47
81
|
}
|
|
48
82
|
});
|
|
@@ -16,82 +16,36 @@
|
|
|
16
16
|
<FSCol
|
|
17
17
|
gap="6px"
|
|
18
18
|
>
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
align="center-center"
|
|
30
|
-
>
|
|
31
|
-
<FSSpan
|
|
32
|
-
font="text-overline"
|
|
33
|
-
>
|
|
34
|
-
{{ groupsBadgeContent }}
|
|
35
|
-
</FSSpan>
|
|
36
|
-
</FSRow>
|
|
37
|
-
</FSColor>
|
|
38
|
-
<FSSpan
|
|
39
|
-
font="text-overline"
|
|
40
|
-
>
|
|
41
|
-
{{ $tr("ui.common.groups", "Group(s)") }}
|
|
42
|
-
</FSSpan>
|
|
43
|
-
</FSRow>
|
|
44
|
-
<FSRow
|
|
45
|
-
align="center-left"
|
|
46
|
-
>
|
|
47
|
-
<FSColor
|
|
48
|
-
height="24px"
|
|
49
|
-
width="24px"
|
|
50
|
-
:color="ColorEnum.Success"
|
|
51
|
-
:border="false"
|
|
52
|
-
>
|
|
53
|
-
<FSRow
|
|
54
|
-
align="center-center"
|
|
55
|
-
>
|
|
56
|
-
<FSSpan
|
|
57
|
-
font="text-overline"
|
|
58
|
-
>
|
|
59
|
-
{{ deviceOrganisationsBadgeContent }}
|
|
60
|
-
</FSSpan>
|
|
61
|
-
</FSRow>
|
|
62
|
-
</FSColor>
|
|
63
|
-
<FSSpan
|
|
64
|
-
font="text-overline"
|
|
65
|
-
>
|
|
66
|
-
{{ $tr("ui.common.devices", "Device(s)") }}
|
|
67
|
-
</FSSpan>
|
|
68
|
-
</FSRow>
|
|
19
|
+
<FSEntityCountBadge
|
|
20
|
+
:label="$tr('ui.common.groups', 'Group(s)')"
|
|
21
|
+
:count="recursiveGroupsIds.length"
|
|
22
|
+
:color="ColorEnum.Primary"
|
|
23
|
+
/>
|
|
24
|
+
<FSEntityCountBadge
|
|
25
|
+
:label="$tr('ui.common.devices', 'Device(s)')"
|
|
26
|
+
:count="recursiveDeviceOrganisationsIds.length"
|
|
27
|
+
:color="ColorEnum.Success"
|
|
28
|
+
/>
|
|
69
29
|
</FSCol>
|
|
70
30
|
</template>
|
|
71
31
|
</FSSimpleTileUI>
|
|
72
32
|
</template>
|
|
73
33
|
|
|
74
34
|
<script lang="ts">
|
|
75
|
-
import {
|
|
76
|
-
|
|
77
|
-
import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
|
|
35
|
+
import { defineComponent, type PropType } from "vue";
|
|
78
36
|
|
|
79
37
|
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
80
38
|
|
|
39
|
+
import FSEntityCountBadge from './FSEntityCountBadge.vue';
|
|
81
40
|
import FSSimpleTileUI from './FSSimpleTileUI.vue';
|
|
82
|
-
import FSColor from "../FSColor.vue";
|
|
83
|
-
import FSSpan from "../FSSpan.vue";
|
|
84
41
|
import FSCol from "../FSCol.vue";
|
|
85
|
-
import FSRow from "../FSRow.vue";
|
|
86
42
|
|
|
87
43
|
export default defineComponent({
|
|
88
44
|
name: "FSGroupTileUI",
|
|
89
45
|
components: {
|
|
46
|
+
FSEntityCountBadge,
|
|
90
47
|
FSSimpleTileUI,
|
|
91
|
-
|
|
92
|
-
FSSpan,
|
|
93
|
-
FSCol,
|
|
94
|
-
FSRow
|
|
48
|
+
FSCol
|
|
95
49
|
},
|
|
96
50
|
props: {
|
|
97
51
|
imageId: {
|
|
@@ -134,14 +88,8 @@ export default defineComponent({
|
|
|
134
88
|
default: () => [352, 336]
|
|
135
89
|
},
|
|
136
90
|
},
|
|
137
|
-
setup(
|
|
138
|
-
const groupsBadgeContent = computed(() => capNumberToString(props.recursiveGroupsIds.length));
|
|
139
|
-
|
|
140
|
-
const deviceOrganisationsBadgeContent = computed(() => capNumberToString(props.recursiveDeviceOrganisationsIds.length));
|
|
141
|
-
|
|
91
|
+
setup() {
|
|
142
92
|
return {
|
|
143
|
-
deviceOrganisationsBadgeContent,
|
|
144
|
-
groupsBadgeContent,
|
|
145
93
|
ColorEnum,
|
|
146
94
|
};
|
|
147
95
|
}
|
|
@@ -15,46 +15,25 @@
|
|
|
15
15
|
<FSCol
|
|
16
16
|
gap="8px"
|
|
17
17
|
>
|
|
18
|
-
<
|
|
19
|
-
v-if="$props.deviceCount"
|
|
20
|
-
:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
width="24px"
|
|
25
|
-
height="24px"
|
|
26
|
-
:color="ColorEnum.Primary"
|
|
27
|
-
:border="false"
|
|
28
|
-
>
|
|
29
|
-
<FSRow
|
|
30
|
-
align="center-center"
|
|
31
|
-
>
|
|
32
|
-
<FSSpan
|
|
33
|
-
font="text-overline"
|
|
34
|
-
>
|
|
35
|
-
{{ capNumberToString($props.deviceCount) }}
|
|
36
|
-
</FSSpan>
|
|
37
|
-
</FSRow>
|
|
38
|
-
</FSColor>
|
|
39
|
-
<FSSpan
|
|
40
|
-
font="text-overline"
|
|
41
|
-
>
|
|
42
|
-
{{ $tr("ui.common.devices", "Equipment(s)") }}
|
|
43
|
-
</FSSpan>
|
|
44
|
-
</FSRow>
|
|
18
|
+
<FSEntityCountBadge
|
|
19
|
+
v-if="$props.deviceCount !== undefined"
|
|
20
|
+
:label="$tr('ui.common.devices', 'Device(s)')"
|
|
21
|
+
:count="$props.deviceCount"
|
|
22
|
+
:color="ColorEnum.Primary"
|
|
23
|
+
/>
|
|
45
24
|
<FSRow
|
|
46
25
|
v-if="$props.address"
|
|
47
26
|
:wrap="false"
|
|
48
27
|
align="center-left"
|
|
49
28
|
>
|
|
50
29
|
<FSColor
|
|
51
|
-
width="24px"
|
|
52
30
|
height="24px"
|
|
53
31
|
:color="ColorEnum.Primary"
|
|
54
32
|
:border="false"
|
|
55
33
|
>
|
|
56
34
|
<FSRow
|
|
57
35
|
align="center-center"
|
|
36
|
+
width="24px"
|
|
58
37
|
>
|
|
59
38
|
<FSIcon
|
|
60
39
|
icon="mdi-map-marker-radius-outline"
|
|
@@ -79,6 +58,7 @@ import { defineComponent, type PropType } from "vue";
|
|
|
79
58
|
import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
|
|
80
59
|
import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
81
60
|
|
|
61
|
+
import FSEntityCountBadge from './FSEntityCountBadge.vue';
|
|
82
62
|
import FSSimpleTileUI from './FSSimpleTileUI.vue';
|
|
83
63
|
import FSColor from "../FSColor.vue";
|
|
84
64
|
import FSSpan from "../FSSpan.vue";
|
|
@@ -88,6 +68,7 @@ import FSRow from "../FSRow.vue";
|
|
|
88
68
|
export default defineComponent({
|
|
89
69
|
name: "FSLocationTileUI",
|
|
90
70
|
components: {
|
|
71
|
+
FSEntityCountBadge,
|
|
91
72
|
FSSimpleTileUI,
|
|
92
73
|
FSColor,
|
|
93
74
|
FSSpan,
|
|
@@ -1,62 +1,69 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { ref, onMounted } from "vue";
|
|
3
2
|
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
4
|
-
|
|
5
3
|
import { MapLayers } from '@dative-gpi/foundation-shared-components/models';
|
|
6
4
|
|
|
7
5
|
export const useMapLayers = () => {
|
|
8
6
|
const { $tr } = useTranslationsProvider();
|
|
9
|
-
|
|
10
7
|
const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "";
|
|
11
8
|
|
|
12
|
-
const layers = [
|
|
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
|
-
|
|
9
|
+
const layers = ref<any[]>([]);
|
|
10
|
+
|
|
11
|
+
onMounted(async () => {
|
|
12
|
+
try {
|
|
13
|
+
const leaflet = await import('leaflet');
|
|
14
|
+
const tileLayer = leaflet.tileLayer;
|
|
15
|
+
|
|
16
|
+
layers.value = [
|
|
17
|
+
{
|
|
18
|
+
name: MapLayers.Map,
|
|
19
|
+
label: $tr("ui.map-layer.map", "Map"),
|
|
20
|
+
image: new URL("../assets/images/map/map.png", import.meta.url).href,
|
|
21
|
+
layers: [
|
|
22
|
+
tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
|
|
23
|
+
maxZoom: 22,
|
|
24
|
+
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
|
|
25
|
+
attribution: '© Google Map Data',
|
|
26
|
+
className: 'fs-map-tile-base-layer'
|
|
27
|
+
})
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
name: MapLayers.Imagery,
|
|
32
|
+
label: $tr("ui.map-layer.imagery", "Imagery"),
|
|
33
|
+
image: new URL("../assets/images/map/imagery.png", import.meta.url).href,
|
|
34
|
+
layers: [
|
|
35
|
+
tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${apiKey}`, {
|
|
36
|
+
maxZoom: 22,
|
|
37
|
+
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
|
|
38
|
+
attribution: '© Google Map Data',
|
|
39
|
+
className: 'fs-map-tile-base-layer'
|
|
40
|
+
})
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: MapLayers.Snow,
|
|
45
|
+
label: $tr("ui.map-layer.snow", "Snow ski map"),
|
|
46
|
+
image: new URL("../assets/images/map/snow.png", import.meta.url).href,
|
|
47
|
+
layers: [
|
|
48
|
+
tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
|
|
49
|
+
maxZoom: 22,
|
|
50
|
+
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
|
|
51
|
+
attribution: '© Google Map Data',
|
|
52
|
+
className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
|
|
53
|
+
}),
|
|
54
|
+
tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
|
|
55
|
+
maxZoom: 18,
|
|
56
|
+
attribution: 'Map data: © OpenStreetMap contributors & ODbL, CC-BY-SA',
|
|
57
|
+
className: 'fs-map-tile-base-layer'
|
|
58
|
+
})
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
];
|
|
62
|
+
} catch (err) {
|
|
63
|
+
console.error("Leaflet is not installed or failed to load.", err);
|
|
64
|
+
layers.value = [];
|
|
56
65
|
}
|
|
57
|
-
|
|
66
|
+
});
|
|
58
67
|
|
|
59
|
-
return {
|
|
60
|
-
|
|
61
|
-
};
|
|
62
|
-
}
|
|
68
|
+
return { layers };
|
|
69
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dative-gpi/foundation-shared-components",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.161",
|
|
5
5
|
"description": "",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"author": "",
|
|
11
11
|
"license": "ISC",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@dative-gpi/foundation-shared-domain": "1.0.
|
|
14
|
-
"@dative-gpi/foundation-shared-services": "1.0.
|
|
13
|
+
"@dative-gpi/foundation-shared-domain": "1.0.161",
|
|
14
|
+
"@dative-gpi/foundation-shared-services": "1.0.161"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"@dative-gpi/bones-ui": "^1.0.0",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"sass": "1.71.1",
|
|
36
36
|
"sass-loader": "13.3.2"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "1e826f1ef83221e21bfb2da0688ff3cf4b1ed94b"
|
|
39
39
|
}
|