@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.3 → 7.48.1-EPDM-12680.4

package/dist/main.es92.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "6",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu = { render };
+export {
+  context_menu as default,
+  render
+};

package/dist/main.es93.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "6",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#B2B9C5",
+  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu_tabs = { render };
+export {
+  context_menu_tabs as default,
+  render
+};

package/dist/main.es94.js

@@ -0,0 +1,24 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "800",
+  height: "800",
+  viewBox: "0 0 512 512"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "none",
+  "fill-rule": "evenodd",
+  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const copy = { render };
+export {
+  copy as default,
+  render
+};

package/dist/main.es95.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "10",
+  height: "10",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m9.879 8.479-1.4 1.4L.12 1.52l1.4-1.4L5.7 4.3z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m1.521 9.879-1.4-1.4L8.48.12l1.4 1.4z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const cross = { render };
+export {
+  cross as default,
+  render
+};

package/dist/main.es96.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "14",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 16c2.829 0 4.976 1.278 6.69 4.003C24.975 22.724 22.827 24 20 24s-4.975-1.276-6.69-3.997C15.024 17.278 17.171 16 20 16m0-2c-4.273 0-7.094 2.43-9 6.005C12.906 23.57 15.727 26 20 26s7.094-2.43 9-5.995C27.094 16.43 24.273 14 20 14"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const current_variant = { render };
+export {
+  current_variant as default,
+  render
+};

package/dist/main.es97.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#fff",
+  d: "M0 10h8V0H0zm0 8h8v-6H0zm10 0h8V8h-8zm0-18v6h8V0z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const dashboard = { render };
+export {
+  dashboard as default,
+  render
+};

package/dist/main.es98.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4v-2H2V2h14v14h-4v2h4c1.1 0 2-.9 2-2V2a2 2 0 0 0-2-2M9 6l-4 4h3v8h2v-8h3z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const data_transfer = { render };
+export {
+  data_transfer as default,
+  render
+};

package/dist/main.es99.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M15 13h2v14h-2z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M17 21a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8l-2.857 4L25 21z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const deadline = { render };
+export {
+  deadline as default,
+  render
+};

package/dist/style.css

@@ -0,0 +1 @@
+html,body{height:100%;margin:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-EPDM-12680.3",
+  "version": "7.48.1-EPDM-12680.4",
   "files": [
     "dist",
     "src"

package/src/components/stringDesign/DropdownMenu/index.vue

@@ -9,9 +9,9 @@
         @click="toggleAllSections"
       />
     </PageTitleContainer>
-    <SectionContainer v-for="item in dataList" :key="item.inverterId">
+    <SectionContainer v-for="item in inverterList" :key="item.inverterId">
       <TitleContainer>
-        <IconWrapper size="20px" @click="toggleSection(item.inverterId)">
+        <IconWrapper size="36px" @click="toggleSection(item.inverterId)">
           <RCIcon
             color="white"
             :name="isExpanded(item.inverterId) ? 'arrow_up' : 'arrow_down'"
@@ -46,7 +46,10 @@
         </IconsContainer>
       </TitleContainer>
       <MarkersContainer>
-        <MarkerItem>{{ 100 * item.getTargetRatio().toFixed(2) }}%</MarkerItem>
+        <MarkerItem
+          :background-color="isTartgetRatioInRange(item) ? 'green' : 'red'"
+          >{{ 100 * item.getTargetRatio().toFixed(2) }}%</MarkerItem
+        >
         <MarkerItem>
           <span
             :title="
@@ -83,7 +86,11 @@
         :key="mppt.mpptId"
       >
         <BoxTitleWrapper>
-          <IconWrapper size="20px" @click="toggleMppt(mppt.mpptId)">
+          <IconWrapper
+            margin-left="4px"
+            size="8px"
+            @click="toggleMppt(mppt.mpptId)"
+          >
             <RCIcon
               color="white"
               cursor="pointer"
@@ -101,9 +108,7 @@
                 size="11px"
               />
               <div>
-                {{ mppt.strings.length }}/{{
-                  mppt.numberOfMppts ? mppt.numberOfMppts : 0
-                }}
+                {{ mppt.strings.length }}/{{ item.availableMPPTs?.length }}
               </div>
             </BoxIconWrapper>
             <BoxIconWrapper>
@@ -130,6 +135,45 @@
           </StringBox>
         </div>
       </BoxContainer>
+      <BoxContainer
+        v-if="
+          item.storage_system && Object.keys(item.storage_system).length > 0
+        "
+        v-show="isExpanded(item.inverterId)"
+        :key="item.storage_system.id"
+      >
+        <BoxTitleWrapper>
+          <IconWrapper
+            margin-left="4px"
+            size="8px"
+            @click="toggleMppt(item.storage_system.id)"
+          >
+            <RCIcon
+              color="white"
+              cursor="pointer"
+              :name="
+                isMpptExpanded(item.storage_system.id)
+                  ? 'arrow_up'
+                  : 'arrow_down'
+              "
+              size="10px"
+            />
+          </IconWrapper>
+          <BoxTitleText>{{ $gettext('battery') }}</BoxTitleText>
+        </BoxTitleWrapper>
+        <div v-show="isMpptExpanded(item.storage_system.id)">
+          <BatteryBox>
+            <RCIcon color="white" name="battery" size="14px" />
+            <BatteryDetailsContainer>
+              <BatteryType>{{ item.storage_system.brand_name }}</BatteryType>
+              <BatteryModel>{{ item.storage_system.model }}</BatteryModel>
+            </BatteryDetailsContainer>
+            <BatteryValue>
+              {{ item.storage_system.nominal_capacity_kwh }} kWh
+            </BatteryValue>
+          </BatteryBox>
+        </div>
+      </BoxContainer>
     </SectionContainer>
   </PageContainer>
 </template>
@@ -154,7 +198,6 @@
 
   const TitleContainer = styled.div`
     display: flex;
-    gap: 14px;
     align-items: center;
   `
 
@@ -214,7 +257,10 @@
     font-size: 11px;
   `
 
-  const IconAttrs = { size: { type: String, default: '36px' } }
+  const IconAttrs = {
+    size: { type: String, default: '36px' },
+    marginLeft: String,
+  }
   const IconWrapper = styled('div', IconAttrs)`
     display: flex;
     align-items: center;
@@ -223,9 +269,10 @@
     cursor: pointer;
     width: ${(props) => props.size};
     height: ${(props) => props.size};
-
+    margin-left: ${(props) => props.marginLeft};
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: ${(props) =>
+        props.marginLeft ? 'transparent' : 'rgba(255, 255, 255, 0.1)'};
     }
 
     &:active {
@@ -313,6 +360,36 @@
     color: ${(props) => props.theme.colors.white};
   `
 
+  const BatteryBox = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid ${(props) => props.theme.colors.white};
+    border-radius: 4px;
+    padding: 8px;
+    margin-top: 8px;
+  `
+
+  const BatteryDetailsContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  `
+
+  const BatteryType = styled.div`
+    font-size: 11px;
+  `
+
+  const BatteryModel = styled.div`
+    font-size: 10px;
+  `
+
+  const BatteryValue = styled.div`
+    font-size: 10px;
+    align-self: flex-end;
+    margin-left: auto;
+  `
+
   export default {
     name: 'DropdownMenu',
     components: {
@@ -340,18 +417,32 @@
       SectionTitleText,
       ButtonIcon,
       PageContainer,
+      BatteryBox,
+      BatteryDetailsContainer,
+      BatteryType,
+      BatteryModel,
+      BatteryValue,
     },
     props: {
       dataList: {
         required: true,
         type: Array,
       },
+      batteryData: {
+        required: true,
+        type: Array,
+      },
+      inverterParameters: {
+        required: true,
+        type: Object,
+      },
     },
     emits: ['on-edit'],
     data() {
       return {
         expandedInverters: [],
         expandedMppts: [],
+        inverterList: [],
       }
     },
     computed: {
@@ -359,7 +450,36 @@
         return this.expandedInverters.length > 0
       },
     },
+    watch: {
+      dataList: {
+        handler(newVal) {
+          // debugger
+          // ToDo: remove this but keep the id
+          console.log('newVal', newVal)
+          newVal.forEach((item) => {
+            item.storage_system = {
+              brand_name: 'Test brand',
+              model: 'Test model',
+              nominal_capacity_kwh: 999,
+              id: Math.floor(Math.random() * 9999) + '_battery',
+            }
+          })
+          this.inverterList = newVal
+          console.log('this.inverterList', this.inverterList)
+        },
+        immediate: true, // Add immediate: true to trigger on component creation
+      },
+    },
     methods: {
+      isTartgetRatioInRange(inverter) {
+        const currentTargetRatio = inverter.getTargetRatio()
+        return (
+          this.inverterParameters.target_power_ratio - 20 <=
+            100 * currentTargetRatio &&
+          this.inverterParameters.target_power_ratio + 20 >=
+            100 * currentTargetRatio
+        )
+      },
       getNumberOfMpptModules(strings) {
         return strings.reduce((acc, curr) => acc + curr.modules.length, 0)
       },
@@ -390,10 +510,13 @@
           this.expandedInverters = []
           this.expandedMppts = []
         } else {
-          this.expandedInverters = this.dataList.map((item) => item.inverterId)
-          this.expandedMppts = this.dataList.flatMap((item) =>
-            item.mppts.map((mppt) => mppt.mpptId)
+          this.expandedInverters = this.inverterList.map(
+            (item) => item.inverterId
           )
+          this.expandedMppts = this.inverterList.flatMap((item) => [
+            ...item.mppts.map((mppt) => mppt.mpptId),
+            ...(item.storage_system ? [item.storage_system.id] : []),
+          ])
         }
       },
       getTypeName(type) {