Update eslint config

MusicPlayerV2-GUI/package.json

@@ -22,22 +22,23 @@
     "musickit-typescript": "^1.2.4",
     "pinia": "^2.1.7",
     "socket.io-client": "^4.7.5",
-    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-node-polyfills": "^0.24.0",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.3",
+    "@eslint/js": "^9.34.0",
+    "@stylistic/eslint-plugin": "^5.3.1",
     "@tsconfig/node20": "^20.1.2",
     "@types/node": "^20.11.10",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^6.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^10.4.0",
-    "eslint-plugin-vue": "^9.17.0",
     "npm-run-all2": "^6.1.1",
+    "sass-embedded": "^1.92.0",
     "typescript": "~5.3.0",
-    "vite": "^5.0.11",
+    "typescript-eslint": "^8.42.0",
+    "vite": "^7.1.4",
     "vue-tsc": "^2.0.29"
   }
 }

MusicPlayerV2-GUI/src/views/BarView.vue

@@ -69,23 +69,58 @@
         <button @click="reset()">
             Reset
         </button>
-        <div>
+        <p>Total: CHF {{ total }}</p>
-            <div v-for="offer in offering" :key="offer.price">
+        <table class="offering-wrapper">
+            <tbody>
+                <tr v-for="offer in offering" :key="offer.id" class="offering">
+                    <td>
                         <p>{{ offer.name }} (CHF {{ offer.price / 100 }})</p>
+                    </td>
+                    <td>
                         <button class="inc-dec" @click="changeValue( offer.id, 1 )">
                             +
                         </button>
+                        <p>{{ selection[ offer.id ] }}</p>
                         <button class="inc-dec" @click="changeValue( offer.id, -1 )">
                             -
                         </button>
-            </div>
+                    </td>
-        </div>
+                </tr>
-        <p>Total: {{ total }}</p>
+            </tbody>
+        </table>
     </div>
 </template>
 
 <style lang="scss" scoped>
 .bar-utility {
+    >.offering-wrapper {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
 
+        >.offering {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 5px;
+
+            p {
+                margin: 0;
+            }
+
+            >.inc-dec {
+                background: none;
+                border: solid var( --primary-color ) 1px;
+                border-radius: 20px;
+                width: 1.5rem;
+                height: 1.5rem;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 1rem;
+            }
+        }
+    }
 }
 </style>