@dative-gpi/foundation-shared-components 0.0.101 → 0.0.103

package/components/FSColor.vue

@@ -5,7 +5,9 @@
     :style="style"
     v-bind="$attrs"
   >
-    <slot v-bind="{ color: $props.color, colors }" />
+    <slot
+      v-bind="{ color: $props.color, colors }"
+    />
   </FSCard>
 </template>
 
@@ -39,7 +41,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string] : string | null | undefined } => {
       return {
         "--fs-color-background-color": colors.value.light,
         "--fs-color-border-color"    : colors.value.lightContrast,

package/components/FSDialogMultiForm.vue

@@ -228,7 +228,6 @@ export default defineComponent({
     };
 
     const onSubmit = () => {
-      console.log(valid.value)
       if (valid.value) {
         switch (currentStep.value) {
           case props.steps:

package/components/FSGrid.vue

@@ -14,27 +14,37 @@
       <FSCol
         gap="2px"
       >
-        <template v-if="headerSlot(item.code)">
+        <template
+          v-if="headerSlot(item.code)"
+        >
           <component
             :is="headerSlot(item.code)"
             v-bind="{ item }"
           />
         </template>
-        <template v-else>
+        <template
+          v-else
+        >
           <FSText
             :font="item.hideDefault ? 'text-body' : 'text-overline'"
           >
             {{ item.label }}
           </FSText>
         </template>
-        <template v-if="!item.hideDefault">
-          <template v-if="itemSlot(item.code)">
+        <template
+          v-if="!item.hideDefault"
+        >
+          <template
+            v-if="itemSlot(item.code)"
+          >
             <component
               :is="itemSlot(item.code)"
               v-bind="{ item }"
             />
           </template>
-          <template v-else>
+          <template
+            v-else
+          >
             <FSText>
               {{ item.value }}
             </FSText>
@@ -75,8 +85,8 @@ export default defineComponent({
   props: {
     items: {
       type: Array as PropType<FSGridItem[]>,
-      default: [],
-      required: false
+      required: false,
+      default: () => []
     }
   },
   setup() {
@@ -123,9 +133,9 @@ export default defineComponent({
 
     return {
       style,
-      itemSlot,
+      itemEndSlot,
       headerSlot,
-      itemEndSlot
+      itemSlot
     };
   }
 });

package/components/FSGridMosaic.vue

@@ -18,8 +18,14 @@
         <FSGrid
           :items="item.items"
         >
-          <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
+          <template
+            v-for="(_, name) in $slots"
+            v-slot:[name]="slotData"
+          >
+            <slot
+              :name="name"
+              v-bind="slotData"
+            />
           </template>
         </FSGrid>
       </FSCol>
@@ -47,8 +53,8 @@ export default defineComponent({
   props: {
     items: {
       type: Array as PropType<FSGridMosaic[]>,
-      default: [],
-      required: false
+      required: false,
+      default: () => []
     },
     cols: {
       type: Number as PropType<1 | 2>,
@@ -60,7 +66,7 @@ export default defineComponent({
     const { isExtraSmall } = useBreakpoints();
 
     const width = computed(() => {
-        return props.cols == 2 && !isExtraSmall.value ? "calc(50% - 16px)" : "100%";
+      return props.cols == 2 && !isExtraSmall.value ? "calc(50% - 16px)" : "100%";
     });
 
     return {

package/components/deviceOrganisations/FSStatusesRow.vue

@@ -1,36 +1,66 @@
 <template>
   <FSRow
-    v-for="(modelStatus, index) in $props.modelStatuses"
-    align="center-center"
-    width="hug"
+    align="center-left"
     gap="4px"
-    :key="index"
     :wrap="false"
   >
-    <FSStatus
-      v-for="(statusGroup, index) in deviceStatus(modelStatus)"
-      :modelStatus="modelStatus"
-      :statusGroup="statusGroup"
-      :key="index"
+    <FSConnectivity
+      v-if="$props.deviceConnectivity && $props.deviceConnectivity.status != ConnectivityStatus.None"
+      :deviceConnectivity="$props.deviceConnectivity"
     />
+    <FSWorstAlert
+      v-if="$props.deviceWorstAlert"
+      :deviceAlerts="$props.deviceAlerts.length"
+      :deviceAlert="$props.deviceWorstAlert"
+    />
+    <template
+      v-for="(modelStatus, index) in $props.modelStatuses"
+    >
+      <FSStatus
+        v-if="deviceStatus(modelStatus)"
+        :statusGroup="deviceStatus(modelStatus)"
+        :modelStatus="modelStatus"
+        :key="index"
+      />
+    </template>
   </FSRow>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { FSDeviceAlert, FSDeviceConnectivity, FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
 
+import FSConnectivity from "./FSConnectivity.vue";
+import FSWorstAlert from "./FSWorstAlert.vue";
 import FSStatus from "./FSStatus.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSStatusesRow",
   components: {
+    FSConnectivity,
+    FSWorstAlert,
     FSStatus,
     FSRow
   },
   props: {
+    deviceConnectivity: {
+      type: Object as PropType<FSDeviceConnectivity>,
+      required: false,
+      default: null
+    },
+    deviceWorstAlert: {
+      type: Object as PropType<FSDeviceAlert>,
+      required: false,
+      default: null
+    },
+    deviceAlerts: {
+      type: Array as PropType<FSDeviceAlert[]>,
+      required: false,
+      default: () => []
+    },
     modelStatuses: {
       type: Array as PropType<FSModelStatus[]>,
       required: true
@@ -41,23 +71,24 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const deviceStatus = (modelStatus: FSModelStatus): FSDeviceStatusGroup[] => {
+    const deviceStatus = (modelStatus: FSModelStatus): FSDeviceStatusGroup | null => {
       const deviceStatus = props.deviceStatuses
         .find((deviceStatus: FSDeviceStatus) => deviceStatus.modelStatusId === modelStatus.id);
       if (deviceStatus != null) {
-        return deviceStatus.statusGroups;
+        return deviceStatus.statusGroups[0];
       }
       if (modelStatus.showDefault) {
-        return [{
+        return {
           label: modelStatus.label,
           icon: modelStatus.iconDefault!,
           color: modelStatus.colorDefault!
-        }];
+        };
       }
-      return [];
-    }
+      return null;
+    };
 
     return {
+      ConnectivityStatus,
       deviceStatus
     };
   }

package/components/fields/FSTermField.vue

@@ -0,0 +1,653 @@
+<template>
+  <FSBaseField
+    :label="$props.label"
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :messages="messages"
+  >
+    <FSForm
+      v-model="valid"
+    >
+      <FSRow>
+        <FSSelectDateSetting
+          :lastPeriod="$props.lastPeriod"
+          :editable="$props.editable"
+          :variant="$props.variant"
+          :modelValue="localDateSetting"
+          @update:modelValue="localDateSettingChange"
+        />
+        <FSNumberField
+          v-if="pastSettings.includes(localDateSetting)"
+          :rules="[NumberRules.required(), NumberRules.min(0)]"
+          :editable="$props.editable"
+          :hideHeader="true"
+          :modelValue="localDateValue"
+          @update:modelValue="localDateValueChange"
+        />
+        <template
+          v-else-if="localDateSetting === DateSetting.Expression"
+        >
+          <FSRow
+            align="center-left"
+            :wrap="false"
+          >
+            <FSIcon>
+              mdi-clock-start
+            </FSIcon>
+            <FSTextField
+              :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
+              :editable="$props.editable"
+              :hideHeader="true"
+              :modelValue="localStartDate"
+              @update:modelValue="localStartDateChange"
+            />
+          </FSRow>
+          <FSRow
+            align="center-left"
+            :wrap="false"
+          >
+            <FSIcon>
+              mdi-clock-end
+            </FSIcon>
+            <FSTextField
+              :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
+              :editable="$props.editable"
+              :hideHeader="true"
+              :modelValue="localEndDate"
+              @update:modelValue="localEndDateChange"
+            />
+          </FSRow>
+        </template>
+        <FSDateTimeRangeField
+          v-else-if="localDateSetting === DateSetting.Pick"
+          :rules="[DateRules.required()]"
+          :editable="$props.editable"
+          :hideHeader="true"
+          :modelValue="[parseForPicker(localStartDate)!, parseForPicker(localEndDate)!]"
+          @update:modelValue="onPickDates"
+        />
+      </FSRow>
+    </FSForm>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, PropType, ref} from "vue";
+import _ from "lodash";
+
+import { DateRules, NumberRules, TextRules } from "@dative-gpi/foundation-shared-components/models";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { DateSetting } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSSelectDateSetting from "../selects/FSSelectDateSetting.vue";
+import FSDateTimeRangeField from "./FSDateTimeRangeField.vue";
+import FSNumberField from "./FSNumberField.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSTextField from "./FSTextField.vue";
+import FSForm from "../FSForm.vue";
+import FSIcon from "../FSIcon.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSTermField",
+  components: {
+    FSDateTimeRangeField,
+    FSSelectDateSetting,
+    FSNumberField,
+    FSBaseField,
+    FSTextField,
+    FSForm,
+    FSIcon,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    startDate: {
+      type: String,
+      required: true
+    },
+    endDate: {
+      type: String,
+      required: true
+    },
+    variant : {
+      type: String as PropType<"default" | "before-after">,
+      required: false,
+      default: "default"
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    lastPeriod: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:startDate", "update:endDate"],
+  setup(props, { emit }) {
+    const { parseForPicker,formatFromPicker, formatCurrentForPicker } = useAppTimeZone();
+    const { getMessages } = useRules();
+
+    const localDateSetting = ref<DateSetting>(DateSetting.PastDays);
+    const localDateValue = ref<number>(1);
+    const localStartDate = ref<string>("now - 1d");
+    const localEndDate = ref<string>("now");
+
+    const valid = ref<boolean>(false);
+
+    const pastSettings = computed((): DateSetting[] => {
+      return [
+        DateSetting.PastHours, DateSetting.PastDays, DateSetting.PastWeeks, DateSetting.PastMonths, DateSetting.PastYears,
+        DateSetting.MinutesBeforeAfter, DateSetting.HoursBeforeAfter, DateSetting.DaysBeforeAfter, DateSetting.WeeksBeforeAfter,
+        DateSetting.MinutesBefore, DateSetting.HoursBefore, DateSetting.DaysBefore, DateSetting.WeeksBefore
+      ];
+    });
+
+    const messages = computed((): string[] => {
+      return props.messages ??
+        getMessages(props.startDate, props.rules).concat(getMessages(props.endDate, props.rules));
+    });
+
+    const localStartDateChange = (value: string) => {
+      debouncedStartDate(value);
+    };
+
+    const onStartDateChange = (value: string) => {
+      localStartDate.value = value;
+      if (valid.value) {
+        emit("update:startDate", value);
+      }
+    };
+
+    const debouncedStartDate = _.debounce(onStartDateChange, 1000);
+
+    const localEndDateChange = (value: string) => {
+      debouncedEndDate(value);
+    };
+
+    const onEndDateChange = (value: string) => {
+      localEndDate.value = value;
+      if (valid.value) {
+        emit("update:endDate", value);
+      }
+    };
+
+    const debouncedEndDate = _.debounce(onEndDateChange, 1000);
+
+    const localDateSettingChange = (value: DateSetting) => {
+      localDateSetting.value = value;
+      switch (value) {
+        case DateSetting.None:
+          return;
+        case DateSetting.PastHours:
+          localStartDate.value = `now - ${localDateValue.value}h`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.PastDays:
+          localStartDate.value = `now - ${localDateValue.value}d`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.PastWeeks:
+          localStartDate.value = `now - ${localDateValue.value}w`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.PastMonths:
+          localStartDate.value = `now - ${localDateValue.value}M`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.PastYears:
+          localStartDate.value = `now - ${localDateValue.value}y`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.CurrentHour:
+          localStartDate.value = "now/h";
+          localEndDate.value = "now";
+          break;
+        case DateSetting.CurrentDay:
+          localStartDate.value = "now/d";
+          localEndDate.value = "now";
+          break;
+        case DateSetting.CurrentWeek:
+          localStartDate.value = "now/w";
+          localEndDate.value = "now";
+          break;
+        case DateSetting.CurrentMonth:
+          localStartDate.value = "now/M";
+          localEndDate.value = "now";
+          break;
+        case DateSetting.CurrentYear:
+          localStartDate.value = "now/y";
+          localEndDate.value = "now";
+          break;
+        case DateSetting.LastDay:
+          localStartDate.value = `now - 1d/d`;
+          localEndDate.value = "now/d";
+          break;
+        case DateSetting.LastWeek:
+          localStartDate.value = `now - 1w/w`;
+          localEndDate.value = "now/w";
+          break;
+        case DateSetting.LastMonth:
+          localStartDate.value = `now - 1M/M`;
+          localEndDate.value = "now/M";
+          break;
+        case DateSetting.LastYear:
+          localStartDate.value = `now - 1y/y`;
+          localEndDate.value = "now/y";
+          break;
+        case DateSetting.SinceLastDay:
+          localStartDate.value = `now - 1d/d`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.SinceLastWeek:
+          localStartDate.value = `now - 1w/w`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.SinceLastMonth:
+          localStartDate.value = `now - 1M/M`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.SinceLastYear:
+          localStartDate.value = `now - 1y/y`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.LastPeriod:
+          localStartDate.value = "from - to + from";
+          localEndDate.value = "from";
+          break;
+        case DateSetting.MinutesBeforeAfter:
+          localStartDate.value = `alertstart - ${localDateValue.value}m`;
+          localEndDate.value = `alertend + ${localDateValue.value}m`;
+          break;
+        case DateSetting.HoursBeforeAfter:
+          localStartDate.value = `alertstart - ${localDateValue.value}h`;
+          localEndDate.value = `alertend + ${localDateValue.value}h`;
+          break;
+        case DateSetting.DaysBeforeAfter:
+          localStartDate.value = `alertstart - ${localDateValue.value}d`;
+          localEndDate.value = `alertend + ${localDateValue.value}d`;
+          break;
+        case DateSetting.WeeksBeforeAfter:
+          localStartDate.value = `alertstart - ${localDateValue.value}w`;
+          localEndDate.value = `alertend + ${localDateValue.value}w`;
+          break;
+        case DateSetting.MinutesBefore:
+          localStartDate.value = `alertstart - ${localDateValue.value}m`;
+          localEndDate.value = "alertend";
+          break;
+        case DateSetting.HoursBefore:
+          localStartDate.value = `alertstart - ${localDateValue.value}h`;
+          localEndDate.value = "alertend";
+          break;
+        case DateSetting.DaysBefore:
+          localStartDate.value = `alertstart - ${localDateValue.value}d`;
+          localEndDate.value = "alertend";
+          break;
+        case DateSetting.WeeksBefore:
+          localStartDate.value = `alertstart - ${localDateValue.value}w`;
+          localEndDate.value = "alertend";
+          break;
+        case DateSetting.Expression:
+          if (props.variant === "before-after") {
+            localStartDate.value = `alertstart - ${localDateValue.value}d`;
+            localEndDate.value = "alertend";
+          }
+          else {
+            localStartDate.value = `now - ${localDateValue.value}d`;
+            localEndDate.value = "now";
+          }
+          break;
+        case DateSetting.Pick:
+          localEndDate.value = formatCurrentForPicker(0);
+          localStartDate.value = formatCurrentForPicker(-1);
+          break;
+      }
+      emit("update:startDate", localStartDate.value);
+      emit("update:endDate", localEndDate.value);
+    };
+
+    const localDateValueChange = (value: number) => {
+      localDateValue.value = value ? value : 1;
+
+      switch (localDateSetting.value) {
+        case DateSetting.None:
+          return;
+        case DateSetting.PastHours:
+          localStartDate.value = `now - ${localDateValue.value}h`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.PastDays:
+          localStartDate.value = `now - ${localDateValue.value}d`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.PastWeeks:
+          localStartDate.value = `now - ${localDateValue.value}w`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.PastMonths:
+          localStartDate.value = `now - ${localDateValue.value}M`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.PastYears:
+          localStartDate.value = `now - ${localDateValue.value}y`;
+          localEndDate.value = "now";
+          break;
+        case DateSetting.MinutesBeforeAfter:
+          localStartDate.value = `alertstart - ${localDateValue.value}m`;
+          localEndDate.value = `alertend + ${localDateValue.value}m`;
+          break;
+        case DateSetting.HoursBeforeAfter:
+          localStartDate.value = `alertstart - ${localDateValue.value}h`;
+          localEndDate.value = `alertend + ${localDateValue.value}h`;
+          break;
+        case DateSetting.DaysBeforeAfter:
+          localStartDate.value = `alertstart - ${localDateValue.value}d`;
+          localEndDate.value = `alertend + ${localDateValue.value}d`;
+          break;
+        case DateSetting.WeeksBeforeAfter:
+          localStartDate.value = `alertstart - ${localDateValue.value}w`;
+          localEndDate.value = `alertend + ${localDateValue.value}w`;
+          break;
+        case DateSetting.MinutesBefore:
+          localStartDate.value = `alertstart - ${localDateValue.value}m`;
+          localEndDate.value = "alertend";
+          break;
+        case DateSetting.HoursBefore:
+          localStartDate.value = `alertstart - ${localDateValue.value}h`;
+          localEndDate.value = "alertend";
+          break;
+        case DateSetting.DaysBefore:
+          localStartDate.value = `alertstart - ${localDateValue.value}d`;
+          localEndDate.value = "alertend";
+          break;
+        case DateSetting.WeeksBefore:
+          localStartDate.value = `alertstart - ${localDateValue.value}w`;
+          localEndDate.value = "alertend";
+          break;
+      }
+      emit("update:startDate", localStartDate.value);
+      emit("update:endDate", localEndDate.value);
+    };
+
+    const onPickDates = (value: number[] | null) => {
+      if (!value) {
+        localEndDate.value = formatCurrentForPicker(0);
+        localStartDate.value = formatCurrentForPicker(-1);
+        if (valid.value) {
+          emit("update:startDate", localStartDate.value);
+          emit("update:endDate", localEndDate.value);
+        }
+      }
+      else {
+        if (value && value[0] != null && formatFromPicker(value[0]) !== localStartDate.value) {
+          localStartDate.value = formatFromPicker(value[0]);
+          if (valid.value) {
+            emit("update:startDate", localStartDate.value);
+          }
+        }
+        if (value && value[1] != null && formatFromPicker(value[1]) !== localEndDate.value) {
+          localEndDate.value = formatFromPicker(value[1]);
+          if (valid.value) {
+            emit("update:endDate", localEndDate.value);
+          }
+        }
+      }
+    };
+
+    const reset = (): void => {
+      localStartDate.value = props.startDate;
+      localEndDate.value = props.endDate;
+
+      if (props.variant === "before-after") {
+        if (props.endDate === "alertend") {
+          let match = /^alertstart-([\d]+)([mhdw])$/g.exec(props.startDate.replaceAll(" ", ""));
+          if (match != null) {
+            localDateValue.value = parseInt(match[1]);
+            switch (match[2]) {
+              case 'm': {
+                localDateSetting.value = DateSetting.MinutesBefore;
+                return;
+              }
+              case 'h': {
+                localDateSetting.value = DateSetting.HoursBefore;
+                return;
+              }
+              case 'd': {
+                localDateSetting.value = DateSetting.DaysBefore;
+                return;
+              }
+              case 'w': {
+                localDateSetting.value = DateSetting.WeeksBefore;
+                return;
+              }
+              default: {
+                localDateSetting.value = DateSetting.Expression;
+                localDateValue.value = 1;
+                return;
+              }
+            }
+          }
+        }
+        
+        if (
+          /^alertstart-([\d]+)([mhdw])$/g.test(props.startDate.replaceAll(" ", "")) &&
+          /^alertend\+([\d]+)([mhdw])$/g.test(props.endDate.replaceAll(" ", ""))
+        ) {
+          let startMatch = /^alertstart-([\d]+)([mhdw])$/g.exec(props.startDate.replaceAll(" ", ""));
+          let endMatch = /^alertend\+([\d]+)([mhdw])$/g.exec(props.endDate.replaceAll(" ", ""));
+          if (startMatch != null && endMatch != null && startMatch[1] === endMatch[1] && startMatch[2] === endMatch[2]) {
+            localDateValue.value = parseInt(startMatch[1]);
+            switch(startMatch[2]) {
+              case 'm': {
+                localDateSetting.value = DateSetting.MinutesBeforeAfter;
+                return;
+              }
+              case 'h': {
+                localDateSetting.value = DateSetting.HoursBeforeAfter;
+                return;
+              }
+              case 'd': {
+                localDateSetting.value = DateSetting.DaysBeforeAfter;
+                return;
+              }
+              case 'w': {
+                localDateSetting.value = DateSetting.WeeksBeforeAfter;
+                return;
+              }
+              default: {
+                localDateSetting.value = DateSetting.Expression;
+                localDateValue.value = 1;
+                return;
+              }
+            }
+          }
+        }
+
+        localDateSetting.value = DateSetting.Expression;
+        localDateValue.value = 1;
+        return;
+      }
+
+      if (props.lastPeriod && props.endDate === "from" && props.startDate === "from - to + from") {
+        localDateSetting.value = DateSetting.LastPeriod;
+        return;
+      }
+      if (props.endDate === "now/d" && props.startDate === "now - 1d/d") {
+        localDateSetting.value = DateSetting.LastDay;
+        return;
+      }
+      if (props.endDate === "now/w" && props.startDate === "now - 1w/w") {
+        localDateSetting.value = DateSetting.LastWeek;
+        return;
+      }
+      if (props.endDate === "now/M" && props.startDate === "now - 1M/M") {
+        localDateSetting.value = DateSetting.LastMonth;
+        return;
+      }
+      if (props.endDate === "now/y" && props.startDate === "now - 1y/y") {
+        localDateSetting.value = DateSetting.LastYear;
+        return;
+      }
+
+      if (props.endDate === "now") {
+        let match = /^now-1([dwMy])\/([dwMy])$/g.exec(props.startDate.replaceAll(" ", ""));
+        if (match != null) {
+          localDateValue.value = 1;
+          switch (match[1]) {
+            case 'd': {
+              localDateSetting.value = DateSetting.SinceLastDay;
+              return;
+            }
+            case 'w': {
+              localDateSetting.value = DateSetting.SinceLastWeek;
+              return;
+            }
+            case 'M': {
+              localDateSetting.value = DateSetting.SinceLastMonth;
+              return;
+            }
+            case 'y': {
+              localDateSetting.value = DateSetting.SinceLastYear;
+              return;
+            }
+            default: {
+              localDateSetting.value = DateSetting.Expression;
+              return;
+            }
+          }
+        }
+        match = /^now-([\d]+)([hdwMy])$/g.exec(props.startDate.replaceAll(" ", ""));
+        if (match != null) {
+          localDateValue.value = parseInt(match[1]);
+          switch (match[2]) {
+            case 'h': {
+              localDateSetting.value = DateSetting.PastHours;
+              return;
+            }
+            case 'd': {
+              localDateSetting.value = DateSetting.PastDays;
+              return;
+            }
+            case 'w': {
+              localDateSetting.value = DateSetting.PastWeeks;
+              return;
+            }
+            case 'M': {
+              localDateSetting.value = DateSetting.PastMonths;
+              return;
+            }
+            case 'y': {
+              localDateSetting.value = DateSetting.PastYears;
+              return;
+            }
+            default: {
+              localDateSetting.value = DateSetting.Expression;
+              localDateValue.value = 1;
+              return;
+            }
+          }
+        }
+
+        match = /^now\/([hdwMy])$/g.exec(props.startDate.replaceAll(" ", ""));
+        if (match != null) {
+          localDateValue.value = 1;
+          switch (match[1]) {
+            case 'h': {
+              localDateSetting.value = DateSetting.CurrentHour;
+              return;
+            }
+            case 'd': {
+              localDateSetting.value = DateSetting.CurrentDay;
+              return;
+            }
+            case 'w': {
+              localDateSetting.value = DateSetting.CurrentWeek;
+              return;
+            }
+            case 'M': {
+              localDateSetting.value = DateSetting.CurrentMonth;
+              return;
+            }
+            case 'y': {
+              localDateSetting.value = DateSetting.CurrentYear;
+              return;
+            }
+            default: {
+              localDateSetting.value = DateSetting.Expression;
+              return;
+            }
+          }
+        }
+      }
+
+      if (parseForPicker(props.endDate) != null && parseForPicker(props.startDate) != null) {
+        localDateSetting.value = DateSetting.Pick;
+        localDateValue.value = 1;
+        return;
+      }
+
+      localDateSetting.value = DateSetting.Expression;
+      localDateValue.value = 1;
+    };
+
+    onMounted(() => {
+      reset();
+    });
+
+    return {
+      localDateSetting,
+      localDateValue,
+      localStartDate,
+      localEndDate,
+      pastSettings,
+      DateSetting,
+      NumberRules,
+      DateRules,
+      TextRules,
+      messages,
+      valid,
+      localDateSettingChange,
+      localDateValueChange,
+      localStartDateChange,
+      localEndDateChange,
+      parseForPicker,
+      onPickDates
+    };
+  }
+});
+</script>

package/components/fields/FSTimeSlotField.vue

@@ -124,7 +124,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -238,7 +238,6 @@ export default defineComponent({
       ColorEnum,
       dayStart,
       messages,
-      blurred,
       dayEnd,
       style,
       onChangeHourStart,

package/components/selects/FSSelectDateSetting.vue

@@ -0,0 +1,99 @@
+<template>
+  <FSSelectField
+    :editable="$props.editable"
+    :items="dateSettings"
+    :hideHeader="true"
+    :clearable="false"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { DateSetting } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSSelectField from "../fields/FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSSelectDateSetting",
+  components: {
+    FSSelectField
+  },
+  props: {
+    variant: {
+      type: String as PropType<"default" | "before-after">,
+      required: false,
+      default: "default"
+    },
+    modelValue: {
+      type: Number as PropType<DateSetting>,
+      required: true
+    },
+    lastPeriod: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+
+    const dateSettings = computed((): { id: DateSetting, label: string }[] => {
+      if (props.variant === "before-after") {
+        return [
+          { id: DateSetting.Pick, label: $tr("ui.common.pick-dates", "Pick dates") },
+          { id: DateSetting.MinutesBeforeAfter, label: $tr("ui.common.x-minutes-before-after-hour", "x Minutes before/after") },
+          { id: DateSetting.HoursBeforeAfter, label: $tr("ui.common.x-hours-before-after-hour", "x Hours before/after") },
+          { id: DateSetting.DaysBeforeAfter, label: $tr("ui.common.x-days-before-after-hour", "x Days before/after") },
+          { id: DateSetting.WeeksBeforeAfter, label: $tr("ui.common.x-weeks-before-after-hour", "x Weeks before/after") },
+          { id: DateSetting.MinutesBefore, label: $tr("ui.common.x-minutes-before", "x Minutes before") },
+          { id: DateSetting.HoursBefore, label: $tr("ui.common.x-hours-before", "x Hours before") },
+          { id: DateSetting.DaysBefore, label: $tr("ui.common.x-days-before", "x Days before") },
+          { id: DateSetting.WeeksBefore, label: $tr("ui.common.x-weeks-before", "x Weeks before") },
+          { id: DateSetting.Expression, label: $tr("ui.common.expression", "Expression") }
+        ];
+      }
+      let dateSettings = [
+        { id: DateSetting.Pick, label: $tr("ui.common.pick-dates", "Pick dates") },
+        { id: DateSetting.CurrentHour, label: $tr("ui.common.this-hour", "This hour") },
+        { id: DateSetting.CurrentDay, label: $tr("ui.common.this-day", "This day") },
+        { id: DateSetting.CurrentWeek, label: $tr("ui.common.this-week", "This week") },
+        { id: DateSetting.CurrentMonth, label: $tr("ui.common.this-month", "This month") },
+        { id: DateSetting.CurrentYear, label: $tr("ui.common.this-year", "This year") },
+        { id: DateSetting.LastDay, label: $tr("ui.common.last-day", "Last day") },
+        { id: DateSetting.LastWeek, label: $tr("ui.common.last-week", "Last week") },
+        { id: DateSetting.LastMonth, label: $tr("ui.common.last-month", "Last month") },
+        { id: DateSetting.LastYear, label: $tr("ui.common.last-year", "Last year") },
+        { id: DateSetting.SinceLastDay, label: $tr("ui.common.since-last-day", "Since last day") },
+        { id: DateSetting.SinceLastWeek, label: $tr("ui.common.since-last-week", "Since last week") },
+        { id: DateSetting.SinceLastMonth, label: $tr("ui.common.since-last-month", "Since last month") },
+        { id: DateSetting.SinceLastYear, label: $tr("ui.common.since-last-year", "Since last year") },
+        { id: DateSetting.PastHours, label: $tr("ui.common.past-x-hours", "Past x hours") },
+        { id: DateSetting.PastDays, label: $tr("ui.common.past-x-days", "Past x days") },
+        { id: DateSetting.PastWeeks, label: $tr("ui.common.past-x-weeks", "Past x weeks") },
+        { id: DateSetting.PastMonths, label: $tr("ui.common.past-x-months", "Past x months") },
+        { id: DateSetting.PastYears, label: $tr("ui.common.past-x-years", "Past x years") },
+        { id: DateSetting.Expression, label: $tr("ui.common.expression", "Expression") }
+      ];
+      if (props.lastPeriod) {
+        dateSettings.push({ id: DateSetting.LastPeriod, label: $tr("ui.common.last-period", "Last period") });
+      }
+      return dateSettings;
+    })
+
+    return {
+      dateSettings
+    };
+  }
+});
+</script>

package/components/selects/FSSelectTimeZone.vue

@@ -1,15 +1,23 @@
 <template>
-  <FSSelectField itemTitle="id"
+  <FSSelectField
+    itemTitle="id"
     :items="timeZones"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs">
-    <template #append-inner>
-      <slot name="append-inner">
-        <FSChip v-if="offset"
+    v-bind="$attrs"
+  >
+    <template
+      #append-inner
+    >
+      <slot
+        name="append-inner"
+      >
+        <FSChip
+          v-if="offset"
           variant="standard"
           :color="ColorEnum.Dark"
-          :label="offset" />
+          :label="offset"
+        />
       </slot>
     </template>
   </FSSelectField>

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -12,8 +12,8 @@
       <FSRow
         align="center-center"
         gap="24px"
-        :wrap="false"
         :height="imageSize"
+        :wrap="false"
       >
         <FSCol
           gap="12px"
@@ -35,23 +35,13 @@
               {{ $props.code }}
             </FSText>
           </FSCol>
-          <FSRow
-            gap="4px"
-          >
-            <FSConnectivity
-              v-if="$props.deviceConnectivity && $props.deviceConnectivity.status != ConnectivityStatus.None"
-              :deviceConnectivity="$props.deviceConnectivity"
-            />
-            <FSWorstAlert
-              v-if="$props.deviceWorstAlert"
-              :deviceAlert="$props.deviceWorstAlert"
-              :deviceAlerts="$props.deviceAlerts.length"
-            />
-            <FSStatusesRow
-              :modelStatuses="lineModelStatuses"
-              :deviceStatuses="lineDeviceStatuses"
-            />
-          </FSRow>
+          <FSStatusesRow
+            :deviceConnectivity="$props.deviceConnectivity"
+            :deviceWorstAlert="$props.deviceWorstAlert"
+            :deviceStatuses="singleDeviceStatuses"
+            :modelStatuses="singleModelStatuses"
+            :deviceAlerts="$props.deviceAlerts"
+          />
         </FSCol>
         <FSImage
           v-if="$props.imageId"
@@ -77,13 +67,10 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { FSModelStatus, FSDeviceStatus, FSDeviceAlert, FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSStatusesCarousel from "../deviceOrganisations/FSStatusesCarousel.vue";
-import FSConnectivity from "../deviceOrganisations/FSConnectivity.vue";
 import FSStatusesRow from "../deviceOrganisations/FSStatusesRow.vue";
-import FSWorstAlert from "../deviceOrganisations/FSWorstAlert.vue";
 import FSDivider from "../FSDivider.vue";
 import FSImage from "../FSImage.vue";
 import FSText from "../FSText.vue";
@@ -95,9 +82,7 @@ export default defineComponent({
   name: "FSDeviceOrganisationTileUI",
   components: {
     FSStatusesCarousel,
-    FSConnectivity,
     FSStatusesRow,
-    FSWorstAlert,
     FSDivider,
     FSImage,
     FSText,
@@ -160,9 +145,9 @@ export default defineComponent({
   setup(props) {
     const { isMobileSized } = useBreakpoints();
 
-    const lineModelStatuses = computed((): FSModelStatus[] => {
+    const singleModelStatuses = computed((): FSModelStatus[] => {
       return props.modelStatuses.filter(modelStatus => {
-        if (!modelStatus.inline || modelStatus.groupById) {
+        if (modelStatus.groupById != null) {
           return false;
         }
         if (!modelStatus.showDefault) {
@@ -171,24 +156,18 @@ export default defineComponent({
           }
         }
         return true;
-      }).slice(0, 4).sort((a, b) => a.index - b.index);
+      }).slice(0, 5).sort((a, b) => a.index - b.index);
     });
 
-    const lineDeviceStatuses = computed((): FSDeviceStatus[] => {
+    const singleDeviceStatuses = computed((): FSDeviceStatus[] => {
       return props.deviceStatuses.filter(deviceStatus => {
-        return lineModelStatuses.value.some(modelStatus => modelStatus.id === deviceStatus.modelStatusId)
+        return singleModelStatuses.value.some(modelStatus => modelStatus.id === deviceStatus.modelStatusId)
       });
     });
 
     const carouselModelStatuses = computed((): FSModelStatus[] => {
-      const notCarouselModelStatuses = props.modelStatuses.filter(modelStatus => {
-        if (!modelStatus.inline || modelStatus.groupById) {
-          return false;
-        }
-        return true;
-      }).slice(0, 4);
       return props.modelStatuses.filter(modelStatus => {
-        if (notCarouselModelStatuses.some(lineModelStatus => modelStatus.id === lineModelStatus.id)) {
+        if (modelStatus.groupById == null) {
           return false;
         }
         if (!modelStatus.showDefault) {
@@ -197,7 +176,7 @@ export default defineComponent({
           }
         }
         return true;
-      }).sort((a, b) => (a.index + (a.inline ? b.index : 0)) - b.index);
+      }).sort((a, b) => a.index - b.index);
     });
 
     const carouselDeviceStatuses = computed((): FSDeviceStatus[] => {
@@ -219,12 +198,11 @@ export default defineComponent({
     });
 
     return {
-      ColorEnum,
-      lineModelStatuses,
-      lineDeviceStatuses,
-      ConnectivityStatus,
-      carouselModelStatuses,
       carouselDeviceStatuses,
+      carouselModelStatuses,
+      singleDeviceStatuses,
+      singleModelStatuses,
+      ColorEnum,
       imageSize,
       infoWidth
     };

package/models/modelStatuses.ts

@@ -1,11 +1,10 @@
 export interface FSModelStatus {
-    id: string;
-    label: string;
-    inline: boolean;
-    index: number;
-    groupById?: string | null;
-    groupByLabel?: string | null;
-    showDefault: boolean;
-    iconDefault?: string | null;
-    colorDefault?: string | null;
+  id: string;
+  label: string;
+  index: number;
+  groupById?: string | null;
+  groupByLabel?: string | null;
+  showDefault: boolean;
+  iconDefault?: string | null;
+  colorDefault?: string | null;
 }

package/models/rules.ts

@@ -1,5 +1,6 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { validateExpression } from "@dative-gpi/foundation-shared-domain/tools";
 
 import { getTimeBestString } from "../utils";
 
@@ -39,7 +40,8 @@ export const IconRules = {
 export const DateRules = {
     required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
     min: (min: number, message: string | undefined = undefined) => (value: number) => (!value || value >= min) || (message ?? $tr("ui.rules.date-min", "Must be after {0}", epochToLongDateFormat(min))),
-    max: (max: number, message: string | undefined = undefined) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max)))
+    max: (max: number, message: string | undefined = undefined) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max))),
+    validateExpression: (variant: "default" | "before-after") => (value: string) => validateExpression(value, variant)
 };
 
 export const SelectRules = {
@@ -62,4 +64,4 @@ export const TimeRules = {
 
 export const ToggleRules = {
     required: (message: string | undefined = undefined) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
-}
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.101",
+  "version": "0.0.103",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.101",
-    "@dative-gpi/foundation-shared-services": "0.0.101",
+    "@dative-gpi/foundation-shared-domain": "0.0.103",
+    "@dative-gpi/foundation-shared-services": "0.0.103",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "8ab763942b592e5d46dc629ca95e80cfb7729400"
+  "gitHead": "dd1b4c1e23a1826d70e02de27cb419205392fc5c"
 }