feat: remove all & build from remainders

LordFitoi · Apr 14, 2024 · 42e5caf · 42e5caf
1 parent 214aeca
commit 42e5caf
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 12 deletions.
diff --git a/public/icons/refresh-cw-05.svg b/public/icons/refresh-cw-05.svg
diff --git a/public/icons/reverse-right.svg b/public/icons/reverse-right.svg
diff --git a/src/components/BatteryBalanceApp.vue b/src/components/BatteryBalanceApp.vue
@@ -27,6 +27,11 @@
                         >
                             Add Cell
                         </button>
+                        <button
+                            class="w-[42px] bg-[#111322] text-white rounded-lg flex items-center justify-center hover:bg-[#50575E] cursor-pointer" @click="removeAllCells()"
+                        >
+                            <img :src="getIcon('/icons/trash-01.svg')" alt="" class="w-[20px] h-[20px] filter-white">
+                        </button>
                     </div>
                     <span class="block text-xs text-[#667085] mt-1 ml-2">Tip: Press enter to quickly add the cell</span>
                 </div>
@@ -61,12 +66,19 @@
 
                 </div>
             </div>
-            <button
-                class="w-full bg-[#111322] text-white rounded-lg px-[14px] py-[10px] text-sm text-center hover:bg-[#50575E] cursor-pointer"
-                @click="buildPack()"    
-            >
-                Build Pack
-            </button>
+            <div class="flex gap-[4px]">
+                <button
+                    class="w-full bg-[#111322] text-white rounded-lg px-[14px] py-[10px] text-sm text-center hover:bg-[#50575E] cursor-pointer"
+                    @click="buildPack()"    
+                >
+                    Build Pack
+                </button>
+                <button
+                    class="w-[42px] bg-[#111322] text-white rounded-lg flex items-center justify-center hover:bg-[#50575E] cursor-pointer" @click="buildPackFromUnused()"
+                >
+                    <img :src="getIcon('/icons/reverse-right.svg')" alt="" class="w-[20px] h-[20px] filter-white">
+                </button>
+            </div>
         </div>
         <div v-if="packs" class="flex flex-col gap-4">
             <div class=" border-[1px] border-[#D0D5DD] rounded-lg p-[16px] bg-[#FFF] shadow-md">
@@ -122,21 +134,41 @@ export default {
     mounted() {
         this.load();
     },
+    watch: {
+        cells: {
+            handler() {
+                this.save();
+            },
+            deep: true
+        }
+    },
     methods: {
         save() {
             localStorage.setItem('cells', JSON.stringify(this.cells));
         },
         load() {
             this.cells = JSON.parse(localStorage.getItem('cells')) || [];
         },
+        removeAllCells() {
+            this.cells = [];
+        },
         addCell() {
             this.cells.push(Number(this.cellInput));
             this.cellInput = null;
-            this.save();
         },
         removeCell(i) {
             this.cells.splice(i, 1);
-            this.save();
+        },
+        buildPackFromUnused() {
+            const useCells = this.cells.sort((a, b) => a - b)
+                .reverse()
+                .slice(0, this.series * this.parallels);
+
+            useCells.forEach(cell => {
+                this.cells.splice(this.cells.indexOf(cell), 1);
+            });
+
+            this.buildPack();
         },
         buildPack() {
             if (this.cells.length < 1) {

diff --git a/src/scripts/PackBuilder.js b/src/scripts/PackBuilder.js
@@ -14,12 +14,9 @@ export class PackBuilder {
         this.cells = cells.map((amp, index) => new Cell(amp, index + 1))
             .sort((a, b) => a.amps - b.amps)
             .reverse()
-            .splice(0, this.series * this.parallels);
-
+            .slice(0, this.series * this.parallels);
         this.amps = sum(this.cells.map(c=>c.amps)) / this.series;
     }
-
-
     build() {
         const packs = []
 

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -20,4 +20,8 @@ html, body {
 
 .icon {
     filter: invert(99%) sepia(0%) saturate(7498%) hue-rotate(43deg) brightness(115%) contrast(100%);
+}
+
+.filter-white {
+    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(23deg) brightness(115%) contrast(103%);
 }