@dative-gpi/foundation-shared-components 1.0.157 → 1.0.158-devices-latency-2

package/components/tiles/FSLocationTileUI.vue

@@ -15,46 +15,25 @@
       <FSCol
         gap="8px"
       >
-        <FSRow
-          v-if="$props.deviceCount"
-          :wrap="false"
-          align="center-left"
-        >
-          <FSColor
-            width="24px"
-            height="24px"
-            :color="ColorEnum.Primary"
-            :border="false"
-          >
-            <FSRow
-              align="center-center"
-            >
-              <FSSpan
-                font="text-overline"
-              >
-                {{ capNumberToString($props.deviceCount) }}
-              </FSSpan>
-            </FSRow>
-          </FSColor>
-          <FSSpan
-            font="text-overline"
-          >
-            {{ $tr("ui.common.devices", "Equipment(s)") }}
-          </FSSpan>
-        </FSRow>
+        <FSEntityCountBadge
+          v-if="$props.deviceCount !== undefined"
+          :label="$tr('ui.common.devices', 'Device(s)')"
+          :count="$props.deviceCount"
+          :color="ColorEnum.Primary"
+        />
         <FSRow
           v-if="$props.address"
           :wrap="false"
           align="center-left"
         >
           <FSColor
-            width="24px"
             height="24px"
             :color="ColorEnum.Primary"
             :border="false"
           >
             <FSRow
               align="center-center"
+              width="24px"
             >
               <FSIcon
                 icon="mdi-map-marker-radius-outline"
@@ -79,6 +58,7 @@ import { defineComponent, type PropType } from "vue";
 import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSEntityCountBadge from './FSEntityCountBadge.vue';
 import FSSimpleTileUI from './FSSimpleTileUI.vue';
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
@@ -88,6 +68,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSLocationTileUI",
   components: {
+    FSEntityCountBadge,
     FSSimpleTileUI,
     FSColor,
     FSSpan,

package/components/tiles/FSSimpleTileUI.vue

@@ -128,7 +128,7 @@ export default defineComponent({
       default: ColorEnum.Primary
     },
     bottomColor: {
-      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      type: [Array, String] as PropType<ColorBase | ColorBase[] | null>,
       required: false,
       default: ColorEnum.Light
     },
@@ -147,7 +147,7 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
 
     const iconBackgroundColor = computed((): ColorBase | ColorBase[] => {
-      return props.iconBackgroundColor ? props.bottomColor : ColorEnum.Background;
+      return props.iconBackgroundColor ?? ColorEnum.Background;
     });
 
     const imageSize = computed((): number => {

package/components/views/desktop/FSBaseDefaultDesktopView.vue

@@ -29,7 +29,7 @@
         </FSRow>
         <FSCol
           v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
-          :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
+          :padding="$slots.toolbar ? '0px 24px 16px 24px' : '0px 24px'"
           gap="16px"
         >
           <FSCol>

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -9,6 +9,7 @@
     >
       <FSRow
         gap="24px"
+        :height="actualImageSize"
         :wrap="false"
       >
         <template 
@@ -54,7 +55,7 @@
             >
               <slot
                 name="subtitle"
-                v-if="topOffset < 60"
+                v-if="topOffset < 64"
               >
                 <FSText
                   v-if="$props.subtitle"
@@ -65,10 +66,11 @@
               </slot>
               <slot
                 name="description"
-                v-if="topOffset < 20"
+                v-if="topOffset < 24"
               >
                 <FSText
                   v-if="$props.description"
+                  :lineClamp="2"
                   font="text-body"
                 >
                   {{ $props.description }}
@@ -146,9 +148,9 @@ export default defineComponent({
       default: () => ["124px", "96px", "80px"]
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
-      default: "mdi-ab-testing"
+      default: null
     },
     iconColor: {
       type: String as PropType<ColorBase>,

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -15,7 +15,7 @@
         <FSRow
           style="position: sticky; top: 0px; z-index: 3;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
-          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
+          :padding="`16px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
         >
           <slot
             name="title"
@@ -29,7 +29,7 @@
         </FSRow>
         <FSCol
           v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
-          :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
           gap="16px"
         >
           <FSCol>
@@ -45,7 +45,7 @@
         <FSRow
           v-if="$slots.toolbar"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
-          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
         >
           <FSSlideGroup>
             <slot
@@ -58,7 +58,7 @@
       <FSCol
         height="fill"
         gap="0px"
-        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
+        :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 16px 12px`"
       >
         <slot />
       </FSCol>
@@ -108,7 +108,7 @@ export default defineComponent({
     toolbarTopOffset: {
       type: String,
       required: false,
-      default: "72px" 
+      default: "52px" 
     },
     stickyTitleTopOffset: {
       type: String,

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -8,7 +8,8 @@
       #title
     >
       <FSRow
-        gap="24px"
+        gap="12px"
+        :height="actualImageSize"
         :wrap="false"
       >
         <FSImage 
@@ -31,6 +32,7 @@
           style="min-width: 0"
           align="center-left"
           height="fill"
+          :gap="$props.subtitle && $props.description ? '6px' : '8px'"
         >
           <slot
             name="title"
@@ -44,26 +46,31 @@
               name="title-extra"
               v-bind="{ topOffset }"
             >
-              <slot
-                name="subtitle"
+              <FSCol
+                gap="4px"
               >
-                <FSText
-                  v-if="$props.subtitle && topOffset < 60"
-                  font="text-button"
+                <slot
+                  name="subtitle"
                 >
-                  {{ $props.subtitle }}
-                </FSText>
-              </slot>
-              <slot
-                name="description"
-              >
-                <FSText
-                  v-if="$props.description && topOffset < 20"
-                  font="text-body"
+                  <FSText
+                    v-if="$props.subtitle && topOffset < 48"
+                    font="text-button"
+                  >
+                    {{ $props.subtitle }}
+                  </FSText>
+                </slot>
+                <slot
+                  name="description"
                 >
-                  {{ $props.description }}
-                </FSText>
-              </slot>
+                  <FSText
+                    v-if="$props.description && topOffset < 8"
+                    :lineClamp="2"
+                    font="text-body"
+                  >
+                    {{ $props.description }}
+                  </FSText>
+                </slot>
+              </FSCol>
             </slot>
           </slot>
         </FSCol>
@@ -136,9 +143,9 @@ export default defineComponent({
       default: () => ["124px", "96px", "80px"]
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
-      default: "mdi-ab-testing"
+      default: null
     },
     iconColor: {
       type: String as PropType<ColorBase>,
@@ -183,7 +190,7 @@ export default defineComponent({
       const minSize = sizeToVar(props.minImageSize);
       const actualMinSize = parseInt(minSize);
 
-      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
+      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 12));
     }
 
     delete slots.title;

package/composables/index.ts

@@ -3,7 +3,6 @@ export * from "./useAutocomplete";
 export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
-export * from "./useMagicFieldProvider";
 export * from "./useMapLayers";
 export * from "./useRules";
 export * from "./useSlots";

package/composables/useMapLayers.ts

@@ -1,62 +1,69 @@
-import { tileLayer } from 'leaflet';
-
+import { ref, onMounted } from "vue";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-
 import { MapLayers } from '@dative-gpi/foundation-shared-components/models';
 
 export const useMapLayers = () => {
   const { $tr } = useTranslationsProvider();
-
   const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "";
 
-  const layers = [
-    {
-      name: MapLayers.Map,
-      label: $tr("ui.map-layer.map", "Map"),
-      image: new URL("../../assets/images/map/map.png", import.meta.url).href,
-      layers: [
-        tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
-          maxZoom: 22,
-          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-          attribution: '© Google Map Data',
-          className: 'fs-map-tile-base-layer'
-        })
-      ]
-    },
-    {
-      name: MapLayers.Imagery,
-      label: $tr("ui.map-layer.imagery", "Imagery"),
-      image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-      layers: [
-        tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${apiKey}`, {
-          maxZoom: 22,
-          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-          attribution: '© Google Map Data',
-          className: 'fs-map-tile-base-layer'
-        })
-      ]
-    },
-    {
-      name: MapLayers.Snow,
-      label: $tr("ui.map-layer.snow", "Snow ski map"),
-      image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
-      layers: [
-        tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
-          maxZoom: 22,
-          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-          attribution: '© Google Map Data',
-          className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
-        }),
-        tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
-          maxZoom: 18,
-          attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
-          className: 'fs-map-tile-base-layer'
-        })
-      ]
+  const layers = ref<any[]>([]);
+
+  onMounted(async () => {
+    try {
+      const leaflet = await import('leaflet');
+      const tileLayer = leaflet.tileLayer;
+
+      layers.value = [
+        {
+          name: MapLayers.Map,
+          label: $tr("ui.map-layer.map", "Map"),
+          image: new URL("../assets/images/map/map.png", import.meta.url).href,
+          layers: [
+            tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
+              maxZoom: 22,
+              subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+              attribution: '© Google Map Data',
+              className: 'fs-map-tile-base-layer'
+            })
+          ]
+        },
+        {
+          name: MapLayers.Imagery,
+          label: $tr("ui.map-layer.imagery", "Imagery"),
+          image: new URL("../assets/images/map/imagery.png", import.meta.url).href,
+          layers: [
+            tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${apiKey}`, {
+              maxZoom: 22,
+              subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+              attribution: '© Google Map Data',
+              className: 'fs-map-tile-base-layer'
+            })
+          ]
+        },
+        {
+          name: MapLayers.Snow,
+          label: $tr("ui.map-layer.snow", "Snow ski map"),
+          image: new URL("../assets/images/map/snow.png", import.meta.url).href,
+          layers: [
+            tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
+              maxZoom: 22,
+              subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+              attribution: '© Google Map Data',
+              className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
+            }),
+            tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
+              maxZoom: 18,
+              attribution: 'Map data: &copy; OpenStreetMap contributors & ODbL, CC-BY-SA',
+              className: 'fs-map-tile-base-layer'
+            })
+          ]
+        }
+      ];
+    } catch (err) {
+      console.error("Leaflet is not installed or failed to load.", err);
+      layers.value = [];
     }
-  ];
+  });
 
-  return {
-    layers
-  };
-}
+  return { layers };
+};

package/models/index.ts

@@ -8,7 +8,6 @@ export * from "./errors";
 export * from "./grids";
 export * from "./images";
 export * from "./map";
-export * from "./magicFields";
 export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.157",
+  "version": "1.0.158-devices-latency-2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.157",
-    "@dative-gpi/foundation-shared-services": "1.0.157"
+    "@dative-gpi/foundation-shared-domain": "1.0.158-devices-latency-2",
+    "@dative-gpi/foundation-shared-services": "1.0.158-devices-latency-2"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0aedaf4c6e5f977982f18d5936f5cdfaf7ab86a4"
+  "gitHead": "63914dedbe1ac988443cf07e471e2fa6120392f2"
 }

package/styles/components/fs_col.scss

@@ -4,7 +4,7 @@
     overflow-y: var(--fs-col-overflow);
     padding: var(--fs-col-padding);
     gap: var(--fs-col-gap);
-    max-width: 100%;
+    max-width: var(--fs-col-max-width);
 
     &-top-left {
         justify-content: flex-start;

package/tools/alertsTools.ts

@@ -74,9 +74,10 @@ export const AlertTools = {
   },
   criticityLabel(value: Criticity): string {
     switch (value) {
+      case Criticity.Information: return $tr('ui.common.information', 'Information');
       case Criticity.Warning: return $tr('ui.common.warning', 'Warning');
       case Criticity.Error: return $tr('ui.common.error', 'Error');
-      default: return $tr('ui.common.information', 'Information');
+      default: return $tr("ui.common.none", "None");
     }
   },
   statusColor(status: AlertStatus): ColorEnum {

package/tools/chartsTools.ts

@@ -1,4 +1,4 @@
-import { AxisType, ColorSets, SerieType, ChartType, TimeUnit, ChartOrigin, AggregationType, DisplayAs, FilterType, HeatmapRule, OperationOn, PlanningType, PlotPer } from "@dative-gpi/foundation-shared-domain/enums";
+import { AxisType, ColorSets, SerieType, ChartType, TimeUnit, ChartOrigin, AggregationType, DisplayAs, FilterType, HeatmapRule, OperationOn, PlanningType, PlotPer, ApplicationScope } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
@@ -14,6 +14,18 @@ export const chartOriginLabel = (type: ChartOrigin): string => {
   }
 };
 
+export const applicationScopeLabel = (type: ApplicationScope): string => {
+  switch (type) {
+    case ApplicationScope.None:
+      return $tr("ui.common.none", "None");
+    case ApplicationScope.Organisation:
+      return $tr("ui.common.custom", "Custom");
+    case ApplicationScope.OrganisationType:
+      return $tr("ui.common.shared", "Shared");
+  }
+};
+
+
 export const chartOriginColor = (type: ChartOrigin): ColorBase => {
   switch (type) {
     case ChartOrigin.None: return ColorEnum.Error;
@@ -166,6 +178,7 @@ export const plotPerLabel = (plotper: PlotPer | number): string => {
     case PlotPer.Group: return $tr("ui.common.group", "Group");
     case PlotPer.Location: return $tr("ui.common.location", "Location");
     case PlotPer.Device: return $tr("ui.common.device", "Device");
+    case PlotPer.Grouping: return $tr("ui.plot-per.grouping", "Personalized");
     default: return $tr("ui.common.none", "None");
   }
 };

package/components/fields/FSMagicConfigField.vue

@@ -1,171 +0,0 @@
-<template>
-  <FSRow
-    class="fs-magic-config-field"
-  >
-    <component
-      v-if="$props.type"
-      class="fs-magic-config-field-value"
-      :is="get($props.type)"
-      :label="$tr('ui.common.value', 'Value')"
-      :disabled="$props.disabled"
-      :required="true"
-      :rules="rules"
-      :modelValue="valueToInput"
-      @update:modelValue="inputToValue"
-    />
-    <FSRow
-      gap="24px"
-    >
-      <FSTranslateField
-        :label="$tr('entity.common.label', 'Label')"
-        :disabled="$props.disabled"
-        :modelValue="$props.labelDefault"
-        :translations="$props.translations"
-        @update:modelValue="$emit('update:labelDefault', $event)"
-        @update:translations="$emit('update:translations', $event)"
-      />
-      <FSRow
-        class="fs-magic-config-field-actions"
-        width="hug"
-        :wrap="false"
-      >
-        <FSButtonRemoveIcon
-          @click="$emit('click:remove')"
-        />
-        <FSButtonAddIcon
-          @click="$emit('click:add')"
-        />
-      </FSRow>
-    </FSRow>
-  </FSRow>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
-
-import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules, AutocompleteRules } from "../../models";
-import { useMagicFieldProvider } from "../../composables";
-import { MagicFieldType } from "../../models/magicFields";
-
-import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
-import FSButtonAddIcon from "../buttons/FSButtonAddIcon.vue";
-import FSTranslateField from "./FSTranslateField.vue";
-import FSRow from "../FSRow.vue";
-
-export default defineComponent({
-  name: "FSMagicConfigField",
-  components: {
-    FSButtonRemoveIcon,
-    FSTranslateField,
-    FSButtonAddIcon,
-    FSRow
-  },
-  props: {
-    type: {
-      type: Number as PropType<MagicFieldType>,
-      required: false,
-      default: MagicFieldType.TextField
-    },
-    labelDefault: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    modelValue: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    translations: {
-      type: Array as PropType<{ languageCode: string; label: string }[]>,
-      required: false,
-      default: () => []
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  emits: ["click:remove", "click:add", "update:modelValue", "update:labelDefault", "update:translations"],
-  setup(props, { emit }) {
-    const { get } = useMagicFieldProvider();
-
-    const rules = computed((): Function[] => {
-      switch (props.type) {
-        case MagicFieldType.NumberField:
-          return [NumberRules.required()];
-        case MagicFieldType.TextField:
-          return [TextRules.required()];
-        case MagicFieldType.DateTimeField:
-          return [DateRules.required()];
-        case MagicFieldType.IconField:
-          return [IconRules.required()];
-        case MagicFieldType.TimeField:
-          return [TimeRules.required()];
-        case MagicFieldType.TimeStepField:
-          return [TimeStepRules.required()];
-        case MagicFieldType.PlotPerField:
-          return [AutocompleteRules.required()];
-      }
-      return [];
-    });
-
-    const valueToInput = computed((): any => {
-      if (!props.modelValue) {
-        return null;
-      }
-
-      switch (props.type) {
-        case MagicFieldType.NumberField:
-        case MagicFieldType.DateTimeField:
-        case MagicFieldType.TimeField:
-          if (isNaN(parseFloat(props.modelValue))) {
-            return null;
-          }
-          return parseFloat(props.modelValue);
-        case MagicFieldType.Switch: 
-          return props.modelValue === "true";
-        case MagicFieldType.TimeStepField:
-          return JSON.parse(props.modelValue);
-        case MagicFieldType.PlotPerField:
-          return parseInt(props.modelValue);
-        default:
-          return props.modelValue;
-      }
-    });
-
-    const inputToValue = (value: any) => {
-      if (!value) {
-        emit("update:modelValue", null);
-      }
-
-      switch (props.type) {
-        case MagicFieldType.NumberField:
-        case MagicFieldType.Switch: 
-        case MagicFieldType.DateTimeField:
-        case MagicFieldType.TimeField:
-          emit("update:modelValue", value.toString());
-          break;
-        case MagicFieldType.TimeStepField:
-          emit("update:modelValue", JSON.stringify(value));
-          break;
-        case MagicFieldType.PlotPerField:
-          emit("update:modelValue", value.toString());
-          break;
-        default:
-          emit("update:modelValue", value);
-          break;
-      }
-    };
-
-    return {
-      MagicFieldType,
-      valueToInput,
-      rules,
-      inputToValue,
-      get
-    };
-  },
-});
-</script>