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

package/components/map/FSMapTileLayer.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch } from 'vue';
+import { inject, type PropType, onMounted, type Ref, watch, onUnmounted } from 'vue';
 
 import type { Map, Layer } from 'leaflet';
 
@@ -12,15 +12,15 @@ import { MAP } from './keys';
 export default {
   name: 'FSMapTileLayer',
   props: {
-    layer: {
-      type: Object as PropType<Layer>,
+    layers: {
+      type: Object as PropType<Layer[]>,
       required: false
     }
   },
   setup(props) {
     const map = inject<Ref<Map | null>>(MAP);
 
-    const lastLayer = props.layer;
+    let lastLayers = props.layers;
 
     if(!map) {
       throw new Error('FSMapTileLayer must be used inside a FSMap component');
@@ -31,20 +31,37 @@ export default {
     }
 
     const updateLayer = () => {
-      if (!props.layer || !map.value) {
+      if (!props.layers || !map.value) {
         return;
       }
 
-      if(lastLayer) {
-        map.value.removeLayer(lastLayer);
+      if(lastLayers) {
+        lastLayers.forEach(layer => {
+          layer.removeFrom(map.value!);
+        });
       }
 
-      props.layer.addTo(map.value);
+      lastLayers = [];
+
+      props.layers.forEach(layer => {
+        lastLayers?.push(layer.addTo(map.value!));
+      });
     };
 
     onMounted(updateLayer);
 
-    watch(() => props.layer, updateLayer);
+    onUnmounted(() => {
+      if (lastLayers && map.value) {
+        lastLayers.forEach(layer => {
+          if (map.value.hasLayer(layer)) {
+            map.value.removeLayer(layer);
+          }
+        });
+        lastLayers = [];
+      }
+    });
+
+    watch(() => props.layers, updateLayer);
   }
 };
 </script>

package/components/selects/FSSelectAutoRefresh.vue

@@ -40,16 +40,16 @@ export default defineComponent({
 
     const autoRefreshes = computed((): { id: AutoRefresh; label: string }[] => {
       const items = [
-        { id: AutoRefresh.FifteenSeconds, label: $tr("ui.auto-refresh.fifteen-seconds", "Fifteen seconds") },
-        { id: AutoRefresh.ThirtySeconds, label: $tr("ui.auto-refresh.thirty-seconds", "Thirty seconds") },
-        { id: AutoRefresh.OneMinute, label: $tr("ui.auto-refresh.one-minute", "One minute") },
-        { id: AutoRefresh.FiveMinutes, label: $tr("ui.auto-refresh.five-minutes", "Five minutes") },
-        { id: AutoRefresh.FifteenMinutes, label: $tr("ui.auto-refresh.fifteen-minutes", "Fifteen minutes") },
-        { id: AutoRefresh.ThirtyMinutes, label: $tr("ui.auto-refresh.thirty-minutes", "Thirty minutes") },
-        { id: AutoRefresh.OneHour, label: $tr("ui.auto-refresh.one-hour", "One hour") },
+        { id: AutoRefresh.FifteenSeconds, label: $tr("ui.common.fifteen-seconds", "Fifteen seconds") },
+        { id: AutoRefresh.ThirtySeconds, label: $tr("ui.common.thirty-seconds", "Thirty seconds") },
+        { id: AutoRefresh.OneMinute, label: $tr("ui.common.one-minute", "One minute") },
+        { id: AutoRefresh.FiveMinutes, label: $tr("ui.common.five-minutes", "Five minutes") },
+        { id: AutoRefresh.FifteenMinutes, label: $tr("ui.common.fifteen-minutes", "Fifteen minutes") },
+        { id: AutoRefresh.ThirtyMinutes, label: $tr("ui.common.thirty-minutes", "Thirty minutes") },
+        { id: AutoRefresh.OneHour, label: $tr("ui.common.one-hour", "One hour") },
       ];
       if (props.useNone) {
-        items.unshift({ id: AutoRefresh.None, label: $tr("ui.auto-refresh.none", "None") });
+        items.unshift({ id: AutoRefresh.None, label: $tr("ui.common.none", "None") });
       }
       return items;
     });

package/components/selects/FSSelectDashboardVariableType.vue

@@ -34,9 +34,10 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
 
     const dashboardVariableTypes = computed((): { id: DashboardVariableType; label: string }[] => ([
-      { id: DashboardVariableType.Number, label: $tr("ui.dashboard-variable-type.number", "Number") },
-      { id: DashboardVariableType.String, label: $tr("ui.dashboard-variable-type.string", "String") },
-      { id: DashboardVariableType.TimeStep, label: $tr("ui.dashboard-variable-type.time-step", "Time step") }
+      { id: DashboardVariableType.Number, label: $tr("ui.common.number", "Number") },
+      { id: DashboardVariableType.String, label: $tr("ui.common.string", "String") },
+      { id: DashboardVariableType.TimeStep, label: $tr("ui.common.time-step", "Time step")},
+      { id: DashboardVariableType.PlotPer, label: $tr("ui.common.plot-per", "Plot per")}
     ]));
 
     return {

package/components/selects/FSSelectDateSetting.vue

@@ -1,6 +1,6 @@
 <template>
   <FSSelectField
-    class="fs-select-date-setting"
+    class="select.date-setting.label"
     :items="dateSettings"
     :clearable="false"
     :modelValue="$props.modelValue"
@@ -88,7 +88,7 @@ export default defineComponent({
         dateSettings.push({ id: DateSetting.LastPeriod, label: $tr("ui.date-setting.last-period", "Last period") });
       }
       if (props.useNone) {
-        dateSettings.unshift({ id: DateSetting.None, label: $tr("ui.date-setting.none", "None") });
+        dateSettings.unshift({ id: DateSetting.None, label: $tr("ui.common.none", "None") });
       }
       return dateSettings;
     })

package/components/selects/FSSelectDays.vue

@@ -40,16 +40,16 @@ export default defineComponent({
 
     const days = computed((): { id: Days; label: string }[] => {
       const items = [
-        { id: Days.Monday, label: $tr("ui.days.monday", "Monday") },
-        { id: Days.Tuesday, label: $tr("ui.days.tuesday", "Tuesday") },
-        { id: Days.Wednesday, label: $tr("ui.days.wednesday", "Wednesday") },
-        { id: Days.Thursday, label: $tr("ui.days.thursday", "Thursday") },
-        { id: Days.Friday, label: $tr("ui.days.friday", "Friday") },
-        { id: Days.Saturday, label: $tr("ui.days.saturday", "Saturday") },
-        { id: Days.Sunday, label: $tr("ui.days.sunday", "Sunday") }
+        { id: Days.Monday, label: $tr("ui.common.monday", "Monday") },
+        { id: Days.Tuesday, label: $tr("ui.common.tuesday", "Tuesday") },
+        { id: Days.Wednesday, label: $tr("ui.common.wednesday", "Wednesday") },
+        { id: Days.Thursday, label: $tr("ui.common.thursday", "Thursday") },
+        { id: Days.Friday, label: $tr("ui.common.friday", "Friday") },
+        { id: Days.Saturday, label: $tr("ui.common.saturday", "Saturday") },
+        { id: Days.Sunday, label: $tr("ui.common.sunday", "Sunday") }
       ];
       if (props.useAllDays) {
-        items.unshift({ id: Days.AllDays, label: $tr("ui.days.all-days", "All days") });
+        items.unshift({ id: Days.AllDays, label: $tr("ui.common.all-days", "All days") });
       }
       return items;
     });

package/components/selects/FSSelectListMode.vue

@@ -39,8 +39,8 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
   
     const items = [
-      { id: ListModes.Table, label: $tr("ui.common.table-mode", "Table"), icon: "mdi-format-list-bulleted" },
-      { id: ListModes.Iterator, label: $tr("ui.common.tile-mode", "Tuile"), icon: "mdi-view-grid-outline" },
+      { id: ListModes.Table, label: $tr("ui.common.table", "Table"), icon: "mdi-format-list-bulleted" },
+      { id: ListModes.Iterator, label: $tr("ui.common.iterator", "Tile"), icon: "mdi-view-grid-outline" },
     ];
   
     return {

package/components/selects/FSSelectMapLayer.vue

@@ -0,0 +1,68 @@
+<template>
+  <FSSelectField
+    :items="items"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <FSIcon
+        :icon="item.icon"
+      />
+    </template>
+  </FSSelectField>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+import { MapLayers } from '@dative-gpi/foundation-shared-components/models';
+
+import FSSelectField from "../fields/FSSelectField.vue";
+import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
+
+export default defineComponent({
+  name: "FSSelectMapLayer",
+  components: {
+    FSIcon,
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: [String, Array] as PropType<MapLayers | MapLayers[]>,
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const { $tr } = useTranslationsProvider();
+
+    const items = [
+      {
+        id: MapLayers.Map,
+        icon: 'mdi-map',
+        label: $tr("ui.map-layer.map", "Map")
+      },
+      {
+        id: MapLayers.Imagery,
+        icon: 'mdi-satellite',
+        label: $tr("ui.map-layer.imagery", "Imagery")
+      },
+      {
+        id: MapLayers.Snow,
+        icon: 'mdi-snowflake',
+        label: $tr("ui.map-layer.snow", "Snow ski map")
+      }
+    ]
+
+    return {
+      items
+    };
+  }
+});
+</script>

package/components/selects/FSSelectMonths.vue

@@ -40,21 +40,21 @@ export default defineComponent({
 
     const months = computed((): { id: Months; label: string }[] => {
       const items = [
-        { id: Months.January, label: $tr("ui.months.january", "January") },
-        { id: Months.February, label: $tr("ui.months.february", "February") },
-        { id: Months.March, label: $tr("ui.months.march", "March") },
-        { id: Months.April, label: $tr("ui.months.april", "April") },
-        { id: Months.May, label: $tr("ui.months.may", "May") },
-        { id: Months.June, label: $tr("ui.months.june", "June") },
-        { id: Months.July, label: $tr("ui.months.july", "July") },
-        { id: Months.August, label: $tr("ui.months.august", "August") },
-        { id: Months.September, label: $tr("ui.months.september", "September") },
-        { id: Months.October, label: $tr("ui.months.october", "October") },
-        { id: Months.November, label: $tr("ui.months.november", "November") },
-        { id: Months.December, label: $tr("ui.months.december", "December") }
+        { id: Months.January, label: $tr("ui.common.january", "January") },
+        { id: Months.February, label: $tr("ui.common.february", "February") },
+        { id: Months.March, label: $tr("ui.common.march", "March") },
+        { id: Months.April, label: $tr("ui.common.april", "April") },
+        { id: Months.May, label: $tr("ui.common.may", "May") },
+        { id: Months.June, label: $tr("ui.common.june", "June") },
+        { id: Months.July, label: $tr("ui.common.july", "July") },
+        { id: Months.August, label: $tr("ui.common.august", "August") },
+        { id: Months.September, label: $tr("ui.common.september", "September") },
+        { id: Months.October, label: $tr("ui.common.october", "October") },
+        { id: Months.November, label: $tr("ui.common.november", "November") },
+        { id: Months.December, label: $tr("ui.common.december", "December") }
       ];
       if (props.useAllMonths) {
-        items.unshift({ id: Months.AllMonths, label: $tr("ui.months.all-months", "All months") });
+        items.unshift({ id: Months.AllMonths, label: $tr("ui.common.all-months", "All months") });
       }
       return items;
     });

package/components/selects/chartSelectors/FSAggregationSelector.vue

@@ -0,0 +1,52 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.aggregation.label','Aggregation')"
+    :items="aggregationTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { AggregationType } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { aggregationTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue : {
+      type: Number as PropType<AggregationType>,
+      required: false
+    },
+    label : {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+
+    const aggregationTypeItems = computed(()=>{
+      return getEnumEntries(AggregationType).filter(f=>f.value != AggregationType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: aggregationTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      aggregationTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSAxisTypeSelector.vue

@@ -0,0 +1,49 @@
+<template>
+  <FSToggleSet
+    :hideHeader="true"
+    :values="axisTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import  {AxisType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { axisTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSToggleSet from "@dative-gpi/foundation-shared-components/components/FSToggleSet.vue";
+
+
+export default defineComponent({
+  components: {
+    FSToggleSet
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<AxisType>,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+
+    const axisTypeItems = computed(()=>{
+      return getEnumEntries(AxisType).map((f)=>{
+        return {
+          id: f.value,
+          label: axisTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      axisTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSDisplayAsSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.display-as.label','Display as')"
+    :items="displayAsItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {DisplayAs} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { displayAsLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<DisplayAs>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+    
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const displayAsItems = computed(()=>{
+      return getEnumEntries(DisplayAs).filter(f=>f.value != DisplayAs.None).map((f)=>{
+        return {
+          id: f.value,
+          label: displayAsLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      displayAsItems,
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSFilterTypeSelector.vue

@@ -0,0 +1,54 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.filter-type','Filter type')"
+    :toggleSet="true"
+    :items="filterTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {FilterType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { filterTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<FilterType>,
+      required: false,
+      default : FilterType.None
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+
+    const filterTypeItems = computed(()=>{
+      return getEnumEntries(FilterType).filter(f=>f.value != FilterType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: filterTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      filterTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSHeatmapRuleSelector.vue

@@ -0,0 +1,54 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.heat-rule.label','Heat rule')"
+    :items="heatmapRuleItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {HeatmapRule} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { heatmapRuleLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<HeatmapRule>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+    
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const heatmapRuleItems = computed(()=>{
+      return getEnumEntries(HeatmapRule).filter(f=>f.value != HeatmapRule.None).map((f)=>{
+        return {
+          id: f.value,
+          label: heatmapRuleLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      heatmapRuleItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSOperationOnSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.operation-on.label','Operation on')"
+    :items="operationOnItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {OperationOn} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { operationOnLabel} from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<OperationOn>,
+      required: false
+    },
+    label : {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const operationOnItems = computed(()=>{
+      return getEnumEntries(OperationOn).filter(f=>f.value != OperationOn.None).map((f)=>{
+        return {
+          id: f.value,
+          label: operationOnLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      operationOnItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSPlanningTypeSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.planning-type.label','Planning type')"
+    :items="planningTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {PlanningType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { planningTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<PlanningType>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const planningTypeItems = computed(()=>{
+      return getEnumEntries(PlanningType).filter(f=>f.value != PlanningType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: planningTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      planningTypeItems
+    }
+  }
+})
+</script>