Skip to content

Adding multiple item boxes support #633

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Adding multiple item boxes support #633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0087bfc
Adding multiple item boxes support
ThembaMahlangu Oct 1, 2025
735de92
Update app.js
ThembaMahlangu Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 64 additions & 8 deletions html/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ const InventoryContainer = Vue.createApp({
notificationImage: "",
notificationType: "added",
notificationAmount: 1,
// Multiple notifications
notifications: [],
// Required items box
showRequiredItems: false,
requiredItems: [],
Expand Down Expand Up @@ -189,6 +191,8 @@ const InventoryContainer = Vue.createApp({
async closeInventory() {
this.clearDragData();
let inventoryName = this.otherInventoryName;
// Clear all notifications when closing inventory
this.clearAllNotifications();
Object.assign(this, this.getInitialState());
try {
await axios.post("https://qb-inventory/CloseInventory", { name: inventoryName });
Expand Down Expand Up @@ -764,14 +768,66 @@ const InventoryContainer = Vue.createApp({
}
},
showItemNotification(itemData) {
this.notificationText = itemData.item.label;
this.notificationImage = "images/" + itemData.item.image;
this.notificationType = itemData.type === "add" ? "Received" : itemData.type === "use" ? "Used" : "Removed";
this.notificationAmount = itemData.amount || 1;
this.showNotification = true;
setTimeout(() => {
this.showNotification = false;
}, 3000);
const notification = {
id: Date.now() + Math.random(), // Unique ID for each notification
text: itemData.item.label,
image: "images/" + itemData.item.image,
type: itemData.type === "add" ? "Received" : itemData.type === "use" ? "Used" : "Removed",
amount: itemData.amount || 1,
timestamp: Date.now()
};

// Check if we already have a notification for the same item and type
const existingIndex = this.notifications.findIndex(n =>
n.text === notification.text &&
n.type === notification.type
);

if (existingIndex > -1) {
// Update existing notification amount
const existingNotification = this.notifications[existingIndex];
Copy link

@0xF3546 0xF3546 Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You forgit to update the object in notifications-array. JavaScript does not provide pointer's, so you have to update the object in the array again.
like this.notifications[existingIndex] = existingNotification

existingNotification.amount += notification.amount;
existingNotification.timestamp = Date.now();

// Reset the timeout for the existing notification
clearTimeout(existingNotification.timeoutId);
existingNotification.timeoutId = setTimeout(() => {
this.removeNotification(existingNotification.id);
}, 3000);
} else {
// Add new notification
this.notifications.push(notification);

// Limit to maximum 5 notifications
if (this.notifications.length > 5) {
this.removeNotification(this.notifications[0].id);
}

// Auto-remove after 3 seconds
notification.timeoutId = setTimeout(() => {
this.removeNotification(notification.id);
}, 3000);
}
},
removeNotification(notificationId) {
const index = this.notifications.findIndex(n => n.id === notificationId);
if (index > -1) {
// Clear timeout if it exists
const timeoutId = this.notifications[index].timeoutId;
if (timeoutId) {
clearTimeout(timeoutId);
}
this.notifications.splice(index, 1);
}
},
clearAllNotifications() {
// Clear all timeouts
this.notifications.forEach(notification => {
if (notification.timeoutId) {
clearTimeout(notification.timeoutId);
}
});
this.notifications = [];
},
showRequiredItem(data) {
if (data.toggle) {
Expand Down
40 changes: 27 additions & 13 deletions html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,19 +152,33 @@
</div>
</div>
</div>
<div class="notification-container" v-if="showNotification">
<div class="notification-slot">
<div class="notification-title">
<p>{{ notificationType }}</p>
</div>
<div class="item-slot-img">
<img :src="notificationImage" alt="" />
</div>
<div class="item-slot-amount">
<p>x{{ notificationAmount }}</p>
</div>
<div class="item-slot-label">
<p>{{ notificationText }}</p>
<!-- Multiple Notifications Container -->
<div class="notifications-container" v-if="notifications.length > 0">
<div
v-for="(notification, index) in notifications"
:key="notification.id"
class="notification-item"
:style="{
'z-index': 1000 + index,
'opacity': 1
}"
@click="removeNotification(notification.id)"
title="Click to dismiss"
>
<div class="notification-slot">
<div class="notification-close">×</div>
<div class="notification-title">
<p>{{ notification.type }}</p>
</div>
<div class="item-slot-img">
<img :src="notification.image" alt="" />
</div>
<div class="item-slot-amount">
<p>x{{ notification.amount }}</p>
</div>
<div class="item-slot-label">
<p>{{ notification.text }}</p>
</div>
</div>
</div>
</div>
Expand Down
90 changes: 90 additions & 0 deletions html/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,6 +333,96 @@ div {
transform: translate(-50%);
}

/* Multiple Notifications Container */
.notifications-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: fixed;
bottom: 2vh;
left: 50%;
transform: translateX(-50%);
gap: 1vh;
flex-wrap: wrap;
}

.notification-item {
position: relative;
transition: all 0.3s ease;
animation: slideInUp 0.3s ease-out;
margin: 0 0.5vh;
flex-shrink: 0;
}

@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.8);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.notification-item {
cursor: pointer;
}

.notification-item:hover {
transform: scale(1.02);
filter: brightness(1.1);
}

.notification-item:active {
transform: scale(0.98);
}

/* Fade out animation for removal */
.notification-item.removing {
animation: fadeOut 0.3s ease-in forwards;
}

@keyframes fadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-20px);
}
}

/* Close button styling */
.notification-close {
position: absolute;
top: 2px;
right: 2px;
width: 16px;
height: 16px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 10;
}

.notification-item:hover .notification-close {
opacity: 1;
}

.notification-close:hover {
background-color: rgba(255, 0, 0, 0.7);
}

.notification-slot {
position: relative;
width: 10vh;
Expand Down