@dative-gpi/foundation-shared-components 1.0.66 → 1.0.67-map-carousel

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -0,0 +1,171 @@
+<template>
+  <component
+    v-if="$props.modelStatus"
+    class="fs-status-rich-card"
+    topRightPadding="2px"
+    variant="standard"
+    :is="$attrs.onClick ? FSClickable : FSCard"
+    :padding="$props.padding"
+    :height="$props.height"
+    :width="$props.width"
+    :color="color"
+    :style="style"
+  >
+    <FSCol
+      align="center-center"
+      :gap="$props.gap"
+    >
+      <FSRow
+        align="top-center"
+      >
+        <FSIcon
+          v-if="icon"
+        >
+          {{ icon }}
+        </FSIcon>
+        <FSText
+          v-if="value"
+          font="text-button"
+        >
+          {{ value }}
+        </FSText>
+      </FSRow>
+      <FSText
+        font="text-overline"
+        align="center"
+        :lineClamp="$props.titleClamp"
+      >
+        {{ title }}
+      </FSText>
+      <slot
+        name="footer"
+        v-bind="{ color }"
+      />
+    </FSCol>
+    <template
+      #top-right
+    >
+      <slot
+        name="corner"
+        v-bind="{ color }"
+      />
+    </template>
+  </component>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+
+import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSClickable from "../FSClickable.vue";
+import FSCard from "../FSCard.vue";
+import FSIcon from "../FSChip.vue";
+import FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSStatusRichCard",
+  components: {
+    FSClickable,
+    FSCard,
+    FSIcon,
+    FSText,
+    FSCol
+  },
+  props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "100px"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "160px"
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "12px"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    title: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    titleClamp: {
+      type: Number,
+      required: false,
+      default: 2
+    },
+    color: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    fillBackground: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelStatus: {
+      type: Object as PropType<FSModelStatus | undefined>,
+      required: true
+    },
+    statusGroup: {
+      type: Object as PropType<FSDeviceStatusGroup | undefined>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const color = computed((): string => {
+      return props.color ?? props.statusGroup?.color ?? props.modelStatus?.colorDefault ?? ColorEnum.Primary;
+    });
+
+    const icon = computed((): string | null => {
+      return props.statusGroup?.icon ?? props.modelStatus?.iconDefault ?? null;
+    });
+
+    const title = computed((): string => {
+      return props.title ?? props.modelStatus?.label ?? "";
+    });
+
+    const value = computed((): string | null => {
+      if (props.statusGroup?.label) {
+        return props.statusGroup.label;
+      }
+      if (props.statusGroup?.value && !isNaN(parseFloat(props.statusGroup?.value))) {
+        return `${parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 })} ${props.statusGroup.unit}`;
+      }
+      if (props.statusGroup?.value) {
+        return `${props.statusGroup?.value} ${props.statusGroup?.unit}`;
+      }
+      return null;
+    });
+
+    const style = computed((): StyleValue => ({
+      "--fs-status-rich-card-background-color": props.fillBackground ? getColors(color.value).light : "transparent",
+      "--fs-status-rich-card-border-color": props.fillBackground ? getColors(color.value).base : getColors(ColorEnum.Light).dark
+    }));
+
+    return {
+      FSClickable,
+      FSCard,
+      color,
+      style,
+      title,
+      value,
+      icon
+    };
+  }
+});
+</script>

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="menu"
     location="bottom center"
@@ -9,16 +9,17 @@
     >
       <FSBadge
         :content="badgeLabel"
-        :color="criticityColor"
+        :color="AlertTools.criticityColor($props.deviceWorstAlert?.criticity)"
       >
         <FSColorIcon
           class="fs-stopclick"
-          size="m"
-          :color="criticityColor"
+          :padding="$props.padding"
+          :color="AlertTools.criticityColor($props.deviceWorstAlert?.criticity)"
+          :size="$props.size"
           @click.prevent.stop
           v-bind="props"
         >
-          {{ statusIcon }}
+          {{ AlertTools.statusIcon($props.deviceWorstAlert?.status) }}
         </FSColorIcon>
       </FSBadge>
     </template>
@@ -27,26 +28,29 @@
       :alertTo="$props.alertTo"
       @close="menu = false"
     />
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
+
 import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
-import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSWorstAlertCard from "./FSWorstAlertCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
 import FSBadge from "../FSBadge.vue";
+import FSMenu from '../FSMenu.vue';
 
 export default defineComponent({
   name: "FSWorstAlert",
   components: {
     FSWorstAlertCard,
     FSColorIcon,
-    FSBadge
+    FSBadge,
+    FSMenu
   },
   props: {
     deviceWorstAlert: {
@@ -62,45 +66,29 @@ export default defineComponent({
       type: Function,
       required: false,
       default: null
+    },
+    size: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      default: "m"
+    },
+    padding: {
+      type: [String, Number] as PropType<string | number>,
+      default: "8px"
     }
   },
   setup(props) {
     const menu = ref(false);
 
-    const criticityColor = computed(() => {
-      switch (props.deviceWorstAlert?.criticity) {
-        case Criticity.Error: return ColorEnum.Error;
-        case Criticity.Warning: return ColorEnum.Warning;
-        default: return ColorEnum.Primary;
-      }
-    });
-
-    const statusIcon = computed(() => {
-      switch (props.deviceWorstAlert?.status) {
-        case AlertStatus.Pending:     return "mdi-timer-outline";
-        case AlertStatus.Untriggered: return "mdi-timer-off-outline";
-        case AlertStatus.Unresolved:  return "mdi-alert-circle-outline";
-        case AlertStatus.Resolved:    return "mdi-check-circle-outline";
-        case AlertStatus.Expired:     return "mdi-clock-outline";
-        case AlertStatus.Triggered:   return "mdi-alert-circle-outline";
-        case AlertStatus.Abandoned:   return "mdi-cancel"
-        default:                      return "";
-      }
-    });
-
     const badgeLabel = computed((): string | null => {
       if (!props.deviceAlerts || props.deviceAlerts.length < 1) {
         return null;
       }
-      if (props.deviceAlerts.length > 9) {
-        return "9+";
-      }
-      return props.deviceAlerts.length.toString();
+
+      return capNumberToString(props.deviceAlerts.length, 9);
     });
 
     return {
-      criticityColor,
-      statusIcon,
+      AlertTools,
       badgeLabel,
       menu
     };

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -9,19 +9,19 @@
     >
       <FSChip
         :label="$tr('ui.common.alert', 'Alert')"
-        :prependIcon="statusIcon"
-        :color="criticityColor"
+        :prependIcon="AlertTools.statusIcon($props.deviceAlert?.status)"
+        :color="AlertTools.criticityColor($props.deviceAlert?.criticity)"
       />
       <FSCol
         align="center-center"
         gap="0px"
       >
         <FSText>
-          {{ $tr('ui.alert.status', 'Status') }} : {{ statusLabel }}
+          {{ $tr('entity.alert.current-status', 'Status') }} : {{ AlertTools.statusLabel($props.deviceAlert?.status) }}
         </FSText>
         <FSText
           font="text-button"
-          :color="criticityColor"
+          :color="AlertTools.criticityColor($props.deviceAlert?.criticity)"
         >
           {{ $props.deviceAlert.label }}
         </FSText>
@@ -46,11 +46,9 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { type FSDeviceAlert} from "@dative-gpi/foundation-shared-components/models";
-import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
 
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
@@ -81,54 +79,17 @@ export default defineComponent({
   emits: ["close"],
   setup(props) {
     const { epochToLongTimeFormat } = useDateFormat();
-    const { $tr } = useTranslationsProvider();
-
-    const criticityColor = computed(() => {
-      switch (props.deviceAlert?.criticity) {
-        case Criticity.Error: return ColorEnum.Error;
-        case Criticity.Warning: return ColorEnum.Warning;
-        default: return ColorEnum.Primary;
-      }
-    });
-
-    const statusIcon = computed(() => {
-      switch (props.deviceAlert?.status) {
-        case AlertStatus.Pending:     return "mdi-timer-outline";
-        case AlertStatus.Untriggered: return "mdi-timer-off-outline";
-        case AlertStatus.Unresolved:  return "mdi-alert-circle-outline";
-        case AlertStatus.Resolved:    return "mdi-check-circle-outline";
-        case AlertStatus.Expired:     return "mdi-clock-outline";
-        case AlertStatus.Triggered:   return "mdi-alert-circle-outline";
-        case AlertStatus.Abandoned:   return "mdi-cancel"
-        default:                      return "";
-      }
-    });
-
-    const statusLabel = computed(() => {
-      switch (props.deviceAlert?.status) {
-        case AlertStatus.Pending:     return $tr("ui.alert-status.pending", "Pending");
-        case AlertStatus.Untriggered: return $tr("ui.alert-status.untriggered", "Untriggered");
-        case AlertStatus.Unresolved:  return $tr("ui.alert-status.unresolved", "Unresolved");
-        case AlertStatus.Resolved:    return $tr("ui.alert-status.resolved", "Resolved");
-        case AlertStatus.Expired:     return $tr("ui.alert-status.expired", "Expired");
-        case AlertStatus.Triggered:   return $tr("ui.alert-status.triggered", "Triggered");
-        case AlertStatus.Abandoned:   return $tr("ui.alert-status.abandoned", "Abandoned");
-        default:                      return "";
-      }
-    });
 
     const deviceTimestamp = computed((): string => {
       if (props.deviceAlert.sourceTimestamp) {
-        return epochToLongTimeFormat(props.deviceAlert.sourceTimestamp);
+        return epochToLongTimeFormat(props.deviceAlert.actualTimestamp);
       }
       return "";
     });
 
     return {
       deviceTimestamp,
-      criticityColor,
-      statusLabel,
-      statusIcon
+      AlertTools
     };
   }
 });