@dative-gpi/foundation-shared-components 0.0.24 → 0.0.25
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/deviceOrganisations/FSConnectivity.vue +8 -73
- package/components/deviceOrganisations/FSConnectivityCard.vue +98 -0
- package/components/deviceOrganisations/FSStatus.vue +9 -71
- package/components/deviceOrganisations/FSStatusCard.vue +101 -0
- package/components/deviceOrganisations/FSStatusesCarousel.vue +2 -10
- package/components/deviceOrganisations/FSWorstAlert.vue +6 -74
- package/components/deviceOrganisations/FSWorstAlertCard.vue +126 -0
- package/package.json +4 -4
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-menu
|
|
3
|
-
v-if="$props.deviceConnectivity"
|
|
4
3
|
:closeOnContentClick="false"
|
|
5
4
|
v-model="menu"
|
|
6
5
|
>
|
|
@@ -14,68 +13,25 @@
|
|
|
14
13
|
{{ $props.deviceConnectivity.icon }}
|
|
15
14
|
</FSColorIcon>
|
|
16
15
|
</template>
|
|
17
|
-
<
|
|
18
|
-
:
|
|
19
|
-
|
|
20
|
-
>
|
|
21
|
-
<FSCol
|
|
22
|
-
align="center-center"
|
|
23
|
-
padding="6px 24px"
|
|
24
|
-
>
|
|
25
|
-
<FSCol
|
|
26
|
-
align="center-center"
|
|
27
|
-
gap="12px"
|
|
28
|
-
>
|
|
29
|
-
<FSChip
|
|
30
|
-
:color="$props.deviceConnectivity.color"
|
|
31
|
-
:prependIcon="$props.deviceConnectivity.icon"
|
|
32
|
-
:label="connectivityLabel"
|
|
33
|
-
/>
|
|
34
|
-
<FSRow
|
|
35
|
-
width="hug"
|
|
36
|
-
>
|
|
37
|
-
<FSText>
|
|
38
|
-
{{ $tr("ui.shared.device-connectivity.last-message", "Last message") }}
|
|
39
|
-
</FSText>
|
|
40
|
-
</FSRow>
|
|
41
|
-
</FSCol>
|
|
42
|
-
<FSRow
|
|
43
|
-
v-if="deviceTimestamp"
|
|
44
|
-
width="hug"
|
|
45
|
-
>
|
|
46
|
-
<FSSpan
|
|
47
|
-
font="text-overline"
|
|
48
|
-
>
|
|
49
|
-
{{ deviceTimestamp }}
|
|
50
|
-
</FSSpan>
|
|
51
|
-
</FSRow>
|
|
52
|
-
</FSCol>
|
|
53
|
-
</FSCard>
|
|
16
|
+
<FSConnectivityCard
|
|
17
|
+
:deviceConnectivity="$props.deviceConnectivity"
|
|
18
|
+
/>
|
|
54
19
|
</v-menu>
|
|
55
20
|
</template>
|
|
56
21
|
|
|
57
22
|
<script lang="ts">
|
|
58
|
-
import {
|
|
23
|
+
import { defineComponent, PropType, ref } from "vue";
|
|
59
24
|
|
|
60
|
-
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
61
25
|
import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
|
|
62
|
-
import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
|
|
63
|
-
import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
|
|
64
26
|
|
|
27
|
+
import FSConnectivityCard from "./FSConnectivityCard.vue";
|
|
65
28
|
import FSColorIcon from "../FSColorIcon.vue";
|
|
66
|
-
import FSCard from "../FSCard.vue";
|
|
67
|
-
import FSChip from "../FSChip.vue";
|
|
68
|
-
import FSText from "../FSText.vue";
|
|
69
|
-
import FSSpan from "../FSSpan.vue";
|
|
70
29
|
|
|
71
30
|
export default defineComponent({
|
|
72
31
|
name: "FSConnectivity",
|
|
73
32
|
components: {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
FSChip,
|
|
77
|
-
FSText,
|
|
78
|
-
FSSpan
|
|
33
|
+
FSConnectivityCard,
|
|
34
|
+
FSColorIcon
|
|
79
35
|
},
|
|
80
36
|
props: {
|
|
81
37
|
deviceConnectivity: {
|
|
@@ -83,31 +39,10 @@ export default defineComponent({
|
|
|
83
39
|
required: true
|
|
84
40
|
}
|
|
85
41
|
},
|
|
86
|
-
setup(
|
|
87
|
-
const { epochToLongTimeFormat } = useTimeZone();
|
|
88
|
-
const { $tr } = useTranslationsProvider();
|
|
89
|
-
|
|
42
|
+
setup() {
|
|
90
43
|
const menu = ref(false);
|
|
91
44
|
|
|
92
|
-
const connectivityLabel = computed((): string => {
|
|
93
|
-
switch (props.deviceConnectivity.status) {
|
|
94
|
-
case ConnectivityStatus.Connected: return $tr("ui.connectivity-status.connected", "Connected");
|
|
95
|
-
case ConnectivityStatus.PartiallyConnected: return $tr("ui.connectivity-status.partially-connected", "Partially connected");
|
|
96
|
-
case ConnectivityStatus.AlmostOffline: return $tr("ui.connectivity-status.almost-offline", "Almost offline");
|
|
97
|
-
default: return $tr("ui.connectivity-status.offline", "Offline");
|
|
98
|
-
}
|
|
99
|
-
});
|
|
100
|
-
|
|
101
|
-
const deviceTimestamp = computed((): string => {
|
|
102
|
-
if (props.deviceConnectivity.sourceTimestamp) {
|
|
103
|
-
return epochToLongTimeFormat(props.deviceConnectivity.sourceTimestamp);
|
|
104
|
-
}
|
|
105
|
-
return "";
|
|
106
|
-
});
|
|
107
|
-
|
|
108
45
|
return {
|
|
109
|
-
connectivityLabel,
|
|
110
|
-
deviceTimestamp,
|
|
111
46
|
menu
|
|
112
47
|
};
|
|
113
48
|
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSCard
|
|
3
|
+
:elevation="true"
|
|
4
|
+
:border="false"
|
|
5
|
+
>
|
|
6
|
+
<FSCol
|
|
7
|
+
align="center-center"
|
|
8
|
+
padding="6px 24px"
|
|
9
|
+
>
|
|
10
|
+
<FSCol
|
|
11
|
+
align="center-center"
|
|
12
|
+
gap="12px"
|
|
13
|
+
>
|
|
14
|
+
<FSChip
|
|
15
|
+
:color="$props.deviceConnectivity.color"
|
|
16
|
+
:prependIcon="$props.deviceConnectivity.icon"
|
|
17
|
+
:label="connectivityLabel"
|
|
18
|
+
/>
|
|
19
|
+
<FSRow
|
|
20
|
+
width="hug"
|
|
21
|
+
>
|
|
22
|
+
<FSText>
|
|
23
|
+
{{ $tr("ui.shared.device-connectivity.last-message", "Last message") }}
|
|
24
|
+
</FSText>
|
|
25
|
+
</FSRow>
|
|
26
|
+
</FSCol>
|
|
27
|
+
<FSRow
|
|
28
|
+
v-if="deviceTimestamp"
|
|
29
|
+
width="hug"
|
|
30
|
+
>
|
|
31
|
+
<FSSpan
|
|
32
|
+
font="text-overline"
|
|
33
|
+
>
|
|
34
|
+
{{ deviceTimestamp }}
|
|
35
|
+
</FSSpan>
|
|
36
|
+
</FSRow>
|
|
37
|
+
</FSCol>
|
|
38
|
+
</FSCard>
|
|
39
|
+
</template>
|
|
40
|
+
|
|
41
|
+
<script lang="ts">
|
|
42
|
+
import { computed, defineComponent, PropType } from "vue";
|
|
43
|
+
|
|
44
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
45
|
+
import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
|
|
46
|
+
import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
|
|
47
|
+
import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
|
|
48
|
+
|
|
49
|
+
import FSCard from "../FSCard.vue";
|
|
50
|
+
import FSChip from "../FSChip.vue";
|
|
51
|
+
import FSText from "../FSText.vue";
|
|
52
|
+
import FSSpan from "../FSSpan.vue";
|
|
53
|
+
import FSCol from "../FSCol.vue";
|
|
54
|
+
import FSRow from "../FSRow.vue";
|
|
55
|
+
|
|
56
|
+
export default defineComponent({
|
|
57
|
+
name: "FSConnectivityCard",
|
|
58
|
+
components: {
|
|
59
|
+
FSCard,
|
|
60
|
+
FSChip,
|
|
61
|
+
FSText,
|
|
62
|
+
FSSpan,
|
|
63
|
+
FSCol,
|
|
64
|
+
FSRow
|
|
65
|
+
},
|
|
66
|
+
props: {
|
|
67
|
+
deviceConnectivity: {
|
|
68
|
+
type: Object as PropType<FSDeviceConnectivity>,
|
|
69
|
+
required: true
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
setup(props) {
|
|
73
|
+
const { epochToLongTimeFormat } = useTimeZone();
|
|
74
|
+
const { $tr } = useTranslationsProvider();
|
|
75
|
+
|
|
76
|
+
const connectivityLabel = computed((): string => {
|
|
77
|
+
switch (props.deviceConnectivity.status) {
|
|
78
|
+
case ConnectivityStatus.Connected: return $tr("ui.connectivity-status.connected", "Connected");
|
|
79
|
+
case ConnectivityStatus.PartiallyConnected: return $tr("ui.connectivity-status.partially-connected", "Partially connected");
|
|
80
|
+
case ConnectivityStatus.AlmostOffline: return $tr("ui.connectivity-status.almost-offline", "Almost offline");
|
|
81
|
+
default: return $tr("ui.connectivity-status.offline", "Offline");
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
const deviceTimestamp = computed((): string => {
|
|
86
|
+
if (props.deviceConnectivity.sourceTimestamp) {
|
|
87
|
+
return epochToLongTimeFormat(props.deviceConnectivity.sourceTimestamp);
|
|
88
|
+
}
|
|
89
|
+
return "";
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
return {
|
|
93
|
+
connectivityLabel,
|
|
94
|
+
deviceTimestamp
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
</script>
|
|
@@ -13,78 +13,26 @@
|
|
|
13
13
|
{{ $props.statusGroup.icon }}
|
|
14
14
|
</FSColorIcon>
|
|
15
15
|
</template>
|
|
16
|
-
<
|
|
17
|
-
:
|
|
18
|
-
:
|
|
19
|
-
|
|
20
|
-
<FSCol
|
|
21
|
-
align="center-center"
|
|
22
|
-
padding="6px 24px"
|
|
23
|
-
>
|
|
24
|
-
<FSCol
|
|
25
|
-
align="center-center"
|
|
26
|
-
gap="12px"
|
|
27
|
-
>
|
|
28
|
-
<FSChip
|
|
29
|
-
:color="$props.statusGroup.color"
|
|
30
|
-
:prependIcon="$props.statusGroup.icon"
|
|
31
|
-
:label="$props.statusGroup.label"
|
|
32
|
-
/>
|
|
33
|
-
<FSRow
|
|
34
|
-
v-if="$props.statusGroup.value"
|
|
35
|
-
width="hug"
|
|
36
|
-
>
|
|
37
|
-
<FSText
|
|
38
|
-
font="text-button"
|
|
39
|
-
:color="$props.statusGroup.color"
|
|
40
|
-
>
|
|
41
|
-
{{ $props.statusGroup.value }} {{ $props.statusGroup.unit }}
|
|
42
|
-
</FSText>
|
|
43
|
-
</FSRow>
|
|
44
|
-
<FSRow
|
|
45
|
-
v-if="$props.statusGroup.value && $props.modelStatus.groupById && $props.statusGroup.groupByValue"
|
|
46
|
-
width="hug"
|
|
47
|
-
>
|
|
48
|
-
<FSSpan>
|
|
49
|
-
{{ $props.modelStatus.groupByLabel }} {{ $props.statusGroup.groupByValue }}
|
|
50
|
-
</FSSpan>
|
|
51
|
-
</FSRow>
|
|
52
|
-
</FSCol>
|
|
53
|
-
<FSRow
|
|
54
|
-
v-if="deviceTimestamp"
|
|
55
|
-
width="hug"
|
|
56
|
-
>
|
|
57
|
-
<FSSpan
|
|
58
|
-
font="text-overline"
|
|
59
|
-
>
|
|
60
|
-
{{ deviceTimestamp }}
|
|
61
|
-
</FSSpan>
|
|
62
|
-
</FSRow>
|
|
63
|
-
</FSCol>
|
|
64
|
-
</FSCard>
|
|
16
|
+
<FSStatusCard
|
|
17
|
+
:modelStatus="$props.modelStatus"
|
|
18
|
+
:statusGroup="$props.statusGroup"
|
|
19
|
+
/>
|
|
65
20
|
</v-menu>
|
|
66
21
|
</template>
|
|
67
22
|
|
|
68
23
|
<script lang="ts">
|
|
69
|
-
import {
|
|
24
|
+
import { defineComponent, PropType, ref } from "vue";
|
|
70
25
|
|
|
71
26
|
import { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
|
|
72
|
-
import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
|
|
73
27
|
|
|
28
|
+
import FSStatusCard from "./FSStatusCard.vue";
|
|
74
29
|
import FSColorIcon from "../FSColorIcon.vue";
|
|
75
|
-
import FSCard from "../FSCard.vue";
|
|
76
|
-
import FSChip from "../FSChip.vue";
|
|
77
|
-
import FSText from "../FSText.vue";
|
|
78
|
-
import FSSpan from "../FSSpan.vue";
|
|
79
30
|
|
|
80
31
|
export default defineComponent({
|
|
81
32
|
name: "FSStatus",
|
|
82
33
|
components: {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
FSChip,
|
|
86
|
-
FSText,
|
|
87
|
-
FSSpan
|
|
34
|
+
FSStatusCard,
|
|
35
|
+
FSColorIcon
|
|
88
36
|
},
|
|
89
37
|
props: {
|
|
90
38
|
modelStatus: {
|
|
@@ -96,20 +44,10 @@ export default defineComponent({
|
|
|
96
44
|
required: true
|
|
97
45
|
}
|
|
98
46
|
},
|
|
99
|
-
setup(
|
|
100
|
-
const { epochToLongTimeFormat } = useTimeZone();
|
|
101
|
-
|
|
47
|
+
setup() {
|
|
102
48
|
const menu = ref(false);
|
|
103
49
|
|
|
104
|
-
const deviceTimestamp = computed((): string => {
|
|
105
|
-
if (props.statusGroup.sourceTimestamp) {
|
|
106
|
-
return epochToLongTimeFormat(props.statusGroup.sourceTimestamp);
|
|
107
|
-
}
|
|
108
|
-
return "";
|
|
109
|
-
});
|
|
110
|
-
|
|
111
50
|
return {
|
|
112
|
-
deviceTimestamp,
|
|
113
51
|
menu
|
|
114
52
|
};
|
|
115
53
|
}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSCard
|
|
3
|
+
:elevation="true"
|
|
4
|
+
:border="false"
|
|
5
|
+
>
|
|
6
|
+
<FSCol
|
|
7
|
+
align="center-center"
|
|
8
|
+
padding="6px 24px"
|
|
9
|
+
>
|
|
10
|
+
<FSCol
|
|
11
|
+
align="center-center"
|
|
12
|
+
gap="12px"
|
|
13
|
+
>
|
|
14
|
+
<FSChip
|
|
15
|
+
:color="$props.statusGroup.color"
|
|
16
|
+
:prependIcon="$props.statusGroup.icon"
|
|
17
|
+
:label="$props.statusGroup.label"
|
|
18
|
+
/>
|
|
19
|
+
<FSRow
|
|
20
|
+
v-if="$props.statusGroup.value"
|
|
21
|
+
width="hug"
|
|
22
|
+
>
|
|
23
|
+
<FSText
|
|
24
|
+
font="text-button"
|
|
25
|
+
:color="$props.statusGroup.color"
|
|
26
|
+
>
|
|
27
|
+
{{ $props.statusGroup.value }} {{ $props.statusGroup.unit }}
|
|
28
|
+
</FSText>
|
|
29
|
+
</FSRow>
|
|
30
|
+
<FSRow
|
|
31
|
+
v-if="$props.statusGroup.value && $props.modelStatus.groupById && $props.statusGroup.groupByValue"
|
|
32
|
+
width="hug"
|
|
33
|
+
>
|
|
34
|
+
<FSSpan>
|
|
35
|
+
{{ $props.modelStatus.groupByLabel }} {{ $props.statusGroup.groupByValue }}
|
|
36
|
+
</FSSpan>
|
|
37
|
+
</FSRow>
|
|
38
|
+
</FSCol>
|
|
39
|
+
<FSRow
|
|
40
|
+
v-if="deviceTimestamp"
|
|
41
|
+
width="hug"
|
|
42
|
+
>
|
|
43
|
+
<FSSpan
|
|
44
|
+
font="text-overline"
|
|
45
|
+
>
|
|
46
|
+
{{ deviceTimestamp }}
|
|
47
|
+
</FSSpan>
|
|
48
|
+
</FSRow>
|
|
49
|
+
</FSCol>
|
|
50
|
+
</FSCard>
|
|
51
|
+
</template>
|
|
52
|
+
|
|
53
|
+
<script lang="ts">
|
|
54
|
+
import { computed, defineComponent, PropType } from "vue";
|
|
55
|
+
|
|
56
|
+
import { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
|
|
57
|
+
import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
|
|
58
|
+
|
|
59
|
+
import FSCard from "../FSCard.vue";
|
|
60
|
+
import FSChip from "../FSChip.vue";
|
|
61
|
+
import FSText from "../FSText.vue";
|
|
62
|
+
import FSSpan from "../FSSpan.vue";
|
|
63
|
+
import FSCol from "../FSCol.vue";
|
|
64
|
+
import FSRow from "../FSRow.vue";
|
|
65
|
+
|
|
66
|
+
export default defineComponent({
|
|
67
|
+
name: "FSStatusCard",
|
|
68
|
+
components: {
|
|
69
|
+
FSCard,
|
|
70
|
+
FSChip,
|
|
71
|
+
FSText,
|
|
72
|
+
FSSpan,
|
|
73
|
+
FSCol,
|
|
74
|
+
FSRow
|
|
75
|
+
},
|
|
76
|
+
props: {
|
|
77
|
+
modelStatus: {
|
|
78
|
+
type: Object as PropType<FSModelStatus>,
|
|
79
|
+
required: true
|
|
80
|
+
},
|
|
81
|
+
statusGroup: {
|
|
82
|
+
type: Object as PropType<FSDeviceStatusGroup>,
|
|
83
|
+
required: true
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
setup(props) {
|
|
87
|
+
const { epochToLongTimeFormat } = useTimeZone();
|
|
88
|
+
|
|
89
|
+
const deviceTimestamp = computed((): string => {
|
|
90
|
+
if (props.statusGroup.sourceTimestamp) {
|
|
91
|
+
return epochToLongTimeFormat(props.statusGroup.sourceTimestamp);
|
|
92
|
+
}
|
|
93
|
+
return "";
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
return {
|
|
97
|
+
deviceTimestamp
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
</script>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<FSCarousel
|
|
3
|
-
:height="
|
|
3
|
+
:height="['26px', '20px']"
|
|
4
4
|
>
|
|
5
5
|
<template #prev="{ props }">
|
|
6
6
|
<FSButton
|
|
@@ -39,10 +39,9 @@
|
|
|
39
39
|
</template>
|
|
40
40
|
|
|
41
41
|
<script lang="ts">
|
|
42
|
-
import {
|
|
42
|
+
import { defineComponent, PropType, ref } from "vue";
|
|
43
43
|
|
|
44
44
|
import { FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
|
|
45
|
-
import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
|
|
46
45
|
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
47
46
|
|
|
48
47
|
import FSCarousel from "../FSCarousel.vue";
|
|
@@ -69,14 +68,8 @@ export default defineComponent({
|
|
|
69
68
|
}
|
|
70
69
|
},
|
|
71
70
|
setup(props) {
|
|
72
|
-
const { isMobileSized } = useBreakpoints();
|
|
73
|
-
|
|
74
71
|
const tab = ref(0);
|
|
75
72
|
|
|
76
|
-
const height = computed((): number => {
|
|
77
|
-
return isMobileSized.value ? 20 : 26;
|
|
78
|
-
});
|
|
79
|
-
|
|
80
73
|
const deviceStatus = (modelStatus: FSModelStatus): FSDeviceStatusGroup[] => {
|
|
81
74
|
const deviceStatus = props.deviceStatuses
|
|
82
75
|
.find((deviceStatus: FSDeviceStatus) => deviceStatus.modelStatusId === modelStatus.id);
|
|
@@ -96,7 +89,6 @@ export default defineComponent({
|
|
|
96
89
|
|
|
97
90
|
return {
|
|
98
91
|
ColorEnum,
|
|
99
|
-
height,
|
|
100
92
|
tab,
|
|
101
93
|
deviceStatus
|
|
102
94
|
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-menu
|
|
3
|
-
v-if="$props.deviceAlert"
|
|
4
3
|
:closeOnContentClick="false"
|
|
5
4
|
v-model="menu"
|
|
6
5
|
>
|
|
@@ -19,71 +18,29 @@
|
|
|
19
18
|
</FSColorIcon>
|
|
20
19
|
</FSBadge>
|
|
21
20
|
</template>
|
|
22
|
-
<
|
|
23
|
-
:
|
|
24
|
-
|
|
25
|
-
>
|
|
26
|
-
<FSCol
|
|
27
|
-
align="center-center"
|
|
28
|
-
padding="6px 24px"
|
|
29
|
-
>
|
|
30
|
-
<FSCol
|
|
31
|
-
align="center-center"
|
|
32
|
-
gap="12px"
|
|
33
|
-
>
|
|
34
|
-
<FSChip
|
|
35
|
-
:color="criticityColor"
|
|
36
|
-
:prependIcon="statusIcon"
|
|
37
|
-
:label="$props.deviceAlert.label"
|
|
38
|
-
/>
|
|
39
|
-
<FSRow
|
|
40
|
-
width="hug"
|
|
41
|
-
>
|
|
42
|
-
<FSText>
|
|
43
|
-
{{ statusLabel }}
|
|
44
|
-
</FSText>
|
|
45
|
-
</FSRow>
|
|
46
|
-
</FSCol>
|
|
47
|
-
<FSRow
|
|
48
|
-
v-if="deviceTimestamp"
|
|
49
|
-
width="hug"
|
|
50
|
-
>
|
|
51
|
-
<FSSpan
|
|
52
|
-
font="text-overline"
|
|
53
|
-
>
|
|
54
|
-
{{ deviceTimestamp }}
|
|
55
|
-
</FSSpan>
|
|
56
|
-
</FSRow>
|
|
57
|
-
</FSCol>
|
|
58
|
-
</FSCard>
|
|
21
|
+
<FSWorstAlertCard
|
|
22
|
+
:deviceAlert="deviceAlert"
|
|
23
|
+
/>
|
|
59
24
|
</v-menu>
|
|
60
25
|
</template>
|
|
61
26
|
|
|
62
27
|
<script lang="ts">
|
|
63
28
|
import { computed, defineComponent, PropType, ref } from "vue";
|
|
64
29
|
|
|
65
|
-
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
66
30
|
import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
|
|
67
|
-
import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
|
|
68
31
|
import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
|
|
69
32
|
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
70
33
|
|
|
34
|
+
import FSWorstAlertCard from "./FSWorstAlertCard.vue";
|
|
71
35
|
import FSColorIcon from "../FSColorIcon.vue";
|
|
72
36
|
import FSBadge from "../FSBadge.vue";
|
|
73
|
-
import FSCard from "../FSCard.vue";
|
|
74
|
-
import FSChip from "../FSChip.vue";
|
|
75
|
-
import FSText from "../FSText.vue";
|
|
76
|
-
import FSSpan from "../FSSpan.vue";
|
|
77
37
|
|
|
78
38
|
export default defineComponent({
|
|
79
39
|
name: "FSWorstAlert",
|
|
80
40
|
components: {
|
|
41
|
+
FSWorstAlertCard,
|
|
81
42
|
FSColorIcon,
|
|
82
|
-
FSBadge
|
|
83
|
-
FSCard,
|
|
84
|
-
FSChip,
|
|
85
|
-
FSText,
|
|
86
|
-
FSSpan
|
|
43
|
+
FSBadge
|
|
87
44
|
},
|
|
88
45
|
props: {
|
|
89
46
|
deviceAlert: {
|
|
@@ -97,9 +54,6 @@ export default defineComponent({
|
|
|
97
54
|
}
|
|
98
55
|
},
|
|
99
56
|
setup(props) {
|
|
100
|
-
const { epochToLongTimeFormat } = useTimeZone();
|
|
101
|
-
const { $tr } = useTranslationsProvider();
|
|
102
|
-
|
|
103
57
|
const menu = ref(false);
|
|
104
58
|
|
|
105
59
|
const criticityColor = computed(() => {
|
|
@@ -123,19 +77,6 @@ export default defineComponent({
|
|
|
123
77
|
}
|
|
124
78
|
});
|
|
125
79
|
|
|
126
|
-
const statusLabel = computed(() => {
|
|
127
|
-
switch (props.deviceAlert?.status) {
|
|
128
|
-
case AlertStatus.Pending: return $tr("ui.alert-status.pending", "Pending");
|
|
129
|
-
case AlertStatus.Untriggered: return $tr("ui.alert-status.untriggered", "Untriggered");
|
|
130
|
-
case AlertStatus.Unresolved: return $tr("ui.alert-status.unresolved", "Unresolved");
|
|
131
|
-
case AlertStatus.Resolved: return $tr("ui.alert-status.resolved", "Resolved");
|
|
132
|
-
case AlertStatus.Expired: return $tr("ui.alert-status.expired", "Expired");
|
|
133
|
-
case AlertStatus.Triggered: return $tr("ui.alert-status.triggered", "Triggered");
|
|
134
|
-
case AlertStatus.Abandoned: return $tr("ui.alert-status.abandoned", "Abandoned");
|
|
135
|
-
default: return "";
|
|
136
|
-
}
|
|
137
|
-
});
|
|
138
|
-
|
|
139
80
|
const badgeLabel = computed((): string | null => {
|
|
140
81
|
if (props.deviceAlerts < 1) {
|
|
141
82
|
return null;
|
|
@@ -146,17 +87,8 @@ export default defineComponent({
|
|
|
146
87
|
return (props.deviceAlerts + 1).toString();
|
|
147
88
|
});
|
|
148
89
|
|
|
149
|
-
const deviceTimestamp = computed((): string => {
|
|
150
|
-
if (props.deviceAlert.sourceTimestamp) {
|
|
151
|
-
return epochToLongTimeFormat(props.deviceAlert.sourceTimestamp);
|
|
152
|
-
}
|
|
153
|
-
return "";
|
|
154
|
-
});
|
|
155
|
-
|
|
156
90
|
return {
|
|
157
|
-
deviceTimestamp,
|
|
158
91
|
criticityColor,
|
|
159
|
-
statusLabel,
|
|
160
92
|
statusIcon,
|
|
161
93
|
badgeLabel,
|
|
162
94
|
menu
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSCard
|
|
3
|
+
:elevation="true"
|
|
4
|
+
:border="false"
|
|
5
|
+
>
|
|
6
|
+
<FSCol
|
|
7
|
+
align="center-center"
|
|
8
|
+
padding="6px 24px"
|
|
9
|
+
>
|
|
10
|
+
<FSCol
|
|
11
|
+
align="center-center"
|
|
12
|
+
gap="12px"
|
|
13
|
+
>
|
|
14
|
+
<FSChip
|
|
15
|
+
:label="$props.deviceAlert.label"
|
|
16
|
+
:prependIcon="statusIcon"
|
|
17
|
+
:color="criticityColor"
|
|
18
|
+
/>
|
|
19
|
+
<FSRow
|
|
20
|
+
width="hug"
|
|
21
|
+
>
|
|
22
|
+
<FSText>
|
|
23
|
+
{{ statusLabel }}
|
|
24
|
+
</FSText>
|
|
25
|
+
</FSRow>
|
|
26
|
+
</FSCol>
|
|
27
|
+
<FSRow
|
|
28
|
+
v-if="deviceTimestamp"
|
|
29
|
+
width="hug"
|
|
30
|
+
>
|
|
31
|
+
<FSSpan
|
|
32
|
+
font="text-overline"
|
|
33
|
+
>
|
|
34
|
+
{{ deviceTimestamp }}
|
|
35
|
+
</FSSpan>
|
|
36
|
+
</FSRow>
|
|
37
|
+
</FSCol>
|
|
38
|
+
</FSCard>
|
|
39
|
+
</template>
|
|
40
|
+
|
|
41
|
+
<script lang="ts">
|
|
42
|
+
import { computed, defineComponent, PropType, ref } from "vue";
|
|
43
|
+
|
|
44
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
45
|
+
import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
|
|
46
|
+
import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
|
|
47
|
+
import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
|
|
48
|
+
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
49
|
+
|
|
50
|
+
import FSCard from "../FSCard.vue";
|
|
51
|
+
import FSChip from "../FSChip.vue";
|
|
52
|
+
import FSText from "../FSText.vue";
|
|
53
|
+
import FSSpan from "../FSSpan.vue";
|
|
54
|
+
import FSCol from "../FSCol.vue";
|
|
55
|
+
import FSRow from "../FSRow.vue";
|
|
56
|
+
|
|
57
|
+
export default defineComponent({
|
|
58
|
+
name: "FSWorstAlertCard",
|
|
59
|
+
components: {
|
|
60
|
+
FSCard,
|
|
61
|
+
FSChip,
|
|
62
|
+
FSText,
|
|
63
|
+
FSSpan,
|
|
64
|
+
FSCol,
|
|
65
|
+
FSRow
|
|
66
|
+
},
|
|
67
|
+
props: {
|
|
68
|
+
deviceAlert: {
|
|
69
|
+
type: Object as PropType<FSDeviceAlert>,
|
|
70
|
+
required: true
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
setup(props) {
|
|
74
|
+
const { epochToLongTimeFormat } = useTimeZone();
|
|
75
|
+
const { $tr } = useTranslationsProvider();
|
|
76
|
+
|
|
77
|
+
const criticityColor = computed(() => {
|
|
78
|
+
switch (props.deviceAlert?.criticity) {
|
|
79
|
+
case Criticity.Error: return ColorEnum.Error;
|
|
80
|
+
case Criticity.Warning: return ColorEnum.Warning;
|
|
81
|
+
default: return ColorEnum.Primary;
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
const statusIcon = computed(() => {
|
|
86
|
+
switch (props.deviceAlert?.status) {
|
|
87
|
+
case AlertStatus.Pending: return "mdi-timer-outline";
|
|
88
|
+
case AlertStatus.Untriggered: return "mdi-timer-off-outline";
|
|
89
|
+
case AlertStatus.Unresolved: return "mdi-alert-circle-outline";
|
|
90
|
+
case AlertStatus.Resolved: return "mdi-check-circle-outline";
|
|
91
|
+
case AlertStatus.Expired: return "mdi-clock-outline";
|
|
92
|
+
case AlertStatus.Triggered: return "mdi-alert-circle-outline";
|
|
93
|
+
case AlertStatus.Abandoned: return "mdi-cancel"
|
|
94
|
+
default: return "";
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
const statusLabel = computed(() => {
|
|
99
|
+
switch (props.deviceAlert?.status) {
|
|
100
|
+
case AlertStatus.Pending: return $tr("ui.alert-status.pending", "Pending");
|
|
101
|
+
case AlertStatus.Untriggered: return $tr("ui.alert-status.untriggered", "Untriggered");
|
|
102
|
+
case AlertStatus.Unresolved: return $tr("ui.alert-status.unresolved", "Unresolved");
|
|
103
|
+
case AlertStatus.Resolved: return $tr("ui.alert-status.resolved", "Resolved");
|
|
104
|
+
case AlertStatus.Expired: return $tr("ui.alert-status.expired", "Expired");
|
|
105
|
+
case AlertStatus.Triggered: return $tr("ui.alert-status.triggered", "Triggered");
|
|
106
|
+
case AlertStatus.Abandoned: return $tr("ui.alert-status.abandoned", "Abandoned");
|
|
107
|
+
default: return "";
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
const deviceTimestamp = computed((): string => {
|
|
112
|
+
if (props.deviceAlert.sourceTimestamp) {
|
|
113
|
+
return epochToLongTimeFormat(props.deviceAlert.sourceTimestamp);
|
|
114
|
+
}
|
|
115
|
+
return "";
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
return {
|
|
119
|
+
deviceTimestamp,
|
|
120
|
+
criticityColor,
|
|
121
|
+
statusLabel,
|
|
122
|
+
statusIcon
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dative-gpi/foundation-shared-components",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.25",
|
|
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": "0.0.
|
|
14
|
-
"@dative-gpi/foundation-shared-services": "0.0.
|
|
13
|
+
"@dative-gpi/foundation-shared-domain": "0.0.25",
|
|
14
|
+
"@dative-gpi/foundation-shared-services": "0.0.25",
|
|
15
15
|
"@fontsource/montserrat": "^5.0.16",
|
|
16
16
|
"@lexical/clipboard": "^0.12.5",
|
|
17
17
|
"@lexical/history": "^0.12.5",
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"sass": "^1.69.5",
|
|
33
33
|
"sass-loader": "^13.3.2"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "a390e06ed87cce4f2ae27570f474f5b52419327c"
|
|
36
36
|
}
|