add notes + cart + get seat count

src/webapp/notes.md

@@ -3,4 +3,6 @@
 
 - set page title based on settings
 
-- make pricing groups changeable in UI (event categories)
+- make pricing groups changeable in UI (event categories)
+
+- add webpack to project website to decrease file size

src/webapp/src/components/seatplan/editor/window.vue

@@ -37,6 +37,7 @@
             <button title="Remove selected component [Delete]" @click="deleteSelected()"><span class="material-symbols-outlined">delete</span></button>
             <button title="Save this seatplan as a draft [Ctrl + S]" @click="saveDraft()"><span class="material-symbols-outlined">save</span></button>
             <button title="Deploy this seatplan (save it for use)" @click="deploy()"><span class="material-symbols-outlined">system_update_alt</span></button>
+            <button title="Get amount of seats printed to console" @click="getSeatCount()"><span class="material-symbols-outlined">living</span></button>
         </div>
         <notifications ref="notification" location="topleft"></notifications>
     </div>
@@ -310,7 +311,10 @@
                     sessionStorage.setItem( 'zoom', this.zoomFactor );
                     this.loadSeatplan();
                 }
-            }
+            },
+            getSeatCount () {
+                console.log( 'Seat count is: ' + document.getElementsByClassName( 'seats' ).length );
+            },
         },
         created () {
             this.runHook();

src/webapp/src/views/CartView.vue

@@ -26,6 +26,9 @@
         </div>
         <div v-else>
             Cart is empty. Please add tickets <router-link to="/tickets">here</router-link>
+            <div class="empty-cart-wrapper">
+                <span class="material-symbols-outlined empty-cart">remove_shopping_cart</span>
+            </div>
         </div>
     </div>
 </template>
@@ -40,6 +43,19 @@
         justify-content: center;
     }
 
+    .empty-cart-wrapper {
+        width: 100%;
+        height: 70vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .empty-cart {
+        display: block;
+        font-size: 20rem;
+    }
+
     .cart-list {
         width: 50%;
     }